@oslokommune/punkt-elements 16.17.3 → 16.19.0

package/dist/{textinput-BZZnFDk3.js → textinput-CZrBM-Fj.js}

@@ -1,11 +1,11 @@
-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 } from "./element-with-slot-4J2o3SeU.js";
-import "./icon-Co72KtgF.js";
-import { t as c } from "./if-defined-Cjj8qN-Z.js";
-import { n as l, t as u } from "./ref-RS8Uv6uC.js";
-import { t as d } from "./input-element-B1ciW1N2.js";
-import "./input-wrapper-DVU68NcJ.js";
+import { a as e, d as t, n, o as r, p as i, s as a } from "./element-CduG0XyF.js";
+import { t as o } from "./class-map-DH9hlJny.js";
+import { n as s } from "./element-with-slot-BVj9MXzi.js";
+import "./icon-LaKyBKON.js";
+import { t as c } from "./if-defined-VShASPdu.js";
+import { n as l, t as u } from "./ref-BgoHEsEt.js";
+import { t as d } from "./input-element-BrmkXIXi.js";
+import "./input-wrapper-B6WowlWG.js";
 //#region src/components/textinput/textinput.ts
 var f = class extends d {
 	constructor(...e) {
@@ -18,12 +18,12 @@ var f = class extends d {
 		super.updated(e), e.has("value") && (this.counterCurrent = this.value?.length || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
 	}
 	render() {
-		let e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, r = o({
+		let e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, n = o({
 			"pkt-input": !0,
 			"pkt-input--fullwidth": this.fullwidth,
 			"pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
-		}), i = this.ariaLabelledby || `${this.id}-input-label`;
-		return t`
+		}), r = this.ariaLabelledby || `${this.id}-input-label`;
+		return i`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -50,15 +50,15 @@ var f = class extends d {
       >
         <div class="pkt-contents" slot="helptext">${s(this, "helptext")}</div>
         <div class="pkt-input__container">
-          ${this.prefix ? t`<div class="pkt-input-prefix">${this.prefix}</div>` : n}
+          ${this.prefix ? i`<div class="pkt-input-prefix">${this.prefix}</div>` : t}
           <input
             ${l(this.inputRef)}
-            class=${r}
+            class=${n}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
             placeholder=${c(this.placeholder)}
-            aria-labelledby=${i}
+            aria-labelledby=${r}
             autocomplete=${this.autocomplete || "off"}
             minlength=${c(this.minlength || void 0)}
             maxlength=${c(this.maxlength || void 0)}
@@ -66,7 +66,7 @@ var f = class extends d {
             max=${c(this.max || void 0)}
             step=${c(this.step || void 0)}
             ?readonly=${this.readonly}
-            size=${this.size || n}
+            size=${this.size || t}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -90,30 +90,30 @@ var f = class extends d {
 			}
 		}}
           />
-          ${this.suffix ? t`<div class="pkt-input-suffix">
+          ${this.suffix ? i`<div class="pkt-input-suffix">
                 ${this.suffix}
-                ${this.iconNameRight ? t`<pkt-icon
+                ${this.iconNameRight ? i`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
-                    ></pkt-icon>` : n}
-                ${e ? t`<pkt-icon
+                    ></pkt-icon>` : t}
+                ${e ? i`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>` : n}
-              </div>` : n}
-          ${!this.suffix && this.iconNameRight ? t`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : n}
-          ${!this.suffix && e ? t`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : n}
+                    ></pkt-icon>` : t}
+              </div>` : t}
+          ${!this.suffix && this.iconNameRight ? i`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : t}
+          ${!this.suffix && e ? i`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : t}
         </div>
       </pkt-input-wrapper>
     `;
 	}
 };
-i([a({
+n([r({
 	type: String,
 	reflect: !0
-})], f.prototype, "value", void 0), i([a({ type: String })], f.prototype, "type", void 0), i([a({ type: Number })], f.prototype, "size", void 0), i([a({ type: String })], f.prototype, "autocomplete", void 0), i([a({ type: String })], f.prototype, "iconNameRight", void 0), i([a({ type: String })], f.prototype, "prefix", void 0), i([a({ type: String })], f.prototype, "suffix", void 0), i([a({ type: Boolean })], f.prototype, "omitSearchIcon", void 0), i([r()], f.prototype, "counterCurrent", void 0);
+})], f.prototype, "value", void 0), n([r({ type: String })], f.prototype, "type", void 0), n([r({ type: Number })], f.prototype, "size", void 0), n([r({ type: String })], f.prototype, "autocomplete", void 0), n([r({ type: String })], f.prototype, "iconNameRight", void 0), n([r({ type: String })], f.prototype, "prefix", void 0), n([r({ type: String })], f.prototype, "suffix", void 0), n([r({ type: Boolean })], f.prototype, "omitSearchIcon", void 0), n([e()], f.prototype, "counterCurrent", void 0);
 try {
-	e("pkt-textinput")(f);
+	a("pkt-textinput")(f);
 } catch {
 	console.warn("Forsøker å definere <pkt-textinput>, men den er allerede definert");
 }

package/dist/{textinput-Dsc-8-BB.cjs → textinput-C_6kvf87.cjs}

@@ -1,4 +1,4 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./input-element-D0egtEnr.cjs`);require(`./input-wrapper-DOIWggEv.cjs`);var o=class extends a.t{constructor(...e){super(...e),this.inputRef=i.t(),this.value=``,this.type=`text`,this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0}attributeChangedCallback(e,t,n){e===`value`&&this.value!==t&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`value`)&&(this.counterCurrent=this.value?.length||0,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}render(){let a=this.type===`search`&&!this.iconNameRight&&!this.omitSearchIcon,o=t.t({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),s=this.ariaLabelledby||`${this.id}-input-label`;return e.d`
+const e=require(`./element-CXAtr6Gu.cjs`),t=require(`./class-map-B8Ja0q7n.cjs`),n=require(`./element-with-slot-Cmxb9h4H.cjs`);require(`./icon-Dw6I0HDV.cjs`);const r=require(`./if-defined-LTjAScFG.cjs`),i=require(`./ref-CBdWMlde.cjs`),a=require(`./input-element-BHQVt4Q9.cjs`);require(`./input-wrapper-Dhkt20WW.cjs`);var o=class extends a.t{constructor(...e){super(...e),this.inputRef=i.t(),this.value=``,this.type=`text`,this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0}attributeChangedCallback(e,t,n){e===`value`&&this.value!==t&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`value`)&&(this.counterCurrent=this.value?.length||0,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}render(){let a=this.type===`search`&&!this.iconNameRight&&!this.omitSearchIcon,o=t.t({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),s=this.ariaLabelledby||`${this.id}-input-label`;return e.p`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -25,7 +25,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
       >
         <div class="pkt-contents" slot="helptext">${n.n(this,`helptext`)}</div>
         <div class="pkt-input__container">
-          ${this.prefix?e.d`<div class="pkt-input-prefix">${this.prefix}</div>`:e.l}
+          ${this.prefix?e.p`<div class="pkt-input-prefix">${this.prefix}</div>`:e.d}
           <input
             ${i.n(this.inputRef)}
             class=${o}
@@ -41,7 +41,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
             max=${r.t(this.max||void 0)}
             step=${r.t(this.step||void 0)}
             ?readonly=${this.readonly}
-            size=${this.size||e.l}
+            size=${this.size||e.d}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -52,19 +52,19 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
             @blur=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
             @keydown=${e=>{if(e.key===`Enter`){let e=this.internals.form;e?e.requestSubmit():this.inputRef.value?.blur()}}}
           />
-          ${this.suffix?e.d`<div class="pkt-input-suffix">
+          ${this.suffix?e.p`<div class="pkt-input-suffix">
                 ${this.suffix}
-                ${this.iconNameRight?e.d`<pkt-icon
+                ${this.iconNameRight?e.p`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
-                    ></pkt-icon>`:e.l}
-                ${a?e.d`<pkt-icon
+                    ></pkt-icon>`:e.d}
+                ${a?e.p`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>`:e.l}
-              </div>`:e.l}
-          ${!this.suffix&&this.iconNameRight?e.d`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>`:e.l}
-          ${!this.suffix&&a?e.d`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:e.l}
+                    ></pkt-icon>`:e.d}
+              </div>`:e.d}
+          ${!this.suffix&&this.iconNameRight?e.p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>`:e.d}
+          ${!this.suffix&&a?e.p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:e.d}
         </div>
       </pkt-input-wrapper>
-    `}};e.r([e.s({type:String,reflect:!0})],o.prototype,`value`,void 0),e.r([e.s({type:String})],o.prototype,`type`,void 0),e.r([e.s({type:Number})],o.prototype,`size`,void 0),e.r([e.s({type:String})],o.prototype,`autocomplete`,void 0),e.r([e.s({type:String})],o.prototype,`iconNameRight`,void 0),e.r([e.s({type:String})],o.prototype,`prefix`,void 0),e.r([e.s({type:String})],o.prototype,`suffix`,void 0),e.r([e.s({type:Boolean})],o.prototype,`omitSearchIcon`,void 0),e.r([e.o()],o.prototype,`counterCurrent`,void 0);try{e.c(`pkt-textinput`)(o)}catch{console.warn(`Forsøker å definere <pkt-textinput>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+    `}};e.n([e.o({type:String,reflect:!0})],o.prototype,`value`,void 0),e.n([e.o({type:String})],o.prototype,`type`,void 0),e.n([e.o({type:Number})],o.prototype,`size`,void 0),e.n([e.o({type:String})],o.prototype,`autocomplete`,void 0),e.n([e.o({type:String})],o.prototype,`iconNameRight`,void 0),e.n([e.o({type:String})],o.prototype,`prefix`,void 0),e.n([e.o({type:String})],o.prototype,`suffix`,void 0),e.n([e.o({type:Boolean})],o.prototype,`omitSearchIcon`,void 0),e.n([e.a()],o.prototype,`counterCurrent`,void 0);try{e.s(`pkt-textinput`)(o)}catch{console.warn(`Forsøker å definere <pkt-textinput>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/{timepicker-DDQ7CfOy.js → timepicker-O0iCeJyW.js}

@@ -1,11 +1,11 @@
-import { c as e, d as t, i as n, l as r, o as i, r as a, s as o } from "./element-cZ85T_aa.js";
-import { t as s } from "./class-map-C8HuhNzZ.js";
-import { n as c } from "./element-with-slot-4J2o3SeU.js";
-import "./icon-Co72KtgF.js";
-import { t as l } from "./if-defined-Cjj8qN-Z.js";
-import { n as u, t as d } from "./ref-RS8Uv6uC.js";
-import { t as f } from "./input-element-B1ciW1N2.js";
-import "./input-wrapper-DVU68NcJ.js";
+import { a as e, d as t, n, o as r, p as i, r as a, s as o } from "./element-CduG0XyF.js";
+import { t as s } from "./class-map-DH9hlJny.js";
+import { n as c } from "./element-with-slot-BVj9MXzi.js";
+import "./icon-LaKyBKON.js";
+import { t as l } from "./if-defined-VShASPdu.js";
+import { n as u, t as d } from "./ref-BgoHEsEt.js";
+import { t as f } from "./input-element-BrmkXIXi.js";
+import "./input-wrapper-B6WowlWG.js";
 //#region ../../shared-utils/timepicker/time-utils.ts
 var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && parseInt(e.slice(3), 10) <= 59, m = (e) => {
 	let [t, n] = e.split(":").map(Number);
@@ -156,24 +156,24 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 		let t = this.hoursInputRef.value;
 		if (!t) return;
 		if (this.required && !this.value) {
-			this.internals.setValidity({ valueMissing: !0 }, n.forms.messages.required, t), this._setAriaInvalid(!0);
+			this.internals.setValidity({ valueMissing: !0 }, a.forms.messages.required, t), this._setAriaInvalid(!0);
 			return;
 		}
 		if (!this.value) {
 			this.internals.setValidity({}), this._setAriaInvalid(!1);
 			return;
 		}
-		let r = m(this.value), i = h(this.step);
-		if (this.min && r < m(String(this.min))) {
-			this.internals.setValidity({ rangeUnderflow: !0 }, n.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)), t), this._setAriaInvalid(!0);
+		let n = m(this.value), r = h(this.step);
+		if (this.min && n < m(String(this.min))) {
+			this.internals.setValidity({ rangeUnderflow: !0 }, a.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)), t), this._setAriaInvalid(!0);
 			return;
 		}
-		if (this.max && r > m(String(this.max))) {
-			this.internals.setValidity({ rangeOverflow: !0 }, n.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)), t), this._setAriaInvalid(!0);
+		if (this.max && n > m(String(this.max))) {
+			this.internals.setValidity({ rangeOverflow: !0 }, a.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)), t), this._setAriaInvalid(!0);
 			return;
 		}
-		if (this.step && r % i !== 0) {
-			let e = i === 60 ? n.forms.messages.timeStepMismatchHour : i === 30 ? n.forms.messages.timeStepMismatchHalfHour : n.forms.messages.timeStepMismatch.replace("{step}", `${i}, ${i * 2}, ${i * 3}`);
+		if (this.step && n % r !== 0) {
+			let e = r === 60 ? a.forms.messages.timeStepMismatchHour : r === 30 ? a.forms.messages.timeStepMismatchHalfHour : a.forms.messages.timeStepMismatch.replace("{step}", `${r}, ${r * 2}, ${r * 3}`);
 			this.internals.setValidity({ stepMismatch: !0 }, e, t), this._setAriaInvalid(!0);
 			return;
 		}
@@ -260,9 +260,9 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 		let t = v(this._hours, this._minutes, e, this._minuteStep);
 		this._hours = t.hours, this._minutes = t.minutes, this._syncValueFromDisplay();
 	}
-	_renderOption(e, n) {
-		let r = String(e).padStart(2, "0"), i = e === (n === "hour" ? this._hours === "" ? NaN : parseInt(this._hours, 10) : this._minutes === "" ? NaN : parseInt(this._minutes, 10));
-		return t`
+	_renderOption(e, t) {
+		let n = String(e).padStart(2, "0"), r = e === (t === "hour" ? this._hours === "" ? NaN : parseInt(this._hours, 10) : this._minutes === "" ? NaN : parseInt(this._minutes, 10));
+		return i`
       <button
         class=${s({
 			"pkt-btn": !0,
@@ -270,24 +270,24 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 			"pkt-btn--small": !0,
 			"pkt-btn--label-only": !0,
 			"pkt-timepicker-popup__option": !0,
-			"pkt-timepicker-popup__option--selected": i
+			"pkt-timepicker-popup__option--selected": r
 		})}
         type="button"
         role="option"
-        aria-selected=${i ? "true" : "false"}
-        tabindex=${i ? "0" : "-1"}
-        data-type=${n}
+        aria-selected=${r ? "true" : "false"}
+        tabindex=${r ? "0" : "-1"}
+        data-type=${t}
         data-value=${e}
-        @click=${(t) => {
-			t.stopImmediatePropagation(), this._handleOptionClick(e, n);
+        @click=${(n) => {
+			n.stopImmediatePropagation(), this._handleOptionClick(e, t);
 		}}
       >
-        <span class="pkt-btn__text pkt-txt-14-light">${r}</span>
+        <span class="pkt-btn__text pkt-txt-14-light">${n}</span>
       </button>
     `;
 	}
 	_renderPopup() {
-		return t`
+		return i`
       <div
         class="pkt-timepicker-popup"
         id=${this.id + "-popup"}
@@ -319,15 +319,15 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 	_renderContainer() {
-		let e = this.strings.timepicker?.hours ?? "Timer", n = this.strings.timepicker?.minutes ?? "Minutter", i = this.label ? `${e}, ${this.label}` : e, a = this.label ? `${n}, ${this.label}` : n;
-		return t`
+		let e = this.strings.timepicker?.hours ?? "Timer", n = this.strings.timepicker?.minutes ?? "Minutter", r = this.label ? `${e}, ${this.label}` : e, a = this.label ? `${n}, ${this.label}` : n;
+		return i`
       <div
         class="pkt-input__container"
         @click=${(e) => {
 			e.target.closest("button, input") || this.hoursInputRef.value?.focus();
 		}}
       >
-        ${this.stepArrows ? t`
+        ${this.stepArrows ? i`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
@@ -340,7 +340,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
                   >${this.strings.timepicker?.prevTime ?? "Forrige tidspunkt"}</span
                 >
               </button>
-            ` : r}
+            ` : t}
         <input
           ${u(this.hoursInputRef)}
           type="text"
@@ -353,13 +353,13 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
           data-max="23"
           .value=${this._hours}
           placeholder="––"
-          aria-label=${i}
+          aria-label=${r}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : r}
+          aria-invalid=${this.hasError ? "true" : t}
           aria-valuemin="0"
           aria-valuemax="23"
-          aria-valuenow=${this._hours === "" ? r : this._hours}
-          aria-valuetext=${this._hours === "" ? r : `${this._hours} ${e.toLowerCase()}`}
+          aria-valuenow=${this._hours === "" ? t : this._hours}
+          aria-valuetext=${this._hours === "" ? t : `${this._hours} ${e.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
@@ -383,11 +383,11 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
           placeholder="––"
           aria-label=${a}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : r}
+          aria-invalid=${this.hasError ? "true" : t}
           aria-valuemin="0"
           aria-valuemax="59"
-          aria-valuenow=${this._minutes === "" ? r : this._minutes}
-          aria-valuetext=${this._minutes === "" ? r : `${this._minutes} ${n.toLowerCase()}`}
+          aria-valuenow=${this._minutes === "" ? t : this._minutes}
+          aria-valuetext=${this._minutes === "" ? t : `${this._minutes} ${n.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
@@ -396,12 +396,12 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
 			e.target.select(), e.stopImmediatePropagation();
 		}}
         />
-        ${this.hidePicker && !this.stepArrows ? t`<pkt-icon
+        ${this.hidePicker && !this.stepArrows ? i`<pkt-icon
               class="pkt-input-icon pkt-timepicker__icon"
               name="clock"
               aria-hidden="true"
-            ></pkt-icon>` : r}
-        ${!this.hidePicker && !this.stepArrows ? t`
+            ></pkt-icon>` : t}
+        ${!this.hidePicker && !this.stepArrows ? i`
               <button
                 ${u(this.buttonRef)}
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button"
@@ -418,8 +418,8 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
                   >${this.strings.timepicker?.openPicker ?? "Åpne tidspunkt-velger"}</span
                 >
               </button>
-            ` : r}
-        ${this.stepArrows ? t`
+            ` : t}
+        ${this.stepArrows ? i`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
@@ -432,7 +432,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
                   >${this.strings.timepicker?.nextTime ?? "Neste tidspunkt"}</span
                 >
               </button>
-            ` : r}
+            ` : t}
         <input
           ${u(this.hiddenInputRef)}
           type="time"
@@ -451,7 +451,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 	render() {
-		return t`
+		return i`
       <pkt-input-wrapper
         label="${this.label}"
         ?disabled=${this.disabled}
@@ -473,7 +473,7 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
         .tagText=${this.tagText}
       >
         <div class="pkt-contents" slot="helptext">${c(this, "helptext")}</div>
-        ${!this.hidePicker && !this.stepArrows ? t`
+        ${!this.hidePicker && !this.stepArrows ? i`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
               </div>
@@ -482,20 +482,20 @@ var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
     `;
 	}
 };
-a([o({
+n([r({
 	type: String,
 	reflect: !0
-})], y.prototype, "value", void 0), a([o({
+})], y.prototype, "value", void 0), n([r({
 	type: Boolean,
 	reflect: !0,
 	attribute: "hide-picker"
-})], y.prototype, "hidePicker", void 0), a([o({
+})], y.prototype, "hidePicker", void 0), n([r({
 	type: Boolean,
 	reflect: !0,
 	attribute: "step-arrows"
-})], y.prototype, "stepArrows", void 0), a([i()], y.prototype, "_hours", void 0), a([i()], y.prototype, "_minutes", void 0), a([i()], y.prototype, "_isOpen", void 0);
+})], y.prototype, "stepArrows", void 0), n([e()], y.prototype, "_hours", void 0), n([e()], y.prototype, "_minutes", void 0), n([e()], y.prototype, "_isOpen", void 0);
 try {
-	e("pkt-timepicker")(y);
+	o("pkt-timepicker")(y);
 } catch {
 	console.warn("Forsøker å definere <pkt-timepicker>, men den er allerede definert");
 }

package/dist/{timepicker-C2Ua6vHY.cjs → timepicker-WiYLAncb.cjs}

@@ -1,4 +1,4 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./input-element-D0egtEnr.cjs`);require(`./input-wrapper-DOIWggEv.cjs`);var o=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,s=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},c=e=>e?Math.max(1,Math.round(e/60)):1,l=(e,t)=>{let n=e?parseInt(String(e).split(`:`)[0],10):0,r=t?parseInt(String(t).split(`:`)[0],10):23;return Array.from({length:r-n+1},(e,t)=>t+n)},u=e=>{let t=c(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},d=(e,t,n,r)=>{let i=e===``?n===1?0:23:parseInt(e,10),a=t===``?n===1?0:Math.floor(59/r)*r:parseInt(t,10);return a+=n*r,a>59?(a=0,i=(i+1)%24):a<0&&(a=Math.floor(59/r)*r,i=(i-1+24)%24),{hours:String(i).padStart(2,`0`),minutes:String(a).padStart(2,`0`)}},f=class extends a.t{constructor(...e){super(...e),this.hiddenInputRef=i.t(),this.hoursInputRef=i.t(),this.minutesInputRef=i.t(),this.buttonRef=i.t(),this.value=``,this.hidePicker=!1,this.stepArrows=!1,this._hours=``,this._minutes=``,this._isOpen=!1,this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._hasFocus=!1,this._outsideClickHandler=e=>{this.contains(e.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=e=>{this.contains(e.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t+1)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t-1+24)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowRight`:e.preventDefault(),this.minutesInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=t,this._hours=String(t).padStart(2,`0`),this._hoursDigitCount=1,this.onInput(),t>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.minutesInputRef.value?.focus());else{let e=this._hoursFirstDigit*10+t;this._hours=e<=23?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),this.minutesInputRef.value?.focus()}}else e.preventDefault()}},this._handleHoursBlur=()=>{this._hours!==``&&(this._hours=String(parseInt(this._hours,10)).padStart(2,`0`)),this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._syncValueFromDisplay()},this._handleMinutesKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t+this._minuteStep)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t-this._minuteStep+60)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowLeft`:e.preventDefault(),this.hoursInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=t,this._minutes=String(t).padStart(2,`0`),this._minutesDigitCount=1,this.onInput(),t>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{let e=this._minutesFirstDigit*10+t;this._minutes=e<=59?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else e.preventDefault()}},this._handleMinutesBlur=()=>{this._minutes!==``&&(this._minutes=String(parseInt(this._minutes,10)).padStart(2,`0`)),this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._syncValueFromDisplay()},this._handlePopupKeydown=e=>{let t=document.activeElement,n=t.closest(`.pkt-timepicker-popup__col`);if(!n)return;let r=Array.from(n.querySelectorAll(`.pkt-timepicker-popup__option`)),i=r.indexOf(t),a=t.dataset.type??``;switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusOptionAndSync(r[Math.min(i+1,r.length-1)],a);break;case`ArrowUp`:e.preventDefault(),this._focusOptionAndSync(r[Math.max(i-1,0)],a);break;case`Home`:e.preventDefault(),this._focusOptionAndSync(r[0],a);break;case`End`:e.preventDefault(),this._focusOptionAndSync(r[r.length-1],a);break;case`ArrowRight`:e.preventDefault(),a===`hour`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`minute`)}));break;case`ArrowLeft`:e.preventDefault(),a===`minute`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)}));break;case`Enter`:case` `:e.preventDefault(),t.click();break;case`Escape`:e.preventDefault(),this._closePopup(),this.buttonRef.value?.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){let n=this.hoursInputRef.value;if(!n)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},e.i.forms.messages.required,n),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let r=s(this.value),i=c(this.step);if(this.min&&r<s(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},e.i.forms.messages.rangeUnderflowMin.replace(`{min}`,String(this.min)),n),this._setAriaInvalid(!0);return}if(this.max&&r>s(String(this.max))){this.internals.setValidity({rangeOverflow:!0},e.i.forms.messages.rangeOverflowMax.replace(`{max}`,String(this.max)),n),this._setAriaInvalid(!0);return}if(this.step&&r%i!==0){let t=i===60?e.i.forms.messages.timeStepMismatchHour:i===30?e.i.forms.messages.timeStepMismatchHalfHour:e.i.forms.messages.timeStepMismatch.replace(`{step}`,`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},t,n),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;e?(t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`)):(t?.removeAttribute(`aria-invalid`),n?.removeAttribute(`aria-invalid`))}connectedCallback(){super.connectedCallback(),this.addEventListener(`focusin`,this._handleComponentFocusIn),this.addEventListener(`focusout`,this._handleComponentFocusOut),document.addEventListener(`click`,this._outsideClickHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`focusin`,this._handleComponentFocusIn),this.removeEventListener(`focusout`,this._handleComponentFocusOut),document.removeEventListener(`click`,this._outsideClickHandler)}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this._syncDisplayFromValue()}updated(e){super.updated(e),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),e.has(`step`)&&this.step!==null&&!this._isValidStep(this.step)&&console.warn(`pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`)}formResetCallback(){super.formResetCallback(),this._hours=``,this._minutes=``,this._isOpen=!1}_isValidStep(e){return e===3600||e<3600&&3600%e==0&&e%60==0}_syncDisplayFromValue(){let e=o(this.value)?this.value.split(`:`):null;e?(this._hours=e[0],this._minutes=e[1]):(this._hours=``,this._minutes=``)}_syncValueFromDisplay(){if(this._hours!==``&&this._minutes!==``){let e=`${this._hours}:${this._minutes}`;e!==this.value&&(this.value=e,this.onChange(e))}else this.value!==``&&(this.value=``,this.onChange(``))}get _minuteStep(){return c(this.step)}get _hourOptions(){return l(this.min,this.max)}get _minuteOptions(){return u(this.step)}_openPopup(){this._isOpen=!0,this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)})}_closePopup(){this._isOpen=!1,this._syncValueFromDisplay()}_togglePopup(){this._isOpen?this._closePopup():this._openPopup()}_scrollToSelected(){let e=this.querySelector(`.pkt-timepicker-popup`);e&&e.querySelectorAll(`.pkt-timepicker-popup__col`).forEach(e=>{let t=e.querySelector(`.pkt-timepicker-popup__option--selected`);t&&t.scrollIntoView({block:`center`})})}_focusSelectedOrFirst(e){let t=this.querySelector(`.pkt-timepicker-popup`);if(!t)return;let n=t.querySelectorAll(`.pkt-timepicker-popup__col`),r=e===`hour`?n[0]:n[1];if(!r)return;let i=r.querySelector(`.pkt-timepicker-popup__option--selected`),a=r.querySelector(`.pkt-timepicker-popup__option`);(i||a)?.focus()}_handleOptionClick(e,t){let n=String(e).padStart(2,`0`);t===`hour`?(this._hours=n,this.updateComplete.then(()=>this._focusSelectedOrFirst(`minute`))):(this._minutes=n,this._closePopup(),this.buttonRef.value?.focus())}_focusOptionAndSync(e,t){if(!e)return;let n=parseInt(e.dataset.value??`0`,10);t===`hour`?this._hours=String(n).padStart(2,`0`):this._minutes=String(n).padStart(2,`0`),e.focus()}_stepTime(e){let t=d(this._hours,this._minutes,e,this._minuteStep);this._hours=t.hours,this._minutes=t.minutes,this._syncValueFromDisplay()}_renderOption(n,r){let i=String(n).padStart(2,`0`),a=n===(r===`hour`?this._hours===``?NaN:parseInt(this._hours,10):this._minutes===``?NaN:parseInt(this._minutes,10));return e.d`
+const e=require(`./element-CXAtr6Gu.cjs`),t=require(`./class-map-B8Ja0q7n.cjs`),n=require(`./element-with-slot-Cmxb9h4H.cjs`);require(`./icon-Dw6I0HDV.cjs`);const r=require(`./if-defined-LTjAScFG.cjs`),i=require(`./ref-CBdWMlde.cjs`),a=require(`./input-element-BHQVt4Q9.cjs`);require(`./input-wrapper-Dhkt20WW.cjs`);var o=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,s=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},c=e=>e?Math.max(1,Math.round(e/60)):1,l=(e,t)=>{let n=e?parseInt(String(e).split(`:`)[0],10):0,r=t?parseInt(String(t).split(`:`)[0],10):23;return Array.from({length:r-n+1},(e,t)=>t+n)},u=e=>{let t=c(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},d=(e,t,n,r)=>{let i=e===``?n===1?0:23:parseInt(e,10),a=t===``?n===1?0:Math.floor(59/r)*r:parseInt(t,10);return a+=n*r,a>59?(a=0,i=(i+1)%24):a<0&&(a=Math.floor(59/r)*r,i=(i-1+24)%24),{hours:String(i).padStart(2,`0`),minutes:String(a).padStart(2,`0`)}},f=class extends a.t{constructor(...e){super(...e),this.hiddenInputRef=i.t(),this.hoursInputRef=i.t(),this.minutesInputRef=i.t(),this.buttonRef=i.t(),this.value=``,this.hidePicker=!1,this.stepArrows=!1,this._hours=``,this._minutes=``,this._isOpen=!1,this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._hasFocus=!1,this._outsideClickHandler=e=>{this.contains(e.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=e=>{this.contains(e.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t+1)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t-1+24)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowRight`:e.preventDefault(),this.minutesInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=t,this._hours=String(t).padStart(2,`0`),this._hoursDigitCount=1,this.onInput(),t>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.minutesInputRef.value?.focus());else{let e=this._hoursFirstDigit*10+t;this._hours=e<=23?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),this.minutesInputRef.value?.focus()}}else e.preventDefault()}},this._handleHoursBlur=()=>{this._hours!==``&&(this._hours=String(parseInt(this._hours,10)).padStart(2,`0`)),this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._syncValueFromDisplay()},this._handleMinutesKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t+this._minuteStep)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t-this._minuteStep+60)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowLeft`:e.preventDefault(),this.hoursInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=t,this._minutes=String(t).padStart(2,`0`),this._minutesDigitCount=1,this.onInput(),t>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{let e=this._minutesFirstDigit*10+t;this._minutes=e<=59?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else e.preventDefault()}},this._handleMinutesBlur=()=>{this._minutes!==``&&(this._minutes=String(parseInt(this._minutes,10)).padStart(2,`0`)),this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._syncValueFromDisplay()},this._handlePopupKeydown=e=>{let t=document.activeElement,n=t.closest(`.pkt-timepicker-popup__col`);if(!n)return;let r=Array.from(n.querySelectorAll(`.pkt-timepicker-popup__option`)),i=r.indexOf(t),a=t.dataset.type??``;switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusOptionAndSync(r[Math.min(i+1,r.length-1)],a);break;case`ArrowUp`:e.preventDefault(),this._focusOptionAndSync(r[Math.max(i-1,0)],a);break;case`Home`:e.preventDefault(),this._focusOptionAndSync(r[0],a);break;case`End`:e.preventDefault(),this._focusOptionAndSync(r[r.length-1],a);break;case`ArrowRight`:e.preventDefault(),a===`hour`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`minute`)}));break;case`ArrowLeft`:e.preventDefault(),a===`minute`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)}));break;case`Enter`:case` `:e.preventDefault(),t.click();break;case`Escape`:e.preventDefault(),this._closePopup(),this.buttonRef.value?.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){let n=this.hoursInputRef.value;if(!n)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},e.r.forms.messages.required,n),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let r=s(this.value),i=c(this.step);if(this.min&&r<s(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},e.r.forms.messages.rangeUnderflowMin.replace(`{min}`,String(this.min)),n),this._setAriaInvalid(!0);return}if(this.max&&r>s(String(this.max))){this.internals.setValidity({rangeOverflow:!0},e.r.forms.messages.rangeOverflowMax.replace(`{max}`,String(this.max)),n),this._setAriaInvalid(!0);return}if(this.step&&r%i!==0){let t=i===60?e.r.forms.messages.timeStepMismatchHour:i===30?e.r.forms.messages.timeStepMismatchHalfHour:e.r.forms.messages.timeStepMismatch.replace(`{step}`,`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},t,n),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;e?(t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`)):(t?.removeAttribute(`aria-invalid`),n?.removeAttribute(`aria-invalid`))}connectedCallback(){super.connectedCallback(),this.addEventListener(`focusin`,this._handleComponentFocusIn),this.addEventListener(`focusout`,this._handleComponentFocusOut),document.addEventListener(`click`,this._outsideClickHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`focusin`,this._handleComponentFocusIn),this.removeEventListener(`focusout`,this._handleComponentFocusOut),document.removeEventListener(`click`,this._outsideClickHandler)}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this._syncDisplayFromValue()}updated(e){super.updated(e),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),e.has(`step`)&&this.step!==null&&!this._isValidStep(this.step)&&console.warn(`pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`)}formResetCallback(){super.formResetCallback(),this._hours=``,this._minutes=``,this._isOpen=!1}_isValidStep(e){return e===3600||e<3600&&3600%e==0&&e%60==0}_syncDisplayFromValue(){let e=o(this.value)?this.value.split(`:`):null;e?(this._hours=e[0],this._minutes=e[1]):(this._hours=``,this._minutes=``)}_syncValueFromDisplay(){if(this._hours!==``&&this._minutes!==``){let e=`${this._hours}:${this._minutes}`;e!==this.value&&(this.value=e,this.onChange(e))}else this.value!==``&&(this.value=``,this.onChange(``))}get _minuteStep(){return c(this.step)}get _hourOptions(){return l(this.min,this.max)}get _minuteOptions(){return u(this.step)}_openPopup(){this._isOpen=!0,this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)})}_closePopup(){this._isOpen=!1,this._syncValueFromDisplay()}_togglePopup(){this._isOpen?this._closePopup():this._openPopup()}_scrollToSelected(){let e=this.querySelector(`.pkt-timepicker-popup`);e&&e.querySelectorAll(`.pkt-timepicker-popup__col`).forEach(e=>{let t=e.querySelector(`.pkt-timepicker-popup__option--selected`);t&&t.scrollIntoView({block:`center`})})}_focusSelectedOrFirst(e){let t=this.querySelector(`.pkt-timepicker-popup`);if(!t)return;let n=t.querySelectorAll(`.pkt-timepicker-popup__col`),r=e===`hour`?n[0]:n[1];if(!r)return;let i=r.querySelector(`.pkt-timepicker-popup__option--selected`),a=r.querySelector(`.pkt-timepicker-popup__option`);(i||a)?.focus()}_handleOptionClick(e,t){let n=String(e).padStart(2,`0`);t===`hour`?(this._hours=n,this.updateComplete.then(()=>this._focusSelectedOrFirst(`minute`))):(this._minutes=n,this._closePopup(),this.buttonRef.value?.focus())}_focusOptionAndSync(e,t){if(!e)return;let n=parseInt(e.dataset.value??`0`,10);t===`hour`?this._hours=String(n).padStart(2,`0`):this._minutes=String(n).padStart(2,`0`),e.focus()}_stepTime(e){let t=d(this._hours,this._minutes,e,this._minuteStep);this._hours=t.hours,this._minutes=t.minutes,this._syncValueFromDisplay()}_renderOption(n,r){let i=String(n).padStart(2,`0`),a=n===(r===`hour`?this._hours===``?NaN:parseInt(this._hours,10):this._minutes===``?NaN:parseInt(this._minutes,10));return e.p`
       <button
         class=${t.t({"pkt-btn":!0,"pkt-btn--tertiary":!0,"pkt-btn--small":!0,"pkt-btn--label-only":!0,"pkt-timepicker-popup__option":!0,"pkt-timepicker-popup__option--selected":a})}
         type="button"
@@ -11,7 +11,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
       >
         <span class="pkt-btn__text pkt-txt-14-light">${i}</span>
       </button>
-    `}_renderPopup(){return e.d`
+    `}_renderPopup(){return e.p`
       <div
         class="pkt-timepicker-popup"
         id=${this.id+`-popup`}
@@ -38,12 +38,12 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
           ${this._minuteOptions.map(e=>this._renderOption(e,`minute`))}
         </div>
       </div>
-    `}_renderContainer(){let t=this.strings.timepicker?.hours??`Timer`,n=this.strings.timepicker?.minutes??`Minutter`,a=this.label?`${t}, ${this.label}`:t,o=this.label?`${n}, ${this.label}`:n;return e.d`
+    `}_renderContainer(){let t=this.strings.timepicker?.hours??`Timer`,n=this.strings.timepicker?.minutes??`Minutter`,a=this.label?`${t}, ${this.label}`:t,o=this.label?`${n}, ${this.label}`:n;return e.p`
       <div
         class="pkt-input__container"
         @click=${e=>{e.target.closest(`button, input`)||this.hoursInputRef.value?.focus()}}
       >
-        ${this.stepArrows?e.d`
+        ${this.stepArrows?e.p`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
@@ -56,7 +56,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
                   >${this.strings.timepicker?.prevTime??`Forrige tidspunkt`}</span
                 >
               </button>
-            `:e.l}
+            `:e.d}
         <input
           ${i.n(this.hoursInputRef)}
           type="text"
@@ -71,11 +71,11 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
           placeholder="––"
           aria-label=${a}
           role="spinbutton"
-          aria-invalid=${this.hasError?`true`:e.l}
+          aria-invalid=${this.hasError?`true`:e.d}
           aria-valuemin="0"
           aria-valuemax="23"
-          aria-valuenow=${this._hours===``?e.l:this._hours}
-          aria-valuetext=${this._hours===``?e.l:`${this._hours} ${t.toLowerCase()}`}
+          aria-valuenow=${this._hours===``?e.d:this._hours}
+          aria-valuetext=${this._hours===``?e.d:`${this._hours} ${t.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
@@ -97,23 +97,23 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
           placeholder="––"
           aria-label=${o}
           role="spinbutton"
-          aria-invalid=${this.hasError?`true`:e.l}
+          aria-invalid=${this.hasError?`true`:e.d}
           aria-valuemin="0"
           aria-valuemax="59"
-          aria-valuenow=${this._minutes===``?e.l:this._minutes}
-          aria-valuetext=${this._minutes===``?e.l:`${this._minutes} ${n.toLowerCase()}`}
+          aria-valuenow=${this._minutes===``?e.d:this._minutes}
+          aria-valuetext=${this._minutes===``?e.d:`${this._minutes} ${n.toLowerCase()}`}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
           @blur=${this._handleMinutesBlur}
           @focus=${e=>{e.target.select(),e.stopImmediatePropagation()}}
         />
-        ${this.hidePicker&&!this.stepArrows?e.d`<pkt-icon
+        ${this.hidePicker&&!this.stepArrows?e.p`<pkt-icon
               class="pkt-input-icon pkt-timepicker__icon"
               name="clock"
               aria-hidden="true"
-            ></pkt-icon>`:e.l}
-        ${!this.hidePicker&&!this.stepArrows?e.d`
+            ></pkt-icon>`:e.d}
+        ${!this.hidePicker&&!this.stepArrows?e.p`
               <button
                 ${i.n(this.buttonRef)}
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button"
@@ -130,8 +130,8 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
                   >${this.strings.timepicker?.openPicker??`Åpne tidspunkt-velger`}</span
                 >
               </button>
-            `:e.l}
-        ${this.stepArrows?e.d`
+            `:e.d}
+        ${this.stepArrows?e.p`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
@@ -144,7 +144,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
                   >${this.strings.timepicker?.nextTime??`Neste tidspunkt`}</span
                 >
               </button>
-            `:e.l}
+            `:e.d}
         <input
           ${i.n(this.hiddenInputRef)}
           type="time"
@@ -160,7 +160,7 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
           tabindex="-1"
         />
       </div>
-    `}render(){return e.d`
+    `}render(){return e.p`
       <pkt-input-wrapper
         label="${this.label}"
         ?disabled=${this.disabled}
@@ -182,10 +182,10 @@ const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),
         .tagText=${this.tagText}
       >
         <div class="pkt-contents" slot="helptext">${n.n(this,`helptext`)}</div>
-        ${!this.hidePicker&&!this.stepArrows?e.d`
+        ${!this.hidePicker&&!this.stepArrows?e.p`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
               </div>
             `:this._renderContainer()}
       </pkt-input-wrapper>
-    `}};e.r([e.s({type:String,reflect:!0})],f.prototype,`value`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`hide-picker`})],f.prototype,`hidePicker`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`step-arrows`})],f.prototype,`stepArrows`,void 0),e.r([e.o()],f.prototype,`_hours`,void 0),e.r([e.o()],f.prototype,`_minutes`,void 0),e.r([e.o()],f.prototype,`_isOpen`,void 0);try{e.c(`pkt-timepicker`)(f)}catch{console.warn(`Forsøker å definere <pkt-timepicker>, men den er allerede definert`)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+    `}};e.n([e.o({type:String,reflect:!0})],f.prototype,`value`,void 0),e.n([e.o({type:Boolean,reflect:!0,attribute:`hide-picker`})],f.prototype,`hidePicker`,void 0),e.n([e.o({type:Boolean,reflect:!0,attribute:`step-arrows`})],f.prototype,`stepArrows`,void 0),e.n([e.a()],f.prototype,`_hours`,void 0),e.n([e.a()],f.prototype,`_minutes`,void 0),e.n([e.a()],f.prototype,`_isOpen`,void 0);try{e.s(`pkt-timepicker`)(f)}catch{console.warn(`Forsøker å definere <pkt-timepicker>, men den er allerede definert`)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.17.3",
+  "version": "16.19.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -78,5 +78,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0e923719992be1851617872d5e529a4588126aed"
+  "gitHead": "e90194e9a4c25a6b7a5370c05889e262b4e6cfb0"
 }

package/src/components/card/card.ts

@@ -8,6 +8,7 @@ import { slotContent } from '@/directives/slot-content'
 import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
+/* eslint-disable no-duplicate-imports -- There's a different between the import methods */
 import '@/components/tag'
 import '@/components/heading'
 import type { IAriaAttributes, TCardSkin, TLayout } from 'shared-types'
@@ -65,7 +66,6 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
           return value as TCardSkin
         } else {
           if (value && !validSkins.includes(value as TCardSkin)) {
-            // eslint-disable-next-line no-console -- Acceptable to log a warning for invalid skin values
             console.warn(
               `Invalid skin value "${value}". Using default skin "${specs.props.skin.default}".`,
             )