@oslokommune/punkt-elements/dist/messagebox-DwGdcdm7.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { P as b, E as u, x as n, n as p, a as m } from "./element-CgEWt74-.js";
import { P as h } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as f, n as k } from "./ref-BBYSqgeW.js";
import { e as _ } from "./class-map-BpTj9gtz.js";
import { r as v } from "./state-Bo2bck5_.js";
import "./icon-CC1js8eR.js";
import { u as g } from "./classutils-RQs1k6D9.js";
const x = {
  skin: {
    default: "beige"
  },
  compact: {
    default: !1
  },
  closable: {
    default: !1
  }
}, d = {
  props: x
};
var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, l, a, i) => {
  for (var s = i > 1 ? void 0 : i ? y(l, a) : l, r = t.length - 1, c; r >= 0; r--)
    (c = t[r]) && (s = (i ? c(l, a, s) : c(s)) || s);
  return i && s && C(l, a, s), s;
};
let e = class extends b {
  constructor() {
    super(), this.defaultSlot = f(), this.closable = d.props.closable.default, this.compact = d.props.compact.default, this.title = "", this.skin = d.props.skin.default, this._isClosed = !1, this.close = (t) => {
      this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: t }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0 }));
    }, this.slotController = new h(this, this.defaultSlot), this._isClosed = !1;
  }
  // Lifecycle
  updated(t) {
    super.updated(t), t.has("_isClosed") && g(this, "pkt-hide", this._isClosed);
  }
  // Render
  render() {
    const t = {
      "pkt-messagebox": !0,
      "pkt-messagebox--compact": this.compact,
      [`pkt-messagebox--${this.skin}`]: this.skin,
      "pkt-messagebox--closable": this.closable,
      "pkt-hide": this._isClosed
    };
    return n`<div class=${_(t)}>
      ${this.closable ? n`<div class="pkt-messagebox__close">
            <button
              @click=${this.close}
              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
            >
              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
            </button>
          </div>` : u}
      ${this.title ? n`<div class="pkt-messagebox__title">${this.title}</div>` : u}
      <div class="pkt-messagebox__text" ${k(this.defaultSlot)}></div>
    </div>`;
  }
};
o([
  p({ type: Boolean, reflect: !0 })
], e.prototype, "closable", 2);
o([
  p({ type: Boolean, reflect: !0 })
], e.prototype, "compact", 2);
o([
  p({ type: String, reflect: !0 })
], e.prototype, "title", 2);
o([
  p({ type: String, reflect: !0 })
], e.prototype, "skin", 2);
o([
  v()
], e.prototype, "_isClosed", 2);
e = o([
  m("pkt-messagebox")
], e);
export {
  e as P
};