@dialpad/dialtone-vue 3.199.0 → 3.199.1

package/dist/lib/select-menu/select-menu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("../../common/constants/index.cjs"),o=require("./select-menu-constants.cjs"),i=require("../../common/utils/index.cjs"),u=require("../../common/mixins/input.cjs"),m=require("./select-menu-validators.cjs"),S=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../validation-messages/validation-messages.cjs"),_={compatConfig:{MODE:3},name:"DtSelectMenu",components:{DtValidationMessages:E.default},mixins:[u.MessagesMixin],inheritAttrs:!1,props:{label:{type:String,default:""},description:{type:String,default:""},options:{type:Array,default:()=>[],validator:t=>m.optionsValidator(t)},size:{type:String,default:"md",validator:t=>Object.keys(o.SELECT_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""},selectClass:{type:[String,Array,Object],default:""},optionClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},optionChildProps:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},rootClass:{type:[String,Object,Array],default:""},modelValue:{type:[String,Number],default:""}},emits:["input","update:modelValue","change"],data(){return{LABEL_SIZE_MODIFIERS:d.LABEL_SIZE_MODIFIERS,DESCRIPTION_SIZE_MODIFIERS:d.DESCRIPTION_SIZE_MODIFIERS,SELECT_SIZE_MODIFIERS:o.SELECT_SIZE_MODIFIERS,SELECT_STATE_MODIFIERS:o.SELECT_STATE_MODIFIERS,hasSlotContent:i.hasSlotContent}},computed:{selectListeners(){return{input:()=>{},change:t=>this.emitValue(t.target.value,t)}},state(){return i.getValidationState(this.formattedMessages)},selectKey(){return i.getUniqueString()},descriptionKey(){return`select-${this.selectKey}-description`},labelAriaDetails(){return this.$slots.description||this.description?this.descriptionKey:this.$attrs["aria-details"]}},mounted(){this.validateOptionsPresence()},beforeUpdate(){this.validateOptionsPresence()},methods:{removeClassStyleAttrs:i.removeClassStyleAttrs,addClassStyleAttrs:i.addClassStyleAttrs,emitValue(t,r){this.$emit("update:modelValue",t,r),this.$emit("input",t,r),this.$emit("change",t,r)},getOptionKey(t){return`select-${this.selectKey}-option-${t}`},validateOptionsPresence(){var t;((t=this.options)==null?void 0:t.length)<1&&!this.$slots.default&&e.warn("Options are expected to be provided via prop or slot",this)}}},p=["aria-details"],g=["id"],C=["disabled","value"],y=["value"];function I(t,r,s,b,a,l){const c=e.resolveComponent("dt-validation-messages");return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:s.rootClass},l.addClassStyleAttrs(t.$attrs)),[e.createElementVNode("label",null,[a.hasSlotContent(t.$slots.label)||s.label?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-details":l.labelAriaDetails,class:["d-label",a.LABEL_SIZE_MODIFIERS[s.size],s.labelClass]},s.labelChildProps,{"data-qa":"dt-select-label"}),[e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(s.label),1)])],16,p)):e.createCommentVNode("",!0),a.hasSlotContent(t.$slots.description)||s.description?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:1,id:l.descriptionKey,class:["d-description",a.DESCRIPTION_SIZE_MODIFIERS[s.size],s.descriptionClass]},s.descriptionChildProps,{"data-qa":"dt-select-description"}),[e.renderSlot(t.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(s.description),1)])],16,g)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["d-select",a.SELECT_SIZE_MODIFIERS[s.size],s.selectClass,{"d-select--disabled":s.disabled}]),"data-qa":"dt-select-wrapper"},[e.createElementVNode("select",e.mergeProps({ref:"selectElement",class:["d-select__input",a.SELECT_STATE_MODIFIERS[l.state]]},l.removeClassStyleAttrs(t.$attrs),{"data-qa":"dt-select",disabled:s.disabled,value:s.modelValue},e.toHandlers(l.selectListeners,!0)),[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,n=>(e.openBlock(),e.createElementBlock("option",e.mergeProps({key:l.getOptionKey(n.value),value:n.value,class:s.optionClass},s.optionChildProps),e.toDisplayString(n.label),17,y))),128))])],16,C)],2)]),e.createVNode(c,e.mergeProps({"validation-messages":t.formattedMessages,"show-messages":t.showMessages,class:t.messagesClass},t.messagesChildProps,{"data-qa":"dt-select-messages"}),null,16,["validation-messages","show-messages","class"])],16)}const h=S._(_,[["render",I]]);exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("../../common/constants/index.cjs"),o=require("./select-menu-constants.cjs"),i=require("../../common/utils/index.cjs"),u=require("../../common/mixins/input.cjs"),m=require("./select-menu-validators.cjs"),S=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../validation-messages/validation-messages.cjs"),_={compatConfig:{MODE:3},name:"DtSelectMenu",components:{DtValidationMessages:E.default},mixins:[u.MessagesMixin],inheritAttrs:!1,props:{label:{type:String,default:""},description:{type:String,default:""},options:{type:Array,default:()=>[],validator:t=>m.optionsValidator(t)},size:{type:String,default:"md",validator:t=>Object.keys(o.SELECT_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""},selectClass:{type:[String,Array,Object],default:""},optionClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},optionChildProps:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},rootClass:{type:[String,Object,Array],default:""},modelValue:{type:[String,Number],default:""}},emits:["input","update:modelValue","change"],data(){return{LABEL_SIZE_MODIFIERS:d.LABEL_SIZE_MODIFIERS,DESCRIPTION_SIZE_MODIFIERS:d.DESCRIPTION_SIZE_MODIFIERS,SELECT_SIZE_MODIFIERS:o.SELECT_SIZE_MODIFIERS,SELECT_STATE_MODIFIERS:o.SELECT_STATE_MODIFIERS,hasSlotContent:i.hasSlotContent}},computed:{selectListeners(){return{input:()=>{},change:t=>this.emitValue(t.target.value,t)}},state(){return i.getValidationState(this.formattedMessages)},selectKey(){return i.getUniqueString()},descriptionKey(){return`select-${this.selectKey}-description`},labelAriaDetails(){return this.$slots.description||this.description?this.descriptionKey:this.$attrs["aria-details"]}},mounted(){this.validateOptionsPresence()},beforeUpdate(){this.validateOptionsPresence()},methods:{removeClassStyleAttrs:i.removeClassStyleAttrs,addClassStyleAttrs:i.addClassStyleAttrs,emitValue(t,r){this.$emit("update:modelValue",t,r),this.$emit("input",t,r),this.$emit("change",t,r)},getOptionKey(t){return`select-${this.selectKey}-option-${t}`},validateOptionsPresence(){var t;((t=this.options)==null?void 0:t.length)<1&&!this.$slots.default&&e.warn("Options are expected to be provided via prop or slot",this)}}},p=["aria-details"],g=["id"],C=["disabled","value"],y=["value"];function I(t,r,s,b,a,l){const c=e.resolveComponent("dt-validation-messages");return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:s.rootClass},l.addClassStyleAttrs(t.$attrs)),[e.createElementVNode("label",null,[a.hasSlotContent(t.$slots.label)||s.label?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-details":l.labelAriaDetails,class:["d-label",a.LABEL_SIZE_MODIFIERS[s.size],s.labelClass]},s.labelChildProps,{"data-qa":"dt-select-label"}),[e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(s.label),1)])],16,p)):e.createCommentVNode("",!0),a.hasSlotContent(t.$slots.description)||s.description?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:1,id:l.descriptionKey,class:["d-description",a.DESCRIPTION_SIZE_MODIFIERS[s.size],s.descriptionClass]},s.descriptionChildProps,{"data-qa":"dt-select-description"}),[e.renderSlot(t.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(s.description),1)])],16,g)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["d-select",a.SELECT_SIZE_MODIFIERS[s.size],s.selectClass,{"d-select--disabled":s.disabled}]),"data-qa":"dt-select-wrapper"},[e.createElementVNode("select",e.mergeProps({ref:"selectElement",class:["d-select__input",a.SELECT_STATE_MODIFIERS[l.state]]},l.removeClassStyleAttrs(t.$attrs),{"data-qa":"dt-select",disabled:s.disabled,value:s.modelValue},e.toHandlers(l.selectListeners,!0)),[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,n=>(e.openBlock(),e.createElementBlock("option",e.mergeProps({key:l.getOptionKey(n.value),value:n.value,class:s.optionClass},{ref_for:!0},s.optionChildProps),e.toDisplayString(n.label),17,y))),128))])],16,C)],2)]),e.createVNode(c,e.mergeProps({"validation-messages":t.formattedMessages,"show-messages":t.showMessages,class:t.messagesClass},t.messagesChildProps,{"data-qa":"dt-select-messages"}),null,16,["validation-messages","show-messages","class"])],16)}const h=S._(_,[["render",I]]);exports.default=h;
 //# sourceMappingURL=select-menu.cjs.map

