@oslokommune/punkt-elements 12.18.4 → 12.18.6

package/dist/{datepicker-BhavwiBZ.js → datepicker-BrAEkscZ.js}

@@ -3,7 +3,7 @@ import { o as k } from "./if-defined-ZFE4ti2t.js";
 import { e as L, i as j, b as F, T as q, x as v, E as T, n as u, t as H } from "./icon-wUXeHiBk.js";
 import { r as V } from "./state-BfyXV7EL.js";
 import { n as D, f as _, a as N, b as E, d as A } from "./calendar-BUqcNvfI.js";
-import { P as U } from "./input-element-BQTCZtNQ.js";
+import { P as U } from "./input-element--t-9j6bw.js";
 import { p as K, v as y, r as w, M as I, m as W, e as R, n as $ } from "./ref-DuFGTLVX.js";
 import "./input-wrapper-BTQk3W8T.js";
 import "./tag-DGFgUF3l.js";

package/dist/{datepicker-vX74tb3R.cjs → datepicker-D5Dsxvio.cjs}

@@ -1,4 +1,4 @@
-"use strict";const $=require("./class-map-Boa7BqCc.cjs"),k=require("./if-defined-DEDlGbAc.cjs"),s=require("./icon-CdMQ6zBT.cjs"),T=require("./state-SKYD8kRO.cjs"),g=require("./calendar-QSulz7im.cjs"),S=require("./input-element-DNklGY_O.cjs"),r=require("./ref-DCOsLZQg.cjs");require("./input-wrapper-D-PNRJB_.cjs");require("./tag-CGy2mSLE.cjs");/**
+"use strict";const $=require("./class-map-Boa7BqCc.cjs"),k=require("./if-defined-DEDlGbAc.cjs"),s=require("./icon-CdMQ6zBT.cjs"),T=require("./state-SKYD8kRO.cjs"),g=require("./calendar-QSulz7im.cjs"),S=require("./input-element-BxMdqhqV.cjs"),r=require("./ref-DCOsLZQg.cjs");require("./input-wrapper-D-PNRJB_.cjs");require("./tag-CGy2mSLE.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/index.d.ts

@@ -38,6 +38,10 @@ export declare interface IPktProgressbar {
     role?: TProgressbarRole;
 }
 
+declare interface IPktSelect {
+    options: TSelectOption[];
+}
+
 declare interface IPktTag {
     closeTag?: boolean;
     size?: TPktSize;
@@ -317,6 +321,7 @@ export declare class PktIcon extends PktElement {
  */
 declare class PktInputElement extends PktElement {
     static get formAssociated(): boolean;
+    defaultValue: string | string[] | null;
     disabled: boolean;
     readonly: boolean;
     required: boolean;
@@ -327,8 +332,8 @@ declare class PktInputElement extends PktElement {
     ariaDescribedBy: string | null;
     ariaLabelledby: string | null;
     name: string;
-    pattern: string;
-    placeholder: string;
+    pattern: string | null;
+    placeholder: string | null;
     id: string;
     counter: boolean;
     hasError: boolean;
@@ -470,6 +475,29 @@ export declare class PktProgressbar extends PktElement implements IPktProgressba
     render(): TemplateResult<1>;
 }
 
+/**
+ * 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
+ *
+ *
+ */
+export declare class PktSelect extends PktInputElement implements IPktSelect {
+    private selectRef;
+    defaultSlot: Ref<HTMLElement>;
+    options: TSelectOption[];
+    value: string;
+    private _options;
+    constructor();
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+}
+
 declare class PktSlotController implements ReactiveController {
     host: LitElement & ReactiveControllerHost;
     nodes: Element[];
@@ -563,6 +591,13 @@ export declare type TProgressbarStatusType = 'none' | 'percentage' | 'fraction';
 
 export declare type TProgressbarTitlePosition = 'left' | 'center';
 
+export declare type TSelectOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+
 export declare type TTagSkin = 'blue' | 'green' | 'red' | 'yellow' | 'beige' | 'blue-light' | 'gray' | 'grey';
 
 export declare type TTagType = 'button' | 'reset' | 'submit';

package/dist/{input-element-BQTCZtNQ.js → input-element--t-9j6bw.js}

@@ -1,41 +1,41 @@
-import { n as s, P as f, s as o } from "./icon-wUXeHiBk.js";
+import { n as s, P as y, s as l } from "./icon-wUXeHiBk.js";
 import { r as m } from "./state-BfyXV7EL.js";
 import { u as g } from "./stringutils-DJjRa8dG.js";
 import { s as c } from "./helptext--4FLdAWi.js";
-var v = Object.defineProperty, e = (p, t, r, l) => {
+var v = Object.defineProperty, e = (p, t, r, o) => {
   for (var a = void 0, n = p.length - 1, h; n >= 0; n--)
     (h = p[n]) && (a = h(t, r, a) || a);
   return a && v(t, r, a), a;
 };
-class i extends f {
+class i extends y {
   constructor() {
-    super(), this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = 0, this.min = null, this.minlength = 0, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = "", this.placeholder = "", this.id = g(), this.counter = !1, this.hasError = !1, this.inline = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = c.props.helptextDropdownButton.default, this.label = null, this.optionalText = o.forms.labels.optional, this.requiredText = o.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
+    super(), this.defaultValue = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = null, this.min = null, this.minlength = null, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = null, this.placeholder = null, this.id = g(), this.counter = !1, this.hasError = !1, this.inline = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = c.props.helptextDropdownButton.default, this.label = null, this.optionalText = l.forms.labels.optional, this.requiredText = l.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
   }
   static get formAssociated() {
     return !0;
   }
   manageValidity(t) {
-    var r, l, a, n, h, u, d, y;
-    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, o.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (l = t.validity) != null && l.badInput ? this.internals.setValidity({ typeMismatch: !0 }, o.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
+    var r, o, a, n, h, u, d, f;
+    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, l.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (o = t.validity) != null && o.badInput ? this.internals.setValidity({ typeMismatch: !0 }, l.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
       { patternMismatch: !0 },
-      o.forms.messages.invalidPattern,
+      l.forms.messages.invalidPattern,
       t
-    ) : (n = t.validity) != null && n.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, o.forms.messages.tooShort, t) : (h = t.validity) != null && h.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, o.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
+    ) : (n = t.validity) != null && n.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, l.forms.messages.tooShort, t) : (h = t.validity) != null && h.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, l.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
       { rangeUnderflow: !0 },
-      o.forms.messages.rangeUnderflow,
+      l.forms.messages.rangeUnderflow,
       t
     ) : (d = t.validity) != null && d.rangeOverflow ? this.internals.setValidity(
       { rangeOverflow: !0 },
-      o.forms.messages.rangeOverflow,
+      l.forms.messages.rangeOverflow,
       t
-    ) : (y = t.validity) != null && y.customError ? this.internals.setValidity({ customError: !0 }, t.validationMessage, t) : this.internals.setValidity({}));
+    ) : (f = t.validity) != null && f.customError ? this.internals.setValidity({ customError: !0 }, t.validationMessage, t) : this.internals.setValidity({}));
   }
   setFormValue(t) {
     if (this.internals)
       if (Array.isArray(t)) {
         const r = new FormData();
-        t.forEach((l) => {
-          r.append(this.name, l);
+        t.forEach((o) => {
+          r.append(this.name, o);
         }), this.internals.setFormValue(r);
       } else
         this.internals.setFormValue(t);
@@ -84,9 +84,12 @@ class i extends f {
     super.updated(t), t.has("dataTestid") && this.dataTestid && this.inputRef.value && (this.skipForwardTestid ? this.hasAttribute("data-testid") || this.setAttribute("data-testid", this.dataTestid) : (this.inputRef.value.dataset.testid = this.dataTestid, this.removeAttribute("data-testid")));
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.required && (this.internals.ariaRequired = !0), this.disabled && (this.internals.ariaDisabled = !0), this.internals.setFormValue(this.value), this.inputRef && this.inputRef.value && (this.inputRef.value.setAttribute("form", ""), this.manageValidity(this.inputRef.value)), this.inputRefTo && this.inputRefTo.value && (this.inputRefTo.value.setAttribute("form", ""), this.manageValidity(this.inputRefTo.value));
+    super.firstUpdated(t), this.value && this.defaultValue !== null && (this.defaultValue = this.value), this.defaultValue !== null && !this.value && this.valueChanged(this.defaultValue, null), this.required && (this.internals.ariaRequired = !0), this.disabled && (this.internals.ariaDisabled = !0), this.id && !this.name && (this.name = this.id), this.setFormValue(this.value), this.inputRef && this.inputRef.value && (this.inputRef.value.setAttribute("form", ""), this.manageValidity(this.inputRef.value)), this.inputRefTo && this.inputRefTo.value && (this.inputRefTo.value.setAttribute("form", ""), this.manageValidity(this.inputRefTo.value));
   }
 }
+e([
+  s()
+], i.prototype, "defaultValue");
 e([
   s({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");

package/dist/input-element-BxMdqhqV.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./icon-CdMQ6zBT.cjs"),f=require("./state-SKYD8kRO.cjs"),y=require("./stringutils-CkVRq4jP.cjs"),g=require("./helptext-iZEgxz2U.cjs");var m=Object.defineProperty,s=(h,t,r,l)=>{for(var a=void 0,n=h.length-1,o;n>=0;n--)(o=h[n])&&(a=o(t,r,a)||a);return a&&m(t,r,a),a};class i extends e.PktElement{constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern=null,this.placeholder=null,this.id=y.uuidish(),this.counter=!1,this.hasError=!1,this.inline=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=g.specs.props.helptextDropdownButton.default,this.label=null,this.optionalText=e.strings.forms.labels.optional,this.requiredText=e.strings.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){var r,l,a,n,o,p,u,d;t&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},e.strings.forms.messages.required,t):(r=t.validity)!=null&&r.typeMismatch||(l=t.validity)!=null&&l.badInput?this.internals.setValidity({typeMismatch:!0},e.strings.forms.messages.invalid,t):(a=t.validity)!=null&&a.patternMismatch?this.internals.setValidity({patternMismatch:!0},e.strings.forms.messages.invalidPattern,t):(n=t.validity)!=null&&n.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},e.strings.forms.messages.tooShort,t):(o=t.validity)!=null&&o.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},e.strings.forms.messages.tooLong,t):(p=t.validity)!=null&&p.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},e.strings.forms.messages.rangeUnderflow,t):(u=t.validity)!=null&&u.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},e.strings.forms.messages.rangeOverflow,t):(d=t.validity)!=null&&d.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({}))}setFormValue(t){if(this.internals)if(Array.isArray(t)){const r=new FormData;t.forEach(l=>{r.append(this.name,l)}),this.internals.setFormValue(r)}else this.internals.setFormValue(t)}valueChanged(t,r){(r!==this.value||r!==this._value)&&(typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=t,this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&r&&r.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(r==null?void 0:r.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}updated(t){super.updated(t),t.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(t){super.firstUpdated(t),this.value&&this.defaultValue!==null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.id&&!this.name&&(this.name=this.id),this.setFormValue(this.value),this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}}s([e.n()],i.prototype,"defaultValue");s([e.n({type:Boolean,reflect:!0})],i.prototype,"disabled");s([e.n({type:Boolean,reflect:!0})],i.prototype,"readonly");s([e.n({type:Boolean,reflect:!0})],i.prototype,"required");s([e.n({type:Number,reflect:!0})],i.prototype,"max");s([e.n({type:Number,reflect:!0})],i.prototype,"maxlength");s([e.n({type:Number,reflect:!0})],i.prototype,"min");s([e.n({type:Number,reflect:!0})],i.prototype,"minlength");s([e.n({type:String})],i.prototype,"ariaDescribedBy");s([e.n({type:String})],i.prototype,"ariaLabelledby");s([e.n({type:String,reflect:!0})],i.prototype,"name");s([e.n({type:String,reflect:!0})],i.prototype,"pattern");s([e.n({type:String,reflect:!0})],i.prototype,"placeholder");s([e.n({type:String,reflect:!0})],i.prototype,"id");s([e.n({type:Boolean})],i.prototype,"counter");s([e.n({type:Boolean})],i.prototype,"hasError");s([e.n({type:Boolean})],i.prototype,"inline");s([e.n({type:Boolean})],i.prototype,"optionalTag");s([e.n({type:Boolean})],i.prototype,"requiredTag");s([e.n({type:Boolean})],i.prototype,"skipForwardTestid");s([e.n({type:Boolean})],i.prototype,"useWrapper");s([e.n({type:Boolean,reflect:!0})],i.prototype,"fullwidth");s([e.n({type:Number})],i.prototype,"counterMaxLength");s([e.n({type:String})],i.prototype,"errorMessage");s([e.n({type:String})],i.prototype,"helptext");s([e.n({type:String})],i.prototype,"helptextDropdown");s([e.n({type:String})],i.prototype,"helptextDropdownButton");s([e.n({type:String})],i.prototype,"label");s([e.n({type:String})],i.prototype,"optionalText");s([e.n({type:String})],i.prototype,"requiredText");s([e.n({type:String,attribute:"data-testid"})],i.prototype,"dataTestid");s([f.r()],i.prototype,"touched");exports.PktInputElement=i;

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-vX74tb3R.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-D5Dsxvio.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;

package/dist/pkt-datepicker.js

@@ -1,4 +1,4 @@
-import { P as t } from "./datepicker-BhavwiBZ.js";
+import { P as t } from "./datepicker-BrAEkscZ.js";
 const a = t;
 export {
   t as PktDatepicker,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-BbVWu2lm.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-B0GPdG5M.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-Ckk_yV0j.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),h=require("./datepicker-vX74tb3R.cjs"),g=require("./helptext-iZEgxz2U.cjs"),b=require("./input-wrapper-D-PNRJB_.cjs"),m=require("./link-BpqavGSD.cjs"),f=require("./linkcard-DSu3A4Yx.cjs"),y=require("./messagebox-C1aWoQbu.cjs"),v=require("./modal-Avai5eVz.cjs"),x=require("./progressbar-CuXkbAhJ.cjs"),C=require("./tag-CGy2mSLE.cjs"),O=require("./textarea-BFWHQHLs.cjs"),j=require("./textinput-33wZwZ4O.cjs");var q=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?S(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&q(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-BbVWu2lm.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-B0GPdG5M.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-Ckk_yV0j.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-D5Dsxvio.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-D-PNRJB_.cjs"),m=require("./link-BpqavGSD.cjs"),f=require("./linkcard-DSu3A4Yx.cjs"),y=require("./messagebox-C1aWoQbu.cjs"),v=require("./modal-Avai5eVz.cjs"),x=require("./progressbar-CuXkbAhJ.cjs"),C=require("./tag-CGy2mSLE.cjs"),O=require("./textarea-DfhBTXe_.cjs"),j=require("./textinput-Bm5IU-UB.cjs"),q=require("./select-DduzRK8a.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${P.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:u.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>c.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>u.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>d.PktCard});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>t.PktIcon});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>h.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>g.PktHelptext});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>b.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>m.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>f.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>y.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>v.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>x.PktProgressbar});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>C.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>O.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>j.PktTextinput});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:u.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>c.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>u.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>d.PktCard});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>t.PktIcon});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>b.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>g.PktHelptext});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>h.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>m.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>f.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>y.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>v.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>x.PktProgressbar});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>C.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>O.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>j.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>q.PktSelect});

