@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/skeleton.cjs

@@ -7,7 +7,10 @@ const SKELETON_SHAPES = {
   circle: "d-bar-circle",
   square: "d-bar2"
 };
-const SKELETON_TEXT_TYPES = ["body", "heading"];
+const SKELETON_TEXT_TYPES = [
+  "body",
+  "heading"
+];
 const SKELETON_SHAPE_SIZES = {
   sm: "24px",
   md: "32px",
@@ -25,10 +28,7 @@ const SkeletonAnimation = {
       if (!skeletonText) {
         return this.offset;
       }
-      const {
-        top,
-        height
-      } = skeletonText.getBoundingClientRect();
+      const { top, height } = skeletonText.getBoundingClientRect();
       return top + height / 2;
     },
     skeletonStyle() {
@@ -122,9 +122,14 @@ function _sfc_render$4(_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]),
+    class: vue.normalizeClass([
+      "skeleton-placeholder",
+      $data.SKELETON_SHAPES[$props.shape],
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: vue.normalizeStyle($options.shapeStyles)
   }, null, 6);
 }
@@ -204,9 +209,14 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     ref: "skeleton",
     "data-qa": "skeleton-text-body",
-    class: vue.normalizeClass(["d-skeleton-text", "skeleton-placeholder", {
-      "skeleton-placeholder--animate": $props.animate
-    }, $props.contentClass]),
+    class: vue.normalizeClass([
+      "d-skeleton-text",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: vue.normalizeStyle({
       width: $props.width,
       ..._ctx.skeletonStyle
@@ -215,9 +225,15 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     ref: "skeleton",
     "data-qa": "skeleton-text-heading",
-    class: vue.normalizeClass([$data.SKELETON_HEADING_HEIGHTS[$props.headingHeight], "d-skeleton-text--heading", "skeleton-placeholder", {
-      "skeleton-placeholder--animate": $props.animate
-    }, $props.contentClass]),
+    class: vue.normalizeClass([
+      $data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
+      "d-skeleton-text--heading",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: vue.normalizeStyle({
       width: $props.width,
       ..._ctx.skeletonStyle
@@ -345,20 +361,25 @@ const _sfc_main$2 = {
 function _sfc_render$2(_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]),
+    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);
+  }, [
+    (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._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 const _sfc_main$1 = {
@@ -391,10 +412,7 @@ const _sfc_main$1 = {
      */
     paragraphs: {
       type: Object,
-      default: () => ({
-        rows: 3,
-        randomWidth: true
-      })
+      default: () => ({ rows: 3, randomWidth: true })
     },
     /**
      * Duration time of the animation (ms), set -1 for an infinite animation.
@@ -439,30 +457,37 @@ const _sfc_main$1 = {
     }
   }
 };
-const _hoisted_1$1 = {
-  class: "d-skeleton-list-item__paragraph-container"
-};
+const _hoisted_1$1 = { class: "d-skeleton-list-item__paragraph-container" };
 function _sfc_render$1(_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$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);
+    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$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._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -577,31 +602,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-busy": "true",
     role: "status",
     "aria-label": $props.ariaLabel
-  }, [$props.listItemOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_list_item, vue.mergeProps({
-    key: 0
-  }, $props.listItemOption === true ? {} : $props.listItemOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_shape, vue.mergeProps({
-    key: 1
-  }, $props.shapeOption === true ? {} : $props.shapeOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_paragraph, vue.mergeProps({
-    key: 2
-  }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : (vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, vue.mergeProps({
-    key: 3
-  }, $props.textOption || {}, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"]))], 8, _hoisted_1);
+  }, [
+    $props.listItemOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_list_item, vue.mergeProps({ key: 0 }, $props.listItemOption === true ? {} : $props.listItemOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_shape, vue.mergeProps({ key: 1 }, $props.shapeOption === true ? {} : $props.shapeOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_paragraph, vue.mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : (vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, vue.mergeProps({ key: 3 }, $props.textOption || {}, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"]))
+  ], 8, _hoisted_1);
 }
 const DtSkeleton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtSkeleton = DtSkeleton;

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","sources":["../../components/skeleton/skeleton_constants.js","../../common/mixins/skeleton.js","../../components/skeleton/skeleton-shape.vue","../../components/skeleton/skeleton-text.vue","../../components/skeleton/skeleton-paragraph.vue","../../components/skeleton/skeleton-list-item.vue","../../components/skeleton/skeleton.vue"],"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","import { SKELETON_RIPPLE_DURATION } from '@/components/skeleton/skeleton_constants';\n\n/**\n * @displayName Skeleton Animation Mixin\n */\nexport default {\n  computed: {\n    skeletonOffset () {\n      const skeletonText = this.$refs.skeleton;\n      if (!skeletonText) { return this.offset; }\n      const { top, height } = skeletonText.getBoundingClientRect();\n      return top + (height / 2);\n    },\n\n    skeletonStyle () {\n      const style = {};\n\n      if (this.skeletonOffset === -1 || (!this.animate && this.animationDuration === -1)) {\n        return style;\n      }\n      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;\n      const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;\n      style.animationDelay = `${animationDelay}ms`;\n      style.animationDuration = `${animationDuration}ms`;\n      return style;\n    },\n  },\n};\n","<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        '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  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","<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'skeleton-placeholder',\n      {\n        '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      'skeleton-placeholder',\n      {\n        '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  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","<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","<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","<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  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\n<style lang=\"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n  display: flex;\n  stroke: none;\n  fill: var(--placeholder-from-color, var(--dt-color-black-300));\n  background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n  &--animate {\n    animation-name: placeholder-throb;\n    animation-iteration-count: infinite;\n  }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n  10% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n  50% {\n    fill: var(--placeholder-to-color, var(--dt-color-black-100));\n    background: var(--placeholder-to-color, var(--dt-color-black-100));\n  }\n  90% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n}\n</style>\n"],"names":["SKELETON_RIPPLE_DURATION","SKELETON_SHAPES","circle","square","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","sm","md","lg","SKELETON_HEADING_HEIGHTS","computed","skeletonOffset","skeletonText","$refs","skeleton","offset","top","height","getBoundingClientRect","skeletonStyle","style","animate","animationDuration","animationDelay","_sfc_main","name","mixins","SkeletonAnimation","props","shape","type","String","default","validator","Object","keys","includes","size","Number","Boolean","contentClass","Array","data","shapeStyles","_createElementBlock","ref","class","_normalizeClass","$data","$props","$options","headingHeight","width","_normalizeStyle","_ctx","number","isNaN","components","DtSkeletonText","rows","minWidth","maxWidth","randomWidth","rowClass","integerRows","methods","randomWidthPercentage","min","Math","max","round","random","getSizeParagraphRow","row","paragraphWidth","isArrayWidth","isArray","currentWidth","isLastRow","_Fragment","_renderList","_createBlock","_component_dt_skeleton_text","key","DtSkeletonShape","DtSkeletonParagraph","shapeSize","paragraphs","shapeClass","_hoisted_1","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps","DtSkeletonListItem","paragraphOption","listItemOption","textOption","shapeOption","ariaLabel","validationOptions","watch","immediate","handler","filtered","entries","filter","_","option","length","errorMessage","map","join","console","error","role","_openBlock","_component_dt_skeleton_list_item"],"mappings":"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"}
+{"version":3,"file":"skeleton.cjs","sources":["../../components/skeleton/skeleton_constants.js","../../common/mixins/skeleton.js","../../components/skeleton/skeleton-shape.vue","../../components/skeleton/skeleton-text.vue","../../components/skeleton/skeleton-paragraph.vue","../../components/skeleton/skeleton-list-item.vue","../../components/skeleton/skeleton.vue"],"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","import { SKELETON_RIPPLE_DURATION } from '@/components/skeleton/skeleton_constants';\n\n/**\n * @displayName Skeleton Animation Mixin\n */\nexport default {\n  computed: {\n    skeletonOffset () {\n      const skeletonText = this.$refs.skeleton;\n      if (!skeletonText) { return this.offset; }\n      const { top, height } = skeletonText.getBoundingClientRect();\n      return top + (height / 2);\n    },\n\n    skeletonStyle () {\n      const style = {};\n\n      if (this.skeletonOffset === -1 || (!this.animate && this.animationDuration === -1)) {\n        return style;\n      }\n      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;\n      const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;\n      style.animationDelay = `${animationDelay}ms`;\n      style.animationDuration = `${animationDuration}ms`;\n      return style;\n    },\n  },\n};\n","<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        '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  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","<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'skeleton-placeholder',\n      {\n        '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      'skeleton-placeholder',\n      {\n        '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  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","<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","<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","<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  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\n<style lang=\"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n  display: flex;\n  stroke: none;\n  fill: var(--placeholder-from-color, var(--dt-color-black-300));\n  background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n  &--animate {\n    animation-name: placeholder-throb;\n    animation-iteration-count: infinite;\n  }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n  10% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n  50% {\n    fill: var(--placeholder-to-color, var(--dt-color-black-100));\n    background: var(--placeholder-to-color, var(--dt-color-black-100));\n  }\n  90% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_renderList","_createBlock","_hoisted_1","_createVNode","_createElementVNode","_mergeProps","_openBlock"],"mappings":"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"}

package/dist/vue3/lib/skeleton.js

@@ -5,7 +5,10 @@ const SKELETON_SHAPES = {
   circle: "d-bar-circle",
   square: "d-bar2"
 };
-const SKELETON_TEXT_TYPES = ["body", "heading"];
+const SKELETON_TEXT_TYPES = [
+  "body",
+  "heading"
+];
 const SKELETON_SHAPE_SIZES = {
   sm: "24px",
   md: "32px",
@@ -23,10 +26,7 @@ const SkeletonAnimation = {
       if (!skeletonText) {
         return this.offset;
       }
-      const {
-        top,
-        height
-      } = skeletonText.getBoundingClientRect();
+      const { top, height } = skeletonText.getBoundingClientRect();
       return top + height / 2;
     },
     skeletonStyle() {
@@ -120,9 +120,14 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: "skeleton",
     "data-qa": "skeleton-shape",
-    class: normalizeClass(["skeleton-placeholder", $data.SKELETON_SHAPES[$props.shape], {
-      "skeleton-placeholder--animate": $props.animate
-    }, $props.contentClass]),
+    class: normalizeClass([
+      "skeleton-placeholder",
+      $data.SKELETON_SHAPES[$props.shape],
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: normalizeStyle($options.shapeStyles)
   }, null, 6);
 }
@@ -202,9 +207,14 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     ref: "skeleton",
     "data-qa": "skeleton-text-body",
-    class: normalizeClass(["d-skeleton-text", "skeleton-placeholder", {
-      "skeleton-placeholder--animate": $props.animate
-    }, $props.contentClass]),
+    class: normalizeClass([
+      "d-skeleton-text",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: normalizeStyle({
       width: $props.width,
       ..._ctx.skeletonStyle
@@ -213,9 +223,15 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     ref: "skeleton",
     "data-qa": "skeleton-text-heading",
-    class: normalizeClass([$data.SKELETON_HEADING_HEIGHTS[$props.headingHeight], "d-skeleton-text--heading", "skeleton-placeholder", {
-      "skeleton-placeholder--animate": $props.animate
-    }, $props.contentClass]),
+    class: normalizeClass([
+      $data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
+      "d-skeleton-text--heading",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
     style: normalizeStyle({
       width: $props.width,
       ..._ctx.skeletonStyle
@@ -343,20 +359,25 @@ const _sfc_main$2 = {
 function _sfc_render$2(_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]),
+    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);
+  }, [
+    (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$2, [["render", _sfc_render$2]]);
 const _sfc_main$1 = {
@@ -389,10 +410,7 @@ const _sfc_main$1 = {
      */
     paragraphs: {
       type: Object,
-      default: () => ({
-        rows: 3,
-        randomWidth: true
-      })
+      default: () => ({ rows: 3, randomWidth: true })
     },
     /**
      * Duration time of the animation (ms), set -1 for an infinite animation.
@@ -437,30 +455,37 @@ const _sfc_main$1 = {
     }
   }
 };
-const _hoisted_1$1 = {
-  class: "d-skeleton-list-item__paragraph-container"
-};
+const _hoisted_1$1 = { class: "d-skeleton-list-item__paragraph-container" };
 function _sfc_render$1(_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$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);
+    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$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$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -575,31 +600,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-busy": "true",
     role: "status",
     "aria-label": $props.ariaLabel
-  }, [$props.listItemOption ? (openBlock(), createBlock(_component_dt_skeleton_list_item, mergeProps({
-    key: 0
-  }, $props.listItemOption === true ? {} : $props.listItemOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (openBlock(), createBlock(_component_dt_skeleton_shape, mergeProps({
-    key: 1
-  }, $props.shapeOption === true ? {} : $props.shapeOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (openBlock(), createBlock(_component_dt_skeleton_paragraph, mergeProps({
-    key: 2
-  }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"])) : (openBlock(), createBlock(_component_dt_skeleton_text, mergeProps({
-    key: 3
-  }, $props.textOption || {}, {
-    "animation-duration": $props.animationDuration,
-    animate: $props.animate,
-    offset: $props.offset
-  }), null, 16, ["animation-duration", "animate", "offset"]))], 8, _hoisted_1);
+  }, [
+    $props.listItemOption ? (openBlock(), createBlock(_component_dt_skeleton_list_item, mergeProps({ key: 0 }, $props.listItemOption === true ? {} : $props.listItemOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (openBlock(), createBlock(_component_dt_skeleton_shape, mergeProps({ key: 1 }, $props.shapeOption === true ? {} : $props.shapeOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (openBlock(), createBlock(_component_dt_skeleton_paragraph, mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : (openBlock(), createBlock(_component_dt_skeleton_text, mergeProps({ key: 3 }, $props.textOption || {}, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"]))
+  ], 8, _hoisted_1);
 }
 const DtSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {