@dialpad/dialtone-vue 3.156.0 → 3.156.2

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-list-item.vue.cjs

@@ -0,0 +1,116 @@
+"use strict";
+const skeleton_constants = require("./skeleton_constants.cjs");
+const skeletonShape = require("./skeleton-shape.vue.cjs");
+const skeletonParagraph = require("./skeleton-paragraph.vue.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape: skeletonShape,
+    DtSkeletonParagraph: skeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(skeleton_constants.SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+const _hoisted_1 = { class: "d-skeleton-list-item__paragraph-container" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_shape = vue.resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = vue.resolveComponent("dt-skeleton-paragraph");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "skeleton-list-item",
+    class: vue.normalizeClass([
+      "d-skeleton-list-item",
+      {
+        "d-skeleton-list-item--single": $props.paragraphs.rows === 1
+      },
+      $props.contentClass
+    ])
+  }, [
+    vue.createVNode(_component_dt_skeleton_shape, {
+      class: "d-skeleton-list-item__shape",
+      size: $props.shapeSize,
+      shape: $props.shape,
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset,
+      "content-class": $props.shapeClass
+    }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createVNode(_component_dt_skeleton_paragraph, vue.mergeProps($props.paragraphs, {
+        "animation-duration": $props.animationDuration,
+        animate: $props.animate,
+        offset: $props.offset
+      }), null, 16, ["animation-duration", "animate", "offset"])
+    ])
+  ], 2);
+}
+const DtSkeletonListItem = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtSkeletonListItem;
+//# sourceMappingURL=skeleton-list-item.vue.cjs.map

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-list-item.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-list-item.vue.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  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":["DtSkeletonShape","DtSkeletonParagraph","SKELETON_SHAPES","_createElementBlock","_normalizeClass","_createVNode","_createElementVNode","_mergeProps"],"mappings":";;;;;;AAoCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,iBAAAA;AAAAA,IACA,qBAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,WAAS,OAAO,KAAKC,mBAAAA,eAAe,EAAE,SAAS,KAAK;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,KAAG;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;AAnGS,MAAA,aAAA,EAAA,OAAM,4CAA2C;;;;0BAnBxDC,IA2BM,mBAAA,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAHLC,IAAAA,eAAA;AAAA;;QAG4F,gCAAA,OAAA,WAAW,SAAI;AAAA;MAAuB,OAAY;AAAA;;IAQ1IC,IAAAA,YAQE,8BAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAM,OAAS;AAAA,MACf,OAAO,OAAK;AAAA,MACZ,sBAAoB,OAAiB;AAAA,MACrC,SAAS,OAAO;AAAA,MAChB,QAAQ,OAAM;AAAA,MACd,iBAAe,OAAU;AAAA;IAE5BC,IAAA,mBAOM,OAPN,YAOM;AAAA,MANJD,IAAAA,YAKE,kCALFE,eACU,OAAU,YAAA;AAAA,QACjB,sBAAoB,OAAiB;AAAA,QACrC,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA;;;;;;"}

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-list-item.vue.js

@@ -0,0 +1,117 @@
+import { SKELETON_SHAPES } from "./skeleton_constants.js";
+import DtSkeletonShape from "./skeleton-shape.vue.js";
+import DtSkeletonParagraph from "./skeleton-paragraph.vue.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, mergeProps } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape,
+    DtSkeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+const _hoisted_1 = { class: "d-skeleton-list-item__paragraph-container" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_shape = resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
+  return openBlock(), createElementBlock("div", {
+    "data-qa": "skeleton-list-item",
+    class: normalizeClass([
+      "d-skeleton-list-item",
+      {
+        "d-skeleton-list-item--single": $props.paragraphs.rows === 1
+      },
+      $props.contentClass
+    ])
+  }, [
+    createVNode(_component_dt_skeleton_shape, {
+      class: "d-skeleton-list-item__shape",
+      size: $props.shapeSize,
+      shape: $props.shape,
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset,
+      "content-class": $props.shapeClass
+    }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
+    createElementVNode("div", _hoisted_1, [
+      createVNode(_component_dt_skeleton_paragraph, mergeProps($props.paragraphs, {
+        "animation-duration": $props.animationDuration,
+        animate: $props.animate,
+        offset: $props.offset
+      }), null, 16, ["animation-duration", "animate", "offset"])
+    ])
+  ], 2);
+}
+const DtSkeletonListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtSkeletonListItem as default
+};
+//# sourceMappingURL=skeleton-list-item.vue.js.map

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-list-item.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-list-item.vue.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  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":["_createElementBlock","_normalizeClass","_createVNode","_createElementVNode","_mergeProps"],"mappings":";;;;;AAoCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,WAAS,OAAO,KAAK,eAAe,EAAE,SAAS,KAAK;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,KAAG;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;AAnGS,MAAA,aAAA,EAAA,OAAM,4CAA2C;;;;sBAnBxDA,mBA2BM,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAHLC,eAAA;AAAA;;QAG4F,gCAAA,OAAA,WAAW,SAAI;AAAA;MAAuB,OAAY;AAAA;;IAQ1IC,YAQE,8BAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAM,OAAS;AAAA,MACf,OAAO,OAAK;AAAA,MACZ,sBAAoB,OAAiB;AAAA,MACrC,SAAS,OAAO;AAAA,MAChB,QAAQ,OAAM;AAAA,MACd,iBAAe,OAAU;AAAA;IAE5BC,mBAOM,OAPN,YAOM;AAAA,MANJD,YAKE,kCALFE,WACU,OAAU,YAAA;AAAA,QACjB,sBAAoB,OAAiB;AAAA,QACrC,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA;;;;;"}

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-paragraph.vue.cjs

