@dialpad/dialtone-vue 3.119.0 → 3.120.0

package/dist/lib/card.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./utils.cjs"),e=require("vue"),n=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const l={name:"DtCard",props:{maxHeight:{type:String,default:null},containerClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""}},data(){return{hasSlotContent:o.hasSlotContent}}};function s(t,d,r,i,a,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-card",r.containerClass]),"data-qa":"dt-card"},[a.hasSlotContent(t.$slots.header)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["d-card__header",r.headerClass])},[e.renderSlot(t.$slots,"header")],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["d-card__content",r.contentClass]),style:e.normalizeStyle({"max-height":r.maxHeight})},[e.renderSlot(t.$slots,"content")],6),a.hasSlotContent(t.$slots.footer)?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["d-card__footer",r.footerClass])},[e.renderSlot(t.$slots,"footer")],2)):e.createCommentVNode("",!0)],2)}const c=n._(l,[["render",s]]);exports.DtCard=c;
+//# sourceMappingURL=card.cjs.map

package/dist/lib/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.cjs","sources":["../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.header)\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"hasSlotContent($slots.footer)\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_createElementBlock","_normalizeClass","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":"wNAmDA,MAAKA,EAAU,CACb,KAAM,SACN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAKD,eAAgB,CACd,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,eAAAC,EAAc,eAEjB,CACH,+CApGEC,EAuCM,mBAAA,MAAA,CAtCH,MAAKC,EAAAA,eAAA,UAA0BC,EAAc,iBAI9C,UAAQ,YAGAC,EAAc,eAACC,EAAM,OAAC,MAAM,iBADpCJ,EASM,mBAAA,MAAA,OAPH,MAAKC,EAAAA,eAAA,kBAAsCC,EAAW,gBAMvDG,aAAsBD,EAAA,OAAA,QAAA,mCAGxBE,EAAAA,mBASM,MAAA,CARH,MAAKL,EAAAA,eAAA,mBAAuCC,EAAY,eAIxD,qCAAuBA,EAAS,SAAA,CAAA,IAGjCG,aAAuBD,EAAA,OAAA,SAAA,MAIjBD,EAAc,eAACC,EAAM,OAAC,MAAM,iBADpCJ,EASM,mBAAA,MAAA,OAPH,MAAKC,EAAAA,eAAA,kBAAsCC,EAAW,gBAMvDG,aAAsBD,EAAA,OAAA,QAAA"}

package/dist/lib/checkbox-group.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),a=require("./input-group.cjs");require("../chunks/input_group-AS760Cp7.js");require("./validators.cjs");require("./constants.cjs");require("./utils.cjs");require("./validation-messages.cjs");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");const i={name:"DtCheckboxGroup",extends:a.DtInputGroup,model:{prop:"selectedValues"},props:{value:{type:[],default:null,validator:e=>e?(u.warn("Component uses selectedValues to initialize the model, value is not supported by this component",void 0),!1):!0},selectedValues:{type:Array,default(){return[]}},dataQaGroup:{type:String,default:"checkbox-group"},dataQaGroupLegend:{type:String,default:"checkbox-group-legend"},dataQaGroupMessages:{type:String,default:"checkbox-group-messages"}},emits:["input"],data(){return{internalValue:this.selectedValues}},watch:{selectedValues(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.selectedValues=e}}},methods:{setGroupValue(e,t){t?this.internalValue.includes(e)||this.internalValue.push(e):this.internalValue=this.internalValue.filter(r=>r!==e),this.$emit("input",this.internalValue)},getMessageKey(e,t){return`checkbox-group-message-${e}-${t}-${this.id}`}}};exports.DtCheckboxGroup=i;
+//# sourceMappingURL=checkbox-group.cjs.map

package/dist/lib/checkbox-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtInputGroup","value","warn","this","newSelectedValues","newInternalValue","checked","checkedValue","type","index"],"mappings":"iWAUK,MAAAA,EAAU,CACb,KAAM,kBAEN,QAASC,EAAY,aAErB,MAAO,CACL,KAAM,gBACP,EAED,MAAO,CAIL,MAAO,CACL,KAAM,CAAE,EACR,QAAS,KACT,UAAWC,GACJA,GAILC,EAAI,KACF,kGACAC,QAGK,IARE,EAUZ,EAMD,eAAgB,CACd,KAAM,MACN,SAAW,CACT,MAAO,EACR,CACF,EAKD,YAAa,CACX,KAAM,OACN,QAAS,gBACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,uBACV,EAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,yBACV,CACF,EAED,MAAO,CAOL,OACD,EAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,eAEvB,EAED,MAAO,CACL,eAAgBC,EAAmB,CACjC,KAAK,cAAgBA,CACtB,EAOD,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,eAAiBA,CAClC,CACF,CACF,EAED,QAAS,CAKP,cAAeJ,EAAOK,EAAS,CACxBA,EAEO,KAAK,cAAc,SAASL,CAAK,GAC3C,KAAK,cAAc,KAAKA,CAAK,EAF7B,KAAK,cAAgB,KAAK,cAAc,OAAOM,GAAgBA,IAAiBN,CAAK,EAKvF,KAAK,MAAM,QAAS,KAAK,aAAa,CACvC,EAED,cAAeO,EAAMC,EAAO,CAC1B,MAAO,0BAA0BD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EAC1D,CACF,CACH"}

