@dialpad/dialtone-vue 2.153.0 → 2.154.0

package/dist/lib/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue2';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click.native=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click.native=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click.native=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    defaultSlotHasContent () {\n      return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n    },\n\n    omegaSlotIsSet () {\n      return this.$scopedSlots.omega && this.$scopedSlots.omega();\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (this.defaultSlotHasContent) return;\n\n      // This can't be a computed prop due to reactivity issues.\n      const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n      if (isAlphaIconSet && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (this.omegaSlotIsSet) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtButton","props","active","type","Boolean","default","ariaLabel","String","iconPosition","labelClass","Array","Object","loading","tooltipText","assertiveOnFocus","disabled","importance","kind","size","data","BUTTON_ICON_SIZES","SPLIT_BUTTON_ICON_SIZES","xs","sm","md","lg","xl","DtIconChevronDown","id","getUniqueString","SplitButtonOmega","DtDropdown","SplitButtonAlpha","inheritAttrs","alphaActive","alphaAriaLabel","alphaIconPosition","validator","position","keys","ICON_POSITION_MODIFIERS","includes","alphaLabelClass","alphaLoading","alphaTooltipText","undefined","dropdownPlacement","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","omegaActive","omegaAriaLabel","omegaId","omegaTooltipText","s","BUTTON_SIZE_MODIFIERS","width","emits","isDropdownOpen","computed","alphaButtonProps","class","$attrs","omegaButtonProps","defaultSlotHasContent","$scopedSlots","text","trim","omegaSlotIsSet","omega","created","validateProps","updated","methods","validateAlphaButtonProps","validateOmegaButtonProps","isAlphaIconSet","$refs","alphaButton","icon","console","warn"],"mappings":"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"}
+{"version":3,"file":"split-button.js","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue2';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click.native=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click.native=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click.native=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    defaultSlotHasContent () {\n      return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n    },\n\n    omegaSlotIsSet () {\n      return this.$scopedSlots.omega && this.$scopedSlots.omega();\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (this.defaultSlotHasContent) return;\n\n      // This can't be a computed prop due to reactivity issues.\n      const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n      if (isAlphaIconSet && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (this.omegaSlotIsSet) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":"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"}

package/dist/lib/stack.cjs

@@ -9,9 +9,7 @@ function _getValidDirection(direction) {
   if (directionPropType(direction) === "string") {
     return !_isDefaultDirection(direction) ? stack_constants.DT_STACK_DIRECTION[direction] : null;
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return !_isDefaultDirection(defaultStyle) ? stack_constants.DT_STACK_DIRECTION[defaultStyle] : null;
   } else {
     return null;
@@ -34,24 +32,31 @@ function getDefaultDirectionClass(direction) {
 }
 function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
-    return [...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
-    })];
+    return [
+      ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResposiveGapClasses(gap) {
   if (typeof gap === "object") {
-    return [...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
-    })];
+    return [
+      ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResponsiveClasses(direction, gap) {
-  return [...getResposiveDirectionClasses(direction), ...getResposiveGapClasses(gap)];
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
 }
 function getDefaultGapClass(gap) {
   const validGap = _getValidGap(gap);
@@ -61,9 +66,7 @@ function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
     return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(direction);
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(defaultStyle);
   } else {
     return null;
@@ -74,9 +77,7 @@ function gapValidator(gap) {
     return stack_constants.DT_STACK_GAP.includes(gap);
   }
   if (typeof gap === "object") {
-    const {
-      default: defaultStyle
-    } = gap;
+    const { default: defaultStyle } = gap;
     return stack_constants.DT_STACK_GAP.includes(defaultStyle);
   }
 }
@@ -138,13 +139,24 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.as, {
-    tag: "component",
-    class: ["d-stack", _vm.defaultDirection, _vm.defaultGap, _vm.stackResponsive]
-  }, [_vm._t("default")], 2);
+  return _c(_vm.as, { tag: "component", class: [
+    "d-stack",
+    _vm.defaultDirection,
+    _vm.defaultGap,
+    _vm.stackResponsive
+  ] }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtStack = __component__.exports;
 exports.DT_STACK_DIRECTION = stack_constants.DT_STACK_DIRECTION;
 exports.DT_STACK_GAP = stack_constants.DT_STACK_GAP;

package/dist/lib/stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","default","_getValidDirection","directionPropType","defaultStyle","_getValidGap","gap","value","getDefaultDirectionClass","getResposiveDirectionClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","map","breakpoint","getResposiveGapClasses","DT_STACK_GAP","includes","getResponsiveClasses","getDefaultGapClass","validGap","directionValidator","Object","keys","gapValidator","_sfc_main","name","props","type","String","validator","as","data","computed","defaultGap","defaultDirection","stackResponsive"],"mappings":"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"}
+{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP"],"mappings":"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"}

package/dist/lib/stack.js

@@ -7,9 +7,7 @@ function _getValidDirection(direction) {
   if (directionPropType(direction) === "string") {
     return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
   } else {
     return null;
@@ -32,24 +30,31 @@ function getDefaultDirectionClass(direction) {
 }
 function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
-    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
-    })];
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResposiveGapClasses(gap) {
   if (typeof gap === "object") {
-    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
-    })];
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResponsiveClasses(direction, gap) {
-  return [...getResposiveDirectionClasses(direction), ...getResposiveGapClasses(gap)];
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
 }
 function getDefaultGapClass(gap) {
   const validGap = _getValidGap(gap);
@@ -59,9 +64,7 @@ function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
     return Object.keys(DT_STACK_DIRECTION).includes(direction);
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
   } else {
     return null;
@@ -72,9 +75,7 @@ function gapValidator(gap) {
     return DT_STACK_GAP.includes(gap);
   }
   if (typeof gap === "object") {
-    const {
-      default: defaultStyle
-    } = gap;
+    const { default: defaultStyle } = gap;
     return DT_STACK_GAP.includes(defaultStyle);
   }
 }
@@ -136,13 +137,24 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.as, {
-    tag: "component",
-    class: ["d-stack", _vm.defaultDirection, _vm.defaultGap, _vm.stackResponsive]
-  }, [_vm._t("default")], 2);
+  return _c(_vm.as, { tag: "component", class: [
+    "d-stack",
+    _vm.defaultDirection,
+    _vm.defaultGap,
+    _vm.stackResponsive
+  ] }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtStack = __component__.exports;
 export {
   DT_STACK_DIRECTION,

package/dist/lib/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","default","_getValidDirection","directionPropType","defaultStyle","_getValidGap","gap","value","getDefaultDirectionClass","getResposiveDirectionClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","map","breakpoint","getResposiveGapClasses","DT_STACK_GAP","includes","getResponsiveClasses","getDefaultGapClass","validGap","directionValidator","Object","keys","gapValidator","_sfc_main","name","props","type","String","validator","as","data","computed","defaultGap","defaultDirection","stackResponsive"],"mappings":"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"}
+{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/lib/tabs.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tab = require("../chunks/tab-79yMX6m6.js");
-const modal = require("../chunks/modal-OaWxzqNt.js");
+const tab = require("../chunks/tab-FcsV5VmK.js");
+const modal = require("../chunks/modal-VgxXAQFP.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 require("./button.cjs");
 require("vue");
@@ -76,26 +76,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.hidePanel,
-      expression: "!hidePanel"
-    }],
-    class: _vm.tabPanelClass,
-    attrs: {
-      "id": `dt-panel-${_vm.id}`,
-      "role": "tabpanel",
-      "tabindex": _vm.isFirstElementFocusable ? -1 : 0,
-      "aria-labelledby": `dt-tab-${_vm.tabId}`,
-      "aria-hidden": `${_vm.hidePanel}`,
-      "data-qa": "dt-tab-panel"
-    }
-  }, [_vm._t("default")], 2);
+  return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hidePanel, expression: "!hidePanel" }], class: _vm.tabPanelClass, attrs: { "id": `dt-panel-${_vm.id}`, "role": "tabpanel", "tabindex": _vm.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${_vm.tabId}`, "aria-hidden": `${_vm.hidePanel}`, "data-qa": "dt-tab-panel" } }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const tab_panel = __component__.exports;
 exports.DtTab = tab.DtTab;
 exports.DtTabGroup = tab.DtTabGroup;

package/dist/lib/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","sources":["../../components/tabs/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":["_sfc_main","name","mixins","Modal","inject","props","id","type","String","required","tabId","hidden","Boolean","default","tabPanelClass","Array","Object","data","isFirstElementFocusable","computed","hidePanel","groupContext","selected","mounted","firstFocusableElement","getFirstFocusableElement","$el","isFirstElementOfPanel","methods","element","current","isFirstElement","previousElementSibling","parentNode"],"mappings":";;;;;;;;AAuBA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,QAAA,CAAAC,MAAAA,KAAA;AAAA,EAEAC,QAAA,CAAA,cAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,IAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,OAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAE,QAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,eAAA;AAAA,MACAP,MAAA,CAAAC,QAAAO,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAC,yBAAA;AAAA;EAEA;AAAA,EAEAC,UAAA;AAAA,IACAC,YAAA;AACA,aAAA,KAAAC,aAAAC,aAAA,KAAAhB,MAAA,KAAAK;AAAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAAY,UAAA;AACA,UAAAC,wBAAA,MAAA,KAAAC,yBAAA,KAAAC,GAAA;AAEA,QAAA,CAAAF,uBAAA;AACA,WAAAN,0BAAA;AAAA,IACA,OAAA;AAIA,WAAAA,0BAAA,KAAAS,sBAAAH,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,SAAA;AAAA,IACAD,sBAAAE,SAAA;AACA,UAAAC,UAAAD;AACA,UAAAE,iBAAA;AAEA,aAAAD,SAAA;AACA,YAAAA,QAAAE,2BAAA,MAAA;AACAD,2BAAA;AACA;AAAA,QACA;AACAD,kBAAAA,QAAAG,eAAA,KAAAP,MAAAI,QAAAG,aAAA;AAAA,MACA;AAEA,aAAAF;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tabs.cjs","sources":["../../components/tabs/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,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/lib/tabs.js

@@ -1,5 +1,5 @@
-import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "../chunks/tab-muPOS7JE.js";
-import { Modal } from "../chunks/modal-8X6poIZW.js";
+import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "../chunks/tab-V4cb44Ry.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import "./button.js";
 import "vue";
@@ -74,26 +74,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.hidePanel,
-      expression: "!hidePanel"
-    }],
-    class: _vm.tabPanelClass,
-    attrs: {
-      "id": `dt-panel-${_vm.id}`,
-      "role": "tabpanel",
-      "tabindex": _vm.isFirstElementFocusable ? -1 : 0,
-      "aria-labelledby": `dt-tab-${_vm.tabId}`,
-      "aria-hidden": `${_vm.hidePanel}`,
-      "data-qa": "dt-tab-panel"
-    }
-  }, [_vm._t("default")], 2);
+  return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hidePanel, expression: "!hidePanel" }], class: _vm.tabPanelClass, attrs: { "id": `dt-panel-${_vm.id}`, "role": "tabpanel", "tabindex": _vm.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${_vm.tabId}`, "aria-hidden": `${_vm.hidePanel}`, "data-qa": "dt-tab-panel" } }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const tab_panel = __component__.exports;
 export {
   DtTab,

package/dist/lib/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../components/tabs/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":["_sfc_main","name","mixins","Modal","inject","props","id","type","String","required","tabId","hidden","Boolean","default","tabPanelClass","Array","Object","data","isFirstElementFocusable","computed","hidePanel","groupContext","selected","mounted","firstFocusableElement","getFirstFocusableElement","$el","isFirstElementOfPanel","methods","element","current","isFirstElement","previousElementSibling","parentNode"],"mappings":";;;;;;AAuBA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,QAAA,CAAAC,KAAA;AAAA,EAEAC,QAAA,CAAA,cAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,IAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,OAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAE,QAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,eAAA;AAAA,MACAP,MAAA,CAAAC,QAAAO,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAC,yBAAA;AAAA;EAEA;AAAA,EAEAC,UAAA;AAAA,IACAC,YAAA;AACA,aAAA,KAAAC,aAAAC,aAAA,KAAAhB,MAAA,KAAAK;AAAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAAY,UAAA;AACA,UAAAC,wBAAA,MAAA,KAAAC,yBAAA,KAAAC,GAAA;AAEA,QAAA,CAAAF,uBAAA;AACA,WAAAN,0BAAA;AAAA,IACA,OAAA;AAIA,WAAAA,0BAAA,KAAAS,sBAAAH,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,SAAA;AAAA,IACAD,sBAAAE,SAAA;AACA,UAAAC,UAAAD;AACA,UAAAE,iBAAA;AAEA,aAAAD,SAAA;AACA,YAAAA,QAAAE,2BAAA,MAAA;AACAD,2BAAA;AACA;AAAA,QACA;AACAD,kBAAAA,QAAAG,eAAA,KAAAP,MAAAI,QAAAG,aAAA;AAAA,MACA;AAEA,aAAAF;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":["../../components/tabs/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/lib/time-pill.cjs

@@ -30,16 +30,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("time", {
-    staticClass: "dt-time-pill",
-    attrs: {
-      "data-qa": "dt-time-pill",
-      "dateTime": _vm.dateTime
-    }
-  }, [_vm._v(" " + _vm._s(_vm.dateTimeDisplay) + " ")]);
+  return _c("time", { staticClass: "dt-time-pill", attrs: { "data-qa": "dt-time-pill", "dateTime": _vm.dateTime } }, [_vm._v(" " + _vm._s(_vm.dateTimeDisplay) + " ")]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const time_pill = __component__.exports;
 exports.DtRecipeTimePill = time_pill;
 //# sourceMappingURL=time-pill.cjs.map

package/dist/lib/time-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-pill.cjs","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  color: var(--dt-color-foreground-primary);\n  border-radius: var(--dt-size-radius-pill);\n  line-height: var(--dt-font-line-height-300);\n  font-size: var(--dt-font-size-100);\n  border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n  background-color: var(--dt-color-surface-primary);\n  padding: var(--dt-space-300) var(--dt-space-500);\n}\n</style>\n"],"names":["_sfc_main","name","props","dateTimeDisplay","type","String","required","dateTime","validator","t","x","Date","isNaN"],"mappings":";;;AAaA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,iBAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,UAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAE,WAAAC,OAAA;AAEA,cAAAC,IAAA,IAAAC,KAAAF,CAAA;AACA,YAAAC,aAAAC,QAAA,CAAAC,MAAAF,CAAA,GAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"time-pill.cjs","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  color: var(--dt-color-foreground-primary);\n  border-radius: var(--dt-size-radius-pill);\n  line-height: var(--dt-font-line-height-300);\n  font-size: var(--dt-font-size-100);\n  border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n  background-color: var(--dt-color-surface-primary);\n  padding: var(--dt-space-300) var(--dt-space-500);\n}\n</style>\n"],"names":[],"mappings":";;;AAaA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,MAAA;AAEA,cAAA,IAAA,IAAA,KAAA,CAAA;AACA,YAAA,aAAA,QAAA,CAAA,MAAA,CAAA,GAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}