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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import { n as s, t as c } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
//#region src/components/loader/loader.ts
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
var l = class extends c {
	constructor(...e) {
		super(...e), 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;
	}
	connectedCallback() {
		super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
	}
	updated(e) {
		e.has("delay") && this.setupLoader();
	}
	render() {
		let e = o({
			"pkt-loader": !0,
			[`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
			[`pkt-loader--${this.size}`]: !0
		}), r = o({
			"pkt-contents": !0,
			"pkt-hide": this.isLoading
		});
		return t`<div
      role="status"
      aria-live="polite"
      aria-busy=${this.isLoading ? "true" : "false"}
      class=${e}
    >
      ${this.isLoading && this._shouldDisplayLoader ? t`<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 && t`<p>${this.message}</p>`}
          </div>` : n}
      <div class=${r}>${s(this)}</div>
    </div>`;
	}
	getVariant(e) {
		switch (e) {
			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));
	}
};
i([a({ type: Number })], l.prototype, "delay", void 0), i([a({ type: Boolean })], l.prototype, "inline", void 0), i([a({ type: Boolean })], l.prototype, "isLoading", void 0), i([a({ type: String })], l.prototype, "message", void 0), i([a({ type: String })], l.prototype, "size", void 0), i([a({ type: String })], l.prototype, "variant", void 0), i([a({ type: String })], l.prototype, "loadingAnimationPath", void 0), i([r()], l.prototype, "_shouldDisplayLoader", void 0);
try {
	e("pkt-loader")(l);
} catch {
	console.warn("Forsøker å definere <pkt-loader>, men den er allerede definert");
}
//#endregion
//#region src/components/loader/index.ts
var u = l;
//#endregion
export { l as n, u as t };