@oslokommune/punkt-elements/dist/tag-hl59gziI.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, o as n, r, s as i } from "./element-cZ85T_aa.js";
import { t as a } from "./class-map-C8HuhNzZ.js";
import { n as o, t as s } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { t as c } from "./if-defined-Cjj8qN-Z.js";
var l = {
	name: "pkt-tag",
	react: "PktTag",
	"css-class": "pkt-tag",
	isElement: !0,
	"dark-mode": !0,
	props: {
		size: {
			name: "Størrelse",
			description: "Størrelsen på taggen",
			required: !1,
			default: "medium",
			type: [
				"small",
				"medium",
				"large"
			],
			category: "ui"
		},
		iconName: {
			name: "Ikon",
			description: "Navnet på ikonet som skal vises i taggen",
			type: "icon",
			required: !1,
			category: "ui"
		},
		skin: {
			name: "Utseende",
			description: "Utseendet til taggen",
			required: !1,
			default: "blue",
			type: [
				"blue",
				"blue-light",
				"blue-dark",
				"green",
				"red",
				"beige",
				"yellow",
				"gray"
			],
			category: "ui"
		},
		closeTag: {
			name: "Lukk tag",
			description: "Skal taggen ha en lukkeknapp?",
			type: "boolean",
			required: !1,
			default: !1,
			category: "ui"
		},
		textStyle: {
			name: "Tekststil",
			description: "Stilen på teksten i taggen",
			required: !1,
			default: "normal-text",
			type: ["thin-text", "normal-text"],
			category: "ui"
		},
		type: {
			name: "Type, dersom lukkeknapp",
			description: "Type tag, brukes for å spesifisere om det er en knapp, submit eller reset",
			required: !1,
			default: "button",
			type: [
				"button",
				"submit",
				"reset"
			],
			category: "tech"
		},
		ariaLabel: {
			name: "aria-label",
			description: "aria-label for taggen, brukes for tilgjengelighet",
			type: "string",
			required: !1,
			category: "accessibility"
		}
	},
	slots: { default: { description: "Teksten til tag" } }
}, u = class extends s {
	constructor() {
		super(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = l.props.type.default, this.ariaLabel = null, this.buttonTabindex = void 0, this._isClosed = !1, this._ariaDescription = null, this.close = (e) => {
			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
				detail: { origin: e },
				bubbles: !1,
				composed: !0
			})), this.dispatchEvent(new CustomEvent("on-close", {
				detail: { origin: e },
				bubbles: !1,
				composed: !0
			}));
		}, this._isClosed = !1;
	}
	firstUpdated(e) {
		if (super.firstUpdated(e), this.closeTag && !this.ariaLabel) {
			let e = this.querySelector("button span, .pkt-tag > span")?.textContent?.trim();
			e && (this._ariaDescription = `Klikk for å fjerne ${e}`);
		}
	}
	render() {
		let e = {
			"pkt-tag": !0,
			[`pkt-tag--${this.size}`]: !!this.size,
			[`pkt-tag--${this.skin}`]: !!this.skin,
			[`pkt-tag--${this.textStyle}`]: !!this.textStyle
		}, n = {
			"pkt-tag": !0,
			"pkt-btn": !0,
			"pkt-btn--tertiary": !0,
			[`pkt-tag--${this.textStyle}`]: !!this.textStyle,
			[`pkt-tag--${this.size}`]: !!this.size,
			[`pkt-tag--${this.skin}`]: !!this.skin,
			"pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName,
			"pkt-hide": this._isClosed
		};
		return this.closeTag ? t`
        <button
          class=${a(n)}
          type=${this.type}
          tabindex=${c(this.buttonTabindex)}
          @click=${this.close}
          aria-label=${c(this.ariaLabel || void 0)}
          aria-description=${c(this._ariaDescription || void 0)}
        >
          ${this.iconName && t`<pkt-icon
            class="pkt-tag__icon"
            name=${this.iconName}
            aria-hidden="true"
          ></pkt-icon>`}
          <span>${o(this)}</span>
          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
        </button>
      ` : t`
        <span class=${a(e)}>
          ${this.iconName && t`<pkt-icon
            class="pkt-tag__icon"
            name=${this.iconName}
            aria-hidden="true"
          ></pkt-icon>`}
          <span>${o(this)}</span>
        </span>
      `;
	}
};
r([i({
	type: Boolean,
	reflect: !0
})], u.prototype, "closeTag", void 0), r([i({
	type: String,
	reflect: !0
})], u.prototype, "size", void 0), r([i({
	type: String,
	reflect: !0
})], u.prototype, "skin", void 0), r([i({
	type: String,
	reflect: !0
})], u.prototype, "textStyle", void 0), r([i({
	type: String,
	reflect: !0
})], u.prototype, "iconName", void 0), r([i({ type: String })], u.prototype, "type", void 0), r([i({ type: String })], u.prototype, "ariaLabel", void 0), r([i({
	type: Number,
	attribute: "button-tabindex"
})], u.prototype, "buttonTabindex", void 0), r([n()], u.prototype, "_isClosed", void 0), r([n()], u.prototype, "_ariaDescription", void 0);
try {
	e("pkt-tag")(u);
} catch {
	console.warn("Forsøker å definere <pkt-tag>, men den er allerede definert");
}
//#endregion
//#region src/components/tag/index.ts
var d = u;
//#endregion
export { u as n, d as t };