@dialpad/dialtone 9.86.0 → 9.86.2

package/dist/vue2/components/tab/tab.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.vue.js","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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', '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  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    tabListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          this.selectPanel();\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\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAiCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,sBAAA,gBAAA,UAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,SAAA,KAAA,EAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,0BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,4BAAA;AACA,UAAA,KAAA,UAAA;AACA,aAAA,YAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tab.vue.js","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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', '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  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    tabListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          this.selectPanel();\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\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAiCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,sBAAA,gBAAA,UAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,SAAA,KAAA,EAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,0BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,4BAAA;AACA,UAAA,KAAA,UAAA;AACA,aAAA,YAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/tab/tab_group.vue.cjs

@@ -230,10 +230,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtTabGroup = __component__.exports;
 exports.default = DtTabGroup;

package/dist/vue2/components/tab/tab_group.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab_group.vue.cjs","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      :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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS"],"mappings":"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"}
+{"version":3,"file":"tab_group.vue.cjs","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      :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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS"],"mappings":"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"}

package/dist/vue2/components/tab/tab_group.vue.js

@@ -228,10 +228,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtTabGroup = __component__.exports;
 export {

package/dist/vue2/components/tab/tab_group.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_group.vue.js","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      :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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab_group.vue.js","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      :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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue2/components/tab/tab_panel.vue.cjs

@@ -78,10 +78,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const tab_panel = __component__.exports;
 exports.default = tab_panel;

package/dist/vue2/components/tab/tab_panel.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab_panel.vue.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal"],"mappings":";;;;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,MAAAA,OAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tab_panel.vue.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal"],"mappings":";;;;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,MAAAA,OAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/vue2/components/tab/tab_panel.vue.js

@@ -76,10 +76,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const tab_panel = __component__.exports;
 export {

package/dist/vue2/components/tab/tab_panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_panel.vue.js","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 v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,KAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tab_panel.vue.js","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 v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,KAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/components/toast/toast.vue.cjs

@@ -227,10 +227,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const toast = __component__.exports;
 exports.default = toast;

package/dist/vue2/components/toast/toast.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.vue.cjs","sources":["../../../components/toast/toast.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","TOAST_ROLES","NOTICE_KINDS","TOAST_MIN_DURATION"],"mappings":"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"}
+{"version":3,"file":"toast.vue.cjs","sources":["../../../components/toast/toast.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","TOAST_ROLES","NOTICE_KINDS","TOAST_MIN_DURATION"],"mappings":"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"}

package/dist/vue2/components/toast/toast.vue.js

@@ -225,10 +225,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const toast = __component__.exports;
 export {

package/dist/vue2/components/toast/toast.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.vue.js","sources":["../../../components/toast/toast.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toast.vue.js","sources":["../../../components/toast/toast.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;AA+DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA;AACA,eAAA,YAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA;AACA,eAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA,YAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,UAAA;AACA,eAAA,MAAA,eAAA,KAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,CAAA,CAAA,KAAA,YAAA,KAAA,YAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,SAAA,MAAA;AACA,aAAA,UAAA;AACA,YAAA,MAAA;AACA,eAAA,WAAA;AAAA,QACA,OAAA;AACA,uBAAA,KAAA,YAAA;AAAA,QACA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,YAAA;AACA,QAAA,KAAA,kBAAA;AACA,mBAAA,KAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA;AACA,UAAA,KAAA,kBAAA;AACA,aAAA,eAAA,WAAA,MAAA;AACA,eAAA,UAAA;AACA,eAAA,MAAA,eAAA,KAAA;AAAA,QACA,GAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/toggle/toggle.vue.cjs

@@ -159,10 +159,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const toggle = __component__.exports;
 exports.default = toggle;

package/dist/vue2/components/toggle/toggle.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.vue.cjs","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["utils","TOGGLE_CHECKED_VALUES","TOGGLE_SIZE_MODIFIERS"],"mappings":";;;;;;AAwCA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAAC,uCAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,sCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,OAAA,KAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,kBAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAA,iBAAA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,qBAAA,KAAA,oBAAA;AAAA,UACA,sBAAA,KAAA;AAAA,UACA,2BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA,YAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,WAAA,MAAA,UAAA,CAAA,KAAA,eAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,kBAAA,CAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,aAAA,GAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA,UAAA,WAAA;AACA,UAAA,CAAA,YAAA,CAAA,WAAA;AACA,YAAA,KAAA;AAAA,UACA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.vue.cjs","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["utils","TOGGLE_CHECKED_VALUES","TOGGLE_SIZE_MODIFIERS"],"mappings":";;;;;;AAwCA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAAC,uCAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,sCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,OAAA,KAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,kBAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAA,iBAAA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,qBAAA,KAAA,oBAAA;AAAA,UACA,sBAAA,KAAA;AAAA,UACA,2BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA,YAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,WAAA,MAAA,UAAA,CAAA,KAAA,eAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,kBAAA,CAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,aAAA,GAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA,UAAA,WAAA;AACA,UAAA,CAAA,YAAA,CAAA,WAAA;AACA,YAAA,KAAA;AAAA,UACA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/vue2/components/toggle/toggle.vue.js

@@ -157,10 +157,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const toggle = __component__.exports;
 export {

package/dist/vue2/components/toggle/toggle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.vue.js","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AAwCA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,sBAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,OAAA,KAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,kBAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,qBAAA,KAAA,oBAAA;AAAA,UACA,sBAAA,KAAA;AAAA,UACA,2BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA,YAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,WAAA,MAAA,UAAA,CAAA,KAAA,eAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,kBAAA,CAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,aAAA,GAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA,UAAA,WAAA;AACA,UAAA,CAAA,YAAA,CAAA,WAAA;AACA,YAAA,KAAA;AAAA,UACA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.vue.js","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AAwCA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,sBAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,OAAA,KAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,kBAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,qBAAA,KAAA,oBAAA;AAAA,UACA,sBAAA,KAAA;AAAA,UACA,2BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA,YAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,WAAA,MAAA,UAAA,CAAA,KAAA,eAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,kBAAA,CAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,aAAA,GAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA,UAAA,WAAA;AACA,UAAA,CAAA,YAAA,CAAA,WAAA;AACA,YAAA,KAAA;AAAA,UACA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/components/tooltip/tooltip.vue.cjs

@@ -426,10 +426,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtTooltip = __component__.exports;
 exports.default = DtTooltip;

package/dist/vue2/components/tooltip/tooltip.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"$listeners\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  async mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.tip = createTippy(this.anchor, this.initOptions());\n    if (this.externalAnchor) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n  },\n\n  beforeDestroy () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.anchor?._tippy) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","flushPromises"],"mappings":"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"}
+{"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"$listeners\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  async mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.tip = createTippy(this.anchor, this.initOptions());\n    if (this.externalAnchor) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n  },\n\n  beforeDestroy () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.anchor?._tippy) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","flushPromises"],"mappings":"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"}

package/dist/vue2/components/tooltip/tooltip.vue.js

@@ -424,10 +424,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtTooltip = __component__.exports;
 export {