@dialpad/dialtone-vue 2.153.0 → 2.154.0

package/dist/lib/skeleton.js

@@ -4,7 +4,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",
@@ -22,10 +25,7 @@ const SkeletonAnimation = {
       if (!skeletonText) {
         return this.offset;
       }
-      const {
-        top,
-        height
-      } = skeletonText.getBoundingClientRect();
+      const { top, height } = skeletonText.getBoundingClientRect();
       return top + height / 2;
     },
     skeletonStyle() {
@@ -117,19 +117,26 @@ const _sfc_main$4 = {
 };
 var _sfc_render$4 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    ref: "skeleton",
-    class: ["skeleton-placeholder", _vm.SKELETON_SHAPES[_vm.shape], {
+  return _c("div", { ref: "skeleton", class: [
+    "skeleton-placeholder",
+    _vm.SKELETON_SHAPES[_vm.shape],
+    {
       "skeleton-placeholder--animate": _vm.animate
-    }, _vm.contentClass],
-    style: _vm.shapeStyles,
-    attrs: {
-      "data-qa": "skeleton-shape"
-    }
-  });
+    },
+    _vm.contentClass
+  ], style: _vm.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
 };
 var _sfc_staticRenderFns$4 = [];
-var __component__$4 = /* @__PURE__ */ normalizeComponent(_sfc_main$4, _sfc_render$4, _sfc_staticRenderFns$4, false, null, null, null, null);
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtSkeletonShape = __component__$4.exports;
 const _sfc_main$3 = {
   name: "DtSkeletonText",
@@ -203,34 +210,40 @@ const _sfc_main$3 = {
 };
 var _sfc_render$3 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.type === "body" ? _c("div", {
-    ref: "skeleton",
-    class: ["d-skeleton-text", "skeleton-placeholder", {
+  return _vm.type === "body" ? _c("div", { ref: "skeleton", class: [
+    "d-skeleton-text",
+    "skeleton-placeholder",
+    {
       "skeleton-placeholder--animate": _vm.animate
-    }, _vm.contentClass],
-    style: {
-      width: _vm.width,
-      ..._vm.skeletonStyle
     },
-    attrs: {
-      "data-qa": "skeleton-text-body"
-    }
-  }) : _vm.type === "heading" ? _c("div", {
-    ref: "skeleton",
-    class: [_vm.SKELETON_HEADING_HEIGHTS[_vm.headingHeight], "d-skeleton-text--heading", "skeleton-placeholder", {
+    _vm.contentClass
+  ], style: {
+    width: _vm.width,
+    ..._vm.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-body" } }) : _vm.type === "heading" ? _c("div", { ref: "skeleton", class: [
+    _vm.SKELETON_HEADING_HEIGHTS[_vm.headingHeight],
+    "d-skeleton-text--heading",
+    "skeleton-placeholder",
+    {
       "skeleton-placeholder--animate": _vm.animate
-    }, _vm.contentClass],
-    style: {
-      width: _vm.width,
-      ..._vm.skeletonStyle
     },
-    attrs: {
-      "data-qa": "skeleton-text-heading"
-    }
-  }) : _vm._e();
+    _vm.contentClass
+  ], style: {
+    width: _vm.width,
+    ..._vm.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-heading" } }) : _vm._e();
 };
 var _sfc_staticRenderFns$3 = [];
-var __component__$3 = /* @__PURE__ */ normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtSkeletonText = __component__$3.exports;
 const validator = (number) => number !== "" && !Number.isNaN(Number(number));
 const _sfc_main$2 = {
@@ -351,28 +364,24 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    class: ["d-skeleton-paragraph", _vm.contentClass],
-    attrs: {
-      "contentClass": "",
-      "data-qa": "skeleton-paragraph"
-    }
-  }, _vm._l(_vm.integerRows, function(row) {
-    return _c("dt-skeleton-text", {
-      key: row,
-      attrs: {
-        "data-qa": "skeleton-paragraph-row",
-        "content-class": _vm.rowClass,
-        "animate": _vm.animate,
-        "offset": _vm.offset,
-        "animation-duration": _vm.animationDuration,
-        "width": _vm.getSizeParagraphRow(row)
-      }
-    });
+  return _c("div", { class: [
+    "d-skeleton-paragraph",
+    _vm.contentClass
+  ], attrs: { "contentClass": "", "data-qa": "skeleton-paragraph" } }, _vm._l(_vm.integerRows, function(row) {
+    return _c("dt-skeleton-text", { key: row, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": _vm.rowClass, "animate": _vm.animate, "offset": _vm.offset, "animation-duration": _vm.animationDuration, "width": _vm.getSizeParagraphRow(row) } });
   }), 1);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtSkeletonParagraph = __component__$2.exports;
 const _sfc_main$1 = {
   name: "DtSkeletonListItem",
@@ -404,10 +413,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.
@@ -454,35 +460,25 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render4() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    class: ["d-skeleton-list-item", {
+  return _c("div", { class: [
+    "d-skeleton-list-item",
+    {
       "d-skeleton-list-item--single": _vm.paragraphs.rows === 1
-    }, _vm.contentClass],
-    attrs: {
-      "data-qa": "skeleton-list-item"
-    }
-  }, [_c("dt-skeleton-shape", {
-    staticClass: "d-skeleton-list-item__shape",
-    attrs: {
-      "size": _vm.shapeSize,
-      "shape": _vm.shape,
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset,
-      "content-class": _vm.shapeClass
-    }
-  }), _c("div", {
-    staticClass: "d-skeleton-list-item__paragraph-container"
-  }, [_c("dt-skeleton-paragraph", _vm._b({
-    attrs: {
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset
-    }
-  }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
+    },
+    _vm.contentClass
+  ], attrs: { "data-qa": "skeleton-list-item" } }, [_c("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { "size": _vm.shapeSize, "shape": _vm.shape, "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset, "content-class": _vm.shapeClass } }), _c("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [_c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtSkeletonListItem = __component__$1.exports;
 const _sfc_main = {
   name: "DtSkeleton",
@@ -588,40 +584,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render5() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    attrs: {
-      "aria-busy": "true",
-      "role": "status",
-      "aria-label": _vm.ariaLabel
-    }
-  }, [_vm.listItemOption ? _c("dt-skeleton-list-item", _vm._b({
-    attrs: {
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset
-    }
-  }, "dt-skeleton-list-item", _vm.listItemOption === true ? {} : _vm.listItemOption, false)) : _vm.shapeOption ? _c("dt-skeleton-shape", _vm._b({
-    attrs: {
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset
-    }
-  }, "dt-skeleton-shape", _vm.shapeOption === true ? {} : _vm.shapeOption, false)) : _vm.paragraphOption ? _c("dt-skeleton-paragraph", _vm._b({
-    attrs: {
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset
-    }
-  }, "dt-skeleton-paragraph", _vm.paragraphOption === true ? {} : _vm.paragraphOption, false)) : _c("dt-skeleton-text", _vm._b({
-    attrs: {
-      "animation-duration": _vm.animationDuration,
-      "animate": _vm.animate,
-      "offset": _vm.offset
-    }
-  }, "dt-skeleton-text", _vm.textOption || {}, false))], 1);
+  return _c("div", { attrs: { "aria-busy": "true", "role": "status", "aria-label": _vm.ariaLabel } }, [_vm.listItemOption ? _c("dt-skeleton-list-item", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-list-item", _vm.listItemOption === true ? {} : _vm.listItemOption, false)) : _vm.shapeOption ? _c("dt-skeleton-shape", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-shape", _vm.shapeOption === true ? {} : _vm.shapeOption, false)) : _vm.paragraphOption ? _c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphOption === true ? {} : _vm.paragraphOption, false)) : _c("dt-skeleton-text", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-text", _vm.textOption || {}, false))], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtSkeleton = __component__.exports;
 export {
   DtSkeleton,

package/dist/lib/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","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","headingHeight","width","number","isNaN","components","DtSkeletonText","rows","minWidth","maxWidth","randomWidth","rowClass","integerRows","methods","randomWidthPercentage","min","Math","max","round","random","getSizeParagraphRow","row","paragraphWidth","isArrayWidth","isArray","currentWidth","isLastRow","DtSkeletonShape","DtSkeletonParagraph","shapeSize","paragraphs","shapeClass","DtSkeletonListItem","paragraphOption","listItemOption","textOption","shapeOption","ariaLabel","validationOptions","watch","$props","immediate","handler","filtered","entries","filter","_","option","length","errorMessage","map","key","join","console","error"],"mappings":"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"}
+{"version":3,"file":"skeleton.js","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"],"mappings":"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"}