@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/dist/{textarea-VG-UTMLP.cjs → textarea-CDsLbogK.cjs}

@@ -1,8 +1,8 @@
-"use strict";const s=require("./element-CzFXQBoS.cjs"),p=require("./if-defined-CpIkv1A4.cjs"),d=require("./state-HNj0_316.cjs"),o=require("./ref-2anvRHT4.cjs"),c=require("./class-map-Dj5mbCUg.cjs"),a=require("./directive-C_VV3qwo.cjs"),$=require("./input-element-Dtyuf6s8.cjs"),x=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./icon-BOKusjAA.cjs");/**
+"use strict";const s=require("./element-BBo3JZk5.cjs"),p=require("./if-defined-C1ZDVzYn.cjs"),c=require("./state-BILlRnrD.cjs"),l=require("./ref-DsoUUoPU.cjs"),$=require("./class-map-D4rXyUxT.cjs"),a=require("./directive-C_VV3qwo.cjs"),d=require("./directive-helpers-mGjAtADc.cjs"),x=require("./input-element-AhnBdCb8.cjs"),T=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./input-wrapper-BdZxmQyO.cjs");require("./icon-BTUCDPN5.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const T=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!o.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.T||e===s.E)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.T}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.T}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.T;return o.m(r),e}});var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&g(e,i,n),n};exports.PktTextarea=class extends $.PktInputElement{constructor(){super(),this.inputRef=o.e(),this.helptextSlot=o.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}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)}render(){const e=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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.x`<pkt-input-wrapper
+ */const g=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.T||e===s.E)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.T}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.T}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.T;return d.m(r),e}});var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&v(e,i,n),n};exports.PktTextarea=class extends x.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new T.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}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)}render(){const e=$.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}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.x`<pkt-input-wrapper
       label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -24,14 +24,14 @@
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
-      <div class="pkt-contents" ${o.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+      <div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
-        ${o.n(this.inputRef)}
+        ${l.n(this.inputRef)}
         class=${e}
         id=${this.id+"-input"}
         name=${(this.name||this.id)+"-input"}
         placeholder=${p.o(this.placeholder)}
-        .value=${T(this.value)}
+        .value=${g(this.value)}
         minlength=${p.o(this.minlength)}
         maxlength=${p.o(this.maxlength)}
         ?readonly=${this.readonly}
@@ -46,4 +46,4 @@
         @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
         @blur=${t=>{this.value=t.target.value,this.onBlur(),t.stopImmediatePropagation()}}
       ></textarea>
-    </pkt-input-wrapper>`}};l([s.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);l([s.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);l([s.n({type:Number})],exports.PktTextarea.prototype,"rows",2);l([d.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=l([s.t("pkt-textarea")],exports.PktTextarea);
+    </pkt-input-wrapper>`}};o([s.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);o([s.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);o([s.n({type:Number})],exports.PktTextarea.prototype,"rows",2);o([c.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=o([s.t("pkt-textarea")],exports.PktTextarea);

package/dist/textarea.d.ts

@@ -1,6 +1,31 @@
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +33,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{textinput-CEP7QA3E.cjs → textinput-C3C088Ki.cjs}

@@ -1,9 +1,10 @@
-"use strict";const t=require("./element-CzFXQBoS.cjs"),u=require("./if-defined-CpIkv1A4.cjs"),l=require("./state-HNj0_316.cjs"),p=require("./ref-2anvRHT4.cjs"),c=require("./class-map-Dj5mbCUg.cjs"),x=require("./input-element-Dtyuf6s8.cjs"),d=require("./pkt-slot-controller-Oc32unDk.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./icon-BOKusjAA.cjs");var $=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(o,i,n,s)=>{for(var e=s>1?void 0:s?g(i,n):i,a=o.length-1,h;a>=0;a--)(h=o[a])&&(e=(s?h(i,n,e):h(e))||e);return s&&e&&$(i,n,e),e};exports.PktTextinput=class extends x.PktInputElement{constructor(){super(),this.inputRef=p.e(),this.helptextSlot=p.e(),this.value="",this.type="text",this.size=null,this.autocomplete="off",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,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.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,n=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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-BBo3JZk5.cjs"),u=require("./if-defined-C1ZDVzYn.cjs"),l=require("./state-BILlRnrD.cjs"),p=require("./ref-DsoUUoPU.cjs"),c=require("./class-map-D4rXyUxT.cjs"),d=require("./input-element-AhnBdCb8.cjs"),x=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./input-wrapper-BdZxmQyO.cjs");require("./icon-BTUCDPN5.cjs");var $=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(o,i,s,n)=>{for(var e=n>1?void 0:n?g(i,s):i,a=o.length-1,h;a>=0;a--)(h=o[a])&&(e=(n?h(i,s,e):h(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=p.e(),this.helptextSlot=p.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}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?required=${this.required}
@@ -26,13 +27,13 @@
           ${this.prefix?t.x`<div class="pkt-input-prefix">${this.prefix}</div>`:t.E}
           <input
             ${p.n(this.inputRef)}
-            class=${n}
+            class=${s}
             type=${this.type}
             name=${(this.name||this.id)+"-input"}
             id=${this.id+"-input"}
             placeholder=${u.o(this.placeholder)}
-            aria-labelledby=${s}
-            autocomplete=${this.autocomplete}
+            aria-labelledby=${n}
+            autocomplete=${this.autocomplete||"off"}
             minlength=${u.o(this.minlength)}
             maxlength=${u.o(this.maxlength)}
             ?readonly=${this.readonly}

package/dist/{textinput-VD74aGzx.js → textinput-M8I4dfoP.js}

@@ -1,30 +1,30 @@
-import { x as p, E as h, n as o, a as $ } from "./element-C7XjZtLU.js";
-import { o as c } from "./if-defined-eRX4e5zO.js";
-import { r as f } from "./state-CDQk0DFQ.js";
-import { e as d, n as m } from "./ref-DbOSDQbk.js";
-import { e as g } from "./class-map-DWtqmIRS.js";
-import { P as x } from "./input-element-BK8UkQli.js";
-import { P as y } from "./pkt-slot-controller-Clbye6cM.js";
-import "./input-wrapper-DaZZq8c0.js";
-import "./icon-BEUgV9Wo.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (i, e, r, t) => {
-  for (var a = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, u; l >= 0; l--)
-    (u = i[l]) && (a = (t ? u(e, r, a) : u(a)) || a);
-  return t && a && v(e, r, a), a;
+import { x as p, E as h, n as o, a as $ } from "./element-G8JoS0Lj.js";
+import { o as c } from "./if-defined-rCqT8Od1.js";
+import { r as f } from "./state-gfUuUqVg.js";
+import { e as d, n as m } from "./ref-cRTOoM4R.js";
+import { e as g } from "./class-map-ChuDQU5C.js";
+import { P as x } from "./input-element-DM2uSYaW.js";
+import { P as y } from "./pkt-slot-controller-D1DakVrU.js";
+import "./input-wrapper-DQmYzhcy.js";
+import "./icon-BJnwW0eh.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, i, r, t) => {
+  for (var a = t > 1 ? void 0 : t ? b(i, r) : i, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (a = (t ? u(i, r, a) : u(a)) || a);
+  return t && a && v(i, r, a), a;
 };
 let s = class extends x {
   constructor() {
-    super(), this.inputRef = d(), this.helptextSlot = d(), this.value = "", this.type = "text", this.size = null, this.autocomplete = "off", 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 y(this, this.helptextSlot);
   }
-  attributeChangedCallback(i, e, r) {
-    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
+  attributeChangedCallback(e, i, r) {
+    e === "value" && this.value !== i && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, i)), super.attributeChangedCallback(e, i, r);
   }
-  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);
+  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);
   }
   render() {
-    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = g({
+    const e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, i = 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
@@ -35,6 +35,7 @@ let s = class extends x {
         ?counter=${this.counter}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?required=${this.required}
@@ -57,13 +58,13 @@ let s = class extends x {
           ${this.prefix ? p`<div class="pkt-input-prefix">${this.prefix}</div>` : h}
           <input
             ${m(this.inputRef)}
-            class=${e}
+            class=${i}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
             placeholder=${c(this.placeholder)}
             aria-labelledby=${r}
-            autocomplete=${this.autocomplete}
+            autocomplete=${this.autocomplete || "off"}
             minlength=${c(this.minlength)}
             maxlength=${c(this.maxlength)}
             ?readonly=${this.readonly}
@@ -91,13 +92,13 @@ let s = class extends x {
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
                     ></pkt-icon>` : h}
-                ${i ? p`<pkt-icon
+                ${e ? p`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
                     ></pkt-icon>` : h}
               </div>` : h}
           ${!this.suffix && this.iconNameRight ? p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : h}
-          ${!this.suffix && i ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : h}
+          ${!this.suffix && e ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : h}
         </div>
       </pkt-input-wrapper>
     `;

package/dist/textinput.d.ts

@@ -1,6 +1,31 @@
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +33,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.31.2",
+  "version": "12.32.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.31.0",
+    "@oslokommune/punkt-css": "^12.32.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bb030d6ba98fa9e45a95cf3092d95b46a750a730"
+  "gitHead": "8d17b2b21d83b498b237d837747e753c64570285"
 }