@oslokommune/punkt-elements 19.5.1 → 19.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/dist/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 +12 -3
- package/dist/checkbox-D69leWDh.cjs +40 -0
- package/dist/{checkbox-DKeErDb5.js → checkbox-Tq8ESzwH.js} +14 -11
- package/dist/{combobox-BKnHg_-E.js → combobox-CWzWHBaw.js} +14 -14
- package/dist/{combobox-C7FUvv5T.cjs → combobox-FCguoyDH.cjs} +6 -6
- package/dist/components/checkbox/checkbox.d.ts +2 -1
- package/dist/components/input-wrapper/input-wrapper.d.ts +4 -2
- package/dist/components/radiobutton/radiobutton.d.ts +2 -0
- package/dist/{datepicker-COFEJpB4.js → datepicker-Bs7Z3EFn.js} +6 -6
- package/dist/{datepicker-CeUpoQuG.cjs → datepicker-CWHYYj-H.cjs} +5 -5
- package/dist/docs/components/radio-checkbox-sizes.d.ts +10 -0
- package/dist/{fileupload-CUPl41uN.js → fileupload-BQFJx1ok.js} +1 -1
- package/dist/{fileupload-CaZGBvZr.cjs → fileupload-CMIFZWJ5.cjs} +1 -1
- package/dist/{header-CgP3-6-b.cjs → header-C4Uojzoy.cjs} +1 -1
- package/dist/{header-Cq6INZmI.js → header-Cc1Cy0U3.js} +1 -1
- package/dist/input-element-CSfDGslx.cjs +1 -0
- package/dist/{input-element-5hsxasU3.js → input-element-lLzfwdim.js} +198 -173
- package/dist/{input-wrapper-DACDx6Ie.js → input-wrapper-BoTugCvh.js} +33 -23
- package/dist/input-wrapper-J3mEKhvR.cjs +59 -0
- 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-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-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +11 -11
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.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/{radiobutton-oEYrBiT6.cjs → radiobutton-BPr22VmL.cjs} +4 -4
- package/dist/{radiobutton-DP791tUe.js → radiobutton-l_3oGDbb.js} +11 -8
- package/dist/{select-QobXCtIL.cjs → select-CZYQ5Dmx.cjs} +3 -3
- package/dist/{select-B97S4g1v.js → select-DYjKMmHa.js} +4 -4
- package/dist/shared-types/checkbox.d.ts +3 -1
- package/dist/shared-types/size.d.ts +2 -1
- package/dist/{textarea-DgW0hRV5.js → textarea-C2oaRlfb.js} +4 -4
- package/dist/{textarea-ZMbtZNp3.cjs → textarea-H1Lt2o6K.cjs} +3 -3
- package/dist/{textinput-s-qz2xSC.js → textinput-C0eu70sH.js} +4 -4
- package/dist/{textinput-DfT_1aGb.cjs → textinput-C2Tx-OrN.cjs} +3 -3
- package/dist/{timepicker-Crj4isb9.js → timepicker-B8TwchA2.js} +9 -9
- package/dist/{timepicker-BAa_VEnf.cjs → timepicker-DZG_gHIa.cjs} +8 -8
- package/package.json +2 -2
- package/src/components/checkbox/checkbox.test.ts +26 -0
- package/src/components/checkbox/checkbox.ts +9 -11
- package/src/components/combobox/combobox-handlers.ts +6 -6
- package/src/components/combobox/combobox-value.ts +1 -1
- package/src/components/combobox/combobox.ts +5 -5
- package/src/components/datepicker/datepicker.ts +4 -4
- package/src/components/input-wrapper/input-wrapper.test.ts +90 -0
- package/src/components/input-wrapper/input-wrapper.ts +23 -7
- package/src/components/input-wrapper/wrapper-parity.test.ts +9 -0
- package/src/components/radiobutton/radiobutton.test.ts +26 -0
- package/src/components/radiobutton/radiobutton.ts +6 -7
- package/src/components/select/select.ts +2 -2
- package/src/components/textarea/textarea.ts +2 -2
- package/src/components/textinput/textinput.ts +2 -2
- package/src/components/timepicker/timepicker.ts +7 -7
- package/dist/checkbox-DIyi1Cya.cjs +0 -40
- package/dist/input-element-Ctkz5fQk.cjs +0 -1
- package/dist/input-wrapper-Cf__-4E-.cjs +0 -59
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,34 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [19.6.0](https://github.com/oslokommune/punkt/compare/19.5.2...19.6.0) (2026-10-01)
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
* Kompakte størrelser for radio, checkbox og switch (#3687). - Checkbox, radio og switch får tre størrelser: medium, small, xsmall
|
|
12
|
+
- Om elementene er i input-wrapper arver de størrelsen til input-wrapper
|
|
13
|
+
- Selve input-elementet forandrer aldri størrelse, kun alt rundt
|
|
14
|
+
- Tile-varianter får høyde 56, 48 og 40 px
|
|
15
|
+
- Støtte for horisontal layout i input-wrapper
|
|
16
|
+
- I grupper skaleres også mellomrom med størrelsen
|
|
17
|
+
- Oppdatert docs med størrelse-seksjon
|
|
18
|
+
- Oppdatert alle relevante skills
|
|
19
|
+
|
|
20
|
+
Synlige _endringer_ (ikke nye ting) for brukere:
|
|
21
|
+
- Tile i størrelse medium er nå 56px istedenfor 60px
|
|
22
|
+
- Label i tile er nå fontvekt medium istedenfor light, for å stemme med Figma
|
|
23
|
+
- I input-wrapper har nå grupper med inputs noe romsligere mellomrom
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [19.5.2](https://github.com/oslokommune/punkt/compare/19.5.1...19.5.2) (2026-09-30)
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
* Radio+check mer som native, pluss aria-fiks i fieldset (#3686).
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
|
|
8
36
|
## [19.5.1](https://github.com/oslokommune/punkt/compare/19.5.0...19.5.1) (2026-09-30)
|
|
9
37
|
|
|
10
38
|
### Bug Fixes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropertyValues } from 'lit';
|
|
2
|
-
import { Booleanish } from '../shared-types';
|
|
2
|
+
import { Booleanish, TPktInputSize } from '../shared-types';
|
|
3
3
|
import { ElementProps } from '../types/typeUtils';
|
|
4
4
|
import { PktOptionsSlotController } from '../controllers/pkt-options-controller';
|
|
5
5
|
import { IPktStringsProps } from '../shared-strings';
|
|
@@ -68,8 +68,11 @@ export declare class PktInputElement<T = {}, TOption extends PktInputOption = Pk
|
|
|
68
68
|
/** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
|
|
69
69
|
requiredText?: string;
|
|
70
70
|
tagText: string | null;
|
|
71
|
-
inputSize:
|
|
71
|
+
inputSize: TPktInputSize | undefined;
|
|
72
72
|
dataTestid: string;
|
|
73
|
+
private formDisabled;
|
|
74
|
+
protected formDisabledCallback(disabled: boolean): void;
|
|
75
|
+
protected get isDisabled(): boolean;
|
|
73
76
|
protected effectiveCounter(derived: boolean): boolean;
|
|
74
77
|
protected effectiveHasFieldset(derived: boolean): boolean;
|
|
75
78
|
touched: boolean;
|
|
@@ -82,7 +85,7 @@ export declare class PktInputElement<T = {}, TOption extends PktInputOption = Pk
|
|
|
82
85
|
* @param input - The input element to validate (optional)
|
|
83
86
|
* @protected
|
|
84
87
|
*/
|
|
85
|
-
protected manageValidity(input?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
|
|
88
|
+
protected manageValidity(input?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, checkableGroup?: Array<PktInputElement | HTMLInputElement>): void;
|
|
86
89
|
/**
|
|
87
90
|
* Updates the form value for this input
|
|
88
91
|
* Handles both single values and arrays (for multi-select)
|
|
@@ -92,6 +95,11 @@ export declare class PktInputElement<T = {}, TOption extends PktInputOption = Pk
|
|
|
92
95
|
*/
|
|
93
96
|
protected setFormValue(value: string | string[]): void;
|
|
94
97
|
private radioGroupMembers;
|
|
98
|
+
private get isCheckable();
|
|
99
|
+
private checkableGroup;
|
|
100
|
+
private checkableValueMissing;
|
|
101
|
+
protected syncCheckedState(): void;
|
|
102
|
+
private validateCheckable;
|
|
95
103
|
/**
|
|
96
104
|
* Coordinates radio button group by unchecking other radios with the same name
|
|
97
105
|
* Only affects radio inputs with the same form owner
|
|
@@ -181,6 +189,7 @@ export declare class PktInputElement<T = {}, TOption extends PktInputOption = Pk
|
|
|
181
189
|
protected updated(_changedProperties: PropertyValues): void;
|
|
182
190
|
protected willUpdate(_changedProperties: PropertyValues): void;
|
|
183
191
|
private _didInitDerivedState;
|
|
192
|
+
private _defaultCheckedState;
|
|
184
193
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
185
194
|
}
|
|
186
195
|
export {};
|
|
@@ -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.inputSize=void 0,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${this.inputSize?` pkt-input-check--${this.inputSize}`:``}">
|
|
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,attribute:`input-size`})],a.prototype,`inputSize`,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,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,
|
|
@@ -16,13 +16,13 @@ var l = {
|
|
|
16
16
|
optionalTag: !1
|
|
17
17
|
}, u = class extends c {
|
|
18
18
|
constructor(...e) {
|
|
19
|
-
super(...e), this.inputRef = s(), this.value = "", this.checkHelptext = null, this.defaultChecked = l.defaultChecked, this.hasTile = l.hasTile, this.isSwitch = l.isSwitch, this.labelPosition = l.labelPosition, this.hideLabel = l.hideLabel, this.checked = null, this.indeterminate = l.indeterminate, this.type = "checkbox", this.tagText = null, this.optionalTag = l.optionalTag, this.requiredTag = l.requiredTag;
|
|
19
|
+
super(...e), this.inputRef = s(), this.value = "", this.checkHelptext = null, this.defaultChecked = l.defaultChecked, this.hasTile = l.hasTile, this.isSwitch = l.isSwitch, this.labelPosition = l.labelPosition, this.hideLabel = l.hideLabel, this.checked = null, this.indeterminate = l.indeterminate, this.type = "checkbox", this.inputSize = void 0, this.tagText = null, this.optionalTag = l.optionalTag, this.requiredTag = l.requiredTag;
|
|
20
20
|
}
|
|
21
21
|
connectedCallback() {
|
|
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
|
|
@@ -64,14 +64,14 @@ var l = {
|
|
|
64
64
|
</label>
|
|
65
65
|
`;
|
|
66
66
|
return e`
|
|
67
|
-
<div class="pkt-input-check">
|
|
67
|
+
<div class="pkt-input-check${this.inputSize ? ` pkt-input-check--${this.inputSize}` : ""}">
|
|
68
68
|
<div class=${t}>
|
|
69
69
|
${this.labelPosition === "left" ? f() : n}
|
|
70
70
|
<input
|
|
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
|
}
|
|
@@ -124,7 +124,10 @@ r([i({
|
|
|
124
124
|
})], u.prototype, "indeterminate", void 0), r([i({
|
|
125
125
|
type: String,
|
|
126
126
|
reflect: !0
|
|
127
|
-
})], u.prototype, "type", void 0), r([i({
|
|
127
|
+
})], u.prototype, "type", void 0), r([i({
|
|
128
|
+
type: String,
|
|
129
|
+
attribute: "input-size"
|
|
130
|
+
})], u.prototype, "inputSize", void 0), r([i({ type: String })], u.prototype, "tagText", void 0), r([i({ type: Boolean })], u.prototype, "optionalTag", void 0), r([i({ type: String })], u.prototype, "optionalText", void 0), r([i({ type: Boolean })], u.prototype, "requiredTag", void 0), r([i({ type: String })], u.prototype, "requiredText", void 0);
|
|
128
131
|
try {
|
|
129
132
|
t("pkt-checkbox")(u);
|
|
130
133
|
} catch {
|
|
@@ -8,9 +8,9 @@ import { n as u, t as d } from "./ref-CCSGk4MP.js";
|
|
|
8
8
|
import "./tag-Bns7Xj1O.js";
|
|
9
9
|
import { t as f } from "./repeat-CdxGS-_3.js";
|
|
10
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-
|
|
11
|
+
import { t as b } from "./input-element-lLzfwdim.js";
|
|
12
12
|
import { t as x } from "./pkt-options-controller-D7l18Iw0.js";
|
|
13
|
-
import { r as S } from "./input-wrapper-
|
|
13
|
+
import { r as S } from "./input-wrapper-BoTugCvh.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":
|
|
@@ -925,7 +925,7 @@ var M = class extends j {
|
|
|
925
925
|
.counterMaxLength=${this.maxlength ?? 0}
|
|
926
926
|
?hasError=${this.hasError}
|
|
927
927
|
?inline=${this.inline}
|
|
928
|
-
?disabled=${this.
|
|
928
|
+
?disabled=${this.isDisabled}
|
|
929
929
|
.errorMessage=${this.errorMessage}
|
|
930
930
|
?optionalTag=${this.optionalTag}
|
|
931
931
|
.optionalText=${this.optionalText}
|
|
@@ -946,7 +946,7 @@ 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
951
|
id=${l(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
|
|
952
952
|
role=${l(this._hasTextInput ? void 0 : "combobox")}
|
|
@@ -957,7 +957,7 @@ var M = class extends j {
|
|
|
957
957
|
aria-labelledby=${l(this._hasTextInput ? void 0 : `${this.id}-combobox-label`)}
|
|
958
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
959
|
aria-description=${l(this._selectionDescription || void 0)}
|
|
960
|
-
tabindex=${this._hasTextInput || this.
|
|
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,7 +983,7 @@ 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}
|
|
@@ -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)}
|
|
@@ -1,4 +1,4 @@
|
|
|
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-Ctkz5fQk.cjs"),l=require("./pkt-options-controller-CpEZcomb.cjs"),u=require("./input-wrapper-Cf__-4E-.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-J3mEKhvR.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
3
|
${r.n(this,[`helptext`])}
|
|
4
4
|
.strings=${this.strings}
|
|
@@ -13,7 +13,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
13
13
|
.counterMaxLength=${this.maxlength??0}
|
|
14
14
|
?hasError=${this.hasError}
|
|
15
15
|
?inline=${this.inline}
|
|
16
|
-
?disabled=${this.
|
|
16
|
+
?disabled=${this.isDisabled}
|
|
17
17
|
.errorMessage=${this.errorMessage}
|
|
18
18
|
?optionalTag=${this.optionalTag}
|
|
19
19
|
.optionalText=${this.optionalText}
|
|
@@ -28,7 +28,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
28
28
|
>
|
|
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.
|
|
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
32
|
id=${i.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
33
|
role=${i.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
34
|
aria-expanded=${i.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
@@ -38,7 +38,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
|
|
|
38
38
|
aria-labelledby=${i.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
39
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
40
|
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
41
|
-
tabindex=${this._hasTextInput||this.
|
|
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,7 +61,7 @@ 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}
|
|
@@ -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)}
|
|
@@ -2,7 +2,7 @@ import { PktInputElement } from '../../base-elements/input-element';
|
|
|
2
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
3
3
|
import { PropertyValues } from 'lit';
|
|
4
4
|
import { ElementProps } from '../../types/typeUtils';
|
|
5
|
-
import { TCheckboxLabelPosition } from '../../shared-types';
|
|
5
|
+
import { TCheckboxLabelPosition, TPktInputSize } from '../../shared-types';
|
|
6
6
|
type Props = ElementProps<PktCheckbox, 'checkHelptext' | 'defaultChecked' | 'hasTile' | 'isSwitch' | 'labelPosition' | 'hideLabel' | 'tagText' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText'>;
|
|
7
7
|
export declare class PktCheckbox extends PktInputElement<Props> {
|
|
8
8
|
inputRef: Ref<HTMLInputElement>;
|
|
@@ -16,6 +16,7 @@ export declare class PktCheckbox extends PktInputElement<Props> {
|
|
|
16
16
|
checked: boolean | string | null;
|
|
17
17
|
indeterminate: boolean | 'true' | 'false' | '';
|
|
18
18
|
type: string;
|
|
19
|
+
inputSize: TPktInputSize | undefined;
|
|
19
20
|
tagText: string | null;
|
|
20
21
|
optionalTag: boolean;
|
|
21
22
|
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
@@ -2,11 +2,11 @@ import { PktElementWithSlot } from '../../base-elements/element-with-slot';
|
|
|
2
2
|
import { IPktStringsProps } from '../../shared-strings';
|
|
3
3
|
import { PropertyValues } from 'lit';
|
|
4
4
|
import { ElementProps } from '../../types/typeUtils';
|
|
5
|
-
import { Booleanish } from '../../shared-types';
|
|
5
|
+
import { Booleanish, TLayout } from '../../shared-types';
|
|
6
6
|
import { FocusModalityController } from '../../controllers/focus-modality-controller';
|
|
7
7
|
type TCounterPosition = 'top' | 'bottom';
|
|
8
8
|
type TInputWrapperSize = 'small' | 'medium' | 'xsmall';
|
|
9
|
-
type Props = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'tagText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'> & IPktStringsProps<'forms' | 'validation'>;
|
|
9
|
+
type Props = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'tagText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'layout' | 'useWrapper' | 'role'> & IPktStringsProps<'forms' | 'validation'>;
|
|
10
10
|
export declare class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
11
11
|
/**
|
|
12
12
|
* Element attributes
|
|
@@ -34,12 +34,14 @@ export declare class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
34
34
|
inline: boolean;
|
|
35
35
|
ariaDescribedby: string | undefined;
|
|
36
36
|
hasFieldset: boolean;
|
|
37
|
+
layout: TLayout;
|
|
37
38
|
role: string | null;
|
|
38
39
|
useWrapper: Booleanish;
|
|
39
40
|
size: TInputWrapperSize;
|
|
40
41
|
protected updated(changedProperties: PropertyValues): void;
|
|
41
42
|
focusModality: FocusModalityController;
|
|
42
43
|
render(): import('lit-html').TemplateResult<1>;
|
|
44
|
+
private optionsClass;
|
|
43
45
|
private toggleDropdown;
|
|
44
46
|
private handleLabelClick;
|
|
45
47
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { PktInputElement } from '../../base-elements/input-element';
|
|
2
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
3
3
|
import { ElementProps } from '../../types/typeUtils';
|
|
4
|
+
import { TPktInputSize } from '../../shared-types';
|
|
4
5
|
type Props = ElementProps<PktRadioButton, 'checkHelptext' | 'defaultChecked' | 'hasTile' | 'tagText' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText'>;
|
|
5
6
|
export declare class PktRadioButton extends PktInputElement<Props> {
|
|
6
7
|
inputRef: Ref<HTMLInputElement>;
|
|
@@ -10,6 +11,7 @@ export declare class PktRadioButton extends PktInputElement<Props> {
|
|
|
10
11
|
hasTile: boolean;
|
|
11
12
|
checked: boolean | string | null;
|
|
12
13
|
type: string;
|
|
14
|
+
inputSize: TPktInputSize | undefined;
|
|
13
15
|
tagText: string | null;
|
|
14
16
|
optionalTag: boolean;
|
|
15
17
|
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
@@ -9,8 +9,8 @@ import { a as f, c as p, d as m, h, i as g, m as _, n as v, r as y, s as b, t as
|
|
|
9
9
|
import "./tag-Bns7Xj1O.js";
|
|
10
10
|
import { t as C } from "./repeat-CdxGS-_3.js";
|
|
11
11
|
import { n as w, t as T } from "./utils-BwF4QSrq.js";
|
|
12
|
-
import { t as E } from "./input-element-
|
|
13
|
-
import "./input-wrapper-
|
|
12
|
+
import { t as E } from "./input-element-lLzfwdim.js";
|
|
13
|
+
import "./input-wrapper-BoTugCvh.js";
|
|
14
14
|
//#region src/components/datepicker/date-tags.ts
|
|
15
15
|
var D = class extends o {
|
|
16
16
|
constructor(...e) {
|
|
@@ -943,7 +943,7 @@ var $ = class t extends E {
|
|
|
943
943
|
.max=${this.max}
|
|
944
944
|
.placeholder=${this.placeholder}
|
|
945
945
|
.readonly=${this.readonly}
|
|
946
|
-
.disabled=${this.
|
|
946
|
+
.disabled=${this.isDisabled}
|
|
947
947
|
.inputClasses=${this.inputClasses}
|
|
948
948
|
.inputSize=${this.inputSize}
|
|
949
949
|
.internals=${this.internals}
|
|
@@ -978,7 +978,7 @@ var $ = class t extends E {
|
|
|
978
978
|
.max=${this.max}
|
|
979
979
|
.placeholder=${this.placeholder}
|
|
980
980
|
.readonly=${this.readonly}
|
|
981
|
-
.disabled=${this.
|
|
981
|
+
.disabled=${this.isDisabled}
|
|
982
982
|
.showRangeLabels=${this.showRangeLabels}
|
|
983
983
|
.inputClasses=${this.inputClasses}
|
|
984
984
|
.inputSize=${this.inputSize}
|
|
@@ -1032,7 +1032,7 @@ var $ = class t extends E {
|
|
|
1032
1032
|
.max=${this.max}
|
|
1033
1033
|
.placeholder=${this.placeholder}
|
|
1034
1034
|
.readonly=${this.readonly}
|
|
1035
|
-
.disabled=${this.
|
|
1035
|
+
.disabled=${this.isDisabled}
|
|
1036
1036
|
.maxlength=${this.maxlength}
|
|
1037
1037
|
.inputClasses=${this.inputClasses}
|
|
1038
1038
|
.inputSize=${this.inputSize}
|
|
@@ -1091,7 +1091,7 @@ var $ = class t extends E {
|
|
|
1091
1091
|
?counter=${this.multiple && !!this.maxlength}
|
|
1092
1092
|
.counterCurrent=${this.value ? this._value.length : 0}
|
|
1093
1093
|
.counterMaxLength=${this.maxlength}
|
|
1094
|
-
?disabled=${this.
|
|
1094
|
+
?disabled=${this.isDisabled}
|
|
1095
1095
|
?hasError=${this.hasError}
|
|
1096
1096
|
?hasFieldset=${this.effectiveHasFieldset(!1)}
|
|
1097
1097
|
?inline=${this.inline}
|