@dialpad/dialtone-vue 2.127.0 → 2.127.2

package/dist/lib/skeleton.cjs

@@ -1,2 +1,613 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),u=3e6,i={circle:"d-bar-circle",square:"d-bar2"},m=["body","heading"],c={sm:"24px",md:"32px",lg:"48px"},r={sm:"d-h16",md:"d-h24",lg:"d-h32"},f={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*u/1e3,a=this.animationDuration===-1?1e3:this.animationDuration;return e.animationDelay=`${t}ms`,e.animationDuration=`${a}ms`,e}}},S={name:"DtSkeletonShape",mixins:[f],props:{shape:{type:String,default:"circle",validator:e=>Object.keys(i).includes(e)},size:{type:String,default:"md"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},contentClass:{type:[String,Object,Array],default:""}},data(){return{SKELETON_SHAPES:i}},computed:{shapeStyles(){const e=c[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=s.n(S,y,g,!1,null,null,null,null);const l=k.exports,O={name:"DtSkeletonText",mixins:[f],props:{type:{type:String,default:"body",validator:e=>m.includes(e)},headingHeight:{type:String,default:"md",validator:e=>Object.keys(r).includes(e)},width:{type:String,default:"100%"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!1},offset:{type:Number,default:1},contentClass:{type:String,default:""}},data(){return{SKELETON_HEADING_HEIGHTS:r}}};var E=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()},b=[],v=s.n(O,E,b,!1,null,null,null,null);const d=v.exports,o=e=>e!==""&&!Number.isNaN(Number(e)),D={name:"DtSkeletonParagraph",components:{DtSkeletonText:d},props:{rows:{type:[Number,String],default:3,validator:o},animate:{type:Boolean,default:!0},minWidth:{type:[Number,String],default:30,validator:o},maxWidth:{type:[Number,String],default:100,validator:o},width:{type:[String,Array],default:null},randomWidth:{type:Boolean,default:!1},offset:{type:Number,default:1},animationDuration:{type:Number,default:-1},contentClass:{type:String,default:""},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],_=e===this.rows;return this.randomWidth?this.randomWidthPercentage():t&&!a?t:t&&a&&n?n:_?"38%":"100%"}}};var N=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)},x=[],T=s.n(D,N,x,!1,null,null,null,null);const p=T.exports,w={name:"DtSkeletonListItem",components:{DtSkeletonShape:l,DtSkeletonParagraph:p},props:{shape:{type:String,default:"circle",validator:e=>Object.keys(i).includes(e)},shapeSize:{type:String,default:"md"},paragraphs:{type:Object,default:()=>({rows:3,randomWidth:!0})},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},shapeClass:{type:String,default:""},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)},I=[],L=s.n(w,$,I,!1,null,null,null,null);const h=L.exports,P={name:"DtSkeleton",components:{DtSkeletonText:d,DtSkeletonShape:l,DtSkeletonListItem:h,DtSkeletonParagraph:p},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:""},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:"validator"}},methods:{validator(){const 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 C=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=[],H=s.n(P,C,A,!1,null,null,null,null);const R=H.exports;exports.DtSkeleton=R;exports.DtSkeletonListItem=h;exports.DtSkeletonParagraph=p;exports.DtSkeletonShape=l;exports.DtSkeletonText=d;exports.SKELETON_HEADING_HEIGHTS=r;exports.SKELETON_RIPPLE_DURATION=u;exports.SKELETON_SHAPES=i;exports.SKELETON_SHAPE_SIZES=c;exports.SKELETON_TEXT_TYPES=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const SKELETON_RIPPLE_DURATION = 3e6;
+const SKELETON_SHAPES = {
+  circle: "d-bar-circle",
+  square: "d-bar2"
+};
+const SKELETON_TEXT_TYPES = [
+  "body",
+  "heading"
+];
+const SKELETON_SHAPE_SIZES = {
+  sm: "24px",
+  md: "32px",
+  lg: "48px"
+};
+const SKELETON_HEADING_HEIGHTS = {
+  sm: "d-h16",
+  md: "d-h24",
+  lg: "d-h32"
+};
+const SkeletonAnimation = {
+  computed: {
+    skeletonOffset() {
+      const skeletonText = this.$refs.skeleton;
+      if (!skeletonText) {
+        return this.offset;
+      }
+      const { top, height } = skeletonText.getBoundingClientRect();
+      return top + height / 2;
+    },
+    skeletonStyle() {
+      const style = {};
+      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1) {
+        return style;
+      }
+      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1e3;
+      const animationDuration = this.animationDuration === -1 ? 1e3 : this.animationDuration;
+      style.animationDelay = `${animationDelay}ms`;
+      style.animationDuration = `${animationDuration}ms`;
+      return style;
+    }
+  }
+};
+const _sfc_main$4 = {
+  name: "DtSkeletonShape",
+  mixins: [SkeletonAnimation],
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_SHAPES
+    };
+  },
+  computed: {
+    shapeStyles() {
+      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;
+      return {
+        ...this.skeletonStyle,
+        "min-width": size,
+        "max-width": size,
+        "min-height": size,
+        "max-height": size
+      };
+    }
+  }
+};
+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],
+    {
+      "skeleton-placeholder--animate": _vm.animate
+    },
+    _vm.contentClass
+  ], style: _vm.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ _pluginVue2_normalizer.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",
+  mixins: [SkeletonAnimation],
+  props: {
+    /**
+     * Skeleton type
+     * @values body, heading
+     */
+    type: {
+      type: String,
+      default: "body",
+      validator: (type) => SKELETON_TEXT_TYPES.includes(type)
+    },
+    /**
+     * Heading height
+     * @values sm, md, lg
+     */
+    headingHeight: {
+      type: String,
+      default: "md",
+      validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_HEADING_HEIGHTS
+    };
+  }
+};
+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",
+    {
+      "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",
+    {
+      "skeleton-placeholder--animate": _vm.animate
+    },
+    _vm.contentClass
+  ], style: {
+    width: _vm.width,
+    ..._vm.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-heading" } }) : _vm._e();
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.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 = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const min = Math.min(this.minWidth, this.maxWidth);
+      const max = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
+    },
+    getSizeParagraphRow(row) {
+      const paragraphWidth = this.width;
+      const isArrayWidth = Array.isArray(paragraphWidth);
+      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
+      const isLastRow = row === this.rows;
+      if (this.randomWidth) {
+        return this.randomWidthPercentage();
+      }
+      if (paragraphWidth && !isArrayWidth) {
+        return paragraphWidth;
+      }
+      if (paragraphWidth && isArrayWidth && currentWidth) {
+        return currentWidth;
+      }
+      return isLastRow ? "38%" : "100%";
+    }
+  }
+};
+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) } });
+  }), 1);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.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",
+  components: {
+    DtSkeletonShape,
+    DtSkeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+var _sfc_render$1 = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  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);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.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",
+  components: {
+    DtSkeletonText,
+    DtSkeletonShape,
+    DtSkeletonListItem,
+    DtSkeletonParagraph
+  },
+  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: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    validationOptions() {
+      return {
+        paragraphOption: this.paragraphOption,
+        listItemOption: this.listItemOption,
+        textOption: this.textOption,
+        shapeOption: this.shapeOption
+      };
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      handler: "validator"
+    }
+  },
+  methods: {
+    validator() {
+      const filtered = Object.entries(this.validationOptions).filter(([_, option]) => option);
+      if (filtered.length >= 2) {
+        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(" | ")} options at the same time`;
+        console.error(errorMessage);
+      }
+    }
+  }
+};
+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);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtSkeleton = __component__.exports;
+exports.DtSkeleton = DtSkeleton;
+exports.DtSkeletonListItem = DtSkeletonListItem;
+exports.DtSkeletonParagraph = DtSkeletonParagraph;
+exports.DtSkeletonShape = DtSkeletonShape;
+exports.DtSkeletonText = DtSkeletonText;
+exports.SKELETON_HEADING_HEIGHTS = SKELETON_HEADING_HEIGHTS;
+exports.SKELETON_RIPPLE_DURATION = SKELETON_RIPPLE_DURATION;
+exports.SKELETON_SHAPES = SKELETON_SHAPES;
+exports.SKELETON_SHAPE_SIZES = SKELETON_SHAPE_SIZES;
+exports.SKELETON_TEXT_TYPES = SKELETON_TEXT_TYPES;
 //# sourceMappingURL=skeleton.cjs.map