package/dist/lib/checkbox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../chunks/input-0Uksk4DP.js"),s=require("vue"),r=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),l=require("./validation-messages.cjs");require("./constants.cjs");require("./validators.cjs");require("./utils.cjs");const c={error:"d-checkbox--error",warning:"d-checkbox--warning",success:"d-checkbox--success"},d={name:"DtCheckbox",components:{DtValidationMessages:l.DtValidationMessages},mixins:[n.I,n.C,n.G,n.M],inheritAttrs:!1,emits:["input","focusin","focusout"],computed:{inputValidationClass(){return c[this.internalValidationState]},checkboxGroupValueChecked(){var e,t;return((t=(e=this.groupContext)==null?void 0:e.selectedValues)==null?void 0:t.includes(this.value))??!1},hasLabel(){return!!(this.$slots.default||this.label)},hasDescription(){return!!(this.$slots.description||this.description)},hasLabelOrDescription(){return this.hasLabel||this.hasDescription},inputListeners(){return{input:()=>{},focusin:e=>this.$emit("focusin",e),focusout:e=>this.$emit("focusout",e),change:e=>this.emitValue(e.target)}}},watch:{checkboxGroupValueChecked:{immediate:!0,handler(e){this.hasGroup&&(this.internalChecked=e)}}},mounted(){this.runValidations()},methods:{emitValue(e){let{value:t,checked:i}=e;this.internalIndeterminate&&(i=!1,this.internalIndeterminate=!1,e.checked=!1),this.setGroupValue(t,i),this.$emit("input",i)},runValidations(){this.validateInputLabels(this.hasLabel,this.$attrs["aria-label"])}}},u={class:"d-checkbox__input"},h=["checked","name","value","disabled",".indeterminate"],m={key:0,class:"d-checkbox__copy d-checkbox__label","data-qa":"checkbox-label-description-container"};function p(e,t,i,k,g,a){const o=s.resolveComponent("dt-validation-messages");return s.openBlock(),s.createElementBlock("div",null,[s.createElementVNode("label",null,[s.createElementVNode("div",{class:s.normalizeClass(["d-checkbox-group",{"d-checkbox-group--disabled":e.internalDisabled}])},[s.createElementVNode("div",u,[s.createElementVNode("input",s.mergeProps({type:"checkbox",checked:e.internalChecked,name:e.internalName,value:e.value,disabled:e.internalDisabled,class:["d-checkbox",a.inputValidationClass,e.inputClass]},e.$attrs,{".indeterminate":e.internalIndeterminate},s.toHandlers(a.inputListeners,!0)),null,16,h)]),a.hasLabelOrDescription?(s.openBlock(),s.createElementBlock("div",m,[a.hasLabel?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,class:e.labelClass},e.labelChildProps,{"data-qa":"checkbox-label"}),[s.renderSlot(e.$slots,"default",{},()=>[s.createTextVNode(s.toDisplayString(e.label),1)])],16)):s.createCommentVNode("",!0),a.hasDescription?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:1,class:["d-description",e.descriptionClass]},e.descriptionChildProps,{"data-qa":"checkbox-description"}),[s.renderSlot(e.$slots,"description",{},()=>[s.createTextVNode(s.toDisplayString(e.description),1)])],16)):s.createCommentVNode("",!0),s.createVNode(o,s.mergeProps({"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"])])):s.createCommentVNode("",!0)],2)])])}const b=r._(d,[["render",p]]);exports.DtCheckbox=b;
+//# sourceMappingURL=checkbox.cjs.map

