@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.0-next.4

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\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     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\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\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\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\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, critical, positive\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 a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;AAwKA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EAAE,UAAA,GAAU;CAExB,OAAO;EAKL,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACT,YAAY,MAAa,OAAO,KAAK,EAAwB,CAAC,SAAS,EAAS;GACjF;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAA4B,CAAC,SAAS,EAAE;GACvE;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAO,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAG;GACjE;EAQD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,EAAa,SAAS,EAAE;GAC3C;EAMD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAE,CAAC;GACzE;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,EAAE;GACjE;EAQD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAOD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAOD,IAAI;GACF,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,KAAK;GACH,MAAM;GACN,SAAS;GACV;EAOD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,WAQA,WACD;CAED,OAAQ;AACN,SAAO;GACL;GAEA,WAAW;GACX;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,UAAU;EACR,oBAAqB;AACnB,UAAO,KAAK,aAAa,KAAK;;EAGhC,cAAe;AAGb,UAFI,KAAK,KAAW,KAAK,mBAAmB,GACxC,KAAK,OAAa,MACf;;EAGT,iBAAkB;AAChB,UAAO,CAAC,KAAK,MAAM,CAAC,KAAK;;EAG3B,gBAAiB;AAgBf,UAfI,KAAK,KACA;IACL,IAAI,KAAK;IACT,SAAS,KAAK;IACd,GAAI,KAAK,YAAY;KAAE,iBAAiB;KAAQ,UAAU;KAAM;IACjE,GAEC,KAAK,OACA;IACL,MAAM,KAAK,WAAW,OAAO,KAAK;IAClC,QAAQ,KAAK;IACb,KAAK,KAAK;IACV,GAAI,KAAK,YAAY;KAAE,iBAAiB;KAAQ,UAAU;KAAM;IACjE,GAEI;IACL,MAAM,KAAK;IACX,UAAU,KAAK;IAChB;;EAGH,oBAAqB;GACnB,IAAM,IAAY;IAChB,UAAU,MAAM;AAEd,KADA,KAAK,YAAY,KAAK,kBACtB,KAAK,MAAM,WAAW,EAAE;;IAG1B,WAAW,MAAM;AAEf,KADA,KAAK,YAAY,IACjB,KAAK,MAAM,YAAY,EAAE;;IAE5B;AAwBD,UAtBK,KAAK,mBAGJ,KAAK,aACP,EAAU,SAAS,MAAM;AAEvB,IADA,EAAE,gBAAgB,EAClB,EAAE,0BAA0B;OAMhC,EAAU,WAAW,MAAM;AACzB,KAAI,EAAE,QAAQ,OAAO,EAAE,SAAS,aAC9B,EAAE,gBAAgB,EACb,KAAK,YACR,EAAE,OAAO,OAAO;OAMjB;;EAGT,mBAAoB;AAClB,UAAO,KAAK,oBAAoB,KAAK,YAAY,cAAc,KAAK,OAAO;;EAG7E,WAAY;AACV,UAAO,EAAkB,OAAO,KAAK,KAAK;;EAG5C,aAAc;AACZ,UAAO,EAAkB,OAAO,KAAK,KAAK;;EAE7C;CAED,OAAO,EACL,QAAQ;EACN,MAAM;EACN,WAAW;EACX,UAAW;AACT,WAAA,IAAA,aAA6B,iBAEzB,KAAK,UAAU,KAAK,QACtB,EAAK,sDAAsD,KAAK,EAGlE,KAAK,yBAAyB,KAAK,QAAQ,KAAK,MAAM,KAAK,WAAW;;EAEzE,EACF;CAED,SAAS;EACP,oBAAqB;AACnB,OAAI;AACF,WAAO,EAAiB,aAAa;WAC/B;AAEN,WADA,EAAK,kEAAgE,EAC9D;;;EAIX,gBAAiB;AAYf,UAXI,KAAK,OACA;IACL;IACA,EAAoB,KAAK,UAAU,KAAK,aAAa;IACrD,EAAsB,OAAO,KAAK,KAAK;IACvC,EAAE,wBAAwB,CAAC,KAAK,mBAAmB;IACpD,GAEC,KAAK,SAAS,aACT,CAAC,kBAAkB,GAErB;IACL;IACA,EAA4B,KAAK;IACjC,EAAsB,KAAK;IAC3B,EAAsB,OAAO,KAAK,KAAK;IACvC;KACE,iBAAiB,KAAK;KACtB,kBAAkB,KAAK;KACvB,oBAAoB,KAAK,YAAY;KACrC,mBAAmB,KAAK,sBAAsB;KAC9C,iBAAiB,KAAK;KACvB;IACF;;EAGH,yBAA0B,GAAQ,GAAM,GAAY;AAElD,OAAI,KAAK,SAAS,WAChB,QAAO;AAGT,QAAK,IAAM,KAAO,EAChB,KAAI,MAAW,EAAI,UAAU,MAAS,EAAI,QAAQ,MAAe,EAAI,WAEnE,QADA,EAAK,EAAI,QAAQ,EACV;AAGX,UAAO;;EAGT,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,UAAU;;EAG9C,aAAc;AACZ,UAAO,EAAe,KAAK,OAAO,QAAQ;;EAG5C,oBAAqB;AACnB,UAAO,EAAe,KAAK,OAAO,eAAe;;EAGnD,kBAAmB;AACjB,UAAO,EAAe,KAAK,OAAO,aAAa;;EAGjD,kBAAmB;AACjB,UAAO,KAAK,cAAa,IAAK,KAAK,YAAW,IAAK,KAAK,mBAAkB,IAAK,KAAK,iBAAiB;;EAGvG,yBAA0B;AACxB,UAAO,EAAe,KAAK,OAAO,KAAI,IAAK,CAAC,KAAK,iBAAgB,IAAK,CAAC,KAAK;;EAG9E,aAAc;AACZ,WAAQ,KAAK,iBAAgB,IAAK,KAAK,wBAAwB,KAAK,CAAC,EAAe,KAAK,OAAO,QAAQ;;EAG1G,uBAAwB;AAGtB,UAFI,KAAK,YAAY,GAAS,KAC1B,KAAK,mBAAkB,IAAK,KAAK,iBAAiB,GAAS,KACxD,CAAC,KAAK,iBAAgB,IAAK,CAAC,OAAO,SAAS,CAAC,SAAS,KAAK,aAAa;;EAElF;CACF;;;aAvpBC,EA4IY,EA3IL,EAAA,YAAW,EADlB,EA4IY;EA1IT,OAAK,CAAA,uBAAuC,EAAA,eAAa,CAAA;EAI1D,WAAQ;EACP,OAAK,EAAA,OAAW,EAAA,OAAK;EACrB,aAAW,EAAA;EACX,cAAY,EAAA,UAAU,EAAA,KAAK,GAAE,mBAAA,GAAuB,EAAA,OAAM;IACnD,EAAA,eACR,EAAwB,EAAlB,kBAAiB,CAAA,EAAA;mBAOrB;GAJM,EAAA,WAAW,EAAA,SAAI,cAAA,GAAA,EADvB,EAKE,GAAA;;IAHA,OAAM;IACL,MAAM,EAAA;IACP,eAAY;;GAGN,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAMO,QAAA;;IAJJ,OAAK,EAAA,CAAA,kBAAqB,EAAA,aAAY,CAAA;OAGvC,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIjB,EAAA,eAAe,EAAA,OAAO,eAAc,IAAA,GAAA,EAD5C,EAiBO,QAAA;;IAfL,WAAQ;IACP,OAAK,EAAA;;;qBAAoE,EAAA,SAAI;0BAA+C,EAAA,SAAI;;KAAoC,EAAA;;OAUrK,EAGE,EAAA,QAAA,kBAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,eAAe,EAAA,OAAO,UAAS,IAAA,GAAA,EADvC,EAiBO,QAAA;;IAfL,WAAQ;IACP,OAAK,EAAA;;;qBAAoE,EAAA,SAAI;2BAAgD,EAAA,SAAI;;KAAoC,EAAA;;OAUtK,EAGE,EAAA,QAAA,aAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,wBAAsB,IAAA,GAAA,EAD9B,EAiBO,QAAA;;IAfL,WAAQ;IACP,OAAK,EAAA;;;qBAAoE,EAAA,SAAI;OAA4B,EAAA,wBAAwB,EAAA,gBAAgB,EAAA,SAAI;;KAAoC,EAAA;;OAU1L,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIhB,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAWO,QAAA;;IATL,WAAQ;IACP,OAAK,EAAA;;uBAA4D,EAAA,SAAI,YAAA;KAA2B,EAAA;;OAOjG,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIF,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAiBO,QAAA;;IAfL,WAAQ;IACP,OAAK,EAAA;;;qBAAoE,EAAA,SAAI;4BAAiD,EAAA,SAAI;;KAAoC,EAAA;;OAUvK,EAGE,EAAA,QAAA,WAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,eAAe,EAAA,OAAO,aAAY,IAAA,GAAA,EAD1C,EAiBO,QAAA;;IAfL,WAAQ;IACP,OAAK,EAAA;;;qBAAoE,EAAA,SAAI;6BAAkD,EAAA,SAAI;;KAAoC,EAAA;;OAUxK,EAGE,EAAA,QAAA,gBAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIhB,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EADtC,EAMO,QAAA;;IAJJ,OAAK,EAAA,CAAA,mBAAsB,EAAA,cAAa,CAAA;OAGzC,EAAwB,EAAA,QAAA,WAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\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     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\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\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\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\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, critical, positive\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 a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/chip/chip.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`./chip-constants.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue`);var s={name:`DtChip`,components:{DtButton:r.default,DtIconClose:o.DtIconClose},props:{disabled:{type:Boolean,default:!1},showClose:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(i.CHIP_SIZE_MODIFIERS).includes(String(e))},interactive:{type:Boolean,default:!1},id:{type:String,default:function(){return e.getUniqueString()}},ariaLabel:{type:String,default:``},contentClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},avatarClass:{type:[String,Array,Object],default:``}},emits:[`click`,`close`,`keyup`,`keydown`],data(){return{isActive:!1,hasSlotContent:e.hasSlotContent,i18n:new n.DialtoneLocalization}},computed:{chipListeners(){return{click:e=>{this.interactive&&this.$emit(`click`,e)},keydown:e=>{e.code?.toLowerCase()===`delete`?this.onClose():this.$emit(`keydown`,e)},keyup:e=>{this.$emit(`keyup`,e)}}},closeButtonIconSize(){return i.CHIP_ICON_SIZES[String(this.size)]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{chipClasses(){return[this.$attrs[`grouped-chip`]?`d-chip`:`d-chip__label`,i.CHIP_SIZE_MODIFIERS[String(this.size)],this.labelClass,this.disabled&&`d-chip--disabled`]},chipCloseButtonClasses(){return[`d-chip__close`,i.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],this.disabled&&`d-chip__close--disabled`]},onClose(){this.showClose&&this.$emit(`close`)}}},c={class:`d-chip`},l=[`id`];function u(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-close`),u=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,c,[((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(n.interactive?`button`:`span`),(0,a.mergeProps)({id:n.id,"aria-label":n.ariaLabel,"aria-labelledby":n.ariaLabel?void 0:`${n.id}-content`,"aria-disabled":n.disabled,class:o.chipClasses(),type:n.interactive&&`button`,"data-qa":`dt-chip`,tabindex:n.disabled?-1:null},(0,a.toHandlers)(o.chipListeners)),{default:(0,a.withCtx)(()=>[i.hasSlotContent(e.$slots.icon)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-chip__icon`,n.iconClass]),"data-qa":`dt-chip-icon`},[(0,a.renderSlot)(e.$slots,`icon`)],2)):i.hasSlotContent(e.$slots.avatar)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)(n.avatarClass),"data-qa":`dt-chip-avatar`},[(0,a.renderSlot)(e.$slots,`avatar`)],2)):(0,a.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,id:`${n.id}-content`,class:(0,a.normalizeClass)([`d-chip__text`,n.contentClass]),"data-qa":`dt-chip-label`},[(0,a.renderSlot)(e.$slots,`default`)],10,l)):(0,a.createCommentVNode)(``,!0)]),_:3},16,[`id`,`aria-label`,`aria-labelledby`,`aria-disabled`,`class`,`type`,`tabindex`])),n.showClose?((0,a.openBlock)(),(0,a.createBlock)(u,{key:0,class:(0,a.normalizeClass)(o.chipCloseButtonClasses()),"data-qa":`dt-chip-close`,"aria-label":o.closeButtonTitle,"aria-disabled":n.disabled,title:o.closeButtonTitle,tabindex:n.disabled?-1:null,onClick:t[0]||(t[0]=t=>e.$emit(`close`))},{startIcon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:o.closeButtonIconSize},null,8,[`size`])]),_:1},8,[`class`,`aria-label`,`aria-disabled`,`title`,`tabindex`])):(0,a.createCommentVNode)(``,!0)])}var d=t.t(s,[[`render`,u]]);exports.default=d;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../localization/index.cjs`),i=require(`../button/button.cjs`),a=require(`./chip-constants.cjs`);let o=require(`vue`),s=require(`@dialpad/dialtone-icons/vue`);var c={name:`DtChip`,components:{DtButton:i.default,DtIconClose:s.DtIconClose},props:{disabled:{type:Boolean,default:!1},showClose:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e.ordinalSizeValidator(a.CHIP_SIZE_MODIFIERS)},interactive:{type:Boolean,default:!1},id:{type:String,default:function(){return t.getUniqueString()}},ariaLabel:{type:String,default:``},contentClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},avatarClass:{type:[String,Array,Object],default:``}},emits:[`click`,`close`,`keyup`,`keydown`],data(){return{isActive:!1,hasSlotContent:t.hasSlotContent,i18n:new r.DialtoneLocalization}},computed:{chipListeners(){return{click:e=>{this.interactive&&this.$emit(`click`,e)},keydown:e=>{e.code?.toLowerCase()===`delete`?this.onClose():this.$emit(`keydown`,e)},keyup:e=>{this.$emit(`keyup`,e)}}},closeButtonIconSize(){return a.CHIP_ICON_SIZES[String(this.size)]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{chipClasses(){return[this.$attrs[`grouped-chip`]?`d-chip`:`d-chip__label`,a.CHIP_SIZE_MODIFIERS[String(this.size)],this.labelClass,this.disabled&&`d-chip--disabled`]},chipCloseButtonClasses(){return[`d-chip__close`,a.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],this.disabled&&`d-chip__close--disabled`]},onClose(){this.showClose&&this.$emit(`close`)}}},l={class:`d-chip`},u=[`id`];function d(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-icon-close`),c=(0,o.resolveComponent)(`dt-button`);return(0,o.openBlock)(),(0,o.createElementBlock)(`span`,l,[((0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(n.interactive?`button`:`span`),(0,o.mergeProps)({id:n.id,"aria-label":n.ariaLabel,"aria-labelledby":n.ariaLabel?void 0:`${n.id}-content`,"aria-disabled":n.disabled,class:a.chipClasses(),type:n.interactive&&`button`,"data-qa":`dt-chip`,tabindex:n.disabled?-1:null},(0,o.toHandlers)(a.chipListeners)),{default:(0,o.withCtx)(()=>[i.hasSlotContent(e.$slots.icon)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:0,class:(0,o.normalizeClass)([`d-chip__icon`,n.iconClass]),"data-qa":`dt-chip-icon`},[(0,o.renderSlot)(e.$slots,`icon`)],2)):i.hasSlotContent(e.$slots.avatar)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,class:(0,o.normalizeClass)(n.avatarClass),"data-qa":`dt-chip-avatar`},[(0,o.renderSlot)(e.$slots,`avatar`)],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,id:`${n.id}-content`,class:(0,o.normalizeClass)([`d-chip__text`,n.contentClass]),"data-qa":`dt-chip-label`},[(0,o.renderSlot)(e.$slots,`default`)],10,u)):(0,o.createCommentVNode)(``,!0)]),_:3},16,[`id`,`aria-label`,`aria-labelledby`,`aria-disabled`,`class`,`type`,`tabindex`])),n.showClose?((0,o.openBlock)(),(0,o.createBlock)(c,{key:0,class:(0,o.normalizeClass)(a.chipCloseButtonClasses()),"data-qa":`dt-chip-close`,"aria-label":a.closeButtonTitle,"aria-disabled":n.disabled,title:a.closeButtonTitle,tabindex:n.disabled?-1:null,onClick:t[0]||(t[0]=t=>e.$emit(`close`))},{startIcon:(0,o.withCtx)(()=>[(0,o.createVNode)(s,{size:a.closeButtonIconSize},null,8,[`size`])]),_:1},8,[`class`,`aria-label`,`aria-disabled`,`title`,`tabindex`])):(0,o.createCommentVNode)(``,!0)])}var f=n.t(c,[[`render`,d]]);exports.default=f;
 //# sourceMappingURL=chip.cjs.map

