@dialpad/dialtone/dist/vue3/lib/skeleton/skeleton-list-item.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"skeleton-list-item.cjs","names":[],"sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\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"],"mappings":"sUAoCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,qBAEN,WAAY,CACV,gBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAW,GAAS,OAAO,KAAK,EAAA,gBAAgB,CAAC,SAAS,EAAM,CACjE,CAMD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,WAAY,CACV,KAAM,OACN,aAAgB,CAAE,KAAM,EAAG,YAAa,GAAM,EAC/C,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CACF,CACF,IApGQ,MAAM,4CAA2C,8KAQlD,MAAA,CA1BJ,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,wDAAkF,EAAA,WAAW,OAAI,EAAA,CAAuB,EAAA,mCAgB5H,EAAA,CAPA,MAAM,8BACL,KAAM,EAAA,UACN,MAAO,EAAA,MACP,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,OACR,gBAAe,EAAA,sHASZ,MAPN,EAOM,EAAA,EAAA,EAAA,aADF,GAAA,EAAA,EAAA,YAAA,EAJQ,WAAU,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}