@oslokommune/punkt-elements/dist/button-BIpd1xJh.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, r, s as i } from "./element-cZ85T_aa.js";
import { t as a } from "./class-map-C8HuhNzZ.js";
import { n as o, t as s } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { t as c } from "./if-defined-Cjj8qN-Z.js";
//#region src/components/button/button.ts
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
var l = class extends s {
	constructor(...e) {
		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath;
	}
	connectedCallback() {
		super.connectedCallback(), this.addEventListener("click", (e) => {
			(this.disabled || this.hasAttribute("disabled") || this.isLoading) && (e.preventDefault(), e.stopImmediatePropagation());
		}, !0), this.addEventListener("keydown", (e) => {
			(this.disabled || this.hasAttribute("disabled") || this.isLoading) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopImmediatePropagation());
		}, !0);
	}
	attributeChangedCallback(e, t, n) {
		super.attributeChangedCallback(e, t, n), e === "disabled" && n === "false" && (this.disabled = !1), (e === "isloading" || e === "isLoading") && n === "false" && (this.isLoading = !1);
	}
	firstUpdated(e) {
		super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
	}
	render() {
		let e = this.form ?? this.getAttribute("form") ?? void 0;
		return t`
      <button
        class=${a({
			"pkt-btn": !0,
			[`pkt-btn--${this.size}`]: !!this.size,
			[`pkt-btn--${this.skin}`]: !!this.skin,
			[`pkt-btn--${this.variant}`]: !!this.variant,
			[`pkt-btn--${this.color}`]: !!this.color,
			[`pkt-btn--${this.state}`]: !!this.state,
			"pkt-btn--full": !!this.fullWidth,
			"pkt-btn--full-small": !!this.fullWidthOnMobile,
			"pkt-btn--disabled": !!this.disabled,
			"pkt-btn--isLoading": !!this.isLoading
		})}
        type=${this.type}
        ?disabled=${!!this.disabled}
        aria-busy=${c(this.isLoading ? "true" : void 0)}
        aria-disabled=${c(this.disabled || this.isLoading ? "true" : void 0)}
        form=${c(e)}
      >
        ${this.isLoading ? t`<pkt-icon
              class="pkt-btn__icon pkt-btn__spinner"
              name="spinner-blue"
              path=${c(this.loadingAnimationPath)}
            ></pkt-icon>` : n}
        ${this.variant === "label-only" ? n : t`<pkt-icon
              class="pkt-btn__icon pkt-icon"
              name=${this.iconName}
              path=${c(this.iconPath)}
            ></pkt-icon>`}
        <span class="pkt-btn__text">${o(this)}</span>
        ${this.variant === "icons-right-and-left" ? t`<pkt-icon
              class="pkt-btn__icon"
              name=${this.secondIconName}
              path=${c(this.secondIconPath)}
            ></pkt-icon>` : n}
      </button>
    `;
	}
};
r([i({ type: String })], l.prototype, "iconName", void 0), r([i({ type: String })], l.prototype, "secondIconName", void 0), r([i({ type: String })], l.prototype, "iconPath", void 0), r([i({ type: String })], l.prototype, "secondIconPath", void 0), r([i({ type: String })], l.prototype, "mode", void 0), r([i({ type: String })], l.prototype, "size", void 0), r([i({
	type: Boolean,
	attribute: "full-width"
})], l.prototype, "fullWidth", void 0), r([i({
	type: Boolean,
	attribute: "full-width-on-mobile"
})], l.prototype, "fullWidthOnMobile", void 0), r([i({ type: String })], l.prototype, "color", void 0), r([i({ type: String })], l.prototype, "skin", void 0), r([i({ type: String })], l.prototype, "variant", void 0), r([i({
	type: String,
	reflect: !0
})], l.prototype, "state", void 0), r([i({
	type: String,
	reflect: !0
})], l.prototype, "type", void 0), r([i({ type: String })], l.prototype, "form", void 0), r([i({
	type: Boolean,
	reflect: !0
})], l.prototype, "isLoading", void 0), r([i({
	type: Boolean,
	reflect: !0
})], l.prototype, "disabled", void 0), r([i({ type: String })], l.prototype, "loadingAnimationPath", void 0);
try {
	e("pkt-button")(l);
} catch {
	console.warn("Forsøker å definere <pkt-button>, men den er allerede definert");
}
//#endregion
//#region src/components/button/index.ts
var u = l;
//#endregion
export { l as n, u as t };