@@ -0,0 +1,147 @@
+"use strict";
+const skeletonText = require("./skeleton-text.vue.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const validator = (number) => number !== "" && !Number.isNaN(Number(number));
+const _sfc_main = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText: skeletonText
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const min = Math.min(this.minWidth, this.maxWidth);
+      const max = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
+    },
+    getSizeParagraphRow(row) {
+      const paragraphWidth = this.width;
+      const isArrayWidth = Array.isArray(paragraphWidth);
+      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
+      const isLastRow = row === this.rows;
+      if (this.randomWidth) {
+        return this.randomWidthPercentage();
+      }
+      if (paragraphWidth && !isArrayWidth) {
+        return paragraphWidth;
+      }
+      if (paragraphWidth && isArrayWidth && currentWidth) {
+        return currentWidth;
+      }
+      return isLastRow ? "38%" : "100%";
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_text = vue.resolveComponent("dt-skeleton-text");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "d-skeleton-paragraph",
+      $props.contentClass
+    ]),
+    contentClass: "",
+    "data-qa": "skeleton-paragraph"
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.integerRows, (row) => {
+      return vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, {
+        key: row,
+        "data-qa": "skeleton-paragraph-row",
+        "content-class": $props.rowClass,
+        animate: $props.animate,
+        offset: $props.offset,
+        "animation-duration": $props.animationDuration,
+        width: $options.getSizeParagraphRow(row)
+      }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]);
+    }), 128))
+  ], 2);
+}
+const DtSkeletonParagraph = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtSkeletonParagraph;
+//# sourceMappingURL=skeleton-paragraph.vue.cjs.map

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-paragraph.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-paragraph.vue.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  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":["DtSkeletonText","_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;AAyBA,MAAM,YAAY,YAAU,WAAW,MAAM,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC;AACzE,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;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;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;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,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,aAAO,GAAG,KAAK,MAAM,KAAK,OAAM,KAAM,MAAM,IAAI,IAAI,GAAG;AAAA,IACxD;AAAA,IAED,oBAAqB,KAAK;AACxB,YAAM,iBAAiB,KAAK;AAC5B,YAAM,eAAe,MAAM,QAAQ,cAAc;AACjD,YAAM,eAAe,iDAAiB,MAAM;AAC5C,YAAM,YAAY,QAAQ,KAAK;AAE/B,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK;MACd;AAEA,UAAI,kBAAkB,CAAC,cAAc;AACnC,eAAO;AAAA,MACT;AAEA,UAAI,kBAAkB,gBAAgB,cAAc;AAClD,eAAO;AAAA,MACT;AAEA,aAAO,YAAY,QAAQ;AAAA,IAC5B;AAAA,EACF;AACH;;;0BA7JEC,IAkBM,mBAAA,OAAA;AAAA,IAjBH,OAFLC,IAAAA,eAAA;AAAA;MAEkD,OAAY;AAAA;IAI1D,cAAA;AAAA,IACA,WAAQ;AAAA;KAERC,cAAA,IAAA,GAAAF,IAAAA,mBASEG,IAlBN,UAAA,MAAAC,IAAAA,WAUoB,SAAW,aAV/B,CAUa,QAAG;8BADZC,IASE,YAAA,6BAAA;AAAA,QAPC,KAAK;AAAA,QACN,WAAQ;AAAA,QACP,iBAAe,OAAQ;AAAA,QACvB,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA,QACd,sBAAoB,OAAiB;AAAA,QACrC,OAAO,SAAmB,oBAAC,GAAG;AAAA;;;;;;"}

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-paragraph.vue.js

