@oslokommune/punkt-elements 16.7.1 → 16.7.3
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 +17 -0
- package/dist/accordionitem-_9AiCIvd.cjs +34 -0
- package/dist/{accordionitem-ZlaXvjt5.js → accordionitem-dCfSrxh5.js} +57 -55
- package/dist/alert-BtOk8yRH.cjs +33 -0
- package/dist/{alert-BuAXrnKl.js → alert-DlY2_grU.js} +48 -46
- package/dist/backlink-Ce5Vldop.js +49 -0
- package/dist/backlink-y3dwjKPC.cjs +13 -0
- package/dist/button-B_TXwNzt.cjs +27 -0
- package/dist/{button-DEyvt1LI.js → button-BiY-wlKF.js} +79 -77
- package/dist/calendar-B2pji2zn.cjs +90 -0
- package/dist/{calendar-S63oreVW.js → calendar-DhjQDC4C.js} +689 -687
- package/dist/card-BwMNB5Bb.cjs +87 -0
- package/dist/{card-DDiLfuO4.js → card-CGlmcMSR.js} +99 -97
- package/dist/checkbox-BsJZYA26.js +147 -0
- package/dist/checkbox-CTY8f_qn.cjs +31 -0
- package/dist/{combobox-BmxSecfE.js → combobox-DSB5WOxg.js} +223 -226
- package/dist/{combobox-Hb2V-fPX.cjs → combobox-DbICIgKG.cjs} +4 -4
- package/dist/consent-DkOQpbsg.cjs +11 -0
- package/dist/{consent-iXyx5v6J.js → consent-SNWV_mMU.js} +48 -46
- package/dist/datepicker-BEWl9iz3.cjs +273 -0
- package/dist/{datepicker-CZl7b8Na.js → datepicker-euHyzXnb.js} +341 -329
- package/dist/{heading-CKt7cVn7.js → heading-D2tVS6lS.js} +30 -28
- package/dist/heading-DrzbgDb6.cjs +1 -0
- package/dist/helptext-BKtU4mas.js +82 -0
- package/dist/helptext-DcRC7wW2.cjs +24 -0
- package/dist/icon-CxQcIa5F.js +105 -0
- package/dist/icon-q81vqPK_.cjs +9 -0
- package/dist/input-wrapper-Bs4CRNst.js +181 -0
- package/dist/input-wrapper-Bv9aqqVq.cjs +54 -0
- package/dist/link-C0rl-86s.cjs +7 -0
- package/dist/link-Cdqgl60z.js +55 -0
- package/dist/linkcard-Dimu7Rlx.cjs +13 -0
- package/dist/linkcard-Lbq_UhjZ.js +56 -0
- package/dist/{listbox-BQKDZvZn.js → listbox-Bia4_tvN.js} +131 -129
- package/dist/listbox-La2GZQei.cjs +106 -0
- package/dist/loader-D1ugDXGV.cjs +16 -0
- package/dist/{loader-Ci3CHU8k.js → loader-DyN6RGC5.js} +51 -49
- package/dist/messagebox-BGMVm2t9.js +71 -0
- package/dist/messagebox-M0yIgCz9.cjs +13 -0
- package/dist/modal-CMO1RtIi.cjs +36 -0
- package/dist/{modal-DzGe1g8Z.js → modal-DjPQDE-Z.js} +53 -51
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +2 -2
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +3 -4
- package/dist/pkt-backlink.cjs +1 -1
- package/dist/pkt-backlink.js +2 -3
- package/dist/pkt-breadcrumbs.cjs +11 -11
- package/dist/pkt-breadcrumbs.js +30 -28
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +3 -4
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +2 -3
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +2 -3
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +3 -4
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +3 -4
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +2 -3
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +7 -8
- package/dist/pkt-header.cjs +35 -35
- package/dist/pkt-header.js +224 -218
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +3 -4
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +3 -4
- package/dist/pkt-icon.cjs +1 -1
- package/dist/pkt-icon.js +3 -4
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +26 -26
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +2 -3
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +2 -3
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +3 -4
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +3 -4
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +3 -4
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +3 -4
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +3 -4
- package/dist/pkt-progressbar.cjs +1 -1
- package/dist/pkt-progressbar.js +2 -3
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +3 -4
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +3 -4
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +2 -2
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +3 -4
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +3 -4
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +3 -4
- package/dist/pkt-timepicker.cjs +16 -16
- package/dist/pkt-timepicker.js +91 -89
- package/dist/progressbar-BqlMzkM_.cjs +21 -0
- package/dist/{progressbar-By7e0lEI.js → progressbar-sbHDFC12.js} +88 -88
- package/dist/radiobutton-5ZqVVtTT.cjs +31 -0
- package/dist/{radiobutton-6frNG9J_.js → radiobutton-D8Ai8ETa.js} +44 -42
- package/dist/select-De-n8on9.js +230 -0
- package/dist/select-dTWibR6_.cjs +49 -0
- package/dist/tabitem-B9-jeV97.js +334 -0
- package/dist/tabitem-BnhzqfW3.cjs +65 -0
- package/dist/tag-CbwO8yvD.cjs +27 -0
- package/dist/{tag-BuCpqaks.js → tag-D4FI5t3y.js} +42 -40
- package/dist/textarea-BmLaKzsc.cjs +50 -0
- package/dist/{textarea-Bzuymclz.js → textarea-CMiSJaYL.js} +62 -60
- package/dist/textinput-em9y4yrL.cjs +70 -0
- package/dist/{textinput-9lHjs4ce.js → textinput-r8udK0IX.js} +57 -55
- package/package.json +2 -2
- package/src/components/accordion/accordion.ts +6 -1
- package/src/components/accordion/accordionitem.ts +6 -1
- package/src/components/alert/alert.ts +6 -1
- package/src/components/backlink/backlink.ts +6 -1
- package/src/components/breadcrumbs/breadcrumbs.ts +6 -1
- package/src/components/button/button.ts +6 -1
- package/src/components/calendar/calendar.ts +6 -1
- package/src/components/card/card.ts +6 -1
- package/src/components/checkbox/checkbox.ts +6 -1
- package/src/components/combobox/combobox.ts +6 -1
- package/src/components/consent/consent.ts +6 -1
- package/src/components/datepicker/date-tags.ts +6 -1
- package/src/components/datepicker/datepicker-multiple.ts +6 -1
- package/src/components/datepicker/datepicker-popup.ts +6 -1
- package/src/components/datepicker/datepicker-range.ts +6 -1
- package/src/components/datepicker/datepicker-single.ts +6 -1
- package/src/components/datepicker/datepicker.ts +6 -1
- package/src/components/header/header-service.ts +6 -1
- package/src/components/header/header-user-menu.ts +6 -1
- package/src/components/header/header.ts +6 -1
- package/src/components/heading/heading.ts +6 -1
- package/src/components/helptext/helptext.ts +6 -1
- package/src/components/icon/icon.ts +6 -1
- package/src/components/input-wrapper/input-wrapper.ts +6 -1
- package/src/components/link/link.ts +6 -1
- package/src/components/linkcard/linkcard.ts +6 -1
- package/src/components/listbox/listbox.ts +6 -1
- package/src/components/loader/loader.ts +6 -1
- package/src/components/messagebox/messagebox.ts +6 -1
- package/src/components/modal/modal.ts +6 -1
- package/src/components/progressbar/progressbar.ts +6 -1
- package/src/components/radiobutton/radiobutton.ts +6 -1
- package/src/components/select/select.ts +6 -1
- package/src/components/tabs/tabitem.ts +6 -1
- package/src/components/tabs/tabs.ts +6 -1
- package/src/components/tag/tag.ts +6 -1
- package/src/components/textarea/textarea.ts +6 -1
- package/src/components/textinput/textinput.ts +6 -1
- package/src/components/timepicker/timepicker.ts +6 -1
- package/dist/accordionitem-D1Agl1bB.cjs +0 -34
- package/dist/alert-DFkFNTxh.cjs +0 -33
- package/dist/backlink-EiAXUUZP.cjs +0 -13
- package/dist/backlink-V4DAt17e.js +0 -47
- package/dist/button-DYv5Dg4M.cjs +0 -27
- package/dist/calendar-HIE9nxcc.cjs +0 -90
- package/dist/card-CyeH6l1c.cjs +0 -87
- package/dist/checkbox-BLlwTABj.cjs +0 -31
- package/dist/checkbox-ejBUa5qQ.js +0 -145
- package/dist/consent-ruWAEVXW.cjs +0 -11
- package/dist/datepicker-D2H7U6MS.cjs +0 -273
- package/dist/heading-Cvz8m1xL.cjs +0 -1
- package/dist/helptext-5Mzp65-F.cjs +0 -24
- package/dist/helptext-jIoWRcCF.js +0 -80
- package/dist/icon-BlKA8YuW.js +0 -103
- package/dist/icon-Bqj9oBbl.cjs +0 -9
- package/dist/input-wrapper-B0MkQ0IZ.cjs +0 -54
- package/dist/input-wrapper-B2JpK016.js +0 -179
- package/dist/link-R_lNhViF.cjs +0 -7
- package/dist/link-Z_GizclR.js +0 -53
- package/dist/linkcard-BlQvdB1a.js +0 -54
- package/dist/linkcard-C7HbSLlX.cjs +0 -13
- package/dist/listbox-CGgV9MAe.cjs +0 -106
- package/dist/loader-e2gs_1xz.cjs +0 -16
- package/dist/messagebox-Bf-XMlvW.js +0 -69
- package/dist/messagebox-D67w71VX.cjs +0 -13
- package/dist/modal-CyvEkbfQ.cjs +0 -36
- package/dist/progressbar-DsJ2B9Vm.cjs +0 -21
- package/dist/radiobutton-Bv-BZ1Hw.cjs +0 -31
- package/dist/select-CXZt1nHS.js +0 -228
- package/dist/select-WFhS4Vfp.cjs +0 -49
- package/dist/tabitem-CB8wkKmv.js +0 -332
- package/dist/tabitem-DZpspU4Q.cjs +0 -65
- package/dist/tag-X6xdjR0N.cjs +0 -27
- package/dist/textarea-DoeHJ7HR.cjs +0 -50
- package/dist/textinput-BNsLd26i.cjs +0 -70
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { n as
|
|
2
|
-
import { o as
|
|
3
|
-
import { e as
|
|
1
|
+
import { n as p, t as M, A as b, b as d } from "./element-CPpT3rFQ.js";
|
|
2
|
+
import { o as r } from "./if-defined-B0krMLad.js";
|
|
3
|
+
import { e as A, n as O } from "./ref-Bg_Swj5w.js";
|
|
4
4
|
import { e as w } from "./class-map-CEnykyO_.js";
|
|
5
|
-
import { c as
|
|
6
|
-
import { f, g as
|
|
7
|
-
import { s as
|
|
8
|
-
import { r as
|
|
9
|
-
import { P as
|
|
10
|
-
import { P as
|
|
11
|
-
import "./input-wrapper-
|
|
12
|
-
import "./icon-
|
|
13
|
-
import "./tag-
|
|
14
|
-
const
|
|
15
|
-
switch (
|
|
5
|
+
import { c as D } from "./repeat-BD8TKgJb.js";
|
|
6
|
+
import { f as c, g as P, b as F, i as k, a as B, c as R } from "./listbox-Bia4_tvN.js";
|
|
7
|
+
import { s as E } from "./element-with-slot-Dqk6-TRR.js";
|
|
8
|
+
import { r as m } from "./state-C_1EOo3D.js";
|
|
9
|
+
import { P as q } from "./input-element-8nLwuQS4.js";
|
|
10
|
+
import { P as N } from "./pkt-options-controller-B5YalfCb.js";
|
|
11
|
+
import "./input-wrapper-Bs4CRNst.js";
|
|
12
|
+
import "./icon-CxQcIa5F.js";
|
|
13
|
+
import "./tag-D4FI5t3y.js";
|
|
14
|
+
const L = (a, t, e) => {
|
|
15
|
+
switch (a) {
|
|
16
16
|
case ",":
|
|
17
17
|
return e ? "addValue" : null;
|
|
18
18
|
case "Enter":
|
|
@@ -25,65 +25,65 @@ const j = (i, t, e) => {
|
|
|
25
25
|
default:
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
|
-
},
|
|
29
|
-
if (!
|
|
30
|
-
const
|
|
31
|
-
return !t.includes(
|
|
32
|
-
},
|
|
33
|
-
...
|
|
28
|
+
}, j = (a, t, e, s, i) => {
|
|
29
|
+
if (!a) return { action: "none", value: null };
|
|
30
|
+
const l = c(e, a);
|
|
31
|
+
return !t.includes(a) && !l ? s ? { action: "addUserValue", value: a } : i ? { action: "none", value: null } : { action: "removeValue", value: t[0] } : l && !t.includes(l.value) ? { action: "selectOption", value: l.value } : { action: "none", value: null };
|
|
32
|
+
}, K = (a, t, e, s, i) => a.trim().toLowerCase() ? {
|
|
33
|
+
...P(a, t, e, s),
|
|
34
34
|
shouldRemoveValue: !1,
|
|
35
35
|
shouldResetInput: !1
|
|
36
36
|
} : {
|
|
37
37
|
addValueText: null,
|
|
38
38
|
userInfoMessage: "",
|
|
39
|
-
shouldRemoveValue: !
|
|
39
|
+
shouldRemoveValue: !i && !!t[0],
|
|
40
40
|
shouldResetInput: !0
|
|
41
|
-
},
|
|
42
|
-
const s =
|
|
43
|
-
return e === "label" && (s != null && s.label) ? s.label :
|
|
44
|
-
},
|
|
45
|
-
markOptionSelected(
|
|
41
|
+
}, $ = (a, t, e) => {
|
|
42
|
+
const s = c(t, a);
|
|
43
|
+
return e === "label" && (s != null && s.label) ? s.label : a;
|
|
44
|
+
}, x = {
|
|
45
|
+
markOptionSelected(a, t) {
|
|
46
46
|
if (t) {
|
|
47
|
-
for (const e of
|
|
47
|
+
for (const e of a)
|
|
48
48
|
if (e.value === t) {
|
|
49
49
|
e.selected = !0;
|
|
50
50
|
break;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
|
-
markOptionDeselected(
|
|
54
|
+
markOptionDeselected(a, t) {
|
|
55
55
|
if (t) {
|
|
56
|
-
for (const e of
|
|
56
|
+
for (const e of a)
|
|
57
57
|
if (e.value === t) {
|
|
58
58
|
e.selected = !1;
|
|
59
59
|
break;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
|
-
markAllSelected(
|
|
64
|
-
for (const t of
|
|
63
|
+
markAllSelected(a) {
|
|
64
|
+
for (const t of a)
|
|
65
65
|
t.selected = !0;
|
|
66
66
|
},
|
|
67
|
-
markAllDeselected(
|
|
68
|
-
for (const t of
|
|
67
|
+
markAllDeselected(a) {
|
|
68
|
+
for (const t of a)
|
|
69
69
|
t.selected = !1;
|
|
70
70
|
},
|
|
71
|
-
removeUserAddedOptions(
|
|
72
|
-
return
|
|
71
|
+
removeUserAddedOptions(a) {
|
|
72
|
+
return a.filter((t) => !t.userAdded);
|
|
73
73
|
}
|
|
74
74
|
}, C = {
|
|
75
|
-
parseOptionsFromSlot(
|
|
75
|
+
parseOptionsFromSlot(a) {
|
|
76
76
|
const t = [];
|
|
77
|
-
return
|
|
77
|
+
return a.forEach((e) => {
|
|
78
78
|
if (!e.textContent && !e.getAttribute("value")) return;
|
|
79
79
|
const s = {
|
|
80
80
|
value: e.getAttribute("value") || e.textContent || "",
|
|
81
81
|
label: e.textContent || e.getAttribute("value") || ""
|
|
82
82
|
};
|
|
83
|
-
e.getAttribute("data-prefix") && (s.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (s.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (s.description = e.getAttribute("description") || void 0), s.fulltext =
|
|
83
|
+
e.getAttribute("data-prefix") && (s.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (s.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (s.description = e.getAttribute("description") || void 0), s.fulltext = F(s), t.push(s);
|
|
84
84
|
}), t;
|
|
85
85
|
}
|
|
86
|
-
},
|
|
86
|
+
}, V = {
|
|
87
87
|
/**
|
|
88
88
|
* Ensures options have labels and fulltext set.
|
|
89
89
|
* Also syncs selected state with current values.
|
|
@@ -91,31 +91,31 @@ const j = (i, t, e) => {
|
|
|
91
91
|
* IMPORTANT: Mutates options in place to preserve referential identity
|
|
92
92
|
* between this._options and this.options in the Lit component.
|
|
93
93
|
*/
|
|
94
|
-
syncOptionsWithValues(
|
|
94
|
+
syncOptionsWithValues(a, t) {
|
|
95
95
|
const e = [...t];
|
|
96
|
-
return
|
|
97
|
-
s.value && !s.label && (s.label = s.value), s.selected && !e.includes(s.value) && e.push(s.value), s.fulltext =
|
|
98
|
-
}), { options:
|
|
96
|
+
return a.forEach((s) => {
|
|
97
|
+
s.value && !s.label && (s.label = s.value), s.selected && !e.includes(s.value) && e.push(s.value), s.fulltext = F(s), s.selected = s.selected || e.includes(s.value);
|
|
98
|
+
}), { options: a, newValues: e };
|
|
99
99
|
},
|
|
100
100
|
/**
|
|
101
101
|
* Merges user-added options with new options, preserving user additions.
|
|
102
102
|
*/
|
|
103
|
-
mergeWithUserAdded(
|
|
104
|
-
return [...t.filter((
|
|
105
|
-
(
|
|
106
|
-
), ...
|
|
103
|
+
mergeWithUserAdded(a, t) {
|
|
104
|
+
return [...t.filter((i) => (i == null ? void 0 : i.userAdded) && i.selected).filter(
|
|
105
|
+
(i) => !(Array.isArray(a) ? a : []).some((l) => l.value === i.value)
|
|
106
|
+
), ...a];
|
|
107
107
|
}
|
|
108
|
-
},
|
|
109
|
-
props:
|
|
108
|
+
}, W = { displayValueAs: { default: "label" } }, G = {
|
|
109
|
+
props: W
|
|
110
110
|
};
|
|
111
|
-
var
|
|
112
|
-
for (var
|
|
113
|
-
(o =
|
|
114
|
-
return
|
|
111
|
+
var J = Object.defineProperty, h = (a, t, e, s) => {
|
|
112
|
+
for (var i = void 0, l = a.length - 1, o; l >= 0; l--)
|
|
113
|
+
(o = a[l]) && (i = o(t, e, i) || i);
|
|
114
|
+
return i && J(t, e, i), i;
|
|
115
115
|
};
|
|
116
|
-
class n extends
|
|
116
|
+
class n extends q {
|
|
117
117
|
constructor() {
|
|
118
|
-
super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs =
|
|
118
|
+
super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = G.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._internalValueSync = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = A(), this.triggerRef = A(), this.listboxRef = A(), this.optionsController = new N(this);
|
|
119
119
|
}
|
|
120
120
|
get _hasTextInput() {
|
|
121
121
|
return this.typeahead || this.allowUserInput;
|
|
@@ -142,7 +142,7 @@ class n extends N {
|
|
|
142
142
|
* Updates the _maxIsReached state flag.
|
|
143
143
|
*/
|
|
144
144
|
updateMaxReached() {
|
|
145
|
-
this._maxIsReached =
|
|
145
|
+
this._maxIsReached = k(this._value.length, this.maxlength);
|
|
146
146
|
}
|
|
147
147
|
/**
|
|
148
148
|
* Syncs the public value property from internal _value state and dispatches
|
|
@@ -150,10 +150,10 @@ class n extends N {
|
|
|
150
150
|
* to prevent array→string reflect cascades.
|
|
151
151
|
*/
|
|
152
152
|
syncValueAndDispatch(t) {
|
|
153
|
-
const e = this._value, s = this.multiple ? e.join(",") : e[0] || "",
|
|
154
|
-
if (s !==
|
|
155
|
-
const
|
|
156
|
-
this.onChange(
|
|
153
|
+
const e = this._value, s = this.multiple ? e.join(",") : e[0] || "", i = Array.isArray(this.value) ? this.value.join(",") : String(this.value || "");
|
|
154
|
+
if (s !== i && (this._internalValueSync = !0, this.value = s), (t == null ? void 0 : t.join(",")) !== e.join(",")) {
|
|
155
|
+
const l = this.multiple ? [...e] : e[0] || "";
|
|
156
|
+
this.onChange(l);
|
|
157
157
|
} else e.length === 0 && t && t.length > 0 && this.clearInputValue();
|
|
158
158
|
}
|
|
159
159
|
/**
|
|
@@ -175,90 +175,90 @@ class n extends N {
|
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
177
|
h([
|
|
178
|
-
|
|
178
|
+
p({ type: String, reflect: !0 })
|
|
179
179
|
], n.prototype, "value");
|
|
180
180
|
h([
|
|
181
|
-
|
|
181
|
+
p({ type: Array })
|
|
182
182
|
], n.prototype, "options");
|
|
183
183
|
h([
|
|
184
|
-
|
|
184
|
+
p({ type: Array, attribute: "default-options" })
|
|
185
185
|
], n.prototype, "defaultOptions");
|
|
186
186
|
h([
|
|
187
|
-
|
|
187
|
+
p({ type: Boolean, attribute: "allow-user-input" })
|
|
188
188
|
], n.prototype, "allowUserInput");
|
|
189
189
|
h([
|
|
190
|
-
|
|
190
|
+
p({ type: Boolean })
|
|
191
191
|
], n.prototype, "typeahead");
|
|
192
192
|
h([
|
|
193
|
-
|
|
193
|
+
p({ type: Boolean, attribute: "include-search" })
|
|
194
194
|
], n.prototype, "includeSearch");
|
|
195
195
|
h([
|
|
196
|
-
|
|
196
|
+
p({ type: String, attribute: "search-placeholder" })
|
|
197
197
|
], n.prototype, "searchPlaceholder");
|
|
198
198
|
h([
|
|
199
|
-
|
|
199
|
+
p({ type: Boolean })
|
|
200
200
|
], n.prototype, "multiple");
|
|
201
201
|
h([
|
|
202
|
-
|
|
202
|
+
p({ type: Number })
|
|
203
203
|
], n.prototype, "maxlength");
|
|
204
204
|
h([
|
|
205
|
-
|
|
205
|
+
p({ type: String, attribute: "display-value-as" })
|
|
206
206
|
], n.prototype, "displayValueAs");
|
|
207
207
|
h([
|
|
208
|
-
|
|
208
|
+
p({ type: String, attribute: "tag-placement" })
|
|
209
209
|
], n.prototype, "tagPlacement");
|
|
210
210
|
h([
|
|
211
|
-
|
|
211
|
+
p({ type: Boolean, attribute: "open" })
|
|
212
212
|
], n.prototype, "isOpen");
|
|
213
213
|
h([
|
|
214
|
-
|
|
214
|
+
m()
|
|
215
215
|
], n.prototype, "_options");
|
|
216
216
|
h([
|
|
217
|
-
|
|
217
|
+
m()
|
|
218
218
|
], n.prototype, "_value");
|
|
219
219
|
h([
|
|
220
|
-
|
|
220
|
+
m()
|
|
221
221
|
], n.prototype, "_isOptionsOpen");
|
|
222
222
|
h([
|
|
223
|
-
|
|
223
|
+
m()
|
|
224
224
|
], n.prototype, "_userInfoMessage");
|
|
225
225
|
h([
|
|
226
|
-
|
|
226
|
+
m()
|
|
227
227
|
], n.prototype, "_addValueText");
|
|
228
228
|
h([
|
|
229
|
-
|
|
229
|
+
m()
|
|
230
230
|
], n.prototype, "_maxIsReached");
|
|
231
231
|
h([
|
|
232
|
-
|
|
232
|
+
m()
|
|
233
233
|
], n.prototype, "_search");
|
|
234
234
|
h([
|
|
235
|
-
|
|
235
|
+
m()
|
|
236
236
|
], n.prototype, "_inputFocus");
|
|
237
|
-
class
|
|
237
|
+
class H extends n {
|
|
238
238
|
toggleValue(t) {
|
|
239
239
|
var T, S;
|
|
240
240
|
if (this.disabled) return;
|
|
241
241
|
this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
|
|
242
|
-
const e = ((T =
|
|
243
|
-
let
|
|
244
|
-
|
|
242
|
+
const e = ((T = c(this.options, t)) == null ? void 0 : T.value) || null, s = this._value.includes(t || e || ""), i = !!e, l = ((S = this._options.find((U) => U.value === t)) == null ? void 0 : S.disabled) || !1, o = !(t != null && t.trim()), u = !this.multiple, _ = this.multiple, v = k(this._value.length, this.maxlength);
|
|
243
|
+
let f = !1, y = !0, g = "", I = "";
|
|
244
|
+
l || (!i && this.allowUserInput && !o ? (this.addNewUserValue(t), g = "Ny verdi lagt til", f = _) : !i && !this.allowUserInput ? (u && this._value[0] && this.removeValue(this._value[0]), y = !1, f = !0, g = "Ingen treff i søket") : s ? (this.removeValue(e), f = !0, u && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : o && u ? (this.removeAllSelected(), f = !0) : u ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e), f = !1) : _ && !v ? (this.setSelected(e), f = !0) : _ && v ? (g = "Maks antall valg nådd", y = !1, I = t) : (u && this.removeAllSelected(), g = "Ingen gyldig verdi valgt", y = !1, f = !0, I = t), this._isOptionsOpen = f, f || (u && this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
|
|
245
245
|
this.focusTrigger();
|
|
246
|
-
}, 0)), this._userInfoMessage = g, this._search =
|
|
246
|
+
}, 0)), this._userInfoMessage = g, this._search = I || "", this.resetComboboxInput(y), _ && this.updateMaxReached());
|
|
247
247
|
}
|
|
248
248
|
setSelected(t) {
|
|
249
249
|
if (!this._value.includes(t)) {
|
|
250
|
-
if (this.multiple &&
|
|
250
|
+
if (this.multiple && k(this._value.length, this.maxlength)) {
|
|
251
251
|
this._userInfoMessage = "Maks antall valg nådd";
|
|
252
252
|
return;
|
|
253
253
|
}
|
|
254
|
-
!this.multiple && this.removeAllSelected(), this._value = t ? [...this._value, t] : this._value,
|
|
254
|
+
!this.multiple && this.removeAllSelected(), this._value = t ? [...this._value, t] : this._value, x.markOptionSelected(this._options, t), this.resetComboboxInput(!0);
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
257
|
removeSelected(t) {
|
|
258
258
|
if (!t) return;
|
|
259
259
|
this._value = this._value.filter((s) => s !== t);
|
|
260
|
-
const e =
|
|
261
|
-
e && (
|
|
260
|
+
const e = c(this.options, t);
|
|
261
|
+
e && (x.markOptionDeselected(this.options, t), e.userAdded ? (this._options = [...this._options.filter((s) => s.value !== t)], this.options = [...this.options.filter((s) => s.value !== t)]) : this._options.some((s) => s.value === t) || (this._options = [...this._options, e]));
|
|
262
262
|
}
|
|
263
263
|
addAllOptions() {
|
|
264
264
|
if (this.multiple) {
|
|
@@ -266,11 +266,11 @@ class z extends n {
|
|
|
266
266
|
this._userInfoMessage = "For mange valgt";
|
|
267
267
|
return;
|
|
268
268
|
}
|
|
269
|
-
this._value = this._options.map((t) => t.value),
|
|
269
|
+
this._value = this._options.map((t) => t.value), x.markAllSelected(this._options), this.requestUpdate();
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
removeAllSelected() {
|
|
273
|
-
this._value = [],
|
|
273
|
+
this._value = [], x.markAllDeselected(this._options), this._options = x.removeUserAddedOptions(this._options), this.requestUpdate();
|
|
274
274
|
}
|
|
275
275
|
addValue() {
|
|
276
276
|
var e;
|
|
@@ -288,8 +288,8 @@ class z extends n {
|
|
|
288
288
|
if (!t || t.trim() === "") return;
|
|
289
289
|
if (!this.multiple)
|
|
290
290
|
this._value[0] && this.removeSelected(this._value[0]), this._value = [t];
|
|
291
|
-
else if (!
|
|
292
|
-
if (
|
|
291
|
+
else if (!c(this.options, t)) {
|
|
292
|
+
if (k(this._value.length, this.maxlength)) return;
|
|
293
293
|
this._value = [...this._value, t];
|
|
294
294
|
}
|
|
295
295
|
const e = { value: t, label: t, userAdded: !0, selected: !0 };
|
|
@@ -298,7 +298,7 @@ class z extends n {
|
|
|
298
298
|
}, 0)), this.requestUpdate();
|
|
299
299
|
}
|
|
300
300
|
resetComboboxInput(t = !0) {
|
|
301
|
-
this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && t && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ?
|
|
301
|
+
this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && t && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ? $(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this._options = [...this.options];
|
|
302
302
|
}
|
|
303
303
|
removeLastValue(t) {
|
|
304
304
|
if (this._value.length === 0) return;
|
|
@@ -307,15 +307,15 @@ class z extends n {
|
|
|
307
307
|
e && this.removeSelected(e), this.updateMaxReached();
|
|
308
308
|
}
|
|
309
309
|
}
|
|
310
|
-
class
|
|
310
|
+
class z extends H {
|
|
311
311
|
handleInput(t) {
|
|
312
312
|
if (t.stopPropagation(), t.stopImmediatePropagation(), this.disabled) return;
|
|
313
313
|
this.touched = !0;
|
|
314
314
|
const e = t.target;
|
|
315
315
|
if (this._search = e.value, this.checkForMatches(), this.typeahead)
|
|
316
316
|
if (this._search) {
|
|
317
|
-
const { filtered: s, suggestion:
|
|
318
|
-
this._options = s, t.inputType !== "deleteContentBackward" && (
|
|
317
|
+
const { filtered: s, suggestion: i } = B(this.options, this._search);
|
|
318
|
+
this._options = s, t.inputType !== "deleteContentBackward" && (i != null && i.label) && this.inputRef.value && this.inputRef.value.type !== "hidden" && (e.value = i.label, window.setTimeout(
|
|
319
319
|
() => e.setSelectionRange(this._search.length, e.value.length),
|
|
320
320
|
0
|
|
321
321
|
), e.selectionDirection = "backward");
|
|
@@ -328,7 +328,7 @@ class Q extends z {
|
|
|
328
328
|
this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
|
|
329
329
|
return;
|
|
330
330
|
}
|
|
331
|
-
!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value =
|
|
331
|
+
!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = $(
|
|
332
332
|
this._value[0],
|
|
333
333
|
this.options,
|
|
334
334
|
this.displayValueAs
|
|
@@ -336,10 +336,10 @@ class Q extends z {
|
|
|
336
336
|
}
|
|
337
337
|
}
|
|
338
338
|
handleFocusOut(t) {
|
|
339
|
-
var
|
|
339
|
+
var i, l;
|
|
340
340
|
if (this.disabled || !this._isOptionsOpen) return;
|
|
341
341
|
const e = t.relatedTarget;
|
|
342
|
-
((
|
|
342
|
+
((i = e == null ? void 0 : e.closest("pkt-combobox")) == null ? void 0 : i.id) === this.id || ((l = t.target) == null ? void 0 : l.getAttribute("data-focusfix")) === this.id || e === this.inputRef.value || e === this.triggerRef.value || this.closeAndProcessInput();
|
|
343
343
|
}
|
|
344
344
|
/**
|
|
345
345
|
* Shared close logic used by both focusout and outside-click handlers.
|
|
@@ -350,7 +350,7 @@ class Q extends z {
|
|
|
350
350
|
const t = this.inputRef.value.value;
|
|
351
351
|
if (this.multiple) {
|
|
352
352
|
if (t !== "") {
|
|
353
|
-
const { action: e, value: s } =
|
|
353
|
+
const { action: e, value: s } = j(
|
|
354
354
|
t,
|
|
355
355
|
this._value,
|
|
356
356
|
this.options,
|
|
@@ -372,10 +372,10 @@ class Q extends z {
|
|
|
372
372
|
} else if (!t)
|
|
373
373
|
this._value[0] && this.removeSelected(this._value[0]);
|
|
374
374
|
else {
|
|
375
|
-
const e =
|
|
375
|
+
const e = c(this.options, t);
|
|
376
376
|
e && e.value !== this._value[0] ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e.value)) : !e && this.allowUserInput && (this._value[0] && this.removeSelected(this._value[0]), this.addNewUserValue(t));
|
|
377
377
|
}
|
|
378
|
-
!this.multiple && this._value[0] ? this.inputRef.value.value =
|
|
378
|
+
!this.multiple && this._value[0] ? this.inputRef.value.value = $(
|
|
379
379
|
this._value[0],
|
|
380
380
|
this.options,
|
|
381
381
|
this.displayValueAs
|
|
@@ -430,7 +430,7 @@ class Q extends z {
|
|
|
430
430
|
t.stopPropagation(), this._search = t.detail.toLowerCase(), this.checkForMatches();
|
|
431
431
|
}
|
|
432
432
|
handleInputKeydown(t) {
|
|
433
|
-
var s,
|
|
433
|
+
var s, i, l;
|
|
434
434
|
if (t.key === "Backspace") {
|
|
435
435
|
const o = !((s = this.inputRef.value) != null && s.value);
|
|
436
436
|
!this._search && o && this.multiple && this._value.length > 0 && this.removeLastValue(t);
|
|
@@ -443,9 +443,9 @@ class Q extends z {
|
|
|
443
443
|
return;
|
|
444
444
|
}
|
|
445
445
|
}
|
|
446
|
-
const e =
|
|
446
|
+
const e = L(t.key, t.shiftKey, this.multiple);
|
|
447
447
|
if (e && !(t.key === "Tab" && !this._isOptionsOpen)) {
|
|
448
|
-
if (e === "focusListbox" && t.key === "Tab" && !((
|
|
448
|
+
if (e === "focusListbox" && t.key === "Tab" && !((i = this.listboxRef.value) == null ? void 0 : i.querySelector(
|
|
449
449
|
'[role="option"]:not([data-disabled]), [data-type="new-option"]'
|
|
450
450
|
))) {
|
|
451
451
|
this.closeAndProcessInput();
|
|
@@ -456,7 +456,7 @@ class Q extends z {
|
|
|
456
456
|
this.addValue();
|
|
457
457
|
break;
|
|
458
458
|
case "focusListbox":
|
|
459
|
-
(
|
|
459
|
+
(l = this.listboxRef.value) == null || l.focusFirstOrSelectedOption();
|
|
460
460
|
break;
|
|
461
461
|
case "closeOptions":
|
|
462
462
|
this._isOptionsOpen = !1;
|
|
@@ -473,12 +473,12 @@ class Q extends z {
|
|
|
473
473
|
);
|
|
474
474
|
}
|
|
475
475
|
focusTag(t) {
|
|
476
|
-
var
|
|
476
|
+
var i;
|
|
477
477
|
const e = this.getInsideTags();
|
|
478
|
-
e.forEach((
|
|
479
|
-
|
|
478
|
+
e.forEach((l, o) => {
|
|
479
|
+
l.buttonTabindex = o === t ? 0 : -1;
|
|
480
480
|
});
|
|
481
|
-
const s = (
|
|
481
|
+
const s = (i = e[t]) == null ? void 0 : i.querySelector("button");
|
|
482
482
|
s == null || s.focus();
|
|
483
483
|
}
|
|
484
484
|
resetTagTabindices() {
|
|
@@ -489,8 +489,8 @@ class Q extends z {
|
|
|
489
489
|
handleTagKeydown(t, e) {
|
|
490
490
|
t.stopPropagation();
|
|
491
491
|
const s = () => {
|
|
492
|
-
var
|
|
493
|
-
this.resetTagTabindices(), this._hasTextInput && this.inputRef.value ? this.inputRef.value.focus() : (
|
|
492
|
+
var i;
|
|
493
|
+
this.resetTagTabindices(), this._hasTextInput && this.inputRef.value ? this.inputRef.value.focus() : (i = this.triggerRef.value) == null || i.focus();
|
|
494
494
|
};
|
|
495
495
|
switch (t.key) {
|
|
496
496
|
case "ArrowLeft":
|
|
@@ -503,8 +503,8 @@ class Q extends z {
|
|
|
503
503
|
case "Delete":
|
|
504
504
|
t.preventDefault();
|
|
505
505
|
{
|
|
506
|
-
const
|
|
507
|
-
this.removeSelected(
|
|
506
|
+
const i = this._value[e], l = e >= this._value.length - 1 ? e - 1 : e;
|
|
507
|
+
this.removeSelected(i), l >= 0 ? (this.requestUpdate(), this.updateComplete.then(() => this.focusTag(l))) : s();
|
|
508
508
|
}
|
|
509
509
|
break;
|
|
510
510
|
case "Tab":
|
|
@@ -517,7 +517,7 @@ class Q extends z {
|
|
|
517
517
|
}
|
|
518
518
|
checkForMatches() {
|
|
519
519
|
var s;
|
|
520
|
-
const t = ((s = this.inputRef.value) == null ? void 0 : s.value) || this._search || "", e =
|
|
520
|
+
const t = ((s = this.inputRef.value) == null ? void 0 : s.value) || this._search || "", e = K(
|
|
521
521
|
t,
|
|
522
522
|
this._value,
|
|
523
523
|
this.options,
|
|
@@ -531,78 +531,73 @@ class Q extends z {
|
|
|
531
531
|
this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage;
|
|
532
532
|
}
|
|
533
533
|
}
|
|
534
|
-
|
|
535
|
-
for (var l = s > 1 ? void 0 : s ? X(t, e) : t, a = i.length - 1, o; a >= 0; a--)
|
|
536
|
-
(o = i[a]) && (l = o(l) || l);
|
|
537
|
-
return l;
|
|
538
|
-
};
|
|
539
|
-
let F = class extends Q {
|
|
534
|
+
class Q extends z {
|
|
540
535
|
constructor() {
|
|
541
|
-
super(...arguments), this.handleBodyClick = (
|
|
542
|
-
this._isOptionsOpen && !this.contains(
|
|
536
|
+
super(...arguments), this.handleBodyClick = (t) => {
|
|
537
|
+
this._isOptionsOpen && !this.contains(t.target) && this.closeAndProcessInput();
|
|
543
538
|
};
|
|
544
539
|
}
|
|
545
540
|
// Lifecycle methods
|
|
546
541
|
connectedCallback() {
|
|
547
|
-
var
|
|
542
|
+
var t, e;
|
|
548
543
|
if (super.connectedCallback(), document == null || document.body.addEventListener("click", this.handleBodyClick), this._options = [], this.defaultOptions && this.defaultOptions.length) {
|
|
549
|
-
const
|
|
550
|
-
this.options = [...
|
|
544
|
+
const s = ((t = this.options) == null ? void 0 : t.filter((i) => i.userAdded)) || [];
|
|
545
|
+
this.options = [...s, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
|
|
551
546
|
}
|
|
552
|
-
if ((
|
|
553
|
-
const
|
|
554
|
-
|
|
547
|
+
if ((e = this.optionsController) != null && e.nodes && this.optionsController.nodes.length) {
|
|
548
|
+
const s = C.parseOptionsFromSlot(this.optionsController.nodes);
|
|
549
|
+
s.length && (this.options = [...s], this._options = [...s], this._optionsFromSlot = !0, this._lastSlotGeneration = this.optionsController.generation);
|
|
555
550
|
}
|
|
556
551
|
}
|
|
557
|
-
willUpdate(
|
|
552
|
+
willUpdate(t) {
|
|
558
553
|
if (this._optionsFromSlot && this.optionsController) {
|
|
559
|
-
const
|
|
560
|
-
if (
|
|
561
|
-
this._lastSlotGeneration =
|
|
562
|
-
const
|
|
563
|
-
this.options = [...
|
|
554
|
+
const e = this.optionsController.generation;
|
|
555
|
+
if (e !== this._lastSlotGeneration) {
|
|
556
|
+
this._lastSlotGeneration = e;
|
|
557
|
+
const s = C.parseOptionsFromSlot(this.optionsController.nodes), i = this._options.filter((l) => l.userAdded);
|
|
558
|
+
this.options = [...i, ...s];
|
|
564
559
|
}
|
|
565
560
|
}
|
|
566
|
-
super.willUpdate(
|
|
561
|
+
super.willUpdate(t);
|
|
567
562
|
}
|
|
568
563
|
disconnectedCallback() {
|
|
569
564
|
super.disconnectedCallback(), document == null || document.body.removeEventListener("click", this.handleBodyClick);
|
|
570
565
|
}
|
|
571
|
-
firstUpdated(
|
|
572
|
-
this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(
|
|
573
|
-
}
|
|
574
|
-
updated(
|
|
575
|
-
|
|
576
|
-
const
|
|
577
|
-
if (
|
|
578
|
-
this._internalValueSync = !1,
|
|
579
|
-
else if (
|
|
580
|
-
const l = [...this._value],
|
|
581
|
-
|
|
582
|
-
} else
|
|
583
|
-
if (
|
|
584
|
-
const l = (Array.isArray(this.options) ? this.options : []).filter((
|
|
566
|
+
firstUpdated(t) {
|
|
567
|
+
this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(t);
|
|
568
|
+
}
|
|
569
|
+
updated(t) {
|
|
570
|
+
t.has("isOpen") && (this._isOptionsOpen = this.isOpen);
|
|
571
|
+
const e = t.has("value"), s = t.has("_value");
|
|
572
|
+
if (e && this._internalValueSync)
|
|
573
|
+
this._internalValueSync = !1, s && this.syncValueAndDispatch(t.get("_value"));
|
|
574
|
+
else if (e) {
|
|
575
|
+
const l = [...this._value], o = this.parseValue();
|
|
576
|
+
o.join(",") !== this._value.join(",") && (this._value = o), this.updateMaxReached(), this.syncValueAndDispatch(l);
|
|
577
|
+
} else s && this.syncValueAndDispatch(t.get("_value"));
|
|
578
|
+
if (t.has("defaultOptions") && this.defaultOptions.length) {
|
|
579
|
+
const l = (Array.isArray(this.options) ? this.options : []).filter((o) => o.userAdded) || [];
|
|
585
580
|
this.options = [...l, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
|
|
586
581
|
}
|
|
587
|
-
if (
|
|
588
|
-
const l =
|
|
589
|
-
this._options =
|
|
590
|
-
const
|
|
591
|
-
if (this._options =
|
|
592
|
-
const
|
|
593
|
-
this._value =
|
|
582
|
+
if (t.has("options")) {
|
|
583
|
+
const l = t.get("options") || this._options || [], o = V.mergeWithUserAdded(this.options, l);
|
|
584
|
+
this._options = o, o.length > this.options.length && (this.options = o);
|
|
585
|
+
const u = V.syncOptionsWithValues(this._options, this._value);
|
|
586
|
+
if (this._options = u.options, u.newValues.length > this._value.length) {
|
|
587
|
+
const _ = [...this._value];
|
|
588
|
+
this._value = u.newValues, this.syncValueAndDispatch(_);
|
|
594
589
|
}
|
|
595
590
|
}
|
|
596
|
-
if (
|
|
591
|
+
if (t.has("_search") && this.dispatchEvent(
|
|
597
592
|
new CustomEvent("search", {
|
|
598
593
|
detail: this._search,
|
|
599
594
|
bubbles: !1
|
|
600
595
|
})
|
|
601
596
|
), !this._isOptionsOpen && !this.multiple && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden") {
|
|
602
|
-
const l = this._value[0] ?
|
|
597
|
+
const l = this._value[0] ? $(this._value[0], this.options, this.displayValueAs) : "";
|
|
603
598
|
this.inputRef.value.value !== l && (this.inputRef.value.value = l);
|
|
604
599
|
}
|
|
605
|
-
super.updated(
|
|
600
|
+
super.updated(t);
|
|
606
601
|
}
|
|
607
602
|
/**
|
|
608
603
|
* Override form reset to properly restore combobox state.
|
|
@@ -612,25 +607,25 @@ let F = class extends Q {
|
|
|
612
607
|
*/
|
|
613
608
|
formResetCallback() {
|
|
614
609
|
this.touched = !1;
|
|
615
|
-
const
|
|
616
|
-
this.value =
|
|
610
|
+
const t = this.defaultValue || (this.multiple, "");
|
|
611
|
+
this.value = t, 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();
|
|
617
612
|
}
|
|
618
|
-
attributeChangedCallback(
|
|
619
|
-
if (
|
|
613
|
+
attributeChangedCallback(t, e, s) {
|
|
614
|
+
if (t === "options") {
|
|
620
615
|
this._options = Array.isArray(this.options) ? [...this.options] : [];
|
|
621
|
-
const
|
|
622
|
-
this._options =
|
|
616
|
+
const i = V.syncOptionsWithValues(this._options, this._value);
|
|
617
|
+
this._options = i.options, i.newValues.length > this._value.length && (this._value = i.newValues), this._search = "";
|
|
623
618
|
}
|
|
624
|
-
super.attributeChangedCallback(
|
|
619
|
+
super.attributeChangedCallback(t, e, s);
|
|
625
620
|
}
|
|
626
621
|
// Render methods
|
|
627
622
|
render() {
|
|
628
|
-
return
|
|
623
|
+
return d`
|
|
629
624
|
<pkt-input-wrapper
|
|
630
625
|
.label=${this.label}
|
|
631
626
|
.helptext=${this.helptext}
|
|
632
|
-
.helptextDropdown=${
|
|
633
|
-
.helptextDropdownButton=${
|
|
627
|
+
.helptextDropdown=${r(this.helptextDropdown)}
|
|
628
|
+
.helptextDropdownButton=${r(this.helptextDropdownButton)}
|
|
634
629
|
?fullwidth=${this.fullwidth}
|
|
635
630
|
?hasError=${this.hasError}
|
|
636
631
|
?inline=${this.inline}
|
|
@@ -647,7 +642,7 @@ let F = class extends Q {
|
|
|
647
642
|
class="pkt-combobox__wrapper"
|
|
648
643
|
@labelClick=${this.handleInputClick}
|
|
649
644
|
>
|
|
650
|
-
<div class="pkt-contents" slot="helptext">${
|
|
645
|
+
<div class="pkt-contents" slot="helptext">${E(this, "helptext")}</div>
|
|
651
646
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
652
647
|
<div
|
|
653
648
|
class=${w({
|
|
@@ -657,28 +652,28 @@ let F = class extends Q {
|
|
|
657
652
|
"pkt-combobox__input--error": this.hasError,
|
|
658
653
|
"pkt-combobox__input--disabled": this.disabled
|
|
659
654
|
})}
|
|
660
|
-
id=${
|
|
661
|
-
role=${
|
|
662
|
-
aria-expanded=${
|
|
655
|
+
id=${r(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
|
|
656
|
+
role=${r(this._hasTextInput ? void 0 : "combobox")}
|
|
657
|
+
aria-expanded=${r(
|
|
663
658
|
this._hasTextInput ? void 0 : this._isOptionsOpen ? "true" : "false"
|
|
664
659
|
)}
|
|
665
|
-
aria-controls=${
|
|
666
|
-
aria-haspopup=${
|
|
667
|
-
aria-labelledby=${
|
|
660
|
+
aria-controls=${r(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
|
|
661
|
+
aria-haspopup=${r(this._hasTextInput ? void 0 : "listbox")}
|
|
662
|
+
aria-labelledby=${r(
|
|
668
663
|
this._hasTextInput ? void 0 : `${this.id}-combobox-label`
|
|
669
664
|
)}
|
|
670
|
-
aria-activedescendant=${
|
|
671
|
-
!this._hasTextInput && this._value[0] &&
|
|
665
|
+
aria-activedescendant=${r(
|
|
666
|
+
!this._hasTextInput && this._value[0] && c(this.options, this._value[0]) ? `${this.id}-listbox-${R(this._options, this._value[0])}` : void 0
|
|
672
667
|
)}
|
|
673
|
-
aria-description=${
|
|
668
|
+
aria-description=${r(this._selectionDescription || void 0)}
|
|
674
669
|
tabindex=${this._hasTextInput || this.disabled ? "-1" : "0"}
|
|
675
670
|
@click=${this.handleInputClick}
|
|
676
|
-
@keydown=${this._hasTextInput ?
|
|
677
|
-
${
|
|
671
|
+
@keydown=${this._hasTextInput ? b : this.handleSelectOnlyKeydown}
|
|
672
|
+
${O(this.triggerRef)}
|
|
678
673
|
>
|
|
679
|
-
${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ?
|
|
674
|
+
${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
680
675
|
>${this.placeholder}</span
|
|
681
|
-
>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() :
|
|
676
|
+
>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : b}
|
|
682
677
|
${this.renderInputField()}
|
|
683
678
|
<pkt-icon
|
|
684
679
|
class=${w({
|
|
@@ -700,7 +695,7 @@ let F = class extends Q {
|
|
|
700
695
|
?is-multi-select=${this.multiple}
|
|
701
696
|
?allow-user-input=${this.allowUserInput && !this._maxIsReached}
|
|
702
697
|
?max-is-reached=${this._maxIsReached}
|
|
703
|
-
.customUserInput=${
|
|
698
|
+
.customUserInput=${r(this._addValueText)}
|
|
704
699
|
.userMessage=${this._userInfoMessage}
|
|
705
700
|
@search=${this.handleSearch}
|
|
706
701
|
@option-toggle=${this.handleOptionToggled}
|
|
@@ -709,29 +704,29 @@ let F = class extends Q {
|
|
|
709
704
|
@tab-close=${() => this.closeAndProcessInput()}
|
|
710
705
|
.searchValue=${this._search || null}
|
|
711
706
|
.maxLength=${this.maxlength || 0}
|
|
712
|
-
${
|
|
707
|
+
${O(this.listboxRef)}
|
|
713
708
|
></pkt-listbox>
|
|
714
709
|
</div>
|
|
715
710
|
|
|
716
|
-
${this.tagPlacement === "outside" && this.multiple ?
|
|
711
|
+
${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
|
|
717
712
|
${this.renderSingleOrMultipleValues()}
|
|
718
|
-
</div>` :
|
|
713
|
+
</div>` : b}
|
|
719
714
|
</pkt-input-wrapper>
|
|
720
715
|
`;
|
|
721
716
|
}
|
|
722
717
|
renderInputField() {
|
|
723
|
-
return this.typeahead || this.allowUserInput ?
|
|
718
|
+
return this.typeahead || this.allowUserInput ? d`
|
|
724
719
|
<div class="pkt-combobox__input-div combobox__input">
|
|
725
720
|
<input
|
|
726
721
|
type="text"
|
|
727
722
|
id="${this.id}-input"
|
|
728
723
|
name=${(this.name || this.id) + "-input"}
|
|
729
|
-
placeholder=${
|
|
724
|
+
placeholder=${r(
|
|
730
725
|
!this._value.length || this.multiple && this.tagPlacement === "outside" ? this.placeholder : void 0
|
|
731
726
|
)}
|
|
732
727
|
@input=${this.handleInput}
|
|
733
|
-
@change=${(
|
|
734
|
-
|
|
728
|
+
@change=${(t) => {
|
|
729
|
+
t.stopPropagation(), t.stopImmediatePropagation();
|
|
735
730
|
}}
|
|
736
731
|
@keydown=${this.handleInputKeydown}
|
|
737
732
|
@focus=${this.handleFocus}
|
|
@@ -739,49 +734,49 @@ let F = class extends Q {
|
|
|
739
734
|
autocomplete="off"
|
|
740
735
|
role="combobox"
|
|
741
736
|
aria-expanded=${this._isOptionsOpen ? "true" : "false"}
|
|
742
|
-
aria-label=${
|
|
737
|
+
aria-label=${r(this.label)}
|
|
743
738
|
aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
|
|
744
739
|
aria-controls="${this.id}-listbox"
|
|
745
|
-
aria-activedescendant=${
|
|
746
|
-
this._value[0] &&
|
|
740
|
+
aria-activedescendant=${r(
|
|
741
|
+
this._value[0] && c(this.options, this._value[0]) ? `${this.id}-listbox-${R(this._options, this._value[0])}` : void 0
|
|
747
742
|
)}
|
|
748
|
-
aria-description=${
|
|
749
|
-
${
|
|
743
|
+
aria-description=${r(this._selectionDescription || void 0)}
|
|
744
|
+
${O(this.inputRef)}
|
|
750
745
|
/>
|
|
751
746
|
</div>
|
|
752
|
-
` :
|
|
747
|
+
` : d`
|
|
753
748
|
<input
|
|
754
749
|
type="hidden"
|
|
755
750
|
id="${this.id}-input"
|
|
756
751
|
name=${(this.name || this.id) + "-input"}
|
|
757
752
|
.value=${this._value.join(",")}
|
|
758
|
-
${
|
|
753
|
+
${O(this.inputRef)}
|
|
759
754
|
/>
|
|
760
755
|
`;
|
|
761
756
|
}
|
|
762
757
|
renderSingleOrMultipleValues() {
|
|
763
|
-
if (!this.multiple && this._hasTextInput) return
|
|
764
|
-
const
|
|
758
|
+
if (!this.multiple && this._hasTextInput) return b;
|
|
759
|
+
const t = !this.multiple, e = this.renderValueTag(c(this.options, this._value[0])), s = this.tagPlacement === "outside", i = d`
|
|
765
760
|
<ul role="list" class="pkt-combobox__tag-list">
|
|
766
|
-
${
|
|
761
|
+
${D(
|
|
767
762
|
this._value,
|
|
768
763
|
(l) => l,
|
|
769
|
-
(l,
|
|
770
|
-
const
|
|
771
|
-
return
|
|
764
|
+
(l, o) => {
|
|
765
|
+
const u = c(this.options, l), _ = u == null ? void 0 : u.tagSkinColor;
|
|
766
|
+
return d`
|
|
772
767
|
<li
|
|
773
768
|
role="listitem"
|
|
774
|
-
@click=${
|
|
775
|
-
@mousedown=${
|
|
769
|
+
@click=${s ? b : (v) => v.stopPropagation()}
|
|
770
|
+
@mousedown=${s ? b : (v) => v.preventDefault()}
|
|
776
771
|
>
|
|
777
772
|
<pkt-tag
|
|
778
|
-
skin=${
|
|
773
|
+
skin=${_ || "blue-dark"}
|
|
779
774
|
?closeTag=${!this.disabled}
|
|
780
|
-
.buttonTabindex=${
|
|
775
|
+
.buttonTabindex=${s ? void 0 : -1}
|
|
781
776
|
@close=${() => this.handleTagRemove(l)}
|
|
782
|
-
@keydown=${
|
|
777
|
+
@keydown=${s ? b : (v) => this.handleTagKeydown(v, o)}
|
|
783
778
|
>
|
|
784
|
-
${this.renderValueTag(
|
|
779
|
+
${this.renderValueTag(u)}
|
|
785
780
|
</pkt-tag>
|
|
786
781
|
</li>
|
|
787
782
|
`;
|
|
@@ -789,30 +784,32 @@ let F = class extends Q {
|
|
|
789
784
|
)}
|
|
790
785
|
</ul>
|
|
791
786
|
`;
|
|
792
|
-
return
|
|
787
|
+
return t ? e : i;
|
|
793
788
|
}
|
|
794
|
-
renderValueTag(
|
|
795
|
-
if (!
|
|
789
|
+
renderValueTag(t) {
|
|
790
|
+
if (!t) return "";
|
|
796
791
|
switch (this.displayValueAs) {
|
|
797
792
|
case "prefixAndValue":
|
|
798
|
-
return
|
|
799
|
-
>${
|
|
793
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
794
|
+
>${t.prefix || ""} ${t.value}</span
|
|
800
795
|
>`;
|
|
801
796
|
case "value":
|
|
802
|
-
return
|
|
803
|
-
>${
|
|
797
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
798
|
+
>${t.value}</span
|
|
804
799
|
>`;
|
|
805
800
|
case "label":
|
|
806
801
|
default:
|
|
807
|
-
return
|
|
808
|
-
>${
|
|
802
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
803
|
+
>${t.label || t.value}</span
|
|
809
804
|
>`;
|
|
810
805
|
}
|
|
811
806
|
}
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
M("pkt-combobox")
|
|
815
|
-
|
|
807
|
+
}
|
|
808
|
+
try {
|
|
809
|
+
M("pkt-combobox")(Q);
|
|
810
|
+
} catch {
|
|
811
|
+
console.warn("Forsøker å definere <pkt-combobox>, men den er allerede definert");
|
|
812
|
+
}
|
|
816
813
|
export {
|
|
817
|
-
|
|
814
|
+
Q as P
|
|
818
815
|
};
|