package/dist/lib/chip/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZE_MODIFIERS),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/chip/chip.js

@@ -1,16 +1,17 @@
-import { getUniqueString as e, hasSlotContent as t } from "../../common/utils/index.js";
-import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { DialtoneLocalization as r } from "../../localization/index.js";
-import i from "../button/button.js";
-import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as a, CHIP_ICON_SIZES as o, CHIP_SIZE_MODIFIERS as s } from "./chip-constants.js";
-import { createBlock as c, createCommentVNode as l, createElementBlock as u, createVNode as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveComponent as g, resolveDynamicComponent as _, toHandlers as v, withCtx as y } from "vue";
-import { DtIconClose as b } from "@dialpad/dialtone-icons/vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
+import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as i } from "../../localization/index.js";
+import a from "../button/button.js";
+import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as o, CHIP_ICON_SIZES as s, CHIP_SIZE_MODIFIERS as c } from "./chip-constants.js";
+import { createBlock as l, createCommentVNode as u, createElementBlock as d, createVNode as f, mergeProps as p, normalizeClass as m, openBlock as h, renderSlot as g, resolveComponent as _, resolveDynamicComponent as v, toHandlers as y, withCtx as b } from "vue";
+import { DtIconClose as x } from "@dialpad/dialtone-icons/vue";
 //#region components/Chip/Chip.vue
