npm - @dialpad/dialtone-vue - Versions diffs - 3.222.0-next.2 → 3.222.1 - Mend

@dialpad/dialtone-vue 3.222.0-next.2 → 3.222.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2055) hide show

package/dist/lib/tab/tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/Tab/TabGroup.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n resolvedTabsClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './TabsConstants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\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 name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n /\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /\n The orientation of the tab list\n * @values horizontal, vertical\n /\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /\n If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n /\n size: {\n type: [String, Number],\n default: 300,\n validator (size) {\n return TAB_LIST_SIZES.includes(String(size));\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabsClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes, used to customize the tab list\n * @deprecated Use tabsClass\n /\n tabListClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n /\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /\n If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n /\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /\n Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n /\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /\n If true, the selection indicator animates between tabs on click.\n * @values true, false\n /\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n computed: {\n resolvedTabsClass () {\n return this.tabListClass ?? this.tabsClass;\n },\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext \|\| !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[size],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home=\"onHomeButton\"\n @keydown.end=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\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: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /\n Identifies the tab group\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n The id of the selected tab panel which should be displayed\n /\n selected: {\n type: String,\n default: '',\n },\n\n /\n If true, disables the tab group\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies inverted styles to the tab group\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n If true, applies borderless styles to the tab group\n * @values true, false\n /\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /\n If provided, applies size styles to the tab group\n * @values default, sm\n /\n size: {\n type: String,\n default: 'default',\n validate (size) {\n return TAB_LIST_SIZES.includes(size);\n },\n },\n\n /\n Pass through classes, used to customize the tab list\n /\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through props, used to customize the tab list\n /\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /\n Change tab event with the arguments: selected id of the current tab and disabled value\n \n @event change\n * @type {Object}\n /\n 'change',\n\n /\n Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n \n @event before-change\n * @type {Event}\n /\n 'before-change',\n ],\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n },\n\n focusId: null,\n tabs: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler () {\n this.provideObj.selected = this.selected;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /\n Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabs = this.getTabChildren();\n },\n\n setFocus (focusId) {\n this.focusId = focusId;\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n this.selectFocusOnTab(indexElement);\n },\n\n tabRight () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n this.selectFocusOnTab(indexElement);\n },\n\n selectFocusOnTab (index) {\n const { context } = this.tabs[index];\n context.focus();\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n const index = this.getFocusedTabIndex();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabs[index];\n this.provideObj.selected = panelId;\n context.focus();\n },\n\n getFocusedTabIndex () {\n // Hot fix https://github.com/dialpad/dialtone/pull/849\n // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n const index = this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabs.length === 0) return;\n this.tabs[0]?.context?.focus();\n },\n\n onEndButton () {\n if (this.tabs.length === 0) return;\n this.tabs[this.tabs.length - 1]?.context?.focus();\n },\n\n isSameTabClicked () {\n const tab = this.tabs[this.getFocusedTabIndex()];\n return this.provideObj.selected === tab.panelId;\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab-panel.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=tab-panel.cjs.map

package/dist/lib/tab/tab-panel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-panel.cjs","names":[],"sources":["../../../components/~~Tab~~/~~TabPanel~~.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 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,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,~~oJA9FO~~,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"}
1	+ {"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"}

package/dist/lib/tab/tab-panel.js CHANGED Viewed

