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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { P as b, E as c, x as p, n as s, a as f } from "./element-CgEWt74-.js";
import { P as m } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as u } from "./class-map-BpTj9gtz.js";
import { o as l } from "./if-defined-CmuO4Vz9.js";
import { e as y, n as k } from "./ref-BBYSqgeW.js";
var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (t, o, n, r) => {
  for (var a = r > 1 ? void 0 : r ? $(o, n) : o, d = t.length - 1, h; d >= 0; d--)
    (h = t[d]) && (a = (r ? h(o, n, a) : h(a)) || a);
  return r && a && g(o, n, a), a;
};
window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
let i = class extends b {
  constructor() {
    super(), this.defaultSlot = y(), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", 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, this.slotController = new m(this, this.defaultSlot);
  }
  // Lifecycle
  connectedCallback() {
    super.connectedCallback(), this.addEventListener(
      "click",
      (t) => {
        (this.disabled || this.hasAttribute("disabled") || this.isLoading) && (t.preventDefault(), t.stopImmediatePropagation());
      },
      !0
    ), this.addEventListener(
      "keydown",
      (t) => {
        (this.disabled || this.hasAttribute("disabled") || this.isLoading) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopImmediatePropagation());
      },
      !0
    );
  }
  attributeChangedCallback(t, o, n) {
    super.attributeChangedCallback(t, o, n), t === "disabled" && n === "false" && (this.disabled = !1), (t === "isloading" || t === "isLoading") && n === "false" && (this.isLoading = !1);
  }
  firstUpdated(t) {
    super.firstUpdated(t), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
  }
  // Render
  render() {
    const t = this.form ?? this.getAttribute("form") ?? void 0, o = {
      "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--disabled": !!this.disabled,
      "pkt-btn--isLoading": !!this.isLoading
    };
    return p`
      <button
        class=${u(o)}
        type=${this.type}
        ?disabled=${!!this.disabled}
        aria-busy=${l(this.isLoading ? "true" : void 0)}
        aria-disabled=${l(this.disabled || this.isLoading ? "true" : void 0)}
        form=${l(t)}
      >
        ${this.isLoading ? p`<pkt-icon
              class="pkt-btn__icon pkt-btn__spinner"
              name="spinner-blue"
              path=${l(this.loadingAnimationPath)}
            ></pkt-icon>` : c}
        ${this.variant !== "label-only" ? p`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>` : c}
        <span class="pkt-btn__text" ${k(this.defaultSlot)}></span>
        ${this.variant === "icons-right-and-left" ? p`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>` : c}
      </button>
    `;
  }
};
e([
  s({ type: String })
], i.prototype, "iconName", 2);
e([
  s({ type: String })
], i.prototype, "secondIconName", 2);
e([
  s({ type: String })
], i.prototype, "mode", 2);
e([
  s({ type: String })
], i.prototype, "size", 2);
e([
  s({ type: String })
], i.prototype, "color", 2);
e([
  s({ type: String })
], i.prototype, "skin", 2);
e([
  s({ type: String })
], i.prototype, "variant", 2);
e([
  s({ type: String, reflect: !0 })
], i.prototype, "state", 2);
e([
  s({ type: String, reflect: !0 })
], i.prototype, "type", 2);
e([
  s({ type: String })
], i.prototype, "form", 2);
e([
  s({ type: Boolean, reflect: !0 })
], i.prototype, "isLoading", 2);
e([
  s({ type: Boolean, reflect: !0 })
], i.prototype, "disabled", 2);
e([
  s({ type: String })
], i.prototype, "loadingAnimationPath", 2);
i = e([
  f("pkt-button")
], i);
export {
  i as P
};