@oslokommune/punkt-elements/dist/loader-Da4IOk_T.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { P as u, E as m, x as d, n as a, a as y } from "./element-CgEWt74-.js";
import { e as h } from "./class-map-BpTj9gtz.js";
import { r as c } from "./state-Bo2bck5_.js";
import { e as f, n as g } from "./ref-BBYSqgeW.js";
import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
import "./icon-CC1js8eR.js";
var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
  for (var i = r > 1 ? void 0 : r ? k(o, n) : o, l = s.length - 1, p; l >= 0; l--)
    (p = s[l]) && (i = (r ? p(o, n, i) : p(i)) || i);
  return r && i && _(o, n, i), i;
};
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
let t = class extends u {
  constructor() {
    super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1, this.slotController = new v(this, this.defaultSlot);
  }
  connectedCallback() {
    super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
  }
  updated(s) {
    s.has("delay") && this.setupLoader();
  }
  render() {
    const s = h({
      "pkt-loader": !0,
      [`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
      [`pkt-loader--${this.size}`]: !0
    }), o = h({
      "pkt-contents": !0,
      "pkt-hide": this.isLoading
    });
    return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${s}>
      ${this.isLoading && this._shouldDisplayLoader ? d`<div class="pkt-loader__spinner">
            <pkt-icon
              name=${this.getVariant(this.variant)}
              path=${this.loadingAnimationPath}
              class="pkt-loader__svg pkt-loader__${this.variant}"
            ></pkt-icon>
            ${this.message && d`<p>${this.message}</p>`}
          </div>` : m}
      <div class=${o} ${g(this.defaultSlot)}></div>
    </div>`;
  }
  getVariant(s) {
    switch (s) {
      case "blue":
        return "spinner-blue";
      case "rainbow":
        return "spinner";
      default:
        return "loader";
    }
  }
  setupLoader() {
    this.delay > 0 && (this._shouldDisplayLoader = !1, setTimeout(() => {
      this._shouldDisplayLoader = !0, this.requestUpdate();
    }, this.delay));
  }
};
e([
  a({ type: Number })
], t.prototype, "delay", 2);
e([
  a({ type: Boolean })
], t.prototype, "inline", 2);
e([
  a({ type: Boolean })
], t.prototype, "isLoading", 2);
e([
  a({ type: String })
], t.prototype, "message", 2);
e([
  a({ type: String })
], t.prototype, "size", 2);
e([
  a({ type: String })
], t.prototype, "variant", 2);
e([
  a({ type: String })
], t.prototype, "loadingAnimationPath", 2);
e([
  c()
], t.prototype, "_shouldDisplayLoader", 2);
t = e([
  y("pkt-loader")
], t);
export {
  t as P
};