package/dist/pkt-index.js

@@ -1,13 +1,13 @@
 import { P as w } from "./alert-Dh6A96vo.js";
-import { c as f } from "./calendar-BUqcNvfI.js";
+import { c as P } from "./calendar-BUqcNvfI.js";
 import { P as O } from "./calendar-BUqcNvfI.js";
 import { P as j } from "./card-kWt0BA2a.js";
-import { P, x as h, s as c, n, t as k } from "./icon-wUXeHiBk.js";
+import { P as f, x as h, s as c, n, t as k } from "./icon-wUXeHiBk.js";
 import { a as D } from "./icon-wUXeHiBk.js";
 import { P as x } from "./pkt-slot-controller-RJvOnbF4.js";
 import { e as m, n as d } from "./ref-DuFGTLVX.js";
 import { e as u } from "./class-map-hz16xq5a.js";
-import { P as G } from "./datepicker-BhavwiBZ.js";
+import { P as G } from "./datepicker-BrAEkscZ.js";
 import { P as M } from "./helptext--4FLdAWi.js";
 import { P as B } from "./input-wrapper-BTQk3W8T.js";
 import { P as N } from "./link-Bx9nVgZi.js";
@@ -16,14 +16,15 @@ import { P as z } from "./messagebox-LpiVQIoM.js";
 import { P as J } from "./modal-Co1YFmHi.js";
 import { P as V } from "./progressbar-BS_oawSB.js";
 import { P as Y } from "./tag-DGFgUF3l.js";
