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

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

import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as d } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
import { DdsElement as S } from "../../internal/dds-hu-element.js";
import { SizedMixin as z } from "../../internal/mixin/sizedMixin.js";
import v from "../icon/icon.component.js";
import b from "./spinner.scss.js";
import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, o = (h, t, p, c) => {
  for (var e = void 0, i = h.length - 1, n; i >= 0; i--)
    (n = h[i]) && (e = n(t, p, e) || e);
  return e && $(t, p, e), e;
};
const x = z(S), l = class l extends x {
  constructor() {
    super(), this.variant = "neutral", this.noColor = !1, this.orientation = "vertical", this.ariaLive = "polite", this.delay = 0, this._visible = !1, this.size = "lg";
  }
  /** Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */
  get spinnerSize() {
    return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize;
  }
  connectedCallback() {
    super.connectedCallback(), this.delay > 0 ? this._delayTimeout = window.setTimeout(() => {
      this._visible = !0;
    }, this.delay) : this._visible = !0;
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._delayTimeout && clearTimeout(this._delayTimeout);
  }
  firstUpdated(t) {
    super.firstUpdated(t), this._setupIconSlot();
  }
  updated(t) {
    super.updated(t), (t.has("size") || t.has("sizeMap") || t.has("staticSize") || t.has("customStyles")) && this._updateSlottedIcons();
  }
  _setupIconSlot() {
    this._updateSlottedIcons();
  }
  _updateSlottedIcons() {
    try {
      if (!this.shadowRoot) return;
      const t = this.shadowRoot.querySelector(
        'slot[name="icon"]'
      );
      if (!t) return;
      const p = t.assignedElements({
        flatten: !0
      }), c = !!this.customStyles, e = getComputedStyle(this).getPropertyValue(
        "--dds-spinner-animation-duration"
      ) || "1s";
      p.forEach((i) => {
        if (i instanceof HTMLElement) {
          const n = window.matchMedia(
            "(prefers-reduced-motion: reduce)"
          ).matches;
          if (i.tagName === "DAP-DS-ICON" || i.localName === "dap-ds-icon")
            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block", this.spinnerSize && i.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && i.setAttribute("staticSize", this.staticSize.toString());
          else {
            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block";
            const r = i.querySelector("dap-ds-icon");
            r && (r.style.display = "block", r.style.animation = "", this.spinnerSize && r.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && r.setAttribute(
              "staticSize",
              this.staticSize.toString()
            ));
          }
        }
      });
    } catch (t) {
      console.warn("Failed to update slotted icons:", t);
    }
  }
  render() {
    var t;
    return this._visible ? d`
      <div
        part="base"
        role="status"
        name="icon-spinner"
        aria-label=${(t = this.ariaLabel) != null ? t : y("spinner")}
        aria-live=${this.ariaLive}
        class="${f("spinner", {
      [`spinner--${this.spinnerSize}`]: this.spinnerSize,
      [`spinner--${this.variant}`]: this.variant,
      [`spinner--${this.orientation}`]: this.orientation
    })}">
        <slot name="icon" @slotchange=${this._updateSlottedIcons}>
          <dap-ds-icon
            part="icon"
            exportparts="base: icon-base, content: icon-content"
            size=${this.spinnerSize}
            staticSize=${m(this.staticSize)}
            name="loading-spinner"
            class="spinner__icon"></dap-ds-icon>
        </slot>
        ${this.text ? d` <span
              part="text"
              class=${f("spinner__text", {
      "spinner__text--no-color": this.noColor
    })}>
              ${this.text}
            </span>` : d`<slot></slot>`}
      </div>
    ` : null;
  }
};
l.tagName = "dap-ds-spinner", l.dependencies = {
  "dap-ds-icon": v
}, l.styles = _(b);
let s = l;
o([
  a({ type: String, reflect: !0 })
], s.prototype, "variant");
o([
  a({ type: Number })
], s.prototype, "staticSize");
o([
  a({ type: String })
], s.prototype, "text");
o([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "noColor");
o([
  a({ type: String, reflect: !0 })
], s.prototype, "orientation");
o([
  a({ type: String, attribute: "aria-live" })
], s.prototype, "ariaLive");
o([
  a({ type: Number })
], s.prototype, "delay");
o([
  u()
], s.prototype, "_visible");
export {
  s as default
};
//# sourceMappingURL=spinner.component.js.map