package/dist/lib/select-menu/select-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.cjs","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","options","optionsValidator","s","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","removeClassStyleAttrs","addClassStyleAttrs","value","_a","warn","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","$data","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","option","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"select-menu.cjs","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","options","optionsValidator","s","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","removeClassStyleAttrs","addClassStyleAttrs","value","_a","warn","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","$data","_openBlock","_renderSlot","_normalizeClass","_toHandlers","_Fragment","_renderList","option","_toDisplayString","_hoisted_4","_createVNode","_component_dt_validation_messages"],"mappings":"+cA4GKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,CAAA,qBAAEC,EAAAA,SAEd,OAAQ,CAACC,EAAAA,aAAa,EAEtB,aAAc,GAEd,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAUX,QAAS,CACP,KAAM,MACN,QAAS,IAAM,CAAA,EACf,UAAWC,GAAWC,EAAAA,iBAAiBD,CAAO,GAOhD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,GAMjE,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,iBAAkB,CAChB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,gBAAiB,CACf,KAAM,OACN,QAAS,KAAO,CAAA,IAMlB,sBAAuB,CACrB,KAAM,OACN,QAAS,KAAO,CAAA,IAMlB,iBAAkB,CAChB,KAAM,OACN,QAAS,KAAO,CAAA,IAOlB,SAAU,CACR,KAAM,QACN,QAAS,IAQX,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,IAMX,WAAY,CACV,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,KAIb,MAAO,CAOL,QAQA,oBAQA,UAGF,MAAQ,CACN,MAAO,CACL,qBAAAE,EAAAA,gDACAC,EAAAA,2BACA,sBAAAF,EAAAA,6CACAG,EAAAA,uBACA,eAAAC,EAAAA,eAEJ,EAEA,SAAU,CACR,iBAAmB,CACjB,MAAO,CAML,MAAO,IAAM,CAAC,EACd,OAAQC,GAAS,KAAK,UAAUA,EAAM,OAAO,MAAOA,CAAK,EAE7D,EAEA,OAAS,CACP,OAAOC,EAAAA,mBAAmB,KAAK,iBAAiB,CAClD,EAEA,WAAa,CACX,OAAOC,kBAAe,CACxB,EAEA,gBAAkB,CAChB,MAAO,UAAU,KAAK,SAAS,cACjC,EAEA,kBAAoB,CAClB,OAAI,KAAK,OAAO,aAAe,KAAK,YAC3B,KAAK,eAGP,KAAK,OAAO,cAAc,CACnC,GAGF,SAAW,CACT,KAAK,wBAAuB,CAC9B,EAEA,cAAgB,CACd,KAAK,wBAAuB,CAC9B,EAEA,QAAS,CACP,sBAAAC,EAAAA,sBACA,mBAAAC,EAAAA,mBACA,UAAWC,EAAOL,EAAO,CACvB,KAAK,MAAM,oBAAqBK,EAAOL,CAAK,EAC5C,KAAK,MAAM,QAASK,EAAOL,CAAK,EAChC,KAAK,MAAM,SAAUK,EAAOL,CAAK,CACnC,EAEA,aAAcK,EAAO,CACnB,MAAO,UAAU,KAAK,SAAS,WAAWA,CAAK,EACjD,EAEA,yBAA2B,SACrBC,EAAA,KAAK,UAAL,YAAAA,EAAc,QAAS,GAAK,CAAC,KAAK,OAAO,SAC3CC,EAAAA,KAAK,uDAAwD,IAAI,CAErE,EAEJ,mKAlVEC,EAAAA,mBA4EM,MA5ENC,EAAAA,WA4EM,CA3EH,MAAOC,EAAA,SAAS,EACTC,EAAA,mBAAmBC,EAAA,MAAM,CAAA,EAAA,CAEjCC,EAAAA,mBAgEQ,QAAA,KAAA,CA9DEC,EAAA,eAAeF,EAAA,OAAO,KAAK,GAAKF,EAAA,OADxCK,EAAAA,YAAAP,EAAAA,mBAaM,MAbNC,aAaM,OAXH,eAAcE,EAAA,iBACd,MAAK,WAAmCG,EAAA,qBAAqBJ,EAAA,IAAI,EAAaA,EAAA,aAKvEA,EAAA,gBAAe,CACvB,UAAQ,iBAAiB,CAAA,EAAA,CAGzBM,EAAAA,WAAqCJ,oBAArC,IAAqC,qCAAfF,EAAA,KAAK,EAAA,CAAA,wCAGrBI,EAAA,eAAeF,EAAA,OAAO,WAAW,GAAKF,EAAA,aAD9CK,EAAAA,YAAAP,EAAAA,mBAaM,MAbNC,aAaM,OAXH,GAAIE,EAAA,eACJ,MAAK,iBAAyCG,EAAA,2BAA2BJ,EAAA,IAAI,EAAaA,EAAA,mBAKnFA,EAAA,sBAAqB,CAC7B,UAAQ,uBAAuB,CAAA,EAAA,CAG/BM,EAAAA,WAAiDJ,0BAAjD,IAAiD,qCAArBF,EAAA,WAAW,EAAA,CAAA,wCAEzCG,EAAAA,mBAkCM,MAAA,CAjCH,MAAKI,EAAAA,eAAA,YAAoCH,EAAA,sBAAsBJ,EAAA,IAAI,EAAaA,EAAA,kCAA+CA,EAAA,QAAQ,IAMxI,UAAQ,sBAERG,EAAAA,mBAwBS,SAxBTJ,aAwBS,CAvBP,IAAI,gBACH,MAAK,mBAA+CK,EAAA,uBAAuBH,EAAA,KAAK,EAIzE,EAAAA,EAAA,sBAAsBC,EAAA,MAAM,EAAA,CACpC,UAAQ,YACP,SAAUF,EAAA,SACV,MAAOA,EAAA,UACR,EAAAQ,EAAAA,WAAsBP,EAAhB,gBAAe,EAAA,CAAA,EAAA,CAGrBK,EAAAA,WAUOJ,sBAVP,IAUO,kBATLJ,EAAAA,mBAQSW,EAAAA,SAAA,KAAAC,EAAAA,WAPUV,EAAA,QAAVW,IADTN,YAAA,EAAAP,qBAQS,SARTC,EAAAA,WAQS,CANN,IAAKE,EAAA,aAAaU,EAAO,KAAK,EAC9B,MAAOA,EAAO,MACd,MAAOX,EAAA,0BACAA,EAAA,gBAAgB,EAAAY,EAAAA,gBAErBD,EAAO,KAAK,EAAA,GAAAE,CAAA,yBAMzBC,EAAAA,YAMEC,EANFhB,aAME,CALC,sBAAqBG,EAAA,kBACrB,gBAAeA,EAAA,aACf,MAAOA,EAAA,eACAA,EAAA,mBAAkB,CAC1B,UAAQ,oBAAoB,CAAA,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,OAAA,CAAA"}