-import { P as tt } from "./textarea-BYtGXst8.js";
-import { P as rt } from "./textinput-IgHewJDJ.js";
+import { P as tt } from "./textarea-u9h8Iyx5.js";
+import { P as rt } from "./textinput-Dvln5e5X.js";
+import { P as ot } from "./select-DM0MVMQz.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let s = class extends P {
+let s = class extends f {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -98,7 +99,7 @@ o([
   n({ type: String })
 ], s.prototype, "string", 2);
 o([
-  n({ converter: f })
+  n({ converter: P })
 ], s.prototype, "strings", 2);
 o([
   n({ type: Boolean })
@@ -123,6 +124,7 @@ export {
   z as PktMessagebox,
   J as PktModal,
   V as PktProgressbar,
+  ot as PktSelect,
   Y as PktTag,
   tt as PktTextarea,
   rt as PktTextinput

package/dist/pkt-select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./select-DduzRK8a.cjs"),t=e.PktSelect;Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>e.PktSelect});exports.default=t;

package/dist/pkt-select.js

@@ -0,0 +1,6 @@
+import { P as t } from "./select-DM0MVMQz.js";
+const a = t;
+export {
+  t as PktSelect,
+  a as default
+};

package/dist/pkt-textarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textarea-BFWHQHLs.cjs"),t=e.PktTextarea;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>e.PktTextarea});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textarea-DfhBTXe_.cjs"),t=e.PktTextarea;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>e.PktTextarea});exports.default=t;

package/dist/pkt-textarea.js

@@ -1,4 +1,4 @@
-import { P as a } from "./textarea-BYtGXst8.js";
+import { P as a } from "./textarea-u9h8Iyx5.js";
 const e = a;
 export {
   a as PktTextarea,

package/dist/pkt-textinput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textinput-33wZwZ4O.cjs"),t=e.PktTextinput;Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>e.PktTextinput});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textinput-Bm5IU-UB.cjs"),t=e.PktTextinput;Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>e.PktTextinput});exports.default=t;