package/dist/lib/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :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=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\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\">{{ description }}</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    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\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  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    /**\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    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\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    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    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n    },\n  },\n};\n</script>\n"],"names":["CHECKBOX_INPUT_VALIDATION_CLASSES","_sfc_main","DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","_b","_a","event","newCheckboxGroupValueChecked","target","value","checked","_hoisted_1","_createElementBlock","_createElementVNode","_ctx","_mergeProps","$options","_toHandlers","_hoisted_2","_openBlock","_hoisted_3","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

package/dist/lib/chip.cjs

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

package/dist/lib/chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.cjs","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-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        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\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  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\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      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","DtButton","DtIcon","props","s","getUniqueString","hasSlotContent","event","_a","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon"],"mappings":"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"}

package/dist/lib/chip.js

@@ -8,7 +8,6 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const p = {
   xs: "d-chip__label--xs",
   sm: "d-chip__label--sm",
@@ -131,8 +130,8 @@ const p = {
           this.interactive && this.$emit("click", e);
         },
         keyup: (e) => {
-          var i;
-          ((i = e.code) == null ? void 0 : i.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keyup", e);
+          var a;
+          ((a = e.code) == null ? void 0 : a.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keyup", e);
         }
       };
     },
@@ -166,17 +165,17 @@ const p = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 }, P = ["id"];
-function q(e, i, t, j, l, a) {
+function q(e, a, t, j, l, i) {
   const m = r("dt-icon"), _ = r("dt-button");
   return s(), o("span", O, [
     (s(), d(f(t.interactive ? "button" : "span"), u({
       id: t.id,
       type: t.interactive && "button",
-      class: a.chipClasses(),
+      class: i.chipClasses(),
       "data-qa": "dt-chip",
       "aria-labelledby": t.ariaLabel ? void 0 : `${t.id}-content`,
       "aria-label": t.ariaLabel
-    }, y(a.chipListeners)), {
+    }, y(i.chipListeners)), {
       default: h(() => [
         l.hasSlotContent(e.$slots.icon) ? (s(), o("span", D, [
           n(e.$slots, "icon")
@@ -195,26 +194,26 @@ function q(e, i, t, j, l, a) {
       _: 3
     }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
     t.hideClose ? c("", !0) : (s(), d(_, u({ key: 0 }, t.closeButtonProps, {
-      class: a.chipCloseButtonClasses(),
+      class: i.chipCloseButtonClasses(),
       "data-qa": "dt-chip-close",
       "aria-label": t.closeButtonProps.ariaLabel,
-      onClick: i[0] || (i[0] = (H) => e.$emit("close"))
+      onClick: a[0] || (a[0] = (H) => e.$emit("close"))
     }), {
       icon: h(() => [
         k(m, {
           name: "close",
-          size: a.closeButtonIconSize
+          size: i.closeButtonIconSize
         }, null, 8, ["size"])
       ]),
       _: 1
     }, 16, ["class", "aria-label"]))
   ]);
 }
-const G = /* @__PURE__ */ B(z, [["render", q]]);
+const V = /* @__PURE__ */ B(z, [["render", q]]);
 export {
   L as CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
   g as CHIP_ICON_SIZES,
   p as CHIP_SIZE_MODIFIERS,
-  G as DtChip
+  V as DtChip
 };
 //# sourceMappingURL=chip.js.map

package/dist/lib/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-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        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\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  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\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      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","DtButton","DtIcon","props","s","getUniqueString","hasSlotContent","event","_a","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon"],"mappings":"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"}
+{"version":3,"file":"chip.js","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-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        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\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  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\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      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","DtButton","DtIcon","props","s","getUniqueString","hasSlotContent","event","_a","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon"],"mappings":"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"}

package/dist/lib/codeblock.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),c={name:"DtCodeblock",props:{text:{type:String,required:!0}}},r={class:"d-codeblock"};function n(d,s,t,i,u,a){return e.openBlock(),e.createElementBlock("pre",null,[e.createTextVNode("    "),e.createElementVNode("code",r,e.toDisplayString(t.text),1),e.createTextVNode(`
+  `)])}const l=o._(c,[["render",n]]);exports.DtCodeblock=l;
+//# sourceMappingURL=codeblock.cjs.map

package/dist/lib/codeblock.cjs.map

@@ -0,0 +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  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":"oKASKA,EAAU,CACb,KAAM,cAEN,MAAO,CACL,KAAM,CACJ,KAAM,OACN,SAAU,EACX,CACF,CACH,EAfMC,EAAA,CAAA,MAAM,aAAa,+CAFvBC,qBAIM,MAAA,KAAA,mBAJD,MACH,EAAAC,EAEkB,mBAAA,OAFlBF,EAEkBG,EAAAA,gBAAdC,EAAI,IAAA,EAAA,CAAA,oBAAU;AAAA,GACpB"}

package/dist/lib/collapsible.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./utils.cjs"),e=require("vue"),i=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),u=require("./button.cjs"),p=require("./lazy-show.cjs"),f=require("./icon.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const m={name:"DtCollapsibleLazyShow",inheritAttrs:!1,props:{show:{type:Boolean,default:null},appear:{type:Boolean,default:!1},elementType:{type:String,default:"div"}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!=="test"}},watch:{show:function(t){!t||this.initialized||(this.initialized=!0)}},methods:{beforeEnter(t){requestAnimationFrame(()=>{t.style.height||(t.style.height="0px")})},enter(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.height=`${t.scrollHeight}px`})})},afterEnter(t){t.style.height=null},beforeLeave(t){requestAnimationFrame(()=>{t.style.height||(t.style.height=`${t.offsetHeight}px`)})},leave(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.height="0px"})})},afterLeave(t){t.style.height=null}}};function y(t,o,n,s,l,a){return e.openBlock(),e.createBlock(e.Transition,e.mergeProps({appear:n.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},t.$attrs,{css:a.isCSSEnabled,onBeforeEnter:a.beforeEnter,onEnter:a.enter,onAfterEnter:a.afterEnter,onBeforeLeave:a.beforeLeave,onLeave:a.leave,onAfterLeave:a.afterLeave}),{default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.elementType),e.normalizeProps(e.guardReactiveProps(t.$attrs)),{default:e.withCtx(()=>[l.initialized?e.renderSlot(t.$slots,"default",{key:0}):e.createCommentVNode("",!0)]),_:3},16)),[[e.vShow,n.show]])]),_:3},16,["appear","css","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])}const b=i._(m,[["render",y]]),g={name:"DtCollapsible",components:{DtButton:u.DtButton,DtCollapsibleLazyShow:b,DtLazyShow:p.DtLazyShow,DtIcon:f.DtIcon},props:{anchorText:{type:String,default:null},open:{type:Boolean,default:null},id:{type:String,default(){return r.getUniqueString()}},elementType:{type:String,default:"div"},contentElementType:{type:String,default:"div"},anchorClass:{type:[String,Array,Object],default:null},contentClass:{type:[String,Array,Object],default:null},maxWidth:{type:String,default:null},maxHeight:{type:String,default:null},ariaLabel:{type:String,default:null},ariaLabelledBy:{type:String,default:null}},emits:["update:open","opened"],data(){return{isOpen:!0}},computed:{labelledBy(){return this.ariaLabelledBy||!this.ariaLabel&&r.getUniqueString("DtCollapsible__anchor")},collapsibleListeners(){return r.extractVueListeners(this.$attrs)}},watch:{open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},created(){this.validateProperAnchor()},methods:{onLeaveTransitionComplete(){this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},onEnterTransitionComplete(){this.$emit("opened",!0,this.$refs.content),this.open!==null&&this.$emit("update:open",!0)},defaultToggleOpen(){this.open===null&&this.toggleOpen()},toggleOpen(){this.isOpen=!this.isOpen},validateProperAnchor(){!this.anchorText&&!r.hasSlotContent(this.$slots.anchor)&&console.error("anchor text and anchor slot content cannot both be falsy")}}},_=["id"],v=["title"];function S(t,o,n,s,l,a){const c=e.resolveComponent("dt-icon"),d=e.resolveComponent("dt-button"),h=e.resolveComponent("dt-collapsible-lazy-show");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.elementType),e.mergeProps({ref:"collapsible"},e.toHandlers(a.collapsibleListeners)),{default:e.withCtx(()=>[e.createElementVNode("div",{id:!n.ariaLabelledBy&&a.labelledBy,ref:"anchor",class:e.normalizeClass(n.anchorClass)},[e.renderSlot(t.$slots,"anchor",{attrs:{"aria-controls":n.id,"aria-expanded":l.isOpen.toString(),role:"button"}},()=>[e.createVNode(d,{importance:"clear",kind:"muted","aria-controls":n.id,"aria-expanded":`${l.isOpen}`,style:e.normalizeStyle({width:n.maxWidth}),onClick:a.defaultToggleOpen},{default:e.withCtx(()=>[e.createVNode(c,{name:l.isOpen?"chevron-down":"chevron-right",class:"d-collapsible__icon",size:"300"},null,8,["name"]),e.createElementVNode("span",{class:"d-collapsible__anchor-text",title:n.anchorText},e.toDisplayString(n.anchorText),9,v)]),_:1},8,["aria-controls","aria-expanded","style","onClick"])])],10,_),e.createVNode(h,e.mergeProps({id:n.id,ref:"contentWrapper","aria-hidden":`${!l.isOpen}`,"aria-labelledby":a.labelledBy,"aria-label":n.ariaLabel,show:l.isOpen,"element-type":n.contentElementType,class:n.contentClass,style:{"max-height":n.maxHeight,"max-width":n.maxWidth},"data-qa":"dt-collapsible--content",tabindex:"-1",appear:""},e.toHandlers(a.collapsibleListeners),{onAfterLeave:a.onLeaveTransitionComplete,onAfterEnter:a.onEnterTransitionComplete}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"content")]),_:3},16,["id","aria-hidden","aria-labelledby","aria-label","show","element-type","class","style","onAfterLeave","onAfterEnter"])]),_:3},16)}const C=i._(g,[["render",S]]);exports.DtCollapsible=C;
+//# sourceMappingURL=collapsible.cjs.map

package/dist/lib/collapsible.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.cjs","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","newValue","element","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$options","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","$data","_renderSlot","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","getUniqueString","extractVueListeners","open","hasSlotContent","_toHandlers","_createElementVNode","_createVNode","_component_dt_button","_normalizeStyle","_component_dt_icon","_hoisted_2","_component_dt_collapsible_lazy_show"],"mappings":"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"}

package/dist/lib/collapsible.js

@@ -1,5 +1,5 @@
 import { getUniqueString as h, extractVueListeners as L, hasSlotContent as S } from "./utils.js";
-import { openBlock as o, createBlock as s, Transition as C, mergeProps as c, withCtx as l, withDirectives as x, resolveDynamicComponent as u, normalizeProps as E, guardReactiveProps as w, renderSlot as d, createCommentVNode as A, vShow as T, resolveComponent as i, toHandlers as p, createElementVNode as m, normalizeClass as B, createVNode as r, normalizeStyle as O, toDisplayString as z } from "vue";
+import { openBlock as o, createBlock as s, Transition as C, mergeProps as c, withCtx as l, withDirectives as x, resolveDynamicComponent as m, normalizeProps as E, guardReactiveProps as w, renderSlot as d, createCommentVNode as A, vShow as T, resolveComponent as i, toHandlers as p, createElementVNode as u, normalizeClass as B, createVNode as r, normalizeStyle as O, toDisplayString as z } from "vue";
 import { _ as f } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
 import { DtButton as D } from "./button.js";
 import { DtLazyShow as q } from "./lazy-show.js";
@@ -9,7 +9,6 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const F = {
   name: "DtCollapsibleLazyShow",
   inheritAttrs: !1,
@@ -135,7 +134,7 @@ function H(e, y, t, b, a, n) {
     onAfterLeave: n.afterLeave
   }), {
     default: l(() => [
-      x((o(), s(u(t.elementType), E(w(e.$attrs)), {
+      x((o(), s(m(t.elementType), E(w(e.$attrs)), {
         default: l(() => [
           a.initialized ? d(e.$slots, "default", { key: 0 }) : A("", !0)
         ]),
@@ -302,9 +301,9 @@ const N = /* @__PURE__ */ f(F, [["render", H]]), P = {
 }, V = ["id"], W = ["title"];
 function j(e, y, t, b, a, n) {
   const g = i("dt-icon"), _ = i("dt-button"), v = i("dt-collapsible-lazy-show");
-  return o(), s(u(t.elementType), c({ ref: "collapsible" }, p(n.collapsibleListeners)), {
+  return o(), s(m(t.elementType), c({ ref: "collapsible" }, p(n.collapsibleListeners)), {
     default: l(() => [
-      m("div", {
+      u("div", {
         id: !t.ariaLabelledBy && n.labelledBy,
         ref: "anchor",
         class: B(t.anchorClass)
@@ -332,7 +331,7 @@ function j(e, y, t, b, a, n) {
                 class: "d-collapsible__icon",
                 size: "300"
               }, null, 8, ["name"]),
-              m("span", {
+              u("span", {
                 class: "d-collapsible__anchor-text",
                 title: t.anchorText
               }, z(t.anchorText), 9, W)
@@ -370,8 +369,8 @@ function j(e, y, t, b, a, n) {
     _: 3
   }, 16);
 }
-const ee = /* @__PURE__ */ f(P, [["render", j]]);
+const $ = /* @__PURE__ */ f(P, [["render", j]]);
 export {
-  ee as DtCollapsible
+  $ as DtCollapsible
 };
 //# sourceMappingURL=collapsible.js.map

package/dist/lib/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","newValue","element","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$options","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","$data","_renderSlot","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","getUniqueString","extractVueListeners","open","hasSlotContent","_toHandlers","_createElementVNode","_createVNode","_component_dt_button","_normalizeStyle","_component_dt_icon","_hoisted_2","_component_dt_collapsible_lazy_show"],"mappings":"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"}
+{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","newValue","element","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$options","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","$data","_renderSlot","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","getUniqueString","extractVueListeners","open","hasSlotContent","_toHandlers","_createElementVNode","_createVNode","_component_dt_button","_normalizeStyle","_component_dt_icon","_hoisted_2","_component_dt_collapsible_lazy_show"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./combobox-with-popover.cjs"),C=require("./input.cjs"),y=require("./chip.cjs"),S=require("./validation-messages.cjs"),v=require("./validators.cjs"),_=require("./utils.cjs"),I=require("../chunks/popover_constants-hOEhklvr.js"),x=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),t=require("vue"),w=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("../chunks/index-6tYeqbgP.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./constants.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./skeleton.cjs");require("./popover.cjs");require("../chunks/modal-qEzlo0Sj.js");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./lazy-show.cjs");require("tippy.js");require("../chunks/dropdown_constants-KHFvVI2L.js");require("../chunks/input-0Uksk4DP.js");const a={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md"},h={xs:"xs",sm:"xs",md:"sm"},u={xs:1.4,sm:.4,md:.2},L={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:b.DtRecipeComboboxWithPopover,DtInput:C.DtInput,DtChip:y.DtChip,DtValidationMessages:S.DtValidationMessages},mixins:[x.a],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=>v.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(a).includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>I.e.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["input","select","remove","max-selected","keyup"],data(){return{value:"",popoverOffset:[0,4],showValidationMessages:!1,initialInputPadding:{},resizeWindowObserver:null,originalInputSize:null,CHIP_SIZES:h,hasSlotContent:_.hasSlotContent}},computed:{inputPlaceHolder(){var e;return((e=this.selectedItems)==null?void 0:e.length)>0?"":this.placeholder},chipListeners(){return{keyup:e=>{this.onChipKeyup(e),this.$emit("keyup",e)}}},inputListeners(){return{input:e=>{this.$emit("input",e),this.hasSuggestionList&&this.showComboboxList()},keyup:e=>{this.onInputKeyup(e),this.$emit("keyup",e)},click:e=>{this.hasSuggestionList&&this.showComboboxList()}}}},watch:{selectedItems:{deep:!0,handler:async function(){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.originalInputSize=e.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},mounted(){this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),this.initSelectedItems()},beforeUnmount(){var e;(e=this.resizeWindowObserver)==null||e.unobserve(document.body)},methods:{async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){var i;this.$emit("remove",e),(i=this.$refs.input)==null||i.focus()},onComboboxSelect(e){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())},getChipButtons(){return this.$refs.chips&&this.$refs.chips.map(e=>e.$el.querySelector("button"))},getChips(){return this.$refs.chips&&this.$refs.chips.map(e=>e.$el)},getLastChipButton(){return this.$refs.chips&&this.getChipButtons()[this.getChipButtons().length-1]},getLastChip(){return this.$refs.chips&&this.getChips()[this.getChips().length-1]},getFirstChip(){return this.$refs.chips&&this.getChips()[0]},getInput(){var e;return(e=this.$refs.input)==null?void 0:e.$refs.input},onChipKeyup(e){var s;const i=(s=e.code)==null?void 0:s.toLowerCase();i==="arrowleft"?this.navigateBetweenChips(e.target,!0):i==="arrowright"&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyup(e){var s;const i=(s=e.code)==null?void 0:s.toLowerCase();this.selectedItems.length>0&&e.target.selectionStart===0&&(i==="backspace"||i==="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,i){var o;const s=this.getChipButtons().indexOf(e),n=i?s-1:s+1;n<0||n>=((o=this.$refs.chips)==null?void 0:o.length)||(this.getChipButtons()[s].blur(),this.getChipButtons()[n].focus(),this.closeComboboxList())},setChipsTopPosition(){const e=this.getInput();if(!e)return;const i=this.$refs.inputSlotWrapper,s=e.getBoundingClientRect().top-i.getBoundingClientRect().top,n=this.$refs.chipsWrapper;n.style.top=s-u[this.size]+"px"},setInputPadding(){const e=this.getLastChip(),i=this.getInput(),s=this.$refs.chipsWrapper;if(!i||(this.revertInputPadding(i),this.popoverOffset=[0,4],!e))return;const n=e.offsetLeft+this.getFullWidth(e);i.style.paddingLeft=n+"px";const o=s.getBoundingClientRect().height-4,r=e.offsetTop+2;o>this.originalInputSize&&(i.style.paddingTop=`${r}px`)},revertInputPadding(e){e.style.paddingLeft="",e.style.paddingTop="",e.style.paddingBottom=""},getFullWidth(e){const i=window.getComputedStyle(e);return e.offsetWidth+parseInt(i.marginLeft)+parseInt(i.marginRight)},setInputMinWidth(){const e=this.getFirstChip(),i=this.getInput();i&&(e?i.style.minWidth=this.getFullWidth(e)+4+"px":i.style.minWidth="")},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit("max-selected")):this.showValidationMessages=!1)}}},P={ref:"inputSlotWrapper",class:"combobox__input-wrapper"},M={ref:"chipsWrapper",class:"combobox__chip-wrapper"},T={ref:"header"},q={key:1,class:"combobox__list--loading"},B={ref:"footer"};function k(e,i,s,n,o,r){const p=t.resolveComponent("dt-chip"),d=t.resolveComponent("dt-input"),c=t.resolveComponent("dt-validation-messages"),g=t.resolveComponent("dt-recipe-combobox-with-popover");return t.openBlock(),t.createBlock(g,{ref:"comboboxWithPopover",label:s.label,"show-list":s.showList,"max-height":s.listMaxHeight,"popover-offset":o.popoverOffset,"has-suggestion-list":s.hasSuggestionList,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,"visually-hidden-close":e.visuallyHiddenClose,"content-width":"anchor","append-to":s.appendTo,transition:s.transition,onSelect:r.onComboboxSelect},t.createSlots({input:t.withCtx(({onInput:m})=>[t.createElementVNode("span",P,[t.createElementVNode("span",M,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.selectedItems,l=>(t.openBlock(),t.createBlock(p,t.mergeProps({ref_for:!0,ref:"chips",key:l,"label-class":["d-chip__label"],class:"combobox__chip","close-button-props":{ariaLabel:"close"},size:o.CHIP_SIZES[s.size]},t.toHandlers(r.chipListeners),{onKeyup:t.withKeys(f=>r.onChipRemove(l),["backspace"]),onClose:f=>r.onChipRemove(l)}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(l),1)]),_:2},1040,["size","onKeyup","onClose"]))),128))],512),t.createVNode(d,t.mergeProps({ref:"input",modelValue:o.value,"onUpdate:modelValue":i[0]||(i[0]=l=>o.value=l),class:"combobox__input","aria-label":s.label,label:s.labelVisible?s.label:"",description:s.description,placeholder:r.inputPlaceHolder,"show-messages":s.showInputMessages,messages:s.inputMessages,size:s.size},t.toHandlers(r.inputListeners),{onInput:m}),null,16,["modelValue","aria-label","label","description","placeholder","show-messages","messages","size","onInput"]),t.createVNode(c,{"validation-messages":s.maxSelectedMessage,"show-messages":o.showValidationMessages},null,8,["validation-messages","show-messages"])],512)]),list:t.withCtx(()=>[t.createElementVNode("div",{ref:"list",onMousedown:i[1]||(i[1]=t.withModifiers(()=>{},["prevent"]))},[s.loading?(t.openBlock(),t.createElementBlock("div",q,t.toDisplayString(s.loadingMessage),1)):t.renderSlot(e.$slots,"list",{key:0},void 0,!0)],544)]),_:2},[o.hasSlotContent(e.$slots.header)?{name:"header",fn:t.withCtx(()=>[t.createElementVNode("div",T,[t.renderSlot(e.$slots,"header",{},void 0,!0)],512)]),key:"0"}:void 0,o.hasSlotContent(e.$slots.footer)?{name:"footer",fn:t.withCtx(()=>[t.createElementVNode("div",B,[t.renderSlot(e.$slots,"footer",{},void 0,!0)],512)]),key:"1"}:void 0]),1032,["label","show-list","max-height","popover-offset","has-suggestion-list","visually-hidden-close-label","visually-hidden-close","append-to","transition","onSelect"])}const W=w._(L,[["render",k],["__scopeId","data-v-d1f21523"]]);exports.CHIP_SIZES=h;exports.CHIP_TOP_POSITION=u;exports.DtRecipeComboboxMultiSelect=W;exports.MULTI_SELECT_SIZES=a;
+//# sourceMappingURL=combobox-multi-select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n","<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"combobox__input-wrapper\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          class=\"combobox__chip-wrapper\"\n        >\n          <dt-chip\n            v-for=\"item in selectedItems\"\n            ref=\"chips\"\n            :key=\"item\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"combobox__input\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"hasSlotContent($slots.header)\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"hasSlotContent($slots.footer)\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      initialInputPadding: {},\n      resizeWindowObserver: null,\n      originalInputSize: null,\n      CHIP_SIZES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.originalInputSize = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.originalInputSize) {\n        input.style.paddingTop = `${top}px`;\n      }\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","inputMessages","validationMessageValidator","t","appendTo","POPOVER_APPEND_TO_VALUES","hasSlotContent","_a","event","input","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","lastChip","left","chipsSize","el","styles","firstChip","_hoisted_3","_hoisted_5","_createBlock","_component_dt_recipe_combobox_with_popover","$props","$data","_ctx","$options","_withCtx","onInput","_createElementVNode","_hoisted_1","_hoisted_2","_createElementBlock","_Fragment","_renderList","_openBlock","_component_dt_chip","_mergeProps","_toHandlers","_withKeys","$event","_createVNode","_component_dt_input","_component_dt_validation_messages","_hoisted_4","_toDisplayString","_renderSlot"],"mappings":"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"}

package/dist/lib/combobox-with-popover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/index-6tYeqbgP.js"),h=require("./utils.cjs"),S=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),t=require("vue"),L=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),w=require("./popover.cjs"),m=require("../chunks/dropdown_constants-KHFvVI2L.js"),p=require("../chunks/popover_constants-hOEhklvr.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./constants.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./skeleton.cjs");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/modal-qEzlo0Sj.js");require("./lazy-show.cjs");require("tippy.js");const v={name:"DtRecipeComboboxWithPopover",components:{DtCombobox:r.D,DtPopover:w.DtPopover,ComboboxLoadingList:r.C,ComboboxEmptyList:r.a},mixins:[S.a],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(r.L).includes(e)},description:{type:String,default:""},showList:{type:Boolean,default:null},listId:{type:String,default(){return h.getUniqueString()}},listClass:{type:[String,Array,Object],default:""},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},padding:{type:String,default:"small",validator:e=>Object.keys(m.D).some(i=>i===e)},contentWidth:{type:String,default:null,validator:e=>p.c.includes(e)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>p.e.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["select","escape","highlight","opened"],data(){return{DROPDOWN_PADDING_CLASSES:m.D,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:h.getUniqueString(),hasSlotContent:h.hasSlotContent}},computed:{comboboxListeners(){return{...this.$attrs,onSelect:this.onSelect,onEscape:this.onEscape,onHighlight:this.onHighlight}}},watch:{showList:{handler:function(e){e!==null&&(this.isListShown=e)},immediate:!0},isListShown(e){e?window.addEventListener("mousedown",this.onFocusOut):window.removeEventListener("mousedown",this.onFocusOut),this.onOpened(e)}},methods:{handleDisplayList(e){!this.hasSuggestionList&&e&&this.showComboboxList(),!this.hasSuggestionList&&!e&&this.closeComboboxList()},showComboboxList(){this.showList==null&&(this.isListShown=!0)},closeComboboxList(){this.showList==null&&(this.isListShown=!1)},onSelect(e){this.loading||(this.$emit("select",e),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit("escape"),this.closeComboboxList()},onHighlight(e){this.loading||this.$emit("highlight",e)},onOpened(e){this.$emit("opened",e)},onFocusIn(e){var i;this.hasSuggestionList&&e&&((i=this.$refs.input)==null?void 0:i.querySelector("input"))===e.target&&this.showComboboxList()},onFocusOut(e){var a,n,s;const i=(n=(a=this.$refs.popover)==null?void 0:a.tip)==null?void 0:n.popper,o=this.$refs.input;(s=e.composedPath())!=null&&s.some(d=>[i,o].includes(d))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}},x=["id"],C={ref:"header"},_=["onMouseleave","onFocusout"],q={ref:"footer"};function O(e,i,o,a,n,s){const d=t.resolveComponent("combobox-loading-list"),f=t.resolveComponent("combobox-empty-list"),b=t.resolveComponent("dt-popover"),g=t.resolveComponent("dt-combobox");return t.openBlock(),t.createBlock(g,t.mergeProps({ref:"combobox",loading:o.loading,label:o.label,"label-visible":o.labelVisible,size:o.size,description:o.description,"empty-list":o.emptyList,"empty-state-message":o.emptyStateMessage,"show-list":n.isListShown,"on-beginning-of-list":o.onBeginningOfList,"on-end-of-list":o.onEndOfList,"list-rendered-outside":!0,"list-id":o.listId,"data-qa":"dt-combobox"},s.comboboxListeners),{input:t.withCtx(({inputProps:u})=>[t.createElementVNode("div",{id:n.externalAnchor,ref:"input",onFocusin:i[0]||(i[0]=(...l)=>s.onFocusIn&&s.onFocusIn(...l)),onKeydown:[i[1]||(i[1]=t.withKeys(l=>s.openOnArrowKeyPress(l),["up"])),i[2]||(i[2]=t.withKeys(l=>s.openOnArrowKeyPress(l),["down"]))]},[t.renderSlot(e.$slots,"input",{inputProps:u,onInput:s.handleDisplayList})],40,x)]),list:t.withCtx(({opened:u,listProps:l,clearHighlightIndex:c})=>[t.createVNode(b,{ref:"popover",open:n.isListShown,"onUpdate:open":i[3]||(i[3]=y=>n.isListShown=y),"hide-on-click":!1,"max-height":o.maxHeight,"max-width":o.maxWidth,offset:o.popoverOffset,sticky:o.popoverSticky,placement:"bottom-start","initial-focus-element":"none",padding:"none",role:"listbox","external-anchor":n.externalAnchor,"content-width":o.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":o.appendTo,transition:o.transition,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,"visually-hidden-close":e.visuallyHiddenClose,onOpened:u},t.createSlots({content:t.withCtx(()=>[t.createElementVNode("div",{ref:"listWrapper",class:t.normalizeClass([n.DROPDOWN_PADDING_CLASSES[o.padding],o.listClass]),onMouseleave:c,onFocusout:c},[o.loading?(t.openBlock(),t.createBlock(d,t.normalizeProps(t.mergeProps({key:0},l)),null,16)):o.emptyList&&o.emptyStateMessage?(t.openBlock(),t.createBlock(f,t.mergeProps({key:1},l,{message:o.emptyStateMessage}),null,16,["message"])):t.renderSlot(e.$slots,"list",{key:2,listProps:l})],42,_)]),_:2},[n.hasSlotContent(e.$slots.header)?{name:"headerContent",fn:t.withCtx(()=>[t.createElementVNode("div",C,[t.renderSlot(e.$slots,"header")],512)]),key:"0"}:void 0,n.hasSlotContent(e.$slots.footer)?{name:"footerContent",fn:t.withCtx(()=>[t.createElementVNode("div",q,[t.renderSlot(e.$slots,"footer")],512)]),key:"1"}:void 0]),1032,["open","max-height","max-width","offset","sticky","external-anchor","content-width","append-to","transition","visually-hidden-close-label","visually-hidden-close","onOpened"])]),_:3},16,["loading","label","label-visible","size","description","empty-list","empty-state-message","show-list","on-beginning-of-list","on-end-of-list","list-id"])}const D=L._(v,[["render",O]]);exports.DtRecipeComboboxWithPopover=D;
+//# sourceMappingURL=combobox-with-popover.cjs.map