@@ -2,8 +2,9 @@ import { returnFirstEl as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import n from "../../common/mixins/modal.js";
 import { createElementBlock as r, normalizeClass as i, openBlock as a, renderSlot as o, vShow as s, withDirectives as c } from "vue";
-//#region components/Tab/TabPanel.vue
+//#region components/tab/tab_panel.vue
 var l = {
+	compatConfig: { MODE: 3 },
 	name: "DtTabPanel",
 	mixins: [n],
 	inject: ["groupContext"],

package/dist/lib/tab/tab-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-panel.js","names":[],"sources":["../../../components/~~Tab~~/~~TabPanel~~.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 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":";;;;;AAwBA,IAAK,IAAU;CACb,MAAM;CAEN,QAAQ,CAAC,EAAM;CAEf,QAAQ,CAAC,eAAe;CAExB,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,yBAAyB,IAC1B;;CAGH,UAAU,EACR,YAAa;AACX,SAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;IAEzD;CAED,MAAM,UAAW;EACf,IAAM,IAAwB,MAAM,KAAK,yBAAyB,EAAc,KAAK,IAAI,CAAC;AAE1F,EAAK,IAMH,KAAK,0BAA0B,KAAK,sBAAsB,EAAsB,GALhF,KAAK,0BAA0B;;CASnC,SAAS,EACP,sBAAuB,GAAS;EAC9B,IAAI,IAAU,GACV,IAAiB;AAErB,SAAO,IAAS;AACd,OAAI,EAAQ,2BAA2B,MAAM;AAC3C,QAAiB;AACjB;;AAEF,OAAU,EAAQ,eAAe,EAAc,KAAK,IAAG,GAAyB,OAArB,EAAQ;;AAGrE,SAAO;IAEV;CACF;;;;;;;~~gBA1GC~~,EAYM,OAAA;EAVH,IAAE,YAAc,EAAA;EACjB,MAAK;EACJ,UAAU,EAAA,0BAAuB,KAAA;EACjC,mBAAe,UAAY,EAAA;EAC3B,eAAW,GAAK,EAAA;EAChB,OAAK,EAAE,EAAA,cAAa;EACrB,WAAQ;KAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}
1	+ {"version":3,"file":"tab-panel.js","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":";;;;;AAwBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,QAAQ,CAAC,EAAM;CAEf,QAAQ,CAAC,eAAe;CAExB,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,yBAAyB,IAC1B;;CAGH,UAAU,EACR,YAAa;AACX,SAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;IAEzD;CAED,MAAM,UAAW;EACf,IAAM,IAAwB,MAAM,KAAK,yBAAyB,EAAc,KAAK,IAAI,CAAC;AAE1F,EAAK,IAMH,KAAK,0BAA0B,KAAK,sBAAsB,EAAsB,GALhF,KAAK,0BAA0B;;CASnC,SAAS,EACP,sBAAuB,GAAS;EAC9B,IAAI,IAAU,GACV,IAAiB;AAErB,SAAO,IAAS;AACd,OAAI,EAAQ,2BAA2B,MAAM;AAC3C,QAAiB;AACjB;;AAEF,OAAU,EAAQ,eAAe,EAAc,KAAK,IAAG,GAAyB,OAArB,EAAQ;;AAGrE,SAAO;IAEV;CACF;;;;;;;gBA3GC,EAYM,OAAA;EAVH,IAAE,YAAc,EAAA;EACjB,MAAK;EACJ,UAAU,EAAA,0BAAuB,KAAA;EACjC,mBAAe,UAAY,EAAA;EAC3B,eAAW,GAAK,EAAA;EAChB,OAAK,EAAE,EAAA,cAAa;EACrB,WAAQ;KAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}

package/dist/lib/tab/tab.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`);var r={name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isDisabled(){return this.groupContext.disabled||this.disabled},buttonSize(){let e=this.groupContext.size;return e===`default`?void 0:e},isSelected(){return this.groupContext.selected===this.panelId},isFocusTarget(){let e=this.groupContext.focusedTabId;return e?e===this.id:this.isSelected},buttonKind(){return this.groupContext.outlined?this.groupContext.kind===`muted`?`muted`:`default`:this.groupContext.kind===`muted`?`muted`:this.isSelected?`default`:`muted`},buttonImportance(){return this.groupContext.outlined&&this.isSelected?`outlined`:`clear`},buttonActive(){return this.groupContext.outlined?!1:this.groupContext.kind===`muted`?this.isSelected:!1}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)},beforeUnmount(){this.groupContext.focusedTabId===this.id&&this.setFocus(null)},methods:{}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-button`);return(0,n.openBlock)(),(0,n.createBlock)(s,(0,n.mergeProps)({id:`dt-tab-${r.id}`,class:[`d-tablist__item`,r.tabClass,{"d-tablist__item--vertical":o.groupContext.orientation===`vertical`},{"d-btn--disabled":o.isDisabled},{"d-tab--is-selected":!o.groupContext.outlined&&o.groupContext.kind!==`muted`&&o.isSelected}],importance:o.buttonImportance,kind:o.buttonKind,active:o.buttonActive,size:o.buttonSize,role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${r.panelId}`,"aria-label":r.label,"aria-disabled":o.isDisabled?`true`:void 0,"label-class":r.labelClass,"leading-class":r.leadingClass,"trailing-class":r.trailingClass,"data-qa":`dt-tab`,tabindex:o.isFocusTarget?`0`:`-1`},e.$attrs,(0,n.toHandlers)(o.tabListeners)),(0,n.createSlots)({default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:e.$slots.icon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`icon`,{iconSize:t})]),key:`1`}:void 0,e.$slots.endIcon?{name:`endIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`endIcon`,{iconSize:t})]),key:`2`}:void 0,e.$slots.leading?{name:`leading`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`leading`)]),key:`3`}:void 0,e.$slots.trailing?{name:`trailing`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`trailing`)]),key:`4`}:void 0]),1040,[`id`,`class`,`importance`,`kind`,`active`,`size`,`aria-selected`,`aria-controls`,`aria-label`,`aria-disabled`,`label-class`,`leading-class`,`trailing-class`,`tabindex`])}var a=e.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`./tabs-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],data(){return{TAB_IMPORTANCE_MODIFIERS:n.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`);return(0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({id:`dt-tab-${n.id}`,class:[`d-tab`,{[a.TAB_IMPORTANCE_MODIFIERS.selected]:o.isSelected},n.tabClass],role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${n.panelId}`,"aria-label":n.label,"data-qa":`dt-tab`,tabindex:o.isSelected?`0`:`-1`,disabled:o.groupContext.disabled||n.disabled},e.$attrs,(0,r.toHandlers)(o.tabListeners)),{default:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`class`,`aria-selected`,`aria-controls`,`aria-label`,`tabindex`,`disabled`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=tab.cjs.map

package/dist/lib/tab/tab.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/~~Tab~~/~~Tab~~.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n 'd-~~tablist__item~~',\n ~~tabClass,\~~n ~~{ 'd-tablist__item--vertical'~~: ~~groupContext.orientation === 'vertical' }~~,\n ~~{ 'd-btn--disabled': isDisabled~~ },\n ~~{ 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected }~~,\n ]\"\n ~~:importance=\"buttonImportance\"\n :kind=\"buttonKind\"\n :active=\"buttonActive\"\n :size=\"buttonSize\"\n~~ role=\"tab\"\n :aria-selected=\"`${isSelected}`\"\n :aria-controls=\"`dt-panel-${panelId}`\"\n :aria-label=\"label\"\n ~~:aria-disabled=\"isDisabled ? 'true' : undefined\"\n :label-class=\"labelClass\"\n :leading-class=\"leadingClass\"\n :trailing-class=\"trailingClass\"\n~~ data-qa=\"dt-tab\"\n :tabindex=\"~~isFocusTarget~~ ? '0' : '-1'\"\n v-bind=\"$attrs\"\n v-on=\"tabListeners\"\n >\n <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n <template\n v-if=\"$slots.startIcon\"\n #startIcon=\"{ iconSize }\"\n >\n <slot\n name=\"startIcon\"\n :~~icon-size~~=\"~~iconSize\"\n />\n </template>\n <!-- @slot @deprecated Use startIcon -->\n <template\n v-else-if=\"$slots~~.~~icon\"\n #startIcon=\"{~~ ~~iconSize~~ }\"\n ~~>\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n <template\n~~ v-if=\"$~~slots.endIcon~~\"\n ~~#endIcon=\"{ iconSize }\"\n~~ ~~>\n <slot\n name=\"endIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n~~ v-if=\"~~$slots.leading~~\"\n ~~#leading\n~~ >\n ~~<slot name=\"leading\" />\n~~ ~~</template>\n <template\n v-if=\"$slots.trailing\"\n #trailing\n >\n <slot name=\"trailing\" />\n </template>\n~~ <!-- @slot default slot, defaults contains dt-button -->\n <slot />\n </dt-button>\n</template>\n\n<script>\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 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 Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the leading container\n /\n leadingClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the trailing container\n /\n trailingClass: {\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 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 isDisabled () {\n return this.groupContext.disabled \|\| this.disabled;\n },\n\n buttonSize () {\n const size = this.groupContext.size;\n return size === 'default' ? undefined : size;\n },\n\n isSelected () {\n return this.groupContext.selected === this.panelId;\n },\n\n isFocusTarget () {\n const focusedId = this.groupContext.focusedTabId;\n return focusedId ? focusedId === this.id : this.isSelected;\n },\n\n buttonKind () {\n if (this.groupContext.outlined) {\n return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n }\n if (this.groupContext.kind === 'muted') {\n return 'muted';\n }\n return this.isSelected ? 'default' : 'muted';\n },\n\n buttonImportance () {\n if (this.groupContext.outlined && this.isSelected) {\n return 'outlined';\n }\n return 'clear';\n },\n\n buttonActive () {\n if (this.groupContext.outlined) {\n return false;\n }\n if (this.groupContext.kind === 'muted') {\n return this.isSelected;\n }\n return false;\n },\n },\n\n mounted () {\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n~~\n beforeUnmount () {\n if (this.groupContext.focusedTabId === this.id) {\n this.setFocus(null);\n~~ }~~\n },\n\n methods: {\n },\n}~~;\n</script>\n"],"mappings":"~~0PAiFA~~,IAAK,EAAU,CACb,KAAM,QACN,WAAY,CACV,SAAA,EAAA,QACD,CAED,OAAQ,CAAC,eAAgB,WAAW,CAEpC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,QAAS,CACP,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,~~CAKD~~,~~WAAY~~,~~CACV,KAAM,CAAC,OAAQ,~~MAAO,~~OAAO~~,~~CAC7B~~,~~QAAS~~,~~GACV~~,~~CAKD~~,~~aAAc~~,~~CACZ,KAAM,CAAC,OAAQ,~~MAAO,~~OAAO~~,~~CAC7B~~,~~QAAS~~,~~GACV~~,~~CAKD~~,~~cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAQA,QACD,CAED,~~SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAG5B,MAAO,GAAS,CACd,KAAK,SAAS,KAAK,GAAG,CACtB,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,YAAc,CACZ,OAAO,KAAK,aAAa,~~UAAY,KAAK,UAG5C,YAAc,CACZ,IAAM,EAAO,KAAK,aAAa,KAC/B,OAAO,IAAS,UAAY,IAAA,GAAY,GAG1C,YAAc,CACZ,OAAO,KAAK,aAAa,~~WAAa,KAAK,~~SAG7C~~,eAAiB,CACf,IAAM,EAAY,KAAK,aAAa,aACpC,OAAO,EAAY,IAAc,KAAK,GAAK,KAAK,YAGlD,YAAc,CAOZ,OANI,KAAK,aAAa,SACb,KAAK,aAAa,OAAS,QAAU,QAAU,UAEpD,KAAK,aAAa,OAAS,QACtB,QAEF,KAAK,WAAa,UAAY,SAGvC,kBAAoB,CAIlB,OAHI,KAAK,aAAa,UAAY,KAAK,WAC9B,WAEF,SAGT,cAAgB,CAOd,OANI,KAAK,aAAa,SACb,GAEL,KAAK,aAAa,OAAS,QACtB,KAAK,WAEP,IAEV,CAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,~~UAItC~~,~~eAAiB~~,~~CACX,KAAK,aAAa,eAAiB,KAAK,IAC1C,KAAK,SAAS,KAAK,EAIvB,QAAS,EACR,CACF,6GA5La,~~GAAA,EAAA,EAAA,YAAA,~~CArET~~,GAAE,UAAY,EAAA,KACd,MAAK,~~mBAAmC~~,EAAA,~~sCAA+C~~,EAAA,~~aAAa,cAAW,~~WAAA,~~oBAA8C~~,EAAA,~~WAAU~~,~~wBAAmC,EAAA,aAAa,UAAY,EAAA,aAAa,OAAI,SAAgB,EAAA,WAAU,EAO9Q,WAAY,EAAA,iBACZ,KAAM,EAAA,WACN,OAAQ,EAAA,aACR,KAAM,EAAA,WACP,~~KAAK,MACJ,gBAAa,GAAK,EAAA,aAClB,gBAAa,YAAc,EAAA,UAC3B,aAAY,EAAA,~~MACZ~~,~~gBAAe,EAAA,WAAU,OAAY,IAAA,GACrC,cAAa,EAAA,WACb,gBAAe,EAAA,aACf,iBAAgB,EAAA,cACjB,~~UAAQ,SACP,SAAU,EAAA,~~cAAa~~,IAAA,~~MAChB~~,~~EAAA~~,~~QAAA,~~EAAA,~~EAAA~~,~~YACW~~,~~EAAb,aAAY,CAAA,~~EAAA,~~EAAA~~,EAAA,aAAA,2BA6CV,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,OAzCA,EAAA,OAAO,UAAA,MACZ,8BAKC,CALY,cAAQ,EAAA,EAAA,EAAA,YAKpB,EAAA,OAAA,YAAA,CADY,WAAQ,CAAA,CAAA,CAAA,UAKX,EAAA,OAAO,KAAA,MACjB,8BAKC,CALY,cAAQ,EAAA,EAAA,EAAA,YAKpB,EAAA,OAAA,OAAA,CADY,WAAQ,CAAA,CAAA,CAAA,iBAKhB,EAAA,OAAO,QAAA,~~MACZ,4BAKC,CALU,cAAQ,~~EAAA,EAAA,~~EAAA~~,~~YAKlB~~,~~EAAA~~,~~OAAA,UAAA,CADY,WAAQ,~~CAAA,CAAA,~~CAAA~~,~~iBAIhB,~~EAAA,~~OAAO,QAAA,MACZ,+BAEsB,~~EAAA,EAAA,~~EAAA,~~YAAA,EAAA,OAAA,UAAA,CAAA,CAAA~~,iBAGjB,EAAA,OAAO,SAAA,MACZ,gCAEuB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,WAAA,CAAA,CAAA~~"}
1	+ {"version":3,"file":"tab.cjs","names":[],"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"],"mappings":"4RAiCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,QACN,WAAY,CACV,SAAA,EAAA,QACD,CAED,OAAQ,CAAC,eAAgB,WAAW,CAEpC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,QAAS,CACP,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAQA,QACD,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACD,EAGH,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAG5B,MAAO,GAAS,CACd,KAAK,SAAS,KAAK,GAAG,CACtB,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,SAE9C,CAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,UAGvC,6GA1Ha,GAAA,EAAA,EAAA,YAAA,CApBT,GAAE,UAAY,EAAA,KACd,MAAK,WAAoC,EAAA,yBAAyB,UAAW,EAAA,WAAA,CAA2B,EAAA,UAOzG,KAAK,MACJ,gBAAa,GAAK,EAAA,aAClB,gBAAa,YAAc,EAAA,UAC3B,aAAY,EAAA,MACb,UAAQ,SACP,SAAU,EAAA,WAAU,IAAA,KACpB,SAAU,EAAA,aAAa,UAAY,EAAA,UAC5B,EAAA,QAAA,EAAA,EAAA,YACW,EAAb,aAAY,CAAA,CAAA,2BAGV,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/lib/tab/tab.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "../button/button.js";
-import { createBlock as n, createSlots as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, toHandlers as c, withCtx as l } from "vue";
-//#region components/Tab/Tab.vue
+import { TAB_IMPORTANCE_MODIFIERS as n } from "./tabs-constants.js";
+import { createBlock as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, toHandlers as c, withCtx as l } from "vue";
+//#region components/tab/tab.vue
 var u = {
+	compatConfig: { MODE: 3 },
 	name: "DtTab",
 	components: { DtButton: t },
 	inject: ["groupContext", "setFocus"],
@@ -35,33 +37,12 @@ var u = {
 				Object
 			],
 			default: ""
-		},
-		labelClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		leadingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		trailingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
 	emits: ["focus", "click"],
+	data() {
+		return { TAB_IMPORTANCE_MODIFIERS: n };
+	},
 	computed: {
 		tabListeners() {
 			return {
@@ -73,106 +54,41 @@ var u = {
 				}
 			};
 		},
-		isDisabled() {
-			return this.groupContext.disabled || this.disabled;
-		},
-		buttonSize() {
-			let e = this.groupContext.size;
-			return e === "default" ? void 0 : e;
-		},
 		isSelected() {
 			return this.groupContext.selected === this.panelId;
-		},
-		isFocusTarget() {
-			let e = this.groupContext.focusedTabId;
-			return e ? e === this.id : this.isSelected;
-		},
-		buttonKind() {
-			return this.groupContext.outlined ? this.groupContext.kind === "muted" ? "muted" : "default" : this.groupContext.kind === "muted" ? "muted" : this.isSelected ? "default" : "muted";
-		},
-		buttonImportance() {
-			return this.groupContext.outlined && this.isSelected ? "outlined" : "clear";
-		},
-		buttonActive() {
-			return this.groupContext.outlined ? !1 : this.groupContext.kind === "muted" ? this.isSelected : !1;
 		}
 	},
 	mounted() {
 		this.selected && (this.groupContext.selected = this.panelId);
-	},
-	beforeUnmount() {
-		this.groupContext.focusedTabId === this.id && this.setFocus(null);
-	},
-	methods: {}
+	}
 };
-function d(e, t, u, d, f, p) {
-	let m = s("dt-button");
-	return a(), n(m, i({
-		id: `dt-tab-${u.id}`,
+function d(e, t, n, u, d, f) {
+	let p = s("dt-button");
+	return a(), r(p, i({
+		id: `dt-tab-${n.id}`,
 		class: [
-			"d-tablist__item",
-			u.tabClass,
-			{ "d-tablist__item--vertical": p.groupContext.orientation === "vertical" },
-			{ "d-btn--disabled": p.isDisabled },
-			{ "d-tab--is-selected": !p.groupContext.outlined && p.groupContext.kind !== "muted" && p.isSelected }
+			"d-tab",
+			{ [d.TAB_IMPORTANCE_MODIFIERS.selected]: f.isSelected },
+			n.tabClass
 		],
-		importance: p.buttonImportance,
-		kind: p.buttonKind,
-		active: p.buttonActive,
-		size: p.buttonSize,
 		role: "tab",
-		"aria-selected": `${p.isSelected}`,
-		"aria-controls": `dt-panel-${u.panelId}`,
-		"aria-label": u.label,
-		"aria-disabled": p.isDisabled ? "true" : void 0,
-		"label-class": u.labelClass,
-		"leading-class": u.leadingClass,
-		"trailing-class": u.trailingClass,
+		"aria-selected": `${f.isSelected}`,
+		"aria-controls": `dt-panel-${n.panelId}`,
+		"aria-label": n.label,
 		"data-qa": "dt-tab",
-		tabindex: p.isFocusTarget ? "0" : "-1"
-	}, e.$attrs, c(p.tabListeners)), r({
+		tabindex: f.isSelected ? "0" : "-1",
+		disabled: f.groupContext.disabled || n.disabled
+	}, e.$attrs, c(f.tabListeners)), {
 		default: l(() => [o(e.$slots, "default")]),
-		_: 2
-	}, [
-		e.$slots.startIcon ? {
-			name: "startIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "startIcon", { iconSize: t })]),
-			key: "0"
-		} : e.$slots.icon ? {
-			name: "startIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "icon", { iconSize: t })]),
-			key: "1"
-		} : void 0,
-		e.$slots.endIcon ? {
-			name: "endIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "endIcon", { iconSize: t })]),
-			key: "2"
-		} : void 0,
-		e.$slots.leading ? {
-			name: "leading",
-			fn: l(() => [o(e.$slots, "leading")]),
-			key: "3"
-		} : void 0,
-		e.$slots.trailing ? {
-			name: "trailing",
-			fn: l(() => [o(e.$slots, "trailing")]),
-			key: "4"
-		} : void 0
-	]), 1040, [
+		_: 3
+	}, 16, [
 		"id",
 		"class",
-		"importance",
-		"kind",
-		"active",
-		"size",
 		"aria-selected",
 		"aria-controls",
 		"aria-label",
-		"aria-disabled",
-		"label-class",
-		"leading-class",
-		"trailing-class",
-		"tabindex"
+		"tabindex",
+		"disabled"
 	]);
 }
 var f = /* @__PURE__ */ e(u, [["render", d]]);

package/dist/lib/tab/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.js","names":[],"sources":["../../../components/~~Tab~~/~~Tab~~.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n 'd-~~tablist__item~~',\n ~~tabClass,\~~n ~~{ 'd-tablist__item--vertical'~~: ~~groupContext.orientation === 'vertical' }~~,\n ~~{ 'd-btn--disabled': isDisabled~~ },\n ~~{ 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected }~~,\n ]\"\n ~~:importance=\"buttonImportance\"\n :kind=\"buttonKind\"\n :active=\"buttonActive\"\n :size=\"buttonSize\"\n~~ role=\"tab\"\n :aria-selected=\"`${isSelected}`\"\n :aria-controls=\"`dt-panel-${panelId}`\"\n :aria-label=\"label\"\n ~~:aria-disabled=\"isDisabled ? 'true' : undefined\"\n :label-class=\"labelClass\"\n :leading-class=\"leadingClass\"\n :trailing-class=\"trailingClass\"\n~~ data-qa=\"dt-tab\"\n :tabindex=\"~~isFocusTarget~~ ? '0' : '-1'\"\n v-bind=\"$attrs\"\n v-on=\"tabListeners\"\n >\n <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n <template\n v-if=\"$slots.startIcon\"\n #startIcon=\"{ iconSize }\"\n >\n <slot\n name=\"startIcon\"\n :~~icon-size~~=\"~~iconSize\"\n />\n </template>\n <!-- @slot @deprecated Use startIcon -->\n <template\n v-else-if=\"$slots~~.~~icon\"\n #startIcon=\"{~~ ~~iconSize~~ }\"\n ~~>\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n <template\n~~ v-if=\"$~~slots.endIcon~~\"\n ~~#endIcon=\"{ iconSize }\"\n~~ ~~>\n <slot\n name=\"endIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n~~ v-if=\"~~$slots.leading~~\"\n ~~#leading\n~~ >\n ~~<slot name=\"leading\" />\n~~ ~~</template>\n <template\n v-if=\"$slots.trailing\"\n #trailing\n >\n <slot name=\"trailing\" />\n </template>\n~~ <!-- @slot default slot, defaults contains dt-button -->\n <slot />\n </dt-button>\n</template>\n\n<script>\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 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 Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the leading container\n /\n leadingClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the trailing container\n /\n trailingClass: {\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 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 isDisabled () {\n return this.groupContext.disabled \|\| this.disabled;\n },\n\n buttonSize () {\n const size = this.groupContext.size;\n return size === 'default' ? undefined : size;\n },\n\n isSelected () {\n return this.groupContext.selected === this.panelId;\n },\n\n isFocusTarget () {\n const focusedId = this.groupContext.focusedTabId;\n return focusedId ? focusedId === this.id : this.isSelected;\n },\n\n buttonKind () {\n if (this.groupContext.outlined) {\n return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n }\n if (this.groupContext.kind === 'muted') {\n return 'muted';\n }\n return this.isSelected ? 'default' : 'muted';\n },\n\n buttonImportance () {\n if (this.groupContext.outlined && this.isSelected) {\n return 'outlined';\n }\n return 'clear';\n },\n\n buttonActive () {\n if (this.groupContext.outlined) {\n return false;\n }\n if (this.groupContext.kind === 'muted') {\n return this.isSelected;\n }\n return false;\n },\n },\n\n mounted () {\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n~~\n beforeUnmount () {\n if (this.groupContext.focusedTabId === this.id) {\n this.setFocus(null);\n~~ }~~\n },\n\n methods: {\n },\n}~~;\n</script>\n"],"mappings":"~~;;;;AAiFA~~,IAAK,IAAU;CACb,MAAM;CACN,YAAY,EACV,UAAA,GACD;CAED,QAAQ,CAAC,gBAAgB,WAAW;CAEpC,cAAc;CAEd,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;~~EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;~~EACF;CAED,OAAO,CAOL,SAQA,QACD;CAED,UAAU;EACR,eAAgB;AACd,UAAO;IACL,QAAO,MAAS;AACd,UAAK,MAAM,SAAS,EAAM;;IAG5B,QAAO,MAAS;AAEd,KADA,KAAK,SAAS,KAAK,GAAG,EACtB,KAAK,MAAM,SAAS,EAAM;;IAE7B;;EAGH,aAAc;AACZ,UAAO,KAAK,aAAa,~~YAAY,KAAK;;EAG5C,aAAc;GACZ,IAAM,IAAO,KAAK,~~aAAa~~;AAC/B~~,~~UAAO,MAAS,YAAY,KAAA,IAAY;;EAG1C,aAAc;AACZ,UAAO,~~KAAK~~,aAAa,aAAa,KAAK~~;;~~EAG7C,gBAAiB~~;GACf,IAAM,IAAY,KAAK,aAAa;AACpC,UAAO,IAAY,MAAc,KAAK,KAAK,KAAK;;EAGlD,aAAc;AAOZ,UANI,KAAK,aAAa,WACb,KAAK,aAAa,SAAS,UAAU,UAAU,YAEpD,KAAK,aAAa,SAAS,UACtB,UAEF,KAAK,aAAa,YAAY;;EAGvC,mBAAoB;AAIlB,UAHI,KAAK,aAAa,YAAY,KAAK,aAC9B,aAEF;;EAGT,eAAgB;AAOd,UANI,KAAK,aAAa,WACb,KAEL,KAAK,aAAa,SAAS,UACtB,KAAK,aAEP;;EAEV;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,aAAa,WAAW,KAAK;;~~CAItC,gBAAiB;AACf,EAAI,KAAK,aAAa,iBAAiB,KAAK,MAC1C,KAAK,SAAS,KAAK;;CAIvB,SAAS,EACR;CACF~~;;;~~aAlQC~~,~~EAsEY~~,~~GAtEZ~~,~~EAsEY~~;~~EArET~~,IAAE,UAAY,EAAA;EACd,OAAK;;~~GAAmC~~,EAAA~~;kCAA+C~~,~~EAAA~~,~~aAAa~~,~~gBAAW~~,YAAA;~~wBAA8C~~,EAAA~~,YAAU;4BAAmC,EAAA,aAAa,YAAY,EAAA,aAAa,SAAI,WAAgB,EAAA,YAAU~~;;~~EAO9Q~~,~~YAAY,EAAA;EACZ,MAAM,EAAA;EACN,QAAQ,EAAA;EACR,MAAM,EAAA;EACP,~~MAAK;EACJ,iBAAa,GAAK,EAAA;EAClB,iBAAa,YAAc,EAAA;EAC3B,cAAY,EAAA;~~EACZ~~,~~iBAAe,EAAA,aAAU,SAAY,KAAA~~;~~EACrC~~,~~eAAa~~,EAAA~~;EACb~~,~~iBAAe~~,~~EAAA~~;~~EACf~~,~~kBAAgB~~,EAAA~~;EACjB~~,~~WAAQ;EACP~~,~~UAAU~~,EAAA~~,gBAAa,MAAA~~;~~IAChB~~,EAAA,QACR,EAAmB,EAAb,aAAY,CAAA,EAAA~~,EAAA~~;~~mBA6CV~~,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;EAzCA,EAAA,OAAO,YAAA;SACZ;UAKC,EALY,kBAAQ,CAEtB,EAGE,EAAA,QAAA,aAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;MAKX,EAAA,OAAO,OAAA;SACjB;UAKC,EALY,kBAAQ,CAEtB,EAGE,EAAA,QAAA,QAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;;EAKhB,EAAA,OAAO,UAAA;SACZ;UAKC,EALU,kBAAQ,CAEpB,EAGE,EAAA,QAAA,WAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;;EAIhB,EAAA,OAAO,UAAA;SACZ;eAEsB,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;EAGjB,EAAA,OAAO,WAAA;SACZ;eAEuB,CAAxB,EAAwB,EAAA,QAAA,WAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"tab.js","names":[],"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"],"mappings":";;;;;AAiCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EACV,UAAA,GACD;CAED,QAAQ,CAAC,gBAAgB,WAAW;CAEpC,cAAc;CAEd,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAO,CAOL,SAQA,QACD;CAED,OAAQ;AACN,SAAO,EACL,6BACD;;CAGH,UAAU;EACR,eAAgB;AACd,UAAO;IACL,QAAO,MAAS;AACd,UAAK,MAAM,SAAS,EAAM;;IAG5B,QAAO,MAAS;AAEd,KADA,KAAK,SAAS,KAAK,GAAG,EACtB,KAAK,MAAM,SAAS,EAAM;;IAE7B;;EAGH,aAAc;AACZ,UAAO,KAAK,aAAa,aAAa,KAAK;;EAE9C;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,aAAa,WAAW,KAAK;;CAGvC;;;aA/IC,EAqBY,GArBZ,EAqBY;EApBT,IAAE,UAAY,EAAA;EACd,OAAK;;MAAoC,EAAA,yBAAyB,WAAW,EAAA,YAAA;GAA2B,EAAA;;EAOzG,MAAK;EACJ,iBAAa,GAAK,EAAA;EAClB,iBAAa,YAAc,EAAA;EAC3B,cAAY,EAAA;EACb,WAAQ;EACP,UAAU,EAAA,aAAU,MAAA;EACpB,UAAU,EAAA,aAAa,YAAY,EAAA;IAC5B,EAAA,QACR,EAAmB,EAAb,aAAY,CAAA,EAAA;mBAGV,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/lib/tab/tabs-constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`100`,`200`,`300`,`400`,`500`,`default`,`xs`,`sm`,`md`,`lg`,`xl`],t={100:`d-tablist--xs`,200:`d-tablist--sm`,300:``,400:`d-tablist--lg`,500:`d-tablist--xl`,xs:`d-tablist--xs`,sm:`d-tablist--sm`,md:``,lg:`d-tablist--lg`,xl:`d-tablist--xl`,default:``},n={inverted:`d-tablist--inverted`},r={borderless:`d-tablist--no-border`},i=[`horizontal`,`vertical`],a={vertical:`d-tablist--vertical`},o=[`auto`,`manual`],s=[`default`,`muted`],c=[`none`,`grow`,`equal`],l={grow:`d-tablist--spread-grow`,equal:`d-tablist--spread-equal`};exports.TAB_ACTIVATION_MODES=o,exports.TAB_GROUP_KINDS=s,exports.TAB_LIST_IMPORTANCE_MODIFIERS=r,exports.TAB_LIST_KIND_MODIFIERS=n,exports.TAB_LIST_SIZES=e,exports.TAB_LIST_SIZE_MODIFIERS=t,exports.TAB_ORIENTATIONS=i,exports.TAB_ORIENTATION_MODIFIERS=a,exports.TAB_SPREADS=c,exports.TAB_SPREAD_MODIFIERS=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`default`,`sm`],t={sm:`d-tablist--sm`},n={inverted:`d-tablist--inverted`},r={borderless:`d-tablist--no-border`},i={selected:`d-tab--selected`};exports.TAB_IMPORTANCE_MODIFIERS=i,exports.TAB_LIST_IMPORTANCE_MODIFIERS=r,exports.TAB_LIST_KIND_MODIFIERS=n,exports.TAB_LIST_SIZES=e,exports.TAB_LIST_SIZE_MODIFIERS=t;
 //# sourceMappingURL=tabs-constants.cjs.map

package/dist/lib/tab/tabs-constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-constants.cjs","names":[],"sources":["../../../components/~~Tab~~/~~TabsConstants~~.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['~~100', '200', '300', '400', '500', '~~default', '~~xs', '~~sm'~~, 'md', 'lg', 'xl'~~];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n ~~// Numeric (preferred)\n 100: 'd-tablist--xs',\n 200: 'd-tablist--~~sm~~',\n 300~~: '~~',\n 400: '~~d-tablist--~~lg',\n 500: 'd-tablist--xl',\n // T-shirt aliases (deprecated)\n xs: 'd-tablist--xs',\n~~ sm: '~~d-tablist--sm'~~,\n ~~md: '',\n lg: 'd-tablist--lg',\n xl: 'd-tablist--xl',\n // Legacy alias\n default: '',\n~~};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n borderless: 'd-tablist--no-border',\n};\n\nexport const ~~TAB_ORIENTATIONS~~ = ~~['horizontal', 'vertical'];\n\nexport const TAB_ORIENTATION_MODIFIERS =~~ {\n ~~vertical~~: 'd-~~tablist~~--~~vertical~~',\n};\n\nexport const TAB_ACTIVATION_MODES = ['auto', 'manual'];\n\nexport const TAB_GROUP_KINDS = ['default', 'muted'];\n\nexport const TAB_SPREADS = ['none', 'grow', 'equal'];\n\nexport const TAB_SPREAD_MODIFIERS = {\n grow: 'd-tablist--spread-grow',\n equal: 'd-tablist--spread-equal',\n};\n"],"mappings":"mEAAA,IAAa,EAAiB,CAAC,~~MAAO,MAAO,MAAO,MAAO,MAAO,~~UAAW,~~KAAM,KAAM,KAAM,KAAM,~~KAAK,~~CAE7F~~,EAA0B,~~CAErC~~,~~IAAK~~,gBACL,~~IAAK,gBACL,IAAK,GACL,IAAK,gBACL,IAAK,gBAEL,GAAI,gBACJ,GAAI,gBACJ,GAAI,GACJ,GAAI,gBACJ,GAAI,gBAEJ,QAAS,GACV,~~CAEY,EAA0B,CACrC,SAAU,sBACX,CAEY,EAAgC,CAC3C,WAAY,uBACb,CAEY,~~EAAmB~~,~~CAAC~~,~~aAAc,WAAW,CAE7C,EAA4B,CACvC,~~SAAU,~~sBACX,CAEY,EAAuB,CAAC,OAAQ,SAAS,CAEzC,EAAkB,CAAC,UAAW,QAAQ,CAEtC,EAAc,CAAC,OAAQ,OAAQ,QAAQ,CAEvC,EAAuB,CAClC,KAAM,yBACN,MAAO,0BACR~~"}
1	+ {"version":3,"file":"tabs-constants.cjs","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n selected: 'd-tab--selected',\n};\n"],"mappings":"mEAAA,IAAa,EAAiB,CAAC,UAAW,KAAK,CAElC,EAA0B,CACrC,GAAI,gBACL,CAEY,EAA0B,CACrC,SAAU,sBACX,CAEY,EAAgC,CAC3C,WAAY,uBACb,CAEY,EAA2B,CACtC,SAAU,kBACX"}

package/dist/lib/tab/tabs-constants.js CHANGED Viewed

@@ -1,37 +1,6 @@
-//#region components/Tab/TabsConstants.js
-var e = [
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"default",
-	"xs",
-	"sm",
-	"md",
-	"lg",
-	"xl"
-], t = {
-	100: "d-tablist--xs",
-	200: "d-tablist--sm",
-	300: "",
-	400: "d-tablist--lg",
-	500: "d-tablist--xl",
-	xs: "d-tablist--xs",
-	sm: "d-tablist--sm",
-	md: "",
-	lg: "d-tablist--lg",
-	xl: "d-tablist--xl",
-	default: ""
-}, n = { inverted: "d-tablist--inverted" }, r = { borderless: "d-tablist--no-border" }, i = ["horizontal", "vertical"], a = { vertical: "d-tablist--vertical" }, o = ["auto", "manual"], s = ["default", "muted"], c = [
-	"none",
-	"grow",
-	"equal"
-], l = {
-	grow: "d-tablist--spread-grow",
-	equal: "d-tablist--spread-equal"
-};
+//#region components/tab/tabs_constants.js
+var e = ["default", "sm"], t = { sm: "d-tablist--sm" }, n = { inverted: "d-tablist--inverted" }, r = { borderless: "d-tablist--no-border" }, i = { selected: "d-tab--selected" };
 //#endregion
-export { o as TAB_ACTIVATION_MODES, s as TAB_GROUP_KINDS, r as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, e as TAB_LIST_SIZES, t as TAB_LIST_SIZE_MODIFIERS, i as TAB_ORIENTATIONS, a as TAB_ORIENTATION_MODIFIERS, c as TAB_SPREADS, l as TAB_SPREAD_MODIFIERS };
+export { i as TAB_IMPORTANCE_MODIFIERS, r as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, e as TAB_LIST_SIZES, t as TAB_LIST_SIZE_MODIFIERS };
 //# sourceMappingURL=tabs-constants.js.map

package/dist/lib/tab/tabs-constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-constants.js","names":[],"sources":["../../../components/~~Tab~~/~~TabsConstants~~.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['~~100', '200', '300', '400', '500', '~~default', '~~xs', '~~sm'~~, 'md', 'lg', 'xl'~~];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n ~~// Numeric (preferred)\n 100: 'd-tablist--xs',\n 200: 'd-tablist--~~sm~~',\n 300~~: '~~',\n 400: '~~d-tablist--~~lg',\n 500: 'd-tablist--xl',\n // T-shirt aliases (deprecated)\n xs: 'd-tablist--xs',\n~~ sm: '~~d-tablist--sm'~~,\n ~~md: '',\n lg: 'd-tablist--lg',\n xl: 'd-tablist--xl',\n // Legacy alias\n default: '',\n~~};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n borderless: 'd-tablist--no-border',\n};\n\nexport const ~~TAB_ORIENTATIONS~~ = ~~['horizontal', 'vertical'];\n\nexport const TAB_ORIENTATION_MODIFIERS =~~ {\n ~~vertical~~: 'd-~~tablist~~--~~vertical~~',\n};\n\nexport const TAB_ACTIVATION_MODES = ['auto', 'manual'];\n\nexport const TAB_GROUP_KINDS = ['default', 'muted'];\n\nexport const TAB_SPREADS = ['none', 'grow', 'equal'];\n\nexport const TAB_SPREAD_MODIFIERS = {\n grow: 'd-tablist--spread-grow',\n equal: 'd-tablist--spread-equal',\n};\n"],"mappings":";AAAA,IAAa,IAAiB;CAAC~~;CAAO;CAAO;CAAO;CAAO;CAAO;CAAW;CAAM;CAAM;CAAM;CAAM;CAAK~~,~~EAE7F~~,~~IAA0B;CAErC,~~KAAK~~;CACL~~,~~KAAK;CACL~~,~~KAAK;CACL~~,~~KAAK;CACL~~,~~KAAK;CAEL,~~IAAI~~;CACJ~~,~~IAAI;CACJ~~,~~IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,SAAS;CACV,~~EAEY,IAA0B,EACrC,UAAU,uBACX,EAEY,IAAgC,EAC3C,YAAY,wBACb,EAEY,~~IAAmB~~,~~CAAC~~,~~cAAc,WAAW,EAE7C,IAA4B,EACvC,~~UAAU,~~uBACX,EAEY,IAAuB,CAAC,QAAQ,SAAS,EAEzC,IAAkB,CAAC,WAAW,QAAQ,EAEtC,IAAc;CAAC;CAAQ;CAAQ;CAAQ,EAEvC,IAAuB;CAClC,MAAM;CACN,OAAO;CACR~~"}
1	+ {"version":3,"file":"tabs-constants.js","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n selected: 'd-tab--selected',\n};\n"],"mappings":";AAAA,IAAa,IAAiB,CAAC,WAAW,KAAK,EAElC,IAA0B,EACrC,IAAI,iBACL,EAEY,IAA0B,EACrC,UAAU,uBACX,EAEY,IAAgC,EAC3C,YAAY,wBACb,EAEY,IAA2B,EACtC,UAAU,mBACX"}

package/dist/lib/toast/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../~~Toast~~-~~DX-REYXG~~.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../toast-d8_zmgkL.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;

package/dist/lib/toast/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { TOAST_MIN_DURATION as e, TOAST_ROLES as t } from "./toast-constants.js";
-import { t as n } from "../../Toast-CHbVmbBg.js";
+import { t as n } from "../../toast-DvPN-bCi.js";
 export { n as DtToast, e as TOAST_MIN_DURATION, t as TOAST_ROLES };

package/dist/lib/toast/toast-constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast-constants.cjs","names":["NOTICE_KINDS"],"sources":["../../../components/~~Toast~~/~~ToastConstants~~.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/~~Notice~~';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n TOAST_ROLES,\n TOAST_MIN_DURATION,\n TOAST_LAYOUTS,\n TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":"+FACA,IAAa,EAAwB,CAAC,WAAY,6CAAGA,aAAa,CACrD,EAAc,CAAC,SAAU,QAAQ,CACjC,EAAqB,IACrB,EAAgB,CAAC,UAAW,YAAY,CAErD,EAAe,CACb,cACA,qBACA,gBACA,wBACD"}
1	+ {"version":3,"file":"toast-constants.cjs","names":["NOTICE_KINDS"],"sources":["../../../components/toast/toast_constants.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/notice';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n TOAST_ROLES,\n TOAST_MIN_DURATION,\n TOAST_LAYOUTS,\n TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":"+FACA,IAAa,EAAwB,CAAC,WAAY,6CAAGA,aAAa,CACrD,EAAc,CAAC,SAAU,QAAQ,CACjC,EAAqB,IACrB,EAAgB,CAAC,UAAW,YAAY,CAErD,EAAe,CACb,cACA,qBACA,gBACA,wBACD"}

package/dist/lib/toast/toast-constants.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { NOTICE_KINDS as e } from "../notice/notice-constants.js";
-//#region components/Toast/ToastConstants.js
+//#region components/toast/toast_constants.js
 var t = ["gradient", ...e], n = ["status", "alert"], r = 6e3, i = ["default", "alternate"], a = {
 	TOAST_ROLES: n,
 	TOAST_MIN_DURATION: r,

package/dist/lib/toast/toast-constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast-constants.js","names":[],"sources":["../../../components/~~Toast~~/~~ToastConstants~~.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/~~Notice~~';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n TOAST_ROLES,\n TOAST_MIN_DURATION,\n TOAST_LAYOUTS,\n TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":";;AACA,IAAa,IAAwB,CAAC,YAAY,GAAG,EAAa,EACrD,IAAc,CAAC,UAAU,QAAQ,EACjC,IAAqB,KACrB,IAAgB,CAAC,WAAW,YAAY,EAErD,IAAe;CACb;CACA;CACA;CACA;CACD"}
1	+ {"version":3,"file":"toast-constants.js","names":[],"sources":["../../../components/toast/toast_constants.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/notice';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n TOAST_ROLES,\n TOAST_MIN_DURATION,\n TOAST_LAYOUTS,\n TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":";;AACA,IAAa,IAAwB,CAAC,YAAY,GAAG,EAAa,EACrD,IAAc,CAAC,UAAU,QAAQ,EACjC,IAAqB,KACrB,IAAgB,CAAC,WAAW,YAAY,EAErD,IAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/lib/toast/toast.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../~~Toast~~-~~DX-REYXG~~.cjs`);exports.default=e.t;
1	+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../toast-d8_zmgkL.cjs`);exports.default=e.t;

package/dist/lib/toast/toast.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as e } from "../../Toast-CHbVmbBg.js";
+import { t as e } from "../../toast-DvPN-bCi.js";
 export { e as default };

package/dist/lib/toggle/toggle-constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={200:`d-toggle--small`,300:``,sm:`d-toggle--small`,md:``},t=[!1,!0,`mixed`],n={TOGGLE_SIZE_MODIFIERS:e,TOGGLE_CHECKED_VALUES:t};exports.TOGGLE_CHECKED_VALUES=t,exports.TOGGLE_SIZE_MODIFIERS=e,exports.default=n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={sm:`d-toggle--small`,md:``},t=[!1,!0,`mixed`],n={TOGGLE_SIZE_MODIFIERS:e,TOGGLE_CHECKED_VALUES:t};exports.TOGGLE_CHECKED_VALUES=t,exports.TOGGLE_SIZE_MODIFIERS=e,exports.default=n;
 //# sourceMappingURL=toggle-constants.cjs.map

package/dist/lib/toggle/toggle-constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-constants.cjs","names":[],"sources":["../../../components/~~Toggle~~/~~ToggleConstants~~.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n ~~// Numeric (preferred)\n 200: 'd-toggle--small',\n 300: '',\n // T-shirt aliases (deprecated)\n~~ sm: 'd-toggle--small',\n md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n TOGGLE_SIZE_MODIFIERS,\n TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,~~CAEnC~~,~~IAAK,kBACL,IAAK,GAEL,~~GAAI,kBACJ,GAAI,GACL,CAEY,EAAwB,CAAC,GAAO,GAAM,QAAQ,CAE3D,EAAe,CACb,wBACA,wBACD"}
1	+ {"version":3,"file":"toggle-constants.cjs","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n sm: 'd-toggle--small',\n md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n TOGGLE_SIZE_MODIFIERS,\n TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,CACnC,GAAI,kBACJ,GAAI,GACL,CAEY,EAAwB,CAAC,GAAO,GAAM,QAAQ,CAE3D,EAAe,CACb,wBACA,wBACD"}

package/dist/lib/toggle/toggle-constants.js CHANGED Viewed

@@ -1,7 +1,5 @@
-//#region components/Toggle/ToggleConstants.js
+//#region components/toggle/toggle_constants.js
 var e = {
-	200: "d-toggle--small",
-	300: "",
 	sm: "d-toggle--small",
 	md: ""
 }, t = [

package/dist/lib/toggle/toggle-constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-constants.js","names":[],"sources":["../../../components/~~Toggle~~/~~ToggleConstants~~.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n ~~// Numeric (preferred)\n 200: 'd-toggle--small',\n 300: '',\n // T-shirt aliases (deprecated)\n~~ sm: 'd-toggle--small',\n md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n TOGGLE_SIZE_MODIFIERS,\n TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;~~CAEnC~~,~~KAAK;CACL,KAAK;CAEL,~~IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CAAC;CAAO;CAAM;CAAQ,EAE3D,IAAe;CACb;CACA;CACD"}
1	+ {"version":3,"file":"toggle-constants.js","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n sm: 'd-toggle--small',\n md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n TOGGLE_SIZE_MODIFIERS,\n TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CACnC,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CAAC;CAAO;CAAM;CAAQ,EAE3D,IAAe;CACb;CACA;CACD"}

package/dist/lib/toggle/toggle.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(String(e))},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:(0,r.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,r.normalizeStyle)(e.$attrs.style)},[n.showLabel&&c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],6)}var l=t.t(i,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:`md`,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(e)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},wrapperClass:{type:[String,Array,Object],default:void 0},labelChildProps:{type:Object,default:()=>({})}},emits:[`change`,`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{addClassStyleAttrs:e.addClassStyleAttrs,toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.$emit(`change`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs[`aria-label`])},validateInputLabels(e,t){!e&&!t&&(0,r.warn)(`You must provide an aria-label when there is no label passed`,this)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,(0,r.mergeProps)({class:[`d-toggle-wrapper`,n.wrapperClass]},l.addClassStyleAttrs(e.$attrs)),[c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],16)}var l=t.t(i,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=toggle.cjs.map