@oslokommune/punkt-elements/dist/messagebox-Ct9lfe0Z.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";
var u = {
	name: "pkt-messagebox",
	react: "PktMessagebox",
	"css-class": "pkt-messagebox",
	isElement: !0,
	isPureReact: !0,
	events: {
		onClose: { description: "React: Event som trigges når meldingsboksen lukkes" },
		"on-close": { description: "Vue: Event som trigges når meldingsboksen lukkes" }
	},
	props: {
		title: {
			name: "Tittel",
			description: "Tittelen på meldingsboksen",
			type: "string",
			category: "contents"
		},
		skin: {
			name: "Utseende",
			description: "Velg farge på meldingsboksen",
			type: [
				"beige",
				"blue",
				"red",
				"green"
			],
			category: "ui",
			default: "beige"
		},
		compact: {
			name: "Kompakt",
			description: "Gjør meldingsboksen mindre",
			type: "boolean",
			category: "ui",
			default: !1
		},
		closable: {
			name: "Kan lukkes",
			description: "Viser lukkeknapp",
			type: "boolean",
			category: "ui",
			default: !1
		}
	},
	slots: { default: { description: "Innholdet i meldingsboksen" } }
}, d = class extends c {
	constructor() {
		super(), this.closable = u.props.closable.default, this.compact = u.props.compact.default, this.title = "", this.skin = u.props.skin.default, this._isClosed = !1, this.close = (e) => {
			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
				detail: { origin: e },
				bubbles: !0
			})), this.dispatchEvent(new CustomEvent("on-close", {
				detail: { origin: e },
				bubbles: !0
			}));
		}, this._isClosed = !1;
	}
	updated(e) {
		super.updated(e), e.has("_isClosed") && l(this, "pkt-hide", this._isClosed);
	}
	render() {
		return t`<div class=${o({
			"pkt-messagebox": !0,
			"pkt-messagebox--compact": this.compact,
			[`pkt-messagebox--${this.skin}`]: this.skin,
			"pkt-messagebox--closable": this.closable,
			"pkt-hide": this._isClosed
		})}>
      ${this.closable ? t`<div class="pkt-messagebox__close">
            <button
              @click=${this.close}
              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
              aria-label="Lukk"
            >
              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
            </button>
          </div>` : n}
      ${this.title ? t`<div class="pkt-messagebox__title">${this.title}</div>` : n}
      <div class="pkt-messagebox__text">${s(this)}</div>
    </div>`;
	}
};
i([a({
	type: Boolean,
	reflect: !0
})], d.prototype, "closable", void 0), i([a({
	type: Boolean,
	reflect: !0
})], 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([r()], d.prototype, "_isClosed", void 0);
try {
	e("pkt-messagebox")(d);
} catch {
	console.warn("Forsøker å definere <pkt-messagebox>, men den er allerede definert");
}
//#endregion
//#region src/components/messagebox/index.ts
var f = d;
//#endregion
export { d as n, f as t };