@oslokommune/punkt-elements 16.26.5 → 16.26.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [16.26.6](https://github.com/oslokommune/punkt/compare/16.26.5...16.26.6) (2026-07-06)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ Ingen
18
+
19
+ ### Chores
20
+ Ingen
21
+
22
+ ---
23
+
24
+
8
25
  ## [16.27.0](https://github.com/oslokommune/punkt/compare/16.26.4...16.27.0) (2026-07-03)
9
26
 
10
27
  ### ⚠ BREAKING CHANGES
@@ -8,7 +8,7 @@ import "./tag-DBNga0hg.js";
8
8
  import { t as d } from "./repeat-BH0cL82q.js";
9
9
  import { a as f, c as p, i as m, o as h, r as g, s as _ } from "./listbox-LdyWPu7W.js";
10
10
  import { t as v } from "./input-element-DgylI1GK.js";
11
- import { t as y } from "./pkt-options-controller-Cis62vGe.js";
11
+ import { t as y } from "./pkt-options-controller-DMxYwnnj.js";
12
12
  import "./input-wrapper-DaA98B5l.js";
13
13
  //#region ../../shared-utils/combobox/input-utils.ts
14
14
  var b = (e, t, n) => {
@@ -771,7 +771,7 @@ var k = class extends O {
771
771
  if (t && this._internalValueSync) this._internalValueSync = !1, n && this.syncValueAndDispatch(e.get("_value"));
772
772
  else if (t) {
773
773
  let e = [...this._value], t = this.parseValue();
774
- t.join(",") !== this._value.join(",") && (this._value = t), this.updateMaxReached(), this.syncValueAndDispatch(e);
774
+ t.join(",") !== this._value.join(",") && (this._value = t, this.options.forEach((e) => e.selected = t.includes(e.value)), this._options.forEach((e) => e.selected = t.includes(e.value)), this._options = [...this._options]), this.updateMaxReached(), this.syncValueAndDispatch(e);
775
775
  } else n && this.syncValueAndDispatch(e.get("_value"));
776
776
  if (e.has("defaultOptions") && this.defaultOptions.length) {
777
777
  let e = (Array.isArray(this.options) ? this.options : []).filter((e) => e.userAdded) || [];
@@ -1,4 +1,4 @@
1
- const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs"),i=require("./ref-DO7TzO4O.cjs");require("./tag-C4fEuT-r.cjs");const a=require("./repeat-DRnLAg0O.cjs"),o=require("./listbox-89wMuQVK.cjs"),s=require("./input-element-DZLXF2rI.cjs"),c=require("./pkt-options-controller-DHKHMyXM.cjs");require("./input-wrapper-BRjQB4zM.cjs");var l=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},m={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=o.r(n),t.push(n)}),t}},h={syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`array`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`array`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},_=class extends s.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=``,this.multiple=!1,this.maxlength=null,this.displayValueAs=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.o({type:String,reflect:!0})],_.prototype,`value`,void 0),e.n([e.o({type:Array})],_.prototype,`options`,void 0),e.n([e.o({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.o({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.o({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.o({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.o({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.o({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.o({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.o({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.a()],_.prototype,`_options`,void 0),e.n([e.a()],_.prototype,`_value`,void 0),e.n([e.a()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.a()],_.prototype,`_userInfoMessage`,void 0),e.n([e.a()],_.prototype,`_addValueText`,void 0),e.n([e.a()],_.prototype,`_maxIsReached`,void 0),e.n([e.a()],_.prototype,`_search`,void 0),e.n([e.a()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`Ny verdi lagt til`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`Ingen treff i søket`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`Maks antall valg nådd`,d=!1,p=e):(s&&this.removeAllSelected(),f=`Ingen gyldig verdi valgt`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`Maks antall valg nådd`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)||(this._options=[...this._options,t]))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`For mange valgt`;return}this._value=this._options.map(e=>e.value),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`Verdien er allerede valgt`;return}this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()===``)return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e];else if(!o.i(this.options,e)){if(o.c(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead)if(this._search){let{filtered:n,suggestion:r}=o.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection=`backward`)}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(this._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.getAttribute(`data-focusfix`)===this.id||t===this.inputRef.value||t===this.triggerRef.value||this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple)if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=o.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}else if(e!==``){let{action:t,value:n}=u(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n);break}}!this.multiple&&this._value[0]?this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.disabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]));break}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=l(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1;break}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n();break}}checkForMatches(){let e=d(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},b=class extends y{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(e)}}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&!this.multiple&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=Array.isArray(this.options)?[...this.options]:[];let e=h.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e.p`
1
+ const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs"),i=require("./ref-DO7TzO4O.cjs");require("./tag-C4fEuT-r.cjs");const a=require("./repeat-DRnLAg0O.cjs"),o=require("./listbox-89wMuQVK.cjs"),s=require("./input-element-DZLXF2rI.cjs"),c=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-BRjQB4zM.cjs");var l=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},m={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=o.r(n),t.push(n)}),t}},h={syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`array`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`array`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},_=class extends s.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=``,this.multiple=!1,this.maxlength=null,this.displayValueAs=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.o({type:String,reflect:!0})],_.prototype,`value`,void 0),e.n([e.o({type:Array})],_.prototype,`options`,void 0),e.n([e.o({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.o({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.o({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.o({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.o({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.o({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.o({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.o({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.a()],_.prototype,`_options`,void 0),e.n([e.a()],_.prototype,`_value`,void 0),e.n([e.a()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.a()],_.prototype,`_userInfoMessage`,void 0),e.n([e.a()],_.prototype,`_addValueText`,void 0),e.n([e.a()],_.prototype,`_maxIsReached`,void 0),e.n([e.a()],_.prototype,`_search`,void 0),e.n([e.a()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`Ny verdi lagt til`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`Ingen treff i søket`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`Maks antall valg nådd`,d=!1,p=e):(s&&this.removeAllSelected(),f=`Ingen gyldig verdi valgt`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`Maks antall valg nådd`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)||(this._options=[...this._options,t]))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`For mange valgt`;return}this._value=this._options.map(e=>e.value),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`Verdien er allerede valgt`;return}this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()===``)return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e];else if(!o.i(this.options,e)){if(o.c(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead)if(this._search){let{filtered:n,suggestion:r}=o.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection=`backward`)}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(this._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.getAttribute(`data-focusfix`)===this.id||t===this.inputRef.value||t===this.triggerRef.value||this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple)if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=o.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}else if(e!==``){let{action:t,value:n}=u(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n);break}}!this.multiple&&this._value[0]?this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.disabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]));break}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=l(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1;break}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n();break}}checkForMatches(){let e=d(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},b=class extends y{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this.options.forEach(e=>e.selected=t.includes(e.value)),this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(e)}}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&!this.multiple&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=Array.isArray(this.options)?[...this.options]:[];let e=h.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e.p`
2
2
  <pkt-input-wrapper
3
3
  .label=${this.label}
4
4
  .helptext=${this.helptext}
@@ -6,5 +6,8 @@ export declare class Select extends PktElement {
6
6
  private mixedSlotOptions;
7
7
  private modifySlotOptions;
8
8
  private modifyPropOptions;
9
+ private modalOptionCount;
10
+ private reparentOptionCount;
11
+ private toggleDisabledStatus;
9
12
  render(): import('lit').TemplateResult<1>;
10
13
  }
@@ -1 +1 @@
1
- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./combobox-BhIqExJZ.cjs");exports.PktCombobox=e.n,exports.default=e.t;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./combobox-BjBNyEly.cjs");exports.PktCombobox=e.n,exports.default=e.t;
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "./combobox-B9YSsRZB.js";
1
+ import { n as e, t } from "./combobox-1xG07Oce.js";
2
2
  export { e as PktCombobox, t as default };
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert-B8dLsiTz.cjs"),t=require("./icon-B8PVq2O6.cjs"),n=require("./button-B5tQpKeG.cjs"),r=require("./accordion-FISAiAbX.cjs"),i=require("./backlink-DDGlLzk9.cjs"),a=require("./breadcrumbs-D3tfWqvC.cjs"),o=require("./calendar-DIzGBdbh.cjs"),s=require("./card-BSZs5lRF.cjs"),c=require("./tag-C4fEuT-r.cjs"),l=require("./heading-DyJpBFT2.cjs"),u=require("./combobox-BhIqExJZ.cjs"),d=require("./header-DaFGbtLu.cjs"),f=require("./header-menu-DMdP_c6X.cjs"),p=require("./datepicker-DXxTiHJd.cjs"),m=require("./fileupload-BLVrslUX.cjs"),h=require("./helptext-eckq4JEX.cjs"),g=require("./input-wrapper-BRjQB4zM.cjs"),_=require("./consent-X3wvhteO.cjs"),v=require("./checkbox-DfIvuwAj.cjs"),y=require("./modal-DKU7PnjJ.cjs"),b=require("./progressbar-BN5y20CC.cjs"),x=require("./link-Geze7498.cjs"),S=require("./textinput-CaIDCB2J.cjs"),C=require("./linkcard-6LCXRTR-.cjs"),w=require("./loader-CgW4Vst3.cjs"),T=require("./messagebox-VD5oEZ19.cjs"),E=require("./radiobutton-BH6rl98w.cjs"),D=require("./tabs-CGo0ODPa.cjs"),O=require("./textarea-Cb0pj6ki.cjs"),k=require("./select-BVPcJEIz.cjs"),A=require("./searchinput-DG6YetL1.cjs"),j=require("./timepicker-BcHEEtpX.cjs");exports.PktAccordion=r.r,exports.PktAccordionItem=r.n,exports.PktAlert=e.n,exports.PktBackLink=i.n,exports.PktBreadcrumbs=a.t,exports.PktButton=n.n,exports.PktCalendar=o.n,exports.PktCard=s.n,exports.PktCheckbox=v.n,exports.PktCombobox=u.n,exports.PktConsent=_.n,exports.PktDateTags=p.a,exports.PktDatepicker=p.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return m.n}}),exports.PktHeader=d.t,exports.PktHeaderMenu=f.n,exports.PktHeaderService=d.n,exports.PktHeaderUserMenu=d.r,exports.PktHeading=l.n,exports.PktHelptext=h.n,exports.PktIcon=t.n,exports.PktInputWrapper=g.n,exports.PktLink=x.n,exports.PktLinkCard=C.n,exports.PktLoader=w.n,exports.PktMessagebox=T.n,exports.PktModal=y.n,exports.PktProgressbar=b.n,exports.PktRadioButton=E.n,exports.PktRadiobutton=E.n,exports.PktSearchInput=A.n,exports.PktSelect=k.n,exports.PktTabItem=D.n,exports.PktTabs=D.r,exports.PktTag=c.n,exports.PktTextarea=O.n,exports.PktTextinput=S.n,exports.PktTimepicker=j.t;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert-B8dLsiTz.cjs"),t=require("./icon-B8PVq2O6.cjs"),n=require("./button-B5tQpKeG.cjs"),r=require("./accordion-FISAiAbX.cjs"),i=require("./backlink-DDGlLzk9.cjs"),a=require("./breadcrumbs-D3tfWqvC.cjs"),o=require("./calendar-DIzGBdbh.cjs"),s=require("./card-BSZs5lRF.cjs"),c=require("./tag-C4fEuT-r.cjs"),l=require("./heading-DyJpBFT2.cjs"),u=require("./combobox-BjBNyEly.cjs"),d=require("./header-DaFGbtLu.cjs"),f=require("./header-menu-DMdP_c6X.cjs"),p=require("./datepicker-DXxTiHJd.cjs"),m=require("./fileupload-BLVrslUX.cjs"),h=require("./helptext-eckq4JEX.cjs"),g=require("./input-wrapper-BRjQB4zM.cjs"),_=require("./consent-X3wvhteO.cjs"),v=require("./checkbox-DfIvuwAj.cjs"),y=require("./modal-DKU7PnjJ.cjs"),b=require("./progressbar-BN5y20CC.cjs"),x=require("./link-Geze7498.cjs"),S=require("./textinput-CaIDCB2J.cjs"),C=require("./linkcard-6LCXRTR-.cjs"),w=require("./loader-CgW4Vst3.cjs"),T=require("./messagebox-VD5oEZ19.cjs"),E=require("./radiobutton-BH6rl98w.cjs"),D=require("./tabs-CGo0ODPa.cjs"),O=require("./textarea-Cb0pj6ki.cjs"),k=require("./select-C3Q_bGZb.cjs"),A=require("./searchinput-DG6YetL1.cjs"),j=require("./timepicker-BcHEEtpX.cjs");exports.PktAccordion=r.r,exports.PktAccordionItem=r.n,exports.PktAlert=e.n,exports.PktBackLink=i.n,exports.PktBreadcrumbs=a.t,exports.PktButton=n.n,exports.PktCalendar=o.n,exports.PktCard=s.n,exports.PktCheckbox=v.n,exports.PktCombobox=u.n,exports.PktConsent=_.n,exports.PktDateTags=p.a,exports.PktDatepicker=p.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return m.n}}),exports.PktHeader=d.t,exports.PktHeaderMenu=f.n,exports.PktHeaderService=d.n,exports.PktHeaderUserMenu=d.r,exports.PktHeading=l.n,exports.PktHelptext=h.n,exports.PktIcon=t.n,exports.PktInputWrapper=g.n,exports.PktLink=x.n,exports.PktLinkCard=C.n,exports.PktLoader=w.n,exports.PktMessagebox=T.n,exports.PktModal=y.n,exports.PktProgressbar=b.n,exports.PktRadioButton=E.n,exports.PktRadiobutton=E.n,exports.PktSearchInput=A.n,exports.PktSelect=k.n,exports.PktTabItem=D.n,exports.PktTabs=D.r,exports.PktTag=c.n,exports.PktTextarea=O.n,exports.PktTextinput=S.n,exports.PktTimepicker=j.t;
package/dist/pkt-index.js CHANGED
@@ -8,7 +8,7 @@ import { n as s } from "./calendar-CjlUA-Lb.js";
8
8
  import { n as c } from "./card-D3jVkwxJ.js";
9
9
  import { n as l } from "./tag-DBNga0hg.js";
10
10
  import { n as u } from "./heading-CD0PhL8g.js";
11
- import { n as d } from "./combobox-B9YSsRZB.js";
11
+ import { n as d } from "./combobox-1xG07Oce.js";
12
12
  import { n as f, r as p, t as m } from "./header-CFzvRT3j.js";
13
13
  import { n as h } from "./header-menu-C8b5vd3n.js";
14
14
  import { a as g, t as _ } from "./datepicker-B_J5APcK.js";
@@ -27,7 +27,7 @@ import { n as k } from "./messagebox-fiaAyHLG.js";
27
27
  import { n as A } from "./radiobutton-DFCA9V07.js";
28
28
  import { n as j, r as M } from "./tabs-ChdR0D1C.js";
29
29
  import { n as N } from "./textarea-DNitIoWX.js";
30
- import { n as P } from "./select-C1--vTZ2.js";
30
+ import { n as P } from "./select-YyR17Ml6.js";
31
31
  import { n as F } from "./searchinput-CyO5k4Q4.js";
32
32
  import { t as I } from "./timepicker-Ch-ums4R.js";
33
33
  export { i as PktAccordion, r as PktAccordionItem, e as PktAlert, a as PktBackLink, o as PktBreadcrumbs, n as PktButton, s as PktCalendar, c as PktCard, S as PktCheckbox, d as PktCombobox, x as PktConsent, g as PktDateTags, _ as PktDatepicker, v as PktFileUpload, m as PktHeader, h as PktHeaderMenu, f as PktHeaderService, p as PktHeaderUserMenu, u as PktHeading, y as PktHelptext, t as PktIcon, b as PktInputWrapper, T as PktLink, D as PktLinkCard, O as PktLoader, k as PktMessagebox, C as PktModal, w as PktProgressbar, A as PktRadioButton, A as PktRadiobutton, F as PktSearchInput, P as PktSelect, j as PktTabItem, M as PktTabs, l as PktTag, N as PktTextarea, E as PktTextinput, I as PktTimepicker };
@@ -0,0 +1 @@
1
+ const e=require("./element-with-slot-BY7Jc-q8.cjs");var t=class{constructor(e){this.nodes=[],this.options=[],this.generation=0,this.host=e,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){this.nodes=[],Array.from(this.host.childNodes).forEach(e=>{(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&this.addNode(e)}),this.createOptions(),this.observer.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`disabled`,`selected`,`value`],attributeOldValue:!0,characterData:!0})}hostDisconnected(){this.observer.disconnect()}addNode(e){(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&(e.hasAttribute(`hidden`)&&!e.hasAttribute(`data-skip`)&&e.setAttribute(`data-hidden`,`true`),!e.hasAttribute(`hidden`)&&e.hasAttribute(`data-skip`)&&e.hasAttribute(`data-hidden`)&&e.removeAttribute(`data-hidden`),e.setAttribute(`class`,`pkt-hide`),e.setAttribute(`data-skip`,`true`),e.setAttribute(`hidden`,`true`),this.nodes.includes(e)||this.nodes.push(e))}createOptions(){this.options=this.nodes.map(e=>({value:e.hasAttribute(`value`)?e.getAttribute(`value`)??``:e.textContent??``,label:e.textContent||e.getAttribute(`value`)||``,selected:e.hasAttribute(`selected`),disabled:e.hasAttribute(`disabled`),hidden:e.hasAttribute(`data-hidden`)})),this.generation++,this.host.requestUpdate()}handleMutations(t){let n=!1;t.forEach(t=>{if(t.type===`childList`){if(t.target!==this.host){let r=t.target;e.r(r)&&r.parentNode===this.host&&(n=!0);return}t.addedNodes.forEach(t=>{e.r(t)&&(this.addNode(t),n=!0)}),t.removedNodes.forEach(t=>{e.r(t)&&(this.nodes=this.nodes.filter(e=>e!==t),n=!0)})}if(t.type===`attributes`){let r=t.target;if(!e.r(r)||r.parentNode!==this.host||t.attributeName&&r.getAttribute(t.attributeName)===t.oldValue)return;this.addNode(r),n=!0}if(t.type===`characterData`){let r=t.target.parentElement;r&&e.r(r)&&r.parentNode===this.host&&(n=!0)}}),n&&this.createOptions()}};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});
@@ -5,19 +5,26 @@ var t = class {
5
5
  this.nodes = [], this.options = [], this.generation = 0, this.host = e, this.host.addController(this), this.nodes = [], this.options = [], this.observer = new MutationObserver((e) => this.handleMutations(e));
6
6
  }
7
7
  hostConnected() {
8
- Array.from(this.host.childNodes).forEach((e) => {
8
+ this.nodes = [], Array.from(this.host.childNodes).forEach((e) => {
9
9
  (e.nodeName === "OPTION" || e.nodeName === "DATA") && this.addNode(e);
10
10
  }), this.createOptions(), this.observer.observe(this.host, {
11
11
  childList: !0,
12
- subtree: !1,
13
- attributes: !0
12
+ subtree: !0,
13
+ attributes: !0,
14
+ attributeFilter: [
15
+ "disabled",
16
+ "selected",
17
+ "value"
18
+ ],
19
+ attributeOldValue: !0,
20
+ characterData: !0
14
21
  });
15
22
  }
16
23
  hostDisconnected() {
17
24
  this.observer.disconnect();
18
25
  }
19
26
  addNode(e) {
20
- (e.nodeName === "OPTION" || e.nodeName === "DATA") && (e.hasAttribute("hidden") && !e.hasAttribute("data-skip") && e.setAttribute("data-hidden", "true"), !e.hasAttribute("hidden") && e.hasAttribute("data-skip") && e.hasAttribute("data-hidden") && e.removeAttribute("data-hidden"), e.setAttribute("class", "pkt-hide"), e.setAttribute("data-skip", "true"), e.setAttribute("hidden", "true"), this.nodes.push(e));
27
+ (e.nodeName === "OPTION" || e.nodeName === "DATA") && (e.hasAttribute("hidden") && !e.hasAttribute("data-skip") && e.setAttribute("data-hidden", "true"), !e.hasAttribute("hidden") && e.hasAttribute("data-skip") && e.hasAttribute("data-hidden") && e.removeAttribute("data-hidden"), e.setAttribute("class", "pkt-hide"), e.setAttribute("data-skip", "true"), e.setAttribute("hidden", "true"), this.nodes.includes(e) || this.nodes.push(e));
21
28
  }
22
29
  createOptions() {
23
30
  this.options = this.nodes.map((e) => ({
@@ -31,11 +38,27 @@ var t = class {
31
38
  handleMutations(t) {
32
39
  let n = !1;
33
40
  t.forEach((t) => {
34
- t.type === "childList" && (t.addedNodes.forEach((t) => {
35
- e(t) && (this.addNode(t), n = !0);
36
- }), t.removedNodes.forEach((t) => {
37
- e(t) && (this.nodes = this.nodes.filter((e) => e !== t), n = !0);
38
- })), t.type === "attributes" && e(t.target) && (this.addNode(t.target), n = !0);
41
+ if (t.type === "childList") {
42
+ if (t.target !== this.host) {
43
+ let r = t.target;
44
+ e(r) && r.parentNode === this.host && (n = !0);
45
+ return;
46
+ }
47
+ t.addedNodes.forEach((t) => {
48
+ e(t) && (this.addNode(t), n = !0);
49
+ }), t.removedNodes.forEach((t) => {
50
+ e(t) && (this.nodes = this.nodes.filter((e) => e !== t), n = !0);
51
+ });
52
+ }
53
+ if (t.type === "attributes") {
54
+ let r = t.target;
55
+ if (!e(r) || r.parentNode !== this.host || t.attributeName && r.getAttribute(t.attributeName) === t.oldValue) return;
56
+ this.addNode(r), n = !0;
57
+ }
58
+ if (t.type === "characterData") {
59
+ let r = t.target.parentElement;
60
+ r && e(r) && r.parentNode === this.host && (n = !0);
61
+ }
39
62
  }), n && this.createOptions();
40
63
  }
41
64
  };
@@ -1 +1 @@
1
- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./select-BVPcJEIz.cjs");exports.PktSelect=e.n,exports.default=e.t;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./select-C3Q_bGZb.cjs");exports.PktSelect=e.n,exports.default=e.t;
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "./select-C1--vTZ2.js";
1
+ import { n as e, t } from "./select-YyR17Ml6.js";
2
2
  export { e as PktSelect, t as default };
@@ -1,4 +1,4 @@
1
- const e=require("./element-DJzurxgt.cjs"),t=require("./element-with-slot-BY7Jc-q8.cjs"),n=require("./if-defined-DrwbxQOj.cjs"),r=require("./ref-DO7TzO4O.cjs"),i=require("./input-element-DZLXF2rI.cjs"),a=require("./pkt-options-controller-DHKHMyXM.cjs");require("./input-wrapper-BRjQB4zM.cjs");var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.n([e.o({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.n([e.a()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.p`
1
+ const e=require("./element-DJzurxgt.cjs"),t=require("./element-with-slot-BY7Jc-q8.cjs"),n=require("./if-defined-DrwbxQOj.cjs"),r=require("./ref-DO7TzO4O.cjs"),i=require("./input-element-DZLXF2rI.cjs"),a=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-BRjQB4zM.cjs");var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.n([e.o({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.n([e.a()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.p`
2
2
  <pkt-input-wrapper
3
3
  ?counter=${this.counter}
4
4
  ?disabled=${this.disabled}
@@ -3,7 +3,7 @@ import { n as a } from "./element-with-slot-mXLg8gg8.js";
3
3
  import { t as o } from "./if-defined-D0bnetLJ.js";
4
4
  import { n as s, t as c } from "./ref-WGS0u7i2.js";
5
5
  import { t as l } from "./input-element-DgylI1GK.js";
6
- import { t as u } from "./pkt-options-controller-Cis62vGe.js";
6
+ import { t as u } from "./pkt-options-controller-DMxYwnnj.js";
7
7
  import "./input-wrapper-DaA98B5l.js";
8
8
  //#region src/base-elements/options-input-element.ts
9
9
  var d = class extends l {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-elements",
3
- "version": "16.26.5",
3
+ "version": "16.26.6",
4
4
  "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
5
5
  "homepage": "https://punkt.oslo.kommune.no",
6
6
  "author": "Team Designsystem, Oslo Origo",
@@ -80,5 +80,5 @@
80
80
  "url": "https://github.com/oslokommune/punkt/issues"
81
81
  },
82
82
  "license": "MIT",
83
- "gitHead": "0a1e6fef1813b2de00696cbdd075f060fdc1e22c"
83
+ "gitHead": "d47c547935b6e47994ee8d5b921176fde1e75118"
84
84
  }
@@ -540,4 +540,55 @@ describe('PktCombobox', () => {
540
540
  expect(valueEl?.textContent?.trim()).toBe('NO no')
541
541
  })
542
542
  })
543
+
544
+ describe('Programmatic value control', () => {
545
+ test('updates listbox selected state when value is set externally (single)', async () => {
546
+ const container = await createCombobox('id="test" name="test" label="Test" value="apple"')
547
+ const combobox = container.querySelector('pkt-combobox') as PktCombobox
548
+ combobox.options = getDefaultOptions()
549
+ await combobox.updateComplete
550
+
551
+ combobox.value = 'banana'
552
+ await combobox.updateComplete
553
+
554
+ const options = combobox['_options']
555
+ expect(options.find((o) => o.value === 'banana')?.selected).toBe(true)
556
+ expect(options.find((o) => o.value === 'apple')?.selected).toBe(false)
557
+
558
+ await openAndWaitForListbox(combobox)
559
+ const selected = combobox.querySelectorAll('[role="option"][aria-selected="true"]')
560
+ expect(selected).toHaveLength(1)
561
+ expect(selected[0].textContent).toContain('Banana')
562
+ })
563
+
564
+ test('updates listbox selected state when value is set externally (multiple)', async () => {
565
+ const container = await createCombobox(
566
+ 'id="test" name="test" label="Test" multiple value="apple,banana"',
567
+ )
568
+ const combobox = container.querySelector('pkt-combobox') as PktCombobox
569
+ combobox.options = getDefaultOptions()
570
+ await combobox.updateComplete
571
+
572
+ combobox.value = 'cherry,date'
573
+ await combobox.updateComplete
574
+
575
+ const selectedValues = combobox['_options'].filter((o) => o.selected).map((o) => o.value)
576
+ expect(selectedValues).toEqual(['cherry', 'date'])
577
+ })
578
+
579
+ test('clears listbox selected state when value is cleared externally', async () => {
580
+ const container = await createCombobox(
581
+ 'id="test" name="test" label="Test" multiple value="apple,banana"',
582
+ )
583
+ const combobox = container.querySelector('pkt-combobox') as PktCombobox
584
+ combobox.options = getDefaultOptions()
585
+ await combobox.updateComplete
586
+
587
+ combobox.value = ''
588
+ await combobox.updateComplete
589
+
590
+ expect(combobox['_value']).toEqual([])
591
+ expect(combobox['_options'].some((o) => o.selected)).toBe(false)
592
+ })
593
+ })
543
594
  })
