@oslokommune/punkt-elements 12.41.0 → 12.42.0

package/dist/index.d.ts

@@ -95,6 +95,7 @@ declare interface IPktAlert {
     ariaLive?: TAriaLive | null;
     'aria-live'?: TAriaLive | null;
     compact?: boolean;
+    role?: string;
 }
 
 export declare interface IPktBackLink {
@@ -163,6 +164,7 @@ export declare interface IPktCombobox {
     optionalTag?: boolean;
     optionalText?: string;
     options?: IPktComboboxOption[];
+    defaultOptions?: IPktComboboxOption[];
     placeholder?: string | null;
     requiredTag?: boolean;
     requiredText?: string;
@@ -338,6 +340,7 @@ export declare class PktAlert extends PktElement implements IPktAlert {
     'aria-live': TAriaLive | null;
     closeAlert: boolean;
     date: string | null;
+    role: string;
     _isClosed: boolean;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
@@ -512,6 +515,7 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     constructor();
     value: string | string[];
     options: IPktComboboxOption[];
+    defaultOptions: IPktComboboxOption[];
     allowUserInput: boolean;
     typeahead: boolean;
     includeSearch: boolean;

package/dist/pkt-alert.cjs

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

package/dist/pkt-alert.js

@@ -1,4 +1,4 @@
-import { P as t } from "./alert-CoGYPbs-.js";
+import { P as t } from "./alert-oh7nc3ip.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-combobox.cjs

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

package/dist/pkt-combobox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./combobox-Ct7-a2Vy.js";
+import { P as o } from "./combobox-CavDENt-.js";
 const b = o;
 export {
   o as PktCombobox,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-D1r9LYda.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.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 P=require("./alert-BY97zZYx.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-DMkMUJfx.cjs"),h=require("./consent-D1r9LYda.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.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="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,11 +1,11 @@
-import { P as A } from "./alert-CoGYPbs-.js";
+import { P as A } from "./alert-oh7nc3ip.js";
 import { P as B, a as E } from "./accordionitem-DkE9or0K.js";
 import { P as O } from "./backlink-BnlrDl9O.js";
 import { P as T } from "./button-OLSvT2Im.js";
 import { c as f } from "./calendar-Beno8yU7.js";
 import { P as D } from "./calendar-Beno8yU7.js";
 import { P as G } from "./card-BxHlJq4J.js";
-import { P as K } from "./combobox-Ct7-a2Vy.js";
+import { P as K } from "./combobox-CavDENt-.js";
 import { P as U } from "./consent-a09DlJZT.js";
 import { P as q } from "./checkbox-B67_cfqW.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-gAd63VwC.js";

package/package.json

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

package/src/components/alert/alert.ts

@@ -20,6 +20,7 @@ export interface IPktAlert {
   ariaLive?: TAriaLive | null
   'aria-live'?: TAriaLive | null
   compact?: boolean
+  role?: string
 }
 @customElement('pkt-alert')
 export class PktAlert extends PktElement implements IPktAlert {
@@ -41,6 +42,7 @@ export class PktAlert extends PktElement implements IPktAlert {
   @property({ type: String, reflect: true }) 'aria-live': TAriaLive | null = null
   @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
   @property({ type: String, reflect: true }) date: string | null = null
+  @property({ type: String, reflect: true }) role: string = 'status'
 
   @state() _isClosed: boolean = false
 
@@ -85,7 +87,7 @@ export class PktAlert extends PktElement implements IPktAlert {
     }
 
     return html`
-      <div class=${classMap(classes)}>
+      <div class=${classMap(classes)} aria-live=${this['aria-live']}>
         <div class=${classMap(gridClasses)}>
           <pkt-icon
             class="pkt-alert__icon"

package/src/components/combobox/combobox.ts

@@ -49,6 +49,7 @@ export interface IPktCombobox {
   optionalTag?: boolean
   optionalText?: string
   options?: IPktComboboxOption[]
+  defaultOptions?: IPktComboboxOption[]
   placeholder?: string | null
   requiredTag?: boolean
   requiredText?: string
@@ -79,6 +80,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
   // Props / Attributes
   @property({ type: String, reflect: true }) value: string | string[] = ''
   @property({ type: Array }) options: IPktComboboxOption[] = []
+  @property({ type: Array }) defaultOptions: IPktComboboxOption[] = []
   @property({ type: Boolean }) allowUserInput: boolean = false
   @property({ type: Boolean }) typeahead: boolean = false
   @property({ type: Boolean }) includeSearch: boolean = false
@@ -118,6 +120,15 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       })
 
     this._options = []
+
+    // Deep clone defaultOptions into options, preserving userAdded options
+    if (this.defaultOptions && this.defaultOptions.length) {
+      const userAdded = this.options?.filter((opt) => opt.userAdded) || []
+      this.options = [...userAdded, ...structuredClone(this.defaultOptions)]
+      this._options = [...this.options]
+    }
+
+    // If options are provided via the options slot, we need to extract them
     if (this.optionsController.nodes.length) {
       const options: IPktComboboxOption[] = []
       this.optionsController.nodes.forEach((node: Element) => {
@@ -156,8 +167,23 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       }
       this.isMaxItemsReached()
     }
+
+    // If defaultOptions changed, update options (preserving userAdded)
+    if (changedProperties.has('defaultOptions') && this.defaultOptions.length) {
+      const userAdded = this.options?.filter((opt) => opt.userAdded) || []
+      this.options = [...userAdded, ...structuredClone(this.defaultOptions)]
+      this._options = [...this.options]
+    }
+
     if (changedProperties.has('options') && this.options.length) {
-      this._options = this.options
+      // If options change, we need to update _options, but we need to preserve userAdded values
+      const userAddedValues = this._options.filter((option) => option.userAdded)
+      // Filter out userAddedValues that are overridden by this.options
+      const filteredUserAdded = userAddedValues.filter(
+        (userOpt) => !this.options.some((opt) => opt.value === userOpt.value),
+      )
+      // Merge, giving precedence to this.options
+      this._options = [...filteredUserAdded, ...this.options]
       this._options.forEach((option) => {
         if (option.value && !option.label) {
           option.label = option.value

package/dist/alert-D2PhTV94.cjs

@@ -1,32 +0,0 @@
-"use strict";const c=require("./class-map-DWDPOqjO.cjs"),e=require("./element-90YeMNbV.cjs"),u=require("./state-D-Recv7U.cjs"),h=require("./pkt-slot-controller-Da-RgXfS.cjs"),d=require("./ref-B-w1vCo8.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B1_BRNqf.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,t,s,l)=>{for(var r=l>1?void 0:l?_(t,s):t,p=o.length-1,n;p>=0;p--)(n=o[p])&&(r=(l?n(t,s,r):n(r))||r);return l&&r&&f(t,s,r),r};exports.PktAlert=class extends e.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(t,s,l){t==="ariaLive"&&(this["aria-live"]=l),super.attributeChangedCallback(t,s,l)}updated(t){super.updated(t),t.has("ariaLive")&&(this["aria-live"]=this.ariaLive),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e.x`
-      <div class=${c.e(t)}>
-        <div class=${c.e(s)}>
-          <pkt-icon
-            class="pkt-alert__icon"
-            aria-hidden="true"
-            name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
-          ></pkt-icon>
-
-          ${this.closeAlert?e.x`
-                <div class="pkt-alert__close">
-                  <pkt-button
-                    tabindex="0"
-                    aria-label="close"
-                    size=${this.compact?"small":"medium"}
-                    type="button"
-                    skin="tertiary"
-                    iconName="close"
-                    variant="icon-only"
-                    @click=${this.close}
-                  >
-                  </pkt-button>
-                </div>
-              `:e.E}
-          ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
-
-          <div class="pkt-alert__text" ${d.n(this.defaultSlot)}></div>
-
-          ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
-        </div>
-      </div>
-    `}};i([e.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);i([e.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);i([e.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);i([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);i([u.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([e.t("pkt-alert")],exports.PktAlert);