{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\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"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_hoisted_1","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":"gXAiDA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aACN,WAAY,CACV,eAAAC,EAAAA,QACA,gBAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,eAAgB,CACd,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,YAAa,CACX,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,IAIb,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YAEtB,GAGF,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,cAIb,QAAS,CACP,WAAa,CACX,MAAMC,EAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,CAAGC,CAAM,IAAMA,CAAM,EAChC,GAAID,EAAS,QAAU,EAAG,CACxB,MAAME,EAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,IAAMA,CAAG,EAAE,KAAK,KAAK,CAAC,4BAChF,QAAQ,MAAMD,CAAY,CAC5B,CACF,EAEJ,EAnKAE,EAAA,CAAA,YAAA,oOACEC,EAAAA,mBAiCM,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAYC,EAAA,YAGLA,EAAA,gBADRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EANFC,EAAAA,WAME,CAZN,IAAA,GAQcJ,EAAA,uBAA+BA,EAAA,eAAc,CACpD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,aADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEG,EANFD,EAAAA,WAME,CAnBN,IAAA,GAecJ,EAAA,oBAA4BA,EAAA,YAAW,CAC9C,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,iBADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEI,EANFF,EAAAA,WAME,CA1BN,IAAA,GAsBcJ,EAAA,wBAAgCA,EAAA,gBAAe,CACtD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,8DAEXC,EAAAA,YAAAC,EAAAA,YAMEK,EANFH,aAME,CAjCN,IAAA,GA6BcJ,EAAA,YAAU,GAAA,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,4DAhCf,EAAA,EAAAF,CAAA"}