@@ -0,0 +1,148 @@
+import DtSkeletonText from "./skeleton-text.vue.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const validator = (number) => number !== "" && !Number.isNaN(Number(number));
+const _sfc_main = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const min = Math.min(this.minWidth, this.maxWidth);
+      const max = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
+    },
+    getSizeParagraphRow(row) {
+      const paragraphWidth = this.width;
+      const isArrayWidth = Array.isArray(paragraphWidth);
+      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
+      const isLastRow = row === this.rows;
+      if (this.randomWidth) {
+        return this.randomWidthPercentage();
+      }
+      if (paragraphWidth && !isArrayWidth) {
+        return paragraphWidth;
+      }
+      if (paragraphWidth && isArrayWidth && currentWidth) {
+        return currentWidth;
+      }
+      return isLastRow ? "38%" : "100%";
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "d-skeleton-paragraph",
+      $props.contentClass
+    ]),
+    contentClass: "",
+    "data-qa": "skeleton-paragraph"
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.integerRows, (row) => {
+      return openBlock(), createBlock(_component_dt_skeleton_text, {
+        key: row,
+        "data-qa": "skeleton-paragraph-row",
+        "content-class": $props.rowClass,
+        animate: $props.animate,
+        offset: $props.offset,
+        "animation-duration": $props.animationDuration,
+        width: $options.getSizeParagraphRow(row)
+      }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]);
+    }), 128))
+  ], 2);
+}
+const DtSkeletonParagraph = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtSkeletonParagraph as default
+};
+//# sourceMappingURL=skeleton-paragraph.vue.js.map

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-paragraph.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-paragraph.vue.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  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":["_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;AAyBA,MAAM,YAAY,YAAU,WAAW,MAAM,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC;AACzE,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;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;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;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,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,aAAO,GAAG,KAAK,MAAM,KAAK,OAAM,KAAM,MAAM,IAAI,IAAI,GAAG;AAAA,IACxD;AAAA,IAED,oBAAqB,KAAK;AACxB,YAAM,iBAAiB,KAAK;AAC5B,YAAM,eAAe,MAAM,QAAQ,cAAc;AACjD,YAAM,eAAe,iDAAiB,MAAM;AAC5C,YAAM,YAAY,QAAQ,KAAK;AAE/B,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK;MACd;AAEA,UAAI,kBAAkB,CAAC,cAAc;AACnC,eAAO;AAAA,MACT;AAEA,UAAI,kBAAkB,gBAAgB,cAAc;AAClD,eAAO;AAAA,MACT;AAEA,aAAO,YAAY,QAAQ;AAAA,IAC5B;AAAA,EACF;AACH;;;sBA7JEA,mBAkBM,OAAA;AAAA,IAjBH,OAFLC,eAAA;AAAA;MAEkD,OAAY;AAAA;IAI1D,cAAA;AAAA,IACA,WAAQ;AAAA;KAERC,UAAA,IAAA,GAAAF,mBASEG,UAlBN,MAAAC,WAUoB,SAAW,aAV/B,CAUa,QAAG;0BADZC,YASE,6BAAA;AAAA,QAPC,KAAK;AAAA,QACN,WAAQ;AAAA,QACP,iBAAe,OAAQ;AAAA,QACvB,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA,QACd,sBAAoB,OAAiB;AAAA,QACrC,OAAO,SAAmB,oBAAC,GAAG;AAAA;;;;;"}

package/dist/packages/dialtone-vue3/components/skeleton/skeleton-shape.vue.cjs

@@ -0,0 +1,97 @@
+"use strict";
+const skeleton = require("../../common/mixins/skeleton.cjs");
+const skeleton_constants = require("./skeleton_constants.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtSkeletonShape",
+  mixins: [skeleton],
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(skeleton_constants.SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_SHAPES: skeleton_constants.SKELETON_SHAPES
+    };
+  },
+  computed: {
+    shapeStyles() {
+      const size = skeleton_constants.SKELETON_SHAPE_SIZES[this.size] || this.size;
+      return {
+        ...this.skeletonStyle,
+        "min-width": size,
+        "max-width": size,
+        "min-height": size,
+        "max-height": size
+      };
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "skeleton",
+    "data-qa": "skeleton-shape",
+    class: vue.normalizeClass([
+      "skeleton-placeholder",
+      $data.SKELETON_SHAPES[$props.shape],
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
+    style: vue.normalizeStyle($options.shapeStyles)
+  }, null, 6);
+}
+const DtSkeletonShape = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtSkeletonShape;
+//# sourceMappingURL=skeleton-shape.vue.cjs.map