package/dist/lib/select-menu/select-menu.js

@@ -1,4 +1,4 @@
-import { resolveComponent as f, createElementBlock as i, openBlock as r, mergeProps as l, createElementVNode as n, createVNode as g, createCommentVNode as u, renderSlot as c, createTextVNode as p, toDisplayString as m, normalizeClass as y, toHandlers as C, Fragment as b, renderList as E, warn as _ } from "vue";
+import { resolveComponent as h, createElementBlock as i, openBlock as r, mergeProps as l, createElementVNode as n, createVNode as g, createCommentVNode as m, renderSlot as c, createTextVNode as p, toDisplayString as u, normalizeClass as y, toHandlers as C, Fragment as b, renderList as E, warn as _ } from "vue";
 import { DESCRIPTION_SIZE_MODIFIERS as I, LABEL_SIZE_MODIFIERS as O } from "../../common/constants/index.js";
 import { SELECT_STATE_MODIFIERS as v, SELECT_SIZE_MODIFIERS as S } from "./select-menu-constants.js";
 import { addClassStyleAttrs as A, removeClassStyleAttrs as D, getUniqueString as M, getValidationState as P, hasSlotContent as V } from "../../common/utils/index.js";
@@ -202,7 +202,7 @@ const F = {
   }
 }, K = ["aria-details"], N = ["id"], k = ["disabled", "value"], q = ["value"];
 function Z(e, d, t, w, a, s) {
-  const h = f("dt-validation-messages");
+  const f = h("dt-validation-messages");
   return r(), i("div", l({ class: t.rootClass }, s.addClassStyleAttrs(e.$attrs)), [
     n("label", null, [
       a.hasSlotContent(e.$slots.label) || t.label ? (r(), i("div", l({
@@ -215,9 +215,9 @@ function Z(e, d, t, w, a, s) {
         ]
       }, t.labelChildProps, { "data-qa": "dt-select-label" }), [
         c(e.$slots, "label", {}, () => [
-          p(m(t.label), 1)
+          p(u(t.label), 1)
         ])
-      ], 16, K)) : u("", !0),
+      ], 16, K)) : m("", !0),
       a.hasSlotContent(e.$slots.description) || t.description ? (r(), i("div", l({
         key: 1,
         id: s.descriptionKey,
@@ -228,9 +228,9 @@ function Z(e, d, t, w, a, s) {
         ]
       }, t.descriptionChildProps, { "data-qa": "dt-select-description" }), [
         c(e.$slots, "description", {}, () => [
-          p(m(t.description), 1)
+          p(u(t.description), 1)
         ])
-      ], 16, N)) : u("", !0),
+      ], 16, N)) : m("", !0),
       n("div", {
         class: y([
           "d-select",
@@ -256,12 +256,12 @@ function Z(e, d, t, w, a, s) {
               key: s.getOptionKey(o.value),
               value: o.value,
               class: t.optionClass
-            }, t.optionChildProps), m(o.label), 17, q))), 128))
+            }, { ref_for: !0 }, t.optionChildProps), u(o.label), 17, q))), 128))
           ])
         ], 16, k)
       ], 2)
     ]),
