{"version":3,"file":"tab-panel.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","returnFirstEl","element","current","isFirstElement","_hoisted_1","_createElementBlock","$props","$data","$options","_normalizeClass","_renderSlot","_ctx"],"mappings":"kRAwBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,OAAQ,CAACC,EAAAA,OAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,SAAU,IAOZ,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE7B,EAEA,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACxD,GAGF,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyBC,EAAAA,cAAc,KAAK,GAAG,CAAC,EAEpFD,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOnC,EAEA,QAAS,CACP,sBAAuBE,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAeF,EAAAA,cAAc,KAAK,GAAG,EAAIE,EAAQ,WAAa,IAClF,CAEA,OAAOC,CACT,EAEJ,EA5GAC,EAAA,CAAA,KAAA,WAAA,kBAAA,aAAA,iEACEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAA,EAAE,GACnB,KAAK,WACJ,SAAUC,EAAA,wBAAuB,GAAA,EACjC,4BAA2BD,EAAA,KAAK,GAChC,iBAAgBE,EAAA,SAAS,GACzB,MARLC,EAAAA,eAQYH,EAAA,aAAa,EACrB,UAAQ,iBAGRI,aAAQC,EAAA,OAAA,SAAA,CAZZ,EAAA,GAAAP,CAAA,GAAA,WAEaI,EAAA,SAAS"}