{"version":3,"file":"tab-panel.cjs","names":[],"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"],"mappings":"6SAwBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,aAEN,OAAQ,CAAC,EAAA,QAAM,CAEf,OAAQ,CAAC,eAAe,CAExB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAC1B,EAGH,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,QAEzD,CAED,MAAM,SAAW,CACf,IAAM,EAAwB,MAAM,KAAK,yBAAyB,EAAA,cAAc,KAAK,IAAI,CAAC,CAErF,EAMH,KAAK,wBAA0B,KAAK,sBAAsB,EAAsB,CALhF,KAAK,wBAA0B,IASnC,QAAS,CACP,sBAAuB,EAAS,CAC9B,IAAI,EAAU,EACV,EAAiB,GAErB,KAAO,GAAS,CACd,GAAI,EAAQ,yBAA2B,KAAM,CAC3C,EAAiB,GACjB,MAEF,EAAU,EAAQ,aAAe,EAAA,cAAc,KAAK,IAAG,CAAyB,KAArB,EAAQ,WAGrE,OAAO,GAEV,CACF,oJA/FO,MAAA,CAVH,GAAE,YAAc,EAAA,KACjB,KAAK,WACJ,SAAU,EAAA,wBAAuB,GAAA,EACjC,kBAAe,UAAY,EAAA,QAC3B,cAAW,GAAK,EAAA,YAChB,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACrB,UAAQ,kCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,EAAA,MAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}