package/dist/pkt-textinput.js

@@ -1,4 +1,4 @@
-import { P as t } from "./textinput-IgHewJDJ.js";
+import { P as t } from "./textinput-Dvln5e5X.js";
 const p = t;
 export {
   t as PktTextinput,

package/dist/select-DM0MVMQz.js

@@ -0,0 +1,103 @@
+import { x as a, n as c, t as $ } from "./icon-wUXeHiBk.js";
+import { r as f } from "./state-BfyXV7EL.js";
+import { e as u, n as d } from "./ref-DuFGTLVX.js";
+import { o as i } from "./if-defined-ZFE4ti2t.js";
+import { P as b } from "./input-element--t-9j6bw.js";
+import "./input-wrapper-BTQk3W8T.js";
+class m {
+  constructor(t) {
+    this.nodes = [], this.host = t, this.host.addController(this), this.nodes = [];
+  }
+  hostConnected() {
+    for (Array.from(this.host.childNodes).forEach((t) => {
+      (t.nodeName === "OPTION" || t.nodeName === "DATA") && this.nodes.push(t);
+    }); this.host.firstChild; )
+      this.host.removeChild(this.host.firstChild);
+  }
+}
+var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (s, t, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? C(t, e) : t, h = s.length - 1, p; h >= 0; h--)
+    (p = s[h]) && (o = (r ? p(t, e, o) : p(o)) || o);
+  return r && o && v(t, e, o), o;
+};
+let l = class extends b {
+  constructor() {
+    super(), this.selectRef = u(), this.defaultSlot = u(), this.options = [], this.value = "", this._options = [], this.optionsController = new m(this);
+  }
+  // Used for initilization
+  connectedCallback() {
+    super.connectedCallback();
+    const s = this.options.length > 0, t = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
+    !s && t ? this.optionsController.nodes.forEach((e) => {
+      if (!e.textContent && !e.getAttribute("value")) return null;
+      const r = {
+        value: e.getAttribute("value") || e.textContent || "",
+        label: e.textContent || e.getAttribute("value") || ""
+      };
+      this._options.push(r);
+    }) : this._options = this.options;
+  }
+  firstUpdated(s) {
+    super.firstUpdated(s), this.options.length && (this._options = this.options);
+  }
+  render() {
+    const s = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+    return a`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${i(this.ariaDescribedBy)}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        class="pkt-select"
+        errorMessage=${i(this.errorMessage)}
+        forId=${this.id}
+        helptext=${i(this.helptext)}
+        helptextDropdown=${i(this.helptextDropdown)}
+        helptextDropdownButton=${i(this.helptextDropdownButton)}
+        label=${i(this.label)}
+        optionalText=${i(this.optionalText)}
+        requiredText=${i(this.requiredText)}
+      >
+        <select
+          class=${s}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${i(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id}
+          name=${this.name || this.id}
+          value=${this.value}
+          ${d(this.selectRef)}
+          ${d(this.defaultSlot)}
+        >
+          ${this._options.length > 0 && this._options.map(
+      (t) => a`<option value=${t.value} ?selected=${this.value == t.value}>
+                ${t.label}
+              </option>`
+    )}
+        </select>
+      </pkt-input-wrapper>
+    `;
+  }
+};
+n([
+  c({ type: Array })
+], l.prototype, "options", 2);
+n([
+  c({ type: String })
+], l.prototype, "value", 2);
+n([
+  f()
+], l.prototype, "_options", 2);
+l = n([
+  $("pkt-select")
+], l);
+export {
+  l as P
+};

