import { SKELETON_SHAPES as s } from "./skeleton-constants.js";
import n from "./skeleton-shape.js";
import r from "./skeleton-paragraph.js";
import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const o = {
  name: "DtSkeletonListItem",
  components: {
    DtSkeletonShape: n,
    DtSkeletonParagraph: r
  },
  props: {
    /**
     * Defines the shape of the skeleton, accepts circle or square.
     * @values circle, square
     */
    shape: {
      type: String,
      default: "circle",
      validator: (a) => Object.keys(s).includes(a)
    },
    /**
     * 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 l = function() {
  var t = this, e = t._self._c;
  return e("div", { class: [
    "d-skeleton-list-item",
    {
      "d-skeleton-list-item--single": t.paragraphs.rows === 1
    },
    t.contentClass
  ], attrs: { "data-qa": "skeleton-list-item" } }, [e("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 } }), e("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [e("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphs, !1))], 1)], 1);
}, p = [], m = /* @__PURE__ */ i(
  o,
  l,
  p
);
const _ = m.exports;
export {
  _ as default
};
//# sourceMappingURL=skeleton-list-item.js.map