@@ -154,6 +154,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
154
154
  const newInternal = this.parseValue()
155
155
  if (newInternal.join(',') !== this._value.join(',')) {
156
156
  this._value = newInternal
157
+ this.options.forEach((o) => (o.selected = newInternal.includes(o.value)))
158
+ this._options.forEach((o) => (o.selected = newInternal.includes(o.value)))
159
+ this._options = [...this._options]
157
160
  }
158
161
  this.updateMaxReached()
159
162
  this.syncValueAndDispatch(oldInternal)
@@ -199,18 +199,88 @@ describe('pkt-select', () => {
199
199
  test('handles useWrapper false', async () => {
200
200
  const { select } = await createSelectTest()
201
201
 
202
- // Set useWrapper property directly on the element
203
202
  select.useWrapper = false
204
203
  await select.updateComplete
205
204
 
206
- // When useWrapper is false, verify the behavior
207
205
  expect(select.useWrapper).toBe(false)
208
206
 
209
- // Confirm that there's a label with class pkt-sr-only in the markup
210
207
  const srOnlyLabel = select.querySelector('label.pkt-sr-only')
211
208
  expect(srOnlyLabel).toBeInTheDocument()
212
209
  })
213
210
 
211
+ test('does not duplicate slotted options when moved in the DOM (issue #3544)', async () => {
212
+ const zoneA = document.createElement('div')
213
+ const zoneB = document.createElement('div')
214
+ document.body.append(zoneA, zoneB)
215
+
216
+ zoneA.innerHTML = `
217
+ <pkt-select label="Kategori" id="reconnect-select">
218
+ <option value="">Velg…</option>
219
+ <option value="en">En</option>
220
+ <option value="to">To</option>
221
+ </pkt-select>
222
+ `
223
+ const select = zoneA.querySelector('pkt-select')!
224
+ await select.updateComplete
225
+ expect(select.querySelectorAll('select option')).toHaveLength(3)
226
+
227
+ zoneB.appendChild(select)
228
+ await select.updateComplete
229
+ expect(select.querySelectorAll('select option')).toHaveLength(3)
230
+
231
+ zoneA.appendChild(select)
232
+ await select.updateComplete
233
+ expect(select.querySelectorAll('select option')).toHaveLength(3)
234
+ })
235
+
236
+ test('updates rendered option when disabled is toggled on a slotted option', async () => {
237
+ const wrapper = document.createElement('div')
238
+ document.body.append(wrapper)
239
+ wrapper.innerHTML = `
240
+ <pkt-select label="Frukt" id="toggle-disabled-select">
241
+ <option value="">Velg…</option>
242
+ <option value="banan">Banan</option>
243
+ </pkt-select>
244
+ `
245
+ const select = wrapper.querySelector('pkt-select')!
246
+ await select.updateComplete
247
+
248
+ const slotted = select.querySelector(':scope > option[value="banan"]')!
249
+ const rendered = () => select.querySelector('select option[value="banan"]') as HTMLOptionElement
250
+
251
+ expect(rendered().disabled).toBe(false)
252
+
253
+ slotted.toggleAttribute('disabled')
254
+ await new Promise((resolve) => setTimeout(resolve, 0))
255
+ await select.updateComplete
256
+ expect(rendered().disabled).toBe(true)
257
+
258
+ slotted.toggleAttribute('disabled')
259
+ await new Promise((resolve) => setTimeout(resolve, 0))
260
+ await select.updateComplete
261
+ expect(rendered().disabled).toBe(false)
262
+ })
263
+
264
+ test('updates rendered option when the text of a slotted option changes', async () => {
265
+ const wrapper = document.createElement('div')
266
+ document.body.append(wrapper)
267
+ wrapper.innerHTML = `
268
+ <pkt-select label="Frukt" id="change-label-select">
269
+ <option value="banan">Banan</option>
270
+ </pkt-select>
271
+ `
272
+ const select = wrapper.querySelector('pkt-select')!
273
+ await select.updateComplete
274
+
275
+ const slotted = select.querySelector(':scope > option[value="banan"]')!
276
+ slotted.textContent = 'Gul banan'
277
+ await new Promise((resolve) => setTimeout(resolve, 0))
278
+ await select.updateComplete
279
+
280
+ const rendered = select.querySelector('select option[value="banan"]')
281
+ expect(rendered?.textContent?.trim()).toBe('Gul banan')
282
+ })
283
+
214
284
  test('meets accessibility standards', async () => {
215
285
  const options: TSelectOption[] = [
216
286
  { value: '1', label: 'Option 1' },
@@ -1 +0,0 @@
1
- const e=require("./element-with-slot-BY7Jc-q8.cjs");var t=class{constructor(e){this.nodes=[],this.options=[],this.generation=0,this.host=e,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&this.addNode(e)}),this.createOptions(),this.observer.observe(this.host,{childList:!0,subtree:!1,attributes:!0})}hostDisconnected(){this.observer.disconnect()}addNode(e){(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&(e.hasAttribute(`hidden`)&&!e.hasAttribute(`data-skip`)&&e.setAttribute(`data-hidden`,`true`),!e.hasAttribute(`hidden`)&&e.hasAttribute(`data-skip`)&&e.hasAttribute(`data-hidden`)&&e.removeAttribute(`data-hidden`),e.setAttribute(`class`,`pkt-hide`),e.setAttribute(`data-skip`,`true`),e.setAttribute(`hidden`,`true`),this.nodes.push(e))}createOptions(){this.options=this.nodes.map(e=>({value:e.hasAttribute(`value`)?e.getAttribute(`value`)??``:e.textContent??``,label:e.textContent||e.getAttribute(`value`)||``,selected:e.hasAttribute(`selected`),disabled:e.hasAttribute(`disabled`),hidden:e.hasAttribute(`data-hidden`)})),this.generation++,this.host.requestUpdate()}handleMutations(t){let n=!1;t.forEach(t=>{t.type===`childList`&&(t.addedNodes.forEach(t=>{e.r(t)&&(this.addNode(t),n=!0)}),t.removedNodes.forEach(t=>{e.r(t)&&(this.nodes=this.nodes.filter(e=>e!==t),n=!0)})),t.type===`attributes`&&e.r(t.target)&&(this.addNode(t.target),n=!0)}),n&&this.createOptions()}};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});