@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

package/dist/lib/checkbox/checkbox.js

@@ -1,15 +1,45 @@
-import { InputMixin as m, CheckableMixin as p, GroupableMixin as b, MessagesMixin as k } from "../../common/mixins/input.js";
-import { addClassStyleAttrs as f, removeClassStyleAttrs as C } from "../../common/utils/index.js";
-import { CHECKBOX_INPUT_VALIDATION_CLASSES as g } from "./checkbox-constants.js";
-import { resolveComponent as v, openBlock as l, createElementBlock as o, mergeProps as i, createElementVNode as n, normalizeClass as V, toHandlers as M, renderSlot as d, createTextVNode as c, toDisplayString as h, createCommentVNode as r, createVNode as y } from "vue";
-import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import $ from "../validation-messages/validation-messages.js";
-const A = {
+import { InputMixin as k, CheckableMixin as g, GroupableMixin as C, MessagesMixin as v } from "../../common/mixins/input.js";
+import { addClassStyleAttrs as S, removeClassStyleAttrs as V } from "../../common/utils/index.js";
+import { CHECKBOX_INPUT_VALIDATION_CLASSES as y } from "./checkbox-constants.js";
+import { resolveComponent as d, openBlock as l, createElementBlock as u, mergeProps as i, createElementVNode as n, normalizeClass as M, toHandlers as D, createBlock as c, withCtx as h, renderSlot as m, createTextVNode as b, toDisplayString as p, createCommentVNode as o, createVNode as I } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../text/text.js";
+import T from "../validation-messages/validation-messages.js";
+import { TEXT_STRENGTH_MODIFIERS as _, TEXT_SIZE_MODIFIERS as A } from "../text/text-constants.js";
+const z = {
   compatConfig: { MODE: 3 },
   name: "DtCheckbox",
-  components: { DtValidationMessages: $ },
-  mixins: [m, p, b, k],
+  components: { DtValidationMessages: T, DtText: L },
+  mixins: [k, g, C, v],
   inheritAttrs: !1,
+  props: {
+    /**
+     * Determines visibility of checkbox label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Overrides the label text size.
+     * @values lg, md, sm, xs
+     */
+    labelSize: {
+      type: String,
+      default: null,
+      validator: (e) => A.label.includes(e)
+    },
+    /**
+     * Overrides the label font weight.
+     * @values bold, semibold, medium, normal
+     */
+    labelStrength: {
+      type: String,
+      default: null,
+      validator: (e) => Object.keys(_).includes(e)
+    }
+  },
   emits: [
     /**
      * Native input event
@@ -41,16 +71,22 @@ const A = {
     "focusout"
   ],
   computed: {
+    resolvedLabelSize() {
+      return this.labelSize ?? "md";
+    },
     inputValidationClass() {
-      return g[this.internalValidationState];
+      return y[this.internalValidationState];
     },
     checkboxGroupValueChecked() {
-      var e, a;
-      return ((a = (e = this.groupContext) == null ? void 0 : e.selectedValues) == null ? void 0 : a.includes(this.value)) ?? !1;
+      var e, t;
+      return ((t = (e = this.groupContext) == null ? void 0 : e.selectedValues) == null ? void 0 : t.includes(this.value)) ?? !1;
     },
-    hasLabel() {
+    hasLabelContent() {
       return !!(this.$slots.default || this.label);
     },
+    hasLabel() {
+      return this.labelVisible && this.hasLabelContent;
+    },
     hasMessages() {
       return this.formattedMessages.length && this.showMessages;
     },
@@ -81,65 +117,83 @@ const A = {
     this.runValidations();
   },
   methods: {
-    removeClassStyleAttrs: C,
-    addClassStyleAttrs: f,
+    removeClassStyleAttrs: V,
+    addClassStyleAttrs: S,
     emitValue(e) {
-      let { value: a, checked: t } = e;
-      this.internalIndeterminate && (t = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(a, t), this.$emit("input", t), this.$emit("update:modelValue", t);
+      let { value: t, checked: s } = e;
+      this.internalIndeterminate && (s = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(t, s), this.$emit("input", s), this.$emit("update:modelValue", s);
     },
     runValidations() {
-      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
+      !this.hasLabelContent && !this.$attrs["aria-label"] && console.warn(
+        '[Dialtone] A label is required for accessibility. Provide a label prop and use label-visible="false" to hide it visually.'
+      );
     }
   }
-}, D = { class: "d-checkbox__input" }, I = ["checked", "name", "value", "disabled", ".indeterminate"], L = {
+}, N = { class: "d-checkbox__input" }, w = ["checked", "name", "value", "disabled", "aria-label", ".indeterminate"], $ = {
   key: 0,
   class: "d-checkbox__messages",
   "data-qa": "checkbox-description-messages"
 };
-function N(e, a, t, w, E, s) {
-  const u = v("dt-validation-messages");
-  return l(), o("div", i({ class: e.rootClass }, s.addClassStyleAttrs(e.$attrs)), [
+function G(e, t, s, O, P, a) {
+  const r = d("dt-text"), f = d("dt-validation-messages");
+  return l(), u("div", i({ class: e.rootClass }, a.addClassStyleAttrs(e.$attrs)), [
     n("label", {
-      class: V(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
+      class: M(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
     }, [
-      n("div", D, [
+      n("div", N, [
         n("input", i({
           type: "checkbox",
           checked: e.internalChecked,
           name: e.internalName,
           value: e.value,
           disabled: e.internalDisabled,
-          class: ["d-checkbox", s.inputValidationClass, e.inputClass]
-        }, s.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, M(s.inputListeners, !0)), null, 48, I)
+          class: ["d-checkbox", a.inputValidationClass, e.inputClass],
+          "aria-label": !s.labelVisible && e.label ? e.label : void 0
+        }, a.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, D(a.inputListeners, !0)), null, 48, w)
       ]),
-      s.hasLabel ? (l(), o("div", i({
+      a.hasLabel ? (l(), c(r, i({
         key: 0,
+        as: "div",
+        kind: "label",
+        size: a.resolvedLabelSize,
+        strength: s.labelStrength ?? "normal",
+        tone: e.internalDisabled ? "disabled" : "primary",
         class: [e.labelClass, "d-checkbox__copy d-checkbox__label"]
-      }, e.labelChildProps, { "data-qa": "checkbox-label" }), [
-        d(e.$slots, "default", {}, () => [
-          c(h(e.label), 1)
-        ])
-      ], 16)) : r("", !0)
+      }, e.labelChildProps, { "data-qa": "checkbox-label" }), {
+        default: h(() => [
+          m(e.$slots, "default", {}, () => [
+            b(p(e.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["size", "strength", "tone", "class"])) : o("", !0)
     ], 2),
-    e.$slots.description || e.description || s.hasMessages ? (l(), o("div", L, [
-      e.$slots.description || e.description ? (l(), o("div", i({
+    e.$slots.description || e.description || a.hasMessages ? (l(), u("div", $, [
+      e.$slots.description || e.description ? (l(), c(r, i({
         key: 0,
+        kind: "body",
+        size: "sm",
+        tone: "tertiary",
+        as: "div",
         class: ["d-description", e.descriptionClass]
-      }, e.descriptionChildProps, { "data-qa": "checkbox-description" }), [
-        d(e.$slots, "description", {}, () => [
-          c(h(e.description), 1)
-        ])
-      ], 16)) : r("", !0),
-      y(u, i({
+      }, e.descriptionChildProps, { "data-qa": "checkbox-description" }), {
+        default: h(() => [
+          m(e.$slots, "description", {}, () => [
+            b(p(e.description), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"])) : o("", !0),
+      I(f, i({
         "validation-messages": e.formattedMessages,
         "show-messages": e.showMessages,
         class: e.messagesClass
       }, e.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-    ])) : r("", !0)
+    ])) : o("", !0)
   ], 16);
 }
-const T = /* @__PURE__ */ S(A, [["render", N]]);
+const K = /* @__PURE__ */ E(z, [["render", G]]);
 export {
-  T as default
+  K as default
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/lib/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n      <div class=\"d-checkbox__input\">\n        <input\n          type=\"checkbox\"\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          :indeterminate.prop=\"internalIndeterminate\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"checkbox-label\"\n      >\n        <!-- @slot slot for Checkbox Label -->\n        <slot>{{ label }}</slot>\n      </div>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-checkbox__messages\"\n      data-qa=\"checkbox-description-messages\"\n    >\n      <div\n        v-if=\"$slots.description || description\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"checkbox-description\"\n      >\n        <!-- @slot slot for Checkbox Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </div>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-checkbox-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n      this.$emit('update:modelValue', checked);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","CHECKBOX_INPUT_VALIDATION_CLASSES","_b","_a","event","newCheckboxGroupValueChecked","removeClassStyleAttrs","addClassStyleAttrs","target","value","checked","_hoisted_1","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_toHandlers","_hoisted_2","_openBlock","_renderSlot","_hoisted_3","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n      <div class=\"d-checkbox__input\">\n        <input\n          type=\"checkbox\"\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n          :aria-label=\"!labelVisible && label ? label : undefined\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          :indeterminate.prop=\"internalIndeterminate\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <dt-text\n        v-if=\"hasLabel\"\n        as=\"div\"\n        kind=\"label\"\n        :size=\"resolvedLabelSize\"\n        :strength=\"labelStrength ?? 'normal'\"\n        :tone=\"internalDisabled ? 'disabled' : 'primary'\"\n        :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"checkbox-label\"\n      >\n        <!-- @slot slot for Checkbox Label -->\n        <slot>{{ label }}</slot>\n      </dt-text>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-checkbox__messages\"\n      data-qa=\"checkbox-description-messages\"\n    >\n      <dt-text\n        v-if=\"$slots.description || description\"\n        kind=\"body\"\n        size=\"sm\"\n        tone=\"tertiary\"\n        as=\"div\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"checkbox-description\"\n      >\n        <!-- @slot slot for Checkbox Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </dt-text>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-checkbox-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/text';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines visibility of checkbox label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Overrides the label text size.\n     * @values lg, md, sm, xs\n     */\n    labelSize: {\n      type: String,\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(s),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    resolvedLabelSize () {\n      return this.labelSize ?? 'md';\n    },\n\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabelContent () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasLabel () {\n      return this.labelVisible && this.hasLabelContent;\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n      this.$emit('update:modelValue', checked);\n    },\n\n    runValidations () {\n      if (!this.hasLabelContent && !this.$attrs['aria-label']) {\n        console.warn(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use label-visible=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","DtText","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","s","TEXT_SIZE_MODIFIERS","TEXT_STRENGTH_MODIFIERS","CHECKBOX_INPUT_VALIDATION_CLASSES","_b","_a","event","newCheckboxGroupValueChecked","removeClassStyleAttrs","addClassStyleAttrs","target","value","checked","_hoisted_1","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_hoisted_2","_openBlock","_createBlock","_component_dt_text","_renderSlot","_hoisted_3","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

package/dist/lib/chip/chip.cjs

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

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

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

package/dist/lib/chip/chip.js

@@ -205,7 +205,7 @@ function w(e, s, t, N, n, i) {
       tabindex: t.disabled ? -1 : null,
       onClick: s[0] || (s[0] = (A) => e.$emit("close"))
     }, {
-      icon: h(() => [
+      startIcon: h(() => [
         v(m, { size: i.closeButtonIconSize }, null, 8, ["size"])
       ]),
       _: 1

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

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

package/dist/lib/codeblock/codeblock-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=["xs","sm","md","lg"],O="sm";exports.CODEBLOCK_SIZES=E;exports.CODEBLOCK_SIZE_DEFAULT=O;
+//# sourceMappingURL=codeblock-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.cjs","sources":["../../../components/codeblock/codeblock_constants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 'sm';\n"],"names":["CODEBLOCK_SIZES","CODEBLOCK_SIZE_DEFAULT"],"mappings":"gFAAY,MAACA,EAAkB,CAAC,KAAM,KAAM,KAAM,IAAI,EACzCC,EAAyB"}

package/dist/lib/codeblock/codeblock-constants.js

@@ -0,0 +1,6 @@
+const s = ["xs", "sm", "md", "lg"], E = "sm";
+export {
+  s as CODEBLOCK_SIZES,
+  E as CODEBLOCK_SIZE_DEFAULT
+};
+//# sourceMappingURL=codeblock-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.js","sources":["../../../components/codeblock/codeblock_constants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 'sm';\n"],"names":["CODEBLOCK_SIZES","CODEBLOCK_SIZE_DEFAULT"],"mappings":"AAAY,MAACA,IAAkB,CAAC,MAAM,MAAM,MAAM,IAAI,GACzCC,IAAyB;"}

package/dist/lib/codeblock/codeblock.cjs

@@ -1,3 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),n={compatConfig:{MODE:3},name:"DtCodeblock",props:{text:{type:String,required:!0}}},c={class:"d-codeblock"};function l(u,t,o,d,i,p){return e.openBlock(),e.createElementBlock("pre",null,[t[0]||(t[0]=e.createTextVNode("    ",-1)),e.createElementVNode("code",c,e.toDisplayString(o.text),1),t[1]||(t[1]=e.createTextVNode(`
-  `,-1))])}const s=r._(n,[["render",l]]);exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./codeblock-constants.cjs"),e=require("vue"),r=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d={compatConfig:{MODE:3},name:"DtCodeblock",props:{text:{type:String,required:!0},bordered:{type:Boolean,default:!1},size:{type:String,default:"sm",validator:t=>c.CODEBLOCK_SIZES.includes(t)}}};function l(t,s,o,a,i,u){return e.openBlock(),e.createElementBlock("pre",{class:e.normalizeClass(["d-codeblock",{"d-codeblock--bordered":o.bordered}])},[e.createElementVNode("code",{class:e.normalizeClass(["d-codeblock__code",`d-codeblock__code--${o.size}`])},e.toDisplayString(o.text),3)],2)}const n=r._(d,[["render",l]]);exports.default=n;
 //# sourceMappingURL=codeblock.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeblock.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementBlock","_createElementVNode","_toDisplayString","$props"],"mappings":"6LASKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,cAEN,MAAO,CACL,KAAM,CACJ,KAAM,OACN,SAAU,IAGhB,EAhBMC,EAAA,CAAA,MAAM,aAAa,+CAFvBC,qBAIM,MAAA,KAAA,+BAJD,OACH,EAAA,GAAAC,EAAAA,mBAEkB,OAFlBF,EAEkBG,EAAAA,gBAAdC,EAAA,IAAI,EAAA,CAAA,gCAAU;AAAA,IACpB,EAAA"}
+{"version":3,"file":"codeblock.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${size}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES } from './codeblock_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values xs, sm, md, lg\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (val) => CODEBLOCK_SIZES.includes(val),\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","val","CODEBLOCK_SIZES","_createElementBlock","_normalizeClass","$props","_createElementVNode"],"mappings":"oOAaKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,cAEN,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,SAAU,IAMZ,SAAU,CACR,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYC,GAAQC,kBAAgB,SAASD,CAAG,GAGtD,+CA3CEE,EAAAA,mBAMwB,MAAA,CALtB,MAAKC,EAAAA,eAAA,CAAC,cAAa,CAAA,wBACgBC,EAAA,SAAQ,CAAA,IAC5CC,EAAAA,mBAGiB,OAAA,CAFhB,MAAKF,EAAAA,eAAA,CAAC,oBAAmB,sBACKC,EAAA,IAAI,EAAA,CAAA,qBAChCA,EAAA,IAAI,EAAA,CAAA"}

package/dist/lib/codeblock/codeblock.js

@@ -1,25 +1,46 @@
-import { openBlock as r, createElementBlock as n, createTextVNode as t, createElementVNode as c, toDisplayString as s } from "vue";
-import { _ as d } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const p = {
+import { CODEBLOCK_SIZES as c } from "./codeblock-constants.js";
+import { openBlock as r, createElementBlock as d, normalizeClass as t, createElementVNode as a, toDisplayString as l } from "vue";
+import { _ as n } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const s = {
   compatConfig: { MODE: 3 },
   name: "DtCodeblock",
   props: {
+    /**
+     * The text to display in the codeblock.
+     */
     text: {
       type: String,
       required: !0
+    },
+    /**
+     * Whether to render as a styled container block.
+     */
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Font size of the code block.
+     * @values xs, sm, md, lg
+     */
+    size: {
+      type: String,
+      default: "sm",
+      validator: (o) => c.includes(o)
     }
   }
-}, l = { class: "d-codeblock" };
-function i(a, e, o, m, f, u) {
-  return r(), n("pre", null, [
-    e[0] || (e[0] = t("    ", -1)),
-    c("code", l, s(o.text), 1),
-    e[1] || (e[1] = t(`
-  `, -1))
-  ]);
+};
+function i(o, _, e, m, f, p) {
+  return r(), d("pre", {
+    class: t(["d-codeblock", { "d-codeblock--bordered": e.bordered }])
+  }, [
+    a("code", {
+      class: t(["d-codeblock__code", `d-codeblock__code--${e.size}`])
+    }, l(e.text), 3)
+  ], 2);
 }
-const k = /* @__PURE__ */ d(p, [["render", i]]);
+const x = /* @__PURE__ */ n(s, [["render", i]]);
 export {
-  k as default
+  x as default
 };
 //# sourceMappingURL=codeblock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeblock.js","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementBlock","_createElementVNode","_toDisplayString","$props"],"mappings":";;AASA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;;AAGhB,GAhBMC,IAAA,EAAA,OAAM,cAAa;;cAFvBC,EAIM,OAAA,MAAA;AAAA,sBAJD,QACH,EAAA;AAAA,IAAAC,EAEkB,QAFlBF,GAEkBG,EAAdC,EAAA,IAAI,GAAA,CAAA;AAAA,sBAAU;AAAA,KACpB,EAAA;AAAA;;;"}
+{"version":3,"file":"codeblock.js","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${size}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES } from './codeblock_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values xs, sm, md, lg\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (val) => CODEBLOCK_SIZES.includes(val),\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","val","CODEBLOCK_SIZES","_createElementBlock","_normalizeClass","$props","_createElementVNode"],"mappings":";;;AAaA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAQC,EAAgB,SAASD,CAAG;AAAA;;AAGtD;;cA3CEE,EAMwB,OAAA;AAAA,IALtB,OAAKC,EAAA,CAAC,eAAa,EAAA,yBACgBC,EAAA,UAAQ,CAAA;AAAA;IAC5CC,EAGiB,QAAA;AAAA,MAFhB,OAAKF,EAAA,CAAC,qBAAmB,sBACKC,EAAA,IAAI,EAAA,CAAA;AAAA,SAChCA,EAAA,IAAI,GAAA,CAAA;AAAA;;;"}

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

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