@oslokommune/punkt-elements 19.15.0 → 19.17.0
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 +28 -0
- package/dist/{accordion-BlsqYbJf.js → accordion-B0zAUNUV.js} +5 -5
- package/dist/{accordion-DukAa2ED.cjs → accordion-Cx-Gh3hc.cjs} +1 -1
- package/dist/{alert-CuXM6TnC.cjs → alert-BRZDpVMt.cjs} +1 -1
- package/dist/{alert-Xt26J9yX.js → alert-JnRrtTOW.js} +5 -5
- package/dist/{async-directive-yh8hG41Q.js → async-directive-C4LocQwR.js} +2 -2
- package/dist/{backlink-ogvv493Y.js → backlink-D8Rv46lA.js} +3 -3
- package/dist/{breadcrumbs-53QVnTFP.js → breadcrumbs-ybOBe_op.js} +2 -2
- package/dist/{button-BFG-7bDB.cjs → button-Ca_V13cQ.cjs} +1 -1
- package/dist/{button-DhCqyX4D.js → button-ChdHZYBF.js} +5 -5
- package/dist/{calendar-D9w8M99G.js → calendar-BQCjUQvP.js} +51 -70
- package/dist/calendar-CFTrX0C5.cjs +85 -0
- package/dist/{card-Diivw_vm.cjs → card-COseC8ZL.cjs} +1 -1
- package/dist/{card-DCc3wfUb.js → card-DSTEL8Kv.js} +6 -6
- package/dist/{checkbox-BDwOYcNM.js → checkbox-CKYNnLDh.js} +5 -9
- package/dist/{checkbox-BwI9QNSh.cjs → checkbox-DkFswqr-.cjs} +2 -2
- package/dist/{checkbox-group-C8mo9dkO.js → checkbox-group-1ghi5uHp.js} +3 -3
- package/dist/{checkbox-group-adbFTj8y.cjs → checkbox-group-lcxR3cYR.cjs} +1 -1
- package/dist/{class-map-Bf-QzUpN.js → class-map-BkEYw5uE.js} +1 -1
- package/dist/combobox-CaWnlvTX.cjs +139 -0
- package/dist/{combobox-B8IeuEF0.js → combobox-iXYiaWbN.js} +63 -96
- package/dist/components/index.d.ts +1 -0
- package/dist/components/input-wrapper/index.d.ts +1 -0
- package/dist/components/input-wrapper/input-wrapper.d.ts +13 -6
- package/dist/{consent-DBYZaCTp.cjs → consent-CxcKuGi9.cjs} +1 -1
- package/dist/{consent-BUS6GEUu.js → consent-D2nfauO8.js} +3 -3
- package/dist/converters-CW6SN0TT.cjs +1 -0
- package/dist/{converters-CkjLSYpa.js → converters-CYgQrWVm.js} +138 -141
- package/dist/{datepicker-CjUY_mLR.js → datepicker-DTcow1ih.js} +15 -25
- package/dist/{datepicker-CZYpIyJd.cjs → datepicker-Da8SfyVG.cjs} +3 -3
- package/dist/{dialog-polyfill.esm-B-g35ove.cjs → dialog-polyfill.esm-CW51hN2p.cjs} +1 -1
- package/dist/{dialog-polyfill.esm-DHSvqor8.js → dialog-polyfill.esm-D39dWbRt.js} +2 -2
- package/dist/{directive-helpers-CwxFepWh.js → directive-helpers-BAinC437.js} +1 -1
- package/dist/{element-DBugHPKM.js → element-ckeMVgMz.js} +1 -1
- package/dist/{element-with-slot-CVmm0_IE.js → element-with-slot-C0bH0T0H.js} +27 -38
- package/dist/element-with-slot-DkyaNnm0.cjs +1 -0
- package/dist/{fileupload-BKk03Dq-.js → fileupload-BNAQ9tNR.js} +16 -23
- package/dist/{fileupload-CnjtgTlF.cjs → fileupload-Cb1c7ul0.cjs} +3 -3
- package/dist/{footer-C6ajmlq2.cjs → footer-Box90zhr.cjs} +1 -1
- package/dist/{footer-L2vhQTAS.js → footer-D2RpIbsD.js} +4 -4
- package/dist/{header-BCrefip0.cjs → header-CvER8wo6.cjs} +2 -2
- package/dist/{header-20rqKJFb.js → header-Cwr995oK.js} +13 -13
- package/dist/{header-menu-F3tZZ5vO.js → header-menu-CsL4DZE2.js} +5 -5
- package/dist/{header-menu-Cz7G7Q2R.cjs → header-menu-D-wOwG1V.cjs} +1 -1
- package/dist/{heading-BluavR6A.cjs → heading-D4Kkb6-N.cjs} +1 -1
- package/dist/{heading-y72aIgB8.js → heading-DhTyaJms.js} +2 -2
- package/dist/{helptext-Dujce_W9.js → helptext-DN0jjgVu.js} +4 -4
- package/dist/{helptext-Bdv80rcs.cjs → helptext-p0nwJsyf.cjs} +1 -1
- package/dist/{icon-Bao96Zb8.js → icon-CLMJYuTL.js} +1 -1
- package/dist/{if-defined-O59_I-e-.js → if-defined-D18nY_K_.js} +1 -1
- package/dist/{input-element-mTphzs9b.js → input-element-0yYtRu0p.js} +3 -3
- package/dist/{input-element-BjnKPikY.cjs → input-element-BOi7rBbw.cjs} +1 -1
- package/dist/input-wrapper-4PTk8aX3.cjs +62 -0
- package/dist/{input-wrapper-Bb6CZxmg.js → input-wrapper-BSjQc4Vx.js} +30 -199
- package/dist/{link-sO401Ieh.js → link-39EvU2ng.js} +5 -5
- package/dist/{link-CRLAhYi0.cjs → link-Dj6SbcaD.cjs} +1 -1
- package/dist/{linkcard-DnZgMzqL.cjs → linkcard-BoQIfci8.cjs} +1 -1
- package/dist/{linkcard-DdmGxzAP.js → linkcard-K9vvKg1u.js} +4 -4
- package/dist/{listbox-CvduK_YU.cjs → listbox-BbdUu-IV.cjs} +3 -3
- package/dist/{listbox-BDesthOp.js → listbox-DFd-1faX.js} +15 -16
- package/dist/{loader-Zo_VSsNw.cjs → loader-BRYL5kTN.cjs} +1 -1
- package/dist/{loader-Di5kHEQ4.js → loader-MoI2VRFr.js} +4 -4
- package/dist/{messagebox-CR59jv8N.cjs → messagebox-CiOQUt0C.cjs} +1 -1
- package/dist/{messagebox-CzaFlrYz.js → messagebox-Dr-k3pnZ.js} +4 -4
- package/dist/{modal-wEEmCcUx.cjs → modal-DGiq84MG.cjs} +1 -1
- package/dist/{modal-0D0paY70.js → modal-DbzEnZNF.js} +8 -8
- package/dist/option-group-element-CH0sgVIl.cjs +23 -0
- package/dist/{option-group-element-D5PgGNdt.js → option-group-element-DC364Rw_.js} +3 -3
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +1 -2
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +1 -2
- package/dist/pkt-backlink.js +1 -2
- package/dist/pkt-breadcrumbs.js +1 -2
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -2
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +1 -2
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -2
- package/dist/pkt-checkbox-group.cjs +1 -1
- package/dist/pkt-checkbox-group.js +1 -2
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -2
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -2
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +1 -2
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-fileupload.cjs +1 -1
- package/dist/pkt-fileupload.js +1 -2
- package/dist/pkt-footer.cjs +1 -1
- package/dist/pkt-footer.js +1 -2
- package/dist/pkt-header-menu.cjs +1 -1
- package/dist/pkt-header-menu.js +1 -2
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -2
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +1 -2
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +1 -2
- package/dist/pkt-icon.js +1 -2
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +37 -37
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -2
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -2
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +1 -2
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +1 -2
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -2
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +1 -2
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -2
- package/dist/{pkt-options-controller-CHosj1Oo.js → pkt-options-controller-BikFfGcZ.js} +1 -1
- package/dist/{pkt-options-controller-139UsV4h.cjs → pkt-options-controller-D1sKTkbR.cjs} +1 -1
- package/dist/pkt-progressbar.js +1 -2
- package/dist/pkt-radio-group.cjs +1 -1
- package/dist/pkt-radio-group.js +1 -2
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -2
- package/dist/pkt-searchinput.js +1 -2
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -2
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +1 -2
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -2
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -2
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -2
- package/dist/pkt-timepicker.cjs +1 -1
- package/dist/pkt-timepicker.js +1 -2
- package/dist/{progressbar-DZHiq7B0.js → progressbar-t0zgEke0.js} +5 -5
- package/dist/{radio-group-CtZhXMF8.js → radio-group-DJikniZi.js} +3 -3
- package/dist/{radio-group-MxNLGu-0.cjs → radio-group-XCYKqoLD.cjs} +1 -1
- package/dist/{radiobutton-DwDErNo5.cjs → radiobutton-DgkML7sd.cjs} +1 -1
- package/dist/{radiobutton-BK-V6Itu.js → radiobutton-PYQKVnNQ.js} +4 -4
- package/dist/{ref-y_5qv9vU.js → ref-D4OwQYdf.js} +2 -2
- package/dist/{repeat-CV9S4zya.js → repeat-BGbBqnfz.js} +2 -2
- package/dist/{scroll-lock-BALd8hF9.js → scroll-lock-CR-g54ai.js} +1 -1
- package/dist/{scroll-lock-B46ur0FF.cjs → scroll-lock-x0VxhKWZ.cjs} +1 -1
- package/dist/{searchinput-Bkcr3Fby.js → searchinput-BzYifHBf.js} +4 -4
- package/dist/{select-Bs-Z5Thd.js → select-CorofYxz.js} +21 -21
- package/dist/{select-Czz1y2nI.cjs → select-D8TC1msV.cjs} +14 -14
- package/dist/shared-types/calendar.d.ts +0 -1
- package/dist/shared-types/icon.d.ts +2 -0
- package/dist/shared-types/index.d.ts +3 -1
- package/dist/shared-types/input-wrapper.d.ts +59 -0
- package/dist/shared-utils/calendar/calendar-grid.d.ts +0 -4
- package/dist/shared-utils/calendar/index.d.ts +1 -1
- package/dist/{tabs-R1Jzzj3-.cjs → tabs-B63J6MXb.cjs} +2 -2
- package/dist/{tabs-DBW3P90Z.js → tabs-DDakCTkY.js} +7 -15
- package/dist/{tag-BMtnaJ1A.cjs → tag-6IPe9bwQ.cjs} +1 -1
- package/dist/{tag-uVXp7uP-.js → tag-BPvGZcKf.js} +5 -5
- package/dist/{textarea-COHaMHpP.js → textarea-BZCUHjEj.js} +19 -19
- package/dist/{textarea-C-sdNBRk.cjs → textarea-BiCZBjOe.cjs} +10 -10
- package/dist/{textinput-BqBgsBZF.cjs → textinput-BZPGcxZV.cjs} +12 -12
- package/dist/{textinput-0DZeMqBr.js → textinput-D_oEaI41.js} +19 -19
- package/dist/{timepicker-C_k-K1jA.cjs → timepicker-C0d92R8u.cjs} +12 -12
- package/dist/{timepicker-CvdI7jDN.js → timepicker-JBOeZg-7.js} +24 -32
- package/package.json +2 -2
- package/src/components/calendar/calendar.constraints.test.ts +15 -0
- package/src/components/calendar/calendar.core.test.ts +15 -0
- package/src/components/calendar/calendar.ts +7 -15
- package/src/components/index.ts +1 -0
- package/src/components/input-wrapper/index.ts +1 -0
- package/src/components/input-wrapper/input-wrapper.test.ts +1 -0
- package/src/components/input-wrapper/input-wrapper.ts +38 -19
- package/src/components/input-wrapper/wrapper-parity.test.ts +4 -2
- package/dist/calendar-C5QwPrbk.cjs +0 -91
- package/dist/combobox-jsPpImVF.cjs +0 -139
- package/dist/converters-BJ9Fe0kW.cjs +0 -1
- package/dist/element-with-slot-CcJPCLgn.cjs +0 -1
- package/dist/input-wrapper-BwzajfFX.cjs +0 -63
- package/dist/option-group-element-CzehfgVZ.cjs +0 -23
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./consume-kEjgTrAp.cjs"),r=require("./ref-CB7e9nMY.cjs"),i=require("./input-element-
|
|
1
|
+
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./consume-kEjgTrAp.cjs"),r=require("./ref-CB7e9nMY.cjs"),i=require("./input-element-BOi7rBbw.cjs");var a={defaultChecked:!1,indeterminate:!1,hasTile:!1,disabled:!1,hasError:!1,isSwitch:!1,hideLabel:!1,labelPosition:`right`,requiredTag:!1,optionalTag:!1},o=n.n(Symbol(`pkt-checkbox-group-context`)),s=class extends i.t{constructor(...e){super(...e),this.inputRef=r.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=a.defaultChecked,this.hasTile=a.hasTile,this.isSwitch=a.isSwitch,this.labelPosition=a.labelPosition,this.hideLabel=a.hideLabel,this.checked=null,this.indeterminate=a.indeterminate,this.type=`checkbox`,this.inputSize=void 0,this.tagText=null,this.optionalTag=a.optionalTag,this.requiredTag=a.requiredTag}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}willUpdate(e){super.willUpdate(e),e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked)}updated(e){e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let n=this.hasTile||!!this.groupContext?.hasTile,i=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":n,"pkt-input-check__input--tile-disabled":this.isDisabled&&n}),a=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError||!!this.groupContext?.hasError}),o=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.isDisabled,"pkt-input-check__input-label--left":this.labelPosition===`left`,"pkt-input-check__input-label--right":this.labelPosition===`right`,"pkt-sr-only":this.hideLabel}),s=`pkt-tag pkt-tag--small pkt-tag--thin-text`,c=this.pktStrings.get(`forms`),l=()=>e._`
|
|
2
2
|
${this.tagText?e._`<span class=${s+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
|
|
3
3
|
${this.optionalTag?e._`<span class=${s+` pkt-tag--blue-light`}
|
|
4
4
|
>${this.optionalText??c.optional}</span
|
|
@@ -37,4 +37,4 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
37
37
|
${this.labelPosition===`right`?f():e.h}
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
`}handleInput(e){e.stopImmediatePropagation()}handleClick(e){if(this.isDisabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.isDisabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.isDisabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;
|
|
40
|
+
`}handleInput(e){e.stopImmediatePropagation()}handleClick(e){if(this.isDisabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.isDisabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.isDisabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;t&&t.disabled?(e.preventDefault(),e.stopImmediatePropagation()):(e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(`:checked`),this.valueChecked(this.checked)))}};e.n([e.u({type:String,reflect:!0})],s.prototype,`value`,void 0),e.n([e.u({type:String})],s.prototype,`checkHelptext`,void 0),e.n([e.u({type:Boolean})],s.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],s.prototype,`hasTile`,void 0),e.n([e.u({type:Boolean})],s.prototype,`isSwitch`,void 0),e.n([e.u({type:String})],s.prototype,`labelPosition`,void 0),e.n([e.u({type:Boolean})],s.prototype,`hideLabel`,void 0),e.n([e.u({type:Boolean,reflect:!0})],s.prototype,`checked`,void 0),e.n([e.u({type:Boolean,reflect:!0})],s.prototype,`indeterminate`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`type`,void 0),e.n([e.u({type:String,attribute:`input-size`})],s.prototype,`inputSize`,void 0),e.n([e.u({type:String})],s.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],s.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],s.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],s.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],s.prototype,`requiredText`,void 0),e.n([n.t({context:o,subscribe:!0}),e.l()],s.prototype,`groupContext`,void 0);try{e.d(`pkt-checkbox`)(s)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, men den er allerede definert`)}var c=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { d as e, l as t, n, u as r } from "./element-
|
|
2
|
-
import { r as i } from "./checkbox-
|
|
3
|
-
import { i as a, n as o, r as s, t as c } from "./option-group-element-
|
|
1
|
+
import { d as e, l as t, n, u as r } from "./element-ckeMVgMz.js";
|
|
2
|
+
import { r as i } from "./checkbox-CKYNnLDh.js";
|
|
3
|
+
import { i as a, n as o, r as s, t as c } from "./option-group-element-DC364Rw_.js";
|
|
4
4
|
import { t as l } from "./provide-_MnlMGnw.js";
|
|
5
5
|
//#region src/components/checkbox-group/checkbox-group.ts
|
|
6
6
|
var u = class extends c {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("./element-C6WTyJFE.cjs"),t=require("./checkbox-
|
|
1
|
+
const e=require("./element-C6WTyJFE.cjs"),t=require("./checkbox-DkFswqr-.cjs"),n=require("./option-group-element-CH0sgVIl.cjs"),r=require("./provide-Cz18sYug.cjs");var i=class extends n.t{constructor(...e){super(...e),this.optionSelector=`pkt-checkbox`,this.groupContext={name:``,hasTile:!1,hasError:!1},this.storedValue=null,this.validityApplied=!1}get value(){return this.options().filter(e=>n.n(e)&&!n.r(e)).map(n.i)}set value(e){let t=this.value;this.storedValue=Array.isArray(e)?e:e?e.split(`,`):[],this.applyStoredValue(this.options()),this.requestUpdate(`value`,t)}get hasStoredValue(){return this.storedValue!==null}storeCurrentValue(){this.storedValue=this.value}applyStoredValue(e){e.forEach(e=>{let t=!!this.storedValue?.includes(n.i(e));n.n(e)!==t&&(e.checked=t)})}syncValidity(){if(!this.required&&!this.validityApplied)return;this.validityApplied=this.required;let e=this.options(),t=this.required&&!e.some(e=>n.n(e)&&!n.r(e))?this.pktStrings.get(`validation`).checkboxGroupValueMissing:``;e.forEach(e=>e.setGroupValidity?.(t))}};e.n([r.t({context:t.r}),e.l()],i.prototype,`groupContext`,void 0),e.n([e.u({type:String})],i.prototype,`value`,null);try{e.d(`pkt-checkbox-group`)(i)}catch{console.warn(`Forsøker å definere <pkt-checkbox-group>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-DkyaNnm0.cjs");require("./icon-jPhyZD1z.cjs");const i=require("./input-wrapper-4PTk8aX3.cjs"),a=require("./if-defined-CiML3MTM.cjs"),o=require("./ref-CB7e9nMY.cjs");require("./tag-6IPe9bwQ.cjs");const s=require("./repeat-CnnigVcj.cjs"),c=require("./listbox-BbdUu-IV.cjs"),l=require("./input-element-BOi7rBbw.cjs"),u=require("./pkt-options-controller-D1sKTkbR.cjs");var d={multiple:!1,typeahead:!1,includeSearch:!1,allowUserInput:!1,displayValueAs:`label`,inputSize:`medium`,disabled:!1,hasError:!1,required:!1,requiredTag:!1,optionalTag:!1,fullwidth:!1,inline:!1,useWrapper:!0},f=(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}},p=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=c.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}},m=(e,t,n,r,i)=>e.trim().toLowerCase()?{...c.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},h=(e,t,n)=>{let r=c.i(t,e);return n===`label`&&r?.label?r.label:e},g={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)}},_={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=c.r(n),t.push(n)}),t}},v={cloneOptions(e){return Array.isArray(e)?e.map(e=>({...e})):[]},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=c.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t,n){return[...t.filter(e=>e?.userAdded&&n.includes(e.value)).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},y=class extends l.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=d.allowUserInput,this.typeahead=d.typeahead,this.includeSearch=d.includeSearch,this.searchPlaceholder=null,this.multiple=d.multiple,this.maxlength=null,this.displayValueAs=d.displayValueAs,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._messageValue=null,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._skipInputTab=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=o.t(),this.triggerRef=o.t(),this.listboxRef=o.t(),this._pendingDispatchFrom=null,this.optionsController=new u.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()}focusAfterCommit(){this._skipInputTab=!0;let e=this.inputRef.value;e&&e.type!==`hidden`&&e.setAttribute(`tabindex`,`-1`),this.triggerRef.value?.focus()}restoreInputTab(){this._skipInputTab=!1}parseValue(){return this.parseToValues(this.value)}parseToValues(e){return Array.isArray(e)?this.multiple?e:e.length>0?[e[0]]:[]:e&&this.multiple?e.split(`,`):e?[e]:[]}updateMaxReached(){this._maxIsReached=c.l(this._value.length,this.maxlength)}syncPublicValue(){let e=this.multiple?this._value.join(`,`):this._value[0]||``;e!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this.value=e)}dispatchValueChange(e){let t=this._value;if(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.u({type:String,reflect:!0})],y.prototype,`value`,void 0),e.n([e.u({type:Array})],y.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],y.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],y.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],y.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],y.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],y.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],y.prototype,`multiple`,void 0),e.n([e.u({type:Number})],y.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],y.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],y.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],y.prototype,`isOpen`,void 0),e.n([e.l()],y.prototype,`_options`,void 0),e.n([e.l()],y.prototype,`_value`,void 0),e.n([e.l()],y.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],y.prototype,`_userInfoMessage`,void 0),e.n([e.l()],y.prototype,`_messageValue`,void 0),e.n([e.l()],y.prototype,`_addValueText`,void 0),e.n([e.l()],y.prototype,`_maxIsReached`,void 0),e.n([e.l()],y.prototype,`_search`,void 0),e.n([e.l()],y.prototype,`_inputFocus`,void 0),e.n([e.l()],y.prototype,`_skipInputTab`,void 0);var b=class extends y{toggleValue(e){if(this.isDisabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=c.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(),o=!this.multiple,s=this.multiple,l=c.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=null,m=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=s):!r&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,o&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&o?(this.removeAllSelected(),u=!0):o?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1,f=`valueSelected`,p=this._hasTextInput?h(t||``,this.options,this.displayValueAs):c.s(c.i(this.options,t),this.displayValueAs)):s&&!l?(this.setSelected(t),u=!0):s&&l?(f=`maxSelected`,d=!1,m=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,m=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=m||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=p,s&&this.updateMaxReached())}setSelected(e){this._value.includes(e)||(this.multiple&&c.l(this._value.length,this.maxlength)?this._userInfoMessage=`maxSelected`:(!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,g.markOptionSelected(this._options,e),this.resetComboboxInput(!0)))}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=c.i(this.options,e);t&&(g.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.refreshOptionsFromValue():this._options=[...this._options,t])}addAllOptions(){this.multiple&&(this.maxlength&&this._options.length>this.maxlength?this._userInfoMessage=`tooManySelected`:(this._value=this._options.map(e=>e.value),g.markAllSelected(this._options),this.requestUpdate()))}removeAllSelected(){this._value=[],g.markAllDeselected(this._options),this._options=g.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;this._search=e,e&&this._value.includes(e)?(this.resetComboboxInput(!0),this._userInfoMessage=`alreadySelected`):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(!c.i(this.options,e)){if(c.l(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,window.setTimeout(()=>{this.focusAfterCommit()},0)),this.requestUpdate()}refreshOptionsFromValue(){let e=v.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=v.syncOptionsWithValues(e,this._value).options}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]?h(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this.refreshOptionsFromValue()}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},x=class extends b{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.isDisabled)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}=c.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.refreshOptionsFromValue()}}handleFocus(){this.isDisabled||(this._skipInputTab=!1,this._suppressNextOpen?(this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate()):(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=h(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this.refreshOptionsFromValue(),this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()))}handleCloseOptions(){this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),this.focusTrigger()}handleFocusOut(e){if(this.isDisabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.classList?.contains(`pkt-combobox__value`)||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=c.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}=p(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)}}!this.multiple&&this._value[0]?this.inputRef.value.value=h(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){this.isDisabled?(e.preventDefault(),e.stopImmediatePropagation()):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.isDisabled||(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.isDisabled)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]))}}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=f(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();else switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1}}}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()}}checkForMatches(){let e=m(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput?this.resetComboboxInput(!1):(this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage)}},S=class extends x{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=v.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=_.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=_.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}if(super.willUpdate(e),e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen),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=v.cloneOptions(this.options)}let t=e.has(`value`),n=e.has(`_value`);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=[...this._options]),this._pendingDispatchFrom??=e}else n&&(this._pendingDispatchFrom??=e.get(`_value`)??[]);if(e.has(`defaultValue`)&&this.defaultValue!=null&&!this._value.length){let e=this.parseToValues(this.defaultValue);e.length&&(this._pendingDispatchFrom??=[...this._value],this._value=e,this._options.forEach(t=>t.selected=e.includes(t.value)),this._options=[...this._options])}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=v.mergeWithUserAdded(v.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=v.syncOptionsWithValues(this._options,this._value);this._options=r.options,r.newValues.length>this._value.length&&(this._pendingDispatchFrom??=[...this._value],this._value=r.newValues)}(t||n||e.has(`options`)||e.has(`defaultValue`))&&this.updateMaxReached(),this._pendingDispatchFrom&&this.syncPublicValue()}updated(e){if(this._pendingDispatchFrom){let e=this._pendingDispatchFrom;this._pendingDispatchFrom=null,this.dispatchValueChange(e)}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?h(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),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.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=v.cloneOptions(this.options);let e=v.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._`
|
|
2
|
+
<pkt-input-wrapper
|
|
3
|
+
${r.n(this,[`helptext`])}
|
|
4
|
+
.strings=${this.strings}
|
|
5
|
+
.size=${this.inputSize}
|
|
6
|
+
.label=${this.label}
|
|
7
|
+
.helptext=${this.helptext}
|
|
8
|
+
.helptextDropdown=${a.t(this.helptextDropdown)}
|
|
9
|
+
.helptextDropdownButton=${a.t(this.helptextDropdownButton)}
|
|
10
|
+
?fullwidth=${this.fullwidth}
|
|
11
|
+
?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
|
|
12
|
+
.counterCurrent=${this._value.length}
|
|
13
|
+
.counterMaxLength=${this.maxlength??0}
|
|
14
|
+
?hasError=${this.hasError}
|
|
15
|
+
?inline=${this.inline}
|
|
16
|
+
?disabled=${this.isDisabled}
|
|
17
|
+
.errorMessage=${this.errorMessage}
|
|
18
|
+
?optionalTag=${this.optionalTag}
|
|
19
|
+
.optionalText=${this.optionalText}
|
|
20
|
+
?requiredTag=${this.requiredTag}
|
|
21
|
+
.requiredText=${this.requiredText}
|
|
22
|
+
.tagText=${this.tagText}
|
|
23
|
+
useWrapper=${this.useWrapper}
|
|
24
|
+
.forId=${this._hasTextInput?this.id+`-input`:this.id+`-combobox`}
|
|
25
|
+
?hasFieldset=${this.effectiveHasFieldset(!this._hasTextInput)}
|
|
26
|
+
class="pkt-combobox__wrapper"
|
|
27
|
+
@labelClick=${this.handleInputClick}
|
|
28
|
+
>
|
|
29
|
+
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
30
|
+
<div
|
|
31
|
+
class=${t.t({"pkt-combobox__input":!0,[`pkt-combobox__input--${this.inputSize}`]:!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.isDisabled})}
|
|
32
|
+
id=${a.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
|
+
role=${a.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
|
+
aria-expanded=${a.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
35
|
+
aria-controls=${a.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
|
|
36
|
+
aria-haspopup=${a.t(this._hasTextInput?void 0:`listbox`)}
|
|
37
|
+
aria-describedby=${a.t(this._hasTextInput?void 0:this._describedBy())}
|
|
38
|
+
aria-labelledby=${a.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
39
|
+
aria-activedescendant=${a.t(!this._hasTextInput&&this._isOptionsOpen&&this._value[0]&&c.i(this.options,this._value[0])?`${this.id}-listbox-${c.a(this._options,this._value[0])}`:void 0)}
|
|
40
|
+
aria-description=${a.t(this._selectionDescription||void 0)}
|
|
41
|
+
tabindex=${this._hasTextInput||this.isDisabled?`-1`:`0`}
|
|
42
|
+
@click=${this.handleInputClick}
|
|
43
|
+
@keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
|
|
44
|
+
@blur=${this.restoreInputTab}
|
|
45
|
+
${o.n(this.triggerRef)}
|
|
46
|
+
>
|
|
47
|
+
${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e._`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
48
|
+
>${this.placeholder}</span
|
|
49
|
+
>`:this.tagPlacement===`outside`?e.h:this.renderSingleOrMultipleValues()}
|
|
50
|
+
${this.renderInputField()}
|
|
51
|
+
<pkt-icon
|
|
52
|
+
class=${t.t({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
53
|
+
name="chevron-thin-down"
|
|
54
|
+
aria-hidden="true"
|
|
55
|
+
></pkt-icon>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<pkt-listbox
|
|
59
|
+
id="${this.id}-listbox"
|
|
60
|
+
.options=${this._options}
|
|
61
|
+
.isOpen=${this._isOptionsOpen}
|
|
62
|
+
.searchPlaceholder=${this.searchPlaceholder}
|
|
63
|
+
.label="Liste: ${this.label||``}"
|
|
64
|
+
?disabled=${this.isDisabled}
|
|
65
|
+
?include-search=${this.includeSearch}
|
|
66
|
+
?is-multi-select=${this.multiple}
|
|
67
|
+
?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
|
|
68
|
+
?max-is-reached=${this._maxIsReached}
|
|
69
|
+
.customUserInput=${a.t(this._addValueText)}
|
|
70
|
+
.userMessage=${this._userInfoMessage?n.t(this.pktStrings.get(`combobox`)[this._userInfoMessage],{value:this._messageValue??``}):``}
|
|
71
|
+
@search=${this.handleSearch}
|
|
72
|
+
@option-toggle=${this.handleOptionToggled}
|
|
73
|
+
@select-all=${this.addAllOptions}
|
|
74
|
+
@close-options=${this.handleCloseOptions}
|
|
75
|
+
@tab-close=${()=>this.closeAndProcessInput()}
|
|
76
|
+
.searchValue=${this._search||null}
|
|
77
|
+
.maxLength=${this.maxlength||0}
|
|
78
|
+
${o.n(this.listboxRef)}
|
|
79
|
+
></pkt-listbox>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
${this.tagPlacement===`outside`&&this.multiple?e._`<div class="pkt-combobox__tags-outside">
|
|
83
|
+
${this.renderSingleOrMultipleValues()}
|
|
84
|
+
</div>`:e.h}
|
|
85
|
+
</pkt-input-wrapper>
|
|
86
|
+
`}_describedBy(){return i.r({id:this._hasTextInput?`${this.id}-input`:`${this.id}-combobox`,hasHelptext:!!this.helptext||this.hasSlotContent(`helptext`),ariaDescribedby:this.ariaDescribedby})}renderInputField(){return this.typeahead||this.allowUserInput?e._`
|
|
87
|
+
<div class="pkt-combobox__input-div combobox__input">
|
|
88
|
+
<input
|
|
89
|
+
type="text"
|
|
90
|
+
id="${this.id}-input"
|
|
91
|
+
name=${(this.name||this.id)+`-input`}
|
|
92
|
+
placeholder=${a.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
|
|
93
|
+
@input=${this.handleInput}
|
|
94
|
+
@change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
|
|
95
|
+
tabindex=${a.t(this._skipInputTab?`-1`:void 0)}
|
|
96
|
+
@keydown=${this.handleInputKeydown}
|
|
97
|
+
@focus=${this.handleFocus}
|
|
98
|
+
@blur=${this.handleBlur}
|
|
99
|
+
autocomplete="off"
|
|
100
|
+
role="combobox"
|
|
101
|
+
aria-expanded=${this._isOptionsOpen?`true`:`false`}
|
|
102
|
+
aria-label=${a.t(this.label)}
|
|
103
|
+
aria-describedby=${a.t(this._describedBy())}
|
|
104
|
+
aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
|
|
105
|
+
aria-controls="${this.id}-listbox"
|
|
106
|
+
aria-activedescendant=${a.t(this._isOptionsOpen&&this._value[0]&&c.i(this.options,this._value[0])?`${this.id}-listbox-${c.a(this._options,this._value[0])}`:void 0)}
|
|
107
|
+
aria-description=${a.t(this._selectionDescription||void 0)}
|
|
108
|
+
${o.n(this.inputRef)}
|
|
109
|
+
/>
|
|
110
|
+
</div>
|
|
111
|
+
`:e._`
|
|
112
|
+
<input
|
|
113
|
+
type="hidden"
|
|
114
|
+
id="${this.id}-input"
|
|
115
|
+
name=${(this.name||this.id)+`-input`}
|
|
116
|
+
.value=${this._value.join(`,`)}
|
|
117
|
+
${o.n(this.inputRef)}
|
|
118
|
+
/>
|
|
119
|
+
`}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.h;let t=!this.multiple,n=this.renderValueTag(c.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e._`
|
|
120
|
+
<ul role="list" class="pkt-combobox__tag-list">
|
|
121
|
+
${s.t(this._value,e=>e,(t,n)=>{let i=c.i(this.options,t),a=i?.tagSkinColor;return e._`
|
|
122
|
+
<li
|
|
123
|
+
role="listitem"
|
|
124
|
+
@click=${r?e.h:e=>e.stopPropagation()}
|
|
125
|
+
@mousedown=${r?e.h:e=>e.preventDefault()}
|
|
126
|
+
>
|
|
127
|
+
<pkt-tag
|
|
128
|
+
skin=${a||`blue`}
|
|
129
|
+
?closeTag=${!this.isDisabled}
|
|
130
|
+
.buttonTabindex=${r?void 0:-1}
|
|
131
|
+
@close=${()=>this.handleTagRemove(t)}
|
|
132
|
+
@keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
|
|
133
|
+
>
|
|
134
|
+
${this.renderValueTag(i)}
|
|
135
|
+
</pkt-tag>
|
|
136
|
+
</li>
|
|
137
|
+
`})}
|
|
138
|
+
</ul>
|
|
139
|
+
`;return!t&&this._value.length===0?e.h:t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e._`<span class="pkt-combobox__value">${t.prefix||``} ${t.value}</span>`;case`value`:return e._`<span class="pkt-combobox__value">${t.value}</span>`;default:return e._`<span class="pkt-combobox__value">${t.label||t.value}</span>`}}};try{e.d(`pkt-combobox`)(S)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var C=S;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-
|
|
2
|
-
import { t as o } from "./class-map-
|
|
1
|
+
import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-ckeMVgMz.js";
|
|
2
|
+
import { t as o } from "./class-map-BkEYw5uE.js";
|
|
3
3
|
import { t as s } from "./format-BTeSVkED.js";
|
|
4
|
-
import { n as c } from "./element-with-slot-
|
|
5
|
-
import "./icon-
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import "./
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { t as x } from "./
|
|
13
|
-
import {
|
|
4
|
+
import { n as c } from "./element-with-slot-C0bH0T0H.js";
|
|
5
|
+
import "./icon-CLMJYuTL.js";
|
|
6
|
+
import { r as l } from "./input-wrapper-BSjQc4Vx.js";
|
|
7
|
+
import { t as u } from "./if-defined-D18nY_K_.js";
|
|
8
|
+
import { n as d, t as f } from "./ref-D4OwQYdf.js";
|
|
9
|
+
import "./tag-BPvGZcKf.js";
|
|
10
|
+
import { t as p } from "./repeat-BGbBqnfz.js";
|
|
11
|
+
import { a as m, c as h, i as g, l as _, o as v, r as y, s as b } from "./listbox-DFd-1faX.js";
|
|
12
|
+
import { t as x } from "./input-element-0yYtRu0p.js";
|
|
13
|
+
import { t as S } from "./pkt-options-controller-BikFfGcZ.js";
|
|
14
14
|
//#region ../../shared-types/combobox.ts
|
|
15
15
|
var C = {
|
|
16
16
|
multiple: !1,
|
|
@@ -41,7 +41,7 @@ var C = {
|
|
|
41
41
|
action: "none",
|
|
42
42
|
value: null
|
|
43
43
|
};
|
|
44
|
-
let a =
|
|
44
|
+
let a = g(n, e);
|
|
45
45
|
return !t.includes(e) && !a ? r ? {
|
|
46
46
|
action: "addUserValue",
|
|
47
47
|
value: e
|
|
@@ -59,7 +59,7 @@ var C = {
|
|
|
59
59
|
value: null
|
|
60
60
|
};
|
|
61
61
|
}, E = (e, t, n, r, i) => e.trim().toLowerCase() ? {
|
|
62
|
-
...
|
|
62
|
+
...h(e, t, n, r),
|
|
63
63
|
shouldRemoveValue: !1,
|
|
64
64
|
shouldResetInput: !1
|
|
65
65
|
} : {
|
|
@@ -68,7 +68,7 @@ var C = {
|
|
|
68
68
|
shouldRemoveValue: !i && !!t[0],
|
|
69
69
|
shouldResetInput: !0
|
|
70
70
|
}, D = (e, t, n) => {
|
|
71
|
-
let r =
|
|
71
|
+
let r = g(t, e);
|
|
72
72
|
return n === "label" && r?.label ? r.label : e;
|
|
73
73
|
}, O = {
|
|
74
74
|
markOptionSelected(e, t) {
|
|
@@ -104,7 +104,7 @@ var C = {
|
|
|
104
104
|
value: e.getAttribute("value") || e.textContent || "",
|
|
105
105
|
label: e.textContent || e.getAttribute("value") || ""
|
|
106
106
|
};
|
|
107
|
-
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 =
|
|
107
|
+
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 = y(n), t.push(n);
|
|
108
108
|
}), t;
|
|
109
109
|
} }, A = {
|
|
110
110
|
cloneOptions(e) {
|
|
@@ -113,7 +113,7 @@ var C = {
|
|
|
113
113
|
syncOptionsWithValues(e, t) {
|
|
114
114
|
let n = [...t];
|
|
115
115
|
return e.forEach((e) => {
|
|
116
|
-
e.value && !e.label && (e.label = e.value), e.selected && !n.includes(e.value) && n.push(e.value), e.fulltext =
|
|
116
|
+
e.value && !e.label && (e.label = e.value), e.selected && !n.includes(e.value) && n.push(e.value), e.fulltext = y(e), e.selected = e.selected || n.includes(e.value);
|
|
117
117
|
}), {
|
|
118
118
|
options: e,
|
|
119
119
|
newValues: n
|
|
@@ -122,15 +122,15 @@ var C = {
|
|
|
122
122
|
mergeWithUserAdded(e, t, n) {
|
|
123
123
|
return [...t.filter((e) => e?.userAdded && n.includes(e.value)).filter((t) => !(Array.isArray(e) ? e : []).some((e) => e.value === t.value)), ...e];
|
|
124
124
|
}
|
|
125
|
-
}, j = class extends
|
|
125
|
+
}, j = class extends x {
|
|
126
126
|
constructor() {
|
|
127
|
-
super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = C.allowUserInput, this.typeahead = C.typeahead, this.includeSearch = C.includeSearch, this.searchPlaceholder = null, this.multiple = C.multiple, this.maxlength = null, this.displayValueAs = C.displayValueAs, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._messageValue = null, this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._skipInputTab = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef =
|
|
127
|
+
super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = C.allowUserInput, this.typeahead = C.typeahead, this.includeSearch = C.includeSearch, this.searchPlaceholder = null, this.multiple = C.multiple, this.maxlength = null, this.displayValueAs = C.displayValueAs, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._messageValue = null, this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._skipInputTab = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = f(), this.triggerRef = f(), this.listboxRef = f(), this._pendingDispatchFrom = null, this.optionsController = new S(this);
|
|
128
128
|
}
|
|
129
129
|
get _hasTextInput() {
|
|
130
130
|
return this.typeahead || this.allowUserInput;
|
|
131
131
|
}
|
|
132
132
|
get _selectionDescription() {
|
|
133
|
-
if (
|
|
133
|
+
if (this.multiple && this._value.length !== 0) return `${this._value.length} valgt`;
|
|
134
134
|
}
|
|
135
135
|
focusTrigger() {
|
|
136
136
|
this._hasTextInput ? this.inputRef.value?.focus() : this.triggerRef.value?.focus();
|
|
@@ -150,7 +150,7 @@ var C = {
|
|
|
150
150
|
return Array.isArray(e) ? this.multiple ? e : e.length > 0 ? [e[0]] : [] : e && this.multiple ? e.split(",") : e ? [e] : [];
|
|
151
151
|
}
|
|
152
152
|
updateMaxReached() {
|
|
153
|
-
this._maxIsReached =
|
|
153
|
+
this._maxIsReached = _(this._value.length, this.maxlength);
|
|
154
154
|
}
|
|
155
155
|
syncPublicValue() {
|
|
156
156
|
let e = this.multiple ? this._value.join(",") : this._value[0] || "";
|
|
@@ -199,45 +199,29 @@ var M = class extends j {
|
|
|
199
199
|
toggleValue(e) {
|
|
200
200
|
if (this.isDisabled) return;
|
|
201
201
|
this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
|
|
202
|
-
let t =
|
|
203
|
-
i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : n ? (this.removeValue(t), l = !0, o && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : a && o ? (this.removeAllSelected(), l = !0) : o ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), l = !1, d = "valueSelected", f = this._hasTextInput ? D(t || "", this.options, this.displayValueAs) :
|
|
202
|
+
let t = g(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(), o = !this.multiple, s = this.multiple, c = _(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = null, p = "";
|
|
203
|
+
i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : n ? (this.removeValue(t), l = !0, o && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : a && o ? (this.removeAllSelected(), l = !0) : o ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), l = !1, d = "valueSelected", f = this._hasTextInput ? D(t || "", this.options, this.displayValueAs) : b(g(this.options, t), this.displayValueAs)) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "maxSelected", u = !1, p = e) : (o && this.removeAllSelected(), d = "noValidValue", u = !1, l = !0, p = e), this._isOptionsOpen = l, l || window.setTimeout(() => {
|
|
204
204
|
this.focusAfterCommit();
|
|
205
205
|
}, 0), this._search = p || "", this.resetComboboxInput(u), this._userInfoMessage = d, this._messageValue = f, s && this.updateMaxReached());
|
|
206
206
|
}
|
|
207
207
|
setSelected(e) {
|
|
208
|
-
|
|
209
|
-
if (this.multiple && g(this._value.length, this.maxlength)) {
|
|
210
|
-
this._userInfoMessage = "maxSelected";
|
|
211
|
-
return;
|
|
212
|
-
}
|
|
213
|
-
!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, O.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
|
|
214
|
-
}
|
|
208
|
+
this._value.includes(e) || (this.multiple && _(this._value.length, this.maxlength) ? this._userInfoMessage = "maxSelected" : (!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, O.markOptionSelected(this._options, e), this.resetComboboxInput(!0)));
|
|
215
209
|
}
|
|
216
210
|
removeSelected(e) {
|
|
217
211
|
if (!e) return;
|
|
218
212
|
this._value = this._value.filter((t) => t !== e);
|
|
219
|
-
let t =
|
|
213
|
+
let t = g(this.options, e);
|
|
220
214
|
t && (O.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.refreshOptionsFromValue() : this._options = [...this._options, t]);
|
|
221
215
|
}
|
|
222
216
|
addAllOptions() {
|
|
223
|
-
|
|
224
|
-
if (this.maxlength && this._options.length > this.maxlength) {
|
|
225
|
-
this._userInfoMessage = "tooManySelected";
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
|
-
this._value = this._options.map((e) => e.value), O.markAllSelected(this._options), this.requestUpdate();
|
|
229
|
-
}
|
|
217
|
+
this.multiple && (this.maxlength && this._options.length > this.maxlength ? this._userInfoMessage = "tooManySelected" : (this._value = this._options.map((e) => e.value), O.markAllSelected(this._options), this.requestUpdate()));
|
|
230
218
|
}
|
|
231
219
|
removeAllSelected() {
|
|
232
220
|
this._value = [], O.markAllDeselected(this._options), this._options = O.removeUserAddedOptions(this._options), this.requestUpdate();
|
|
233
221
|
}
|
|
234
222
|
addValue() {
|
|
235
223
|
let e = this.inputRef.value?.value.trim() || "";
|
|
236
|
-
|
|
237
|
-
this.resetComboboxInput(!0), this._userInfoMessage = "alreadySelected";
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
|
-
this.toggleValue(e);
|
|
224
|
+
this._search = e, e && this._value.includes(e) ? (this.resetComboboxInput(!0), this._userInfoMessage = "alreadySelected") : this.toggleValue(e);
|
|
241
225
|
}
|
|
242
226
|
removeValue(e) {
|
|
243
227
|
this._value = this.multiple ? this._value.filter((t) => t !== e) : [], this.removeSelected(e);
|
|
@@ -245,8 +229,8 @@ var M = class extends j {
|
|
|
245
229
|
addNewUserValue(e) {
|
|
246
230
|
if (!e || e.trim() === "") return;
|
|
247
231
|
if (!this.multiple) this._value[0] && this.removeSelected(this._value[0]), this._value = [e];
|
|
248
|
-
else if (!
|
|
249
|
-
if (
|
|
232
|
+
else if (!g(this.options, e)) {
|
|
233
|
+
if (_(this._value.length, this.maxlength)) return;
|
|
250
234
|
this._value = [...this._value, e];
|
|
251
235
|
}
|
|
252
236
|
let t = {
|
|
@@ -279,19 +263,13 @@ var M = class extends j {
|
|
|
279
263
|
let t = e.target;
|
|
280
264
|
if (this._search = t.value, this.checkForMatches(), this.typeahead) {
|
|
281
265
|
if (this._search) {
|
|
282
|
-
let { filtered: n, suggestion: r } =
|
|
266
|
+
let { filtered: n, suggestion: r } = v(this.options, this._search);
|
|
283
267
|
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");
|
|
284
268
|
} else this.refreshOptionsFromValue();
|
|
285
269
|
}
|
|
286
270
|
}
|
|
287
271
|
handleFocus() {
|
|
288
|
-
|
|
289
|
-
if (this._skipInputTab = !1, this._suppressNextOpen) {
|
|
290
|
-
this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
|
|
291
|
-
return;
|
|
292
|
-
}
|
|
293
|
-
!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = D(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this.refreshOptionsFromValue(), this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
|
|
294
|
-
}
|
|
272
|
+
this.isDisabled || (this._skipInputTab = !1, this._suppressNextOpen ? (this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate()) : (!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = D(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this.refreshOptionsFromValue(), this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate()));
|
|
295
273
|
}
|
|
296
274
|
handleCloseOptions() {
|
|
297
275
|
this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), this.focusTrigger();
|
|
@@ -307,7 +285,7 @@ var M = class extends j {
|
|
|
307
285
|
if (!this.multiple) {
|
|
308
286
|
if (!e) this._value[0] && this.removeSelected(this._value[0]);
|
|
309
287
|
else {
|
|
310
|
-
let t =
|
|
288
|
+
let t = g(this.options, e);
|
|
311
289
|
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));
|
|
312
290
|
}
|
|
313
291
|
} else if (e !== "") {
|
|
@@ -330,11 +308,7 @@ var M = class extends j {
|
|
|
330
308
|
this._inputFocus = !1, this.onBlur();
|
|
331
309
|
}
|
|
332
310
|
handleInputClick(e) {
|
|
333
|
-
|
|
334
|
-
e.preventDefault(), e.stopImmediatePropagation();
|
|
335
|
-
return;
|
|
336
|
-
}
|
|
337
|
-
this._hasTextInput ? (this.inputRef.value?.focus(), this.requestUpdate()) : (e.stopImmediatePropagation(), e.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen && this.listboxRef.value?.focusFirstOrSelectedOption());
|
|
311
|
+
this.isDisabled ? (e.preventDefault(), e.stopImmediatePropagation()) : this._hasTextInput ? (this.inputRef.value?.focus(), this.requestUpdate()) : (e.stopImmediatePropagation(), e.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen && this.listboxRef.value?.focusFirstOrSelectedOption());
|
|
338
312
|
}
|
|
339
313
|
handlePlaceholderClick(e) {
|
|
340
314
|
this.isDisabled || (e.stopPropagation(), this._hasTextInput && this.inputRef.value ? (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()) : (this._isOptionsOpen = !this._isOptionsOpen, this.requestUpdate()));
|
|
@@ -381,12 +355,9 @@ var M = class extends j {
|
|
|
381
355
|
}
|
|
382
356
|
}
|
|
383
357
|
let t = w(e.key, e.shiftKey, this.multiple);
|
|
384
|
-
if (t &&
|
|
385
|
-
if (t === "focusListbox" && e.key === "Tab" && !this.listboxRef.value?.querySelector("[role=\"option\"]:not([data-disabled]), [data-type=\"new-option\"]"))
|
|
386
|
-
|
|
387
|
-
return;
|
|
388
|
-
}
|
|
389
|
-
switch (e.preventDefault(), t) {
|
|
358
|
+
if (t && (e.key !== "Tab" || this._isOptionsOpen)) {
|
|
359
|
+
if (t === "focusListbox" && e.key === "Tab" && !this.listboxRef.value?.querySelector("[role=\"option\"]:not([data-disabled]), [data-type=\"new-option\"]")) this.closeAndProcessInput();
|
|
360
|
+
else switch (e.preventDefault(), t) {
|
|
390
361
|
case "addValue":
|
|
391
362
|
this.addValue();
|
|
392
363
|
break;
|
|
@@ -442,11 +413,7 @@ var M = class extends j {
|
|
|
442
413
|
}
|
|
443
414
|
checkForMatches() {
|
|
444
415
|
let e = E(this.inputRef.value?.value || this._search || "", this._value, this.options, this.allowUserInput, this.multiple);
|
|
445
|
-
|
|
446
|
-
this.resetComboboxInput(!1);
|
|
447
|
-
return;
|
|
448
|
-
}
|
|
449
|
-
this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage;
|
|
416
|
+
e.shouldRemoveValue && this.removeValue(this._value[0]), e.shouldResetInput ? this.resetComboboxInput(!1) : (this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage);
|
|
450
417
|
}
|
|
451
418
|
}, P = class extends N {
|
|
452
419
|
constructor(...e) {
|
|
@@ -541,8 +508,8 @@ var M = class extends j {
|
|
|
541
508
|
.size=${this.inputSize}
|
|
542
509
|
.label=${this.label}
|
|
543
510
|
.helptext=${this.helptext}
|
|
544
|
-
.helptextDropdown=${
|
|
545
|
-
.helptextDropdownButton=${
|
|
511
|
+
.helptextDropdown=${u(this.helptextDropdown)}
|
|
512
|
+
.helptextDropdownButton=${u(this.helptextDropdownButton)}
|
|
546
513
|
?fullwidth=${this.fullwidth}
|
|
547
514
|
?counter=${this.effectiveCounter(!!this.multiple && this.maxlength != null)}
|
|
548
515
|
.counterCurrent=${this._value.length}
|
|
@@ -572,20 +539,20 @@ var M = class extends j {
|
|
|
572
539
|
"pkt-combobox__input--error": this.hasError,
|
|
573
540
|
"pkt-combobox__input--disabled": this.isDisabled
|
|
574
541
|
})}
|
|
575
|
-
id=${
|
|
576
|
-
role=${
|
|
577
|
-
aria-expanded=${
|
|
578
|
-
aria-controls=${
|
|
579
|
-
aria-haspopup=${
|
|
580
|
-
aria-describedby=${
|
|
581
|
-
aria-labelledby=${
|
|
582
|
-
aria-activedescendant=${
|
|
583
|
-
aria-description=${
|
|
542
|
+
id=${u(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
|
|
543
|
+
role=${u(this._hasTextInput ? void 0 : "combobox")}
|
|
544
|
+
aria-expanded=${u(this._hasTextInput ? void 0 : this._isOptionsOpen ? "true" : "false")}
|
|
545
|
+
aria-controls=${u(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
|
|
546
|
+
aria-haspopup=${u(this._hasTextInput ? void 0 : "listbox")}
|
|
547
|
+
aria-describedby=${u(this._hasTextInput ? void 0 : this._describedBy())}
|
|
548
|
+
aria-labelledby=${u(this._hasTextInput ? void 0 : `${this.id}-combobox-label`)}
|
|
549
|
+
aria-activedescendant=${u(!this._hasTextInput && this._isOptionsOpen && this._value[0] && g(this.options, this._value[0]) ? `${this.id}-listbox-${m(this._options, this._value[0])}` : void 0)}
|
|
550
|
+
aria-description=${u(this._selectionDescription || void 0)}
|
|
584
551
|
tabindex=${this._hasTextInput || this.isDisabled ? "-1" : "0"}
|
|
585
552
|
@click=${this.handleInputClick}
|
|
586
553
|
@keydown=${this._hasTextInput ? n : this.handleSelectOnlyKeydown}
|
|
587
554
|
@blur=${this.restoreInputTab}
|
|
588
|
-
${
|
|
555
|
+
${d(this.triggerRef)}
|
|
589
556
|
>
|
|
590
557
|
${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? e`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
591
558
|
>${this.placeholder}</span
|
|
@@ -612,7 +579,7 @@ var M = class extends j {
|
|
|
612
579
|
?is-multi-select=${this.multiple}
|
|
613
580
|
?allow-user-input=${this.allowUserInput && !this._maxIsReached}
|
|
614
581
|
?max-is-reached=${this._maxIsReached}
|
|
615
|
-
.customUserInput=${
|
|
582
|
+
.customUserInput=${u(this._addValueText)}
|
|
616
583
|
.userMessage=${this._userInfoMessage ? s(this.pktStrings.get("combobox")[this._userInfoMessage], { value: this._messageValue ?? "" }) : ""}
|
|
617
584
|
@search=${this.handleSearch}
|
|
618
585
|
@option-toggle=${this.handleOptionToggled}
|
|
@@ -621,7 +588,7 @@ var M = class extends j {
|
|
|
621
588
|
@tab-close=${() => this.closeAndProcessInput()}
|
|
622
589
|
.searchValue=${this._search || null}
|
|
623
590
|
.maxLength=${this.maxlength || 0}
|
|
624
|
-
${
|
|
591
|
+
${d(this.listboxRef)}
|
|
625
592
|
></pkt-listbox>
|
|
626
593
|
</div>
|
|
627
594
|
|
|
@@ -632,7 +599,7 @@ var M = class extends j {
|
|
|
632
599
|
`;
|
|
633
600
|
}
|
|
634
601
|
_describedBy() {
|
|
635
|
-
return
|
|
602
|
+
return l({
|
|
636
603
|
id: this._hasTextInput ? `${this.id}-input` : `${this.id}-combobox`,
|
|
637
604
|
hasHelptext: !!this.helptext || this.hasSlotContent("helptext"),
|
|
638
605
|
ariaDescribedby: this.ariaDescribedby
|
|
@@ -645,25 +612,25 @@ var M = class extends j {
|
|
|
645
612
|
type="text"
|
|
646
613
|
id="${this.id}-input"
|
|
647
614
|
name=${(this.name || this.id) + "-input"}
|
|
648
|
-
placeholder=${
|
|
615
|
+
placeholder=${u(!this._value.length || this.multiple && this.tagPlacement === "outside" ? this.placeholder : void 0)}
|
|
649
616
|
@input=${this.handleInput}
|
|
650
617
|
@change=${(e) => {
|
|
651
618
|
e.stopPropagation(), e.stopImmediatePropagation();
|
|
652
619
|
}}
|
|
653
|
-
tabindex=${
|
|
620
|
+
tabindex=${u(this._skipInputTab ? "-1" : void 0)}
|
|
654
621
|
@keydown=${this.handleInputKeydown}
|
|
655
622
|
@focus=${this.handleFocus}
|
|
656
623
|
@blur=${this.handleBlur}
|
|
657
624
|
autocomplete="off"
|
|
658
625
|
role="combobox"
|
|
659
626
|
aria-expanded=${this._isOptionsOpen ? "true" : "false"}
|
|
660
|
-
aria-label=${
|
|
661
|
-
aria-describedby=${
|
|
627
|
+
aria-label=${u(this.label)}
|
|
628
|
+
aria-describedby=${u(this._describedBy())}
|
|
662
629
|
aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
|
|
663
630
|
aria-controls="${this.id}-listbox"
|
|
664
|
-
aria-activedescendant=${
|
|
665
|
-
aria-description=${
|
|
666
|
-
${
|
|
631
|
+
aria-activedescendant=${u(this._isOptionsOpen && this._value[0] && g(this.options, this._value[0]) ? `${this.id}-listbox-${m(this._options, this._value[0])}` : void 0)}
|
|
632
|
+
aria-description=${u(this._selectionDescription || void 0)}
|
|
633
|
+
${d(this.inputRef)}
|
|
667
634
|
/>
|
|
668
635
|
</div>
|
|
669
636
|
` : e`
|
|
@@ -672,16 +639,16 @@ var M = class extends j {
|
|
|
672
639
|
id="${this.id}-input"
|
|
673
640
|
name=${(this.name || this.id) + "-input"}
|
|
674
641
|
.value=${this._value.join(",")}
|
|
675
|
-
${
|
|
642
|
+
${d(this.inputRef)}
|
|
676
643
|
/>
|
|
677
644
|
`;
|
|
678
645
|
}
|
|
679
646
|
renderSingleOrMultipleValues() {
|
|
680
647
|
if (!this.multiple && this._hasTextInput) return n;
|
|
681
|
-
let t = !this.multiple, r = this.renderValueTag(
|
|
648
|
+
let t = !this.multiple, r = this.renderValueTag(g(this.options, this._value[0])), i = this.tagPlacement === "outside", a = e`
|
|
682
649
|
<ul role="list" class="pkt-combobox__tag-list">
|
|
683
|
-
${
|
|
684
|
-
let a =
|
|
650
|
+
${p(this._value, (e) => e, (t, r) => {
|
|
651
|
+
let a = g(this.options, t), o = a?.tagSkinColor;
|
|
685
652
|
return e`
|
|
686
653
|
<li
|
|
687
654
|
role="listitem"
|
|
@@ -19,6 +19,7 @@ export { PktHelptext } from './helptext';
|
|
|
19
19
|
export { PktHeading } from './heading';
|
|
20
20
|
export { PktIcon } from './icon';
|
|
21
21
|
export { PktInputWrapper } from './input-wrapper';
|
|
22
|
+
export type { IPktInputWrapper } from './input-wrapper';
|
|
22
23
|
export { PktLink } from './link';
|
|
23
24
|
export { PktLinkCard } from './linkcard';
|
|
24
25
|
export { PktLoader } from './loader';
|