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

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

@@ -1 +1 @@
-{"version":3,"file":"filter-pill.cjs","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-filter-pill',\n      { 'd-filter-pill--read-only': readOnly },\n    ]\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <component\n      :is=\"overlayComponent\"\n      v-model:open=\"isOpen\"\n      v-bind=\"overlayProps\"\n      :content-mode=\"contentMode\"\n    >\n      <template #anchor=\"slotData\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"useDropdown ? slotData : slotData.attrs\"\n          :active=\"isActive\"\n          :aria-disabled=\"readOnly || undefined\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"openPopover\"\n          @keydown.up.down.prevent=\"openPopover\"\n        >\n          <template\n            v-if=\"$slots.startIcon\"\n            #startIcon=\"{ iconSize }\"\n          >\n            <!-- @slot Icon displayed before the label -->\n            <slot\n              name=\"startIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n          <span :class=\"['d-filter-pill__label', labelClass]\">\n            <!-- @slot Allows you to customize the label slot -->\n            <slot\n              :label=\"label\"\n              :filters=\"filters\"\n              :active-filters=\"activeFilters\"\n              :active-filter-list=\"activeFilterList\"\n              :active-filter-overflow=\"activeFilterOverflow\"\n            >\n              <span\n                class=\"d-filter-pill__label-start\"\n                :title=\"label\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-end\"\n                :title=\"activeFilterList\"\n                v-text=\"activeFilterList\"\n              />\n              <span\n                v-if=\"activeFilterOverflow\"\n                class=\"d-filter-pill__label-end-overflow\"\n                :title=\"`plus ${activeFilters.length - 1} others`\"\n                v-text=\"activeFilterOverflow\"\n              />\n            </slot>\n          </span>\n          <template\n            v-if=\"!readOnly\"\n            #endIcon=\"{ iconSize }\"\n          >\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template\n        v-if=\"!useDropdown\"\n        #content=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n          :pending-filters=\"pendingFilters\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n            :aria-label=\"label\"\n            :name=\"label || 'filter-pill'\"\n          >\n            <dt-checkbox\n              v-for=\"filter in displayFilters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @update:model-value=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n      <template\n        v-if=\"!useDropdown && $slots.headerContent\"\n        #headerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover header -->\n        <slot\n          name=\"headerContent\"\n          :close=\"close\"\n        />\n      </template>\n      <template\n        v-if=\"!useDropdown && (deferSelection || $slots.footerContent)\"\n        #footerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n        <slot\n          name=\"footerContent\"\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n        >\n          <dt-stack\n            v-if=\"deferSelection\"\n            direction=\"row\"\n            gap=\"400\"\n            justify=\"end\"\n            data-qa=\"dt-filter-pill__deferred-footer\"\n          >\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__cancel-button\"\n              @click=\"cancelSelection\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              importance=\"primary\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__apply-button\"\n              @click=\"applySelection\"\n            >\n              {{ applyButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </slot>\n      </template>\n      <template\n        v-if=\"useDropdown\"\n        #list=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the dropdown content -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-list-item\n            v-for=\"filter in filters\"\n            :key=\"filter.name\"\n            role=\"menuitem\"\n            navigation-type=\"arrow-keys\"\n            :selected=\"filter.active\"\n            @click=\"selectFilter(filter, close)\"\n          >\n            {{ filter.name }}\n          </dt-list-item>\n        </slot>\n      </template>\n    </component>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"endTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon>\n        <dt-icon-close :size=\"clearIconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/Popover';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n    DtDropdown,\n    DtListItem,\n    DtStack,\n  },\n\n  props: {\n    /**\n     * When true, uses DtDropdown instead of DtPopover as the overlay.\n     * Provides keyboard navigation (arrow keys) for list items.\n     * Default content renders DtListItem elements (single-select)\n     * instead of checkboxes (multi-select).\n     */\n    useDropdown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, checkbox changes are held in a pending state until the user\n     * clicks Apply. Cancel or closing the popover discards pending changes.\n     * Only applies to popover mode (not useDropdown).\n     */\n    deferSelection: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, the pill cannot be interacted with but does not\n     * receive disabled visual styling. Adds `d-filter-pill--read-only`\n     * class and hides the chevron icon. The clear button is suppressed\n     * and the tooltip falls back to a read-only message when\n     * startTooltipText is not provided.\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the clear button when a filter is active\n     * @values true, false\n     */\n    showClear: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the label wrapper element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover content area.\n     * Only applies when useDropdown is false.\n     */\n    popoverContentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n     * Only applies when useDropdown is false.\n     */\n    popoverHeaderClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n     * Only applies when useDropdown is false.\n     */\n    popoverFooterClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover dialog element.\n     * Only applies when useDropdown is false.\n     */\n    popoverDialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the dropdown list wrapper.\n     * Only applies when useDropdown is true.\n     */\n    dropdownListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n\n    /**\n     * Emitted when deferred selection is applied\n     *\n     * @event apply\n     */\n    'apply',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n      pendingFilters: null,\n    };\n  },\n\n  computed: {\n    overlayComponent () {\n      return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n    },\n\n    overlayProps () {\n      const props = {\n        'append-to': this.popoverAppendTo,\n        'fallback-placements': this.popoverFallbackPlacements,\n        'max-height': this.popoverMaxHeight,\n        'max-width': this.popoverMaxWidth,\n        modal: true,\n        placement: this.popoverPlacement,\n      };\n      if (this.useDropdown) {\n        props['list-class'] = this.dropdownListClass;\n      } else {\n        props.padding = this.popoverPadding;\n        props['content-class'] = this.popoverContentClass;\n        props['header-wrapper-class'] = this.popoverHeaderClass;\n        props['footer-wrapper-class'] = this.popoverFooterClass;\n        props['dialog-class'] = this.popoverDialogClass;\n      }\n      return props;\n    },\n\n    buttonKind () {\n      return (this.isActive && !this.disabled) ? 'default' : 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      if (this.readOnly) return this.startTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n      return this.startTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.endTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.endTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) {\n        return 'All';\n      }\n\n      return this.activeFilters[0] ?? '';\n    },\n\n    activeFilterOverflow () {\n      if (this.activeFilters.length <= 1) return '';\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n      return '+' + (this.activeFilters.length - 1);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n    },\n\n    displayFilters () {\n      return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n    },\n\n    pendingActiveFilters () {\n      if (!this.pendingFilters) return [];\n      return this.pendingFilters.filter(f => f.active).map(f => f.name);\n    },\n\n    cancelButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n    },\n\n    applyButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n    },\n\n    clearIconSize () {\n      if (String(this.size) === '100') return '100';\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n      if (this.deferSelection) {\n        if (isOpen) {\n          this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n        } else {\n          this.pendingFilters = null;\n        }\n      }\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.');\n    }\n    if (this.deferSelection && this.useDropdown) {\n      console.warn('deferSelection has no effect when useDropdown is true.');\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n\n    openPopover () {\n      if (this.readOnly) return;\n      this.isOpen = true;\n    },\n\n    selectFilter (selectedFilter, close) {\n      this.filters.forEach(filter => {\n        filter.active = filter === selectedFilter;\n      });\n      close();\n    },\n\n    applySelection () {\n      if (!this.pendingFilters) return;\n      this.filters.forEach((filter, i) => {\n        if (this.pendingFilters[i]) {\n          filter.active = this.pendingFilters[i].active;\n        } else {\n          delete filter.active;\n        }\n      });\n      this.$emit('apply');\n      this.isOpen = false;\n    },\n\n    cancelSelection () {\n      this.isOpen = false;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"filter-pill.cjs","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-filter-pill',\n      { 'd-filter-pill--read-only': readOnly },\n    ]\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <component\n      :is=\"overlayComponent\"\n      v-model:open=\"isOpen\"\n      v-bind=\"overlayProps\"\n      :content-mode=\"contentMode\"\n    >\n      <template #anchor=\"slotData\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"useDropdown ? slotData : slotData.attrs\"\n          :active=\"isActive\"\n          :aria-disabled=\"readOnly || undefined\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"openPopover\"\n          @keydown.up.down.prevent=\"openPopover\"\n        >\n          <template\n            v-if=\"$slots.startIcon\"\n            #startIcon=\"{ iconSize }\"\n          >\n            <!-- @slot Icon displayed before the label -->\n            <slot\n              name=\"startIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n          <span :class=\"['d-filter-pill__label', labelClass]\">\n            <!-- @slot Allows you to customize the label slot -->\n            <slot\n              :label=\"label\"\n              :filters=\"filters\"\n              :active-filters=\"activeFilters\"\n              :active-filter-list=\"activeFilterList\"\n              :active-filter-overflow=\"activeFilterOverflow\"\n            >\n              <span\n                class=\"d-filter-pill__label-start\"\n                :title=\"label\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-end\"\n                :title=\"activeFilterList\"\n                v-text=\"activeFilterList\"\n              />\n              <span\n                v-if=\"activeFilterOverflow\"\n                class=\"d-filter-pill__label-end-overflow\"\n                :title=\"`plus ${activeFilters.length - 1} others`\"\n                v-text=\"activeFilterOverflow\"\n              />\n            </slot>\n          </span>\n          <template\n            v-if=\"!readOnly\"\n            #endIcon=\"{ iconSize }\"\n          >\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template\n        v-if=\"!useDropdown\"\n        #content=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n          :pending-filters=\"pendingFilters\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n            :aria-label=\"label\"\n            :name=\"label || 'filter-pill'\"\n          >\n            <dt-checkbox\n              v-for=\"filter in displayFilters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @update:model-value=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n      <template\n        v-if=\"!useDropdown && $slots.headerContent\"\n        #headerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover header -->\n        <slot\n          name=\"headerContent\"\n          :close=\"close\"\n        />\n      </template>\n      <template\n        v-if=\"!useDropdown && (deferSelection || $slots.footerContent)\"\n        #footerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n        <slot\n          name=\"footerContent\"\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n        >\n          <dt-stack\n            v-if=\"deferSelection\"\n            direction=\"row\"\n            gap=\"400\"\n            justify=\"end\"\n            data-qa=\"dt-filter-pill__deferred-footer\"\n          >\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__cancel-button\"\n              @click=\"cancelSelection\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              importance=\"primary\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__apply-button\"\n              @click=\"applySelection\"\n            >\n              {{ applyButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </slot>\n      </template>\n      <template\n        v-if=\"useDropdown\"\n        #list=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the dropdown content -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-list-item\n            v-for=\"filter in filters\"\n            :key=\"filter.name\"\n            role=\"menuitem\"\n            navigation-type=\"arrow-keys\"\n            :selected=\"filter.active\"\n            @click=\"selectFilter(filter, close)\"\n          >\n            {{ filter.name }}\n          </dt-list-item>\n        </slot>\n      </template>\n    </component>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"endTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon>\n        <dt-icon-close :size=\"clearIconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/Popover';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n    DtDropdown,\n    DtListItem,\n    DtStack,\n  },\n\n  props: {\n    /**\n     * When true, uses DtDropdown instead of DtPopover as the overlay.\n     * Provides keyboard navigation (arrow keys) for list items.\n     * Default content renders DtListItem elements (single-select)\n     * instead of checkboxes (multi-select).\n     */\n    useDropdown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, checkbox changes are held in a pending state until the user\n     * clicks Apply. Cancel or closing the popover discards pending changes.\n     * Only applies to popover mode (not useDropdown).\n     */\n    deferSelection: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, the pill cannot be interacted with but does not\n     * receive disabled visual styling. Adds `d-filter-pill--read-only`\n     * class and hides the chevron icon. The clear button is suppressed\n     * and the tooltip falls back to a read-only message when\n     * startTooltipText is not provided.\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the clear button when a filter is active\n     * @values true, false\n     */\n    showClear: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the label wrapper element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover content area.\n     * Only applies when useDropdown is false.\n     */\n    popoverContentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n     * Only applies when useDropdown is false.\n     */\n    popoverHeaderClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n     * Only applies when useDropdown is false.\n     */\n    popoverFooterClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover dialog element.\n     * Only applies when useDropdown is false.\n     */\n    popoverDialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the dropdown list wrapper.\n     * Only applies when useDropdown is true.\n     */\n    dropdownListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n\n    /**\n     * Emitted when deferred selection is applied\n     *\n     * @event apply\n     */\n    'apply',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n      pendingFilters: null,\n    };\n  },\n\n  computed: {\n    overlayComponent () {\n      return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n    },\n\n    overlayProps () {\n      const props = {\n        'append-to': this.popoverAppendTo,\n        'fallback-placements': this.popoverFallbackPlacements,\n        'max-height': this.popoverMaxHeight,\n        'max-width': this.popoverMaxWidth,\n        modal: true,\n        placement: this.popoverPlacement,\n      };\n      if (this.useDropdown) {\n        props['list-class'] = this.dropdownListClass;\n      } else {\n        props.padding = this.popoverPadding;\n        props['content-class'] = this.popoverContentClass;\n        props['header-wrapper-class'] = this.popoverHeaderClass;\n        props['footer-wrapper-class'] = this.popoverFooterClass;\n        props['dialog-class'] = this.popoverDialogClass;\n      }\n      return props;\n    },\n\n    buttonKind () {\n      return (this.isActive && !this.disabled) ? 'default' : 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      if (this.readOnly) return this.startTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n      return this.startTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.endTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.endTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) {\n        return 'All';\n      }\n\n      return this.activeFilters[0] ?? '';\n    },\n\n    activeFilterOverflow () {\n      if (this.activeFilters.length <= 1) return '';\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n      return '+' + (this.activeFilters.length - 1);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n    },\n\n    displayFilters () {\n      return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n    },\n\n    pendingActiveFilters () {\n      if (!this.pendingFilters) return [];\n      return this.pendingFilters.filter(f => f.active).map(f => f.name);\n    },\n\n    cancelButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n    },\n\n    applyButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n    },\n\n    clearIconSize () {\n      if (String(this.size) === '100') return '100';\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n      if (this.deferSelection) {\n        if (isOpen) {\n          this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n        } else {\n          this.pendingFilters = null;\n        }\n      }\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.');\n    }\n    if (this.deferSelection && this.useDropdown) {\n      console.warn('deferSelection has no effect when useDropdown is true.');\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n\n    openPopover () {\n      if (this.readOnly) return;\n      this.isOpen = true;\n    },\n\n    selectFilter (selectedFilter, close) {\n      this.filters.forEach(filter => {\n        filter.active = filter === selectedFilter;\n      });\n      close();\n    },\n\n    applySelection () {\n      if (!this.pendingFilters) return;\n      this.filters.forEach((filter, i) => {\n        if (this.pendingFilters[i]) {\n          filter.active = this.pendingFilters[i].active;\n        } else {\n          delete filter.active;\n        }\n      });\n      this.$emit('apply');\n      this.isOpen = false;\n    },\n\n    cancelSelection () {\n      this.isOpen = false;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/filter-pill/filter-pill.js

@@ -1,31 +1,32 @@
 import { HTML_ELEMENT_TYPE as e } from "../../common/constants/index.js";
-import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { t as n } from "../../mode_constants-tb7TL85q.js";
-import { BUTTON_ICON_SIZES as r, BUTTON_SIZE_MODIFIERS as i } from "../button/button-constants.js";
-import { DialtoneLocalization as a } from "../../localization/index.js";
-import o from "../button/button.js";
-import s from "../checkbox/checkbox.js";
-import c from "../checkbox-group/checkbox-group.js";
-import l from "../list-item/list-item.js";
-import u from "../stack/stack.js";
-import { POPOVER_APPEND_TO_VALUES as d, POPOVER_PADDING_CLASSES as f } from "../popover/popover-constants.js";
-import p from "../popover/popover.js";
-import m from "../dropdown/dropdown.js";
-import { Fragment as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, mergeProps as C, normalizeClass as w, openBlock as T, renderList as E, renderSlot as D, resolveComponent as O, resolveDirective as k, resolveDynamicComponent as A, toDisplayString as j, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
-import { DtIconChevronDown as I, DtIconClose as L } from "@dialpad/dialtone-icons/vue";
+import { ordinalSizeValidator as t } from "../../common/validators/index.js";
+import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as r } from "../../mode_constants-tb7TL85q.js";
+import { BUTTON_ICON_SIZES as i, BUTTON_SIZE_MODIFIERS as a } from "../button/button-constants.js";
+import { DialtoneLocalization as o } from "../../localization/index.js";
+import s from "../button/button.js";
+import c from "../checkbox/checkbox.js";
+import l from "../checkbox-group/checkbox-group.js";
+import u from "../list-item/list-item.js";
+import d from "../stack/stack.js";
+import { POPOVER_APPEND_TO_VALUES as f, POPOVER_PADDING_CLASSES as p } from "../popover/popover-constants.js";
+import m from "../popover/popover.js";
+import h from "../dropdown/dropdown.js";
+import { Fragment as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createSlots as x, createTextVNode as S, createVNode as C, mergeProps as w, normalizeClass as T, openBlock as E, renderList as D, renderSlot as O, resolveComponent as k, resolveDirective as A, resolveDynamicComponent as j, toDisplayString as M, withCtx as N, withDirectives as P, withKeys as F, withModifiers as I } from "vue";
+import { DtIconChevronDown as L, DtIconClose as R } from "@dialpad/dialtone-icons/vue";
 //#region components/FilterPill/FilterPill.vue
-var R = {
+var z = {
 	name: "DtFilterPill",
 	components: {
-		DtCheckboxGroup: c,
-		DtCheckbox: s,
-		DtPopover: p,
-		DtButton: o,
-		DtIconClose: L,
-		DtIconChevronDown: I,
-		DtDropdown: m,
-		DtListItem: l,
-		DtStack: u
+		DtCheckboxGroup: l,
+		DtCheckbox: c,
+		DtPopover: m,
+		DtButton: s,
+		DtIconClose: R,
+		DtIconChevronDown: L,
+		DtDropdown: h,
+		DtListItem: u,
+		DtStack: d
 	},
 	props: {
 		useDropdown: {
@@ -67,7 +68,7 @@ var R = {
 		popoverAppendTo: {
 			type: [e, String],
 			default: "body",
-			validator: (e) => d.includes(e) || e instanceof HTMLElement
+			validator: (e) => f.includes(e) || e instanceof HTMLElement
 		},
 		popoverFallbackPlacements: {
 			type: Array,
@@ -84,7 +85,7 @@ var R = {
 		popoverPadding: {
 			type: String,
 			default: "large",
-			validator: (e) => Object.keys(f).some((t) => t === e)
+			validator: (e) => Object.keys(p).some((t) => t === e)
 		},
 		popoverPlacement: {
 			type: String,
@@ -138,11 +139,11 @@ var R = {
 			],
 			default: ""
 		},
-		contentMode: n,
+		contentMode: r,
 		size: {
 			type: [String, Number],
 			default: 200,
-			validator: (e) => Object.keys(i).includes(String(e))
+			validator: t(a)
 		}
 	},
 	emits: [
@@ -154,7 +155,7 @@ var R = {
 	data() {
 		return {
 			isOpen: !1,
-			i18n: new a(),
+			i18n: new o(),
 			filters: this.modelValue,
 			pendingFilters: null
 		};
@@ -214,7 +215,7 @@ var R = {
 			return this.i18n.$t("DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL");
 		},
 		clearIconSize() {
-			return String(this.size) === "100" ? "100" : r[String(this.size)];
+			return String(this.size) === "100" ? "100" : i[String(this.size)];
 		}
 	},
 	watch: {
@@ -252,17 +253,17 @@ var R = {
 			this.isOpen = !1;
 		}
 	}
-}, z = ["title", "textContent"], B = ["title", "textContent"], V = ["title", "textContent"];
-function H(e, t, n, r, i, a) {
-	let o = O("dt-icon-chevron-down"), s = O("dt-button"), c = O("dt-checkbox"), l = O("dt-checkbox-group"), u = O("dt-stack"), d = O("dt-list-item"), f = O("dt-icon-close"), p = k("dt-tooltip");
-	return T(), v("div", {
-		class: w(["d-filter-pill", { "d-filter-pill--read-only": n.readOnly }]),
+}, B = ["title", "textContent"], V = ["title", "textContent"], H = ["title", "textContent"];
+function U(e, t, n, r, i, a) {
+	let o = k("dt-icon-chevron-down"), s = k("dt-button"), c = k("dt-checkbox"), l = k("dt-checkbox-group"), u = k("dt-stack"), d = k("dt-list-item"), f = k("dt-icon-close"), p = A("dt-tooltip");
+	return E(), y("div", {
+		class: T(["d-filter-pill", { "d-filter-pill--read-only": n.readOnly }]),
 		"data-qa": "dt-filter-pill"
-	}, [(T(), g(A(a.overlayComponent), C({
+	}, [(E(), _(j(a.overlayComponent), w({
 		open: i.isOpen,
 		"onUpdate:open": t[0] || (t[0] = (e) => i.isOpen = e)
-	}, a.overlayProps, { "content-mode": n.contentMode }), b({
-		anchor: M((t) => [N((T(), g(s, C(n.useDropdown ? t : t.attrs, {
+	}, a.overlayProps, { "content-mode": n.contentMode }), x({
+		anchor: N((t) => [P((E(), _(s, w(n.useDropdown ? t : t.attrs, {
 			active: a.isActive,
 			"aria-disabled": n.readOnly || void 0,
 			class: ["d-filter-pill__primary", { "d-filter-pill--selected": a.isActive }],
@@ -272,41 +273,41 @@ function H(e, t, n, r, i, a) {
 			"data-qa": "dt-filter-pill__button",
 			importance: "outlined",
 			onClick: a.openPopover,
-			onKeydown: P(F(a.openPopover, ["prevent"]), ["up", "down"])
-		}), b({
-			default: M(() => [y("span", { class: w(["d-filter-pill__label", n.labelClass]) }, [D(e.$slots, "default", {
+			onKeydown: F(I(a.openPopover, ["prevent"]), ["up", "down"])
+		}), x({
+			default: N(() => [b("span", { class: T(["d-filter-pill__label", n.labelClass]) }, [O(e.$slots, "default", {
 				label: n.label,
 				filters: i.filters,
 				activeFilters: a.activeFilters,
 				activeFilterList: a.activeFilterList,
 				activeFilterOverflow: a.activeFilterOverflow
 			}, () => [
-				y("span", {
+				b("span", {
 					class: "d-filter-pill__label-start",
 					title: n.label,
-					textContent: j(n.label)
-				}, null, 8, z),
-				a.activeFilterList ? (T(), v("span", {
+					textContent: M(n.label)
+				}, null, 8, B),
+				a.activeFilterList ? (E(), y("span", {
 					key: 0,
 					class: "d-filter-pill__label-end",
 					title: a.activeFilterList,
-					textContent: j(a.activeFilterList)
-				}, null, 8, B)) : _("", !0),
-				a.activeFilterOverflow ? (T(), v("span", {
+					textContent: M(a.activeFilterList)
+				}, null, 8, V)) : v("", !0),
+				a.activeFilterOverflow ? (E(), y("span", {
 					key: 1,
 					class: "d-filter-pill__label-end-overflow",
 					title: `plus ${a.activeFilters.length - 1} others`,
-					textContent: j(a.activeFilterOverflow)
-				}, null, 8, V)) : _("", !0)
+					textContent: M(a.activeFilterOverflow)
+				}, null, 8, H)) : v("", !0)
 			])], 2)]),
 			_: 2
 		}, [e.$slots.startIcon ? {
 			name: "startIcon",
-			fn: M(({ iconSize: t }) => [D(e.$slots, "startIcon", { iconSize: t })]),
+			fn: N(({ iconSize: t }) => [O(e.$slots, "startIcon", { iconSize: t })]),
 			key: "0"
 		} : void 0, n.readOnly ? void 0 : {
 			name: "endIcon",
-			fn: M(({ iconSize: e }) => [S(o, {
+			fn: N(({ iconSize: e }) => [C(o, {
 				size: e,
 				class: "d-filter-pill__icon",
 				"data-qa": "dt-filter-pill__icon"
@@ -326,18 +327,18 @@ function H(e, t, n, r, i, a) {
 	}, [
 		n.useDropdown ? void 0 : {
 			name: "content",
-			fn: M(({ close: t }) => [D(e.$slots, "content", {
+			fn: N(({ close: t }) => [O(e.$slots, "content", {
 				close: t,
 				apply: a.applySelection,
 				cancel: a.cancelSelection,
 				pendingFilters: i.pendingFilters
-			}, () => [n.modelValue?.length ? (T(), g(l, {
+			}, () => [n.modelValue?.length ? (E(), _(l, {
 				key: 0,
 				"model-value": n.deferSelection ? a.pendingActiveFilters : a.activeFilters,
 				"aria-label": n.label,
 				name: n.label || "filter-pill"
 			}, {
-				default: M(() => [(T(!0), v(h, null, E(a.displayFilters, (e) => (T(), g(c, {
+				default: N(() => [(E(!0), y(g, null, D(a.displayFilters, (e) => (E(), _(c, {
 					key: e.name,
 					label: e.name,
 					value: e.name,
@@ -352,68 +353,68 @@ function H(e, t, n, r, i, a) {
 				"model-value",
 				"aria-label",
 				"name"
-			])) : _("", !0)])]),
+			])) : v("", !0)])]),
 			key: "0"
 		},
 		!n.useDropdown && e.$slots.headerContent ? {
 			name: "headerContent",
-			fn: M(({ close: t }) => [D(e.$slots, "headerContent", { close: t })]),
+			fn: N(({ close: t }) => [O(e.$slots, "headerContent", { close: t })]),
 			key: "1"
 		} : void 0,
 		!n.useDropdown && (n.deferSelection || e.$slots.footerContent) ? {
 			name: "footerContent",
-			fn: M(({ close: t }) => [D(e.$slots, "footerContent", {
+			fn: N(({ close: t }) => [O(e.$slots, "footerContent", {
 				close: t,
 				apply: a.applySelection,
 				cancel: a.cancelSelection
-			}, () => [n.deferSelection ? (T(), g(u, {
+			}, () => [n.deferSelection ? (E(), _(u, {
 				key: 0,
 				direction: "row",
 				gap: "400",
 				justify: "end",
 				"data-qa": "dt-filter-pill__deferred-footer"
 			}, {
-				default: M(() => [S(s, {
+				default: N(() => [C(s, {
 					importance: "clear",
 					kind: "muted",
 					size: 200,
 					"data-qa": "dt-filter-pill__cancel-button",
 					onClick: a.cancelSelection
 				}, {
-					default: M(() => [x(j(a.cancelButtonLabel), 1)]),
+					default: N(() => [S(M(a.cancelButtonLabel), 1)]),
 					_: 1
-				}, 8, ["onClick"]), S(s, {
+				}, 8, ["onClick"]), C(s, {
 					importance: "primary",
 					size: 200,
 					"data-qa": "dt-filter-pill__apply-button",
 					onClick: a.applySelection
 				}, {
-					default: M(() => [x(j(a.applyButtonLabel), 1)]),
+					default: N(() => [S(M(a.applyButtonLabel), 1)]),
 					_: 1
 				}, 8, ["onClick"])]),
 				_: 1
-			})) : _("", !0)])]),
+			})) : v("", !0)])]),
 			key: "2"
 		} : void 0,
 		n.useDropdown ? {
 			name: "list",
-			fn: M(({ close: t }) => [D(e.$slots, "content", { close: t }, () => [(T(!0), v(h, null, E(i.filters, (e) => (T(), g(d, {
+			fn: N(({ close: t }) => [O(e.$slots, "content", { close: t }, () => [(E(!0), y(g, null, D(i.filters, (e) => (E(), _(d, {
 				key: e.name,
 				role: "menuitem",
 				"navigation-type": "arrow-keys",
 				selected: e.active,
 				onClick: (n) => a.selectFilter(e, t)
 			}, {
-				default: M(() => [x(j(e.name), 1)]),
+				default: N(() => [S(M(e.name), 1)]),
 				_: 2
 			}, 1032, ["selected", "onClick"]))), 128))])]),
 			key: "3"
 		} : void 0
-	]), 1040, ["open", "content-mode"])), a.hasClear ? N((T(), g(s, {
+	]), 1040, ["open", "content-mode"])), a.hasClear ? P((E(), _(s, {
 		key: 0,
 		active: a.isActive,
 		"aria-label": a.clearButtonAriaLabel,
-		class: w(["d-filter-pill__clear", { "d-filter-pill__clear--selected": a.isActive }]),
+		class: T(["d-filter-pill__clear", { "d-filter-pill__clear--selected": a.isActive }]),
 		disabled: n.disabled,
 		kind: a.buttonKind,
 		size: n.size,
@@ -422,7 +423,7 @@ function H(e, t, n, r, i, a) {
 		importance: "outlined",
 		onClick: a.clearFilter
 	}, {
-		icon: M(() => [S(f, { size: a.clearIconSize }, null, 8, ["size"])]),
+		icon: N(() => [C(f, { size: a.clearIconSize }, null, 8, ["size"])]),
 		_: 1
 	}, 8, [
 		"active",
@@ -433,10 +434,10 @@ function H(e, t, n, r, i, a) {
 		"size",
 		"title",
 		"onClick"
-	])), [[p, n.endTooltipText]]) : _("", !0)], 2);
+	])), [[p, n.endTooltipText]]) : v("", !0)], 2);
 }
-var U = /* @__PURE__ */ t(R, [["render", H]]);
+var W = /* @__PURE__ */ n(z, [["render", U]]);
 //#endregion
-export { U as default };
+export { W as default };
 
 //# sourceMappingURL=filter-pill.js.map

package/dist/lib/filter-pill/filter-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-pill.js","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-filter-pill',\n      { 'd-filter-pill--read-only': readOnly },\n    ]\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <component\n      :is=\"overlayComponent\"\n      v-model:open=\"isOpen\"\n      v-bind=\"overlayProps\"\n      :content-mode=\"contentMode\"\n    >\n      <template #anchor=\"slotData\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"useDropdown ? slotData : slotData.attrs\"\n          :active=\"isActive\"\n          :aria-disabled=\"readOnly || undefined\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"openPopover\"\n          @keydown.up.down.prevent=\"openPopover\"\n        >\n          <template\n            v-if=\"$slots.startIcon\"\n            #startIcon=\"{ iconSize }\"\n          >\n            <!-- @slot Icon displayed before the label -->\n            <slot\n              name=\"startIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n          <span :class=\"['d-filter-pill__label', labelClass]\">\n            <!-- @slot Allows you to customize the label slot -->\n            <slot\n              :label=\"label\"\n              :filters=\"filters\"\n              :active-filters=\"activeFilters\"\n              :active-filter-list=\"activeFilterList\"\n              :active-filter-overflow=\"activeFilterOverflow\"\n            >\n              <span\n                class=\"d-filter-pill__label-start\"\n                :title=\"label\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-end\"\n                :title=\"activeFilterList\"\n                v-text=\"activeFilterList\"\n              />\n              <span\n                v-if=\"activeFilterOverflow\"\n                class=\"d-filter-pill__label-end-overflow\"\n                :title=\"`plus ${activeFilters.length - 1} others`\"\n                v-text=\"activeFilterOverflow\"\n              />\n            </slot>\n          </span>\n          <template\n            v-if=\"!readOnly\"\n            #endIcon=\"{ iconSize }\"\n          >\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template\n        v-if=\"!useDropdown\"\n        #content=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n          :pending-filters=\"pendingFilters\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n            :aria-label=\"label\"\n            :name=\"label || 'filter-pill'\"\n          >\n            <dt-checkbox\n              v-for=\"filter in displayFilters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @update:model-value=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n      <template\n        v-if=\"!useDropdown && $slots.headerContent\"\n        #headerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover header -->\n        <slot\n          name=\"headerContent\"\n          :close=\"close\"\n        />\n      </template>\n      <template\n        v-if=\"!useDropdown && (deferSelection || $slots.footerContent)\"\n        #footerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n        <slot\n          name=\"footerContent\"\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n        >\n          <dt-stack\n            v-if=\"deferSelection\"\n            direction=\"row\"\n            gap=\"400\"\n            justify=\"end\"\n            data-qa=\"dt-filter-pill__deferred-footer\"\n          >\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__cancel-button\"\n              @click=\"cancelSelection\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              importance=\"primary\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__apply-button\"\n              @click=\"applySelection\"\n            >\n              {{ applyButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </slot>\n      </template>\n      <template\n        v-if=\"useDropdown\"\n        #list=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the dropdown content -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-list-item\n            v-for=\"filter in filters\"\n            :key=\"filter.name\"\n            role=\"menuitem\"\n            navigation-type=\"arrow-keys\"\n            :selected=\"filter.active\"\n            @click=\"selectFilter(filter, close)\"\n          >\n            {{ filter.name }}\n          </dt-list-item>\n        </slot>\n      </template>\n    </component>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"endTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon>\n        <dt-icon-close :size=\"clearIconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/Popover';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n    DtDropdown,\n    DtListItem,\n    DtStack,\n  },\n\n  props: {\n    /**\n     * When true, uses DtDropdown instead of DtPopover as the overlay.\n     * Provides keyboard navigation (arrow keys) for list items.\n     * Default content renders DtListItem elements (single-select)\n     * instead of checkboxes (multi-select).\n     */\n    useDropdown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, checkbox changes are held in a pending state until the user\n     * clicks Apply. Cancel or closing the popover discards pending changes.\n     * Only applies to popover mode (not useDropdown).\n     */\n    deferSelection: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, the pill cannot be interacted with but does not\n     * receive disabled visual styling. Adds `d-filter-pill--read-only`\n     * class and hides the chevron icon. The clear button is suppressed\n     * and the tooltip falls back to a read-only message when\n     * startTooltipText is not provided.\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the clear button when a filter is active\n     * @values true, false\n     */\n    showClear: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the label wrapper element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover content area.\n     * Only applies when useDropdown is false.\n     */\n    popoverContentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n     * Only applies when useDropdown is false.\n     */\n    popoverHeaderClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n     * Only applies when useDropdown is false.\n     */\n    popoverFooterClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover dialog element.\n     * Only applies when useDropdown is false.\n     */\n    popoverDialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the dropdown list wrapper.\n     * Only applies when useDropdown is true.\n     */\n    dropdownListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n\n    /**\n     * Emitted when deferred selection is applied\n     *\n     * @event apply\n     */\n    'apply',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n      pendingFilters: null,\n    };\n  },\n\n  computed: {\n    overlayComponent () {\n      return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n    },\n\n    overlayProps () {\n      const props = {\n        'append-to': this.popoverAppendTo,\n        'fallback-placements': this.popoverFallbackPlacements,\n        'max-height': this.popoverMaxHeight,\n        'max-width': this.popoverMaxWidth,\n        modal: true,\n        placement: this.popoverPlacement,\n      };\n      if (this.useDropdown) {\n        props['list-class'] = this.dropdownListClass;\n      } else {\n        props.padding = this.popoverPadding;\n        props['content-class'] = this.popoverContentClass;\n        props['header-wrapper-class'] = this.popoverHeaderClass;\n        props['footer-wrapper-class'] = this.popoverFooterClass;\n        props['dialog-class'] = this.popoverDialogClass;\n      }\n      return props;\n    },\n\n    buttonKind () {\n      return (this.isActive && !this.disabled) ? 'default' : 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      if (this.readOnly) return this.startTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n      return this.startTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.endTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.endTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) {\n        return 'All';\n      }\n\n      return this.activeFilters[0] ?? '';\n    },\n\n    activeFilterOverflow () {\n      if (this.activeFilters.length <= 1) return '';\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n      return '+' + (this.activeFilters.length - 1);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n    },\n\n    displayFilters () {\n      return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n    },\n\n    pendingActiveFilters () {\n      if (!this.pendingFilters) return [];\n      return this.pendingFilters.filter(f => f.active).map(f => f.name);\n    },\n\n    cancelButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n    },\n\n    applyButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n    },\n\n    clearIconSize () {\n      if (String(this.size) === '100') return '100';\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n      if (this.deferSelection) {\n        if (isOpen) {\n          this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n        } else {\n          this.pendingFilters = null;\n        }\n      }\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.');\n    }\n    if (this.deferSelection && this.useDropdown) {\n      console.warn('deferSelection has no effect when useDropdown is true.');\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n\n    openPopover () {\n      if (this.readOnly) return;\n      this.isOpen = true;\n    },\n\n    selectFilter (selectedFilter, close) {\n      this.filters.forEach(filter => {\n        filter.active = filter === selectedFilter;\n      });\n      close();\n    },\n\n    applySelection () {\n      if (!this.pendingFilters) return;\n      this.filters.forEach((filter, i) => {\n        if (this.pendingFilters[i]) {\n          filter.active = this.pendingFilters[i].active;\n        } else {\n          delete filter.active;\n        }\n      });\n      this.$emit('apply');\n      this.isOpen = false;\n    },\n\n    cancelSelection () {\n      this.isOpen = false;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"filter-pill.js","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-filter-pill',\n      { 'd-filter-pill--read-only': readOnly },\n    ]\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <component\n      :is=\"overlayComponent\"\n      v-model:open=\"isOpen\"\n      v-bind=\"overlayProps\"\n      :content-mode=\"contentMode\"\n    >\n      <template #anchor=\"slotData\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"useDropdown ? slotData : slotData.attrs\"\n          :active=\"isActive\"\n          :aria-disabled=\"readOnly || undefined\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"openPopover\"\n          @keydown.up.down.prevent=\"openPopover\"\n        >\n          <template\n            v-if=\"$slots.startIcon\"\n            #startIcon=\"{ iconSize }\"\n          >\n            <!-- @slot Icon displayed before the label -->\n            <slot\n              name=\"startIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n          <span :class=\"['d-filter-pill__label', labelClass]\">\n            <!-- @slot Allows you to customize the label slot -->\n            <slot\n              :label=\"label\"\n              :filters=\"filters\"\n              :active-filters=\"activeFilters\"\n              :active-filter-list=\"activeFilterList\"\n              :active-filter-overflow=\"activeFilterOverflow\"\n            >\n              <span\n                class=\"d-filter-pill__label-start\"\n                :title=\"label\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-end\"\n                :title=\"activeFilterList\"\n                v-text=\"activeFilterList\"\n              />\n              <span\n                v-if=\"activeFilterOverflow\"\n                class=\"d-filter-pill__label-end-overflow\"\n                :title=\"`plus ${activeFilters.length - 1} others`\"\n                v-text=\"activeFilterOverflow\"\n              />\n            </slot>\n          </span>\n          <template\n            v-if=\"!readOnly\"\n            #endIcon=\"{ iconSize }\"\n          >\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template\n        v-if=\"!useDropdown\"\n        #content=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n          :pending-filters=\"pendingFilters\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n            :aria-label=\"label\"\n            :name=\"label || 'filter-pill'\"\n          >\n            <dt-checkbox\n              v-for=\"filter in displayFilters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @update:model-value=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n      <template\n        v-if=\"!useDropdown && $slots.headerContent\"\n        #headerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover header -->\n        <slot\n          name=\"headerContent\"\n          :close=\"close\"\n        />\n      </template>\n      <template\n        v-if=\"!useDropdown && (deferSelection || $slots.footerContent)\"\n        #footerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n        <slot\n          name=\"footerContent\"\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n        >\n          <dt-stack\n            v-if=\"deferSelection\"\n            direction=\"row\"\n            gap=\"400\"\n            justify=\"end\"\n            data-qa=\"dt-filter-pill__deferred-footer\"\n          >\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__cancel-button\"\n              @click=\"cancelSelection\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              importance=\"primary\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__apply-button\"\n              @click=\"applySelection\"\n            >\n              {{ applyButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </slot>\n      </template>\n      <template\n        v-if=\"useDropdown\"\n        #list=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the dropdown content -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-list-item\n            v-for=\"filter in filters\"\n            :key=\"filter.name\"\n            role=\"menuitem\"\n            navigation-type=\"arrow-keys\"\n            :selected=\"filter.active\"\n            @click=\"selectFilter(filter, close)\"\n          >\n            {{ filter.name }}\n          </dt-list-item>\n        </slot>\n      </template>\n    </component>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"endTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon>\n        <dt-icon-close :size=\"clearIconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/Popover';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n    DtDropdown,\n    DtListItem,\n    DtStack,\n  },\n\n  props: {\n    /**\n     * When true, uses DtDropdown instead of DtPopover as the overlay.\n     * Provides keyboard navigation (arrow keys) for list items.\n     * Default content renders DtListItem elements (single-select)\n     * instead of checkboxes (multi-select).\n     */\n    useDropdown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, checkbox changes are held in a pending state until the user\n     * clicks Apply. Cancel or closing the popover discards pending changes.\n     * Only applies to popover mode (not useDropdown).\n     */\n    deferSelection: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, the pill cannot be interacted with but does not\n     * receive disabled visual styling. Adds `d-filter-pill--read-only`\n     * class and hides the chevron icon. The clear button is suppressed\n     * and the tooltip falls back to a read-only message when\n     * startTooltipText is not provided.\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the clear button when a filter is active\n     * @values true, false\n     */\n    showClear: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the label wrapper element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover content area.\n     * Only applies when useDropdown is false.\n     */\n    popoverContentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n     * Only applies when useDropdown is false.\n     */\n    popoverHeaderClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n     * Only applies when useDropdown is false.\n     */\n    popoverFooterClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover dialog element.\n     * Only applies when useDropdown is false.\n     */\n    popoverDialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the dropdown list wrapper.\n     * Only applies when useDropdown is true.\n     */\n    dropdownListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n\n    /**\n     * Emitted when deferred selection is applied\n     *\n     * @event apply\n     */\n    'apply',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n      pendingFilters: null,\n    };\n  },\n\n  computed: {\n    overlayComponent () {\n      return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n    },\n\n    overlayProps () {\n      const props = {\n        'append-to': this.popoverAppendTo,\n        'fallback-placements': this.popoverFallbackPlacements,\n        'max-height': this.popoverMaxHeight,\n        'max-width': this.popoverMaxWidth,\n        modal: true,\n        placement: this.popoverPlacement,\n      };\n      if (this.useDropdown) {\n        props['list-class'] = this.dropdownListClass;\n      } else {\n        props.padding = this.popoverPadding;\n        props['content-class'] = this.popoverContentClass;\n        props['header-wrapper-class'] = this.popoverHeaderClass;\n        props['footer-wrapper-class'] = this.popoverFooterClass;\n        props['dialog-class'] = this.popoverDialogClass;\n      }\n      return props;\n    },\n\n    buttonKind () {\n      return (this.isActive && !this.disabled) ? 'default' : 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      if (this.readOnly) return this.startTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n      return this.startTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.endTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.endTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) {\n        return 'All';\n      }\n\n      return this.activeFilters[0] ?? '';\n    },\n\n    activeFilterOverflow () {\n      if (this.activeFilters.length <= 1) return '';\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n      return '+' + (this.activeFilters.length - 1);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n    },\n\n    displayFilters () {\n      return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n    },\n\n    pendingActiveFilters () {\n      if (!this.pendingFilters) return [];\n      return this.pendingFilters.filter(f => f.active).map(f => f.name);\n    },\n\n    cancelButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n    },\n\n    applyButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n    },\n\n    clearIconSize () {\n      if (String(this.size) === '100') return '100';\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n      if (this.deferSelection) {\n        if (isOpen) {\n          this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n        } else {\n          this.pendingFilters = null;\n        }\n      }\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.');\n    }\n    if (this.deferSelection && this.useDropdown) {\n      console.warn('deferSelection has no effect when useDropdown is true.');\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n\n    openPopover () {\n      if (this.readOnly) return;\n      this.isOpen = true;\n    },\n\n    selectFilter (selectedFilter, close) {\n      this.filters.forEach(filter => {\n        filter.active = filter === selectedFilter;\n      });\n      close();\n    },\n\n    applySelection () {\n      if (!this.pendingFilters) return;\n      this.filters.forEach((filter, i) => {\n        if (this.pendingFilters[i]) {\n          filter.active = this.pendingFilters[i].active;\n        } else {\n          delete filter.active;\n        }\n      });\n      this.$emit('apply');\n      this.isOpen = false;\n    },\n\n    cancelSelection () {\n      this.isOpen = false;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/icon/icon.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(`./icon-constants.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={name:`DtIcon`,props:{size:{type:String,default:`500`,validator:e=>Object.keys(t.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>t.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return r.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function a(e,t,r,i,a,o){return o.icon?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icon),{key:0,size:r.size,"aria-label":o.iconAriaLabel,"data-qa":e.$attrs[`data-qa`]??`dt-icon`},null,8,[`size`,`aria-label`,`data-qa`])):(0,n.createCommentVNode)(``,!0)}var o=e.t(i,[[`render`,a]]);exports.default=o;
+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(`./icon-constants.cjs`);let r=require(`vue`),i=require(`@dialpad/dialtone-icons/vue`);var a={name:`DtIcon`,props:{size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(n.ICON_SIZE_MODIFIERS)},name:{type:String,required:!0,validator:e=>n.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return i.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function o(e,t,n,i,a,o){return o.icon?((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(o.icon),{key:0,size:n.size,"aria-label":o.iconAriaLabel,"data-qa":e.$attrs[`data-qa`]??`dt-icon`},null,8,[`size`,`aria-label`,`data-qa`])):(0,r.createCommentVNode)(``,!0)}var s=t.t(a,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=icon.cjs.map

package/dist/lib/icon/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":"mSAoBA,IAAK,EAAU,CACb,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAY,GAAS,EAAA,WAAW,SAAS,EAAK,CAC/C,CAKD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,EAEN,EAGH,SAAU,CACR,MAAQ,CACN,OAAO,EAAA,MAAM,eAAe,KAAK,KAAK,QAGxC,eAAiB,CAGf,OAAO,KAAK,WAEf,CACF,gCAlES,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,KAAI,CAAA,OAER,KAAM,EAAA,KACN,aAAY,EAAA,cACZ,UAAS,EAAA,OAAM,YAAA"}
+{"version":3,"file":"icon.cjs","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":"kVAqBA,IAAK,EAAU,CACb,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAY,GAAS,EAAA,WAAW,SAAS,EAAK,CAC/C,CAKD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,EAEN,EAGH,SAAU,CACR,MAAQ,CACN,OAAO,EAAA,MAAM,eAAe,KAAK,KAAK,QAGxC,eAAiB,CAGf,OAAO,KAAK,WAEf,CACF,gCAnES,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,KAAI,CAAA,OAER,KAAM,EAAA,KACN,aAAY,EAAA,cACZ,UAAS,EAAA,OAAM,YAAA"}