package/dist/select-DduzRK8a.cjs

@@ -0,0 +1,40 @@
+"use strict";const r=require("./icon-CdMQ6zBT.cjs"),u=require("./state-SKYD8kRO.cjs"),l=require("./ref-DCOsLZQg.cjs"),o=require("./if-defined-DEDlGbAc.cjs"),c=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-D-PNRJB_.cjs");class d{constructor(t){this.nodes=[],this.host=t,this.host.addController(this),this.nodes=[]}hostConnected(){for(Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.nodes.push(t)});this.host.firstChild;)this.host.removeChild(this.host.firstChild)}}var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,h=(n,t,s,e)=>{for(var i=e>1?void 0:e?f(t,s):t,a=n.length-1,p;a>=0;a--)(p=n[a])&&(i=(e?p(t,s,i):p(i))||i);return e&&i&&$(t,s,i),i};exports.PktSelect=class extends c.PktInputElement{constructor(){super(),this.selectRef=l.e(),this.defaultSlot=l.e(),this.options=[],this.value="",this._options=[],this.optionsController=new d(this)}connectedCallback(){super.connectedCallback();const t=this.options.length>0,s=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&s?this.optionsController.nodes.forEach(e=>{if(!e.textContent&&!e.getAttribute("value"))return null;const i={value:e.getAttribute("value")||e.textContent||"",label:e.textContent||e.getAttribute("value")||""};this._options.push(i)}):this._options=this.options}firstUpdated(t){super.firstUpdated(t),this.options.length&&(this._options=this.options)}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return r.x`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        class="pkt-select"
+        errorMessage=${o.o(this.errorMessage)}
+        forId=${this.id}
+        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)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${o.o(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id}
+          name=${this.name||this.id}
+          value=${this.value}
+          ${l.n(this.selectRef)}
+          ${l.n(this.defaultSlot)}
+        >
+          ${this._options.length>0&&this._options.map(s=>r.x`<option value=${s.value} ?selected=${this.value==s.value}>
+                ${s.label}
+              </option>`)}
+        </select>
+      </pkt-input-wrapper>
+    `}};h([r.n({type:Array})],exports.PktSelect.prototype,"options",2);h([r.n({type:String})],exports.PktSelect.prototype,"value",2);h([u.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=h([r.t("pkt-select")],exports.PktSelect);

package/dist/select.d.ts

@@ -0,0 +1,8 @@
+export { }
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/{textarea-BFWHQHLs.cjs → textarea-DfhBTXe_.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),p=require("./class-map-Boa7BqCc.cjs"),d=require("./input-element-DNklGY_O.cjs");require("./input-wrapper-D-PNRJB_.cjs");/**
+"use strict";const r=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),p=require("./class-map-Boa7BqCc.cjs"),d=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-D-PNRJB_.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{textarea-BYtGXst8.js → textarea-u9h8Iyx5.js}

@@ -2,7 +2,7 @@ import { e as c, i as $, b as n, T as l, E as h, x as m, n as p, t as g } from "
 import { r as f } from "./state-BfyXV7EL.js";
 import { f as b, m as v, e as x, n as T } from "./ref-DuFGTLVX.js";
 import { e as y } from "./class-map-hz16xq5a.js";
-import { P as w } from "./input-element-BQTCZtNQ.js";
+import { P as w } from "./input-element--t-9j6bw.js";
 import "./input-wrapper-BTQk3W8T.js";
 /**
  * @license

package/dist/{textinput-33wZwZ4O.cjs → textinput-Bm5IU-UB.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),l=require("./class-map-Boa7BqCc.cjs"),c=require("./input-element-DNklGY_O.cjs");require("./input-wrapper-D-PNRJB_.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),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.inputRef=o.e()}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=l.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("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),l=require("./class-map-Boa7BqCc.cjs"),c=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-D-PNRJB_.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),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.inputRef=o.e()}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=l.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`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}

