@dialpad/dialtone-vue/dist/lib/skeleton/skeleton-text.js

Vue component library for Dialpad's design system Dialtone

import { SKELETON_TEXT_TYPES as o, SKELETON_HEADING_HEIGHTS as n } from "./skeleton-constants.js";
import l from "../../common/mixins/skeleton.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const d = {
  name: "DtSkeletonText",
  mixins: [l],
  props: {
    /**
     * Skeleton type
     * @values body, heading
     */
    type: {
      type: String,
      default: "body",
      validator: (t) => o.includes(t)
    },
    /**
     * Heading height
     * @values sm, md, lg
     */
    headingHeight: {
      type: String,
      default: "md",
      validator: (t) => Object.keys(n).includes(t)
    },
    /**
     * 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: n
    };
  }
};
var i = function() {
  var e = this, a = e._self._c;
  return e.type === "body" ? a("div", { ref: "skeleton", class: [
    "d-skeleton-text",
    "d-skeleton-placeholder",
    {
      "d-skeleton-placeholder--animate": e.animate
    },
    e.contentClass
  ], style: {
    width: e.width,
    ...e.skeletonStyle
  }, attrs: { "data-qa": "skeleton-text-body" } }) : e.type === "heading" ? a("div", { ref: "skeleton", class: [
    e.SKELETON_HEADING_HEIGHTS[e.headingHeight],
    "d-skeleton-text--heading",
    "d-skeleton-placeholder",
    {
      "d-skeleton-placeholder--animate": e.animate
    },
    e.contentClass
  ], style: {
    width: e.width,
    ...e.skeletonStyle
  }, attrs: { "data-qa": "skeleton-text-heading" } }) : e._e();
}, r = [], m = /* @__PURE__ */ s(
  d,
  i,
  r
);
const _ = m.exports;
export {
  _ as default
};
//# sourceMappingURL=skeleton-text.js.map