-    g(h, l({
+    g(f, l({
       "validation-messages": e.formattedMessages,
       "show-messages": e.showMessages,
       class: e.messagesClass

package/dist/lib/select-menu/select-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","options","optionsValidator","s","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","removeClassStyleAttrs","addClassStyleAttrs","value","_a","warn","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","$data","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","option","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"select-menu.js","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","options","optionsValidator","s","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","removeClassStyleAttrs","addClassStyleAttrs","value","_a","warn","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","$data","_openBlock","_renderSlot","_normalizeClass","_toHandlers","_Fragment","_renderList","option","_toDisplayString","_hoisted_4","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

package/dist/lib/settings-menu-button/settings-menu-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.cjs","sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconMoreVertical","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon_more_vertical","_withCtx","_renderSlot"],"mappings":"yQAwCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,6BAEN,WAAY,CACV,SAAAC,EAAAA,QACA,mBAAAC,EAAAA,oBAGF,aAAc,GAEd,MAAO,CAML,gBAAiB,CACf,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,SAAU,IAIhB,uHArEUC,EAAA,iBADRC,EAAAA,YAAAC,EAAAA,YAeYC,EAfZC,aAeY,CAhBd,IAAA,EAGI,WAAW,WACX,KAAK,KACL,gBAAc,QACd,MAAM,uCACL,aAAYJ,EAAA,WACLK,EAAA,MAAM,EAAA,CAGH,eACT,IAEE,CAFFC,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA,IAblB,QAAAC,EAAAA,QAUI,IAAQ,CAARC,aAAQJ,EAAA,OAAA,SAAA,IAVZ,EAAA,wBAiBEJ,EAAAA,YAAAC,EAAAA,YAaYC,EAbZC,aAaY,CA9Bd,IAAA,EAmBI,WAAW,QACX,KAAK,WACL,MAAM,gCACL,aAAYJ,EAAA,WACLK,EAAA,MAAM,EAAA,CAEH,eACT,IAEE,CAFFC,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA,IA3BlB,EAAA"}
+{"version":3,"file":"settings-menu-button.cjs","sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconMoreVertical","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon_more_vertical","_renderSlot"],"mappings":"yQAwCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,6BAEN,WAAY,CACV,SAAAC,EAAAA,QACA,mBAAAC,EAAAA,oBAGF,aAAc,GAEd,MAAO,CAML,gBAAiB,CACf,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,SAAU,IAIhB,uHArEUC,EAAA,iBADRC,EAAAA,YAAAC,EAAAA,YAeYC,EAfZC,aAeY,OAbV,WAAW,WACX,KAAK,KACL,gBAAc,QACd,MAAM,uCACL,aAAYJ,EAAA,WACLK,EAAA,MAAM,EAAA,CAGH,eACT,IAEE,CAFFC,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA,sBAHd,IAAQ,CAARC,aAAQH,EAAA,OAAA,SAAA,8BAOVJ,EAAAA,YAAAC,EAAAA,YAaYC,EAbZC,aAaY,OAXV,WAAW,QACX,KAAK,WACL,MAAM,gCACL,aAAYJ,EAAA,WACLK,EAAA,MAAM,EAAA,CAEH,eACT,IAEE,CAFFC,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA"}

package/dist/lib/settings-menu-button/settings-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.js","sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconMoreVertical","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon_more_vertical","_withCtx","_renderSlot"],"mappings":";;;;AAwCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,oBAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA;;AAIhB;;;SArEUC,EAAA,mBADRC,KAAAC,EAeYC,GAfZC,EAeY;AAAA,IAhBd,KAAA;AAAA,IAGI,YAAW;AAAA,IACX,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,OAAM;AAAA,IACL,cAAYJ,EAAA;AAAA,KACLK,EAAA,MAAM,GAAA;AAAA,IAGH,QACT,MAEE;AAAA,MAFFC,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;IAblB,SAAAC,EAUI,MAAQ;AAAA,MAARC,EAAQJ,EAAA,QAAA,SAAA;AAAA;IAVZ,GAAA;AAAA,6BAiBEJ,KAAAC,EAaYC,GAbZC,EAaY;AAAA,IA9Bd,KAAA;AAAA,IAmBI,YAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAM;AAAA,IACL,cAAYJ,EAAA;AAAA,KACLK,EAAA,MAAM,GAAA;AAAA,IAEH,QACT,MAEE;AAAA,MAFFC,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;IA3BlB,GAAA;AAAA;;;"}
+{"version":3,"file":"settings-menu-button.js","sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconMoreVertical","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon_more_vertical","_renderSlot"],"mappings":";;;;AAwCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,oBAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA;;AAIhB;;;SArEUC,EAAA,mBADRC,KAAAC,EAeYC,GAfZC,EAeY;AAAA;IAbV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,OAAM;AAAA,IACL,cAAYJ,EAAA;AAAA,KACLK,EAAA,MAAM,GAAA;AAAA,IAGH,QACT,MAEE;AAAA,MAFFC,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;eAHd,MAAQ;AAAA,MAARC,EAAQH,EAAA,QAAA,SAAA;AAAA;;6BAOVJ,KAAAC,EAaYC,GAbZC,EAaY;AAAA;IAXV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAM;AAAA,IACL,cAAYJ,EAAA;AAAA,KACLK,EAAA,MAAM,GAAA;AAAA,IAEH,QACT,MAEE;AAAA,MAFFC,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;"}

package/dist/lib/skeleton/skeleton-list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-list-item.cjs","sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonShape","DtSkeletonParagraph","shape","SKELETON_SHAPES","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps"],"mappings":"2SAoCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,gBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,GAOjE,UAAW,CACT,KAAM,OACN,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,KAAO,CAAE,KAAM,EAAG,YAAa,EAAG,IAM7C,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAGf,EApGSE,EAAA,CAAA,MAAM,2CAA2C,6IAnBxDC,EAAAA,mBA2BM,MAAA,CA1BJ,UAAQ,qBACP,MAHLC,EAAAA,eAAA,yBAG4F,+BAAAC,EAAA,WAAW,OAAI,GAAuBA,EAAA,iBAQ9HC,EAAAA,YAQEC,EAAA,CAPA,MAAM,8BACL,KAAMF,EAAA,UACN,MAAOA,EAAA,MACP,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,OACR,gBAAeA,EAAA,6FAElBG,EAAAA,mBAOM,MAPNN,EAOM,CANJI,EAAAA,YAKEG,EALFC,aACUL,EAAA,WAAU,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA"}
+{"version":3,"file":"skeleton-list-item.cjs","sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonShape","DtSkeletonParagraph","shape","SKELETON_SHAPES","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps"],"mappings":"2SAoCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,gBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,GAOjE,UAAW,CACT,KAAM,OACN,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,KAAO,CAAE,KAAM,EAAG,YAAa,EAAG,IAM7C,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAGf,EApGSE,EAAA,CAAA,MAAM,2CAA2C,6IAnBxDC,EAAAA,mBA2BM,MAAA,CA1BJ,UAAQ,qBACP,MAAKC,EAAAA,eAAA,yBAAkF,+BAAAC,EAAA,WAAW,OAAI,GAAuBA,EAAA,iBAQ9HC,EAAAA,YAQEC,EAAA,CAPA,MAAM,8BACL,KAAMF,EAAA,UACN,MAAOA,EAAA,MACP,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,OACR,gBAAeA,EAAA,6FAElBG,EAAAA,mBAOM,MAPNN,EAOM,CANJI,EAAAA,YAKEG,EALFC,aACUL,EAAA,WAAU,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA"}

package/dist/lib/skeleton/skeleton-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-list-item.js","sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonShape","DtSkeletonParagraph","shape","SKELETON_SHAPES","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps"],"mappings":";;;;;AAoCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,iBAAAC;AAAA,IACA,qBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAS,OAAO,KAAKC,CAAe,EAAE,SAASD,CAAK;AAAA;;;;;IAOjE,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG;AAAA;;;;IAM7C,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;AAGf,GApGSE,IAAA,EAAA,OAAM,4CAA2C;;;cAnBxDC,EA2BM,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAHLC,EAAA;AAAA;;QAG4F,gCAAAC,EAAA,WAAW,SAAI;AAAA;MAAuBA,EAAA;AAAA;;IAQ9HC,EAQEC,GAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAMF,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACP,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,MACR,iBAAeA,EAAA;AAAA;IAElBG,EAOM,OAPNN,GAOM;AAAA,MANJI,EAKEG,GALFC,EACUL,EAAA,YAAU;AAAA,QACjB,sBAAoBA,EAAA;AAAA,QACpB,SAASA,EAAA;AAAA,QACT,QAAQA,EAAA;AAAA;;;;;"}
+{"version":3,"file":"skeleton-list-item.js","sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonShape","DtSkeletonParagraph","shape","SKELETON_SHAPES","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps"],"mappings":";;;;;AAoCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,iBAAAC;AAAA,IACA,qBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAS,OAAO,KAAKC,CAAe,EAAE,SAASD,CAAK;AAAA;;;;;IAOjE,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG;AAAA;;;;IAM7C,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;AAGf,GApGSE,IAAA,EAAA,OAAM,4CAA2C;;;cAnBxDC,EA2BM,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAAKC,EAAA;AAAA;;QAAkF,gCAAAC,EAAA,WAAW,SAAI;AAAA;MAAuBA,EAAA;AAAA;;IAQ9HC,EAQEC,GAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAMF,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACP,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,MACR,iBAAeA,EAAA;AAAA;IAElBG,EAOM,OAPNN,GAOM;AAAA,MANJI,EAKEG,GALFC,EACUL,EAAA,YAAU;AAAA,QACjB,sBAAoBA,EAAA;AAAA,QACpB,SAASA,EAAA;AAAA,QACT,QAAQA,EAAA;AAAA;;;;;"}

package/dist/lib/skeleton/skeleton-paragraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-paragraph.cjs","sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["validator","number","_sfc_main","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","_createElementBlock","_normalizeClass","$props","_openBlock","_Fragment","_renderList","$options","_createBlock","_component_dt_skeleton_text"],"mappings":"8NAyBMA,EAAYC,GAAUA,IAAW,IAAM,CAAC,OAAO,MAAM,OAAOA,CAAM,CAAC,EACpEC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,sBACN,WAAY,CACV,eAAAC,EAAAA,SAGF,MAAO,CAIL,KAAM,CACJ,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,EACT,UAAAH,GAOF,QAAS,CACP,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,GACT,UAAAA,GAMF,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAAA,GAMF,MAAO,CACL,KAAM,CAAC,OAAQ,KAAK,EACpB,QAAS,MAOX,YAAa,CACX,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,SAAU,CACR,KAAM,OACN,QAAS,KAIb,SAAU,CACR,aAAe,CACb,OAAO,OAAO,KAAK,IAAI,CACzB,GAGF,QAAS,CACP,uBAAyB,CACvB,MAAMI,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,QAAQ,EAC3CC,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,QAAQ,EACjD,MAAO,GAAG,KAAK,MAAM,KAAK,UAAYA,EAAMD,EAAI,EAAIA,CAAG,GACzD,EAEA,oBAAqBE,EAAK,CACxB,MAAMC,EAAiB,KAAK,MACtBC,EAAe,MAAM,QAAQD,CAAc,EAC3CE,EAAeF,GAAA,YAAAA,EAAiBD,EAAM,GACtCI,EAAYJ,IAAQ,KAAK,KAE/B,OAAI,KAAK,YACA,KAAK,sBAAqB,EAG/BC,GAAkB,CAACC,EACdD,EAGLA,GAAkBC,GAAgBC,EAC7BA,EAGFC,EAAY,MAAQ,MAC7B,EAEJ,8FA9JEC,EAAAA,mBAkBM,MAAA,CAjBH,MAFLC,EAAAA,eAAA,wBAEkDC,EAAA,eAI9C,aAAA,GACA,UAAQ,wBAERC,YAAA,EAAA,EAAAH,EAAAA,mBASEI,EAAAA,SAAA,KAlBNC,EAAAA,WAUoBC,EAAA,YAAPX,kBADTY,EAAAA,YASEC,EAAA,CAPC,IAAKb,EACN,UAAQ,yBACP,gBAAeO,EAAA,SACf,QAASA,EAAA,QACT,OAAQA,EAAA,OACR,qBAAoBA,EAAA,kBACpB,MAAOI,EAAA,oBAAoBX,CAAG"}
+{"version":3,"file":"skeleton-paragraph.cjs","sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["validator","number","_sfc_main","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","_createElementBlock","_normalizeClass","$props","_Fragment","_renderList","$options","_createBlock","_component_dt_skeleton_text"],"mappings":"8NAyBMA,EAAYC,GAAUA,IAAW,IAAM,CAAC,OAAO,MAAM,OAAOA,CAAM,CAAC,EACpEC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,sBACN,WAAY,CACV,eAAAC,EAAAA,SAGF,MAAO,CAIL,KAAM,CACJ,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,EACT,UAAAH,GAOF,QAAS,CACP,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,GACT,UAAAA,GAMF,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAAA,GAMF,MAAO,CACL,KAAM,CAAC,OAAQ,KAAK,EACpB,QAAS,MAOX,YAAa,CACX,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,SAAU,CACR,KAAM,OACN,QAAS,KAIb,SAAU,CACR,aAAe,CACb,OAAO,OAAO,KAAK,IAAI,CACzB,GAGF,QAAS,CACP,uBAAyB,CACvB,MAAMI,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,QAAQ,EAC3CC,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,QAAQ,EACjD,MAAO,GAAG,KAAK,MAAM,KAAK,UAAYA,EAAMD,EAAI,EAAIA,CAAG,GACzD,EAEA,oBAAqBE,EAAK,CACxB,MAAMC,EAAiB,KAAK,MACtBC,EAAe,MAAM,QAAQD,CAAc,EAC3CE,EAAeF,GAAA,YAAAA,EAAiBD,EAAM,GACtCI,EAAYJ,IAAQ,KAAK,KAE/B,OAAI,KAAK,YACA,KAAK,sBAAqB,EAG/BC,GAAkB,CAACC,EACdD,EAGLA,GAAkBC,GAAgBC,EAC7BA,EAGFC,EAAY,MAAQ,MAC7B,EAEJ,8FA9JEC,EAAAA,mBAkBM,MAAA,CAjBH,MAAKC,EAAAA,eAAA,wBAAwCC,EAAA,eAI9C,aAAA,GACA,UAAQ,wCAERF,EAAAA,mBASEG,EAAAA,SAAA,KAAAC,EAAAA,WARcC,EAAA,YAAPV,kBADTW,EAAAA,YASEC,EAAA,CAPC,IAAKZ,EACN,UAAQ,yBACP,gBAAeO,EAAA,SACf,QAASA,EAAA,QACT,OAAQA,EAAA,OACR,qBAAoBA,EAAA,kBACpB,MAAOG,EAAA,oBAAoBV,CAAG"}

package/dist/lib/skeleton/skeleton-paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-paragraph.js","sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["validator","number","_sfc_main","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","_createElementBlock","_normalizeClass","$props","_openBlock","_Fragment","_renderList","$options","_createBlock","_component_dt_skeleton_text"],"mappings":";;;AAyBA,MAAMA,IAAY,CAAAC,MAAUA,MAAW,MAAM,CAAC,OAAO,MAAM,OAAOA,CAAM,CAAC,GACpEC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAH;AAAA;;;;;IAOF,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA;;;;IAMF,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA;;;;IAMF,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,KAAK;AAAA,MACpB,SAAS;AAAA;;;;;IAOX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,UAAU;AAAA,IACR,cAAe;AACb,aAAO,OAAO,KAAK,IAAI;AAAA,IACzB;AAAA;EAGF,SAAS;AAAA,IACP,wBAAyB;AACvB,YAAMI,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ,GAC3CC,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,aAAO,GAAG,KAAK,MAAM,KAAK,YAAYA,IAAMD,EAAI,IAAIA,CAAG;AAAA,IACzD;AAAA,IAEA,oBAAqBE,GAAK;AACxB,YAAMC,IAAiB,KAAK,OACtBC,IAAe,MAAM,QAAQD,CAAc,GAC3CE,IAAeF,KAAA,gBAAAA,EAAiBD,IAAM,IACtCI,IAAYJ,MAAQ,KAAK;AAE/B,aAAI,KAAK,cACA,KAAK,sBAAqB,IAG/BC,KAAkB,CAACC,IACdD,IAGLA,KAAkBC,KAAgBC,IAC7BA,IAGFC,IAAY,QAAQ;AAAA,IAC7B;AAAA;AAEJ;;;cA9JEC,EAkBM,OAAA;AAAA,IAjBH,OAFLC,EAAA;AAAA;MAEkDC,EAAA;AAAA;IAI9C,cAAA;AAAA,IACA,WAAQ;AAAA;KAERC,EAAA,EAAA,GAAAH,EASEI,GAAA,MAlBNC,EAUoBC,EAAA,aAVpB,CAUaX,YADTY,EASEC,GAAA;AAAA,MAPC,KAAKb;AAAA,MACN,WAAQ;AAAA,MACP,iBAAeO,EAAA;AAAA,MACf,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,MACR,sBAAoBA,EAAA;AAAA,MACpB,OAAOI,EAAA,oBAAoBX,CAAG;AAAA;;;;"}
+{"version":3,"file":"skeleton-paragraph.js","sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["validator","number","_sfc_main","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","_createElementBlock","_normalizeClass","$props","_Fragment","_renderList","$options","_createBlock","_component_dt_skeleton_text"],"mappings":";;;AAyBA,MAAMA,IAAY,CAAAC,MAAUA,MAAW,MAAM,CAAC,OAAO,MAAM,OAAOA,CAAM,CAAC,GACpEC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAH;AAAA;;;;;IAOF,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA;;;;IAMF,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA;;;;IAMF,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,KAAK;AAAA,MACpB,SAAS;AAAA;;;;;IAOX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,UAAU;AAAA,IACR,cAAe;AACb,aAAO,OAAO,KAAK,IAAI;AAAA,IACzB;AAAA;EAGF,SAAS;AAAA,IACP,wBAAyB;AACvB,YAAMI,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ,GAC3CC,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,aAAO,GAAG,KAAK,MAAM,KAAK,YAAYA,IAAMD,EAAI,IAAIA,CAAG;AAAA,IACzD;AAAA,IAEA,oBAAqBE,GAAK;AACxB,YAAMC,IAAiB,KAAK,OACtBC,IAAe,MAAM,QAAQD,CAAc,GAC3CE,IAAeF,KAAA,gBAAAA,EAAiBD,IAAM,IACtCI,IAAYJ,MAAQ,KAAK;AAE/B,aAAI,KAAK,cACA,KAAK,sBAAqB,IAG/BC,KAAkB,CAACC,IACdD,IAGLA,KAAkBC,KAAgBC,IAC7BA,IAGFC,IAAY,QAAQ;AAAA,IAC7B;AAAA;AAEJ;;;cA9JEC,EAkBM,OAAA;AAAA,IAjBH,OAAKC,EAAA;AAAA;MAAwCC,EAAA;AAAA;IAI9C,cAAA;AAAA,IACA,WAAQ;AAAA;YAERF,EASEG,GAAA,MAAAC,EARcC,EAAA,aAAW,CAAlBV,YADTW,EASEC,GAAA;AAAA,MAPC,KAAKZ;AAAA,MACN,WAAQ;AAAA,MACP,iBAAeO,EAAA;AAAA,MACf,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,MACR,sBAAoBA,EAAA;AAAA,MACpB,OAAOG,EAAA,oBAAoBV,CAAG;AAAA;;;;"}

package/dist/lib/skeleton/skeleton-shape.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-shape.cjs","sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","shape","SKELETON_SHAPES","size","SKELETON_SHAPE_SIZES","_createElementBlock","_normalizeClass","$data","$props","_normalizeStyle","$options"],"mappings":"iRAuBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,GAOjE,KAAM,CACJ,KAAM,OACN,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,gBAAAC,EAAAA,gBAEJ,EAEA,SAAU,CACR,aAAe,CACb,MAAMC,EAAOC,EAAAA,qBAAqB,KAAK,IAAI,GAAK,KAAK,KACrD,MAAO,CACL,GAAG,KAAK,cACR,YAAaD,EACb,YAAaA,EACb,aAAcA,EACd,aAAcA,EAElB,EAEJ,+CAzGEE,EAAAA,mBAYE,MAAA,CAXA,IAAI,WACJ,UAAQ,iBACP,MAJLC,EAAAA,eAAA,0BAIoDC,EAAA,gBAAgBC,EAAA,KAAK,qCAAsDA,EAAA,SAAwBA,EAAA,eAQlJ,MAZLC,EAAAA,eAYYC,EAAA,WAAW"}
+{"version":3,"file":"skeleton-shape.cjs","sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","shape","SKELETON_SHAPES","size","SKELETON_SHAPE_SIZES","_createElementBlock","_normalizeClass","$data","$props","$options"],"mappings":"iRAuBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,GAOjE,KAAM,CACJ,KAAM,OACN,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,gBAAAC,EAAAA,gBAEJ,EAEA,SAAU,CACR,aAAe,CACb,MAAMC,EAAOC,EAAAA,qBAAqB,KAAK,IAAI,GAAK,KAAK,KACrD,MAAO,CACL,GAAG,KAAK,cACR,YAAaD,EACb,YAAaA,EACb,aAAcA,EACd,aAAcA,EAElB,EAEJ,+CAzGEE,EAAAA,mBAYE,MAAA,CAXA,IAAI,WACJ,UAAQ,iBACP,MAAKC,EAAAA,eAAA,0BAA0CC,EAAA,gBAAgBC,EAAA,KAAK,qCAAsDA,EAAA,SAAwBA,EAAA,eAQlJ,uBAAOC,EAAA,WAAW"}

package/dist/lib/skeleton/skeleton-shape.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-shape.js","sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","shape","SKELETON_SHAPES","size","SKELETON_SHAPE_SIZES","_createElementBlock","_normalizeClass","$data","$props","_normalizeStyle","$options"],"mappings":";;;;AAuBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAiB;AAAA,EAE1B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAS,OAAO,KAAKC,CAAe,EAAE,SAASD,CAAK;AAAA;;;;;IAOjE,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,iBAAAC;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,YAAMC,IAAOC,EAAqB,KAAK,IAAI,KAAK,KAAK;AACrD,aAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,aAAaD;AAAA,QACb,aAAaA;AAAA,QACb,cAAcA;AAAA,QACd,cAAcA;AAAA;IAElB;AAAA;AAEJ;;cAzGEE,EAYE,OAAA;AAAA,IAXA,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAIoDC,EAAA,gBAAgBC,EAAA,KAAK;AAAA;2CAAsDA,EAAA;AAAA;MAAwBA,EAAA;AAAA;IAQlJ,OAZLC,EAYYC,EAAA,WAAW;AAAA;;;"}
+{"version":3,"file":"skeleton-shape.js","sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","shape","SKELETON_SHAPES","size","SKELETON_SHAPE_SIZES","_createElementBlock","_normalizeClass","$data","$props","$options"],"mappings":";;;;AAuBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAiB;AAAA,EAE1B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAS,OAAO,KAAKC,CAAe,EAAE,SAASD,CAAK;AAAA;;;;;IAOjE,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,iBAAAC;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,YAAMC,IAAOC,EAAqB,KAAK,IAAI,KAAK,KAAK;AACrD,aAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,aAAaD;AAAA,QACb,aAAaA;AAAA,QACb,cAAcA;AAAA,QACd,cAAcA;AAAA;IAElB;AAAA;AAEJ;;cAzGEE,EAYE,OAAA;AAAA,IAXA,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAAKC,EAAA;AAAA;MAA0CC,EAAA,gBAAgBC,EAAA,KAAK;AAAA;2CAAsDA,EAAA;AAAA;MAAwBA,EAAA;AAAA;IAQlJ,SAAOC,EAAA,WAAW;AAAA;;;"}

