@dialpad/dialtone-vue 2.125.0 → 2.125.1

package/dist/lib/skeleton.js

@@ -0,0 +1,574 @@
+import { n as s } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const f = 3e6, o = {
+  circle: "d-bar-circle",
+  square: "d-bar2"
+}, c = [
+  "body",
+  "heading"
+], h = {
+  sm: "24px",
+  md: "32px",
+  lg: "48px"
+}, r = {
+  sm: "d-h16",
+  md: "d-h24",
+  lg: "d-h32"
+}, l = {
+  computed: {
+    skeletonOffset() {
+      const e = this.$refs.skeleton;
+      if (!e)
+        return this.offset;
+      const { top: t, height: a } = e.getBoundingClientRect();
+      return t + a / 2;
+    },
+    skeletonStyle() {
+      const e = {};
+      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1)
+        return e;
+      const t = this.skeletonOffset * f / 1e3, a = this.animationDuration === -1 ? 1e3 : this.animationDuration;
+      return e.animationDelay = `${t}ms`, e.animationDuration = `${a}ms`, e;
+    }
+  }
+}, _ = {
+  name: "DtSkeletonShape",
+  mixins: [l],
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (e) => Object.keys(o).includes(e)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_SHAPES: o
+    };
+  },
+  computed: {
+    shapeStyles() {
+      const e = h[this.size] || this.size;
+      return {
+        ...this.skeletonStyle,
+        "min-width": e,
+        "max-width": e,
+        "min-height": e,
+        "max-height": e
+      };
+    }
+  }
+};
+var y = function() {
+  var t = this, a = t._self._c;
+  return a("div", { ref: "skeleton", class: [
+    "skeleton-placeholder",
+    t.SKELETON_SHAPES[t.shape],
+    {
+      "skeleton-placeholder--animate": t.animate
+    },
+    t.contentClass
+  ], style: t.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
+}, g = [], k = /* @__PURE__ */ s(
+  _,
+  y,
+  g,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const d = k.exports, S = {
+  name: "DtSkeletonText",
+  mixins: [l],
+  props: {
+    /**
+     * Skeleton type
+     * @values body, heading
+     */
+    type: {
+      type: String,
+      default: "body",
+      validator: (e) => c.includes(e)
+    },
+    /**
+     * Heading height
+     * @values sm, md, lg
+     */
+    headingHeight: {
+      type: String,
+      default: "md",
+      validator: (e) => Object.keys(r).includes(e)
+    },
+    /**
+     * Width of the skeleton
+     */
+    width: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_HEADING_HEIGHTS: r
+    };
+  }
+};
+var O = function() {
+  var t = this, a = t._self._c;
+  return t.type === "body" ? a("div", { ref: "skeleton", class: [
+    "d-skeleton-text",
+    "skeleton-placeholder",
+    {
+      "skeleton-placeholder--animate": t.animate
+    },
+    t.contentClass
+  ], style: {
+    width: t.width,
+    ...t.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-body" } }) : t.type === "heading" ? a("div", { ref: "skeleton", class: [
+    t.SKELETON_HEADING_HEIGHTS[t.headingHeight],
+    "d-skeleton-text--heading",
+    "skeleton-placeholder",
+    {
+      "skeleton-placeholder--animate": t.animate
+    },
+    t.contentClass
+  ], style: {
+    width: t.width,
+    ...t.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-heading" } }) : t._e();
+}, v = [], b = /* @__PURE__ */ s(
+  S,
+  O,
+  v,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText: p
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator: i
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator: i
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator: i
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const e = Math.min(this.minWidth, this.maxWidth), t = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (t - e)) + e}%`;
+    },
+    getSizeParagraphRow(e) {
+      const t = this.width, a = Array.isArray(t), n = t == null ? void 0 : t[e - 1], m = e === this.rows;
+      return this.randomWidth ? this.randomWidthPercentage() : t && !a ? t : t && a && n ? n : m ? "38%" : "100%";
+    }
+  }
+};
+var D = function() {
+  var t = this, a = t._self._c;
+  return a("div", { class: [
+    "d-skeleton-paragraph",
+    t.contentClass
+  ], attrs: { contentClass: "", "data-qa": "skeleton-paragraph" } }, t._l(t.integerRows, function(n) {
+    return a("dt-skeleton-text", { key: n, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": t.rowClass, animate: t.animate, offset: t.offset, "animation-duration": t.animationDuration, width: t.getSizeParagraphRow(n) } });
+  }), 1);
+}, N = [], E = /* @__PURE__ */ s(
+  x,
+  D,
+  N,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const u = E.exports, w = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape: d,
+    DtSkeletonParagraph: u
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (e) => Object.keys(o).includes(e)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: !0 })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+var $ = function() {
+  var t = this, a = t._self._c;
+  return a("div", { class: [
+    "d-skeleton-list-item",
+    {
+      "d-skeleton-list-item--single": t.paragraphs.rows === 1
+    },
+    t.contentClass
+  ], attrs: { "data-qa": "skeleton-list-item" } }, [a("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { size: t.shapeSize, shape: t.shape, "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset, "content-class": t.shapeClass } }), a("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [a("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphs, !1))], 1)], 1);
+}, C = [], T = /* @__PURE__ */ s(
+  w,
+  $,
+  C,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const I = T.exports, L = {
+  name: "DtSkeleton",
+  components: {
+    DtSkeletonText: p,
+    DtSkeletonShape: d,
+    DtSkeletonListItem: I,
+    DtSkeletonParagraph: u
+  },
+  props: {
+    /**
+     * Set this prop to have the skeleton render as multiple lines of text.
+     * Set only one option prop at a time.
+     */
+    paragraphOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
+     * Set only one option prop at a time.
+     */
+    listItemOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a single line of text.
+     * Set only one option prop at a time.
+     */
+    textOption: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a specific shape.
+     * Set only one option prop at a time.
+     */
+    shapeOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Descriptive label for the content.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    validationOptions() {
+      return {
+        paragraphOption: this.paragraphOption,
+        listItemOption: this.listItemOption,
+        textOption: this.textOption,
+        shapeOption: this.shapeOption
+      };
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      handler: "validator"
+    }
+  },
+  methods: {
+    validator() {
+      const e = Object.entries(this.validationOptions).filter(([t, a]) => a);
+      if (e.length >= 2) {
+        const t = `Use only one of ${e.map(([a]) => a).join(" | ")} options at the same time`;
+        console.error(t);
+      }
+    }
+  }
+};
+var R = function() {
+  var t = this, a = t._self._c;
+  return a("div", { attrs: { "aria-busy": "true", role: "status", "aria-label": t.ariaLabel } }, [t.listItemOption ? a("dt-skeleton-list-item", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-list-item", t.listItemOption === !0 ? {} : t.listItemOption, !1)) : t.shapeOption ? a("dt-skeleton-shape", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-shape", t.shapeOption === !0 ? {} : t.shapeOption, !1)) : t.paragraphOption ? a("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphOption === !0 ? {} : t.paragraphOption, !1)) : a("dt-skeleton-text", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-text", t.textOption || {}, !1))], 1);
+}, A = [], P = /* @__PURE__ */ s(
+  L,
+  R,
+  A,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const j = P.exports;
+export {
+  j as DtSkeleton,
+  I as DtSkeletonListItem,
+  u as DtSkeletonParagraph,
+  d as DtSkeletonShape,
+  p as DtSkeletonText,
+  r as SKELETON_HEADING_HEIGHTS,
+  f as SKELETON_RIPPLE_DURATION,
+  o as SKELETON_SHAPES,
+  h as SKELETON_SHAPE_SIZES,
+  c as SKELETON_TEXT_TYPES
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/lib/skeleton.js.map

@@ -0,0 +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","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","SKELETON_HEADING_HEIGHTS","SkeletonAnimation","skeletonText","top","height","style","animationDelay","animationDuration","_sfc_main","shape","size","type","headingHeight","validator","number","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","DtSkeletonShape","DtSkeletonParagraph","DtSkeletonListItem","filtered","_","option","errorMessage","key"],"mappings":"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"}