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

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":";;;;;;;;;;;;;;;;;AA4NA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,iBAAA;EACA,YAAA;EACA,WAAA;EACA,UAAA;EACA;EACA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACD;CAED,OAAO;EAOL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAOD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,eAAe,EAAE;GAClB;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EASD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS,KAAA;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAQD,iBAAiB;GACf,MAAM,CAAC,GAAmB,OAAO;GACjC,SAAS;GACT,YAAW,MACF,EAAyB,SAAS,EAAQ,IAC9C,aAAoB;GAE1B;EAYD,2BAA2B;GACzB,MAAM;GACN,eACS,CAAC,OAAO;GAElB;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAMD,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS;GACT,YAAY,MACH,OAAO,KAAK,EAAwB,CAAC,MAAM,MAAS,MAAS,EAAQ;GAE/E;EAOD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,qBAAqB;GACnB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,aAAa;EAMb,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAsB;GACvD;EACF;CAED,OAAO;EAOL;EAQA;EAMA;EAOA;EACD;CAED,OAAQ;AACN,SAAO;GACL,QAAQ;GACR,MAAM,IAAI,GAAsB;GAChC,SAAS,KAAK;GACd,gBAAgB;GACjB;;CAGH,UAAU;EACR,mBAAoB;AAClB,UAAO,KAAK,cAAc,gBAAgB;;EAG5C,eAAgB;GACd,IAAM,IAAQ;IACZ,aAAa,KAAK;IAClB,uBAAuB,KAAK;IAC5B,cAAc,KAAK;IACnB,aAAa,KAAK;IAClB,OAAO;IACP,WAAW,KAAK;IACjB;AAUD,UATI,KAAK,cACP,EAAM,gBAAgB,KAAK,qBAE3B,EAAM,UAAU,KAAK,gBACrB,EAAM,mBAAmB,KAAK,qBAC9B,EAAM,0BAA0B,KAAK,oBACrC,EAAM,0BAA0B,KAAK,oBACrC,EAAM,kBAAkB,KAAK,qBAExB;;EAGT,aAAc;AACZ,UAAQ,KAAK,YAAY,CAAC,KAAK,WAAY,YAAY;;EAGzD,2BAA4B;AAE1B,UADI,KAAK,WAAiB,KAAK,oBAAoB,KAAK,KAAK,GAAG,yCAAyC,GAClG,KAAK;;EAGd,uBAAwB;AACtB,UAAO,KAAK,kBAAkB,KAAK,KAAK,GAAG,0CAA0C;;EAGvF,mBAAoB;AACd,aAAK,eAET,QAAO,KAAK;;EAGd,gBAAiB;AACf,UAAO,KAAK,QAAQ,QAAO,MAAU,EAAO,OAAO,CAAC,KAAI,MAAU,EAAO,KAAK;;EAGhF,mBAAoB;AAKlB,UAJI,KAAK,cAAc,WAAW,KAAK,QAAQ,UAAU,KAAK,QAAQ,SAAS,IACtE,QAGF,KAAK,cAAc,MAAM;;EAGlC,uBAAwB;AAItB,UAHI,KAAK,cAAc,UAAU,KAC7B,KAAK,cAAc,WAAW,KAAK,QAAQ,UAAU,KAAK,QAAQ,SAAS,IAAU,KAElF,OAAO,KAAK,cAAc,SAAS;;EAG5C,WAAY;AACV,UAAO,KAAK,iBAAiB,SAAS;;EAGxC,WAAY;AACV,UAAO,CAAC,KAAK,YAAY,KAAK,aAAa,KAAK,iBAAiB,SAAS;;EAG5E,iBAAkB;AAChB,UAAQ,KAAK,kBAAkB,KAAK,iBAAkB,KAAK,iBAAiB,KAAK;;EAGnF,uBAAwB;AAEtB,UADK,KAAK,iBACH,KAAK,eAAe,QAAO,MAAK,EAAE,OAAO,CAAC,KAAI,MAAK,EAAE,KAAK,GADhC,EAAE;;EAIrC,oBAAqB;AACnB,UAAO,KAAK,KAAK,GAAG,2CAA2C;;EAGjE,mBAAoB;AAClB,UAAO,KAAK,KAAK,GAAG,0CAA0C;;EAGhE,gBAAiB;AAEf,UADI,OAAO,KAAK,KAAI,KAAM,QAAc,QACjC,EAAkB,OAAO,KAAK,KAAK;;EAE7C;CAED,OAAO;EACL,OAAQ,GAAQ;AAEd,GADA,KAAK,MAAM,QAAQ,EAAO,EACtB,KAAK,mBACH,IACF,KAAK,iBAAiB,KAAK,MAAM,KAAK,UAAU,KAAK,QAAQ,CAAC,GAE9D,KAAK,iBAAiB;;EAK5B,SAAS;GACP,MAAM;GACN,QAAS,GAAS;AAChB,SAAK,MAAM,qBAAqB,EAAQ;;GAE3C;EACF;CAED,UAAW;AAIT,EAHM,KAAK,YAAY,UAAW,KAAK,OAAO,WAAW,KAAK,OAAO,SAAS,IAC5E,QAAQ,KAAK,sEAAoE,EAE/E,KAAK,kBAAkB,KAAK,eAC9B,QAAQ,KAAK,yDAAyD;;CAI1E,SAAS;EACP,YAAa,GAAQ;AAEnB,GADA,KAAK,QAAQ,SAAQ,MAAU,OAAO,EAAO,OAAO,EACpD,KAAK,MAAM,SAAS,EAAM;;EAG5B,cAAe;AACT,QAAK,aACT,KAAK,SAAS;;EAGhB,aAAc,GAAgB,GAAO;AAInC,GAHA,KAAK,QAAQ,SAAQ,MAAU;AAC7B,MAAO,SAAS,MAAW;KAC3B,EACF,GAAO;;EAGT,iBAAkB;AACX,QAAK,mBACV,KAAK,QAAQ,SAAS,GAAQ,MAAM;AAClC,IAAI,KAAK,eAAe,KACtB,EAAO,SAAS,KAAK,eAAe,GAAG,SAEvC,OAAO,EAAO;KAEhB,EACF,KAAK,MAAM,QAAQ,EACnB,KAAK,SAAS;;EAGhB,kBAAmB;AACjB,QAAK,SAAS;;EAEjB;CACF;;;aArpBC,EA0MM,OAAA;EAzMH,OAAK,EAAA,CAAA,iBAAA,EAAA,4BAA+D,EAAA,UAAQ,CAAA,CAAA;EAI7E,WAAQ;WAER,EA6KY,EA5KL,EAAA,iBAAgB,EADvB,EA6KY;EA3KF,MAAM,EAAA;0CAAA,EAAA,SAAM;IACZ,EAAA,cAAY,EACnB,gBAAc,EAAA,aAAW,CAAA,EAAA,EAAA;EAEf,QAAM,GAoEH,MApEa,CAAA,GAAA,GAAA,EACzB,EAmEY,GAnEZ,EAmEY,EAjEF,cAAc,IAAW,EAAS,OAAK;GAC9C,QAAQ,EAAA;GACR,iBAAe,EAAA,YAAY,KAAA;GAC3B,OAAK,CAAA,0BAAA,EAAA,2BAAiG,EAAA,UAAA,CAAA;GAMtG,UAAU,EAAA;GACV,MAAM,EAAA;GACN,MAAM,EAAA;GACP,WAAQ;GACR,YAAW;GACV,SAAO,EAAA;GACP,WAAO,EAAA,EAAkB,EAAA,aAAW,CAAA,UAAA,CAAA,EAAA,CAAA,MAAA,OAAA,CAAA;;oBAuC9B,CA3BP,EA2BO,QAAA,EA3BA,OAAK,EAAA,CAAA,wBAA2B,EAAA,WAAU,CAAA,EAAA,EAAA,CAE/C,EAwBO,EAAA,QAAA,WAAA;IAvBJ,OAAO,EAAA;IACP,SAAS,EAAA;IACT,eAAgB,EAAA;IAChB,kBAAoB,EAAA;IACpB,sBAAwB,EAAA;YAmBpB;IAjBL,EAIE,QAAA;KAHA,OAAM;KACL,OAAO,EAAA;kBACR,EAAc,EAAN,MAAK;;IAGP,EAAA,oBAAA,GAAA,EADR,EAKE,QAAA;;KAHA,OAAM;KACL,OAAO,EAAA;kBACR,EAAyB,EAAjB,iBAAgB;;IAGlB,EAAA,wBAAA,GAAA,EADR,EAKE,QAAA;;KAHA,OAAM;KACL,OAAK,QAAU,EAAA,cAAc,SAAM,EAAA;kBACpC,EAA6B,EAArB,qBAAoB;;;;MAjC1B,EAAA,OAAO,YAAA;SACZ;UAMC,EANY,kBAAQ,CAGtB,EAGE,EAAA,QAAA,aAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;cAgCf,EAAA,oBAAA;SACN;UAMC,EANU,kBAAQ,CAEpB,EAIE,GAAA;IAHC,MAAM;IACP,OAAM;IACN,WAAQ;;;;;;;;;;;;YA/DE,EAAA,yBAAwB,CAAA,CAAA,CAAA,CAAA;;;EAqEjC,EAAA,uBAAA;SACN;UAwBM,EAxBK,eAAK,CAGjB,EAqBO,EAAA,QAAA,WAAA;IApBG;IACP,OAAO,EAAA;IACP,QAAQ,EAAA;IACR,gBAAiB,EAAA;YAiBb,CAbG,EAAA,YAAY,UAAA,GAAA,EADpB,EAaoB,GAAA;;IAXjB,eAAa,EAAA,iBAAiB,EAAA,uBAAuB,EAAA;IACrD,cAAY,EAAA;IACZ,MAAM,EAAA,SAAK;;qBAGsB,EAAA,EAAA,GAAA,EADlC,EAME,GAAA,MAAA,EALiB,EAAA,iBAAV,YADT,EAME,GAAA;KAJC,KAAK,EAAO;KACZ,OAAO,EAAO;KACd,OAAO,EAAO;KACd,wBAAqB,MAAW,EAAO,SAAS;;;;;;;;;;;;;;GAMhD,EAAA,eAAe,EAAA,OAAO,gBAAA;SAC5B;UAMC,EANgB,eAAK,CAGvB,EAGE,EAAA,QAAA,iBAAA,EADQ,UAAK,CAAA,CAAA,CAAA;;;GAIR,EAAA,gBAAgB,EAAA,kBAAkB,EAAA,OAAO,iBAAA;SAC/C;UAkCM,EAlCW,eAAK,CAGvB,EA+BO,EAAA,QAAA,iBAAA;IA7BG;IACP,OAAO,EAAA;IACP,QAAQ,EAAA;YA2BJ,CAxBG,EAAA,kBAAA,GAAA,EADR,EAwBW,GAAA;;IAtBT,WAAU;IACV,KAAI;IACJ,SAAQ;IACR,WAAQ;;qBAUI,CARZ,EAQY,GAAA;KAPV,YAAW;KACX,MAAK;KACJ,MAAM;KACP,WAAQ;KACP,SAAO,EAAA;;sBAEe,CAAA,EAAA,EAApB,EAAA,kBAAiB,EAAA,EAAA,CAAA,CAAA;;wBAEtB,EAOY,GAAA;KANV,YAAW;KACV,MAAM;KACP,WAAQ;KACP,SAAO,EAAA;;sBAEc,CAAA,EAAA,EAAnB,EAAA,iBAAgB,EAAA,EAAA,CAAA,CAAA;;;;;;;EAMnB,EAAA,cAAA;SACL;UAiBM,EAjBE,eAAK,CAGd,EAcO,EAAA,QAAA,WAAA,EAbG,UAAK,QAaR,EAAA,EAAA,GAAA,EAVL,EASe,GAAA,MAAA,EARI,EAAA,UAAV,YADT,EASe,GAAA;IAPZ,KAAK,EAAO;IACb,MAAK;IACL,mBAAgB;IACf,UAAU,EAAO;IACjB,UAAK,MAAE,EAAA,aAAa,GAAQ,EAAK;;qBAEjB,CAAA,EAAA,EAAd,EAAO,KAAI,EAAA,EAAA,CAAA,CAAA;;;;;uCAMd,EAAA,WAAA,GAAA,GAAA,EADR,EAoBY,GAAA;;EAjBT,QAAQ,EAAA;EACR,cAAY,EAAA;EACZ,OAAK,EAAA,CAAA,wBAAA,EAAA,kCAAgF,EAAA,UAAQ,CAAA,CAAA;EAI7F,UAAU,EAAA;EACV,MAAM,EAAA;EACN,MAAM,EAAA;EACN,OAAO,EAAA;EACR,WAAQ;EACR,YAAW;EACV,SAAO,EAAA;;EAEG,MAAI,QAC0B,CAAvC,EAAuC,GAAA,EAAvB,MAAM,EAAA,eAAa,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;;;;;;;WAhBvB,EAAA,eAAc,CAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

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"}