package/dist/lib/skeleton/skeleton-text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-text.cjs","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","type","SKELETON_TEXT_TYPES","headingHeight","SKELETON_HEADING_HEIGHTS","$props","_createElementBlock","_normalizeClass","_normalizeStyle","_ctx","$data","_createCommentVNode"],"mappings":"iRA0CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAWC,GAAQC,sBAAoB,SAASD,CAAI,GAOtD,cAAe,CACb,KAAM,OACN,QAAS,KACT,UAAWE,GAAiB,OAAO,KAAKC,EAAAA,wBAAwB,EAAE,SAASD,CAAa,GAM1F,MAAO,CACL,KAAM,OACN,QAAS,QAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,aAAc,CACZ,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,0BACLC,EAAAA,yBAEJ,CACF,iCAvHUC,EAAA,OAAI,sBADZC,EAAAA,mBAgBE,MAAA,CAjBJ,IAAA,EAGI,IAAI,WACJ,UAAQ,qBACP,MALLC,EAAAA,eAAA,+EAK0HF,EAAA,SAAwBA,EAAA,eAQ7I,MAbLG,EAAAA,eAAA,OAaoBH,EAAA,SAAgBI,EAAA,0BAMrBJ,EAAA,OAAI,yBADjBC,EAAAA,mBAiBE,MAAA,CAnCJ,IAAA,EAoBI,IAAI,WACJ,UAAQ,wBACP,MAtBLC,EAAAA,eAAA,CAsBoBG,EAAA,yBAAyBL,EAAA,aAAa,yFAAwHA,EAAA,SAAwBA,EAAA,eASrM,MA/BLG,EAAAA,eAAA,OA+BoBH,EAAA,SAAgBI,EAAA,0BA/BpCE,EAAAA,mBAAA,GAAA,EAAA"}
+{"version":3,"file":"skeleton-text.cjs","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","type","SKELETON_TEXT_TYPES","headingHeight","SKELETON_HEADING_HEIGHTS","$props","_createElementBlock","_normalizeClass","_normalizeStyle","_ctx","$data"],"mappings":"iRA0CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAWC,GAAQC,sBAAoB,SAASD,CAAI,GAOtD,cAAe,CACb,KAAM,OACN,QAAS,KACT,UAAWE,GAAiB,OAAO,KAAKC,EAAAA,wBAAwB,EAAE,SAASD,CAAa,GAM1F,MAAO,CACL,KAAM,OACN,QAAS,QAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,aAAc,CACZ,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,0BACLC,EAAAA,yBAEJ,CACF,iCAvHUC,EAAA,OAAI,sBADZC,EAAAA,mBAgBE,MAAA,OAdA,IAAI,WACJ,UAAQ,qBACP,MAAKC,EAAAA,eAAA,+EAAgHF,EAAA,SAAwBA,EAAA,eAQ7I,MAAKG,EAAAA,eAAA,OAAUH,EAAA,SAAgBI,EAAA,0BAMrBJ,EAAA,OAAI,yBADjBC,EAAAA,mBAiBE,MAAA,OAfA,IAAI,WACJ,UAAQ,wBACP,MAAKC,EAAAA,eAAA,CAAUG,EAAA,yBAAyBL,EAAA,aAAa,yFAAwHA,EAAA,SAAwBA,EAAA,eASrM,MAAKG,EAAAA,eAAA,OAAUH,EAAA,SAAgBI,EAAA"}

