@dialpad/dialtone 9.130.0 → 9.131.0

package/dist/vue3/lib/skeleton/skeleton-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-constants.js","sources":["../../../components/skeleton/skeleton_constants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"names":["SKELETON_RIPPLE_DURATION","SKELETON_SHAPES","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","SKELETON_HEADING_HEIGHTS","skeleton_constants"],"mappings":"AAMY,MAACA,IAA2B,KAE3BC,IAAkB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAA2B;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEeC,IAAA;AAAA,EACb;AAAA,EACA,iBAAAJ;AAAA,EACA,qBAAAC;AAAA,EACA,0BAAAE;AACF;"}
+{"version":3,"file":"skeleton-constants.js","sources":["../../../components/skeleton/skeleton_constants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"names":["SKELETON_RIPPLE_DURATION","SKELETON_SHAPES","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","SKELETON_HEADING_HEIGHTS","skeleton_constants"],"mappings":"AAMY,MAACA,IAA2B,KAE3BC,IAAkB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAA2B;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEAC,IAAe;AAAA,EACb;AAAA,EACA,iBAAAJ;AAAA,EACA,qBAAAC;AAAA,EACA,0BAAAE;AACF;"}

package/dist/vue3/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,CAAG,EACzB,KAAM,qBAEN,WAAY,CACV,gBAAAC,EAAe,QACf,oBAAAC,EAAmB,OACpB,EAED,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,CAChE,EAMD,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAMD,WAAY,CACV,KAAM,OACN,QAAS,KAAO,CAAE,KAAM,EAAG,YAAa,EAAG,EAC5C,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,EACV,EAMD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAUD,OAAQ,CACN,KAAM,OACN,QAAS,CACV,EAKD,WAAY,CACV,KAAM,OACN,QAAS,EACV,EAKD,aAAc,CACZ,KAAM,OACN,QAAS,EACV,CACF,CACH,EApGSE,EAAA,CAAA,MAAM,2CAA2C,6IAnBxDC,EA2BM,mBAAA,MAAA,CA1BJ,UAAQ,qBACP,MAHLC,EAAAA,eAAA,yBAG4F,+BAAAC,EAAA,WAAW,OAAI,GAAuBA,EAAY,iBAQ1IC,EAAAA,YAQEC,EAAA,CAPA,MAAM,8BACL,KAAMF,EAAS,UACf,MAAOA,EAAK,MACZ,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM,OACd,gBAAeA,EAAU,6FAE5BG,EAAA,mBAOM,MAPNN,EAOM,CANJI,EAAAA,YAKEG,EALFC,aACUL,EAAU,WAAA,CACjB,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM"}
+{"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"}

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

@@ -1,7 +1,7 @@
 import { SKELETON_SHAPES as i } from "./skeleton-constants.js";
 import l from "./skeleton-shape.js";
 import r from "./skeleton-paragraph.js";
-import { resolveComponent as a, openBlock as m, createElementBlock as c, normalizeClass as d, createVNode as n, createElementVNode as f, mergeProps as p } from "vue";
+import { resolveComponent as a, createElementBlock as m, openBlock as c, normalizeClass as d, createVNode as n, createElementVNode as f, mergeProps as p } from "vue";
 import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const _ = {
   compatConfig: { MODE: 3 },
@@ -81,7 +81,7 @@ const _ = {
 }, h = { class: "d-skeleton-list-item__paragraph-container" };
 function k(t, g, e, S, y, D) {
   const o = a("dt-skeleton-shape"), s = a("dt-skeleton-paragraph");
-  return m(), c("div", {
+  return c(), m("div", {
     "data-qa": "skeleton-list-item",
     class: d([
       "d-skeleton-list-item",

package/dist/vue3/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,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,iBAAAC;AAAA,IACA,qBAAAC;AAAA,EACD;AAAA,EAED,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,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AACH,GApGSE,IAAA,EAAA,OAAM,4CAA2C;;;cAnBxDC,EA2BM,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAHLC,EAAA;AAAA;;QAG4F,gCAAAC,EAAA,WAAW,SAAI;AAAA;MAAuBA,EAAY;AAAA;;IAQ1IC,EAQEC,GAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAMF,EAAS;AAAA,MACf,OAAOA,EAAK;AAAA,MACZ,sBAAoBA,EAAiB;AAAA,MACrC,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA,MACd,iBAAeA,EAAU;AAAA;IAE5BG,EAOM,OAPNN,GAOM;AAAA,MANJI,EAKEG,GALFC,EACUL,EAAU,YAAA;AAAA,QACjB,sBAAoBA,EAAiB;AAAA,QACrC,SAASA,EAAO;AAAA,QAChB,QAAQA,EAAM;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,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;;;;;"}

package/dist/vue3/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,CAAG,EACzB,KAAM,sBACN,WAAY,CACV,eAAAC,EAAc,OACf,EAED,MAAO,CAIL,KAAM,CACJ,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,EACT,UAAAH,CACD,EAMD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,GACT,UAAAA,CACD,EAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAAA,CACD,EAKD,MAAO,CACL,KAAM,CAAC,OAAQ,KAAK,EACpB,QAAS,IACV,EAMD,YAAa,CACX,KAAM,QACN,QAAS,EACV,EAUD,OAAQ,CACN,KAAM,OACN,QAAS,CACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,EACV,EAKD,aAAc,CACZ,KAAM,OACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,OACN,QAAS,EACV,CACF,EAED,SAAU,CACR,aAAe,CACb,OAAO,OAAO,KAAK,IAAI,CACxB,CACF,EAED,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,OAAM,GAAMA,EAAMD,EAAI,EAAIA,CAAG,GACxD,EAED,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,wBAGVC,GAAkB,CAACC,EACdD,EAGLA,GAAkBC,GAAgBC,EAC7BA,EAGFC,EAAY,MAAQ,MAC5B,CACF,CACH,8FA9JEC,EAkBM,mBAAA,MAAA,CAjBH,MAFLC,EAAAA,eAAA,wBAEkDC,EAAY,eAI1D,aAAA,GACA,UAAQ,wBAERC,YAAA,EAAA,EAAAH,EAAAA,mBASEI,EAlBN,SAAA,KAAAC,EAAAA,WAUoBC,EAAW,YAAlBX,kBADTY,EASE,YAAAC,EAAA,CAPC,IAAKb,EACN,UAAQ,yBACP,gBAAeO,EAAQ,SACvB,QAASA,EAAO,QAChB,OAAQA,EAAM,OACd,qBAAoBA,EAAiB,kBACrC,MAAOI,EAAmB,oBAACX,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","_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"}

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

@@ -1,5 +1,5 @@
 import u from "./skeleton-text.js";
-import { resolveComponent as c, openBlock as r, createElementBlock as m, normalizeClass as h, Fragment as f, renderList as p, createBlock as g } from "vue";
+import { resolveComponent as c, createElementBlock as m, openBlock as r, normalizeClass as h, Fragment as f, renderList as p, createBlock as g } from "vue";
 import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const o = (e) => e !== "" && !Number.isNaN(Number(e)), w = {
   compatConfig: { MODE: 3 },

package/dist/vue3/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,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAH;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAAA;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,KAAK;AAAA,MACpB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,OAAO,KAAK,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAED,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,OAAM,KAAMA,IAAMD,EAAI,IAAIA,CAAG;AAAA,IACxD;AAAA,IAED,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,0BAGVC,KAAkB,CAACC,IACdD,IAGLA,KAAkBC,KAAgBC,IAC7BA,IAGFC,IAAY,QAAQ;AAAA,IAC5B;AAAA,EACF;AACH;;;cA9JEC,EAkBM,OAAA;AAAA,IAjBH,OAFLC,EAAA;AAAA;MAEkDC,EAAY;AAAA;IAI1D,cAAA;AAAA,IACA,WAAQ;AAAA;KAERC,EAAA,EAAA,GAAAH,EASEI,GAlBN,MAAAC,EAUoBC,EAAW,aAV/B,CAUaX,YADTY,EASEC,GAAA;AAAA,MAPC,KAAKb;AAAA,MACN,WAAQ;AAAA,MACP,iBAAeO,EAAQ;AAAA,MACvB,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA,MACd,sBAAoBA,EAAiB;AAAA,MACrC,OAAOI,EAAmB,oBAACX,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","_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;;;;"}

package/dist/vue3/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,CAAG,EACzB,KAAM,kBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,CAChE,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,IACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,EACV,EAMD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAUD,OAAQ,CACN,KAAM,OACN,QAAS,CACV,EAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,gBAAAC,EAAe,gBAElB,EAED,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,EAEjB,CACF,CACH,+CAzGEE,EAYE,mBAAA,MAAA,CAXA,IAAI,WACJ,UAAQ,iBACP,MAJLC,EAAAA,eAAA,0BAIoDC,EAAA,gBAAgBC,EAAK,KAAA,qCAAsDA,EAAO,SAAiBA,EAAY,eAQ9J,MAZLC,EAAAA,eAYYC,EAAW,WAAA"}
+{"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"}

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

@@ -1,6 +1,6 @@
 import s from "../../common/mixins/skeleton.js";
-import { SKELETON_SHAPES as a, SKELETON_SHAPE_SIZES as i } from "./skeleton-constants.js";
-import { openBlock as l, createElementBlock as r, normalizeClass as m, normalizeStyle as c } from "vue";
+import { SKELETON_SHAPE_SIZES as i, SKELETON_SHAPES as a } from "./skeleton-constants.js";
+import { createElementBlock as l, openBlock as r, normalizeStyle as m, normalizeClass as c } from "vue";
 import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const d = {
   compatConfig: { MODE: 3 },
@@ -78,10 +78,10 @@ const d = {
   }
 };
 function S(e, f, t, h, n, o) {
-  return l(), r("div", {
+  return r(), l("div", {
     ref: "skeleton",
     "data-qa": "skeleton-shape",
-    class: m([
+    class: c([
       "d-skeleton-placeholder",
       n.SKELETON_SHAPES[t.shape],
       {
@@ -89,7 +89,7 @@ function S(e, f, t, h, n, o) {
       },
       t.contentClass
     ]),
-    style: c(o.shapeStyles)
+    style: m(o.shapeStyles)
   }, null, 6);
 }
 const k = /* @__PURE__ */ p(d, [["render", S]]);

package/dist/vue3/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,EAAG;AAAA,EACzB,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,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,iBAAAC;AAAA;EAEH;AAAA,EAED,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;IAEjB;AAAA,EACF;AACH;;cAzGEE,EAYE,OAAA;AAAA,IAXA,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAIoDC,EAAA,gBAAgBC,EAAK,KAAA;AAAA;2CAAsDA,EAAO;AAAA;MAAiBA,EAAY;AAAA;IAQ9J,OAZLC,EAYYC,EAAW,WAAA;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","_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;;;"}

package/dist/vue3/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,CAAG,EACzB,KAAM,iBAEN,OAAQ,CAACC,EAAAA,OAAiB,EAE1B,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAWC,GAAQC,sBAAoB,SAASD,CAAI,CACrD,EAMD,cAAe,CACb,KAAM,OACN,QAAS,KACT,UAAWE,GAAiB,OAAO,KAAKC,EAAAA,wBAAwB,EAAE,SAASD,CAAa,CACzF,EAKD,MAAO,CACL,KAAM,OACN,QAAS,MACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,EACV,EAMD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAUD,OAAQ,CACN,KAAM,OACN,QAAS,CACV,EAKD,aAAc,CACZ,KAAM,OACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,0BACLC,EAAwB,yBAE3B,CACH,iCAvHUC,EAAI,OAAA,sBADZC,EAgBE,mBAAA,MAAA,CAjBJ,IAAA,EAGI,IAAI,WACJ,UAAQ,qBACP,MALLC,EAAAA,eAAA,+EAK0HF,EAAO,SAAiBA,EAAY,eAQzJ,MAbLG,EAAAA,eAAA,OAaoBH,EAAK,SAAWI,EAAa,0BAMlCJ,EAAI,OAAA,yBADjBC,EAiBE,mBAAA,MAAA,CAnCJ,IAAA,EAoBI,IAAI,WACJ,UAAQ,wBACP,MAtBLC,EAAAA,eAAA,CAsBoBG,EAAA,yBAAyBL,EAAa,aAAA,yFAAwHA,EAAO,SAAiBA,EAAY,eASjN,MA/BLG,EAAAA,eAAA,OA+BoBH,EAAK,SAAWI,EAAa,0BA/BjDE,EAAA,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","_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"}

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

@@ -1,6 +1,6 @@
 import { SKELETON_TEXT_TYPES as s, SKELETON_HEADING_HEIGHTS as n } from "./skeleton-constants.js";
 import r from "../../common/mixins/skeleton.js";
-import { openBlock as a, createElementBlock as l, normalizeClass as o, normalizeStyle as d, createCommentVNode as m } from "vue";
+import { createElementBlock as a, createCommentVNode as m, openBlock as l, normalizeStyle as o, normalizeClass as d } from "vue";
 import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const f = {
   compatConfig: { MODE: 3 },
@@ -74,11 +74,11 @@ const f = {
   }
 };
 function y(t, k, e, u, i, h) {
-  return e.type === "body" ? (a(), l("div", {
+  return e.type === "body" ? (l(), a("div", {
     key: 0,
     ref: "skeleton",
     "data-qa": "skeleton-text-body",
-    class: o([
+    class: d([
       "d-skeleton-text",
       "d-skeleton-placeholder",
       {
@@ -86,15 +86,15 @@ function y(t, k, e, u, i, h) {
       },
       e.contentClass
     ]),
-    style: d({
+    style: o({
       width: e.width,
       ...t.skeletonStyle
     })
-  }, null, 6)) : e.type === "heading" ? (a(), l("div", {
+  }, null, 6)) : e.type === "heading" ? (l(), a("div", {
     key: 1,
     ref: "skeleton",
     "data-qa": "skeleton-text-heading",
-    class: o([
+    class: d([
       i.SKELETON_HEADING_HEIGHTS[e.headingHeight],
       "d-skeleton-text--heading",
       "d-skeleton-placeholder",
@@ -103,7 +103,7 @@ function y(t, k, e, u, i, h) {
       },
       e.contentClass
     ]),
-    style: d({
+    style: o({
       width: e.width,
       ...t.skeletonStyle
     })

package/dist/vue3/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,EAAG;AAAA,EACzB,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,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAE,MAAiB,OAAO,KAAKC,CAAwB,EAAE,SAASD,CAAa;AAAA,IACzF;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,0BAAAC;AAAA;EAEH;AACH;;SAvHUC,EAAI,SAAA,eADZC,EAgBE,OAAA;AAAA,IAjBJ,KAAA;AAAA,IAGI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OALLC,EAAA;AAAA;;;2CAK0HF,EAAO;AAAA;MAAiBA,EAAY;AAAA;IAQzJ,OAbLG,EAAA;AAAA,aAaoBH,EAAK;AAAA,SAAWI,EAAa;AAAA;iBAMlCJ,EAAI,SAAA,kBADjBC,EAiBE,OAAA;AAAA,IAnCJ,KAAA;AAAA,IAoBI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAtBLC,EAAA;AAAA,MAsBoBG,EAAA,yBAAyBL,EAAa,aAAA;AAAA;;;2CAAwHA,EAAO;AAAA;MAAiBA,EAAY;AAAA;IASjN,OA/BLG,EAAA;AAAA,aA+BoBH,EAAK;AAAA,SAAWI,EAAa;AAAA;iBA/BjDE,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","_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;;;"}

package/dist/vue3/lib/skeleton/skeleton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./skeleton-shape.cjs"),u=require("./skeleton-list-item.cjs"),m=require("./skeleton-paragraph.cjs"),c=require("./skeleton-text.cjs"),t=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs");require("./skeleton-constants.cjs");const p={compatConfig:{MODE:3},name:"DtSkeleton",components:{DtSkeletonText:c.default,DtSkeletonShape:s.default,DtSkeletonListItem:u.default,DtSkeletonParagraph:m.default},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:""},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:"validator"}},methods:{validator(){const n=Object.entries(this.validationOptions).filter(([a,e])=>e);if(n.length>=2){const a=`Use only one of ${n.map(([e])=>e).join(" | ")} options at the same time`;console.error(a)}}}},d=["aria-label"];function _(n,a,e,h,O,g){const o=t.resolveComponent("dt-skeleton-list-item"),i=t.resolveComponent("dt-skeleton-shape"),l=t.resolveComponent("dt-skeleton-paragraph"),r=t.resolveComponent("dt-skeleton-text");return t.openBlock(),t.createElementBlock("div",{"aria-busy":"true",role:"status","aria-label":e.ariaLabel},[e.listItemOption?(t.openBlock(),t.createBlock(o,t.mergeProps({key:0},e.listItemOption===!0?{}:e.listItemOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):e.shapeOption?(t.openBlock(),t.createBlock(i,t.mergeProps({key:1},e.shapeOption===!0?{}:e.shapeOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):e.paragraphOption?(t.openBlock(),t.createBlock(l,t.mergeProps({key:2},e.paragraphOption===!0?{}:e.paragraphOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):(t.openBlock(),t.createBlock(r,t.mergeProps({key:3},e.textOption||{},{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"]))],8,d)}const k=f._(p,[["render",_]]);exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./skeleton-shape.cjs"),u=require("./skeleton-list-item.cjs"),m=require("./skeleton-paragraph.cjs"),c=require("./skeleton-text.cjs"),t=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs");require("./skeleton-constants.cjs");const p={compatConfig:{MODE:3},name:"DtSkeleton",components:{DtSkeletonText:c.default,DtSkeletonShape:s.default,DtSkeletonListItem:u.default,DtSkeletonParagraph:m.default},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:""},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:"validator"}},methods:{validator(){const a=Object.entries(this.validationOptions).filter(([,n])=>n);if(a.length>=2){const n=`Use only one of ${a.map(([e])=>e).join(" | ")} options at the same time`;console.error(n)}}}},d=["aria-label"];function _(a,n,e,h,O,g){const o=t.resolveComponent("dt-skeleton-list-item"),i=t.resolveComponent("dt-skeleton-shape"),l=t.resolveComponent("dt-skeleton-paragraph"),r=t.resolveComponent("dt-skeleton-text");return t.openBlock(),t.createElementBlock("div",{"aria-busy":"true",role:"status","aria-label":e.ariaLabel},[e.listItemOption?(t.openBlock(),t.createBlock(o,t.mergeProps({key:0},e.listItemOption===!0?{}:e.listItemOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):e.shapeOption?(t.openBlock(),t.createBlock(i,t.mergeProps({key:1},e.shapeOption===!0?{}:e.shapeOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):e.paragraphOption?(t.openBlock(),t.createBlock(l,t.mergeProps({key:2},e.paragraphOption===!0?{}:e.paragraphOption,{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"])):(t.openBlock(),t.createBlock(r,t.mergeProps({key:3},e.textOption||{},{"animation-duration":e.animationDuration,animate:e.animate,offset:e.offset}),null,16,["animation-duration","animate","offset"]))],8,d)}const k=f._(p,[["render",_]]);exports.default=k;
 //# sourceMappingURL=skeleton.cjs.map

package/dist/vue3/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,CAAG,EACzB,KAAM,aACN,WAAY,CACV,eAAAC,EAAc,QACd,gBAAAC,EAAe,QACf,mBAAAC,EAAkB,QAClB,oBAAAC,EAAmB,OACpB,EAED,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,IACV,EAMD,eAAgB,CACd,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,IACV,EAMD,WAAY,CACV,KAAM,OACN,QAAS,IACV,EAMD,YAAa,CACX,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,IACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,QAAS,EACV,EAMD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAUD,OAAQ,CACN,KAAM,OACN,QAAS,CACV,CACF,EAED,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YAErB,CACF,EAED,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,WACV,CACF,EAED,QAAS,CACP,WAAa,CACX,MAAMC,EAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAACC,EAAGC,CAAM,IAAMA,CAAM,EACjC,GAAIF,EAAS,QAAU,EAAG,CACxB,MAAMG,EAAe,mBAAmBH,EAAS,IAAI,CAAC,CAACI,CAAG,IAAMA,CAAG,EAAE,KAAK,KAAK,CAAC,4BAChF,QAAQ,MAAMD,CAAY,CAC5B,CACD,CACF,CACH,EAnKAE,EAAA,CAAA,YAAA,oOACEC,EAiCM,mBAAA,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAYC,EAAS,YAGdA,EAAc,gBADtBC,EAAAA,UAAA,EAAAC,EAAA,YAMEC,EANFC,EAME,WAAA,CAZN,IAAA,GAQcJ,EAAA,uBAA+BA,EAAc,eAAA,CACpD,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM,6DAGJA,EAAW,aADxBC,EAAAA,UAAA,EAAAC,EAAA,YAMEG,EANFD,EAME,WAAA,CAnBN,IAAA,GAecJ,EAAA,oBAA4BA,EAAW,YAAA,CAC9C,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM,6DAGJA,EAAe,iBAD5BC,EAAAA,UAAA,EAAAC,EAAA,YAMEI,EANFF,EAME,WAAA,CA1BN,IAAA,GAsBcJ,EAAA,wBAAgCA,EAAe,gBAAA,CACtD,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM,8DAEjBC,EAAAA,YAAAC,EAAAA,YAMEK,EANFH,aAME,CAjCN,IAAA,GA6BcJ,EAAU,YAAA,GAAA,CACjB,qBAAoBA,EAAiB,kBACrC,QAASA,EAAO,QAChB,OAAQA,EAAM,4DAhCrB,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","_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"}

package/dist/vue3/lib/skeleton/skeleton.js

@@ -2,7 +2,7 @@ import u from "./skeleton-shape.js";
 import p from "./skeleton-list-item.js";
 import d from "./skeleton-paragraph.js";
 import c from "./skeleton-text.js";
-import { resolveComponent as a, openBlock as e, createElementBlock as h, createBlock as n, mergeProps as o } from "vue";
+import { resolveComponent as n, createElementBlock as h, openBlock as e, createBlock as o, mergeProps as i } from "vue";
 import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import "./skeleton-constants.js";
 const _ = {
@@ -100,34 +100,34 @@ const _ = {
   },
   methods: {
     validator() {
-      const i = Object.entries(this.validationOptions).filter(([l, t]) => t);
-      if (i.length >= 2) {
-        const l = `Use only one of ${i.map(([t]) => t).join(" | ")} options at the same time`;
-        console.error(l);
+      const l = Object.entries(this.validationOptions).filter(([, a]) => a);
+      if (l.length >= 2) {
+        const a = `Use only one of ${l.map(([t]) => t).join(" | ")} options at the same time`;
+        console.error(a);
       }
     }
   }
 }, k = ["aria-label"];
-function g(i, l, t, y, b, D) {
-  const m = a("dt-skeleton-list-item"), r = a("dt-skeleton-shape"), s = a("dt-skeleton-paragraph"), f = a("dt-skeleton-text");
+function g(l, a, t, y, b, D) {
+  const m = n("dt-skeleton-list-item"), r = n("dt-skeleton-shape"), s = n("dt-skeleton-paragraph"), f = n("dt-skeleton-text");
   return e(), h("div", {
     "aria-busy": "true",
     role: "status",
     "aria-label": t.ariaLabel
   }, [
-    t.listItemOption ? (e(), n(m, o({ key: 0 }, t.listItemOption === !0 ? {} : t.listItemOption, {
+    t.listItemOption ? (e(), o(m, i({ key: 0 }, t.listItemOption === !0 ? {} : t.listItemOption, {
       "animation-duration": t.animationDuration,
       animate: t.animate,
       offset: t.offset
-    }), null, 16, ["animation-duration", "animate", "offset"])) : t.shapeOption ? (e(), n(r, o({ key: 1 }, t.shapeOption === !0 ? {} : t.shapeOption, {
+    }), null, 16, ["animation-duration", "animate", "offset"])) : t.shapeOption ? (e(), o(r, i({ key: 1 }, t.shapeOption === !0 ? {} : t.shapeOption, {
       "animation-duration": t.animationDuration,
       animate: t.animate,
       offset: t.offset
-    }), null, 16, ["animation-duration", "animate", "offset"])) : t.paragraphOption ? (e(), n(s, o({ key: 2 }, t.paragraphOption === !0 ? {} : t.paragraphOption, {
+    }), null, 16, ["animation-duration", "animate", "offset"])) : t.paragraphOption ? (e(), o(s, i({ key: 2 }, t.paragraphOption === !0 ? {} : t.paragraphOption, {
       "animation-duration": t.animationDuration,
       animate: t.animate,
       offset: t.offset
-    }), null, 16, ["animation-duration", "animate", "offset"])) : (e(), n(f, o({ key: 3 }, t.textOption || {}, {
+    }), null, 16, ["animation-duration", "animate", "offset"])) : (e(), o(f, i({ key: 3 }, t.textOption || {}, {
       "animation-duration": t.animationDuration,
       animate: t.animate,
       offset: t.offset

package/dist/vue3/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,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,iBAAiB;AAAA,MACf,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO;AAAA,MACtB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAO;AAAA,QACL,iBAAiB,KAAK;AAAA,QACtB,gBAAgB,KAAK;AAAA,QACrB,YAAY,KAAK;AAAA,QACjB,aAAa,KAAK;AAAA;IAErB;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,YAAa;AACX,YAAMC,IAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAACC,GAAGC,CAAM,MAAMA,CAAM;AACjC,UAAIF,EAAS,UAAU,GAAG;AACxB,cAAMG,IAAe,mBAAmBH,EAAS,IAAI,CAAC,CAACI,CAAG,MAAMA,CAAG,EAAE,KAAK,KAAK,CAAC;AAChF,gBAAQ,MAAMD,CAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACF;AACH,GAnKAE,IAAA,CAAA,YAAA;;;cACEC,EAiCM,OAAA;AAAA,IAhCJ,aAAU;AAAA,IACV,MAAK;AAAA,IACJ,cAAYC,EAAS;AAAA;IAGdA,EAAc,kBADtBC,EAAA,GAAAC,EAMEC,GANFC,EAME,EAZN,KAAA,KAQcJ,EAAA,6BAA+BA,EAAc,gBAAA;AAAA,MACpD,sBAAoBA,EAAiB;AAAA,MACrC,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA,kEAGJA,EAAW,eADxBC,EAAA,GAAAC,EAMEG,GANFD,EAME,EAnBN,KAAA,KAecJ,EAAA,0BAA4BA,EAAW,aAAA;AAAA,MAC9C,sBAAoBA,EAAiB;AAAA,MACrC,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA,kEAGJA,EAAe,mBAD5BC,EAAA,GAAAC,EAMEI,GANFF,EAME,EA1BN,KAAA,KAsBcJ,EAAA,8BAAgCA,EAAe,iBAAA;AAAA,MACtD,sBAAoBA,EAAiB;AAAA,MACrC,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA,mEAEjBC,KAAAC,EAMEK,GANFH,EAME,EAjCN,KAAA,KA6BcJ,EAAU,cAAA,IAAA;AAAA,MACjB,sBAAoBA,EAAiB;AAAA,MACrC,SAASA,EAAO;AAAA,MAChB,QAAQA,EAAM;AAAA;EAhCrB,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","_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;;;"}

package/dist/vue3/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=\"tooltipText\"\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</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx"],"mappings":"2QA6BKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,mBAEN,WAAY,CACV,SAAAC,EAAQ,OACT,EAED,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAKD,aAAc,CACZ,KAAM,OACN,QAAS,MACV,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,QAAS,CACP,KAAM,QACN,QAAS,EACV,EAKD,YAAa,CACX,KAAM,OACN,QAAS,EACV,EAMD,iBAAkB,CAChB,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,WAAY,CACV,KAAM,OACN,QAAS,SACV,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,SACV,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,IACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,kBAAAC,EAAiB,kBAEpB,CACH,4IApIEC,EAAAA,YAsBYC,EAAA,CApBV,UAAQ,wBACP,OAAQC,EAAM,OACd,aAAYA,EAAS,UACrB,qBAAoBA,EAAgB,iBACpC,MAPLC,2DAOsDD,EAAI,IAAA,EAAA,EACrD,SAAUA,EAAQ,SAClB,gBAAeA,EAAY,aAC3B,WAAYA,EAAU,WACtB,KAAMA,EAAI,KACV,cAAaA,EAAU,WACvB,QAASA,EAAO,QAChB,KAAMA,EAAI,OAEA,eACT,IAGE,CAHFE,aAGEC,EAAA,OAAA,OAAA,CADC,KAAMC,EAAiB,kBAACJ,EAAI,IAAA,MAnBrC,QAAAK,EAAA,QAsBI,IAAuB,CAAvBH,aAAuBC,EAAA,OAAA,SAAA,IAtB3B,EAAA,8IAEkBH,EAAW,WAAA"}
+{"version":3,"file":"split-button-alpha.cjs","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\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</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx"],"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,CACF,4IApIEC,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,8IAEkBH,EAAA,WAAW"}

package/dist/vue3/lib/split-button/split-button-alpha.js

@@ -1,4 +1,4 @@
-import { resolveComponent as s, resolveDirective as d, withDirectives as c, openBlock as r, createBlock as f, normalizeClass as u, withCtx as a, renderSlot as i } from "vue";
+import { resolveComponent as s, resolveDirective as d, withDirectives as c, createBlock as r, openBlock as f, normalizeClass as u, withCtx as a, renderSlot as i } from "vue";
 import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import _ from "../button/button.js";
 import { BUTTON_ICON_SIZES as m } from "../button/button-constants.js";
@@ -96,7 +96,7 @@ const b = {
 };
 function S(e, v, t, y, l, g) {
   const o = s("dt-button"), n = d("dt-tooltip");
-  return c((r(), f(o, {
+  return c((f(), r(o, {
     "data-qa": "dt-split-button-alpha",
     active: t.active,
     "aria-label": t.ariaLabel,

package/dist/vue3/lib/split-button/split-button-alpha.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\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</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx"],"mappings":";;;;AA6BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,mBAAAC;AAAA;EAEH;AACH;;;iBApIEC,EAsBYC,GAAA;AAAA,IApBV,WAAQ;AAAA,IACP,QAAQC,EAAM;AAAA,IACd,cAAYA,EAAS;AAAA,IACrB,sBAAoBA,EAAgB;AAAA,IACpC,OAPLC,4CAOsDD,EAAI,IAAA,EAAA;AAAA,IACrD,UAAUA,EAAQ;AAAA,IAClB,iBAAeA,EAAY;AAAA,IAC3B,YAAYA,EAAU;AAAA,IACtB,MAAMA,EAAI;AAAA,IACV,eAAaA,EAAU;AAAA,IACvB,SAASA,EAAO;AAAA,IAChB,MAAMA,EAAI;AAAA;IAEA,QACT,MAGE;AAAA,MAHFE,EAGEC,EAAA,QAAA,QAAA;AAAA,QADC,MAAMC,EAAiB,kBAACJ,EAAI,IAAA;AAAA;;IAnBrC,SAAAK,EAsBI,MAAuB;AAAA,MAAvBH,EAAuBC,EAAA,QAAA,SAAA;AAAA;IAtB3B,GAAA;AAAA;QAEkBH,EAAW,WAAA;AAAA;;;"}
+{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\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</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx"],"mappings":";;;;AA6BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA;;;;IAMX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mBAAAC;AAAA;EAEJ;AACF;;;iBApIEC,EAsBYC,GAAA;AAAA,IApBV,WAAQ;AAAA,IACP,QAAQC,EAAA;AAAA,IACR,cAAYA,EAAA;AAAA,IACZ,sBAAoBA,EAAA;AAAA,IACpB,OAPLC,4CAOsDD,EAAA,IAAI,EAAA;AAAA,IACrD,UAAUA,EAAA;AAAA,IACV,iBAAeA,EAAA;AAAA,IACf,YAAYA,EAAA;AAAA,IACZ,MAAMA,EAAA;AAAA,IACN,eAAaA,EAAA;AAAA,IACb,SAASA,EAAA;AAAA,IACT,MAAMA,EAAA;AAAA;IAEI,QACT,MAGE;AAAA,MAHFE,EAGEC,EAAA,QAAA,QAAA;AAAA,QADC,MAAMC,EAAA,kBAAkBJ,EAAA,IAAI;AAAA;;IAnBrC,SAAAK,EAsBI,MAAuB;AAAA,MAAvBH,EAAuBC,EAAA,QAAA,SAAA;AAAA;IAtB3B,GAAA;AAAA;QAEkBH,EAAA,WAAW;AAAA;;;"}

package/dist/vue3/lib/split-button/split-button-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-constants.cjs","sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"names":["SPLIT_BUTTON_ICON_SIZES","split_button_constants"],"mappings":"4GAAY,MAACA,EAA0B,CACrC,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEeC,EAAA,CACb,wBAAAD,CACF"}
+{"version":3,"file":"split-button-constants.cjs","sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"names":["SPLIT_BUTTON_ICON_SIZES","split_button_constants"],"mappings":"4GAAY,MAACA,EAA0B,CACrC,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEAC,EAAe,CACb,wBAAAD,CACF"}

package/dist/vue3/lib/split-button/split-button-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-constants.js","sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"names":["SPLIT_BUTTON_ICON_SIZES","split_button_constants"],"mappings":"AAAY,MAACA,IAA0B;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEeC,IAAA;AAAA,EACb,yBAAAD;AACF;"}
+{"version":3,"file":"split-button-constants.js","sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"names":["SPLIT_BUTTON_ICON_SIZES","split_button_constants"],"mappings":"AAAY,MAACA,IAA0B;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEAC,IAAe;AAAA,EACb,yBAAAD;AACF;"}