@oslokommune/punkt-elements 12.31.2 → 12.32.7

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.
Files changed (181) hide show
  1. package/dist/alert-C2WKLFow.cjs +27 -0
  2. package/dist/alert-XGjypFHe.js +115 -0
  3. package/dist/alert.d.ts +32 -0
  4. package/dist/{backlink-CzpB-ih9.js → backlink-BX8HBhw5.js} +2 -2
  5. package/dist/{backlink-Dn4DfWVR.cjs → backlink-NJdC0FAO.cjs} +1 -1
  6. package/dist/backlink.d.ts +32 -0
  7. package/dist/{button-9NwGr-OS.js → button-Bn8jVB0f.js} +33 -33
  8. package/dist/{button-Beo3c7cx.cjs → button-Bpbh8A_a.cjs} +2 -2
  9. package/dist/button.d.ts +32 -0
  10. package/dist/{calendar-BbZNxsKY.js → calendar-BNHDEEwT.js} +20 -84
  11. package/dist/{calendar-CxBo98iI.cjs → calendar-Ds13AKr5.cjs} +4 -4
  12. package/dist/calendar.d.ts +32 -0
  13. package/dist/card-CEv3DL-o.js +94 -0
  14. package/dist/card-c5EEPaNh.cjs +28 -0
  15. package/dist/card.d.ts +32 -0
  16. package/dist/{checkbox-9Zjy_NU7.cjs → checkbox-DDBBDM85.cjs} +1 -1
  17. package/dist/{checkbox-CzDpR6_8.js → checkbox-DoMYxp83.js} +9 -9
  18. package/dist/checkbox.d.ts +32 -0
  19. package/dist/{class-map-DWtqmIRS.js → class-map-D4tSZX70.js} +2 -2
  20. package/dist/{class-map-Dj5mbCUg.cjs → class-map-DvBKxTiW.cjs} +1 -1
  21. package/dist/combobox-BflWORVa.cjs +115 -0
  22. package/dist/combobox-l7LmWQYu.js +491 -0
  23. package/dist/combobox.d.ts +47 -0
  24. package/dist/datepicker-Bkiyh5P5.cjs +153 -0
  25. package/dist/datepicker-nWd89NwP.js +449 -0
  26. package/dist/datepicker.d.ts +32 -0
  27. package/dist/directive-C7oCP5Bh.cjs +5 -0
  28. package/dist/directive-helpers-BmXIK-1b.js +45 -0
  29. package/dist/directive-helpers-donnvcEO.cjs +5 -0
  30. package/dist/{directive-B76A7YXI.js → directive-oAbCiebi.js} +4 -4
  31. package/dist/element-DJpGVXjq.cjs +238 -0
  32. package/dist/{element-C7XjZtLU.js → element-DiqKrDty.js} +8851 -8847
  33. package/dist/{helptext-CqnoPodd.js → helptext-DfRusn5R.js} +13 -13
  34. package/dist/{helptext-B9kxDc2b.cjs → helptext-aHD9icur.cjs} +2 -2
  35. package/dist/helptext.d.ts +32 -0
  36. package/dist/{icon-BEUgV9Wo.js → icon-BdY52BIt.js} +2 -2
  37. package/dist/{icon-BOKusjAA.cjs → icon-UtDKPH3R.cjs} +1 -1
  38. package/dist/icon.d.ts +32 -0
  39. package/dist/{if-defined-CpIkv1A4.cjs → if-defined-CoBDkDGb.cjs} +1 -1
  40. package/dist/{if-defined-eRX4e5zO.js → if-defined-DeANa4n5.js} +1 -1
  41. package/dist/index.d.ts +210 -15
  42. package/dist/{input-element-BK8UkQli.js → input-element-C4mmTk6h.js} +23 -20
  43. package/dist/input-element-VNai8bsq.cjs +1 -0
  44. package/dist/input-wrapper-8iKEzDRZ.js +40 -0
  45. package/dist/input-wrapper-DWOw7Yn-.cjs +52 -0
  46. package/dist/input-wrapper-EoSAbU-U.cjs +1 -0
  47. package/dist/input-wrapper-P_oEi6dk.js +185 -0
  48. package/dist/input-wrapper.d.ts +32 -0
  49. package/dist/link-D9dJ6F-R.js +73 -0
  50. package/dist/link-DBxXqsnP.cjs +8 -0
  51. package/dist/link.d.ts +32 -0
  52. package/dist/{linkcard-2WzDJPZz.cjs → linkcard-D5O1hR7N.cjs} +1 -1
  53. package/dist/{linkcard-CRpo3tiw.js → linkcard-DcEE9IVw.js} +4 -4
  54. package/dist/linkcard.d.ts +32 -0
  55. package/dist/listbox-CK1GmwCE.cjs +95 -0
  56. package/dist/listbox-CfJWJDrc.js +360 -0
  57. package/dist/listbox.d.ts +47 -0
  58. package/dist/{loader-B1edLWTg.js → loader-DZvOlXzI.js} +6 -6
  59. package/dist/{loader-DI74pe25.cjs → loader-SDXJp58K.cjs} +1 -1
  60. package/dist/loader.d.ts +32 -0
  61. package/dist/messagebox-Ce5e1gga.js +79 -0
  62. package/dist/messagebox-D2_-WZQG.cjs +12 -0
  63. package/dist/messagebox.d.ts +32 -0
  64. package/dist/modal-CCtUsYKk.cjs +33 -0
  65. package/dist/{modal-kPX8nO_L.js → modal-CdgIOp8Q.js} +51 -94
  66. package/dist/modal.d.ts +32 -0
  67. package/dist/pkt-alert.cjs +1 -1
  68. package/dist/pkt-alert.js +1 -1
  69. package/dist/pkt-backlink.cjs +1 -1
  70. package/dist/pkt-backlink.js +1 -1
  71. package/dist/pkt-button.cjs +1 -1
  72. package/dist/pkt-button.js +1 -1
  73. package/dist/pkt-calendar.cjs +1 -1
  74. package/dist/pkt-calendar.js +1 -1
  75. package/dist/pkt-card.cjs +1 -1
  76. package/dist/pkt-card.js +1 -1
  77. package/dist/pkt-checkbox.cjs +1 -1
  78. package/dist/pkt-checkbox.js +1 -1
  79. package/dist/pkt-combobox.cjs +1 -0
  80. package/dist/pkt-combobox.js +6 -0
  81. package/dist/pkt-datepicker.cjs +1 -1
  82. package/dist/pkt-datepicker.js +1 -1
  83. package/dist/pkt-helptext.cjs +1 -1
  84. package/dist/pkt-helptext.js +1 -1
  85. package/dist/pkt-icon.cjs +1 -1
  86. package/dist/pkt-icon.js +1 -1
  87. package/dist/pkt-index.cjs +3 -3
  88. package/dist/pkt-index.js +45 -43
  89. package/dist/pkt-input-wrapper.cjs +1 -1
  90. package/dist/pkt-input-wrapper.js +1 -1
  91. package/dist/pkt-link.cjs +1 -1
  92. package/dist/pkt-link.js +1 -1
  93. package/dist/pkt-linkcard.cjs +1 -1
  94. package/dist/pkt-linkcard.js +1 -1
  95. package/dist/pkt-listbox.cjs +1 -0
  96. package/dist/pkt-listbox.js +6 -0
  97. package/dist/pkt-loader.cjs +1 -1
  98. package/dist/pkt-loader.js +1 -1
  99. package/dist/pkt-messagebox.cjs +1 -1
  100. package/dist/pkt-messagebox.js +1 -1
  101. package/dist/pkt-modal.cjs +1 -1
  102. package/dist/pkt-modal.js +1 -1
  103. package/dist/pkt-options-controller-BkWE4pZe.js +38 -0
  104. package/dist/pkt-options-controller-TJ1apYGF.cjs +1 -0
  105. package/dist/pkt-progressbar.cjs +1 -1
  106. package/dist/pkt-progressbar.js +2 -2
  107. package/dist/pkt-radiobutton.cjs +1 -1
  108. package/dist/pkt-radiobutton.js +1 -1
  109. package/dist/pkt-select.cjs +1 -1
  110. package/dist/pkt-select.js +1 -1
  111. package/dist/pkt-slot-controller-BtVLTZb7.js +79 -0
  112. package/dist/pkt-slot-controller-plQxXRvV.cjs +1 -0
  113. package/dist/pkt-tag.cjs +1 -1
  114. package/dist/pkt-tag.js +1 -1
  115. package/dist/pkt-textarea.cjs +1 -1
  116. package/dist/pkt-textarea.js +1 -1
  117. package/dist/pkt-textinput.cjs +1 -1
  118. package/dist/pkt-textinput.js +1 -1
  119. package/dist/{progressbar-D0nxLqHu.js → progressbar-DvFz9KBo.js} +6 -6
  120. package/dist/{progressbar-B6A9UVXS.cjs → progressbar-jASTnhti.cjs} +1 -1
  121. package/dist/progressbar.d.ts +32 -0
  122. package/dist/{radiobutton-BWyQgR_x.cjs → radiobutton-C-Xd5sSq.cjs} +1 -1
  123. package/dist/{radiobutton-DLWjvLBO.js → radiobutton-D03aN4yn.js} +5 -5
  124. package/dist/radiobutton.d.ts +32 -0
  125. package/dist/ref-B70YZNXm.js +102 -0
  126. package/dist/ref-CLqTsViF.cjs +9 -0
  127. package/dist/repeat-CNLpCTun.js +61 -0
  128. package/dist/repeat-t2oms1o6.cjs +5 -0
  129. package/dist/select-BLDaK5Rd.js +118 -0
  130. package/dist/select-Dvds7MzS.cjs +49 -0
  131. package/dist/select.d.ts +32 -0
  132. package/dist/{state-HNj0_316.cjs → state-C4LdlTYO.cjs} +1 -1
  133. package/dist/{state-CDQk0DFQ.js → state-CDwPbiQj.js} +1 -1
  134. package/dist/tag-C52KeBmR.cjs +18 -0
  135. package/dist/{tag-CmFcSdOV.js → tag-DoS5S2Bq.js} +28 -77
  136. package/dist/tag.d.ts +32 -0
  137. package/dist/{textarea-BPqWCymU.js → textarea-C9EvdPGi.js} +18 -17
  138. package/dist/{textarea-VG-UTMLP.cjs → textarea-DJvNBmEL.cjs} +6 -6
  139. package/dist/textarea.d.ts +32 -0
  140. package/dist/{textinput-CEP7QA3E.cjs → textinput-Cg3ObBuw.cjs} +5 -4
  141. package/dist/{textinput-VD74aGzx.js → textinput-CxRSSYaN.js} +34 -33
  142. package/dist/textinput.d.ts +32 -0
  143. package/package.json +4 -4
  144. package/src/components/button/button.ts +3 -2
  145. package/src/components/combobox/combobox.ts +873 -0
  146. package/src/components/combobox/countrycodes.json +927 -0
  147. package/src/components/combobox/index.ts +6 -0
  148. package/src/components/datepicker/datepicker.ts +6 -4
  149. package/src/components/helptext/helptext.ts +1 -1
  150. package/src/components/index.ts +7 -0
  151. package/src/components/input-wrapper/input-wrapper.ts +42 -34
  152. package/src/components/listbox/index.ts +4 -0
  153. package/src/components/listbox/listbox.ts +474 -0
  154. package/src/components/select/select.ts +7 -0
  155. package/src/components/tag/tag.ts +1 -1
  156. package/src/components/textinput/textinput.ts +3 -2
  157. package/dist/alert-BDxxRqgi.cjs +0 -27
  158. package/dist/alert-D0S57u0r.js +0 -163
  159. package/dist/card-C63x_nll.cjs +0 -28
  160. package/dist/card-DQfNKnKl.js +0 -176
  161. package/dist/datepicker-CYUvRGhE.js +0 -663
  162. package/dist/datepicker-FuAL0uNU.cjs +0 -155
  163. package/dist/directive-C_VV3qwo.cjs +0 -5
  164. package/dist/element-CzFXQBoS.cjs +0 -238
  165. package/dist/input-element-Dtyuf6s8.cjs +0 -1
  166. package/dist/input-wrapper-Bo2_t6pA.cjs +0 -50
  167. package/dist/input-wrapper-Bw9tARAD.js +0 -125
  168. package/dist/input-wrapper-DaZZq8c0.js +0 -172
  169. package/dist/input-wrapper-jPnKsfEC.cjs +0 -1
  170. package/dist/link-1iq0Pmuf.cjs +0 -8
  171. package/dist/link-D3U0Jkz8.js +0 -109
  172. package/dist/messagebox-DQpEMkS2.cjs +0 -12
  173. package/dist/messagebox-KP-8-tA9.js +0 -114
  174. package/dist/modal-ytIJwfr3.cjs +0 -33
  175. package/dist/pkt-slot-controller-Clbye6cM.js +0 -85
  176. package/dist/pkt-slot-controller-Oc32unDk.cjs +0 -1
  177. package/dist/ref-2anvRHT4.cjs +0 -13
  178. package/dist/ref-DbOSDQbk.js +0 -143
  179. package/dist/select-CzuxXKll.js +0 -150
  180. package/dist/select-DZL6aa2s.cjs +0 -48
  181. package/dist/tag-BeLSOjNh.cjs +0 -18
