{"version":3,"file":"tab.cjs","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\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: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","TAB_IMPORTANCE_MODIFIERS","event","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_withCtx","_renderSlot"],"mappings":"iQAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,QACN,WAAY,CACV,SAAAC,EAAAA,SAGF,OAAQ,CAAC,eAAgB,UAAU,EAEnC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,QAAS,CACP,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAO,CAOL,QAQA,SAGF,MAAQ,CACN,MAAO,0BACLC,EAAAA,yBAEJ,EAEA,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAOC,GAAS,CACd,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEA,MAAOA,GAAS,CACd,KAAK,SAAS,KAAK,EAAE,EACrB,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEJ,EAEA,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,OAC7C,GAGF,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,QAEtC,CACF,kEA/IE,OAAAC,YAAA,EAAAC,cAqBYC,EArBZC,EAAAA,WAqBY,CApBT,aAAcC,EAAA,EAAE,GAChB,MAAK,WAAoCC,EAAA,yBAAyB,QAAQ,EAAGC,EAAA,YAA2BF,EAAA,UAOzG,KAAK,MACJ,mBAAkBE,EAAA,UAAU,GAC5B,4BAA2BF,EAAA,OAAO,GAClC,aAAYA,EAAA,MACb,UAAQ,SACP,SAAUE,EAAA,WAAU,IAAA,KACpB,SAAUA,EAAA,aAAa,UAAYF,EAAA,UAC5BG,EAAA,OACRC,EAAAA,WAAMF,EAAA,YAAY,CAAA,EAAA,CAlBtB,QAAAG,EAAAA,QAqBI,IAAQ,CAARC,aAAQH,EAAA,OAAA,SAAA,IArBZ,EAAA"}