@oslokommune/punkt-elements/dist/alert-B0OUR9oD.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { e as u } from "./class-map-BpTj9gtz.js";
import { P as f, E as h, x as p, n as a, a as v } from "./element-CgEWt74-.js";
import { r as k } from "./state-Bo2bck5_.js";
import { P as m } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as _, n as b } from "./ref-BBYSqgeW.js";
import { u as y } from "./classutils-RQs1k6D9.js";
import "./icon-CC1js8eR.js";
const C = {
  skin: {
    default: "info"
  },
  ariaLive: {
    default: "polite"
  },
  compact: {
    default: !1
  },
  closeAlert: {
    default: !1
  }
}, c = {
  props: C
};
var $ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, s, l, o) => {
  for (var r = o > 1 ? void 0 : o ? g(s, l) : s, n = t.length - 1, d; n >= 0; n--)
    (d = t[n]) && (r = (o ? d(s, l, r) : d(r)) || r);
  return o && r && $(s, l, r), r;
};
let e = class extends f {
  constructor() {
    super(), this.defaultSlot = _(), this.compact = c.props.compact.default, this.title = "", this.skin = c.props.skin.default, this.ariaLive = c.props.ariaLive.default, this["aria-live"] = null, this.closeAlert = c.props.closeAlert.default, this.date = null, this.role = "status", this._isClosed = !1, this.close = (t) => {
      this._isClosed = !0, this.dispatchEvent(
        new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
      ), this.dispatchEvent(
        new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
      );
    }, this.slotController = new m(this, this.defaultSlot), this._isClosed = !1;
  }
  // Lifecycle
  connectedCallback() {
    super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
  }
  attributeChangedCallback(t, s, l) {
    t === "ariaLive" && (this["aria-live"] = l), super.attributeChangedCallback(t, s, l);
  }
  updated(t) {
    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive), t.has("_isClosed") && y(this, "pkt-hide", this._isClosed);
  }
  // Render
  render() {
    const t = {
      "pkt-alert": !0,
      "pkt-alert--compact": this.compact,
      [`pkt-alert--${this.skin}`]: this.skin,
      "pkt-hide": this._isClosed
    }, s = {
      "pkt-alert__grid": !0,
      "pkt-alert__noTitle": !this.title,
      "pkt-alert__noDate": !this.date
    };
    return p`
      <div class=${u(t)} aria-live=${this["aria-live"]}>
        <div class=${u(s)}>
          <pkt-icon
            class="pkt-alert__icon"
            aria-hidden="true"
            name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
          ></pkt-icon>

          ${this.closeAlert ? p`
                <div class="pkt-alert__close">
                  <pkt-button
                    tabindex="0"
                    aria-label="close"
                    size=${this.compact ? "small" : "medium"}
                    type="button"
                    skin="tertiary"
                    iconName="close"
                    variant="icon-only"
                    @click=${this.close}
                  >
                  </pkt-button>
                </div>
              ` : h}
          ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : h}

          <div class="pkt-alert__text" ${b(this.defaultSlot)}></div>

          ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : h}
        </div>
      </div>
    `;
  }
};
i([
  a({ type: Boolean, reflect: !1 })
], e.prototype, "compact", 2);
i([
  a({ type: String, reflect: !0 })
], e.prototype, "title", 2);
i([
  a({ type: String, reflect: !0 })
], e.prototype, "skin", 2);
i([
  a({ type: String })
], e.prototype, "ariaLive", 2);
i([
  a({ type: String, reflect: !0 })
], e.prototype, "aria-live", 2);
i([
  a({ type: Boolean, reflect: !0 })
], e.prototype, "closeAlert", 2);
i([
  a({ type: String, reflect: !0 })
], e.prototype, "date", 2);
i([
  a({ type: String, reflect: !0 })
], e.prototype, "role", 2);
i([
  k()
], e.prototype, "_isClosed", 2);
e = i([
  v("pkt-alert")
], e);
export {
  e as P
};