-var x = {
+var S = {
 	name: "DtChip",
 	components: {
-		DtButton: i,
-		DtIconClose: b
+		DtButton: a,
+		DtIconClose: x
 	},
 	props: {
 		disabled: {
@@ -24,7 +25,7 @@ var x = {
 		size: {
 			type: [String, Number],
 			default: 300,
-			validator: (e) => Object.keys(s).includes(String(e))
+			validator: e(c)
 		},
 		interactive: {
 			type: Boolean,
@@ -33,7 +34,7 @@ var x = {
 		id: {
 			type: String,
 			default: function() {
-				return e();
+				return t();
 			}
 		},
 		ariaLabel: {
@@ -82,8 +83,8 @@ var x = {
 	data() {
 		return {
 			isActive: !1,
-			hasSlotContent: t,
-			i18n: new r()
+			hasSlotContent: n,
+			i18n: new i()
 		};
 	},
 	computed: {
@@ -101,7 +102,7 @@ var x = {
 			};
 		},
 		closeButtonIconSize() {
-			return o[String(this.size)];
+			return s[String(this.size)];
 		},
 		closeButtonTitle() {
 			return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
@@ -111,7 +112,7 @@ var x = {
 		chipClasses() {
 			return [
 				this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-				s[String(this.size)],
+				c[String(this.size)],
 				this.labelClass,
 				this.disabled && "d-chip--disabled"
 			];
@@ -119,7 +120,7 @@ var x = {
 		chipCloseButtonClasses() {
 			return [
 				"d-chip__close",
-				a[String(this.size)],
+				o[String(this.size)],
 				this.disabled && "d-chip__close--disabled"
 			];
 		},
@@ -127,10 +128,10 @@ var x = {
 			this.showClose && this.$emit("close");
 		}
 	}
-}, S = { class: "d-chip" }, C = ["id"];
-function w(e, t, n, r, i, a) {
-	let o = g("dt-icon-close"), s = g("dt-button");
-	return m(), u("span", S, [(m(), c(_(n.interactive ? "button" : "span"), f({
+}, C = { class: "d-chip" }, w = ["id"];
+function T(e, t, n, r, i, a) {
+	let o = _("dt-icon-close"), s = _("dt-button");
+	return h(), d("span", C, [(h(), l(v(n.interactive ? "button" : "span"), p({
 		id: n.id,
 		"aria-label": n.ariaLabel,
 		"aria-labelledby": n.ariaLabel ? void 0 : `${n.id}-content`,
@@ -139,21 +140,21 @@ function w(e, t, n, r, i, a) {
 		type: n.interactive && "button",
 		"data-qa": "dt-chip",
 		tabindex: n.disabled ? -1 : null
-	}, v(a.chipListeners)), {
-		default: y(() => [i.hasSlotContent(e.$slots.icon) ? (m(), u("span", {
+	}, y(a.chipListeners)), {
+		default: b(() => [i.hasSlotContent(e.$slots.icon) ? (h(), d("span", {
 			key: 0,
-			class: p(["d-chip__icon", n.iconClass]),
+			class: m(["d-chip__icon", n.iconClass]),
 			"data-qa": "dt-chip-icon"
-		}, [h(e.$slots, "icon")], 2)) : i.hasSlotContent(e.$slots.avatar) ? (m(), u("span", {
+		}, [g(e.$slots, "icon")], 2)) : i.hasSlotContent(e.$slots.avatar) ? (h(), d("span", {
 			key: 1,
-			class: p(n.avatarClass),
+			class: m(n.avatarClass),
 			"data-qa": "dt-chip-avatar"
-		}, [h(e.$slots, "avatar")], 2)) : l("", !0), i.hasSlotContent(e.$slots.default) ? (m(), u("span", {
+		}, [g(e.$slots, "avatar")], 2)) : u("", !0), i.hasSlotContent(e.$slots.default) ? (h(), d("span", {
 			key: 2,
 			id: `${n.id}-content`,
-			class: p(["d-chip__text", n.contentClass]),
+			class: m(["d-chip__text", n.contentClass]),
 			"data-qa": "dt-chip-label"
-		}, [h(e.$slots, "default")], 10, C)) : l("", !0)]),
+		}, [g(e.$slots, "default")], 10, w)) : u("", !0)]),
 		_: 3
 	}, 16, [
 		"id",
@@ -163,9 +164,9 @@ function w(e, t, n, r, i, a) {
 		"class",
 		"type",
 		"tabindex"
-	])), n.showClose ? (m(), c(s, {
+	])), n.showClose ? (h(), l(s, {
 		key: 0,
-		class: p(a.chipCloseButtonClasses()),
+		class: m(a.chipCloseButtonClasses()),
 		"data-qa": "dt-chip-close",
 		"aria-label": a.closeButtonTitle,
 		"aria-disabled": n.disabled,
@@ -173,7 +174,7 @@ function w(e, t, n, r, i, a) {
 		tabindex: n.disabled ? -1 : null,
 		onClick: t[0] || (t[0] = (t) => e.$emit("close"))
 	}, {
-		startIcon: y(() => [d(o, { size: a.closeButtonIconSize }, null, 8, ["size"])]),
+		startIcon: b(() => [f(o, { size: a.closeButtonIconSize }, null, 8, ["size"])]),
 		_: 1
 	}, 8, [
 		"class",
@@ -181,10 +182,10 @@ function w(e, t, n, r, i, a) {
 		"aria-disabled",
 		"title",
 		"tabindex"
-	])) : l("", !0)]);
+	])) : u("", !0)]);
 }
-var T = /* @__PURE__ */ n(x, [["render", w]]);
+var E = /* @__PURE__ */ r(S, [["render", T]]);
 //#endregion
-export { T as default };
+export { E as default };
 
 //# sourceMappingURL=chip.js.map

package/dist/lib/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZE_MODIFIERS),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/codeblock/codeblock.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./codeblock-constants.cjs`);let n=require(`vue`);var r={name:`DtCodeblock`,props:{text:{type:String,required:!0},bordered:{type:Boolean,default:!1},size:{type:[String,Number],default:200,validator:e=>t.CODEBLOCK_SIZES.includes(String(e))}},computed:{sizeClass(){return t.CODEBLOCK_SIZE_MAP[String(this.size)]||String(this.size)}}};function i(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createElementBlock)(`pre`,{class:(0,n.normalizeClass)([`d-codeblock`,{"d-codeblock--bordered":r.bordered}])},[(0,n.createElementVNode)(`code`,{class:(0,n.normalizeClass)([`d-codeblock__code`,`d-codeblock__code--${o.sizeClass}`])},(0,n.toDisplayString)(r.text),3)],2)}var a=e.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./codeblock-constants.cjs`);let r=require(`vue`);var i={name:`DtCodeblock`,props:{text:{type:String,required:!0},bordered:{type:Boolean,default:!1},size:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(n.CODEBLOCK_SIZES)}},computed:{sizeClass(){return n.CODEBLOCK_SIZE_MAP[String(this.size)]||String(this.size)}}};function a(e,t,n,i,a,o){return(0,r.openBlock)(),(0,r.createElementBlock)(`pre`,{class:(0,r.normalizeClass)([`d-codeblock`,{"d-codeblock--bordered":n.bordered}])},[(0,r.createElementVNode)(`code`,{class:(0,r.normalizeClass)([`d-codeblock__code`,`d-codeblock__code--${o.sizeClass}`])},(0,r.toDisplayString)(n.text),3)],2)}var o=t.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=codeblock.cjs.map

package/dist/lib/codeblock/codeblock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.cjs","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (val) => CODEBLOCK_SIZES.includes(String(val)),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":"+PAaA,IAAK,EAAU,CACb,KAAM,cAEN,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,gBAAgB,SAAS,OAAO,EAAI,CAAC,CAC1D,CACF,CAED,SAAU,CACR,WAAa,CACX,OAAO,EAAA,mBAAmB,OAAO,KAAK,KAAK,GAAK,OAAO,KAAK,KAAK,EAEpE,CACF,0EA1CyB,MAAA,CALtB,OAAA,EAAA,EAAA,gBAAK,CAAC,cAAa,CAAA,wBACgB,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAI3B,OAAA,CAFhB,OAAA,EAAA,EAAA,gBAAK,CAAC,oBAAmB,sBACK,EAAA,YAAS,CAAA,CAAA,EAAA,EAAA,EAAA,iBACrC,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"codeblock.cjs","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(CODEBLOCK_SIZES),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":"8SAcA,IAAK,EAAU,CACb,KAAM,cAEN,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,gBAAgB,CACjD,CACF,CAED,SAAU,CACR,WAAa,CACX,OAAO,EAAA,mBAAmB,OAAO,KAAK,KAAK,GAAK,OAAO,KAAK,KAAK,EAEpE,CACF,0EA3CyB,MAAA,CALtB,OAAA,EAAA,EAAA,gBAAK,CAAC,cAAa,CAAA,wBACgB,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAI3B,OAAA,CAFhB,OAAA,EAAA,EAAA,gBAAK,CAAC,oBAAmB,sBACK,EAAA,YAAS,CAAA,CAAA,EAAA,EAAA,EAAA,iBACrC,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,EAAA"}

package/dist/lib/codeblock/codeblock.js

@@ -1,8 +1,9 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { CODEBLOCK_SIZES as t, CODEBLOCK_SIZE_MAP as n } from "./codeblock-constants.js";
-import { createElementBlock as r, createElementVNode as i, normalizeClass as a, openBlock as o, toDisplayString as s } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { CODEBLOCK_SIZES as n, CODEBLOCK_SIZE_MAP as r } from "./codeblock-constants.js";
+import { createElementBlock as i, createElementVNode as a, normalizeClass as o, openBlock as s, toDisplayString as c } from "vue";
 //#region components/Codeblock/Codeblock.vue
-var c = {
+var l = {
 	name: "DtCodeblock",
 	props: {
 		text: {
@@ -16,18 +17,18 @@ var c = {
 		size: {
 			type: [String, Number],
 			default: 200,
-			validator: (e) => t.includes(String(e))
+			validator: e(n)
 		}
 	},
 	computed: { sizeClass() {
-		return n[String(this.size)] || String(this.size);
+		return r[String(this.size)] || String(this.size);
 	} }
 };
-function l(e, t, n, c, l, u) {
-	return o(), r("pre", { class: a(["d-codeblock", { "d-codeblock--bordered": n.bordered }]) }, [i("code", { class: a(["d-codeblock__code", `d-codeblock__code--${u.sizeClass}`]) }, s(n.text), 3)], 2);
+function u(e, t, n, r, l, u) {
+	return s(), i("pre", { class: o(["d-codeblock", { "d-codeblock--bordered": n.bordered }]) }, [a("code", { class: o(["d-codeblock__code", `d-codeblock__code--${u.sizeClass}`]) }, c(n.text), 3)], 2);
 }
-var u = /* @__PURE__ */ e(c, [["render", l]]);
+var d = /* @__PURE__ */ t(l, [["render", u]]);
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=codeblock.js.map

package/dist/lib/codeblock/codeblock.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.js","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (val) => CODEBLOCK_SIZES.includes(String(val)),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;AAaA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAIL,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAQ,EAAgB,SAAS,OAAO,EAAI,CAAC;GAC1D;EACF;CAED,UAAU,EACR,YAAa;AACX,SAAO,EAAmB,OAAO,KAAK,KAAK,KAAK,OAAO,KAAK,KAAK;IAEpE;CACF;;aAhDC,EAMwB,OAAA,EALtB,OAAK,EAAA,CAAC,eAAa,EAAA,yBACgB,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAC5C,EAGiB,QAAA,EAFhB,OAAK,EAAA,CAAC,qBAAmB,sBACK,EAAA,YAAS,CAAA,EAAA,EAAA,EACrC,EAAA,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"codeblock.js","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(CODEBLOCK_SIZES),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAcA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAIL,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAgB;GACjD;EACF;CAED,UAAU,EACR,YAAa;AACX,SAAO,EAAmB,OAAO,KAAK,KAAK,KAAK,OAAO,KAAK,KAAK;IAEpE;CACF;;aAjDC,EAMwB,OAAA,EALtB,OAAK,EAAA,CAAC,eAAa,EAAA,yBACgB,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAC5C,EAGiB,QAAA,EAFhB,OAAK,EAAA,CAAC,qBAAmB,sBACK,EAAA,YAAS,CAAA,EAAA,EAAA,EACrC,EAAA,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/lib/combobox/combobox.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Combobox-D4hc1-41.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Combobox-CYEmi3dv.cjs`);exports.default=e.t;

package/dist/lib/combobox/combobox.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Combobox-By01ETlj.js";
+import { t as e } from "../../Combobox-D8nQeBIf.js";
 export { e as default };

package/dist/lib/combobox/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../Combobox-D4hc1-41.cjs`),t=require(`./combobox-constants.cjs`);exports.COMBOBOX_LABEL_SIZES=t.COMBOBOX_LABEL_SIZES,exports.DtCombobox=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../Combobox-CYEmi3dv.cjs`),t=require(`./combobox-constants.cjs`);exports.COMBOBOX_LABEL_SIZES=t.COMBOBOX_LABEL_SIZES,exports.DtCombobox=e.t;

package/dist/lib/combobox/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../Combobox-By01ETlj.js";
+import { t as e } from "../../Combobox-D8nQeBIf.js";
 import { COMBOBOX_LABEL_SIZES as t } from "./combobox-constants.js";
 export { t as COMBOBOX_LABEL_SIZES, e as DtCombobox };

package/dist/lib/combobox-multi-select/combobox-multi-select.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/sizes.cjs`),t=require(`../../common/constants/index.cjs`),n=require(`../../common/validators/index.cjs`),r=require(`../../common/utils/index.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../chip/chip.cjs`),s=require(`../popover/popover-constants.cjs`),c=require(`../input/input.cjs`),l=require(`../combobox-with-popover/combobox-with-popover.cjs`),u=require(`./combobox-multi-select-constants.cjs`);let d=require(`vue`);var f={name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:l.default,DtInput:c.default,DtChip:o.default,DtValidationMessages:a.default},inheritAttrs:!1,props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},placeholder:{type:String,default:`Select one or start typing`},inputMessages:{type:Array,default:()=>[],validator:e=>n.validationMessageValidator(e)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:`loading...`},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:`300px`},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(u.CHIP_SIZES).includes(String(e))},appendTo:{type:[t.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:`fade`},collapseOnFocusOut:{type:Boolean,default:!1},listMaxWidth:{type:String,default:``},reservedRightSpace:{type:Number,default:64},chipMaxWidth:{type:String,default:``},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},disabled:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},listClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Object,Array],default:``}},emits:[`update:modelValue`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:u.CHIP_SIZES,hasSlotContent:r.hasSlotContent,inputFocused:!1,hideInputText:!1,messagesId:r.getUniqueString()}},computed:{inputPlaceHolder(){return this.selectedItems?.length>0?``:this.placeholder},chipListeners(){return{keydown:e=>{this.disabled||(this.onChipKeyDown(e),this.$emit(`chip-keydown`,e))}}},inputListeners(){return{...r.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`update:modelValue`,e),this.hasSuggestionList&&this.showComboboxList()},onKeydown:e=>{if(this.disabled)return;this.onInputKeyDown(e),this.$emit(`keydown`,e);let t=e.key?.toLowerCase();t===`escape`?this.$emit(`escape`,e):t===`enter`&&this.$emit(`enter`,e)},onClick:()=>{this.hasSuggestionList&&this.showComboboxList()}}},ariaInvalid(){return r.getValidationState(this.maxSelectedMessage)===t.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showValidationMessages&&this.maxSelectedMessage.length>0?this.messagesId:void 0},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${e.COMPONENT_SIZES[String(this.size)]||this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{deep:!0,handler:async function(){await this.initSelectedItems()}},chipMaxWidth:{async handler(){await this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();let e=this.getInput();this.revertInputPadding(e),this.setInitialInputHeight(),this.setInputPadding(),this.setChipsTopPosition()}}},async mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body)},methods:{extractNonListeners:r.extractNonListeners,comboboxHighlight(e){this.$emit(`combobox-highlight`,e)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){this.$emit(`remove`,e),this.$refs.input?.focus()},onComboboxSelect(e){this.loading||(this.value=``,this.$emit(`select`,e))},showComboboxList(){this.showList??this.$refs.comboboxWithPopover?.showComboboxList()},closeComboboxList(){this.showList??this.$refs.comboboxWithPopover?.closeComboboxList()},getChips(){if(!this.selectedItems.length||!this.$refs.chips)return null;let e=new Set;return this.selectedItems.map(t=>this.$refs.chips.find((n,i)=>e.has(i)?!1:r.returnFirstEl(n.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===t?(e.add(i),!0):!1)).filter(Boolean).map(e=>r.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>r.returnFirstEl(e).querySelector(`button`))},getLastChipButton(){let e=this.getChipButtons();return e&&e[e.length-1]},getLastChip(){let e=this.getChips();return e&&e[e.length-1]},getFirstChip(){let e=this.getChips();return e&&e[0]},getInput(){return this.$refs.input?.$refs.input},onChipKeyDown(e){let t=e.code?.toLowerCase();t===`arrowleft`?this.navigateBetweenChips(e.target,!0):t===`arrowright`&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyDown(e){let t=e.key?.toLowerCase();if(this.selectedItems.length>0&&e.target.selectionStart===0){if(e.target.selectionEnd!==e.target.selectionStart)return;(t===`backspace`||t===`arrowleft`)&&this.moveFromInputToChip()}},moveFromInputToChip(){this.getLastChipButton().focus(),this.$refs.input?.blur(),this.closeComboboxList()},moveFromChipToInput(){this.getLastChipButton().blur(),this.$refs.input?.focus(),this.showComboboxList()},navigateBetweenChips(e,t){let n=this.getChipButtons().indexOf(e),r=t?n-1:n+1;r<0||r>=this.$refs.chips?.length||(this.getChipButtons()[n].blur(),this.getChipButtons()[r].focus(),this.closeComboboxList())},setChipsTopPosition(){let e=this.getInput();if(!e)return;let t=this.$refs.inputSlotWrapper,n=e.getBoundingClientRect().top-t.getBoundingClientRect().top,r=this.$refs.chipsWrapper;r.style.top=n-u.CHIP_TOP_POSITION[String(this.size)]+`px`},setInputPadding(){let e=this.getLastChip(),t=this.getInput();if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e)||this.collapseOnFocusOut&&!this.inputFocused)return;let n=e.offsetLeft+this.getFullWidth(e),r=t.getBoundingClientRect().width-n,i=this.getFirstChip(),a=i&&e.offsetTop>i.offsetTop;r>this.reservedRightSpace?t.style.paddingInlineStart=n+`px`:t.style.paddingInlineStart=`4px`;let o=this.getInputPaddingTop(e,r>this.reservedRightSpace,a);o!=null&&(t.style.paddingTop=`${o}px`)},getInputPaddingTop(e,t,n){if(t&&!n)return null;if(t)return e.offsetTop+2;let r=parseFloat(getComputedStyle(e).marginTop)||0,i=e.getBoundingClientRect().height;return e.offsetTop+i+r+2},revertInputPadding(e){e.style.paddingInlineStart=``,e.style.paddingBlockStart=``,e.style.paddingBlockEnd=``},getFullWidth(e){let t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){let e=this.getFirstChip(),t=this.getInput();t&&(e?t.style.minWidth=this.getFullWidth(e)+4+`px`:t.style.minWidth=``)},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit(`max-selected`)):this.showValidationMessages=!1)},setInitialInputHeight(){let e=this.getInput();e&&(e.style.minHeight=``,e.style.height=``,this.initialInputHeight=e.getBoundingClientRect().height,this.size!==`xs`&&(e.style.minHeight=`${this.initialInputHeight}px`,e.style.height=`auto`))},async handleInputFocusIn(){this.inputFocused=!0,this.collapseOnFocusOut&&(this.hideInputText=!1,await this.$nextTick(),this.setInputPadding())},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){this.hideInputText=!0;let e=this.getInput();if(!e||!e.style.paddingTop)return;this.revertInputPadding(e)}}}},p={key:1,class:`d-recipe-combobox-multi-select__list--loading`};function m(e,t,n,r,i,a){let o=(0,d.resolveComponent)(`dt-chip`),s=(0,d.resolveComponent)(`dt-input`),c=(0,d.resolveComponent)(`dt-validation-messages`),l=(0,d.resolveComponent)(`dt-combobox-with-popover`);return(0,d.openBlock)(),(0,d.createBlock)(l,(0,d.mergeProps)({ref:`comboboxWithPopover`,label:n.label,"show-list":n.showList,"max-height":n.listMaxHeight,"max-width":n.listMaxWidth,"popover-offset":i.popoverOffset,"has-suggestion-list":n.hasSuggestionList,"content-width":`anchor`,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition},a.extractNonListeners(e.$attrs),{onSelect:a.onComboboxSelect,onHighlight:a.comboboxHighlight}),(0,d.createSlots)({input:(0,d.withCtx)(({onInput:e})=>[(0,d.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-recipe-combobox-multi-select__input-wrapper`,onFocusin:t[1]||(t[1]=(...e)=>a.handleInputFocusIn&&a.handleInputFocusIn(...e)),onFocusout:t[2]||(t[2]=(...e)=>a.handleInputFocusOut&&a.handleInputFocusOut(...e))},[(0,d.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,d.normalizeClass)([`d-recipe-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,d.openBlock)(!0),(0,d.createElementBlock)(d.Fragment,null,(0,d.renderList)(n.selectedItems,(e,t)=>((0,d.openBlock)(),(0,d.createBlock)(o,(0,d.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,interactive:!0,"label-class":[`d-chip__label`],class:[`d-recipe-combobox-multi-select__chip`,{"d-recipe-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[String(n.size)],disabled:n.disabled},(0,d.toHandlers)(a.chipListeners),{onKeydown:(0,d.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,d.withCtx)(()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,d.createVNode)(s,(0,d.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-recipe-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-recipe-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,label:n.showLabel?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{onInput:e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`aria-invalid`,`aria-describedby`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onInput`]),(0,d.createVNode)(c,{id:i.messagesId,"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`id`,`validation-messages`,`show-messages`])],544)]),list:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`list`,class:(0,d.normalizeClass)([`d-recipe-combobox-multi-select__list`,n.listClass]),onMousedown:t[3]||(t[3]=(0,d.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,d.openBlock)(),(0,d.createElementBlock)(`div`,p,(0,d.toDisplayString)(n.loadingMessage),1)):(0,d.renderSlot)(e.$slots,`list`,{key:0})],34)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`header`,class:(0,d.normalizeClass)(n.headerClass)},[(0,d.renderSlot)(e.$slots,`header`)],2)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`footer`,class:(0,d.normalizeClass)(n.footerClass)},[(0,d.renderSlot)(e.$slots,`footer`)],2)]),key:`1`}:void 0]),1040,[`label`,`show-list`,`max-height`,`max-width`,`popover-offset`,`has-suggestion-list`,`append-to`,`dialog-class`,`transition`,`onSelect`,`onHighlight`])}var h=i.t(f,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/sizes.cjs`),t=require(`../../common/constants/index.cjs`),n=require(`../../common/validators/index.cjs`),r=require(`../../common/utils/index.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../chip/chip.cjs`),s=require(`../popover/popover-constants.cjs`),c=require(`../input/input.cjs`),l=require(`../combobox-with-popover/combobox-with-popover.cjs`),u=require(`./combobox-multi-select-constants.cjs`);let d=require(`vue`);var f={name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:l.default,DtInput:c.default,DtChip:o.default,DtValidationMessages:a.default},inheritAttrs:!1,props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},placeholder:{type:String,default:`Select one or start typing`},inputMessages:{type:Array,default:()=>[],validator:e=>n.validationMessageValidator(e)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:`loading...`},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:`300px`},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:n.ordinalSizeValidator(u.CHIP_SIZES)},appendTo:{type:[t.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:`fade`},collapseOnFocusOut:{type:Boolean,default:!1},listMaxWidth:{type:String,default:``},reservedRightSpace:{type:Number,default:64},chipMaxWidth:{type:String,default:``},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},disabled:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},listClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Object,Array],default:``}},emits:[`update:modelValue`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:u.CHIP_SIZES,hasSlotContent:r.hasSlotContent,inputFocused:!1,hideInputText:!1,messagesId:r.getUniqueString()}},computed:{inputPlaceHolder(){return this.selectedItems?.length>0?``:this.placeholder},chipListeners(){return{keydown:e=>{this.disabled||(this.onChipKeyDown(e),this.$emit(`chip-keydown`,e))}}},inputListeners(){return{...r.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`update:modelValue`,e),this.hasSuggestionList&&this.showComboboxList()},onKeydown:e=>{if(this.disabled)return;this.onInputKeyDown(e),this.$emit(`keydown`,e);let t=e.key?.toLowerCase();t===`escape`?this.$emit(`escape`,e):t===`enter`&&this.$emit(`enter`,e)},onClick:()=>{this.hasSuggestionList&&this.showComboboxList()}}},ariaInvalid(){return r.getValidationState(this.maxSelectedMessage)===t.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showValidationMessages&&this.maxSelectedMessage.length>0?this.messagesId:void 0},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${e.COMPONENT_SIZES[String(this.size)]||this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{deep:!0,handler:async function(){await this.initSelectedItems()}},chipMaxWidth:{async handler(){await this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();let e=this.getInput();this.revertInputPadding(e),this.setInitialInputHeight(),this.setInputPadding(),this.setChipsTopPosition()}}},async mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body)},methods:{extractNonListeners:r.extractNonListeners,comboboxHighlight(e){this.$emit(`combobox-highlight`,e)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){this.$emit(`remove`,e),this.$refs.input?.focus()},onComboboxSelect(e){this.loading||(this.value=``,this.$emit(`select`,e))},showComboboxList(){this.showList??this.$refs.comboboxWithPopover?.showComboboxList()},closeComboboxList(){this.showList??this.$refs.comboboxWithPopover?.closeComboboxList()},getChips(){if(!this.selectedItems.length||!this.$refs.chips)return null;let e=new Set;return this.selectedItems.map(t=>this.$refs.chips.find((n,i)=>e.has(i)?!1:r.returnFirstEl(n.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===t?(e.add(i),!0):!1)).filter(Boolean).map(e=>r.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>r.returnFirstEl(e).querySelector(`button`))},getLastChipButton(){let e=this.getChipButtons();return e&&e[e.length-1]},getLastChip(){let e=this.getChips();return e&&e[e.length-1]},getFirstChip(){let e=this.getChips();return e&&e[0]},getInput(){return this.$refs.input?.$refs.input},onChipKeyDown(e){let t=e.code?.toLowerCase();t===`arrowleft`?this.navigateBetweenChips(e.target,!0):t===`arrowright`&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyDown(e){let t=e.key?.toLowerCase();if(this.selectedItems.length>0&&e.target.selectionStart===0){if(e.target.selectionEnd!==e.target.selectionStart)return;(t===`backspace`||t===`arrowleft`)&&this.moveFromInputToChip()}},moveFromInputToChip(){this.getLastChipButton().focus(),this.$refs.input?.blur(),this.closeComboboxList()},moveFromChipToInput(){this.getLastChipButton().blur(),this.$refs.input?.focus(),this.showComboboxList()},navigateBetweenChips(e,t){let n=this.getChipButtons().indexOf(e),r=t?n-1:n+1;r<0||r>=this.$refs.chips?.length||(this.getChipButtons()[n].blur(),this.getChipButtons()[r].focus(),this.closeComboboxList())},setChipsTopPosition(){let e=this.getInput();if(!e)return;let t=this.$refs.inputSlotWrapper,n=e.getBoundingClientRect().top-t.getBoundingClientRect().top,r=this.$refs.chipsWrapper;r.style.top=n-u.CHIP_TOP_POSITION[String(this.size)]+`px`},setInputPadding(){let e=this.getLastChip(),t=this.getInput();if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e)||this.collapseOnFocusOut&&!this.inputFocused)return;let n=e.offsetLeft+this.getFullWidth(e),r=t.getBoundingClientRect().width-n,i=this.getFirstChip(),a=i&&e.offsetTop>i.offsetTop;r>this.reservedRightSpace?t.style.paddingInlineStart=n+`px`:t.style.paddingInlineStart=`4px`;let o=this.getInputPaddingTop(e,r>this.reservedRightSpace,a);o!=null&&(t.style.paddingTop=`${o}px`)},getInputPaddingTop(e,t,n){if(t&&!n)return null;if(t)return e.offsetTop+2;let r=parseFloat(getComputedStyle(e).marginTop)||0,i=e.getBoundingClientRect().height;return e.offsetTop+i+r+2},revertInputPadding(e){e.style.paddingInlineStart=``,e.style.paddingBlockStart=``,e.style.paddingBlockEnd=``},getFullWidth(e){let t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){let e=this.getFirstChip(),t=this.getInput();t&&(e?t.style.minWidth=this.getFullWidth(e)+4+`px`:t.style.minWidth=``)},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit(`max-selected`)):this.showValidationMessages=!1)},setInitialInputHeight(){let e=this.getInput();e&&(e.style.minHeight=``,e.style.height=``,this.initialInputHeight=e.getBoundingClientRect().height,this.size!==`xs`&&(e.style.minHeight=`${this.initialInputHeight}px`,e.style.height=`auto`))},async handleInputFocusIn(){this.inputFocused=!0,this.collapseOnFocusOut&&(this.hideInputText=!1,await this.$nextTick(),this.setInputPadding())},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){this.hideInputText=!0;let e=this.getInput();if(!e||!e.style.paddingTop)return;this.revertInputPadding(e)}}}},p={key:1,class:`d-recipe-combobox-multi-select__list--loading`};function m(e,t,n,r,i,a){let o=(0,d.resolveComponent)(`dt-chip`),s=(0,d.resolveComponent)(`dt-input`),c=(0,d.resolveComponent)(`dt-validation-messages`),l=(0,d.resolveComponent)(`dt-combobox-with-popover`);return(0,d.openBlock)(),(0,d.createBlock)(l,(0,d.mergeProps)({ref:`comboboxWithPopover`,label:n.label,"show-list":n.showList,"max-height":n.listMaxHeight,"max-width":n.listMaxWidth,"popover-offset":i.popoverOffset,"has-suggestion-list":n.hasSuggestionList,"content-width":`anchor`,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition},a.extractNonListeners(e.$attrs),{onSelect:a.onComboboxSelect,onHighlight:a.comboboxHighlight}),(0,d.createSlots)({input:(0,d.withCtx)(({onInput:e})=>[(0,d.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-recipe-combobox-multi-select__input-wrapper`,onFocusin:t[1]||(t[1]=(...e)=>a.handleInputFocusIn&&a.handleInputFocusIn(...e)),onFocusout:t[2]||(t[2]=(...e)=>a.handleInputFocusOut&&a.handleInputFocusOut(...e))},[(0,d.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,d.normalizeClass)([`d-recipe-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,d.openBlock)(!0),(0,d.createElementBlock)(d.Fragment,null,(0,d.renderList)(n.selectedItems,(e,t)=>((0,d.openBlock)(),(0,d.createBlock)(o,(0,d.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,interactive:!0,"label-class":[`d-chip__label`],class:[`d-recipe-combobox-multi-select__chip`,{"d-recipe-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[String(n.size)],disabled:n.disabled},(0,d.toHandlers)(a.chipListeners),{onKeydown:(0,d.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,d.withCtx)(()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,d.createVNode)(s,(0,d.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-recipe-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-recipe-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,label:n.showLabel?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{onInput:e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`aria-invalid`,`aria-describedby`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onInput`]),(0,d.createVNode)(c,{id:i.messagesId,"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`id`,`validation-messages`,`show-messages`])],544)]),list:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`list`,class:(0,d.normalizeClass)([`d-recipe-combobox-multi-select__list`,n.listClass]),onMousedown:t[3]||(t[3]=(0,d.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,d.openBlock)(),(0,d.createElementBlock)(`div`,p,(0,d.toDisplayString)(n.loadingMessage),1)):(0,d.renderSlot)(e.$slots,`list`,{key:0})],34)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`header`,class:(0,d.normalizeClass)(n.headerClass)},[(0,d.renderSlot)(e.$slots,`header`)],2)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`footer`,class:(0,d.normalizeClass)(n.footerClass)},[(0,d.renderSlot)(e.$slots,`footer`)],2)]),key:`1`}:void 0]),1040,[`label`,`show-list`,`max-height`,`max-width`,`popover-offset`,`has-suggestion-list`,`append-to`,`dialog-class`,`transition`,`onSelect`,`onHighlight`])}var h=i.t(f,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=combobox-multi-select.cjs.map