@oslokommune/punkt-elements 12.43.2 → 13.1.0

package/dist/{select-CFpdOlDE.cjs → select-DUeTm8ac.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),o=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-CHjLWeKt.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BxZf8wEP.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,l=u.length-1,n;l>=0;l--)(n=u[l])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,l;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(l=this.inputRef.value)==null?void 0:l.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,l;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(l=this.inputRef.value)==null?void 0:l.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
+"use strict";const r=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
       <pkt-input-wrapper
         ?counter=${this.counter}
         ?disabled=${this.disabled}
@@ -8,22 +8,23 @@
         ?optionalTag=${this.optionalTag}
         ?requiredTag=${this.requiredTag}
         ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        ariaDescribedBy=${l.o(this.ariaDescribedBy)}
         class="pkt-select"
-        errorMessage=${o.o(this.errorMessage)}
+        errorMessage=${l.o(this.errorMessage)}
         forId=${this.id+"-input"}
-        helptext=${o.o(this.helptext)}
-        helptextDropdown=${o.o(this.helptextDropdown)}
-        helptextDropdownButton=${o.o(this.helptextDropdownButton)}
-        label=${o.o(this.label)}
-        optionalText=${o.o(this.optionalText)}
-        requiredText=${o.o(this.requiredText)}
+        helptext=${l.o(this.helptext)}
+        helptextDropdown=${l.o(this.helptextDropdown)}
+        helptextDropdownButton=${l.o(this.helptextDropdownButton)}
+        label=${l.o(this.label)}
+        optionalText=${l.o(this.optionalText)}
+        requiredText=${l.o(this.requiredText)}
+        tagText=${l.o(this.tagText)}
       >
         <select
           class=${t}
           aria-invalid=${this.hasError}
           aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${o.o(this.ariaLabelledby)}
+          aria-labelledby=${l.o(this.ariaLabelledby)}
           ?disabled=${this.disabled}
           id=${this.id+"-input"}
           name=${(this.name||this.id)+"-input"}

package/dist/{textarea-EIFo7GZz.js → textarea-BZL8Mkm0.js}

@@ -3,18 +3,18 @@ import { o as u } from "./if-defined-CmuO4Vz9.js";
 import { r as x } from "./state-Bo2bck5_.js";
 import { e as m, n as c } from "./ref-BBYSqgeW.js";
 import { e as v } from "./class-map-BpTj9gtz.js";
-import { e as b, i as T, t as a } from "./directive-oAbCiebi.js";
+import { e as T, i as b, t as a } from "./directive-oAbCiebi.js";
 import { f as y, m as w } from "./directive-helpers-r-kOS_Mf.js";
-import { P as C } from "./input-element-Cco4PA2M.js";
+import { P as C } from "./input-element-NnrDmp4r.js";
 import { P as E } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-gz7ppKrK.js";
+import "./input-wrapper-Dr__Sxql.js";
 import "./icon-CC1js8eR.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P = b(class extends T {
