@oslokommune/punkt-elements 17.1.3 → 18.0.0

package/dist/input-wrapper-Cci_wTvD.js

@@ -0,0 +1,308 @@
+import { _ as e, d as t, h as n, n as r, u as i } from "./element-BKSPVgs2.js";
+import { t as a } from "./format-BTeSVkED.js";
+import { n as o, t as s } from "./element-with-slot-YUAUFRqw.js";
+import "./alert-xspFetQ8.js";
+import { r as c } from "./icon-HYU1f54x.js";
+import { t as l } from "./if-defined-BF8XcDi5.js";
+import { n as u } from "./utils-BwF4QSrq.js";
+import { t as d } from "./booleanish-OQJTYSrw.js";
+import "./helptext-LShGPm-b.js";
+import { t as f } from "./focus-modality-controller-Dc2S-KqR.js";
+//#region ../../shared-utils/forms/described-by.ts
+var p = (e) => {
+	let t = [];
+	return e.hasHelptext && t.push(`${e.id}-helptext`), e.hasCounter && t.push(`${e.id}-counter-status`), e.ariaDescribedby && t.push(e.ariaDescribedby), t.length ? t.join(" ") : void 0;
+}, m = (e) => `${e}-counter-status`, h = (e, t) => !!t && t > 0 && (e ?? 0) > t, g = {
+	name: "pkt-input-wrapper",
+	react: "PktInputWrapper",
+	"css-class": "pkt-inputwrapper",
+	isElement: !0,
+	isPureReact: !0,
+	events: { toggleHelpText: { description: "Event for å vise eller skjule hjelpetekst i dropdown" } },
+	slots: { default: { description: "Innholdet i input-wrapperen, som kan være et skjemaelement eller en annen komponent" } },
+	props: {
+		forId: {
+			name: "For ID",
+			description: "Id-en til skjemaelementet som dette wrapper rundt",
+			type: "string",
+			required: !0,
+			category: "tech"
+		},
+		label: {
+			name: "Merkelapp",
+			description: "Merkelapp for skjemaelementet",
+			type: "string",
+			required: !0,
+			category: "contents"
+		},
+		helptext: {
+			name: "Hjelpetekst",
+			description: "Hjelpetekst for skjemaelementet",
+			type: "string",
+			category: "contents"
+		},
+		helptextDropdown: {
+			name: "Hjelpetekst i dropdown",
+			description: "Hjelpetekst som vises i ekspanderende felt",
+			type: "string",
+			category: "contents"
+		},
+		helptextDropdownButton: {
+			name: "Tekst i hjelpetekst-knapp",
+			description: "Tekst som vises i knappen for å vise hjelpetekst i dropdown",
+			default: "Les mer <span class='pkt-sr-only'>om feltet</span>",
+			type: "string",
+			category: "contents"
+		},
+		ariaDescribedby: {
+			name: "aria-describedby",
+			description: "Id-en til elementet som beskriver skjemaelementet",
+			type: "string",
+			category: "accessibility"
+		},
+		counter: {
+			name: "Teller",
+			description: "Teller for antall tegn i skjemaelementet",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		counterCurrent: {
+			name: "Tellerverdi",
+			description: "Tellerens nåværende verdi",
+			type: "number",
+			category: "ui",
+			showIf: { counter: !0 }
+		},
+		counterMaxLength: {
+			name: "Maks tegn i teller",
+			description: "Maks antall tegn som kan skrives i skjemaelementet",
+			type: "number",
+			category: "ui",
+			showIf: { counter: !0 }
+		},
+		counterPosition: {
+			name: "Tellerplassering",
+			description: "Telleren sin plassering i forhold til elementet",
+			type: ["top", "bottom"],
+			default: "bottom",
+			category: "ui",
+			showIf: { counter: !0 }
+		},
+		optionalTag: {
+			name: "Vise valgfritt-merking",
+			description: "Viser en merking som indikerer at feltet er valgfritt",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		optionalText: {
+			name: "Valgfritt-tekst",
+			description: "Tekst som vises i valgfritt-merkingen",
+			type: "string",
+			default: "Valgfritt",
+			category: "contents"
+		},
+		requiredTag: {
+			name: "Vise påkrevd-merking",
+			description: "Viser en merking som indikerer at feltet er påkrevd",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		requiredText: {
+			name: "Påkrevd-tekst",
+			description: "Tekst som vises i påkrevd-merkingen",
+			type: "string",
+			default: "Må fylles ut",
+			category: "contents"
+		},
+		tagText: {
+			type: "string",
+			name: "Tag-tekst",
+			description: "Tekst som vises i en tag ved siden av label",
+			category: "ui"
+		},
+		hasError: {
+			name: "Feil",
+			description: "Indikerer at skjemaelementet har en feil",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		errorMessage: {
+			name: "Feilmelding",
+			description: "Feilmelding som vises når skjemaelementet har en feil",
+			type: "string",
+			category: "contents"
+		},
+		disabled: {
+			name: "Deaktivert",
+			description: "Indikerer at skjemaelementet er deaktivert",
+			type: "boolean",
+			default: !1,
+			category: "tech"
+		},
+		inline: {
+			name: "Inline",
+			description: "Indikerer at skjemaelementet skal flyte sammen med sidens innhold",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		hasFieldset: {
+			name: "Er fieldset",
+			description: "Indikerer at innholdet er et fieldset",
+			type: "boolean",
+			default: !1,
+			category: "ui"
+		},
+		useWrapper: {
+			name: "Bruk wrapper",
+			description: "Indikerer om skjemaelementet skal bruke en wrapper",
+			type: "boolean",
+			displayAsFalse: !0,
+			default: !0,
+			category: "ui"
+		},
+		role: {
+			name: "Rolle",
+			description: "ARIA-rolle på wrapperen. Settes ikke som standard. Bruk hasFieldset for reelle grupper.",
+			type: "string",
+			default: null,
+			category: "accessibility"
+		},
+		size: {
+			name: "Størrelse",
+			description: "Visuell størrelse. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.",
+			attribute: "input-wrapper-size",
+			type: [
+				"small",
+				"medium",
+				"xsmall"
+			],
+			default: "medium",
+			category: "ui"
+		}
+	}
+}, _ = class extends s {
+	constructor(...e) {
+		super(...e), this.forId = u(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = g.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = g.props.optionalTag.default, this.requiredTag = g.props.requiredTag.default, this.tagText = null, this.hasError = g.props.hasError.default, this.errorMessage = "", this.disabled = g.props.disabled.default, this.inline = g.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = g.props.hasFieldset.default, this.role = null, this.useWrapper = g.props.useWrapper.default, this.size = "medium", this.focusModality = new f(this);
+	}
+	updated(e) {
+		super.updated(e), this.classList.add("pkt-inputwrapper"), this.classList.toggle("pkt-inputwrapper--error", this.hasError), this.classList.toggle("pkt-inputwrapper--disabled", this.disabled), this.classList.toggle("pkt-inputwrapper--inline", this.inline), this.classList.toggle("pkt-inputwrapper--medium", this.size === "medium"), this.classList.toggle("pkt-inputwrapper--small", this.size === "small"), this.classList.toggle("pkt-inputwrapper--xsmall", this.size === "xsmall"), this.role ? this.setAttribute("aria-labelledby", `${this.forId}-label`) : this.removeAttribute("aria-labelledby");
+	}
+	render() {
+		let t = "pkt-tag pkt-tag--small pkt-tag--thin-text", r = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : n, i = this.pktStrings.get("forms"), s = () => e`
+        ${this.tagText ? e`<span class=${t + " pkt-tag--gray"}>${this.tagText}</span>` : n}
+        ${this.optionalTag ? e`<span class=${t + " pkt-tag--blue-light"}
+              >${this.optionalText ?? i.optional}</span
+            >` : n}
+        ${this.requiredTag ? e`<span class=${t + " pkt-tag--beige"}
+              >${this.requiredText ?? i.required}</span
+            >` : n}
+      `, u = () => this.useWrapper ? this.hasFieldset ? e`<legend
+            class="pkt-inputwrapper__legend"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+          >
+            ${this.label} ${s()}
+          </legend>` : e`<label
+            class="pkt-inputwrapper__label"
+            for="${this.forId}"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+            >${this.label}${s()}</label
+          >` : e`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
+          ${this.label}
+        </label>`, d = () => e`
+        <pkt-helptext
+          class="${l(this.useWrapper ? void 0 : "pkt-hide")}"
+          .forId=${this.forId}
+          .helptext=${this.helptext}
+          .helptextDropdown=${this.helptextDropdown}
+          .helptextDropdownButton=${this.helptextDropdownButton ?? i.readMore}
+          @toggleHelpText=${(e) => {
+			this.toggleDropdown(e);
+		}}
+          >${o(this, "helptext")}</pkt-helptext
+        >
+      `, f = () => {
+			if (!this.counter) return n;
+			let t = h(this.counterCurrent, this.counterMaxLength);
+			return e`<div class="pkt-input__counter" aria-hidden="true">
+          ${this.counterError ? this.counterError : n} ${this.counterCurrent || 0}
+          ${this.counterMaxLength ? `/${this.counterMaxLength}` : n}
+        </div>
+        <div class="pkt-sr-only" id=${m(this.forId)} aria-live="polite">
+          ${t ? a(this.pktStrings.get("validation").counterExceeded, {
+				current: this.counterCurrent ?? 0,
+				max: this.counterMaxLength
+			}) : ""}
+        </div>`;
+		}, p = () => {
+			if (this.hasError && this.errorMessage) {
+				let t = this.size === "medium" ? "small" : "xsmall";
+				return e`<div class="pkt-inputwrapper__alert-wrapper">
+          <pkt-alert
+            skin="error"
+            .size=${t}
+            id=${`${this.forId}-error`}
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            ${c(this.errorMessage)}
+          </pkt-alert>
+        </div>`;
+			}
+			return n;
+		}, g = () => e`
+        ${u()} 
+        ${d()}
+        ${this.counterPosition === "top" ? f() : n}
+        <div class="pkt-contents">${o(this)}</div>
+        ${this.counterPosition === "bottom" ? f() : n} 
+        ${p()}
+      `;
+		return this.hasFieldset ? e`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${r}">
+            ${g()}
+          </fieldset>` : e`<div class="pkt-inputwrapper__fieldset">${g()}</div>`;
+	}
+	toggleDropdown(e) {
+		this.dispatchEvent(new CustomEvent("toggleHelpText", {
+			bubbles: !1,
+			detail: { isOpen: e.detail.isOpen }
+		}));
+	}
+	handleLabelClick() {
+		this.dispatchEvent(new CustomEvent("labelClick", {
+			bubbles: !0,
+			composed: !0,
+			detail: "label clicked"
+		}));
+	}
+};
+r([i({ type: String })], _.prototype, "forId", void 0), r([i({ type: String })], _.prototype, "label", void 0), r([i({ type: String })], _.prototype, "helptext", void 0), r([i({ type: String })], _.prototype, "helptextDropdown", void 0), r([i({ type: String })], _.prototype, "helptextDropdownButton", void 0), r([i({ type: Boolean })], _.prototype, "counter", void 0), r([i({ type: Number })], _.prototype, "counterCurrent", void 0), r([i({ type: Number })], _.prototype, "counterMaxLength", void 0), r([i({ type: String })], _.prototype, "counterError", void 0), r([i({
+	type: String,
+	reflect: !1
+})], _.prototype, "counterPosition", void 0), r([i({ type: Boolean })], _.prototype, "optionalTag", void 0), r([i({ type: String })], _.prototype, "optionalText", void 0), r([i({ type: Boolean })], _.prototype, "requiredTag", void 0), r([i({ type: String })], _.prototype, "requiredText", void 0), r([i({ type: String })], _.prototype, "tagText", void 0), r([i({ type: Boolean })], _.prototype, "hasError", void 0), r([i({ type: String })], _.prototype, "errorMessage", void 0), r([i({ type: Boolean })], _.prototype, "disabled", void 0), r([i({ type: Boolean })], _.prototype, "inline", void 0), r([i({ type: String })], _.prototype, "ariaDescribedby", void 0), r([i({ type: Boolean })], _.prototype, "hasFieldset", void 0), r([i({
+	type: String,
+	reflect: !0
+})], _.prototype, "role", void 0), r([i({
+	type: Boolean,
+	reflect: !0,
+	converter: d
+})], _.prototype, "useWrapper", void 0), r([i({
+	type: String,
+	attribute: "input-wrapper-size"
+})], _.prototype, "size", void 0);
+try {
+	t("pkt-input-wrapper")(_);
+} catch {
+	console.warn("Forsøker å definere <pkt-input-wrapper>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/input-wrapper/index.ts
+var v = _;
+//#endregion
+export { _ as n, p as r, v as t };

package/dist/input-wrapper-DDfapoRX.cjs

@@ -0,0 +1,58 @@
+const e=require("./element-B8OGznK0.cjs"),t=require("./format-B8meU8Tm.cjs"),n=require("./element-with-slot-DTxILHVv.cjs");require("./alert-COeHz6o2.cjs");const r=require("./icon-BmMC09mi.cjs"),i=require("./if-defined-CVYApOgK.cjs"),a=require("./utils-63cRpWut.cjs"),o=require("./booleanish-BF8l4scU.cjs");require("./helptext-DYFdcylX.cjs");const s=require("./focus-modality-controller-C1ocyv2J.cjs");var c=e=>{let t=[];return e.hasHelptext&&t.push(`${e.id}-helptext`),e.hasCounter&&t.push(`${e.id}-counter-status`),e.ariaDescribedby&&t.push(e.ariaDescribedby),t.length?t.join(` `):void 0},l=e=>`${e}-counter-status`,u=(e,t)=>!!t&&t>0&&(e??0)>t,d={name:`pkt-input-wrapper`,react:`PktInputWrapper`,"css-class":`pkt-inputwrapper`,isElement:!0,isPureReact:!0,events:{toggleHelpText:{description:`Event for å vise eller skjule hjelpetekst i dropdown`}},slots:{default:{description:`Innholdet i input-wrapperen, som kan være et skjemaelement eller en annen komponent`}},props:{forId:{name:`For ID`,description:`Id-en til skjemaelementet som dette wrapper rundt`,type:`string`,required:!0,category:`tech`},label:{name:`Merkelapp`,description:`Merkelapp for skjemaelementet`,type:`string`,required:!0,category:`contents`},helptext:{name:`Hjelpetekst`,description:`Hjelpetekst for skjemaelementet`,type:`string`,category:`contents`},helptextDropdown:{name:`Hjelpetekst i dropdown`,description:`Hjelpetekst som vises i ekspanderende felt`,type:`string`,category:`contents`},helptextDropdownButton:{name:`Tekst i hjelpetekst-knapp`,description:`Tekst som vises i knappen for å vise hjelpetekst i dropdown`,default:`Les mer <span class='pkt-sr-only'>om feltet</span>`,type:`string`,category:`contents`},ariaDescribedby:{name:`aria-describedby`,description:`Id-en til elementet som beskriver skjemaelementet`,type:`string`,category:`accessibility`},counter:{name:`Teller`,description:`Teller for antall tegn i skjemaelementet`,type:`boolean`,default:!1,category:`ui`},counterCurrent:{name:`Tellerverdi`,description:`Tellerens nåværende verdi`,type:`number`,category:`ui`,showIf:{counter:!0}},counterMaxLength:{name:`Maks tegn i teller`,description:`Maks antall tegn som kan skrives i skjemaelementet`,type:`number`,category:`ui`,showIf:{counter:!0}},counterPosition:{name:`Tellerplassering`,description:`Telleren sin plassering i forhold til elementet`,type:[`top`,`bottom`],default:`bottom`,category:`ui`,showIf:{counter:!0}},optionalTag:{name:`Vise valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,type:`boolean`,default:!1,category:`ui`},optionalText:{name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,type:`string`,default:`Valgfritt`,category:`contents`},requiredTag:{name:`Vise påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,type:`boolean`,default:!1,category:`ui`},requiredText:{name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,type:`string`,default:`Må fylles ut`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},hasError:{name:`Feil`,description:`Indikerer at skjemaelementet har en feil`,type:`boolean`,default:!1,category:`ui`},errorMessage:{name:`Feilmelding`,description:`Feilmelding som vises når skjemaelementet har en feil`,type:`string`,category:`contents`},disabled:{name:`Deaktivert`,description:`Indikerer at skjemaelementet er deaktivert`,type:`boolean`,default:!1,category:`tech`},inline:{name:`Inline`,description:`Indikerer at skjemaelementet skal flyte sammen med sidens innhold`,type:`boolean`,default:!1,category:`ui`},hasFieldset:{name:`Er fieldset`,description:`Indikerer at innholdet er et fieldset`,type:`boolean`,default:!1,category:`ui`},useWrapper:{name:`Bruk wrapper`,description:`Indikerer om skjemaelementet skal bruke en wrapper`,type:`boolean`,displayAsFalse:!0,default:!0,category:`ui`},role:{name:`Rolle`,description:`ARIA-rolle på wrapperen. Settes ikke som standard. Bruk hasFieldset for reelle grupper.`,type:`string`,default:null,category:`accessibility`},size:{name:`Størrelse`,description:`Visuell størrelse. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-wrapper-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`}}},f=class extends n.t{constructor(...e){super(...e),this.forId=a.n(),this.label=``,this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=d.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition=`bottom`,this.optionalTag=d.props.optionalTag.default,this.requiredTag=d.props.requiredTag.default,this.tagText=null,this.hasError=d.props.hasError.default,this.errorMessage=``,this.disabled=d.props.disabled.default,this.inline=d.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=d.props.hasFieldset.default,this.role=null,this.useWrapper=d.props.useWrapper.default,this.size=`medium`,this.focusModality=new s.t(this)}updated(e){super.updated(e),this.classList.add(`pkt-inputwrapper`),this.classList.toggle(`pkt-inputwrapper--error`,this.hasError),this.classList.toggle(`pkt-inputwrapper--disabled`,this.disabled),this.classList.toggle(`pkt-inputwrapper--inline`,this.inline),this.classList.toggle(`pkt-inputwrapper--medium`,this.size===`medium`),this.classList.toggle(`pkt-inputwrapper--small`,this.size===`small`),this.classList.toggle(`pkt-inputwrapper--xsmall`,this.size===`xsmall`),this.role?this.setAttribute(`aria-labelledby`,`${this.forId}-label`):this.removeAttribute(`aria-labelledby`)}render(){let a=`pkt-tag pkt-tag--small pkt-tag--thin-text`,o=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.h,s=this.pktStrings.get(`forms`),c=()=>e._`
+        ${this.tagText?e._`<span class=${a+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
+        ${this.optionalTag?e._`<span class=${a+` pkt-tag--blue-light`}
+              >${this.optionalText??s.optional}</span
+            >`:e.h}
+        ${this.requiredTag?e._`<span class=${a+` pkt-tag--beige`}
+              >${this.requiredText??s.required}</span
+            >`:e.h}
+      `,d=()=>this.useWrapper?this.hasFieldset?e._`<legend
+            class="pkt-inputwrapper__legend"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+          >
+            ${this.label} ${c()}
+          </legend>`:e._`<label
+            class="pkt-inputwrapper__label"
+            for="${this.forId}"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+            >${this.label}${c()}</label
+          >`:e._`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
+          ${this.label}
+        </label>`,f=()=>e._`
+        <pkt-helptext
+          class="${i.t(this.useWrapper?void 0:`pkt-hide`)}"
+          .forId=${this.forId}
+          .helptext=${this.helptext}
+          .helptextDropdown=${this.helptextDropdown}
+          .helptextDropdownButton=${this.helptextDropdownButton??s.readMore}
+          @toggleHelpText=${e=>{this.toggleDropdown(e)}}
+          >${n.n(this,`helptext`)}</pkt-helptext
+        >
+      `,p=()=>{if(!this.counter)return e.h;let n=u(this.counterCurrent,this.counterMaxLength);return e._`<div class="pkt-input__counter" aria-hidden="true">
+          ${this.counterError?this.counterError:e.h} ${this.counterCurrent||0}
+          ${this.counterMaxLength?`/${this.counterMaxLength}`:e.h}
+        </div>
+        <div class="pkt-sr-only" id=${l(this.forId)} aria-live="polite">
+          ${n?t.t(this.pktStrings.get(`validation`).counterExceeded,{current:this.counterCurrent??0,max:this.counterMaxLength}):``}
+        </div>`},m=()=>{if(this.hasError&&this.errorMessage){let t=this.size===`medium`?`small`:`xsmall`;return e._`<div class="pkt-inputwrapper__alert-wrapper">
+          <pkt-alert
+            skin="error"
+            .size=${t}
+            id=${`${this.forId}-error`}
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            ${r.r(this.errorMessage)}
+          </pkt-alert>
+        </div>`}return e.h},h=()=>e._`
+        ${d()} 
+        ${f()}
+        ${this.counterPosition===`top`?p():e.h}
+        <div class="pkt-contents">${n.n(this)}</div>
+        ${this.counterPosition===`bottom`?p():e.h} 
+        ${m()}
+      `;return this.hasFieldset?e._`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${o}">
+            ${h()}
+          </fieldset>`:e._`<div class="pkt-inputwrapper__fieldset">${h()}</div>`}toggleDropdown(e){this.dispatchEvent(new CustomEvent(`toggleHelpText`,{bubbles:!1,detail:{isOpen:e.detail.isOpen}}))}handleLabelClick(){this.dispatchEvent(new CustomEvent(`labelClick`,{bubbles:!0,composed:!0,detail:`label clicked`}))}};e.n([e.u({type:String})],f.prototype,`forId`,void 0),e.n([e.u({type:String})],f.prototype,`label`,void 0),e.n([e.u({type:String})],f.prototype,`helptext`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdown`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdownButton`,void 0),e.n([e.u({type:Boolean})],f.prototype,`counter`,void 0),e.n([e.u({type:Number})],f.prototype,`counterCurrent`,void 0),e.n([e.u({type:Number})],f.prototype,`counterMaxLength`,void 0),e.n([e.u({type:String})],f.prototype,`counterError`,void 0),e.n([e.u({type:String,reflect:!1})],f.prototype,`counterPosition`,void 0),e.n([e.u({type:Boolean})],f.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],f.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],f.prototype,`requiredText`,void 0),e.n([e.u({type:String})],f.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasError`,void 0),e.n([e.u({type:String})],f.prototype,`errorMessage`,void 0),e.n([e.u({type:Boolean})],f.prototype,`disabled`,void 0),e.n([e.u({type:Boolean})],f.prototype,`inline`,void 0),e.n([e.u({type:String})],f.prototype,`ariaDescribedby`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasFieldset`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`role`,void 0),e.n([e.u({type:Boolean,reflect:!0,converter:o.t})],f.prototype,`useWrapper`,void 0),e.n([e.u({type:String,attribute:`input-wrapper-size`})],f.prototype,`size`,void 0);try{e.d(`pkt-input-wrapper`)(f)}catch{console.warn(`Forsøker å definere <pkt-input-wrapper>, men den er allerede definert`)}var p=f;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/dist/{link-DK7gvmnj.cjs → link-11g2ZNin.cjs}

@@ -1,7 +1,7 @@
-const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs"),n=require("./element-with-slot-Bj7nm7fO.cjs");require("./icon-9iwd2F2l.cjs");var r={name:`pkt-link`,react:`PktLink`,"css-class":`pkt-link`,"dark-mode":!0,isElement:!0,props:{href:{name:`URL`,description:`URL til lenken`,type:`string`,default:`#`,category:`contents`},target:{name:`Mål`,description:`Mål for lenken`,type:[`_blank`,`_self`,`_parent`,`_top`],default:`_self`,category:`tech`},iconName:{name:`Ikon`,description:`Ikon som skal vises ved siden av lenketeksten`,type:`icon`,category:`ui`},iconPosition:{name:`Ikonposisjon`,description:`Posisjonen til ikonet i forhold til lenketeksten`,type:[`left`,`right`],category:`ui`},renderLink:{name:`Egendefinert lenkekomponent`,description:`React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et objekt med href, className, children og props. Standard er et vanlig <a>-element.`,type:`function`,required:!1,category:`tech`,reactOnly:!0}},slots:{default:{description:`Innholdet i lenken`}}},i=class extends n.t{constructor(...e){super(...e),this.href=r.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=!1,this.target=r.props.target.default}render(){let r={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition===`left`||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition===`right`,"pkt-link--external":this.external};return e.p`<a
+const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs"),n=require("./element-with-slot-DTxILHVv.cjs");require("./icon-BmMC09mi.cjs");var r={name:`pkt-link`,react:`PktLink`,"css-class":`pkt-link`,"dark-mode":!0,isElement:!0,props:{href:{name:`URL`,description:`URL til lenken`,type:`string`,default:`#`,category:`contents`},target:{name:`Mål`,description:`Mål for lenken`,type:[`_blank`,`_self`,`_parent`,`_top`],default:`_self`,category:`tech`},iconName:{name:`Ikon`,description:`Ikon som skal vises ved siden av lenketeksten`,type:`icon`,category:`ui`},iconPosition:{name:`Ikonposisjon`,description:`Posisjonen til ikonet i forhold til lenketeksten`,type:[`left`,`right`],category:`ui`},renderLink:{name:`Egendefinert lenkekomponent`,description:`React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et objekt med href, className, children og props. Standard er et vanlig <a>-element.`,type:`function`,required:!1,category:`tech`,reactOnly:!0}},slots:{default:{description:`Innholdet i lenken`}}},i=class extends n.t{constructor(...e){super(...e),this.href=r.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=!1,this.target=r.props.target.default}render(){let r={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition===`left`||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition===`right`,"pkt-link--external":this.external};return e._`<a
       class=${t.t(r)}
       href=${this.href}
       .target=${this.target}
-      .rel=${this.external?`noopener noreferrer`:e.d}
-      >${this.iconName?e.p`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:``} <span>${n.n(this)}</span></a
-    >`}};e.n([e.o({type:String,reflect:!0})],i.prototype,`href`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`iconName`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`iconPosition`,void 0),e.n([e.o({type:Boolean,reflect:!0})],i.prototype,`external`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`target`,void 0);try{e.s(`pkt-link`)(i)}catch{console.warn(`Forsøker å definere <pkt-link>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+      .rel=${this.external?`noopener noreferrer`:e.h}
+      >${this.iconName?e._`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:``} <span>${n.n(this)}</span></a
+    >`}};e.n([e.u({type:String,reflect:!0})],i.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`iconName`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`iconPosition`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`external`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`target`,void 0);try{e.d(`pkt-link`)(i)}catch{console.warn(`Forsøker å definere <pkt-link>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/{link-D-Eqm5KH.js → link-CQK0SH4H.js}

@@ -1,7 +1,7 @@
-import { d as e, n as t, o as n, p as r, s as i } from "./element-ChsFgr_B.js";
-import { t as a } from "./class-map-CnWCnBSX.js";
-import { n as o, t as s } from "./element-with-slot-BvG9ctC-.js";
-import "./icon-D-LA22xD.js";
+import { _ as e, d as t, h as n, n as r, u as i } from "./element-BKSPVgs2.js";
+import { t as a } from "./class-map-F1DJHyb7.js";
+import { n as o, t as s } from "./element-with-slot-YUAUFRqw.js";
+import "./icon-HYU1f54x.js";
 var c = {
 	name: "pkt-link",
 	react: "PktLink",
@@ -61,33 +61,33 @@ var c = {
 			"pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
 			"pkt-link--external": this.external
 		};
-		return r`<a
+		return e`<a
       class=${a(t)}
       href=${this.href}
       .target=${this.target}
-      .rel=${this.external ? "noopener noreferrer" : e}
-      >${this.iconName ? r`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span>${o(this)}</span></a
+      .rel=${this.external ? "noopener noreferrer" : n}
+      >${this.iconName ? e`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span>${o(this)}</span></a
     >`;
 	}
 };
-t([n({
+r([i({
 	type: String,
 	reflect: !0
-})], l.prototype, "href", void 0), t([n({
+})], l.prototype, "href", void 0), r([i({
 	type: String,
 	reflect: !0
-})], l.prototype, "iconName", void 0), t([n({
+})], l.prototype, "iconName", void 0), r([i({
 	type: String,
 	reflect: !0
-})], l.prototype, "iconPosition", void 0), t([n({
+})], l.prototype, "iconPosition", void 0), r([i({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "external", void 0), t([n({
+})], l.prototype, "external", void 0), r([i({
 	type: String,
 	reflect: !0
 })], l.prototype, "target", void 0);
 try {
-	i("pkt-link")(l);
+	t("pkt-link")(l);
 } catch {
 	console.warn("Forsøker å definere <pkt-link>, men den er allerede definert");
 }

package/dist/{linkcard-zqbg7Oqm.js → linkcard-B4GlmjJ6.js}

@@ -1,50 +1,50 @@
-import { n as e, o as t, p as n, s as r } from "./element-ChsFgr_B.js";
-import { n as i, t as a } from "./element-with-slot-BvG9ctC-.js";
-import "./icon-D-LA22xD.js";
-import { t as o } from "./if-defined-CGzIlZ9-.js";
+import { _ as e, d as t, n, u as r } from "./element-BKSPVgs2.js";
+import { n as i, t as a } from "./element-with-slot-YUAUFRqw.js";
+import "./icon-HYU1f54x.js";
+import { t as o } from "./if-defined-BF8XcDi5.js";
 //#region src/components/linkcard/linkcard.ts
 var s = class extends a {
 	constructor(...e) {
 		super(...e), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal";
 	}
 	render() {
-		let e = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), t = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
-		return n`
+		let t = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), n = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
+		return e`
       <a
         href=${this.href}
-        class=${e}
+        class=${t}
         target=${this.openInNewTab ? "_blank" : "_self"}
         rel=${o(this.openInNewTab ? "noopener noreferrer" : void 0)}
       >
-        ${this.iconName && n`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
-        ${this.title && n`<div class=${t}>${this.title}</div>`}
+        ${this.iconName && e`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title && e`<div class=${n}>${this.title}</div>`}
 
         <div class="pkt-linkcard__text">${i(this)}</div>
       </a>
     `;
 	}
 };
-e([t({
+n([r({
 	type: String,
 	reflect: !0
-})], s.prototype, "title", void 0), e([t({
+})], s.prototype, "title", void 0), n([r({
 	type: String,
 	reflect: !0
-})], s.prototype, "href", void 0), e([t({
+})], s.prototype, "href", void 0), n([r({
 	type: String,
 	reflect: !0
-})], s.prototype, "iconName", void 0), e([t({
+})], s.prototype, "iconName", void 0), n([r({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "external", void 0), e([t({
+})], s.prototype, "external", void 0), n([r({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "openInNewTab", void 0), e([t({
+})], s.prototype, "openInNewTab", void 0), n([r({
 	type: String,
 	reflect: !0
 })], s.prototype, "skin", void 0);
 try {
-	r("pkt-linkcard")(s);
+	t("pkt-linkcard")(s);
 } catch {
 	console.warn("Forsøker å definere <pkt-linkcard>, men den er allerede definert");
 }

package/dist/linkcard-DNYsVlV6.cjs

@@ -0,0 +1,13 @@
+const e=require("./element-B8OGznK0.cjs"),t=require("./element-with-slot-DTxILHVv.cjs");require("./icon-BmMC09mi.cjs");const n=require("./if-defined-CVYApOgK.cjs");var r=class extends t.t{constructor(...e){super(...e),this.title=``,this.href=`#`,this.iconName=``,this.external=!1,this.openInNewTab=!1,this.skin=`normal`}render(){let r=[`pkt-linkcard`,this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(` `),i=[`pkt-linkcard__title`,this.external&&`pkt-link pkt-link--external`].filter(Boolean).join(` `);return e._`
+      <a
+        href=${this.href}
+        class=${r}
+        target=${this.openInNewTab?`_blank`:`_self`}
+        rel=${n.t(this.openInNewTab?`noopener noreferrer`:void 0)}
+      >
+        ${this.iconName&&e._`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title&&e._`<div class=${i}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text">${t.n(this)}</div>
+      </a>
+    `}};e.n([e.u({type:String,reflect:!0})],r.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`iconName`,void 0),e.n([e.u({type:Boolean,reflect:!0})],r.prototype,`external`,void 0),e.n([e.u({type:Boolean,reflect:!0})],r.prototype,`openInNewTab`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`skin`,void 0);try{e.d(`pkt-linkcard`)(r)}catch{console.warn(`Forsøker å definere <pkt-linkcard>, men den er allerede definert`)}var i=r;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});