@oslokommune/punkt-elements 19.5.0 → 19.5.2
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 +16 -0
- package/dist/{accordion-CZ0O4c0_.cjs → accordion-5lSFQToJ.cjs} +6 -6
- package/dist/{accordion-DFcdonl-.js → accordion-BJh6X1Ek.js} +6 -6
- package/dist/{alert-CUOWdvit.js → alert-C0PiYnot.js} +28 -35
- package/dist/alert-IaZzEgyI.cjs +39 -0
- package/dist/{backlink-vLhK1hsj.cjs → backlink-BRqhwUr2.cjs} +1 -1
- package/dist/base-elements/checkable-native-parity.test.d.ts +0 -0
- package/dist/base-elements/form-disabled.test.d.ts +0 -0
- package/dist/base-elements/input-element.d.ts +10 -1
- package/dist/{button-B0uSFQVn.js → button-B78im4wB.js} +15 -15
- package/dist/button-BNVTj7nB.cjs +32 -0
- package/dist/{card-CfFW7_-K.js → card-CYKhPUNI.js} +11 -11
- package/dist/{card-C15acwk4.cjs → card-CaLEuumN.cjs} +10 -10
- package/dist/{checkbox-B2O0fkh9.js → checkbox-Bbxt-tVW.js} +8 -8
- package/dist/checkbox-_NnoYkue.cjs +40 -0
- package/dist/{combobox-DvsnfA0c.cjs → combobox-BBx87DCG.cjs} +27 -27
- package/dist/{combobox-Bhfh04Su.js → combobox-CjLX_Gfd.js} +41 -41
- package/dist/components/alert/alert.d.ts +0 -2
- package/dist/{consent-_DBvIRT2.js → consent-CleJMbVH.js} +1 -1
- package/dist/{consent-BfLkJbOk.cjs → consent-Dl-R0iC3.cjs} +1 -1
- package/dist/{datepicker-Cg-iueRC.cjs → datepicker-Bk-m5Zaa.cjs} +31 -31
- package/dist/{datepicker-BY2IKrPk.js → datepicker-CFCRxFQL.js} +13 -13
- package/dist/directives/slot-content.d.ts +36 -1
- package/dist/element-with-slot-D7sTqOr3.cjs +1 -0
- package/dist/{element-with-slot-FD826ooP.js → element-with-slot-DQv0cbbD.js} +80 -21
- package/dist/{fileupload-iuXrgrog.js → fileupload-B2606SvG.js} +31 -31
- package/dist/{fileupload-Djp6VJYY.cjs → fileupload-COAxc3sX.cjs} +21 -21
- package/dist/{footer-BCdb0wlF.js → footer-DdLls3F-.js} +13 -13
- package/dist/{footer-bTpLxigB.cjs → footer-vy9NqT65.cjs} +9 -9
- package/dist/{header-2fF-Zu5T.js → header-BQdc29IO.js} +55 -55
- package/dist/{header-DbSSOX-h.cjs → header-BhM7FRoC.cjs} +50 -50
- package/dist/{header-menu-DVYLZyez.js → header-menu-ANj5nL2M.js} +1 -1
- package/dist/{header-menu-ChDMnWhW.cjs → header-menu-BfkCp8jw.cjs} +1 -1
- package/dist/{heading-BRHCV_5J.js → heading-CUrZvkrM.js} +1 -1
- package/dist/{heading-u9Arof4p.cjs → heading-zoz-QZJ9.cjs} +1 -1
- package/dist/{helptext-CmsuAXSE.cjs → helptext-BCkwSz1m.cjs} +2 -2
- package/dist/{helptext-4TAHKV5_.js → helptext-DCT_9dw1.js} +1 -1
- package/dist/input-element-CSfDGslx.cjs +1 -0
- package/dist/{input-element-B1BntJeJ.js → input-element-lLzfwdim.js} +198 -173
- package/dist/{input-wrapper-B5rqKWSB.cjs → input-wrapper-BBG8EXQ8.cjs} +28 -28
- package/dist/{input-wrapper-CaMP5-Vm.js → input-wrapper-Bz9GwYrn.js} +46 -46
- package/dist/{link-CCFAmhL5.js → link-CmZwAw5u.js} +1 -1
- package/dist/{link-Bo2o0Akv.cjs → link-LO_5_La8.cjs} +2 -2
- package/dist/{linkcard-9L6QF7US.js → linkcard-CQluSyJJ.js} +7 -7
- package/dist/{linkcard-D7NbrluR.cjs → linkcard-UKsxADrP.cjs} +3 -3
- package/dist/{listbox-DEzd-dxF.js → listbox-Ct9jIV_5.js} +8 -8
- package/dist/{listbox-BoBwzL4p.cjs → listbox-g-vHHLkD.cjs} +20 -20
- package/dist/{loader-CQaGvyF9.cjs → loader-C_PH05aw.cjs} +2 -2
- package/dist/{loader-RQQ_o2aR.js → loader-DzctJ9jW.js} +1 -1
- package/dist/{messagebox-C-BQREWz.js → messagebox-DPFBuisE.js} +1 -1
- package/dist/{messagebox-BRqI3DW2.cjs → messagebox-JWKMJEFc.cjs} +2 -2
- package/dist/{modal-BGTTVHeW.cjs → modal-BymjMIJi.cjs} +2 -2
- package/dist/{modal-DCwqqNQc.js → modal-CELmA0-8.js} +1 -1
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +1 -1
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +1 -1
- package/dist/pkt-backlink.cjs +1 -1
- package/dist/pkt-backlink.js +1 -1
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -1
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +1 -1
- 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 -1
- package/dist/pkt-footer.cjs +1 -1
- package/dist/pkt-footer.js +1 -1
- package/dist/pkt-header-menu.cjs +1 -1
- package/dist/pkt-header-menu.js +1 -1
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +1 -1
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +30 -30
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -1
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +1 -1
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +1 -1
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -1
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +1 -1
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -1
- package/dist/{pkt-options-controller-Dz-rYCG1.cjs → pkt-options-controller-CpEZcomb.cjs} +1 -1
- package/dist/{pkt-options-controller-sUzxHa5A.js → pkt-options-controller-D7l18Iw0.js} +1 -1
- package/dist/pkt-progressbar.cjs +1 -1
- package/dist/pkt-progressbar.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-searchinput.cjs +1 -1
- package/dist/pkt-searchinput.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +1 -1
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/pkt-timepicker.cjs +1 -1
- package/dist/pkt-timepicker.js +1 -1
- package/dist/{progressbar-CAEQkFpP.cjs → progressbar-CIXNSwTy.cjs} +2 -3
- package/dist/{progressbar-DzX0p2vn.js → progressbar-DH5lIBpx.js} +6 -4
- package/dist/{radiobutton-Cv1BlwLV.cjs → radiobutton-C3kEjvHQ.cjs} +2 -2
- package/dist/{radiobutton-B0V-jSEX.js → radiobutton-D9htviZG.js} +5 -5
- package/dist/{searchinput-D6vtMUHw.cjs → searchinput-CbClDE-d.cjs} +1 -1
- package/dist/{select-C0GafKtu.js → select-BizHes0n.js} +20 -20
- package/dist/{select-Bd6Gg4Ar.cjs → select-BuQxosyi.cjs} +15 -15
- package/dist/{tabs-B134M9k2.js → tabs-B8blHQrL.js} +18 -18
- package/dist/{tabs-Dw9E06fL.cjs → tabs-CjX-GWvM.cjs} +15 -15
- package/dist/tag-B5dUg7AD.cjs +27 -0
- package/dist/{tag-CvFakm1k.js → tag-Bns7Xj1O.js} +10 -10
- package/dist/{textarea-CeqScqQa.cjs → textarea-BXadsEdL.cjs} +12 -12
- package/dist/{textarea-BZ2ufamc.js → textarea-CL1yUDVL.js} +18 -18
- package/dist/{textinput-DI8Tgmep.js → textinput-Csil0Zda.js} +16 -16
- package/dist/{textinput-L218fT2-.cjs → textinput-qi0f5NZH.cjs} +12 -12
- package/dist/{timepicker-ZSHZt0aW.cjs → timepicker-CvL2-Siz.cjs} +17 -17
- package/dist/{timepicker-CgXpmG3h.js → timepicker-DNoYMBAL.js} +22 -22
- package/package.json +2 -2
- package/src/components/alert/alert.test.ts +15 -0
- package/src/components/alert/alert.ts +0 -12
- package/src/components/checkbox/checkbox.ts +6 -9
- package/src/components/combobox/combobox-handlers.ts +6 -6
- package/src/components/combobox/combobox-value.ts +1 -1
- package/src/components/combobox/combobox.ts +8 -8
- package/src/components/datepicker/datepicker.ts +9 -9
- package/src/components/helptext/helptext-association.test.ts +79 -0
- package/src/components/input-wrapper/input-wrapper.test.ts +85 -0
- package/src/components/input-wrapper/input-wrapper.ts +17 -8
- package/src/components/progressbar/progressbar.test.ts +19 -0
- package/src/components/progressbar/progressbar.ts +2 -6
- package/src/components/radiobutton/radiobutton.ts +3 -6
- package/src/components/select/select.ts +5 -5
- package/src/components/textarea/textarea.ts +5 -5
- package/src/components/textinput/textinput.ts +5 -5
- package/src/components/timepicker/timepicker.ts +10 -10
- package/dist/alert-DcyO0WfW.cjs +0 -40
- package/dist/button-PcKtiNGS.cjs +0 -32
- package/dist/checkbox-C0zLtnCI.cjs +0 -40
- package/dist/element-with-slot-2PHu2w7O.cjs +0 -1
- package/dist/input-element-W6Gklt2E.cjs +0 -1
- package/dist/tag--kFPXNaj.cjs +0 -27
- package/dist/{backlink-DdyQq62f.js → backlink-BslFewn-.js} +1 -1
- package/dist/{searchinput-DyjUl08X.js → searchinput-Co8tcq-l.js} +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as e, d as t, h as n, n as r, u as i } from "./element-mwwC2Rra.js";
|
|
2
2
|
import { t as a } from "./class-map-C4hdfSfY.js";
|
|
3
3
|
import { n as o, t as s } from "./ref-CCSGk4MP.js";
|
|
4
|
-
import { t as c } from "./input-element-
|
|
4
|
+
import { t as c } from "./input-element-lLzfwdim.js";
|
|
5
5
|
//#region ../../shared-types/checkbox.ts
|
|
6
6
|
var l = {
|
|
7
7
|
defaultChecked: !1,
|
|
@@ -22,7 +22,7 @@ var l = {
|
|
|
22
22
|
super.connectedCallback();
|
|
23
23
|
}
|
|
24
24
|
attributeChangedCallback(e, t, n) {
|
|
25
|
-
e === "
|
|
25
|
+
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);
|
|
26
26
|
}
|
|
27
27
|
firstUpdated(e) {
|
|
28
28
|
this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.firstUpdated(e);
|
|
@@ -37,13 +37,13 @@ var l = {
|
|
|
37
37
|
let t = a({
|
|
38
38
|
"pkt-input-check__input": !0,
|
|
39
39
|
"pkt-input-check__input--tile": this.hasTile,
|
|
40
|
-
"pkt-input-check__input--tile-disabled": this.
|
|
40
|
+
"pkt-input-check__input--tile-disabled": this.isDisabled && this.hasTile
|
|
41
41
|
}), r = a({
|
|
42
42
|
"pkt-input-check__input-checkbox": !0,
|
|
43
43
|
"pkt-input-check__input-checkbox--error": this.hasError
|
|
44
44
|
}), i = a({
|
|
45
45
|
"pkt-input-check__input-label": !0,
|
|
46
|
-
"pkt-input-check__input-label--disabled": this.
|
|
46
|
+
"pkt-input-check__input-label--disabled": this.isDisabled,
|
|
47
47
|
"pkt-input-check__input-label--left": this.labelPosition === "left",
|
|
48
48
|
"pkt-input-check__input-label--right": this.labelPosition === "right",
|
|
49
49
|
"pkt-sr-only": this.hideLabel
|
|
@@ -71,7 +71,7 @@ var l = {
|
|
|
71
71
|
id=${this.id + "-internal"}
|
|
72
72
|
class=${r}
|
|
73
73
|
type="checkbox"
|
|
74
|
-
?disabled=${this.
|
|
74
|
+
?disabled=${this.isDisabled}
|
|
75
75
|
name=${this.name + "-internal"}
|
|
76
76
|
${o(this.inputRef)}
|
|
77
77
|
@change=${this.handleChange}
|
|
@@ -93,14 +93,14 @@ var l = {
|
|
|
93
93
|
e.stopImmediatePropagation(), this.onInput();
|
|
94
94
|
}
|
|
95
95
|
handleClick(e) {
|
|
96
|
-
if (this.
|
|
96
|
+
if (this.isDisabled) return e.preventDefault(), e.stopImmediatePropagation(), !1;
|
|
97
97
|
}
|
|
98
98
|
handleChange(e) {
|
|
99
|
-
if (this.
|
|
99
|
+
if (this.isDisabled) return e.preventDefault(), e.stopImmediatePropagation(), !1;
|
|
100
100
|
this.toggleChecked(e);
|
|
101
101
|
}
|
|
102
102
|
toggleChecked(e) {
|
|
103
|
-
if (this.
|
|
103
|
+
if (this.isDisabled) {
|
|
104
104
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
105
105
|
return;
|
|
106
106
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./ref-Emu5PNxk.cjs"),r=require("./input-element-CSfDGslx.cjs");var i={defaultChecked:!1,indeterminate:!1,hasTile:!1,disabled:!1,hasError:!1,isSwitch:!1,hideLabel:!1,labelPosition:`right`,requiredTag:!1,optionalTag:!1},a=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=i.defaultChecked,this.hasTile=i.hasTile,this.isSwitch=i.isSwitch,this.labelPosition=i.labelPosition,this.hideLabel=i.hideLabel,this.checked=null,this.indeterminate=i.indeterminate,this.type=`checkbox`,this.tagText=null,this.optionalTag=i.optionalTag,this.requiredTag=i.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 r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.isDisabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=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}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
|
|
2
|
+
${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
|
|
3
|
+
${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}
|
|
4
|
+
>${this.optionalText??s.optional}</span
|
|
5
|
+
>`:e.h}
|
|
6
|
+
${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}
|
|
7
|
+
>${this.requiredText??s.required}</span
|
|
8
|
+
>`:e.h}
|
|
9
|
+
`,l=this.id+`-check-label`,u=this.id+`-check-helptext`,d=()=>e._`
|
|
10
|
+
<label class=${a} for=${this.id+`-internal`}>
|
|
11
|
+
<span id=${l}>${this.label} ${c()}</span>
|
|
12
|
+
${this.checkHelptext?e._`<div id=${u} class="pkt-input-check__input-helptext">
|
|
13
|
+
${this.checkHelptext}
|
|
14
|
+
</div>`:e.h}
|
|
15
|
+
</label>
|
|
16
|
+
`;return e._`
|
|
17
|
+
<div class="pkt-input-check">
|
|
18
|
+
<div class=${r}>
|
|
19
|
+
${this.labelPosition===`left`?d():e.h}
|
|
20
|
+
<input
|
|
21
|
+
id=${this.id+`-internal`}
|
|
22
|
+
class=${i}
|
|
23
|
+
type="checkbox"
|
|
24
|
+
?disabled=${this.isDisabled}
|
|
25
|
+
name=${this.name+`-internal`}
|
|
26
|
+
${n.n(this.inputRef)}
|
|
27
|
+
@change=${this.handleChange}
|
|
28
|
+
@input=${this.handleInput}
|
|
29
|
+
@click=${this.handleClick}
|
|
30
|
+
@blur=${this.onBlur}
|
|
31
|
+
@focus=${this.onFocus}
|
|
32
|
+
?checked=${this.checked}
|
|
33
|
+
role=${this.isSwitch?`switch`:`checkbox`}
|
|
34
|
+
aria-labelledby=${this.label?l:e.h}
|
|
35
|
+
aria-describedby=${this.checkHelptext?u:e.h}
|
|
36
|
+
/>
|
|
37
|
+
${this.labelPosition===`right`?d():e.h}
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
`}handleInput(e){e.stopImmediatePropagation(),this.onInput()}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;if(t&&t.disabled){e.preventDefault(),e.stopImmediatePropagation();return}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})],a.prototype,`value`,void 0),e.n([e.u({type:String})],a.prototype,`checkHelptext`,void 0),e.n([e.u({type:Boolean})],a.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],a.prototype,`hasTile`,void 0),e.n([e.u({type:Boolean})],a.prototype,`isSwitch`,void 0),e.n([e.u({type:String})],a.prototype,`labelPosition`,void 0),e.n([e.u({type:Boolean})],a.prototype,`hideLabel`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`checked`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`indeterminate`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.u({type:String})],a.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],a.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],a.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],a.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],a.prototype,`requiredText`,void 0);try{e.d(`pkt-checkbox`)(a)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-2PHu2w7O.cjs");require("./icon-Dnv6LtPC.cjs");const a=require("./ref-Emu5PNxk.cjs");require("./tag--kFPXNaj.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./listbox-BoBwzL4p.cjs"),c=require("./input-element-W6Gklt2E.cjs"),l=require("./pkt-options-controller-Dz-rYCG1.cjs"),u=require("./input-wrapper-B5rqKWSB.cjs");var d=(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}},f=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=s.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}},p=(e,t,n,r,i)=>e.trim().toLowerCase()?{...s.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},m=(e,t,n)=>{let r=s.i(t,e);return n===`label`&&r?.label?r.label:e},h={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)}},g={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=s.r(n),t.push(n)}),t}},_={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=s.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]}},v={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},form:{name:`Skjema`,description:`ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet`,type:`string`,required:!1,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`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,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:{attribute:`helptextdropdown`,type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{attribute:`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:{attribute:`haserror`,type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{attribute:`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:{attribute:`requiredtag`,type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{attribute:`requiredtext`,type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{attribute:`optionaltag`,type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{attribute:`optionaltext`,type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{attribute:`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:`IPktComboboxOption[]`,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:`IPktComboboxOption[]`,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`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{attribute:`usewrapper`,name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{attribute:`hasfieldset`,name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`},defaultValue:{attribute:`defaultvalue`,type:`string | string[]`,name:`Standardverdi`,description:`Verdien feltet får ved oppstart og ved nullstilling av skjemaet`,category:`functionality`}},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`}}},y=class extends c.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=null,this.multiple=!1,this.maxlength=null,this.displayValueAs=v.props.displayValueAs.default,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=a.t(),this.triggerRef=a.t(),this.listboxRef=a.t(),this._pendingDispatchFrom=null,this.optionsController=new l.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=s.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.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=s.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,c=this.multiple,l=s.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=null,h=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!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?m(t||``,this.options,this.displayValueAs):s.s(s.i(this.options,t),this.displayValueAs)):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,h=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,h=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=h||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=p,c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&s.l(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,h.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=s.i(this.options,e);t&&(h.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(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),h.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],h.markAllDeselected(this._options),this._options=h.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=`alreadySelected`;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(!s.i(this.options,e)){if(s.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=_.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=_.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]?m(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.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}=s.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(){if(!this.disabled){if(this._skipInputTab=!1,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=m(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.disabled||!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=s.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}=f(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=m(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]))}}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=d(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}}}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=p(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}},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=_.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=g.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=g.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=_.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=_.mergeWithUserAdded(_.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=_.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]?m(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.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=_.cloneOptions(this.options);let e=_.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._`
|
|
1
|
+
const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-D7sTqOr3.cjs");require("./icon-Dnv6LtPC.cjs");const i=require("./if-defined-2mkIDgOm.cjs"),a=require("./ref-Emu5PNxk.cjs");require("./tag-B5dUg7AD.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./listbox-g-vHHLkD.cjs"),c=require("./input-element-CSfDGslx.cjs"),l=require("./pkt-options-controller-CpEZcomb.cjs"),u=require("./input-wrapper-BBG8EXQ8.cjs");var d=(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}},f=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=s.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}},p=(e,t,n,r,i)=>e.trim().toLowerCase()?{...s.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},m=(e,t,n)=>{let r=s.i(t,e);return n===`label`&&r?.label?r.label:e},h={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)}},g={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=s.r(n),t.push(n)}),t}},_={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=s.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]}},v={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},form:{name:`Skjema`,description:`ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet`,type:`string`,required:!1,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`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,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:{attribute:`helptextdropdown`,type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{attribute:`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:{attribute:`haserror`,type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{attribute:`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:{attribute:`requiredtag`,type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{attribute:`requiredtext`,type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{attribute:`optionaltag`,type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{attribute:`optionaltext`,type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{attribute:`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:`IPktComboboxOption[]`,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:`IPktComboboxOption[]`,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`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{attribute:`usewrapper`,name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{attribute:`hasfieldset`,name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`},defaultValue:{attribute:`defaultvalue`,type:`string | string[]`,name:`Standardverdi`,description:`Verdien feltet får ved oppstart og ved nullstilling av skjemaet`,category:`functionality`}},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`}}},y=class extends c.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=null,this.multiple=!1,this.maxlength=null,this.displayValueAs=v.props.displayValueAs.default,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=a.t(),this.triggerRef=a.t(),this.listboxRef=a.t(),this._pendingDispatchFrom=null,this.optionsController=new l.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=s.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=s.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,c=this.multiple,l=s.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=null,h=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!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?m(t||``,this.options,this.displayValueAs):s.s(s.i(this.options,t),this.displayValueAs)):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,h=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,h=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=h||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=p,c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&s.l(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,h.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=s.i(this.options,e);t&&(h.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(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),h.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],h.markAllDeselected(this._options),this._options=h.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=`alreadySelected`;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(!s.i(this.options,e)){if(s.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=_.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=_.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]?m(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}=s.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(){if(!this.isDisabled){if(this._skipInputTab=!1,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=m(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=s.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}=f(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=m(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.isDisabled){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.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=d(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}}}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=p(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}},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=_.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=g.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=g.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=_.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=_.mergeWithUserAdded(_.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=_.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]?m(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.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=_.cloneOptions(this.options);let e=_.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
2
|
<pkt-input-wrapper
|
|
3
|
+
${r.n(this,[`helptext`])}
|
|
3
4
|
.strings=${this.strings}
|
|
4
5
|
.size=${this.inputSize}
|
|
5
6
|
.label=${this.label}
|
|
6
7
|
.helptext=${this.helptext}
|
|
7
|
-
.helptextDropdown=${
|
|
8
|
-
.helptextDropdownButton=${
|
|
8
|
+
.helptextDropdown=${i.t(this.helptextDropdown)}
|
|
9
|
+
.helptextDropdownButton=${i.t(this.helptextDropdownButton)}
|
|
9
10
|
?fullwidth=${this.fullwidth}
|
|
10
11
|
?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
|
|
11
12
|
.counterCurrent=${this._value.length}
|
|
12
13
|
.counterMaxLength=${this.maxlength??0}
|
|
13
14
|
?hasError=${this.hasError}
|
|
14
15
|
?inline=${this.inline}
|
|
15
|
-
?disabled=${this.
|
|
16
|
+
?disabled=${this.isDisabled}
|
|
16
17
|
.errorMessage=${this.errorMessage}
|
|
17
18
|
?optionalTag=${this.optionalTag}
|
|
18
19
|
.optionalText=${this.optionalText}
|
|
@@ -25,20 +26,19 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
25
26
|
class="pkt-combobox__wrapper"
|
|
26
27
|
@labelClick=${this.handleInputClick}
|
|
27
28
|
>
|
|
28
|
-
<div class="pkt-contents" slot="helptext">${i.r(this,`helptext`)}</div>
|
|
29
29
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
30
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.
|
|
32
|
-
id=${
|
|
33
|
-
role=${
|
|
34
|
-
aria-expanded=${
|
|
35
|
-
aria-controls=${
|
|
36
|
-
aria-haspopup=${
|
|
37
|
-
aria-describedby=${
|
|
38
|
-
aria-labelledby=${
|
|
39
|
-
aria-activedescendant=${
|
|
40
|
-
aria-description=${
|
|
41
|
-
tabindex=${this._hasTextInput||this.
|
|
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=${i.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
|
+
role=${i.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
|
+
aria-expanded=${i.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
35
|
+
aria-controls=${i.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
|
|
36
|
+
aria-haspopup=${i.t(this._hasTextInput?void 0:`listbox`)}
|
|
37
|
+
aria-describedby=${i.t(this._hasTextInput?void 0:this._describedBy())}
|
|
38
|
+
aria-labelledby=${i.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
39
|
+
aria-activedescendant=${i.t(!this._hasTextInput&&this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
40
|
+
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
41
|
+
tabindex=${this._hasTextInput||this.isDisabled?`-1`:`0`}
|
|
42
42
|
@click=${this.handleInputClick}
|
|
43
43
|
@keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
|
|
44
44
|
@blur=${this.restoreInputTab}
|
|
@@ -61,13 +61,13 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
61
61
|
.isOpen=${this._isOptionsOpen}
|
|
62
62
|
.searchPlaceholder=${this.searchPlaceholder}
|
|
63
63
|
.label="Liste: ${this.label||``}"
|
|
64
|
-
?disabled=${this.
|
|
64
|
+
?disabled=${this.isDisabled}
|
|
65
65
|
?include-search=${this.includeSearch}
|
|
66
66
|
?is-multi-select=${this.multiple}
|
|
67
67
|
?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
|
|
68
68
|
?max-is-reached=${this._maxIsReached}
|
|
69
|
-
.customUserInput=${
|
|
70
|
-
.userMessage=${this._userInfoMessage?
|
|
69
|
+
.customUserInput=${i.t(this._addValueText)}
|
|
70
|
+
.userMessage=${this._userInfoMessage?n.t(this.pktStrings.get(`combobox`)[this._userInfoMessage],{value:this._messageValue??``}):``}
|
|
71
71
|
@search=${this.handleSearch}
|
|
72
72
|
@option-toggle=${this.handleOptionToggled}
|
|
73
73
|
@select-all=${this.addAllOptions}
|
|
@@ -83,28 +83,28 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
83
83
|
${this.renderSingleOrMultipleValues()}
|
|
84
84
|
</div>`:e.h}
|
|
85
85
|
</pkt-input-wrapper>
|
|
86
|
-
`}_describedBy(){return u.r({id:this._hasTextInput?`${this.id}-input`:`${this.id}-combobox`,hasHelptext:!!this.helptext,ariaDescribedby:this.ariaDescribedby})}renderInputField(){return this.typeahead||this.allowUserInput?e._`
|
|
86
|
+
`}_describedBy(){return u.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
87
|
<div class="pkt-combobox__input-div combobox__input">
|
|
88
88
|
<input
|
|
89
89
|
type="text"
|
|
90
90
|
id="${this.id}-input"
|
|
91
91
|
name=${(this.name||this.id)+`-input`}
|
|
92
|
-
placeholder=${
|
|
92
|
+
placeholder=${i.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
|
|
93
93
|
@input=${this.handleInput}
|
|
94
94
|
@change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
|
|
95
|
-
tabindex=${
|
|
95
|
+
tabindex=${i.t(this._skipInputTab?`-1`:void 0)}
|
|
96
96
|
@keydown=${this.handleInputKeydown}
|
|
97
97
|
@focus=${this.handleFocus}
|
|
98
98
|
@blur=${this.handleBlur}
|
|
99
99
|
autocomplete="off"
|
|
100
100
|
role="combobox"
|
|
101
101
|
aria-expanded=${this._isOptionsOpen?`true`:`false`}
|
|
102
|
-
aria-label=${
|
|
103
|
-
aria-describedby=${
|
|
102
|
+
aria-label=${i.t(this.label)}
|
|
103
|
+
aria-describedby=${i.t(this._describedBy())}
|
|
104
104
|
aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
|
|
105
105
|
aria-controls="${this.id}-listbox"
|
|
106
|
-
aria-activedescendant=${
|
|
107
|
-
aria-description=${
|
|
106
|
+
aria-activedescendant=${i.t(this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
107
|
+
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
108
108
|
${a.n(this.inputRef)}
|
|
109
109
|
/>
|
|
110
110
|
</div>
|
|
@@ -126,7 +126,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
126
126
|
>
|
|
127
127
|
<pkt-tag
|
|
128
128
|
skin=${a||`blue-dark`}
|
|
129
|
-
?closeTag=${!this.
|
|
129
|
+
?closeTag=${!this.isDisabled}
|
|
130
130
|
.buttonTabindex=${r?void 0:-1}
|
|
131
131
|
@close=${()=>this.handleTagRemove(t)}
|
|
132
132
|
@keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-mwwC2Rra.js";
|
|
2
2
|
import { t as o } from "./class-map-C4hdfSfY.js";
|
|
3
|
-
import { t as s } from "./
|
|
4
|
-
import {
|
|
5
|
-
import { r as l } from "./element-with-slot-FD826ooP.js";
|
|
3
|
+
import { t as s } from "./format-BTeSVkED.js";
|
|
4
|
+
import { n as c } from "./element-with-slot-DQv0cbbD.js";
|
|
6
5
|
import "./icon-JigbxxF7.js";
|
|
6
|
+
import { t as l } from "./if-defined-Bebu3LXY.js";
|
|
7
7
|
import { n as u, t as d } from "./ref-CCSGk4MP.js";
|
|
8
|
-
import "./tag-
|
|
8
|
+
import "./tag-Bns7Xj1O.js";
|
|
9
9
|
import { t as f } from "./repeat-CdxGS-_3.js";
|
|
10
|
-
import { a as p, c as m, i as h, l as g, o as _, r as v, s as y } from "./listbox-
|
|
11
|
-
import { t as b } from "./input-element-
|
|
12
|
-
import { t as x } from "./pkt-options-controller-
|
|
13
|
-
import { r as S } from "./input-wrapper-
|
|
10
|
+
import { a as p, c as m, i as h, l as g, o as _, r as v, s as y } from "./listbox-Ct9jIV_5.js";
|
|
11
|
+
import { t as b } from "./input-element-lLzfwdim.js";
|
|
12
|
+
import { t as x } from "./pkt-options-controller-D7l18Iw0.js";
|
|
13
|
+
import { r as S } from "./input-wrapper-Bz9GwYrn.js";
|
|
14
14
|
//#region ../../shared-utils/combobox/input-utils.ts
|
|
15
15
|
var C = (e, t, n) => {
|
|
16
16
|
switch (e) {
|
|
@@ -573,7 +573,7 @@ i([a({
|
|
|
573
573
|
//#region src/components/combobox/combobox-value.ts
|
|
574
574
|
var M = class extends j {
|
|
575
575
|
toggleValue(e) {
|
|
576
|
-
if (this.
|
|
576
|
+
if (this.isDisabled) return;
|
|
577
577
|
this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
|
|
578
578
|
let t = h(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 = g(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = null, p = "";
|
|
579
579
|
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 ? E(t || "", this.options, this.displayValueAs) : y(h(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(() => {
|
|
@@ -650,7 +650,7 @@ var M = class extends j {
|
|
|
650
650
|
}
|
|
651
651
|
}, N = class extends M {
|
|
652
652
|
handleInput(e) {
|
|
653
|
-
if (e.stopPropagation(), e.stopImmediatePropagation(), this.
|
|
653
|
+
if (e.stopPropagation(), e.stopImmediatePropagation(), this.isDisabled) return;
|
|
654
654
|
this.touched = !0;
|
|
655
655
|
let t = e.target;
|
|
656
656
|
if (this._search = t.value, this.checkForMatches(), this.typeahead) {
|
|
@@ -661,7 +661,7 @@ var M = class extends j {
|
|
|
661
661
|
}
|
|
662
662
|
}
|
|
663
663
|
handleFocus() {
|
|
664
|
-
if (!this.
|
|
664
|
+
if (!this.isDisabled) {
|
|
665
665
|
if (this._skipInputTab = !1, this._suppressNextOpen) {
|
|
666
666
|
this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
|
|
667
667
|
return;
|
|
@@ -673,7 +673,7 @@ var M = class extends j {
|
|
|
673
673
|
this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), this.focusTrigger();
|
|
674
674
|
}
|
|
675
675
|
handleFocusOut(e) {
|
|
676
|
-
if (this.
|
|
676
|
+
if (this.isDisabled || !this._isOptionsOpen) return;
|
|
677
677
|
let t = e.relatedTarget;
|
|
678
678
|
t?.closest("pkt-combobox")?.id === this.id || e.target?.classList?.contains("pkt-combobox__value") || t === this.inputRef.value || t === this.triggerRef.value || this.closeAndProcessInput();
|
|
679
679
|
}
|
|
@@ -706,17 +706,17 @@ var M = class extends j {
|
|
|
706
706
|
this._inputFocus = !1, this.onBlur();
|
|
707
707
|
}
|
|
708
708
|
handleInputClick(e) {
|
|
709
|
-
if (this.
|
|
709
|
+
if (this.isDisabled) {
|
|
710
710
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
711
711
|
return;
|
|
712
712
|
}
|
|
713
713
|
this._hasTextInput ? (this.inputRef.value?.focus(), this.requestUpdate()) : (e.stopImmediatePropagation(), e.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen && this.listboxRef.value?.focusFirstOrSelectedOption());
|
|
714
714
|
}
|
|
715
715
|
handlePlaceholderClick(e) {
|
|
716
|
-
this.
|
|
716
|
+
this.isDisabled || (e.stopPropagation(), this._hasTextInput && this.inputRef.value ? (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()) : (this._isOptionsOpen = !this._isOptionsOpen, this.requestUpdate()));
|
|
717
717
|
}
|
|
718
718
|
handleSelectOnlyKeydown(e) {
|
|
719
|
-
if (!this.
|
|
719
|
+
if (!this.isDisabled) switch (e.key) {
|
|
720
720
|
case "Enter":
|
|
721
721
|
case " ":
|
|
722
722
|
case "ArrowDown":
|
|
@@ -912,19 +912,20 @@ var M = class extends j {
|
|
|
912
912
|
render() {
|
|
913
913
|
return e`
|
|
914
914
|
<pkt-input-wrapper
|
|
915
|
+
${c(this, ["helptext"])}
|
|
915
916
|
.strings=${this.strings}
|
|
916
917
|
.size=${this.inputSize}
|
|
917
918
|
.label=${this.label}
|
|
918
919
|
.helptext=${this.helptext}
|
|
919
|
-
.helptextDropdown=${
|
|
920
|
-
.helptextDropdownButton=${
|
|
920
|
+
.helptextDropdown=${l(this.helptextDropdown)}
|
|
921
|
+
.helptextDropdownButton=${l(this.helptextDropdownButton)}
|
|
921
922
|
?fullwidth=${this.fullwidth}
|
|
922
923
|
?counter=${this.effectiveCounter(!!this.multiple && this.maxlength != null)}
|
|
923
924
|
.counterCurrent=${this._value.length}
|
|
924
925
|
.counterMaxLength=${this.maxlength ?? 0}
|
|
925
926
|
?hasError=${this.hasError}
|
|
926
927
|
?inline=${this.inline}
|
|
927
|
-
?disabled=${this.
|
|
928
|
+
?disabled=${this.isDisabled}
|
|
928
929
|
.errorMessage=${this.errorMessage}
|
|
929
930
|
?optionalTag=${this.optionalTag}
|
|
930
931
|
.optionalText=${this.optionalText}
|
|
@@ -937,7 +938,6 @@ var M = class extends j {
|
|
|
937
938
|
class="pkt-combobox__wrapper"
|
|
938
939
|
@labelClick=${this.handleInputClick}
|
|
939
940
|
>
|
|
940
|
-
<div class="pkt-contents" slot="helptext">${l(this, "helptext")}</div>
|
|
941
941
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
942
942
|
<div
|
|
943
943
|
class=${o({
|
|
@@ -946,18 +946,18 @@ var M = class extends j {
|
|
|
946
946
|
"pkt-combobox__input--fullwidth": this.fullwidth,
|
|
947
947
|
"pkt-combobox__input--open": this._isOptionsOpen,
|
|
948
948
|
"pkt-combobox__input--error": this.hasError,
|
|
949
|
-
"pkt-combobox__input--disabled": this.
|
|
949
|
+
"pkt-combobox__input--disabled": this.isDisabled
|
|
950
950
|
})}
|
|
951
|
-
id=${
|
|
952
|
-
role=${
|
|
953
|
-
aria-expanded=${
|
|
954
|
-
aria-controls=${
|
|
955
|
-
aria-haspopup=${
|
|
956
|
-
aria-describedby=${
|
|
957
|
-
aria-labelledby=${
|
|
958
|
-
aria-activedescendant=${
|
|
959
|
-
aria-description=${
|
|
960
|
-
tabindex=${this._hasTextInput || this.
|
|
951
|
+
id=${l(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
|
|
952
|
+
role=${l(this._hasTextInput ? void 0 : "combobox")}
|
|
953
|
+
aria-expanded=${l(this._hasTextInput ? void 0 : this._isOptionsOpen ? "true" : "false")}
|
|
954
|
+
aria-controls=${l(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
|
|
955
|
+
aria-haspopup=${l(this._hasTextInput ? void 0 : "listbox")}
|
|
956
|
+
aria-describedby=${l(this._hasTextInput ? void 0 : this._describedBy())}
|
|
957
|
+
aria-labelledby=${l(this._hasTextInput ? void 0 : `${this.id}-combobox-label`)}
|
|
958
|
+
aria-activedescendant=${l(!this._hasTextInput && this._isOptionsOpen && this._value[0] && h(this.options, this._value[0]) ? `${this.id}-listbox-${p(this._options, this._value[0])}` : void 0)}
|
|
959
|
+
aria-description=${l(this._selectionDescription || void 0)}
|
|
960
|
+
tabindex=${this._hasTextInput || this.isDisabled ? "-1" : "0"}
|
|
961
961
|
@click=${this.handleInputClick}
|
|
962
962
|
@keydown=${this._hasTextInput ? n : this.handleSelectOnlyKeydown}
|
|
963
963
|
@blur=${this.restoreInputTab}
|
|
@@ -983,13 +983,13 @@ var M = class extends j {
|
|
|
983
983
|
.isOpen=${this._isOptionsOpen}
|
|
984
984
|
.searchPlaceholder=${this.searchPlaceholder}
|
|
985
985
|
.label="Liste: ${this.label || ""}"
|
|
986
|
-
?disabled=${this.
|
|
986
|
+
?disabled=${this.isDisabled}
|
|
987
987
|
?include-search=${this.includeSearch}
|
|
988
988
|
?is-multi-select=${this.multiple}
|
|
989
989
|
?allow-user-input=${this.allowUserInput && !this._maxIsReached}
|
|
990
990
|
?max-is-reached=${this._maxIsReached}
|
|
991
|
-
.customUserInput=${
|
|
992
|
-
.userMessage=${this._userInfoMessage ?
|
|
991
|
+
.customUserInput=${l(this._addValueText)}
|
|
992
|
+
.userMessage=${this._userInfoMessage ? s(this.pktStrings.get("combobox")[this._userInfoMessage], { value: this._messageValue ?? "" }) : ""}
|
|
993
993
|
@search=${this.handleSearch}
|
|
994
994
|
@option-toggle=${this.handleOptionToggled}
|
|
995
995
|
@select-all=${this.addAllOptions}
|
|
@@ -1010,7 +1010,7 @@ var M = class extends j {
|
|
|
1010
1010
|
_describedBy() {
|
|
1011
1011
|
return S({
|
|
1012
1012
|
id: this._hasTextInput ? `${this.id}-input` : `${this.id}-combobox`,
|
|
1013
|
-
hasHelptext: !!this.helptext,
|
|
1013
|
+
hasHelptext: !!this.helptext || this.hasSlotContent("helptext"),
|
|
1014
1014
|
ariaDescribedby: this.ariaDescribedby
|
|
1015
1015
|
});
|
|
1016
1016
|
}
|
|
@@ -1021,24 +1021,24 @@ var M = class extends j {
|
|
|
1021
1021
|
type="text"
|
|
1022
1022
|
id="${this.id}-input"
|
|
1023
1023
|
name=${(this.name || this.id) + "-input"}
|
|
1024
|
-
placeholder=${
|
|
1024
|
+
placeholder=${l(!this._value.length || this.multiple && this.tagPlacement === "outside" ? this.placeholder : void 0)}
|
|
1025
1025
|
@input=${this.handleInput}
|
|
1026
1026
|
@change=${(e) => {
|
|
1027
1027
|
e.stopPropagation(), e.stopImmediatePropagation();
|
|
1028
1028
|
}}
|
|
1029
|
-
tabindex=${
|
|
1029
|
+
tabindex=${l(this._skipInputTab ? "-1" : void 0)}
|
|
1030
1030
|
@keydown=${this.handleInputKeydown}
|
|
1031
1031
|
@focus=${this.handleFocus}
|
|
1032
1032
|
@blur=${this.handleBlur}
|
|
1033
1033
|
autocomplete="off"
|
|
1034
1034
|
role="combobox"
|
|
1035
1035
|
aria-expanded=${this._isOptionsOpen ? "true" : "false"}
|
|
1036
|
-
aria-label=${
|
|
1037
|
-
aria-describedby=${
|
|
1036
|
+
aria-label=${l(this.label)}
|
|
1037
|
+
aria-describedby=${l(this._describedBy())}
|
|
1038
1038
|
aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
|
|
1039
1039
|
aria-controls="${this.id}-listbox"
|
|
1040
|
-
aria-activedescendant=${
|
|
1041
|
-
aria-description=${
|
|
1040
|
+
aria-activedescendant=${l(this._isOptionsOpen && this._value[0] && h(this.options, this._value[0]) ? `${this.id}-listbox-${p(this._options, this._value[0])}` : void 0)}
|
|
1041
|
+
aria-description=${l(this._selectionDescription || void 0)}
|
|
1042
1042
|
${u(this.inputRef)}
|
|
1043
1043
|
/>
|
|
1044
1044
|
</div>
|
|
@@ -1066,7 +1066,7 @@ var M = class extends j {
|
|
|
1066
1066
|
>
|
|
1067
1067
|
<pkt-tag
|
|
1068
1068
|
skin=${o || "blue-dark"}
|
|
1069
|
-
?closeTag=${!this.
|
|
1069
|
+
?closeTag=${!this.isDisabled}
|
|
1070
1070
|
.buttonTabindex=${i ? void 0 : -1}
|
|
1071
1071
|
@close=${() => this.handleTagRemove(t)}
|
|
1072
1072
|
@keydown=${i ? n : (e) => this.handleTagKeydown(e, r)}
|
|
@@ -26,11 +26,9 @@ export declare class PktAlert extends PktElementWithSlot<IPktAlert> implements I
|
|
|
26
26
|
closeAlert: boolean;
|
|
27
27
|
date: string | null;
|
|
28
28
|
role: string;
|
|
29
|
-
_hostId: string | null;
|
|
30
29
|
size?: 'medium' | 'small' | 'xsmall';
|
|
31
30
|
_isClosed: boolean;
|
|
32
31
|
connectedCallback(): void;
|
|
33
|
-
protected willUpdate(changed: PropertyValues): void;
|
|
34
32
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
35
33
|
protected updated(_changedProperties: PropertyValues): void;
|
|
36
34
|
render(): import('lit-html').TemplateResult<1>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./element-BOmr9YLv.cjs");require("./button-
|
|
1
|
+
const e=require("./element-BOmr9YLv.cjs");require("./button-BNVTj7nB.cjs");var t={i18n:{nb:{contentPresentation:{title:`Oslo kommune bruker informasjonskapsler`,description:[`For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.`,`Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss.`],buttons:{accept:`Godta alle`,reject:`Kun nødvendige`,settings:`Innstillinger for informasjonskapsler`}},contentSettings:{title:`Innstillinger for informasjonskapsler`,description:[`Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.`,`Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler».`],buttons:{back:`Tilbake`,save:`Lagre innstillinger`}}},en:{contentPresentation:{title:`Before you visit Oslo kommune ...`,description:[`This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.`,`To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites.`],buttons:{accept:`Yes, I accept`,reject:`Only necessary`,settings:`Go to settings`}},contentSettings:{title:`Her kan du aktivt velge mellom ulike informasjonskapsler`,description:[`For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider`],buttons:{back:`Back`,save:`Save settings`}}}},cookies:[{name:`statistics`,defaultValue:null,i18n:{nb:{title:`Statistikk og analyse`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler til å innhente data om statistikk og brukeradferd.`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Statistics and analytics`,description:`Select your preference for statistics and analytics`,buttons:{yes:`Yes`,no:`No`}}}},{name:`survey`,defaultValue:null,i18n:{nb:{title:`Skriftlige tilbakemeldinger`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler til å vise responsfelt og registrere tilbakemeldinger.`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Survey`,description:`Select your preference for survey`,buttons:{yes:`Yes`,no:`No`}}}},{name:`functional`,defaultValue:!0,i18n:{nb:{title:`Funksjonelle informasjonskapsler`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler for å gjøre ulike funksjoner på nettstedet mulige (for eksempel skjemaer og barnehagevelger).`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Functional cookies`,description:`For the website to function optimally, we recommend that you accept these cookies`,buttons:{yes:`Yes`,no:`No`}}}}]},n={devMode:!1,i18nLanguage:`nb`,triggerType:`button`},r=null;function i(){return r||(r=new Promise((e,t)=>{if(document.querySelector(`#oslo-consent-script`)){e();return}let n=document.createElement(`script`);n.src=`https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.js`,n.id=`oslo-consent-script`,n.onload=()=>e(),n.onerror=t,document.head.appendChild(n);let r=document.createElement(`link`);r.href=`https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.css`,r.type=`text/css`,r.rel=`stylesheet`,r.id=`oslo-consent-styles`,document.head.appendChild(r)}),r)}var a=e=>{if(typeof e!=`string`)return e;try{return JSON.parse(e)}catch{return e}},o=e=>a(e.value).items.reduce((e,t)=>(e[t.name]=t.consent,e),{}),s=class extends e.t{constructor(...e){super(...e),this.devMode=n.devMode,this.hotjarId=null,this.googleAnalyticsId=null,this.cookieDomain=null,this.cookieSecure=null,this.cookieExpiryDays=null,this.triggerType=n.triggerType,this.triggerText=null,this.i18nLanguage=n.i18nLanguage}connectedCallback(){super.connectedCallback();let e=Object.hasOwn(t.i18n,this.i18nLanguage)?this.i18nLanguage:`nb`;this.triggerText=this.triggerText||t.i18n[e].contentPresentation.buttons.settings}disconnectedCallback(){super.disconnectedCallback(),this._cookieEventHandler&&window.__cookieEvents?.off(`CookieManager.setCookie`,this._cookieEventHandler)}returnJsonOrObject(e){return a(e)}emitCookieConsents(e){this.dispatchEvent(new CustomEvent(`toggle-consent`,{detail:o(e),bubbles:!0,cancelable:!1}))}async firstUpdated(e){window.cookieBanner_googleAnalyticsId=this.googleAnalyticsId,window.cookieBanner_hotjarId=this.hotjarId,this.cookieDomain&&(window.cookieBanner_cookieDomain=this.cookieDomain),this.cookieSecure&&(window.cookieBanner_cookieSecure=this.cookieSecure),this.cookieExpiryDays&&(window.cookieBanner_cookieExpiryDays=this.cookieExpiryDays),this.devMode&&(window.cookieBanner_devMode=this.devMode),await i(),this.triggerInit()}triggerInit(){window.document.dispatchEvent(new Event(`CookieBannerReady`,{bubbles:!0,cancelable:!0}));let e=window.cookieBanner,t=window.__cookieEvents;!e||!t||e.cookieConsent.validateConsentCookie().then(n=>{if(!n)return;let r=e.cookieConsent.getConsentCookie();window.setTimeout(()=>this.emitCookieConsents({value:r}),0),this._cookieEventHandler&&t.off(`CookieManager.setCookie`,this._cookieEventHandler),this._cookieEventHandler=e=>this.emitCookieConsents(e),t.on(`CookieManager.setCookie`,this._cookieEventHandler)})}openModal(e){e.preventDefault(),window.cookieBanner?.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner?.openCookieModal())}render(){return this.triggerType===`link`?e._`<a href="#" class="pkt-link" aria-haspopup="dialog" @click=${this.openModal}
|
|
2
2
|
>${this.triggerText}</a
|
|
3
3
|
>`:this.triggerType===`footerlink`?e._`<a
|
|
4
4
|
href="#"
|