@@ -1,663 +0,0 @@
1
- import { e as x } from "./class-map-DWtqmIRS.js";
2
- import { o as k } from "./if-defined-eRX4e5zO.js";
3
- import { T as L, x as v, E as T, n as u, a as j } from "./element-C7XjZtLU.js";
4
- import { r as V } from "./state-CDQk0DFQ.js";
5
- import { n as S, f as _, a as F, b as P, d as A } from "./calendar-BbZNxsKY.js";
6
- import { P as q } from "./input-element-BK8UkQli.js";
7
- import { p as H, v as $, r as R, M as I, m as N, e as w, n as y } from "./ref-DbOSDQbk.js";
8
- import { e as U, i as K, t as W } from "./directive-B76A7YXI.js";
9
- import "./icon-BEUgV9Wo.js";
10
- import "./input-wrapper-DaZZq8c0.js";
11
- import "./tag-CmFcSdOV.js";
12
- import { P as z } from "./pkt-slot-controller-Clbye6cM.js";
13
- /**
14
- * @license
15
- * Copyright 2017 Google LLC
16
- * SPDX-License-Identifier: BSD-3-Clause
17
- */
18
- const E = (e, t, i) => {
19
- const a = /* @__PURE__ */ new Map();
20
- for (let s = t; s <= i; s++) a.set(e[s], s);
21
- return a;
22
- }, G = U(class extends K {
23
- constructor(e) {
24
- if (super(e), e.type !== W.CHILD) throw Error("repeat() can only be used in text expressions");
25
- }
26
- dt(e, t, i) {
27
- let a;
28
- i === void 0 ? i = t : t !== void 0 && (a = t);
29
- const s = [], l = [];
30
- let n = 0;
31
- for (const f of e) s[n] = a ? a(f, n) : n, l[n] = i(f, n), n++;
32
- return { values: l, keys: s };
33
- }
34
- render(e, t, i) {
35
- return this.dt(e, t, i).values;
36
- }
37
- update(e, [t, i, a]) {
38
- const s = H(e), { values: l, keys: n } = this.dt(t, i, a);
39
- if (!Array.isArray(s)) return this.ut = n, l;
40
- const f = this.ut ?? (this.ut = []), m = [];
41
- let C, O, p = 0, h = s.length - 1, d = 0, c = l.length - 1;
42
- for (; p <= h && d <= c; ) if (s[p] === null) p++;
43
- else if (s[h] === null) h--;
44
- else if (f[p] === n[d]) m[d] = $(s[p], l[d]), p++, d++;
45
- else if (f[h] === n[c]) m[c] = $(s[h], l[c]), h--, c--;
46
- else if (f[p] === n[c]) m[c] = $(s[p], l[c]), R(e, m[c + 1], s[p]), p++, c--;
47
- else if (f[h] === n[d]) m[d] = $(s[h], l[d]), R(e, s[p], s[h]), h--, d++;
48
- else if (C === void 0 && (C = E(n, d, c), O = E(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
49
- const g = O.get(n[d]), D = g !== void 0 ? s[g] : null;
50
- if (D === null) {
51
- const M = R(e, s[p]);
52
- $(M, l[d]), m[d] = M;
53
- } else m[d] = $(D, l[d]), R(e, s[p], D), s[g] = null;
54
- d++;
55
- } else I(s[h]), h--;
56
- else I(s[p]), p++;
57
- for (; d <= c; ) {
58
- const g = R(e, m[c + 1]);
59
- $(g, l[d]), m[d++] = g;
60
- }
61
- for (; p <= h; ) {
62
- const g = s[p++];
63
- g !== null && I(g);
64
- }
65
- return this.ut = n, N(e, m), L;
66
- }
67
- }), J = "pkt-datepicker", Q = !0, X = {
68
- name: {
69
- type: "string",
70
- name: "Navn",
71
- description: "Navn som sendes brukes i skjema ved innsending"
72
- },
73
- label: {
74
- type: "string",
75
- name: "Etikett",
76
- description: "Tekst som vises over datovelgeren"
77
- },
78
- helptext: {
79
- type: "string",
80
- name: "Hjelpetekst",
81
- description: "Hjelpetekst som vises over datovelgeren"
82
- },
83
- helptextDropdown: {
84
- type: "string",
85
- name: "Utvidet hjelpetekst",
86
- description: "Hjelpetekst som vises i en lukket boks man kan åpne"
87
- },
88
- helptextDropdownButton: {
89
- type: "string",
90
- name: "Knappetekst for hjelpetekst",
91
- description: "Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",
92
- default: "Les mer"
93
- },
94
- dateformat: {
95
- name: "Datoformat",
96
- description: "Datoformat for valgte datoer i flervalgsmodus",
97
- type: "string",
98
- default: "dd.MM.yyyy"
99
- },
100
- currentmonth: {
101
- name: "Nåværende måned",
102
- type: "ISOdatestring",
103
- description: "Måneden som skal vises i datovelgeren"
104
- },
105
- value: {
106
- name: "Verdi",
107
- type: "ISOdatestring",
108
- variant: "multiple",
109
- reflect: !0,
110
- description: "Kommaseparert liste av valgte datoer"
111
- },
112
- excludeweekdays: {
113
- name: "Utelat ukedager",
114
- type: "string",
115
- description: "Kommaseparert liste over ukedager (1-7) som skal ekskluderes"
116
- },
117
- excludedates: {
118
- name: "Utelat datoer",
119
- type: "ISOdatestring",
120
- variant: "multiple",
121
- description: "Kommaseparert liste over datoer som skal ekskluderes"
122
- },
123
- min: {
124
- name: "Tidligst tillatt",
125
- type: "ISOdatestring",
126
- default: null,
127
- description: "Første tillate dato i datovelgeren"
128
- },
129
- max: {
130
- name: "Senest tillatt",
131
- type: "ISOdatestring",
132
- default: null,
133
- description: "Siste tillate dato i datovelgeren"
134
- },
135
- weeknumbers: {
136
- name: "Vis ukenummer",
137
- type: "boolean",
138
- reflect: !0,
139
- default: !1,
140
- description: "Vis ukedager i datovelgerens kalender"
141
- },
142
- withcontrols: {
143
- name: "Med kontroller",
144
- type: "boolean",
145
- reflect: !0,
146
- default: !1,
147
- description: "Vis avanserte velgere for måned og år"
148
- },
149
- multiple: {
150
- name: "Flervalg",
151
- type: "boolean",
152
- reflect: !0,
153
- default: !1,
154
- description: "Tillat valg av flere enn én dato i samme velger"
155
- },
156
- maxlength: {
157
- name: "Maks antall",
158
- description: "Maks valgte datoer i flervalgsmodus",
159
- type: "number"
160
- },
161
- range: {
162
- name: "Datotidsrom",
163
- type: "boolean",
164
- reflect: !0,
165
- default: !1,
166
- description: "Tillat å velge et tidsrom mellom to datoer i samme velger"
167
- },
168
- hasError: {
169
- type: "boolean",
170
- name: "Feil",
171
- default: !1,
172
- description: "Viser feiltilstand for datovelgeren"
173
- },
174
- errorMessage: {
175
- type: "string",
176
- name: "Feilmelding",
177
- description: "Tekst som vises under datovelgeren ved feiltilstand"
178
- },
179
- disabled: {
180
- type: "boolean",
181
- name: "Deaktivert",
182
- default: !1,
183
- reflect: !0,
184
- description: "Er datovelgeren deaktivert?"
185
- },
186
- fullwidth: {
187
- type: "boolean",
188
- name: "Full bredde",
189
- default: !1,
190
- reflect: !0,
191
- description: "Skal datovelgeren ta opp hele bredden?"
192
- },
193
- required: {
194
- type: "boolean",
195
- name: "Påkrevd",
196
- default: !1,
197
- reflect: !0,
198
- description: "Er datovelgeren påkrevd?"
199
- },
200
- requiredTag: {
201
- type: "boolean",
202
- name: "Vise påkrevd-merking",
203
- default: !1,
204
- description: "Viser en merking som indikerer at datovelgeren er påkrevd"
205
- },
206
- requiredText: {
207
- type: "string",
208
- name: "Påkrevd-tekst",
209
- default: "Må fylles ut",
210
- description: "Tekst som vises i påkrevd-merkingen"
211
- },
212
- optionalTag: {
213
- type: "boolean",
214
- name: "Vise valgfritt-merking",
215
- default: !1,
216
- description: "Viser en merking som indikerer at datovelgeren er valgfri"
217
- },
218
- optionalText: {
219
- type: "string",
220
- name: "Valgfritt-tekst",
221
- default: "Valgfritt",
222
- description: "Tekst som vises i valgfritt-merkingen"
223
- },
224
- useWrapper: {
225
- type: "boolean",
226
- name: "Bruk wrapper",
227
- description: "Indikerer at feltet skal ha synlig label og hjelpetekst",
228
- displayAsFalse: !0,
229
- default: !0
230
- },
231
- id: {
232
- type: "string",
233
- name: "ID",
234
- description: "Unik identifikasjon for datovelgeren"
235
- }
236
- }, Y = {
237
- change: {
238
- type: "Event",
239
- description: "Returnerer valgt dato som streng i ISO-format"
240
- },
241
- "value-change": {
242
- type: "CustomEvent",
243
- description: "Returnerer en <code>array</code> med valgte datoer i ISO-format"
244
- },
245
- toggleHelpText: {
246
- type: "CustomEvent",
247
- description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
248
- }
249
- }, b = {
250
- name: J,
251
- "css-class": "pkt-datepicker",
252
- isElement: Q,
253
- props: X,
254
- events: Y
255
- };
256
- var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
257
- for (var s = a > 1 ? void 0 : a ? ee(t, i) : t, l = e.length - 1, n; l >= 0; l--)
258
- (n = e[l]) && (s = (a ? n(t, i, s) : n(s)) || s);
259
- return a && s && Z(t, i, s), s;
260
- };
261
- const B = (e) => new Promise((t) => setTimeout(t, e));
262
- let r = class extends q {
263
- /**
264
- * Housekeeping / lifecycle methods
265
- */
266
- constructor() {
267
- super(), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = b.props.dateformat.default, this.multiple = b.props.multiple.default, this.maxlength = null, this.range = b.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = b.props.weeknumbers.default, this.withcontrols = b.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = w(), this.inputRefTo = w(), this.btnRef = w(), this.calRef = w(), this.popupRef = w(), this.helptextSlot = w(), this.addToSelected = (e) => {
268
- const t = e.target;
269
- if (!t.value) return;
270
- const i = this.min ? S(this.min) : null, a = this.max ? S(this.max) : null, s = S(t.value.split(",")[0]);
271
- s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), t.value = "";
272
- }, this.slotController = new z(this, this.helptextSlot);
273
- }
274
- async connectedCallback() {
275
- super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (e) => {
276
- var t, i;
277
- (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
278
- }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || b.props.min.default, this.max = this.max || b.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await B(20), this.handleCalendarPosition());
279
- }
280
- disconnectedCallback() {
281
- super.disconnectedCallback(), document && document.body.removeEventListener("click", (e) => {
282
- var t, i;
283
- (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
284
- });
285
- }
286
- attributeChangedCallback(e, t, i) {
287
- if (e === "value") {
288
- if (this.range && (i == null ? void 0 : i.split(",").length) === 1) return;
289
- this.value !== t && this.valueChanged(i, t);
290
- }
291
- e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(e, t, i);
292
- }
293
- updated(e) {
294
- if (e.has("value")) {
295
- if (this.range && this.value.length === 1) return;
296
- this.valueChanged(this.value, e.get("value"));
297
- }
298
- super.updated(e);
299
- }
300
- /**
301
- * Rendering
302
- */
303
- renderInput() {
304
- return v`
305
- <input
306
- class="${x(this.inputClasses)}"
307
- .type=${this.inputType}
308
- id="${this.id}-input"
309
- .value=${this._value[0] ?? ""}
310
- min=${k(this.min)}
311
- max=${k(this.max)}
312
- @click=${(e) => {
313
- e.preventDefault(), this.showCalendar();
314
- }}
315
- ?disabled=${this.disabled}
316
- @keydown=${(e) => {
317
- var t;
318
- (e.key === "," || e.key === "Enter") && ((t = this.inputRef.value) == null || t.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e));
319
- }}
320
- @input=${(e) => {
321
- this.onInput(), e.stopImmediatePropagation();
322
- }}
323
- @focus=${() => {
324
- this.onFocus(), this.isMobileSafari && this.showCalendar();
325
- }}
326
- @blur=${(e) => {
327
- var t;
328
- (t = this.calRef.value) != null && t.contains(e.relatedTarget) || this.onBlur(), this.manageValidity(e.target), this.value = e.target.value;
329
- }}
330
- @change=${(e) => {
331
- e.stopImmediatePropagation();
332
- }}
333
- ${y(this.inputRef)}
334
- />
335
- `;
336
- }
337
- renderRangeInput() {
338
- const e = {
339
- "pkt-input-prefix": this.showRangeLabels,
340
- "pkt-hide": !this.showRangeLabels
341
- };
342
- return v`
343
- ${this.showRangeLabels ? v` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : T}
344
- <input
345
- class=${x(this.inputClasses)}
346
- .type=${this.inputType}
347
- id="${this.id}-input"
348
- .value=${this._value[0] ?? ""}
349
- min=${k(this.min)}
350
- max=${k(this.max)}
351
- ?disabled=${this.disabled}
352
- @click=${(t) => {
353
- t.preventDefault(), this.showCalendar();
354
- }}
355
- @keydown=${(t) => {
356
- var i;
357
- (t.key === "," || t.key === "Enter") && ((i = this.inputRef.value) == null || i.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
358
- }}
359
- @input=${(t) => {
360
- this.onInput(), t.stopImmediatePropagation();
361
- }}
362
- @focus=${() => {
363
- this.onFocus(), this.isMobileSafari && this.showCalendar();
364
- }}
365
- @blur=${(t) => {
366
- var i, a;
367
- if (t.target.value) {
368
- this.manageValidity(t.target);
369
- const s = _(t.target.value);
370
- s && this._value[0] !== t.target.value && this._value[1] && (this.clearInputValue(), (a = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
371
- } else this._value[0] && this.clearInputValue();
372
- }}
373
- @change=${(t) => {
374
- t.stopImmediatePropagation();
375
- }}
376
- ${y(this.inputRef)}
377
- />
378
- <div class="${x(e)}" id="${this.id}-to-label">
379
- ${this.strings.generic.to}
380
- </div>
381
- ${this.showRangeLabels ? T : v` <div class="pkt-input-separator">–</div> `}
382
- <input
383
- class=${x(this.inputClasses)}
384
- .type=${this.inputType}
385
- id="${this.id}-to"
386
- aria-labelledby="${this.id}-to-label"
387
- .value=${this._value[1] ?? ""}
388
- min=${k(this.min)}
389
- max=${k(this.max)}
390
- ?disabled=${this.disabled}
391
- @click=${(t) => {
392
- t.preventDefault(), this.showCalendar();
393
- }}
394
- @keydown=${(t) => {
395
- var i;
396
- (t.key === "," || t.key === "Enter") && ((i = this.inputRefTo.value) == null || i.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
397
- }}
398
- @input=${(t) => {
399
- this.onInput(), t.stopImmediatePropagation();
400
- }}
401
- @focus=${() => {
402
- this.onFocus(), this.isMobileSafari && this.showCalendar();
403
- }}
404
- @blur=${(t) => {
405
- var i, a, s;
406
- if ((i = this.calRef.value) != null && i.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
407
- this.manageValidity(t.target);
408
- const l = t.target.value;
409
- this.min && this.min > l ? this.internals.setValidity(
410
- { rangeUnderflow: !0 },
411
- this.strings.forms.messages.rangeUnderflow,
412
- t.target
413
- ) : this.max && this.max < l && this.internals.setValidity(
414
- { rangeOverflow: !0 },
415
- this.strings.forms.messages.rangeOverflow,
416
- t.target
417
- );
418
- const n = _(t.target.value);
419
- n && this._value[1] !== F(n) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(n));
420
- }
421
- }}
422
- @change=${(t) => {
423
- t.stopImmediatePropagation();
424
- }}
425
- ${y(this.inputRefTo)}
426
- />
427
- `;
428
- }
429
- renderMultipleInput() {
430
- return v`
431
- <input
432
- class=${x(this.inputClasses)}
433
- .type=${this.inputType}
434
- id="${this.id}-input"
435
- min=${k(this.min)}
436
- max=${k(this.max)}
437
- ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
438
- @click=${(e) => {
439
- e.preventDefault(), this.showCalendar();
440
- }}
441
- @blur=${(e) => {
442
- var t;
443
- (t = this.calRef.value) != null && t.contains(e.relatedTarget) || this.onBlur(), this.addToSelected(e);
444
- }}
445
- @input=${(e) => {
446
- this.onInput(), e.stopImmediatePropagation();
447
- }}
448
- @focus=${() => {
449
- this.onFocus(), this.isMobileSafari && this.showCalendar();
450
- }}
451
- @keydown=${(e) => {
452
- (e.key === "," || e.key === "Enter") && (e.preventDefault(), this.addToSelected(e)), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e));
453
- }}
454
- @change=${(e) => {
455
- e.stopImmediatePropagation();
456
- }}
457
- ${y(this.inputRef)}
458
- />
459
- `;
460
- }
461
- renderTags() {
462
- return v`
463
- <div class="pkt-datepicker__tags" aria-live="polite">
464
- ${this._value[0] ? G(
465
- this._value ?? [],
466
- (e) => e,
467
- (e) => v`
468
- <pkt-tag
469
- .id="${this.id + e + "-tag"}"
470
- closeTag
471
- ariaLabel="${this.strings.calendar.deleteDate} ${P(
472
- e,
473
- this.dateformat
474
- )}"
475
- @close=${() => {
476
- var t;
477
- return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(_(e));
478
- }}
479
- ><time datetime="${e}">${P(e, this.dateformat)}</time></pkt-tag
480
- >
481
- `
482
- ) : T}
483
- </div>
484
- `;
485
- }
486
- renderCalendar() {
487
- return v`<div
488
- class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
489
- @focusout=${(e) => {
490
- this.calendarOpen && this.handleFocusOut(e);
491
- }}
492
- id="${this.id}-popup"
493
- ${y(this.popupRef)}
494
- >
495
- <pkt-calendar
496
- id="${this.id}-calendar"
497
- ?multiple=${this.multiple}
498
- ?range=${this.range}
499
- ?weeknumbers=${this.weeknumbers}
500
- ?withcontrols=${this.withcontrols}
501
- .maxMultiple=${this.maxlength}
502
- .selected=${this._value}
503
- .earliest=${this.min}
504
- .latest=${this.max}
505
- .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
506
- .excludeweekdays=${this.excludeweekdays}
507
- .currentmonth=${this.currentmonth ? S(this.currentmonth) : null}
508
- @date-selected=${(e) => {
509
- this.value = !this.multiple && !this.range ? e.detail[0] : e.detail, this._value = e.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "") : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : ""));
510
- }}
511
- @close=${() => {
512
- this.onBlur(), this.hideCalendar();
513
- }}
514
- ${y(this.calRef)}
515
- ></pkt-calendar>
516
- </div>`;
517
- }
518
- render() {
519
- return this.inputClasses = {
520
- "pkt-input": !0,
521
- "pkt-datepicker__input": !0,
522
- "pkt-input--fullwidth": this.fullwidth,
523
- "pkt-datepicker--hasrangelabels": this.showRangeLabels,
524
- "pkt-datepicker--multiple": this.multiple,
525
- "pkt-datepicker--range": this.range
526
- }, this.buttonClasses = {
527
- "pkt-input-icon": !0,
528
- "pkt-btn": !0,
529
- "pkt-btn--icon-only": !0,
530
- "pkt-btn--tertiary": !0
531
- }, v`
532
- <pkt-input-wrapper
533
- label="${this.label}"
534
- forId="${this.id}-input"
535
- ?counter=${this.multiple && !!this.maxlength}
536
- .counterCurrent=${this.value ? this._value.length : 0}
537
- .counterMaxLength=${this.maxlength}
538
- ?disabled=${this.disabled}
539
- ?hasError=${this.hasError}
540
- ?required=${this.required}
541
- ?optionalTag=${this.optionalTag}
542
- ?requiredTag=${this.requiredTag}
543
- ?useWrapper=${this.useWrapper}
544
- .optionalText=${this.optionalText}
545
- .requiredText=${this.requiredText}
546
- .errorMessage=${this.errorMessage}
547
- .helptext=${this.helptext}
548
- .helptextDropdown=${this.helptextDropdown}
549
- .helptextDropdownButton=${this.helptextDropdownButton}
550
- .ariaDescribedBy=${this.ariaDescribedBy}
551
- class="pkt-datepicker"
552
- >
553
- <div class="pkt-contents" ${y(this.helptextSlot)} name="helptext" slot="helptext"></div>
554
- ${this.multiple ? this.renderTags() : T}
555
- <div
556
- class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
557
- >
558
- <div class="pkt-input__container">
559
- ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
560
- <button
561
- class="${x(this.buttonClasses)}"
562
- type="button"
563
- @click=${this.toggleCalendar}
564
- ?disabled=${this.disabled}
565
- ${y(this.btnRef)}
566
- >
567
- <pkt-icon name="calendar"></pkt-icon>
568
- <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
569
- </button>
570
- </div>
571
- </div>
572
- </pkt-input-wrapper>
573
- ${this.renderCalendar()}
574
- `;
575
- }
576
- /**
577
- * Handlers
578
- */
579
- handleCalendarPosition() {
580
- var e;
581
- if (this.popupRef.value && this.inputRef.value) {
582
- const t = this.multiple && !!this.maxlength, i = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = t ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
583
- let l = t ? "calc(100% - 30px)" : "100%";
584
- i && i.top + s > window.innerHeight && i.top - s > 0 && (l = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = l;
585
- }
586
- }
587
- handleFocusOut(e) {
588
- this.contains(e.target) || (this.onBlur(), this.hideCalendar());
589
- }
590
- async showCalendar() {
591
- var e;
592
- this.calendarOpen = !0, await B(20), this.handleCalendarPosition(), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
593
- }
594
- hideCalendar() {
595
- this.calendarOpen = !1;
596
- }
597
- async toggleCalendar(e) {
598
- e.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
599
- }
600
- };
601
- o([
602
- u({ type: String, reflect: !0 })
603
- ], r.prototype, "value", 2);
604
- o([
605
- u({ type: Array })
606
- ], r.prototype, "_value", 2);
607
- o([
608
- u({ type: String, reflect: !0 })
609
- ], r.prototype, "label", 2);
610
- o([
611
- u({ type: String })
612
- ], r.prototype, "dateformat", 2);
613
- o([
614
- u({ type: Boolean, reflect: !0 })
615
- ], r.prototype, "multiple", 2);
616
- o([
617
- u({ type: Number, reflect: !0 })
618
- ], r.prototype, "maxlength", 2);
619
- o([
620
- u({ type: Boolean, reflect: !0 })
621
- ], r.prototype, "range", 2);
622
- o([
623
- u({ type: Boolean })
624
- ], r.prototype, "showRangeLabels", 2);
625
- o([
626
- u({ type: String, reflect: !0 })
627
- ], r.prototype, "min", 2);
628
- o([
629
- u({ type: String, reflect: !0 })
630
- ], r.prototype, "max", 2);
631
- o([
632
- u({ type: Boolean })
633
- ], r.prototype, "weeknumbers", 2);
634
- o([
635
- u({ type: Boolean, reflect: !0 })
636
- ], r.prototype, "withcontrols", 2);
637
- o([
638
- u({ converter: A.csvToArray })
639
- ], r.prototype, "excludedates", 2);
640
- o([
641
- u({ converter: A.csvToArray })
642
- ], r.prototype, "excludeweekdays", 2);
643
- o([
644
- u({ type: String })
645
- ], r.prototype, "currentmonth", 2);
646
- o([
647
- u({ type: Boolean, reflect: !0 })
648
- ], r.prototype, "calendarOpen", 2);
649
- o([
650
- u({ type: String })
651
- ], r.prototype, "timezone", 2);
652
- o([
653
- V()
654
- ], r.prototype, "inputClasses", 2);
655
- o([
656
- V()
657
- ], r.prototype, "buttonClasses", 2);
658
- r = o([
659
- j("pkt-datepicker")
660
- ], r);
661
- export {
662
- r as P
663
- };