package/dist/{textinput-IgHewJDJ.js → textinput-Dvln5e5X.js}

@@ -2,7 +2,7 @@ import { x as h, E as n, n as o, t as c } from "./icon-wUXeHiBk.js";
 import { r as d } from "./state-BfyXV7EL.js";
 import { e as $, n as g } from "./ref-DuFGTLVX.js";
 import { e as m } from "./class-map-hz16xq5a.js";
-import { P as f } from "./input-element-BQTCZtNQ.js";
+import { P as f } from "./input-element--t-9j6bw.js";
 import "./input-wrapper-BTQk3W8T.js";
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, r, t) => {
   for (var p = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.18.4",
+  "version": "12.18.6",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ddbf35298d77e5dbfb3907db574283ffdf898117"
+  "gitHead": "ac72fa517f291b04958eb8a0d69de61036ed00d8"
 }

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { PktProgressbar } from '@/components/progressbar'
 export { PktTag } from '@/components/tag'
 export { PktTextarea } from '@/components/textarea'
 export { PktTextinput } from '@/components/textinput'
+export { PktSelect } from '@/components/select'
 
 // Export types
 export type {
@@ -27,3 +28,5 @@ export type {
 } from '@/components/progressbar'
 
 export type { TTagSkin, TTagType } from '@/components/tag'
+
+export type { TSelectOption } from '@/components/select'

package/src/components/select/index.ts

@@ -0,0 +1,5 @@
+import { PktSelect } from './select'
+
+export { PktSelect } from './select'
+export type { TSelectOption } from './select'
+export default PktSelect

package/src/components/select/select.ts

@@ -0,0 +1,124 @@
+import { html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { PktInputElement } from '@/base-elements/input-element'
+import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
+import '@/components/input-wrapper'
+
+export type TSelectOption = {
+  value: string
+  label: string
+  selected?: boolean
+  disabled?: boolean
+}
+
+export interface IPktSelect {
+  options: TSelectOption[]
+}
+
+/**
+ * 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
+ *
+ *
+ */
+
+@customElement('pkt-select')
+export class PktSelect extends PktInputElement implements IPktSelect {
+  private selectRef: Ref<HTMLSelectElement> = createRef()
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  @property({ type: Array }) options: TSelectOption[] = []
+  @property({ type: String }) value: string = ''
+
+  @state() private _options: TSelectOption[] = []
+
+  constructor() {
+    super()
+    this.optionsController = new PktOptionsSlotController(this)
+  }
+
+  // Used for initilization
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    const optionsReceivedFromProps = this.options.length > 0
+    const checkIfOptionNodesInSlot =
+      this.optionsController.nodes.length && this.optionsController.nodes.length > 0
+
+    if (!optionsReceivedFromProps && checkIfOptionNodesInSlot) {
+      this.optionsController.nodes.forEach((node: Element) => {
+        if (!node.textContent && !node.getAttribute('value')) return null
+        const option: TSelectOption = {
+          value: node.getAttribute('value') || node.textContent || '',
+          label: node.textContent || node.getAttribute('value') || '',
+        }
+        this._options.push(option)
+      })
+    } else {
+      this._options = this.options
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties)
+    if (this.options.length) {
+      this._options = this.options
+    }
+  }
+
+  render() {
+    const inputClass = `pkt-input ${this.fullwidth ? 'pkt-input--fullwidth' : ''}`
+
+    return html`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        ariaDescribedBy=${ifDefined(this.ariaDescribedBy)}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        class="pkt-select"
+        errorMessage=${ifDefined(this.errorMessage)}
+        forId=${this.id}
+        helptext=${ifDefined(this.helptext)}
+        helptextDropdown=${ifDefined(this.helptextDropdown)}
+        helptextDropdownButton=${ifDefined(this.helptextDropdownButton)}
+        label=${ifDefined(this.label)}
+        optionalText=${ifDefined(this.optionalText)}
+        requiredText=${ifDefined(this.requiredText)}
+      >
+        <select
+          class=${inputClass}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id}
+          name=${this.name || this.id}
+          value=${this.value}
+          ${ref(this.selectRef)}
+          ${ref(this.defaultSlot)}
+        >
+          ${this._options.length > 0 &&
+          this._options.map(
+            (option) =>
+              html`<option value=${option.value} ?selected=${this.value == option.value}>
+                ${option.label}
+              </option>`,
+          )}
+        </select>
+      </pkt-input-wrapper>
+    `
+  }
+}

package/dist/input-element-DNklGY_O.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./icon-CdMQ6zBT.cjs"),y=require("./state-SKYD8kRO.cjs"),f=require("./stringutils-CkVRq4jP.cjs"),g=require("./helptext-iZEgxz2U.cjs");var m=Object.defineProperty,s=(h,t,r,o)=>{for(var a=void 0,n=h.length-1,l;n>=0;n--)(l=h[n])&&(a=l(t,r,a)||a);return a&&m(t,r,a),a};class i extends e.PktElement{constructor(){super(),this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=0,this.min=null,this.minlength=0,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern="",this.placeholder="",this.id=f.uuidish(),this.counter=!1,this.hasError=!1,this.inline=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=g.specs.props.helptextDropdownButton.default,this.label=null,this.optionalText=e.strings.forms.labels.optional,this.requiredText=e.strings.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){var r,o,a,n,l,p,u,d;t&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},e.strings.forms.messages.required,t):(r=t.validity)!=null&&r.typeMismatch||(o=t.validity)!=null&&o.badInput?this.internals.setValidity({typeMismatch:!0},e.strings.forms.messages.invalid,t):(a=t.validity)!=null&&a.patternMismatch?this.internals.setValidity({patternMismatch:!0},e.strings.forms.messages.invalidPattern,t):(n=t.validity)!=null&&n.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},e.strings.forms.messages.tooShort,t):(l=t.validity)!=null&&l.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},e.strings.forms.messages.tooLong,t):(p=t.validity)!=null&&p.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},e.strings.forms.messages.rangeUnderflow,t):(u=t.validity)!=null&&u.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},e.strings.forms.messages.rangeOverflow,t):(d=t.validity)!=null&&d.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({}))}setFormValue(t){if(this.internals)if(Array.isArray(t)){const r=new FormData;t.forEach(o=>{r.append(this.name,o)}),this.internals.setFormValue(r)}else this.internals.setFormValue(t)}valueChanged(t,r){(r!==this.value||r!==this._value)&&(typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=t,this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&r&&r.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(r==null?void 0:r.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}updated(t){super.updated(t),t.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(t){super.firstUpdated(t),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.internals.setFormValue(this.value),this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}}s([e.n({type:Boolean,reflect:!0})],i.prototype,"disabled");s([e.n({type:Boolean,reflect:!0})],i.prototype,"readonly");s([e.n({type:Boolean,reflect:!0})],i.prototype,"required");s([e.n({type:Number,reflect:!0})],i.prototype,"max");s([e.n({type:Number,reflect:!0})],i.prototype,"maxlength");s([e.n({type:Number,reflect:!0})],i.prototype,"min");s([e.n({type:Number,reflect:!0})],i.prototype,"minlength");s([e.n({type:String})],i.prototype,"ariaDescribedBy");s([e.n({type:String})],i.prototype,"ariaLabelledby");s([e.n({type:String,reflect:!0})],i.prototype,"name");s([e.n({type:String,reflect:!0})],i.prototype,"pattern");s([e.n({type:String,reflect:!0})],i.prototype,"placeholder");s([e.n({type:String,reflect:!0})],i.prototype,"id");s([e.n({type:Boolean})],i.prototype,"counter");s([e.n({type:Boolean})],i.prototype,"hasError");s([e.n({type:Boolean})],i.prototype,"inline");s([e.n({type:Boolean})],i.prototype,"optionalTag");s([e.n({type:Boolean})],i.prototype,"requiredTag");s([e.n({type:Boolean})],i.prototype,"skipForwardTestid");s([e.n({type:Boolean})],i.prototype,"useWrapper");s([e.n({type:Boolean,reflect:!0})],i.prototype,"fullwidth");s([e.n({type:Number})],i.prototype,"counterMaxLength");s([e.n({type:String})],i.prototype,"errorMessage");s([e.n({type:String})],i.prototype,"helptext");s([e.n({type:String})],i.prototype,"helptextDropdown");s([e.n({type:String})],i.prototype,"helptextDropdownButton");s([e.n({type:String})],i.prototype,"label");s([e.n({type:String})],i.prototype,"optionalText");s([e.n({type:String})],i.prototype,"requiredText");s([e.n({type:String,attribute:"data-testid"})],i.prototype,"dataTestid");s([y.r()],i.prototype,"touched");exports.PktInputElement=i;