@oslokommune/punkt-elements 17.1.2 → 18.0.0

package/dist/{calendar-pOW3R5Pw.js → calendar-DgjCKMMV.js}

@@ -1,6 +1,6 @@
-import { a as e, d as t, n, o as r, p as i, s as a, t as o } from "./element-ChsFgr_B.js";
-import { t as s } from "./class-map-CnWCnBSX.js";
-import "./icon-D-LA22xD.js";
+import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-BKSPVgs2.js";
+import { t as s } from "./class-map-F1DJHyb7.js";
+import "./icon-HYU1f54x.js";
 import { _ as c, a as l, b as u, d, f, g as p, l as m, m as h, o as g, p as _, t as v, v as y, y as b } from "./converters-CkjLSYpa.js";
 //#region ../../node_modules/date-fns/addDays.js
 function x(e, t, n) {
@@ -282,9 +282,20 @@ function U(e) {
 }
 //#endregion
 //#region src/components/calendar/calendar.ts
-var W = class extends o {
+var W = class extends a {
 	constructor(...e) {
-		super(...e), this.selected = [], this.multiple = T.props.multiple.default, this.maxMultiple = T.props.maxMultiple.default, this.range = T.props.range.default, this.earliest = T.props.earliest.default, this.latest = T.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.weeknumbers = T.props.weeknumbers.default, this.withcontrols = T.props.withcontrols.default, this.currentmonth = null, this.today = null, this.dayStrings = this.strings.dates.daysShort, this.dayStringsLong = this.strings.dates.days, this.monthStrings = this.strings.dates.months, this.weekString = this.strings.dates.week, this.prevMonthString = this.strings.dates.prevMonth, this.nextMonthString = this.strings.dates.nextMonth, this._selected = [], this.inRange = {}, this.rangeHovered = null, this.year = 0, this.month = 0, this.week = 0, this.currentmonthtouched = !1, this.focusedDate = null, this.selectableDates = [], this.tabIndexSet = 0;
+		super(...e), this.selected = [], this.multiple = T.props.multiple.default, this.maxMultiple = T.props.maxMultiple.default, this.range = T.props.range.default, this.earliest = T.props.earliest.default, this.latest = T.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.weeknumbers = T.props.weeknumbers.default, this.withcontrols = T.props.withcontrols.default, this.currentmonth = null, this.today = null, this._selected = [], this.inRange = {}, this.rangeHovered = null, this.year = 0, this.month = 0, this.week = 0, this.currentmonthtouched = !1, this.focusedDate = null, this.selectableDates = [], this.tabIndexSet = 0;
+	}
+	get calendarStrings() {
+		let e = this.pktStrings.get("dates"), t = this.pktStrings.get("calendar");
+		return {
+			daysShort: this.dayStrings ?? e.daysShort,
+			days: this.dayStringsLong ?? e.days,
+			months: this.monthStrings ?? e.months,
+			week: this.weekString ?? e.week,
+			prevMonth: this.prevMonthString ?? t.prevMonth,
+			nextMonth: this.nextMonthString ?? t.nextMonth
+		};
 	}
 	get todayDate() {
 		return this.today ? h(this.today) : p();
@@ -326,7 +337,7 @@ var W = class extends o {
 		}
 	}
 	render() {
-		return i`
+		return e`
       <div
         class="pkt-calendar ${this.weeknumbers ? "pkt-cal-weeknumbers" : ""}"
         @focusout=${this.closeEvent}
@@ -335,8 +346,7 @@ var W = class extends o {
 		}}
       >
         <nav class="pkt-cal-month-nav">
-          ${this.renderMonthNavButton("prev")}
-          ${this.renderMonthNav()}
+          ${this.renderMonthNavButton("prev")} ${this.renderMonthNav()}
           ${this.renderMonthNavButton("next")}
         </nav>
         <table
@@ -354,41 +364,43 @@ var W = class extends o {
       </div>
     `;
 	}
-	renderMonthNavButton(e) {
-		let n = e === "prev", r = n ? this.isPrevMonthAllowed() : this.isNextMonthAllowed(), a = n ? this.prevMonthString : this.nextMonthString, o = n ? "chevron-thin-left" : "chevron-thin-right", s = n ? "pkt-calendar__prev-month" : "pkt-calendar__next-month", c = n ? () => this.prevMonth() : () => this.nextMonth();
-		return i`<div>
+	renderMonthNavButton(t) {
+		let r = t === "prev", i = r ? this.isPrevMonthAllowed() : this.isNextMonthAllowed(), { prevMonth: a, nextMonth: o } = this.calendarStrings, s = r ? a : o, c = r ? "chevron-thin-left" : "chevron-thin-right", l = r ? "pkt-calendar__prev-month" : "pkt-calendar__next-month", u = r ? () => this.prevMonth() : () => this.nextMonth();
+		return e`<div>
       <button
         type="button"
-        aria-label="${a}"
-        @click=${() => r && c()}
+        aria-label="${s}"
+        @click=${() => i && u()}
         @keydown=${(e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r && c());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i && u());
 		}}
-        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${s} ${r ? "" : "pkt-invisible"}"
-        .data-disabled=${r ? t : "disabled"}
-        ?aria-disabled=${!r}
-        tabindex=${r ? "0" : "-1"}
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${l} ${i ? "" : "pkt-invisible"}"
+        .data-disabled=${i ? n : "disabled"}
+        ?aria-disabled=${!i}
+        tabindex=${i ? "0" : "-1"}
       >
-        <pkt-icon class="pkt-btn__icon" name="${o}"></pkt-icon>
-        <span class="pkt-btn__text">${a}</span>
+        <pkt-icon class="pkt-btn__icon" name="${c}"></pkt-icon>
+        <span class="pkt-btn__text">${s}</span>
       </button>
     </div>`;
 	}
 	renderDayNames() {
-		let e = [];
-		this.weeknumbers && e.push(i`<th><div class="pkt-calendar__week-number">${this.weekString}</div></th>`);
-		for (let t = 0; t < this.dayStrings.length; t++) e.push(i`<th>
-          <div class="pkt-calendar__day-name" aria-label="${this.dayStringsLong[t]}">
-            ${this.dayStrings[t]}
-          </div>
+		let t = [];
+		this.weeknumbers && t.push(e`<th><div class="pkt-calendar__week-number">${this.calendarStrings.week}</div></th>`);
+		let { days: n, daysShort: r } = this.calendarStrings;
+		for (let i = 0; i < r.length; i++) t.push(e`<th>
+          <div class="pkt-calendar__day-name" aria-label="${n[i]}">${r[i]}</div>
         </th>`);
-		return i`<tr class="pkt-cal-week-row">${e}</tr>`;
+		return e`<tr class="pkt-cal-week-row">
+      ${t}
+    </tr>`;
 	}
 	renderMonthNav() {
-		return this.withcontrols ? i`<div class="pkt-cal-month-picker">
-        <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
+		let t = this.pktStrings.get("dates");
+		return this.withcontrols ? e`<div class="pkt-cal-month-picker">
+        <label for="${this.id}-monthnav" class="pkt-hide">${t.month}</label>
         <select
-          aria-label="${this.strings.dates.month}"
+          aria-label="${t.month}"
           class="pkt-input pkt-input-compact"
           id="${this.id}-monthnav"
           @change=${(e) => {
@@ -397,11 +409,11 @@ var W = class extends o {
 			this.changeMonth(this.year, parseInt(t.value));
 		}}
         >
-          ${this.monthStrings.map((e, t) => i`<option value=${t} ?selected=${this.month === t}>${e}</option>`)}
+          ${this.calendarStrings.months.map((t, n) => e`<option value=${n} ?selected=${this.month === n}>${t}</option>`)}
         </select>
-        <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
+        <label for="${this.id}-yearnav" class="pkt-hide">${t.year}</label>
         <input
-          aria-label="${this.strings.dates.year}"
+          aria-label="${t.year}"
           class="pkt-input pkt-cal-input-year pkt-input-compact"
           id="${this.id}-yearnav"
           type="number"
@@ -414,8 +426,8 @@ var W = class extends o {
 		}}
           .value=${this.year}
         />
-      </div>` : i`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
-      ${this.monthStrings[this.month]} ${this.year}
+      </div>` : e`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
+      ${this.calendarStrings.months[this.month]} ${this.year}
     </div>`;
 	}
 	getDayViewData(e, t) {
@@ -476,15 +488,15 @@ var W = class extends o {
 	handleDayFocus(e, t) {
 		this.range && !this.isExcluded(e) && this.handleRangeHover(e), this.focusedDate = t;
 	}
-	renderDayView(e, n) {
-		let r = this.getDayViewData(e, n), { currentDate: a, currentDateISO: o, isSelected: c, isDisabled: l, ariaLabel: u, tabindex: d } = r;
+	renderDayView(t, r) {
+		let i = this.getDayViewData(t, r), { currentDate: a, currentDateISO: o, isSelected: c, isDisabled: l, ariaLabel: u, tabindex: d } = i;
 		this.selectableDates.push({
 			currentDateISO: o,
 			isDisabled: l,
 			tabindex: d
 		});
-		let f = this.getDayCellClasses(r), p = this.getDayButtonClasses(r);
-		return i`<td class=${s(f)}>
+		let f = this.getDayCellClasses(i), p = this.getDayButtonClasses(i);
+		return e`<td class=${s(f)}>
       <button
         type="button"
         aria-pressed=${c ? "true" : "false"}
@@ -494,7 +506,7 @@ var W = class extends o {
         @focus=${() => this.handleDayFocus(a, o)}
         aria-label="${u}"
         tabindex=${d}
-        data-disabled=${l ? "disabled" : t}
+        data-disabled=${l ? "disabled" : n}
         data-date=${o}
         @keydown=${(e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleDateSelect(a));
@@ -503,43 +515,45 @@ var W = class extends o {
 			l || (e.preventDefault(), this.handleDateSelect(a));
 		}}
       >
-        <span class="pkt-btn__text pkt-txt-14-light">${e}</span>
+        <span class="pkt-btn__text pkt-txt-14-light">${t}</span>
       </button>
     </td>`;
 	}
-	renderEmptyDayCell(e) {
-		return i`<td class="pkt-cal-other">
+	renderEmptyDayCell(t) {
+		return e`<td class="pkt-cal-other">
       <div
         class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
         data-disabled="disabled"
       >
-        <span class="pkt-btn__text pkt-txt-14-light">${e}</span>
+        <span class="pkt-btn__text pkt-txt-14-light">${t}</span>
       </div>
     </td>`;
 	}
-	renderWeekRow(e) {
-		return i`<tr class="pkt-cal-week-row" role="row">${e}</tr>`;
+	renderWeekRow(t) {
+		return e`<tr class="pkt-cal-week-row" role="row">
+      ${t}
+    </tr>`;
 	}
 	renderCalendarBody() {
-		let e = this.todayDate, t = A(this.year, this.month);
+		let t = this.todayDate, n = A(this.year, this.month);
 		this.selectableDates = [], this.tabIndexSet = 0;
-		let n = 1;
-		this.week = t.initialWeek;
-		let r = [];
-		for (let a = 0; a < t.numRows; a++) {
+		let r = 1;
+		this.week = n.initialWeek;
+		let i = [];
+		for (let a = 0; a < n.numRows; a++) {
 			let o = [];
-			this.weeknumbers && o.push(i`<td class="pkt-cal-week">${this.week}</td>`), this.week++;
-			for (let r = 0; r < 7; r++) {
-				let i = j(a, r, n, t);
-				if (i === "current-month") o.push(this.renderDayView(n, e)), n++;
+			this.weeknumbers && o.push(e`<td class="pkt-cal-week">${this.week}</td>`), this.week++;
+			for (let e = 0; e < 7; e++) {
+				let i = j(a, e, r, n);
+				if (i === "current-month") o.push(this.renderDayView(r, t)), r++;
 				else {
-					let e = M(i, r, n, t);
-					o.push(this.renderEmptyDayCell(e)), i === "next-month" && n++;
+					let t = M(i, e, r, n);
+					o.push(this.renderEmptyDayCell(t)), i === "next-month" && r++;
 				}
 			}
-			r.push(this.renderWeekRow(o));
+			i.push(this.renderWeekRow(o));
 		}
-		return r;
+		return i;
 	}
 	isExcluded(e) {
 		return E(e, this.getDateConstraints());
@@ -623,30 +637,30 @@ var W = class extends o {
 		}));
 	}
 };
-n([r({ converter: v.csvToArray })], W.prototype, "selected", void 0), n([r({ type: Boolean })], W.prototype, "multiple", void 0), n([r({
+i([o({ converter: v.csvToArray })], W.prototype, "selected", void 0), i([o({ type: Boolean })], W.prototype, "multiple", void 0), i([o({
 	type: Number,
 	attribute: "max-multiple"
-})], W.prototype, "maxMultiple", void 0), n([r({ type: Boolean })], W.prototype, "range", void 0), n([r({ type: String })], W.prototype, "earliest", void 0), n([r({ type: String })], W.prototype, "latest", void 0), n([r({ converter: v.stringsToDate })], W.prototype, "excludedates", void 0), n([r({ converter: v.csvToArray })], W.prototype, "excludeweekdays", void 0), n([r({ type: Boolean })], W.prototype, "weeknumbers", void 0), n([r({ type: Boolean })], W.prototype, "withcontrols", void 0), n([r({ converter: v.stringToDate })], W.prototype, "currentmonth", void 0), n([r({ type: String })], W.prototype, "today", void 0), n([r({
+})], W.prototype, "maxMultiple", void 0), i([o({ type: Boolean })], W.prototype, "range", void 0), i([o({ type: String })], W.prototype, "earliest", void 0), i([o({ type: String })], W.prototype, "latest", void 0), i([o({ converter: v.stringsToDate })], W.prototype, "excludedates", void 0), i([o({ converter: v.csvToArray })], W.prototype, "excludeweekdays", void 0), i([o({ type: Boolean })], W.prototype, "weeknumbers", void 0), i([o({ type: Boolean })], W.prototype, "withcontrols", void 0), i([o({ converter: v.stringToDate })], W.prototype, "currentmonth", void 0), i([o({ type: String })], W.prototype, "today", void 0), i([o({
 	type: Array,
 	attribute: "day-strings"
-})], W.prototype, "dayStrings", void 0), n([r({
+})], W.prototype, "dayStrings", void 0), i([o({
 	type: Array,
 	attribute: "day-strings-long"
-})], W.prototype, "dayStringsLong", void 0), n([r({
+})], W.prototype, "dayStringsLong", void 0), i([o({
 	type: Array,
 	attribute: "month-strings"
-})], W.prototype, "monthStrings", void 0), n([r({
+})], W.prototype, "monthStrings", void 0), i([o({
 	type: String,
 	attribute: "week-string"
-})], W.prototype, "weekString", void 0), n([r({
+})], W.prototype, "weekString", void 0), i([o({
 	type: String,
 	attribute: "prev-month-string"
-})], W.prototype, "prevMonthString", void 0), n([r({
+})], W.prototype, "prevMonthString", void 0), i([o({
 	type: String,
 	attribute: "next-month-string"
-})], W.prototype, "nextMonthString", void 0), n([r({ type: Array })], W.prototype, "_selected", void 0), n([e()], W.prototype, "inRange", void 0), n([r({ type: Date })], W.prototype, "rangeHovered", void 0), n([r({ type: Number })], W.prototype, "year", void 0), n([r({ type: Number })], W.prototype, "month", void 0), n([r({ type: Number })], W.prototype, "week", void 0), n([e()], W.prototype, "currentmonthtouched", void 0), n([e()], W.prototype, "focusedDate", void 0);
+})], W.prototype, "nextMonthString", void 0), i([o({ type: Array })], W.prototype, "_selected", void 0), i([r()], W.prototype, "inRange", void 0), i([o({ type: Date })], W.prototype, "rangeHovered", void 0), i([o({ type: Number })], W.prototype, "year", void 0), i([o({ type: Number })], W.prototype, "month", void 0), i([o({ type: Number })], W.prototype, "week", void 0), i([r()], W.prototype, "currentmonthtouched", void 0), i([r()], W.prototype, "focusedDate", void 0);
 try {
-	a("pkt-calendar")(W);
+	t("pkt-calendar")(W);
 } catch {
 	console.warn("Forsøker å definere <pkt-calendar>, men den er allerede definert");
 }

package/dist/{card-zQ0eKRMV.js → card-DhHqC265.js}

@@ -1,10 +1,10 @@
-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 { t as c } from "./if-defined-CGzIlZ9-.js";
-import "./tag-Ds6n1LIs.js";
-import "./heading-g-_IUB5T.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";
+import { t as c } from "./if-defined-BF8XcDi5.js";
+import "./tag-DK5SgKry.js";
+import "./heading-rx_oSCqe.js";
 var l = {
 	name: "pkt-card",
 	react: "PktCard",
@@ -192,39 +192,39 @@ var l = {
 			[`pkt-card--${this.layout}`]: this.layout,
 			[`pkt-card--padding-${this.padding}`]: this.padding,
 			"pkt-card--border-on-hover": this.borderOnHover
-		}, n = this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), i = this.ariaLabel?.trim() || (this.heading ? this.heading : "kort");
-		return r`
+		}, r = this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), i = this.ariaLabel?.trim() || (this.heading ? this.heading : "kort");
+		return e`
       <article
         class=${a(t)}
-        aria-label=${c(this.clickCardLink ? n : i)}
+        aria-label=${c(this.clickCardLink ? r : i)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
-          ${this.tagPosition === "top" ? this.renderTags() : e} 
+          ${this.tagPosition === "top" ? this.renderTags() : n} 
           ${this.renderHeader()}
           ${this.renderSlot()} 
-          ${this.tagPosition === "bottom" ? this.renderTags() : e}
+          ${this.tagPosition === "bottom" ? this.renderTags() : n}
           ${this.renderMetadata()}
         </div>
       </article>
     `;
 	}
 	renderImage() {
-		let e = {
+		let t = {
 			"pkt-card__image": !0,
 			[`pkt-card__image-${this.imageShape}`]: this.imageShape
 		};
-		return r`
-      ${this.image.src && r`
-        <div class=${a(e)}>
+		return e`
+      ${this.image.src && e`
+        <div class=${a(t)}>
           <img src=${this.image.src} alt=${this.image.alt || ""} />
         </div>
       `}
     `;
 	}
 	renderHeading() {
-		return r`
-      ${this.heading && !this.clickCardLink ? r`
+		return e`
+      ${this.heading && !this.clickCardLink ? e`
             <pkt-heading
               class="pkt-card__heading"
               .level=${this.headinglevel || 3}
@@ -234,12 +234,12 @@ var l = {
             >
               ${this.heading}
             </pkt-heading>
-          ` : e}
+          ` : n}
     `;
 	}
 	renderLinkHeading() {
-		return r`
-      ${this.clickCardLink ? r`
+		return e`
+      ${this.clickCardLink ? e`
             <pkt-heading
               class="pkt-card__link-heading pkt-card__heading"
               .level=${this.headinglevel || 3}
@@ -254,24 +254,24 @@ var l = {
                 >${this.heading}</a
               >
             </pkt-heading>
-          ` : e}
+          ` : n}
     `;
 	}
 	renderSubheading() {
-		return r`
-      ${this.subheading ? r` <p class="pkt-card__subheading ">${this.subheading}</p> ` : e}
+		return e`
+      ${this.subheading ? e` <p class="pkt-card__subheading ">${this.subheading}</p> ` : n}
     `;
 	}
 	renderHeader() {
 		let t = !!this.heading || !!this.subheading;
-		return r`
-      ${t ? r`
+		return e`
+      ${t ? e`
             <header class="pkt-card__header">
               ${this.renderHeading()} 
               ${this.renderLinkHeading()} 
               ${this.renderSubheading()}
             </header>
-          ` : e}
+          ` : n}
     `;
 	}
 	renderTags() {
@@ -279,46 +279,46 @@ var l = {
 			"pkt-card__tags": !0,
 			[`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
 		};
-		return r`
-      ${this.tags.length > 0 ? r`
+		return e`
+      ${this.tags.length > 0 ? e`
             <div
               class=${a(t)}
               role="list"
               aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
             >
-              ${this.tags.map((e) => r`
+              ${this.tags.map((t) => e`
                   <pkt-tag
                     role="listitem"
                     textStyle="normal-text"
                     size="medium"
-                    skin=${c(e.skin)}
-                    iconName=${c(e.iconName)}
+                    skin=${c(t.skin)}
+                    iconName=${c(t.iconName)}
                   >
-                    <span>${e.text}</span>
+                    <span>${t.text}</span>
                   </pkt-tag>
                 `)}
             </div>
-          ` : e}
+          ` : n}
     `;
 	}
 	renderSlot() {
-		return r`<section class="pkt-card__content">${o(this)}</section>`;
+		return e`<section class="pkt-card__content">${o(this)}</section>`;
 	}
 	renderMetadata() {
-		return r`
-      ${this.metaLead || this.metaTrail ? r`
+		return e`
+      ${this.metaLead || this.metaTrail ? e`
             <footer class="pkt-card__metadata">
-              ${this.metaLead ? r`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : e}
-              ${this.metaTrail ? r`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : e}
+              ${this.metaLead ? e`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : n}
+              ${this.metaTrail ? e`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : n}
             </footer>
-          ` : e}
+          ` : n}
     `;
 	}
 };
-t([n({ type: String })], u.prototype, "ariaLabel", void 0), t([n({ type: String })], u.prototype, "metaLead", void 0), t([n({ type: Boolean })], u.prototype, "borderOnHover", void 0), t([n({
+r([i({ type: String })], u.prototype, "ariaLabel", void 0), r([i({ type: String })], u.prototype, "metaLead", void 0), r([i({ type: Boolean })], u.prototype, "borderOnHover", void 0), r([i({
 	type: String,
 	reflect: !0
-})], u.prototype, "clickCardLink", void 0), t([n({ type: String })], u.prototype, "metaTrail", void 0), t([n({ type: String })], u.prototype, "layout", void 0), t([n({ type: String })], u.prototype, "heading", void 0), t([n({ type: Number })], u.prototype, "headinglevel", void 0), t([n({ type: Object })], u.prototype, "image", void 0), t([n({ type: String })], u.prototype, "imageShape", void 0), t([n({ type: Boolean })], u.prototype, "openLinkInNewTab", void 0), t([n({ type: String })], u.prototype, "padding", void 0), t([n({
+})], u.prototype, "clickCardLink", void 0), r([i({ type: String })], u.prototype, "metaTrail", void 0), r([i({ type: String })], u.prototype, "layout", void 0), r([i({ type: String })], u.prototype, "heading", void 0), r([i({ type: Number })], u.prototype, "headinglevel", void 0), r([i({ type: Object })], u.prototype, "image", void 0), r([i({ type: String })], u.prototype, "imageShape", void 0), r([i({ type: Boolean })], u.prototype, "openLinkInNewTab", void 0), r([i({ type: String })], u.prototype, "padding", void 0), r([i({
 	type: String,
 	converter: {
 		fromAttribute: (e) => {
@@ -327,9 +327,9 @@ t([n({ type: String })], u.prototype, "ariaLabel", void 0), t([n({ type: String
 		},
 		toAttribute: (e) => e
 	}
-})], u.prototype, "skin", void 0), t([n({ type: String })], u.prototype, "subheading", void 0), t([n({ type: String })], u.prototype, "tagPosition", void 0), t([n({ type: Array })], u.prototype, "tags", void 0);
+})], u.prototype, "skin", void 0), r([i({ type: String })], u.prototype, "subheading", void 0), r([i({ type: String })], u.prototype, "tagPosition", void 0), r([i({ type: Array })], u.prototype, "tags", void 0);
 try {
-	i("pkt-card")(u);
+	t("pkt-card")(u);
 } catch {
 	console.warn("Forsøker å definere <pkt-card>, men den er allerede definert");
 }

package/dist/{card-CETDFkxR.cjs → card-Dpqi6HVt.cjs}

@@ -1,25 +1,25 @@
-const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs"),n=require("./element-with-slot-Bj7nm7fO.cjs");require("./icon-9iwd2F2l.cjs");const r=require("./if-defined-B89_ZeCj.cjs");require("./tag-CzojNU7z.cjs"),require("./heading-CFmiSuCQ.cjs");var i={name:`pkt-card`,react:`PktCard`,"css-class":`pkt-card`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{heading:{type:`string`,name:`Overskrift`,description:`Tittel på card`,category:`contents`},headingLevel:{type:[1,2,3,4,5,6],name:`Overskriftsnivå`,description:`Nivået på headingen. Brukes for tilgjengelighet.`,default:3,category:`accessibility`},subheading:{type:`string`,name:`Undertittel`,description:`Undertittel på card`,category:`contents`},layout:{type:[`vertical`,`horizontal`],name:`Layout`,description:`Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.`,default:`vertical`,category:`ui`},skin:{type:[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],name:`Utseende`,description:`Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.`,default:`outlined`,category:`ui`},padding:{type:[`none`,`default`],name:`Padding`,description:`Padding rundt card. Ved "none" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.`,default:`default`,category:`ui`},metaLead:{type:`string`,name:`Forfatter eller annen metadata`,description:`Undertekst med fet skriftvekt`,default:!1,category:`contents`},metaTrail:{type:`string`,name:`Dato eller annen metadata`,description:`Undertekst med normal skriftvekt`,default:!1,category:`contents`},tagPosition:{type:[`top`,`bottom`],name:`Tagplassering`,description:`Plassering av tags i card`,default:`top`,category:`ui`},clickCardLink:{type:`string`,name:`Lenke for klikkbart card`,description:`Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.`,category:`contents`},openLinkInNewTab:{type:`boolean`,name:`Åpne i ny fane`,description:`Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.`,default:!1,category:`tech`},borderOnHover:{type:`boolean`,name:`Hover border for klikkbart card`,description:`Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.`,default:!0,category:`ui`},image:{type:`object`,name:`Bilde`,description:`Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.`,properties:{src:{type:`string`,description:`Stien til bildet`,required:!0},alt:{type:`string`,description:`Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative`,required:!1}},category:`contents`},imageShape:{type:[`square`,`round`],name:`Bildeform`,description:`Valg for om bildet skal ha rektangulær eller rund form.`,default:`square`,category:`contents`},tags:{type:`array`,description:`Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text`,name:`Tags`,items:{type:`object`,name:`Tag`,properties:{skin:{type:[`blue`,`green`,`red`,`yellow`],description:`Farge på tag`},iconName:{type:`icon`,description:`Id på ikonet du ønsker å bruke til tag`},ariaLabel:{type:`string`,description:`Tekst for aria-label`},text:{type:`string`,description:`Tekst på tag`,required:!0}}},category:`contents`},ariaLabel:{type:`string`,name:`Aria-label for card`,description:`Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.`,category:`accessibility`}},slots:{default:{description:`Innholdet i card`}}},a=class extends n.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=i.props.layout.default,this.heading=``,this.headinglevel=3,this.image={src:``,alt:``},this.imageShape=`square`,this.openLinkInNewTab=!1,this.padding=i.props.padding.default,this.skin=i.props.skin.default,this.subheading=``,this.tagPosition=`top`,this.tags=[]}connectedCallback(){super.connectedCallback()}render(){let n={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=this.ariaLabel?.trim()||(this.heading?`${this.heading} lenkekort`:`lenkekort`),a=this.ariaLabel?.trim()||(this.heading?this.heading:`kort`);return e.p`
+const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs"),n=require("./element-with-slot-DTxILHVv.cjs");require("./icon-BmMC09mi.cjs");const r=require("./if-defined-CVYApOgK.cjs");require("./tag-BxYulmZn.cjs"),require("./heading-CvytvcL7.cjs");var i={name:`pkt-card`,react:`PktCard`,"css-class":`pkt-card`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{heading:{type:`string`,name:`Overskrift`,description:`Tittel på card`,category:`contents`},headingLevel:{type:[1,2,3,4,5,6],name:`Overskriftsnivå`,description:`Nivået på headingen. Brukes for tilgjengelighet.`,default:3,category:`accessibility`},subheading:{type:`string`,name:`Undertittel`,description:`Undertittel på card`,category:`contents`},layout:{type:[`vertical`,`horizontal`],name:`Layout`,description:`Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.`,default:`vertical`,category:`ui`},skin:{type:[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],name:`Utseende`,description:`Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.`,default:`outlined`,category:`ui`},padding:{type:[`none`,`default`],name:`Padding`,description:`Padding rundt card. Ved "none" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.`,default:`default`,category:`ui`},metaLead:{type:`string`,name:`Forfatter eller annen metadata`,description:`Undertekst med fet skriftvekt`,default:!1,category:`contents`},metaTrail:{type:`string`,name:`Dato eller annen metadata`,description:`Undertekst med normal skriftvekt`,default:!1,category:`contents`},tagPosition:{type:[`top`,`bottom`],name:`Tagplassering`,description:`Plassering av tags i card`,default:`top`,category:`ui`},clickCardLink:{type:`string`,name:`Lenke for klikkbart card`,description:`Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.`,category:`contents`},openLinkInNewTab:{type:`boolean`,name:`Åpne i ny fane`,description:`Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.`,default:!1,category:`tech`},borderOnHover:{type:`boolean`,name:`Hover border for klikkbart card`,description:`Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.`,default:!0,category:`ui`},image:{type:`object`,name:`Bilde`,description:`Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.`,properties:{src:{type:`string`,description:`Stien til bildet`,required:!0},alt:{type:`string`,description:`Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative`,required:!1}},category:`contents`},imageShape:{type:[`square`,`round`],name:`Bildeform`,description:`Valg for om bildet skal ha rektangulær eller rund form.`,default:`square`,category:`contents`},tags:{type:`array`,description:`Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text`,name:`Tags`,items:{type:`object`,name:`Tag`,properties:{skin:{type:[`blue`,`green`,`red`,`yellow`],description:`Farge på tag`},iconName:{type:`icon`,description:`Id på ikonet du ønsker å bruke til tag`},ariaLabel:{type:`string`,description:`Tekst for aria-label`},text:{type:`string`,description:`Tekst på tag`,required:!0}}},category:`contents`},ariaLabel:{type:`string`,name:`Aria-label for card`,description:`Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.`,category:`accessibility`}},slots:{default:{description:`Innholdet i card`}}},a=class extends n.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=i.props.layout.default,this.heading=``,this.headinglevel=3,this.image={src:``,alt:``},this.imageShape=`square`,this.openLinkInNewTab=!1,this.padding=i.props.padding.default,this.skin=i.props.skin.default,this.subheading=``,this.tagPosition=`top`,this.tags=[]}connectedCallback(){super.connectedCallback()}render(){let n={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=this.ariaLabel?.trim()||(this.heading?`${this.heading} lenkekort`:`lenkekort`),a=this.ariaLabel?.trim()||(this.heading?this.heading:`kort`);return e._`
       <article
         class=${t.t(n)}
         aria-label=${r.t(this.clickCardLink?i:a)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
-          ${this.tagPosition===`top`?this.renderTags():e.d} 
+          ${this.tagPosition===`top`?this.renderTags():e.h} 
           ${this.renderHeader()}
           ${this.renderSlot()} 
-          ${this.tagPosition===`bottom`?this.renderTags():e.d}
+          ${this.tagPosition===`bottom`?this.renderTags():e.h}
           ${this.renderMetadata()}
         </div>
       </article>
-    `}renderImage(){let n={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return e.p`
-      ${this.image.src&&e.p`
+    `}renderImage(){let n={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return e._`
+      ${this.image.src&&e._`
         <div class=${t.t(n)}>
           <img src=${this.image.src} alt=${this.image.alt||``} />
         </div>
       `}
-    `}renderHeading(){return e.p`
-      ${this.heading&&!this.clickCardLink?e.p`
+    `}renderHeading(){return e._`
+      ${this.heading&&!this.clickCardLink?e._`
             <pkt-heading
               class="pkt-card__heading"
               .level=${this.headinglevel||3}
@@ -29,9 +29,9 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs"),
             >
               ${this.heading}
             </pkt-heading>
-          `:e.d}
-    `}renderLinkHeading(){return e.p`
-      ${this.clickCardLink?e.p`
+          `:e.h}
+    `}renderLinkHeading(){return e._`
+      ${this.clickCardLink?e._`
             <pkt-heading
               class="pkt-card__link-heading pkt-card__heading"
               .level=${this.headinglevel||3}
@@ -46,25 +46,25 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs"),
                 >${this.heading}</a
               >
             </pkt-heading>
-          `:e.d}
-    `}renderSubheading(){return e.p`
-      ${this.subheading?e.p` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.d}
-    `}renderHeader(){let t=!!this.heading||!!this.subheading;return e.p`
-      ${t?e.p`
+          `:e.h}
+    `}renderSubheading(){return e._`
+      ${this.subheading?e._` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.h}
+    `}renderHeader(){let t=!!this.heading||!!this.subheading;return e._`
+      ${t?e._`
             <header class="pkt-card__header">
               ${this.renderHeading()} 
               ${this.renderLinkHeading()} 
               ${this.renderSubheading()}
             </header>
-          `:e.d}
-    `}renderTags(){let n={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e.p`
-      ${this.tags.length>0?e.p`
+          `:e.h}
+    `}renderTags(){let n={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e._`
+      ${this.tags.length>0?e._`
             <div
               class=${t.t(n)}
               role="list"
               aria-label=${this.tags.length>1?`merkelapper`:`merkelapp`}
             >
-              ${this.tags.map(t=>e.p`
+              ${this.tags.map(t=>e._`
                   <pkt-tag
                     role="listitem"
                     textStyle="normal-text"
@@ -76,12 +76,12 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs"),
                   </pkt-tag>
                 `)}
             </div>
-          `:e.d}
-    `}renderSlot(){return e.p`<section class="pkt-card__content">${n.n(this)}</section>`}renderMetadata(){return e.p`
-      ${this.metaLead||this.metaTrail?e.p`
+          `:e.h}
+    `}renderSlot(){return e._`<section class="pkt-card__content">${n.n(this)}</section>`}renderMetadata(){return e._`
+      ${this.metaLead||this.metaTrail?e._`
             <footer class="pkt-card__metadata">
-              ${this.metaLead?e.p`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.d}
-              ${this.metaTrail?e.p`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.d}
+              ${this.metaLead?e._`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.h}
+              ${this.metaTrail?e._`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.h}
             </footer>
-          `:e.d}
-    `}};e.n([e.o({type:String})],a.prototype,`ariaLabel`,void 0),e.n([e.o({type:String})],a.prototype,`metaLead`,void 0),e.n([e.o({type:Boolean})],a.prototype,`borderOnHover`,void 0),e.n([e.o({type:String,reflect:!0})],a.prototype,`clickCardLink`,void 0),e.n([e.o({type:String})],a.prototype,`metaTrail`,void 0),e.n([e.o({type:String})],a.prototype,`layout`,void 0),e.n([e.o({type:String})],a.prototype,`heading`,void 0),e.n([e.o({type:Number})],a.prototype,`headinglevel`,void 0),e.n([e.o({type:Object})],a.prototype,`image`,void 0),e.n([e.o({type:String})],a.prototype,`imageShape`,void 0),e.n([e.o({type:Boolean})],a.prototype,`openLinkInNewTab`,void 0),e.n([e.o({type:String})],a.prototype,`padding`,void 0),e.n([e.o({type:String,converter:{fromAttribute:e=>{let t=i.props.skin.type;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${i.props.skin.default}".`),i.props.skin.default)},toAttribute:e=>e}})],a.prototype,`skin`,void 0),e.n([e.o({type:String})],a.prototype,`subheading`,void 0),e.n([e.o({type:String})],a.prototype,`tagPosition`,void 0),e.n([e.o({type:Array})],a.prototype,`tags`,void 0);try{e.s(`pkt-card`)(a)}catch{console.warn(`Forsøker å definere <pkt-card>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});
+          `:e.h}
+    `}};e.n([e.u({type:String})],a.prototype,`ariaLabel`,void 0),e.n([e.u({type:String})],a.prototype,`metaLead`,void 0),e.n([e.u({type:Boolean})],a.prototype,`borderOnHover`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`clickCardLink`,void 0),e.n([e.u({type:String})],a.prototype,`metaTrail`,void 0),e.n([e.u({type:String})],a.prototype,`layout`,void 0),e.n([e.u({type:String})],a.prototype,`heading`,void 0),e.n([e.u({type:Number})],a.prototype,`headinglevel`,void 0),e.n([e.u({type:Object})],a.prototype,`image`,void 0),e.n([e.u({type:String})],a.prototype,`imageShape`,void 0),e.n([e.u({type:Boolean})],a.prototype,`openLinkInNewTab`,void 0),e.n([e.u({type:String})],a.prototype,`padding`,void 0),e.n([e.u({type:String,converter:{fromAttribute:e=>{let t=i.props.skin.type;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${i.props.skin.default}".`),i.props.skin.default)},toAttribute:e=>e}})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`subheading`,void 0),e.n([e.u({type:String})],a.prototype,`tagPosition`,void 0),e.n([e.u({type:Array})],a.prototype,`tags`,void 0);try{e.d(`pkt-card`)(a)}catch{console.warn(`Forsøker å definere <pkt-card>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});