dap-design-system/dist/components/skeleton/skeleton.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as y } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import "../../localization/localization.js";
import { DdsElement as p } from "../../internal/dds-hu-element.js";
import f from "./skeleton.scss.js";
import { t as d } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
var S = Object.defineProperty, a = (l, t, e, o) => {
  for (var s = void 0, m = l.length - 1, h; m >= 0; m--)
    (h = l[m]) && (s = h(t, e, s) || s);
  return s && S(t, e, s), s;
};
const n = class n extends p {
  constructor() {
    super(...arguments), this.variant = "text", this.noAnimation = !1, this.animation = "wave";
  }
  _generateKeyframesCSS() {
    if (this.animation === "custom" && this.customKeyframes)
      return `
        @keyframes custom-skeleton-animation {
          ${this.customKeyframes}
        }
        .skeleton--custom::before {
          animation: custom-skeleton-animation var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;
        }
      `;
  }
  _updateMergedStyles() {
    const t = this._generateKeyframesCSS(), e = [];
    t && e.push(t), this._userCustomStyles && e.push(this._userCustomStyles);
    const o = e.length > 0 ? e.join(`
`) : void 0;
    if (o !== this.customStyles) {
      const s = this.customStyles;
      this.customStyles = o, this.requestUpdate("customStyles", s);
    }
  }
  updated(t) {
    if (super.updated(t), t.has("customStyles")) {
      const e = this.customStyles || "", o = this._generateKeyframesCSS();
      o && e.includes(o) ? this._userCustomStyles = e.replace(o, "").trim() || void 0 : this._userCustomStyles = e || void 0;
    }
    (t.has("animation") || t.has("customKeyframes")) && this._updateMergedStyles();
  }
  firstUpdated(t) {
    super.firstUpdated(t), this._userCustomStyles = this.customStyles || void 0, this._updateMergedStyles();
  }
  render() {
    var t;
    return this.width ? this.style.setProperty("--skeleton-width", this.width) : this.style.removeProperty("--skeleton-width"), this.height ? this.style.setProperty("--skeleton-height", this.height) : this.style.removeProperty("--skeleton-height"), y`
      <div
        part="base"
        class="${u("skeleton", {
      [`skeleton--${this.variant}`]: this.variant,
      "skeleton--animate": !this.noAnimation,
      [`skeleton--${this.animation}`]: !this.noAnimation && this.animation
    })}"
        role="status"
        aria-label=${(t = this.ariaLabel) != null ? t : d("loading")}></div>
    `;
  }
};
n.tagName = "dap-ds-skeleton", n.styles = c(f);
let i = n;
a([
  r({ type: String, reflect: !0 })
], i.prototype, "variant");
a([
  r({ type: String })
], i.prototype, "width");
a([
  r({ type: String })
], i.prototype, "height");
a([
  r({ type: Boolean, reflect: !0 })
], i.prototype, "noAnimation");
a([
  r({ type: String, reflect: !0 })
], i.prototype, "animation");
a([
  r({ type: String, attribute: "custom-keyframes" })
], i.prototype, "customKeyframes");
export {
  i as default
};
//# sourceMappingURL=skeleton.component.js.map