import { SKELETON_SHAPES as i } from "./skeleton-constants.js";
import l from "./skeleton-shape.js";
import r from "./skeleton-paragraph.js";
import { resolveComponent as a, openBlock as m, createElementBlock as c, normalizeClass as d, createVNode as n, createElementVNode as f, mergeProps as p } from "vue";
import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const _ = {
  compatConfig: { MODE: 3 },
  name: "DtSkeletonListItem",
  components: {
    DtSkeletonShape: l,
    DtSkeletonParagraph: r
  },
  props: {
    /**
     * Defines the shape of the skeleton, accepts circle or square.
     * @values circle, square
     */
    shape: {
      type: String,
      default: "circle",
      validator: (t) => Object.keys(i).includes(t)
    },
    /**
     * 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: ""
    }
  }
}, h = { class: "d-skeleton-list-item__paragraph-container" };
function k(t, g, e, S, y, D) {
  const o = a("dt-skeleton-shape"), s = a("dt-skeleton-paragraph");
  return m(), c("div", {
    "data-qa": "skeleton-list-item",
    class: d([
      "d-skeleton-list-item",
      {
        "d-skeleton-list-item--single": e.paragraphs.rows === 1
      },
      e.contentClass
    ])
  }, [
    n(o, {
      class: "d-skeleton-list-item__shape",
      size: e.shapeSize,
      shape: e.shape,
      "animation-duration": e.animationDuration,
      animate: e.animate,
      offset: e.offset,
      "content-class": e.shapeClass
    }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
    f("div", h, [
      n(s, p(e.paragraphs, {
        "animation-duration": e.animationDuration,
        animate: e.animate,
        offset: e.offset
      }), null, 16, ["animation-duration", "animate", "offset"])
    ])
  ], 2);
}
const v = /* @__PURE__ */ u(_, [["render", k]]);
export {
  v as default
};
//# sourceMappingURL=skeleton-list-item.js.map