package/dist/lib/icon/icon.js

@@ -1,20 +1,21 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { ICON_NAMES as t, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
-import { createBlock as r, createCommentVNode as i, openBlock as a, resolveDynamicComponent as o } from "vue";
-import { icons as s } from "@dialpad/dialtone-icons/vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { ICON_NAMES as n, ICON_SIZE_MODIFIERS as r } from "./icon-constants.js";
+import { createBlock as i, createCommentVNode as a, openBlock as o, resolveDynamicComponent as s } from "vue";
+import { icons as c } from "@dialpad/dialtone-icons/vue";
 //#region components/Icon/Icon.vue
-var c = {
+var l = {
 	name: "DtIcon",
 	props: {
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(n).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(r)
 		},
 		name: {
 			type: String,
 			required: !0,
-			validator: (e) => t.includes(e)
+			validator: (e) => n.includes(e)
 		},
 		ariaLabel: {
 			type: String,
@@ -26,15 +27,15 @@ var c = {
 	},
 	computed: {
 		icon() {
-			return s[`./src/icons/${this.name}.vue`];
+			return c[`./src/icons/${this.name}.vue`];
 		},
 		iconAriaLabel() {
 			return this.ariaLabel;
 		}
 	}
 };
-function l(e, t, n, s, c, l) {
-	return l.icon ? (a(), r(o(l.icon), {
+function u(e, t, n, r, c, l) {
+	return l.icon ? (o(), i(s(l.icon), {
 		key: 0,
 		size: n.size,
 		"aria-label": l.iconAriaLabel,
@@ -43,10 +44,10 @@ function l(e, t, n, s, c, l) {
 		"size",
 		"aria-label",
 		"data-qa"
-	])) : i("", !0);
+	])) : a("", !0);
 }
-var u = /* @__PURE__ */ e(c, [["render", l]]);
+var d = /* @__PURE__ */ t(l, [["render", u]]);
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=icon.js.map

package/dist/lib/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","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":";;;;;AAoBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAlES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}
+{"version":3,"file":"icon.js","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":";;;;;;AAqBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAnES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}

package/dist/lib/input/input.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`../text/text-constants.cjs`),o=require(`../text/text.cjs`),s=require(`./input-constants.cjs`);let c=require(`vue`);var l={name:`DtInput`,components:{DtValidationMessages:i.default,DtText:o.default},mixins:[n.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:s.INPUT_TYPES.TEXT,validator:e=>Object.values(s.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},descriptionClass:{type:[String,Array,Object],default:``},size:{type:[String,Number],default:300,validator:e=>Object.keys(s.INPUT_ICON_SIZES).includes(String(e))},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1},labelSize:{type:[String,Number],default:null,validator:e=>a.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(a.TEXT_STRENGTH_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``}},emits:[`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:t.hasSlotContent,isComposing:!1,justEndedComposition:!1,messagesId:t.getUniqueString()}},computed:{isTextarea(){return this.type===s.INPUT_TYPES.TEXTAREA},isDefaultSize(){return String(this.size)===s.INPUT_SIZES.DEFAULT||String(this.size)===`300`},iconSize(){return s.INPUT_ICON_SIZES[String(this.size)]},isValidSize(){return Object.keys(s.INPUT_ICON_SIZES).includes(String(this.size))},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===s.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${t.getUniqueString()}`},inputState(){return t.getValidationState(this.validationMessages)},ariaInvalid(){return this.inputState===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.validationMessages.length>0?this.messagesId:void 0},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.CRITICAL},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:s.INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)]},stateClass(){return[s.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue),this.runValidations()},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.startIcon||this.$slots.leftIcon,"d-input-icon--right":this.$slots.endIcon||this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:[`d-input__wrapper`,{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e==`string`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){this.$emit(`clear`),this.$emit(`update:modelValue`,``)},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value=``,this.$refs.input.focus(),this.emitClearEvents()},runValidations(){!this.label&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)}}},u=[`aria-details`],d={key:0},f={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},p=[`read-only`],m=[`name`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`],h=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`];function g(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-text`),s=(0,c.resolveComponent)(`dt-validation-messages`);return(0,c.openBlock)(),(0,c.createElementBlock)(`div`,{ref:`container`,class:(0,c.normalizeClass)([`d-input__root`,{"d-input--hidden":n.hidden},e.$attrs.class]),style:(0,c.normalizeStyle)(e.$attrs.style),"data-qa":`dt-input`},[(0,c.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,c.renderSlot)(e.$slots,`label`,{},()=>[n.showLabel&&n.label?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,ref:`label`,"data-qa":`dt-input-label`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,class:(0,c.normalizeClass)([`d-input__label-text`,n.labelClass])},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.label),1)]),_:1},8,[`size`,`strength`,`class`])):(0,c.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,id:a.descriptionKey,ref:`description`,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:(0,c.normalizeClass)([`d-input__description`,`d-description`,n.descriptionClass]),"data-qa":`dt-input-description`},{default:(0,c.withCtx)(()=>[i.hasSlotContent(e.$slots.description)||n.description?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`description`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.description),1)])])):(0,c.createCommentVNode)(``,!0),a.shouldValidateLength?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,f,(0,c.toDisplayString)(a.validationProps.length.description),1)):(0,c.createCommentVNode)(``,!0)]),_:3},8,[`id`,`size`,`density`,`class`])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--left`,n.startIconClass]),"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.startIcon?(0,c.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:a.iconSize}):(0,c.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:a.iconSize})],34),a.isTextarea?((0,c.openBlock)(),(0,c.createElementBlock)(`textarea`,(0,c.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,m)):((0,c.openBlock)(),(0,c.createElementBlock)(`input`,(0,c.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,h)),(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--right`,n.endIconClass]),"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.endIcon?(0,c.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:a.iconSize,clear:a.clearInput}):(0,c.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:a.iconSize,clear:a.clearInput})],34)],10,p)],8,u),(0,c.createVNode)(s,(0,c.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-input-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var _=r.t(l,[[`render`,g]]);exports.default=_;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/validators/index.cjs`),n=require(`../../common/utils/index.cjs`),r=require(`../../common/mixins/input.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../text/text-constants.cjs`),s=require(`../text/text.cjs`),c=require(`./input-constants.cjs`);let l=require(`vue`);var u=t.ordinalSizeValidator(c.INPUT_ICON_SIZES),d={name:`DtInput`,components:{DtValidationMessages:a.default,DtText:s.default},mixins:[r.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:c.INPUT_TYPES.TEXT,validator:e=>Object.values(c.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},descriptionClass:{type:[String,Array,Object],default:``},size:{type:[String,Number],default:300,validator:u},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1},labelSize:{type:[String,Number],default:null,validator:e=>o.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(o.TEXT_STRENGTH_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``}},emits:[`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:n.hasSlotContent,isComposing:!1,justEndedComposition:!1,messagesId:n.getUniqueString()}},computed:{isTextarea(){return this.type===c.INPUT_TYPES.TEXTAREA},isDefaultSize(){return String(this.size)===c.INPUT_SIZES.DEFAULT||String(this.size)===`300`},iconSize(){return c.INPUT_ICON_SIZES[String(this.size)]},isValidSize(){return u(this.size)},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===c.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${n.getUniqueString()}`},inputState(){return n.getValidationState(this.validationMessages)},ariaInvalid(){return this.inputState===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.validationMessages.length>0?this.messagesId:void 0},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.CRITICAL},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:c.INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)]},stateClass(){return[c.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue),this.runValidations()},methods:{removeClassStyleAttrs:n.removeClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.startIcon||this.$slots.leftIcon,"d-input-icon--right":this.$slots.endIcon||this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:[`d-input__wrapper`,{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e==`string`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){this.$emit(`clear`),this.$emit(`update:modelValue`,``)},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value=``,this.$refs.input.focus(),this.emitClearEvents()},runValidations(){!this.label&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)}}},f=[`aria-details`],p={key:0},m={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},h=[`read-only`],g=[`name`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`],_=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`];function v(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-text`),s=(0,l.resolveComponent)(`dt-validation-messages`);return(0,l.openBlock)(),(0,l.createElementBlock)(`div`,{ref:`container`,class:(0,l.normalizeClass)([`d-input__root`,{"d-input--hidden":n.hidden},e.$attrs.class]),style:(0,l.normalizeStyle)(e.$attrs.style),"data-qa":`dt-input`},[(0,l.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,l.renderSlot)(e.$slots,`label`,{},()=>[n.showLabel&&n.label?((0,l.openBlock)(),(0,l.createBlock)(o,{key:0,ref:`label`,"data-qa":`dt-input-label`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,class:(0,l.normalizeClass)([`d-input__label-text`,n.labelClass])},{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.label),1)]),_:1},8,[`size`,`strength`,`class`])):(0,l.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,l.openBlock)(),(0,l.createBlock)(o,{key:0,id:a.descriptionKey,ref:`description`,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:(0,l.normalizeClass)([`d-input__description`,`d-description`,n.descriptionClass]),"data-qa":`dt-input-description`},{default:(0,l.withCtx)(()=>[i.hasSlotContent(e.$slots.description)||n.description?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,p,[(0,l.renderSlot)(e.$slots,`description`,{},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.description),1)])])):(0,l.createCommentVNode)(``,!0),a.shouldValidateLength?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,m,(0,l.toDisplayString)(a.validationProps.length.description),1)):(0,l.createCommentVNode)(``,!0)]),_:3},8,[`id`,`size`,`density`,`class`])):(0,l.createCommentVNode)(``,!0),(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,l.createElementVNode)(`span`,{class:(0,l.normalizeClass)([`d-input-icon`,`d-input-icon--left`,n.startIconClass]),"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.startIcon?(0,l.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:a.iconSize}):(0,l.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:a.iconSize})],34),a.isTextarea?((0,l.openBlock)(),(0,l.createElementBlock)(`textarea`,(0,l.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,l.toHandlers)(a.inputListeners,!0)),null,16,g)):((0,l.openBlock)(),(0,l.createElementBlock)(`input`,(0,l.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,l.toHandlers)(a.inputListeners,!0)),null,16,_)),(0,l.createElementVNode)(`span`,{class:(0,l.normalizeClass)([`d-input-icon`,`d-input-icon--right`,n.endIconClass]),"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.endIcon?(0,l.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:a.iconSize,clear:a.clearInput}):(0,l.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:a.iconSize,clear:a.clearInput})],34)],10,h)],8,f),(0,l.createVNode)(s,(0,l.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-input-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var y=i.t(d,[[`render`,v]]);exports.default=y;
 //# sourceMappingURL=input.cjs.map