@oslokommune/punkt-elements/dist/alert-ePJuDtmm.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 { t as l } from "./classutils-DEL164Ur.js";
import "./icon-Co72KtgF.js";
import "./button-BIpd1xJh.js";
var u = {
	name: "pkt-alert",
	react: "PktAlert",
	"css-class": "pkt-alert",
	"dark-mode": !0,
	isElement: !0,
	isPureReact: !0,
	events: {
		onClose: { description: "React: Klikk-event for 'Lukk'-knappen" },
		close: { description: "Vue: Klikk-event for 'Lukk'-knappen" }
	},
	props: {
		title: {
			name: "Tittel",
			description: "Tittelen som vises øverst i på meldingen",
			type: "string",
			category: "contents"
		},
		skin: {
			name: "Utseende",
			description: "Hvordan type melding er dette?",
			type: [
				"info",
				"success",
				"warning",
				"error"
			],
			default: "info",
			category: "ui"
		},
		date: {
			name: "Sist oppdatert",
			description: "Dato som vises nederst i på meldingen",
			type: "string",
			category: "contents"
		},
		ariaLive: {
			name: "aria-live",
			description: "Hvordan skal skjermleseren lese opp meldingen?",
			type: [
				"off",
				"polite",
				"assertive"
			],
			default: "polite",
			category: "accessibility"
		},
		compact: {
			name: "Kompakt",
			description: "Gjør meldingen mindre",
			type: "boolean",
			category: "ui",
			default: !1
		},
		closeAlert: {
			name: "Vis 'Lukk'-knapp",
			description: "Viser 'Lukk'-knappen",
			type: "boolean",
			default: !1,
			category: "ui"
		}
	},
	slots: { default: { description: "Innholdet i meldingen" } }
}, d = class extends c {
	constructor() {
		super(), this.compact = u.props.compact.default, this.title = "", this.skin = u.props.skin.default, this.ariaLive = u.props.ariaLive.default, this.ariaLiveAttr = null, this.closeAlert = u.props.closeAlert.default, this.date = null, this.role = "status", this._isClosed = !1, this.close = (e) => {
			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
				detail: { origin: e },
				bubbles: !0,
				composed: !0
			})), this.dispatchEvent(new CustomEvent("on-close", {
				detail: { origin: e },
				bubbles: !0,
				composed: !0
			}));
		}, this._isClosed = !1;
	}
	connectedCallback() {
		super.connectedCallback(), this.ariaLiveAttr = this.getAttribute("aria-live") || this.ariaLive;
	}
	attributeChangedCallback(e, t, n) {
		e === "ariaLive" && (this.ariaLiveAttr = n), super.attributeChangedCallback(e, t, n);
	}
	updated(e) {
		super.updated(e), e.has("ariaLive") && (this.ariaLiveAttr = this.ariaLive), e.has("_isClosed") && l(this, "pkt-hide", this._isClosed);
	}
	render() {
		let e = {
			"pkt-alert": !0,
			"pkt-alert--compact": this.compact,
			[`pkt-alert--${this.skin}`]: this.skin,
			"pkt-hide": this._isClosed
		}, r = {
			"pkt-alert__grid": !0,
			"pkt-alert__noTitle": !this.title,
			"pkt-alert__noDate": !this.date
		};
		return t`
      <div class=${o(e)} aria-live=${this.ariaLiveAttr}>
        <div class=${o(r)}>
          <pkt-icon
            class="pkt-alert__icon"
            aria-hidden="true"
            name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
          ></pkt-icon>

          ${this.closeAlert ? t`
                <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}
                  >
                    <span class="sr-only">Lukk</span>
                  </pkt-button>
                </div>
              ` : n}
          ${this.title ? t`<div class="pkt-alert__title">${this.title}</div>` : n}

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

          ${this.date ? t`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : n}
        </div>
      </div>
    `;
	}
};
i([a({
	type: Boolean,
	reflect: !1
})], d.prototype, "compact", void 0), i([a({
	type: String,
	reflect: !0
})], d.prototype, "title", void 0), i([a({
	type: String,
	reflect: !0
})], d.prototype, "skin", void 0), i([a({ type: String })], d.prototype, "ariaLive", void 0), i([a({
	type: String,
	reflect: !0,
	attribute: "aria-live"
})], d.prototype, "ariaLiveAttr", void 0), i([a({
	type: Boolean,
	reflect: !0
})], d.prototype, "closeAlert", void 0), i([a({
	type: String,
	reflect: !0
})], d.prototype, "date", void 0), i([a({
	type: String,
	reflect: !0
})], d.prototype, "role", void 0), i([r()], d.prototype, "_isClosed", void 0);
try {
	e("pkt-alert")(d);
} catch {
	console.warn("Forsøker å definere <pkt-alert>, men den er allerede definert");
}
//#endregion
//#region src/components/alert/index.ts
var f = d;
//#endregion
export { d as n, f as t };