package/dist/lib/skeleton/skeleton-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-text.js","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","type","SKELETON_TEXT_TYPES","headingHeight","SKELETON_HEADING_HEIGHTS","$props","_createElementBlock","_normalizeClass","_normalizeStyle","_ctx","$data","_createCommentVNode"],"mappings":";;;;AA0CA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAiB;AAAA,EAE1B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAQC,EAAoB,SAASD,CAAI;AAAA;;;;;IAOtD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAE,MAAiB,OAAO,KAAKC,CAAwB,EAAE,SAASD,CAAa;AAAA;;;;IAM1F,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,0BAAAC;AAAA;EAEJ;AACF;;SAvHUC,EAAA,SAAI,eADZC,EAgBE,OAAA;AAAA,IAjBJ,KAAA;AAAA,IAGI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OALLC,EAAA;AAAA;;;2CAK0HF,EAAA;AAAA;MAAwBA,EAAA;AAAA;IAQ7I,OAbLG,EAAA;AAAA,aAaoBH,EAAA;AAAA,SAAgBI,EAAA;AAAA;iBAMrBJ,EAAA,SAAI,kBADjBC,EAiBE,OAAA;AAAA,IAnCJ,KAAA;AAAA,IAoBI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAtBLC,EAAA;AAAA,MAsBoBG,EAAA,yBAAyBL,EAAA,aAAa;AAAA;;;2CAAwHA,EAAA;AAAA;MAAwBA,EAAA;AAAA;IASrM,OA/BLG,EAAA;AAAA,aA+BoBH,EAAA;AAAA,SAAgBI,EAAA;AAAA;iBA/BpCE,EAAA,IAAA,EAAA;;;"}
+{"version":3,"file":"skeleton-text.js","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","SkeletonAnimation","type","SKELETON_TEXT_TYPES","headingHeight","SKELETON_HEADING_HEIGHTS","$props","_createElementBlock","_normalizeClass","_normalizeStyle","_ctx","$data"],"mappings":";;;;AA0CA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAiB;AAAA,EAE1B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAQC,EAAoB,SAASD,CAAI;AAAA;;;;;IAOtD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAE,MAAiB,OAAO,KAAKC,CAAwB,EAAE,SAASD,CAAa;AAAA;;;;IAM1F,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,0BAAAC;AAAA;EAEJ;AACF;;SAvHUC,EAAA,SAAI,eADZC,EAgBE,OAAA;AAAA;IAdA,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAAKC,EAAA;AAAA;;;2CAAgHF,EAAA;AAAA;MAAwBA,EAAA;AAAA;IAQ7I,OAAKG,EAAA;AAAA,aAAUH,EAAA;AAAA,SAAgBI,EAAA;AAAA;iBAMrBJ,EAAA,SAAI,kBADjBC,EAiBE,OAAA;AAAA;IAfA,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAAKC,EAAA;AAAA,MAAUG,EAAA,yBAAyBL,EAAA,aAAa;AAAA;;;2CAAwHA,EAAA;AAAA;MAAwBA,EAAA;AAAA;IASrM,OAAKG,EAAA;AAAA,aAAUH,EAAA;AAAA,SAAgBI,EAAA;AAAA;;;;"}