+const P = T(class extends b {
   constructor(t) {
     if (super(t), t.type !== a.PROPERTY && t.type !== a.ATTRIBUTE && t.type !== a.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
     if (!y(t)) throw Error("`live` bindings can only contain a single expression");
@@ -75,6 +75,7 @@ let o = class extends C {
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/{textarea-CViiuZdR.cjs → textarea-CPXsMFUq.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-CHjLWeKt.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BxZf8wEP.cjs");require("./icon-B_ryAy4Q.cjs");/**
+"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-C4xJoM-X.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -22,6 +22,7 @@
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/dist/{textinput-BHS7b-Jt.js → textinput-DjPhmmkB.js}

@@ -1,30 +1,30 @@
 import { E as p, x as h, n as a, a as $ } from "./element-CgEWt74-.js";
 import { o as u } from "./if-defined-CmuO4Vz9.js";
 import { r as f } from "./state-Bo2bck5_.js";
-import { e as m, n as d } from "./ref-BBYSqgeW.js";
+import { e as d, n as m } from "./ref-BBYSqgeW.js";
 import { e as g } from "./class-map-BpTj9gtz.js";
-import { P as x } from "./input-element-Cco4PA2M.js";
-import { P as y } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-gz7ppKrK.js";
+import { P as x } from "./input-element-NnrDmp4r.js";
+import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
+import "./input-wrapper-Dr__Sxql.js";
 import "./icon-CC1js8eR.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, i, r, t) => {
-  for (var n = t > 1 ? void 0 : t ? b(i, r) : i, l = e.length - 1, c; l >= 0; l--)
-    (c = e[l]) && (n = (t ? c(i, r, n) : c(n)) || n);
-  return t && n && v(i, r, n), n;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
+  for (var n = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (n = (t ? c(e, r, n) : c(n)) || n);
+  return t && n && y(e, r, n), n;
 };
 let s = class extends x {
   constructor() {
-    super(), this.inputRef = m(), this.helptextSlot = m(), 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, this.slotController = new y(this, this.helptextSlot);
+    super(), this.inputRef = d(), this.helptextSlot = d(), 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, this.slotController = new v(this, this.helptextSlot);
   }
-  attributeChangedCallback(e, i, r) {
-    e === "value" && this.value !== i && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, i)), super.attributeChangedCallback(e, i, r);
+  attributeChangedCallback(i, e, r) {
+    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
   }
-  updated(e) {
-    var i;
-    super.updated(e), e.has("value") && (this.counterCurrent = ((i = this.value) == null ? void 0 : i.length) || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
+  updated(i) {
+    var e;
+    super.updated(i), i.has("value") && (this.counterCurrent = ((e = this.value) == null ? void 0 : e.length) || 0, this.valueChanged(this.value, i.get("value"))), i.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
-    const e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, i = g({
+    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = g({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -51,25 +51,26 @@ let s = class extends x {
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
           <input
-            ${d(this.inputRef)}
-            class=${i}
+            ${m(this.inputRef)}
+            class=${e}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
             placeholder=${u(this.placeholder)}
             aria-labelledby=${r}
             autocomplete=${this.autocomplete || "off"}
-            minlength=${u(this.minlength)}
-            maxlength=${u(this.maxlength)}
-            min=${u(this.min)}
-            max=${u(this.max)}
-            step=${u(this.step)}
+            minlength=${u(this.minlength || void 0)}
+            maxlength=${u(this.maxlength || void 0)}
+            min=${u(this.min || void 0)}
+            max=${u(this.max || void 0)}
+            step=${u(this.step || void 0)}
             ?readonly=${this.readonly}
             size=${this.size || p}
             .value=${this.value}
@@ -102,13 +103,13 @@ let s = class extends x {
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
                     ></pkt-icon>` : p}
-                ${e ? h`<pkt-icon
+                ${i ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
                     ></pkt-icon>` : p}
               </div>` : p}
           ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : p}
-          ${!this.suffix && e ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
+          ${!this.suffix && i ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
         </div>
       </pkt-input-wrapper>
     `;

package/dist/{textinput-_ZdyMA9O.cjs → textinput-aNI5kibM.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),x=require("./input-element-CHjLWeKt.cjs"),d=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-BxZf8wEP.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends x.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),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,this.slotController=new d.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),d=require("./input-element-C4xJoM-X.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),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,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -20,6 +20,7 @@
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
         <div class="pkt-contents" ${h.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
@@ -34,11 +35,11 @@
             placeholder=${a.o(this.placeholder)}
             aria-labelledby=${n}
             autocomplete=${this.autocomplete||"off"}
-            minlength=${a.o(this.minlength)}
-            maxlength=${a.o(this.maxlength)}
-            min=${a.o(this.min)}
-            max=${a.o(this.max)}
-            step=${a.o(this.step)}
+            minlength=${a.o(this.minlength||void 0)}
+            maxlength=${a.o(this.maxlength||void 0)}
+            min=${a.o(this.min||void 0)}
+            max=${a.o(this.max||void 0)}
+            step=${a.o(this.step||void 0)}
             ?readonly=${this.readonly}
             size=${this.size||t.E}
             .value=${this.value}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.43.2",
+  "version": "13.1.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,8 +30,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.43.2",
-    "@oslokommune/punkt-css": "^12.43.2",
+    "@oslokommune/punkt-assets": "^13.0.0",
+    "@oslokommune/punkt-css": "^13.0.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -58,5 +58,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "e6129504ff4bd5c109780783832e2a02d763f9dc"
+  "gitHead": "eec066758ede7f850bc9f4683957baee56e7abc5"
 }

package/src/components/checkbox/checkbox.ts

@@ -18,6 +18,11 @@ export class PktCheckbox extends PktInputElement {
   @property({ type: Boolean }) hideLabel: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'checkbox'
+  @property({ type: String }) tagText: string | null = null
+  @property({ type: Boolean }) optionalTag: boolean = false
+  @property({ type: String }) optionalText: string = 'Valgfritt'
+  @property({ type: Boolean }) requiredTag: boolean = false
+  @property({ type: String }) requiredText: string = 'Må fylles ut'
 
   connectedCallback() {
     super.connectedCallback()
@@ -60,10 +65,26 @@ export class PktCheckbox extends PktInputElement {
       'pkt-sr-only': this.hideLabel,
     })
 
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
+
+    const tags = () => {
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
+    }
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label}
+          ${this.label} ${tags()}
           ${this.checkHelptext
             ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
             : nothing}

package/src/components/combobox/combobox.ts

@@ -55,6 +55,7 @@ export interface IPktCombobox {
   requiredText?: string
   searchPlaceholder?: string
   tagPlacement?: TPktComboboxTagPlacement | null
+  tagText?: string | null
   value?: string | string[]
 }
 
@@ -248,6 +249,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         .optionalText=${this.optionalText}
         ?requiredTag=${this.requiredTag}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         ?useWrapper=${this.useWrapper}
         .forId=${this.allowUserInput || this.typeahead ? this.id + '-input' : this.id + '-arrow'}
         class="pkt-combobox__wrapper"

package/src/components/datepicker/datepicker.ts

@@ -552,6 +552,7 @@ export class PktDatepicker extends PktInputElement {
         ?useWrapper=${this.useWrapper}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         .errorMessage=${this.errorMessage}
         .helptext=${this.helptext}
         .helptextDropdown=${this.helptextDropdown}

package/src/components/input-wrapper/input-wrapper.ts

@@ -27,6 +27,7 @@ type Props = ElementProps<
   | 'optionalText'
   | 'requiredTag'
   | 'requiredText'
+  | 'tagText'
   | 'hasError'
   | 'errorMessage'
   | 'disabled'
@@ -74,12 +75,14 @@ export class PktInputWrapper extends PktElement<Props> {
   @property({ type: Boolean }) counter: boolean = specs.props.counter.default
   @property({ type: Number }) counterCurrent: number = 0
   @property({ type: Number }) counterMaxLength: number = 0
+
   @property({ type: String }) counterError: string | null = null
   @property({ type: String, reflect: false }) counterPosition: TCounterPosition = 'bottom'
   @property({ type: Boolean }) optionalTag: boolean = specs.props.optionalTag.default
   @property({ type: String }) optionalText: string = specs.props.optionalText.default
   @property({ type: Boolean }) requiredTag: boolean = specs.props.requiredTag.default
   @property({ type: String }) requiredText: string = specs.props.requiredText.default
+  @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) hasError: boolean = specs.props.hasError.default
   @property({ type: String }) errorMessage: string = ''
   @property({ type: Boolean }) disabled: boolean = specs.props.disabled.default
@@ -102,13 +105,7 @@ export class PktInputWrapper extends PktElement<Props> {
       'pkt-inputwrapper--inline': this.inline,
     }
 
-    const tagClasses = {
-      'pkt-tag': true,
-      'pkt-tag--small': true,
-      'pkt-tag--thin-text': true,
-      'pkt-tag--blue-light': this.optionalTag,
-      'pkt-tag--beige': !this.optionalTag && this.requiredTag,
-    }
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
     const describedBy = this.ariaDescribedby
       ? this.ariaDescribedby
@@ -117,17 +114,17 @@ export class PktInputWrapper extends PktElement<Props> {
         : nothing
 
     const tagElement = () => {
-      if (this.optionalTag || this.requiredTag) {
-        return html`<span class=${classMap(tagClasses)}
-          >${this.optionalTag
-            ? this.optionalText
-            : this.requiredTag
-              ? this.requiredText
-              : nothing}</span
-        >`
-      } else {
-        return nothing
-      }
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
     }
 
     const labelElement = () => {
@@ -209,11 +206,14 @@ export class PktInputWrapper extends PktElement<Props> {
     }
 
     const inputContent = () => {
+      //prettier-ignore
       return html`
-        ${labelElement()} ${helptextElement()}
+        ${labelElement()} 
+        ${helptextElement()}
         ${this.counterPosition === 'top' ? counterElement() : nothing}
         <div class="pkt-contents" ${ref(this.defaultSlot)}></div>
-        ${this.counterPosition === 'bottom' ? counterElement() : nothing} ${errorElement()}
+        ${this.counterPosition === 'bottom' ? counterElement() : nothing} 
+        ${errorElement()}
       `
     }
 

package/src/components/radiobutton/radiobutton.ts

@@ -15,6 +15,11 @@ export class PktRadioButton extends PktInputElement {
   @property({ type: Boolean }) hasTile: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'radio'
+  @property({ type: String }) tagText: string | null = null
+  @property({ type: Boolean }) optionalTag: boolean = false
+  @property({ type: String }) optionalText: string = 'Valgfritt'
+  @property({ type: Boolean }) requiredTag: boolean = false
+  @property({ type: String }) requiredText: string = 'Må fylles ut'
 
   @state() _checked: boolean = false
 
@@ -50,10 +55,26 @@ export class PktRadioButton extends PktInputElement {
       'pkt-sr-only': this.hideLabel,
     })
 
+    const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
+
+    const tags = () => {
+      return html`
+        ${this.tagText
+          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+          : nothing}
+        ${this.optionalTag
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          : nothing}
+        ${this.requiredTag
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          : nothing}
+      `
+    }
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label}
+          ${this.label} ${tags()}
           ${this.checkHelptext
             ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
             : nothing}

package/src/components/select/select.ts

@@ -199,6 +199,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         label=${ifDefined(this.label)}
         optionalText=${ifDefined(this.optionalText)}
         requiredText=${ifDefined(this.requiredText)}
+        tagText=${ifDefined(this.tagText)}
       >
         <select
           class=${inputClass}

package/src/components/textarea/textarea.ts

@@ -15,14 +15,9 @@ export class PktTextarea extends PktInputElement {
   private inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: String, reflect: true })
-  value: string = ''
-
-  @property({ type: String })
-  autocomplete: string = 'off'
-
-  @property({ type: Number })
-  rows: number | null = null
+  @property({ type: String, reflect: true }) value: string = ''
+  @property({ type: String }) autocomplete: string = 'off'
+  @property({ type: Number }) rows: number | null = null
 
   @state() counterCurrent = 0
 
@@ -82,6 +77,7 @@ export class PktTextarea extends PktInputElement {
       .helptextDropdownButton=${this.helptextDropdownButton}
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
+      .tagText=${this.tagText}
       class="pkt-textarea"
     >
       <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>

package/src/components/textinput/textinput.ts

@@ -27,29 +27,14 @@ export class PktTextinput extends PktInputElement<Props> {
   private inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: String, reflect: true })
-  value: string = ''
-
-  @property({ type: String })
-  type: string = 'text'
-
-  @property({ type: Number })
-  size: number | null = null
-
-  @property({ type: String })
-  autocomplete: string | null = null
-
-  @property({ type: String })
-  iconNameRight: string | null = null
-
-  @property({ type: String })
-  prefix: string | null = null
-
-  @property({ type: String })
-  suffix: string | null = null
-
-  @property({ type: Boolean })
-  omitSearchIcon: boolean = false
+  @property({ type: String, reflect: true }) value: string = ''
+  @property({ type: String }) type: string = 'text'
+  @property({ type: Number }) size: number | null = null
+  @property({ type: String }) autocomplete: string | null = null
+  @property({ type: String }) iconNameRight: string | null = null
+  @property({ type: String }) prefix: string | null = null
+  @property({ type: String }) suffix: string | null = null
+  @property({ type: Boolean }) omitSearchIcon: boolean = false
 
   @state() counterCurrent = 0
 
@@ -113,6 +98,7 @@ export class PktTextinput extends PktInputElement<Props> {
         .helptextDropdownButton=${this.helptextDropdownButton}
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class="pkt-textinput"
       >
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
@@ -127,11 +113,11 @@ export class PktTextinput extends PktInputElement<Props> {
             placeholder=${ifDefined(this.placeholder)}
             aria-labelledby=${labelledBy}
             autocomplete=${this.autocomplete || 'off'}
-            minlength=${ifDefined(this.minlength)}
-            maxlength=${ifDefined(this.maxlength)}
-            min=${ifDefined(this.min)}
-            max=${ifDefined(this.max)}
-            step=${ifDefined(this.step)}
+            minlength=${ifDefined(this.minlength || undefined)}
+            maxlength=${ifDefined(this.maxlength || undefined)}
+            min=${ifDefined(this.min || undefined)}
+            max=${ifDefined(this.max || undefined)}
+            step=${ifDefined(this.step || undefined)}
             ?readonly=${this.readonly}
             size=${this.size || nothing}
             .value=${this.value}

package/dist/checkbox-CJ4tK9RC.cjs

@@ -1,26 +0,0 @@
-"use strict";const e=require("./element-6DBpyGQm.cjs"),a=require("./input-element-CHjLWeKt.cjs"),k=require("./ref-iJtiv3o2.cjs"),o=require("./class-map-BBG2gMX4.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,t,s,h)=>{for(var i=h>1?void 0:h?u(t,s):t,n=l.length-1,p;n>=0;n--)(p=l[n])&&(i=(h?p(t,s,i):p(i))||i);return h&&i&&r(t,s,i),i};exports.PktCheckbox=class extends a.PktInputElement{constructor(){super(...arguments),this.inputRef=k.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,s,h){t==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),t==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,s,h)}firstUpdated(t){t.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(t)}render(){const t=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),s=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),i=()=>e.x`
-        <label class=${h} for=${this.id+"-internal"}>
-          ${this.label}
-          ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}
-        </label>
-      `;return e.x`
-      <div class="pkt-input-check">
-        <div class=${t}>
-          ${this.labelPosition==="left"?i():e.E}
-          <input
-            id=${this.id+"-internal"}
-            class=${s}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+"-internal"}
-            ${k.n(this.inputRef)}
-            @change=${this.toggleChecked}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?"switch":"checkbox"}
-          />
-          ${this.labelPosition==="right"?i():e.E}
-        </div>
-      </div>
-    `}toggleChecked(t){t.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};c([e.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);c([e.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);c([e.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);c([e.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);c([e.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);c([e.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);exports.PktCheckbox=c([e.t("pkt-checkbox")],exports.PktCheckbox);