package/dist/lib/skeleton/skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_hoisted_1","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":"gXAiDA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aACN,WAAY,CACV,eAAAC,EAAAA,QACA,gBAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,eAAgB,CACd,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,YAAa,CACX,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,IAIb,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YAEtB,GAGF,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,cAIb,QAAS,CACP,WAAa,CACX,MAAMC,EAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,CAAGC,CAAM,IAAMA,CAAM,EAChC,GAAID,EAAS,QAAU,EAAG,CACxB,MAAME,EAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,IAAMA,CAAG,EAAE,KAAK,KAAK,CAAC,4BAChF,QAAQ,MAAMD,CAAY,CAC5B,CACF,EAEJ,EAnKAE,EAAA,CAAA,YAAA,oOACEC,EAAAA,mBAiCM,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAYC,EAAA,YAGLA,EAAA,gBADRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EANFC,EAAAA,WAME,CAZN,IAAA,GAQcJ,EAAA,uBAA+BA,EAAA,eAAc,CACpD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,aADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEG,EANFD,EAAAA,WAME,CAnBN,IAAA,GAecJ,EAAA,oBAA4BA,EAAA,YAAW,CAC9C,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,iBADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEI,EANFF,EAAAA,WAME,CA1BN,IAAA,GAsBcJ,EAAA,wBAAgCA,EAAA,gBAAe,CACtD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,8DAEXC,EAAAA,YAAAC,EAAAA,YAMEK,EANFH,aAME,CAjCN,IAAA,GA6BcJ,EAAA,YAAU,GAAA,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,4DAhCf,EAAA,EAAAF,CAAA"}
+{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":"gXAiDA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aACN,WAAY,CACV,eAAAC,EAAAA,QACA,gBAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,eAAgB,CACd,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,YAAa,CACX,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,IAIb,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YAEtB,GAGF,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,cAIb,QAAS,CACP,WAAa,CACX,MAAMC,EAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,CAAGC,CAAM,IAAMA,CAAM,EAChC,GAAID,EAAS,QAAU,EAAG,CACxB,MAAME,EAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,IAAMA,CAAG,EAAE,KAAK,KAAK,CAAC,4BAChF,QAAQ,MAAMD,CAAY,CAC5B,CACF,EAEJ,qPAlKEE,EAAAA,mBAiCM,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAYC,EAAA,YAGLA,EAAA,gBADRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EANFC,EAAAA,WAME,CAAA,IAAA,GAJQJ,EAAA,uBAA+BA,EAAA,eAAc,CACpD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,aADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEG,EANFD,EAAAA,WAME,CAAA,IAAA,GAJQJ,EAAA,oBAA4BA,EAAA,YAAW,CAC9C,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,iBADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEI,EANFF,EAAAA,WAME,CAAA,IAAA,GAJQJ,EAAA,wBAAgCA,EAAA,gBAAe,CACtD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,4EAEXE,EAAAA,YAMEK,EANFH,aAME,CAAA,IAAA,GAJQJ,EAAA,YAAU,GAAA,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA"}

package/dist/lib/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_hoisted_1","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":";;;;;;;AAiDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,iBAAiB;AAAA,MACf,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;;IAOX,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAO;AAAA,QACL,iBAAiB,KAAK;AAAA,QACtB,gBAAgB,KAAK;AAAA,QACrB,YAAY,KAAK;AAAA,QACjB,aAAa,KAAK;AAAA;IAEtB;AAAA;EAGF,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA;;EAIb,SAAS;AAAA,IACP,YAAa;AACX,YAAMC,IAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,EAAGC,CAAM,MAAMA,CAAM;AAChC,UAAID,EAAS,UAAU,GAAG;AACxB,cAAME,IAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,MAAMA,CAAG,EAAE,KAAK,KAAK,CAAC;AAChF,gBAAQ,MAAMD,CAAY;AAAA,MAC5B;AAAA,IACF;AAAA;AAEJ,GAnKAE,IAAA,CAAA,YAAA;;;cACEC,EAiCM,OAAA;AAAA,IAhCJ,aAAU;AAAA,IACV,MAAK;AAAA,IACJ,cAAYC,EAAA;AAAA;IAGLA,EAAA,kBADRC,EAAA,GAAAC,EAMEC,GANFC,EAME,EAZN,KAAA,KAQcJ,EAAA,6BAA+BA,EAAA,gBAAc;AAAA,MACpD,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,kEAGEA,EAAA,eADbC,EAAA,GAAAC,EAMEG,GANFD,EAME,EAnBN,KAAA,KAecJ,EAAA,0BAA4BA,EAAA,aAAW;AAAA,MAC9C,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,kEAGEA,EAAA,mBADbC,EAAA,GAAAC,EAMEI,GANFF,EAME,EA1BN,KAAA,KAsBcJ,EAAA,8BAAgCA,EAAA,iBAAe;AAAA,MACtD,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,mEAEXC,KAAAC,EAMEK,GANFH,EAME,EAjCN,KAAA,KA6BcJ,EAAA,cAAU,IAAA;AAAA,MACjB,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA;EAhCf,GAAA,GAAAF,CAAA;;;"}
+{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":";;;;;;;AAiDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,iBAAiB;AAAA,MACf,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;;IAOX,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAO;AAAA,QACL,iBAAiB,KAAK;AAAA,QACtB,gBAAgB,KAAK;AAAA,QACrB,YAAY,KAAK;AAAA,QACjB,aAAa,KAAK;AAAA;IAEtB;AAAA;EAGF,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA;;EAIb,SAAS;AAAA,IACP,YAAa;AACX,YAAMC,IAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,EAAGC,CAAM,MAAMA,CAAM;AAChC,UAAID,EAAS,UAAU,GAAG;AACxB,cAAME,IAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,MAAMA,CAAG,EAAE,KAAK,KAAK,CAAC;AAChF,gBAAQ,MAAMD,CAAY;AAAA,MAC5B;AAAA,IACF;AAAA;AAEJ;;;cAlKEE,EAiCM,OAAA;AAAA,IAhCJ,aAAU;AAAA,IACV,MAAK;AAAA,IACJ,cAAYC,EAAA;AAAA;IAGLA,EAAA,kBADRC,EAAA,GAAAC,EAMEC,GANFC,EAME,EAAA,KAAA,KAJQJ,EAAA,6BAA+BA,EAAA,gBAAc;AAAA,MACpD,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,kEAGEA,EAAA,eADbC,EAAA,GAAAC,EAMEG,GANFD,EAME,EAAA,KAAA,KAJQJ,EAAA,0BAA4BA,EAAA,aAAW;AAAA,MAC9C,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,kEAGEA,EAAA,mBADbC,EAAA,GAAAC,EAMEI,GANFF,EAME,EAAA,KAAA,KAJQJ,EAAA,8BAAgCA,EAAA,iBAAe;AAAA,MACtD,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA,wEAEXE,EAMEK,GANFH,EAME,EAAA,KAAA,KAJQJ,EAAA,cAAU,IAAA;AAAA,MACjB,sBAAoBA,EAAA;AAAA,MACpB,SAASA,EAAA;AAAA,MACT,QAAQA,EAAA;AAAA;;;;"}

package/dist/lib/split-button/split-button-alpha.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-alpha.cjs","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx","$options"],"mappings":"2QA6BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,mBAEN,WAAY,CACV,SAAAC,EAAAA,SAGF,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,MAMX,aAAc,CACZ,KAAM,OACN,QAAS,QAMX,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,QAAS,CACP,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAOX,iBAAkB,CAChB,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,kBAAAC,EAAAA,kBAEJ,EAEA,SAAU,CACR,eAAiB,CACf,MAAO,CACL,QAAS,KAAK,YACd,SAAU,KAAK,OAAS,WAE5B,EAEJ,4IA7IEC,EAAAA,YAsBYC,EAAA,CApBV,UAAQ,wBACP,OAAQC,EAAA,OACR,aAAYA,EAAA,UACZ,qBAAoBA,EAAA,iBACpB,MAPLC,EAAAA,yDAOsDD,EAAA,IAAI,EAAA,EACrD,SAAUA,EAAA,SACV,gBAAeA,EAAA,aACf,WAAYA,EAAA,WACZ,KAAMA,EAAA,KACN,cAAaA,EAAA,WACb,QAASA,EAAA,QACT,KAAMA,EAAA,OAEI,eACT,IAGE,CAHFE,aAGEC,EAAA,OAAA,OAAA,CADC,KAAMC,EAAA,kBAAkBJ,EAAA,IAAI,MAnBrC,QAAAK,EAAAA,QAsBI,IAAuB,CAAvBH,aAAuBC,EAAA,OAAA,SAAA,IAtB3B,EAAA,8IAEkBG,EAAA,aAAa"}
+{"version":3,"file":"split-button-alpha.cjs","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_renderSlot","_ctx","$data","$options"],"mappings":"2QA6BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,mBAEN,WAAY,CACV,SAAAC,EAAAA,SAGF,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,MAMX,aAAc,CACZ,KAAM,OACN,QAAS,QAMX,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,QAAS,CACP,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAOX,iBAAkB,CAChB,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,kBAAAC,EAAAA,kBAEJ,EAEA,SAAU,CACR,eAAiB,CACf,MAAO,CACL,QAAS,KAAK,YACd,SAAU,KAAK,OAAS,WAE5B,EAEJ,4IA7IEC,EAAAA,YAsBYC,EAAA,CApBV,UAAQ,wBACP,OAAQC,EAAA,OACR,aAAYA,EAAA,UACZ,qBAAoBA,EAAA,iBACpB,iEAAiDA,EAAA,IAAI,EAAA,EACrD,SAAUA,EAAA,SACV,gBAAeA,EAAA,aACf,WAAYA,EAAA,WACZ,KAAMA,EAAA,KACN,cAAaA,EAAA,WACb,QAASA,EAAA,QACT,KAAMA,EAAA,OAEI,eACT,IAGE,CAHFC,aAGEC,EAAA,OAAA,OAAA,CADC,KAAMC,EAAA,kBAAkBH,EAAA,IAAI,wBAGjC,IAAuB,CAAvBC,aAAuBC,EAAA,OAAA,SAAA,oJApBTE,EAAA,aAAa"}