@oslokommune/punkt-elements 13.6.11 → 13.6.15

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 (40) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/{combobox-cK_746ek.cjs → combobox-BFOjlFIj.cjs} +1 -1
  3. package/dist/{combobox-DxNotM0u.js → combobox-DaiEdUKx.js} +1 -1
  4. package/dist/datepicker-BR1imflE.cjs +289 -0
  5. package/dist/datepicker-CbVSKaOY.js +1390 -0
  6. package/dist/index.d.ts +125 -7
  7. package/dist/{input-wrapper-D_JdEqcO.js → input-wrapper-CQzXG44g.js} +22 -22
  8. package/dist/{input-wrapper-C9rZEgju.cjs → input-wrapper-DVjNwf8-.cjs} +11 -12
  9. package/dist/pkt-combobox.cjs +1 -1
  10. package/dist/pkt-combobox.js +1 -1
  11. package/dist/pkt-datepicker.cjs +1 -1
  12. package/dist/pkt-datepicker.js +8 -4
  13. package/dist/pkt-index.cjs +1 -1
  14. package/dist/pkt-index.js +6 -6
  15. package/dist/pkt-input-wrapper.cjs +1 -1
  16. package/dist/pkt-input-wrapper.js +1 -1
  17. package/dist/pkt-select.cjs +1 -1
  18. package/dist/pkt-select.js +1 -1
  19. package/dist/pkt-textarea.cjs +1 -1
  20. package/dist/pkt-textarea.js +1 -1
  21. package/dist/pkt-textinput.cjs +1 -1
  22. package/dist/pkt-textinput.js +1 -1
  23. package/dist/{select-D7OQaUrQ.js → select-DKkoxmgj.js} +1 -1
  24. package/dist/{select-Cf1RWSsI.cjs → select-DynzsPo0.cjs} +1 -1
  25. package/dist/{textarea-CXu8UUsY.cjs → textarea-BS1tgktz.cjs} +1 -1
  26. package/dist/{textarea-C0vTWTov.js → textarea-COG1CH_s.js} +1 -1
  27. package/dist/{textinput-C6wccDhZ.cjs → textinput-CCK8ti2y.cjs} +1 -1
  28. package/dist/{textinput-CmZrfH4A.js → textinput-CTOtfcTR.js} +1 -1
  29. package/package.json +3 -3
  30. package/src/components/datepicker/datepicker-multiple.ts +202 -0
  31. package/src/components/datepicker/datepicker-popup.test.ts +77 -0
  32. package/src/components/datepicker/datepicker-popup.ts +137 -0
  33. package/src/components/datepicker/datepicker-range.ts +281 -0
  34. package/src/components/datepicker/datepicker-single.ts +198 -0
  35. package/src/components/datepicker/datepicker-utils.ts +22 -9
  36. package/src/components/datepicker/datepicker.ts +179 -256
  37. package/src/components/datepicker/index.ts +5 -1
  38. package/src/components/input-wrapper/input-wrapper.ts +7 -7
  39. package/dist/datepicker-BEMo4X9s.js +0 -770
  40. package/dist/datepicker-n49TAIAt.cjs +0 -169
@@ -0,0 +1,1390 @@
1
+ import { P as O, E as B, x as d, n as a, a as _ } from "./element-DJZPsA_J.js";
2
+ import { r as N } from "./state-CPQXJ4Ct.js";
3
+ import { f as U, s as q, i as W, n as j, a as M, b as z, d as H, p as G, e as K } from "./calendar-CodWwTHM.js";
4
+ import { P as J } from "./input-element-DQOVrqUZ.js";
5
+ import { e as u, n as c } from "./ref-BCGCor-j.js";
6
+ import "./icon-B1-mkmwB.js";
7
+ import "./input-wrapper-CQzXG44g.js";
8
+ import { e as x } from "./class-map-Dw6Wrxwi.js";
9
+ import { c as Q } from "./repeat-B6qPUgAq.js";
10
+ import "./tag-NZ5oeGfw.js";
11
+ import { u as X } from "./stringutils-DJjRa8dG.js";
12
+ import { o as C } from "./if-defined-D3lgJqT7.js";
13
+ import { P as Y } from "./pkt-slot-controller-BPGj-LC5.js";
14
+ const Z = (t) => new Promise((e) => setTimeout(e, t)), R = {
15
+ /**
16
+ * Detects if the current device is iOS (iPhone, iPad, iPod)
17
+ * Handles modern iPad Safari which uses desktop user agent since iOS 13
18
+ */
19
+ isIOS() {
20
+ const t = navigator.userAgent;
21
+ return !!(/iP(hone|od|ad)/.test(t) || /Macintosh/.test(t) && "ontouchend" in document);
22
+ }
23
+ }, k = {
24
+ /**
25
+ * Parses a value (string or string array) into an array of strings
26
+ */
27
+ parseValue(t) {
28
+ return t ? Array.isArray(t) ? t.filter(Boolean) : typeof t == "string" ? t.split(",").filter(Boolean) : String(t).split(",").filter(Boolean) : [];
29
+ },
30
+ /**
31
+ * Converts array of dates to comma-separated string
32
+ */
33
+ formatValue(t) {
34
+ return t.join(",");
35
+ },
36
+ /**
37
+ * Ensures name attribute ends with [] for multiple/range inputs
38
+ */
39
+ normalizeNameForMultiple(t, e, s) {
40
+ return t ? (e || s) && !t.endsWith("[]") ? t + "[]" : t : null;
41
+ },
42
+ /**
43
+ * Converts string arrays to proper arrays if they come as strings
44
+ */
45
+ normalizeStringArray(t) {
46
+ return typeof t == "string" ? t.split(",").filter(Boolean) : Array.isArray(t) ? t : [];
47
+ },
48
+ /**
49
+ * Validates that a range has valid order (start <= end)
50
+ */
51
+ validateRangeOrder(t) {
52
+ return !t || t.length !== 2 ? !0 : W(t[0], t[1]);
53
+ },
54
+ /**
55
+ * Sorts date strings chronologically
56
+ */
57
+ sortDates(t) {
58
+ return q(t);
59
+ },
60
+ /**
61
+ * Filters dates to only include selectable ones based on constraints
62
+ */
63
+ filterSelectableDates(t, e, s, n, i) {
64
+ return U(t, e, s, n, i);
65
+ }
66
+ }, tt = {
67
+ /**
68
+ * Determines the appropriate input type based on device
69
+ * Mobile Safari does not play well with type="date" amd custom datepickers
70
+ */
71
+ getInputType() {
72
+ return R.isIOS() ? "text" : "date";
73
+ }
74
+ }, D = {
75
+ /**
76
+ * Submits the form that contains the given element
77
+ */
78
+ submitForm(t) {
79
+ var s;
80
+ const e = (s = t.internals) == null ? void 0 : s.form;
81
+ e && e.requestSubmit();
82
+ },
83
+ /**
84
+ * Submits form if available, otherwise executes fallback action
85
+ */
86
+ submitFormOrFallback(t, e) {
87
+ const s = t == null ? void 0 : t.form;
88
+ s ? s.requestSubmit() : e();
89
+ },
90
+ /**
91
+ * Validates a date input and sets validity state
92
+ */
93
+ validateDateInput(t, e, s, n, i) {
94
+ var r, h, V, L;
95
+ const l = t.value;
96
+ l && (s && s > l ? e.setValidity(
97
+ { rangeUnderflow: !0 },
98
+ ((h = (r = i == null ? void 0 : i.forms) == null ? void 0 : r.messages) == null ? void 0 : h.rangeUnderflow) || "Value is below minimum",
99
+ t
100
+ ) : n && n < l && e.setValidity(
101
+ { rangeOverflow: !0 },
102
+ ((L = (V = i == null ? void 0 : i.forms) == null ? void 0 : V.messages) == null ? void 0 : L.rangeOverflow) || "Value is above maximum",
103
+ t
104
+ ));
105
+ }
106
+ }, A = {
107
+ /**
108
+ * Adds a date to selected dates if it's valid
109
+ */
110
+ addToSelected(t, e, s, n) {
111
+ const i = t.target;
112
+ if (!i.value) return;
113
+ const l = s ? j(s) : null, r = n ? j(n) : null, h = j(i.value.split(",")[0]);
114
+ h && !isNaN(h.getTime()) && (!l || h >= l) && (!r || h <= r) && e.value && e.value.handleDateSelect(h), i.value = "";
115
+ },
116
+ /**
117
+ * Handles calendar positioning based on viewport and input position
118
+ */
119
+ handleCalendarPosition(t, e, s = !1) {
120
+ var h;
121
+ if (!t.value || !e.value) return;
122
+ const n = ((h = e.value.parentElement) == null ? void 0 : h.getBoundingClientRect()) || e.value.getBoundingClientRect(), i = s ? n.height + 30 : n.height, l = t.value.getBoundingClientRect().height;
123
+ let r = s ? "calc(100% - 30px)" : "100%";
124
+ n && n.top + l > window.innerHeight && n.top - l > 0 && (r = `calc(100% - ${i}px - ${l}px)`), t.value.style.top = r;
125
+ }
126
+ }, I = {
127
+ /**
128
+ * Generates input classes for datepicker
129
+ */
130
+ getInputClasses(t, e, s, n, i, l) {
131
+ return {
132
+ "pkt-input": !0,
133
+ "pkt-datepicker__input": !0,
134
+ "pkt-input--fullwidth": t,
135
+ "pkt-datepicker--hasrangelabels": e,
136
+ "pkt-datepicker--multiple": s,
137
+ "pkt-datepicker--range": n,
138
+ "ios-readonly-hack": i === !1 && l === "text"
139
+ };
140
+ },
141
+ /**
142
+ * Generates button classes for datepicker
143
+ */
144
+ getButtonClasses() {
145
+ return {
146
+ "pkt-input-icon": !0,
147
+ "pkt-btn": !0,
148
+ "pkt-btn--icon-only": !0,
149
+ "pkt-btn--tertiary": !0,
150
+ "pkt-datepicker__calendar-button": !0
151
+ };
152
+ },
153
+ /**
154
+ * Generates range label classes
155
+ */
156
+ getRangeLabelClasses(t) {
157
+ return {
158
+ "pkt-input-prefix": t,
159
+ "pkt-hide": !t
160
+ };
161
+ }
162
+ }, F = {
163
+ /**
164
+ * Handles date selection from calendar events
165
+ */
166
+ processDateSelection(t, e, s) {
167
+ return !e && !s ? t[0] || "" : Array.isArray(t) ? t.join(",") : t;
168
+ },
169
+ /**
170
+ * Updates input values after calendar selection
171
+ */
172
+ updateInputValues(t, e, s, n, i, l) {
173
+ t.value && (n && (e != null && e.value) ? (t.value.value = s[0] ?? "", e.value.value = s[1] ?? "", l(t.value), l(e.value)) : i || (t.value.value = s.length ? s[0] : "", l(t.value)));
174
+ },
175
+ /**
176
+ * Processes blur events for range inputs
177
+ */
178
+ processRangeBlur(t, e, s, n, i) {
179
+ var r;
180
+ const l = t.target;
181
+ if (l.value) {
182
+ i(l);
183
+ const h = M(l.value);
184
+ h && e[0] !== l.value && e[1] && (n(), (r = s == null ? void 0 : s.value) == null || r.handleDateSelect(h));
185
+ } else e[0] && n();
186
+ }
187
+ }, T = {
188
+ /**
189
+ * Handles common keyboard interactions for datepicker inputs
190
+ */
191
+ handleInputKeydown(t, e, s, n, i, l) {
192
+ const { key: r } = t;
193
+ r === "," && (t.preventDefault(), l ? l(t) : i && i()), (r === "Space" || r === " ") && (t.preventDefault(), e(t)), r === "Enter" && (t.preventDefault(), s ? s() : n ? n() : i && i());
194
+ },
195
+ /**
196
+ * Handles keyboard interactions for calendar button
197
+ */
198
+ handleButtonKeydown(t, e) {
199
+ const { key: s } = t;
200
+ (s === "Enter" || s === " " || s === "Space") && (t.preventDefault(), e(t));
201
+ }
202
+ };
203
+ var et = Object.defineProperty, st = Object.getOwnPropertyDescriptor, P = (t, e, s, n) => {
204
+ for (var i = n > 1 ? void 0 : n ? st(e, s) : e, l = t.length - 1, r; l >= 0; l--)
205
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
206
+ return n && i && et(e, s, i), i;
207
+ };
208
+ let E = class extends O {
209
+ constructor() {
210
+ super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = X();
211
+ }
212
+ render() {
213
+ return this.classes = {
214
+ "pkt-date-tags": !0,
215
+ [this.className]: !0
216
+ }, d`
217
+ <div class=${x(this.classes)} aria-live="polite">
218
+ ${Array.isArray(this.dates) && this.dates[0] ? Q(
219
+ k.sortDates((this.dates ?? []).filter(Boolean)),
220
+ (t) => t,
221
+ (t) => {
222
+ var e;
223
+ return d` <pkt-tag
224
+ id=${this.idBase + t + "-tag"}
225
+ closeTag
226
+ @close=${() => {
227
+ this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: t }));
228
+ }}
229
+ .ariaLabel=${`${(e = this.strings) == null ? void 0 : e.calendar.deleteDate} ${z(t, this.dateformat)}`}
230
+ >
231
+ <time datetime=${t}>${z(t, this.dateformat)}</time>
232
+ </pkt-tag>`;
233
+ }
234
+ ) : B}
235
+ </div>
236
+ `;
237
+ }
238
+ };
239
+ P([
240
+ a({ type: Array })
241
+ ], E.prototype, "dates", 2);
242
+ P([
243
+ a({ type: String })
244
+ ], E.prototype, "dateformat", 2);
245
+ P([
246
+ a({ type: String, attribute: "class" })
247
+ ], E.prototype, "className", 2);
248
+ P([
249
+ a({ type: String, attribute: "id-base" })
250
+ ], E.prototype, "idBase", 2);
251
+ E = P([
252
+ _("pkt-date-tags")
253
+ ], E);
254
+ const it = {
255
+ dateformat: {
256
+ default: "dd.MM.yyyy"
257
+ },
258
+ weeknumbers: {
259
+ default: !1
260
+ },
261
+ withcontrols: {
262
+ default: !1
263
+ },
264
+ multiple: {
265
+ default: !1
266
+ },
267
+ range: {
268
+ default: !1
269
+ }
270
+ }, S = {
271
+ props: it
272
+ };
273
+ var at = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, v = (t, e, s, n) => {
274
+ for (var i = n > 1 ? void 0 : n ? nt(e, s) : e, l = t.length - 1, r; l >= 0; l--)
275
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
276
+ return n && i && at(e, s, i), i;
277
+ };
278
+ let g = class extends O {
279
+ constructor() {
280
+ super(...arguments), this.open = !1, this.multiple = !1, this.range = !1, this.weeknumbers = !1, this.withcontrols = !1, this.maxMultiple = null, this.selected = [], this.earliest = null, this.latest = null, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.popupRef = u(), this.calendarRef = u(), this.handleDocumentClick = (t) => {
281
+ if (!this.open) return;
282
+ const e = t.composedPath(), s = this.parentElement, n = this.popupRef.value;
283
+ !e.includes(this) && !e.includes(n) && !(s && e.includes(s)) && (this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })));
284
+ }, this.handleDocumentKeydown = (t) => {
285
+ this.open && t.key === "Escape" && (this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })));
286
+ };
287
+ }
288
+ firstUpdated() {
289
+ this.calRef = this.calendarRef, document.addEventListener("keydown", this.handleDocumentKeydown), document.addEventListener("click", this.handleDocumentClick);
290
+ }
291
+ disconnectedCallback() {
292
+ super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleDocumentKeydown);
293
+ }
294
+ show() {
295
+ var t;
296
+ this.open = !0, (t = this.calendarRef.value) == null || t.focus();
297
+ }
298
+ hide() {
299
+ this.open = !1;
300
+ }
301
+ toggle() {
302
+ this.open ? this.hide() : this.show();
303
+ }
304
+ contains(t) {
305
+ var e;
306
+ return !!t && !!((e = this.popupRef.value) != null && e.contains(t));
307
+ }
308
+ focusOnCurrentDate() {
309
+ const t = this.calendarRef.value;
310
+ t && typeof t.focusOnCurrentDate == "function" && t.focusOnCurrentDate();
311
+ }
312
+ addToSelected(t, e, s) {
313
+ if (typeof A.addToSelected == "function")
314
+ return A.addToSelected(t, this.calendarRef, e, s);
315
+ }
316
+ handleDateSelect(t) {
317
+ const e = this.calendarRef.value;
318
+ if (e && typeof e.handleDateSelect == "function") return e.handleDateSelect(t);
319
+ }
320
+ render() {
321
+ const t = { "pkt-calendar-popup": !0, show: this.open, hide: !this.open };
322
+ return d`
323
+ <div
324
+ class="${x(t)}"
325
+ ${c(this.popupRef)}
326
+ id="date-popup"
327
+ ?hidden=${!this.open}
328
+ aria-hidden="${!this.open}"
329
+ >
330
+ <pkt-calendar
331
+ ${c(this.calendarRef)}
332
+ ?multiple=${this.multiple}
333
+ ?range=${this.range}
334
+ ?weeknumbers=${this.weeknumbers}
335
+ ?withcontrols=${this.withcontrols}
336
+ .maxMultiple=${this.maxMultiple}
337
+ .selected=${this.selected}
338
+ .earliest=${this.earliest}
339
+ .latest=${this.latest}
340
+ .excludedates=${this.excludedates}
341
+ .excludeweekdays=${this.excludeweekdays}
342
+ .currentmonth=${this.currentmonth}
343
+ @date-selected=${(e) => {
344
+ this.selected = e.detail, this.dispatchEvent(
345
+ new CustomEvent("date-selected", { detail: e.detail, bubbles: !0, composed: !0 })
346
+ );
347
+ }}
348
+ @close=${() => {
349
+ this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
350
+ }}
351
+ ></pkt-calendar>
352
+ </div>
353
+ `;
354
+ }
355
+ };
356
+ v([
357
+ a({ type: Boolean, reflect: !0 })
358
+ ], g.prototype, "open", 2);
359
+ v([
360
+ a({ type: Boolean })
361
+ ], g.prototype, "multiple", 2);
362
+ v([
363
+ a({ type: Boolean })
364
+ ], g.prototype, "range", 2);
365
+ v([
366
+ a({ type: Boolean })
367
+ ], g.prototype, "weeknumbers", 2);
368
+ v([
369
+ a({ type: Boolean })
370
+ ], g.prototype, "withcontrols", 2);
371
+ v([
372
+ a({ type: Number })
373
+ ], g.prototype, "maxMultiple", 2);
374
+ v([
375
+ a({ type: Array })
376
+ ], g.prototype, "selected", 2);
377
+ v([
378
+ a({ type: String })
379
+ ], g.prototype, "earliest", 2);
380
+ v([
381
+ a({ type: String })
382
+ ], g.prototype, "latest", 2);
383
+ v([
384
+ a({ type: Array })
385
+ ], g.prototype, "excludedates", 2);
386
+ v([
387
+ a({ type: Array })
388
+ ], g.prototype, "excludeweekdays", 2);
389
+ v([
390
+ a({ type: String })
391
+ ], g.prototype, "currentmonth", 2);
392
+ g = v([
393
+ _("pkt-datepicker-popup")
394
+ ], g);
395
+ var lt = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, w = (t, e, s, n) => {
396
+ for (var i = n > 1 ? void 0 : n ? rt(e, s) : e, l = t.length - 1, r; l >= 0; l--)
397
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
398
+ return n && i && lt(e, s, i), i;
399
+ };
400
+ let y = class extends O {
401
+ constructor() {
402
+ super(...arguments), this.value = "", this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.strings = { calendar: { buttonAltText: "Åpne kalender" } }, this.inputRef = u(), this.btnRef = u();
403
+ }
404
+ get inputElement() {
405
+ return this.inputRef.value;
406
+ }
407
+ get buttonElement() {
408
+ return this.btnRef.value;
409
+ }
410
+ get isInputReadonly() {
411
+ return this.readonly || this.inputType === "text";
412
+ }
413
+ dispatchToggleCalendar(t) {
414
+ this.readonly || this.dispatchEvent(
415
+ new CustomEvent("toggle-calendar", {
416
+ detail: t,
417
+ bubbles: !0,
418
+ composed: !0
419
+ })
420
+ );
421
+ }
422
+ dispatchInput(t) {
423
+ this.dispatchEvent(
424
+ new CustomEvent("input-change", {
425
+ detail: t,
426
+ bubbles: !0,
427
+ composed: !0
428
+ })
429
+ );
430
+ }
431
+ dispatchFocus() {
432
+ this.dispatchEvent(
433
+ new CustomEvent("input-focus", {
434
+ bubbles: !0,
435
+ composed: !0
436
+ })
437
+ );
438
+ }
439
+ dispatchBlur(t) {
440
+ this.dispatchEvent(
441
+ new CustomEvent("input-blur", {
442
+ detail: t,
443
+ bubbles: !0,
444
+ composed: !0
445
+ })
446
+ );
447
+ }
448
+ dispatchChange(t) {
449
+ this.dispatchEvent(
450
+ new CustomEvent("input-changed", {
451
+ detail: t,
452
+ bubbles: !0,
453
+ composed: !0
454
+ })
455
+ );
456
+ }
457
+ dispatchManageValidity(t) {
458
+ this.dispatchEvent(
459
+ new CustomEvent("manage-validity", {
460
+ detail: t,
461
+ bubbles: !0,
462
+ composed: !0
463
+ })
464
+ );
465
+ }
466
+ createRenderRoot() {
467
+ return this;
468
+ }
469
+ render() {
470
+ return d`
471
+ <div class="pkt-input__container">
472
+ <input
473
+ class="${x(this.inputClasses)}"
474
+ .type=${this.inputType}
475
+ id="${this.id}-input"
476
+ .value=${this.value}
477
+ min=${C(this.min)}
478
+ max=${C(this.max)}
479
+ placeholder=${C(this.placeholder)}
480
+ ?readonly=${this.isInputReadonly}
481
+ aria-describedby="${this.id}-helptext"
482
+ @click=${(t) => {
483
+ t.preventDefault(), this.dispatchToggleCalendar(t);
484
+ }}
485
+ @touchend=${(t) => {
486
+ t.preventDefault(), this.dispatchToggleCalendar(t);
487
+ }}
488
+ ?disabled=${this.disabled}
489
+ @keydown=${(t) => T.handleInputKeydown(
490
+ t,
491
+ (e) => this.dispatchToggleCalendar(e),
492
+ () => D.submitFormOrFallback(this.internals, () => {
493
+ var e;
494
+ return (e = this.inputRef.value) == null ? void 0 : e.blur();
495
+ }),
496
+ void 0,
497
+ () => {
498
+ var e;
499
+ return (e = this.inputRef.value) == null ? void 0 : e.blur();
500
+ }
501
+ )}
502
+ @input=${(t) => {
503
+ this.dispatchInput(t), t.stopImmediatePropagation();
504
+ }}
505
+ @focus=${() => {
506
+ this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
507
+ }}
508
+ @blur=${(t) => {
509
+ this.dispatchBlur(t), this.dispatchManageValidity(t.target), this.dispatchEvent(
510
+ new CustomEvent("value-change", {
511
+ detail: t.target.value,
512
+ bubbles: !0,
513
+ composed: !0
514
+ })
515
+ );
516
+ }}
517
+ @change=${(t) => {
518
+ this.dispatchChange(t), t.stopImmediatePropagation();
519
+ }}
520
+ ${c(this.inputRef)}
521
+ />
522
+ <button
523
+ class="${x(I.getButtonClasses())}"
524
+ type="button"
525
+ @click=${(t) => this.dispatchToggleCalendar(t)}
526
+ @keydown=${(t) => T.handleButtonKeydown(t, (e) => this.dispatchToggleCalendar(e))}
527
+ ?disabled=${this.disabled}
528
+ ${c(this.btnRef)}
529
+ >
530
+ <pkt-icon name="calendar"></pkt-icon>
531
+ <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
532
+ </button>
533
+ </div>
534
+ `;
535
+ }
536
+ };
537
+ w([
538
+ a({ type: String })
539
+ ], y.prototype, "value", 2);
540
+ w([
541
+ a({ type: String })
542
+ ], y.prototype, "inputType", 2);
543
+ w([
544
+ a({ type: String })
545
+ ], y.prototype, "id", 2);
546
+ w([
547
+ a({ type: String })
548
+ ], y.prototype, "min", 2);
549
+ w([
550
+ a({ type: String })
551
+ ], y.prototype, "max", 2);
552
+ w([
553
+ a({ type: String })
554
+ ], y.prototype, "placeholder", 2);
555
+ w([
556
+ a({ type: Boolean })
557
+ ], y.prototype, "readonly", 2);
558
+ w([
559
+ a({ type: Boolean })
560
+ ], y.prototype, "disabled", 2);
561
+ w([
562
+ a({ type: Object })
563
+ ], y.prototype, "inputClasses", 2);
564
+ w([
565
+ a({ type: Object })
566
+ ], y.prototype, "internals", 2);
567
+ w([
568
+ a({ type: Object })
569
+ ], y.prototype, "strings", 2);
570
+ y = w([
571
+ _("pkt-datepicker-single")
572
+ ], y);
573
+ var pt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, b = (t, e, s, n) => {
574
+ for (var i = n > 1 ? void 0 : n ? ot(e, s) : e, l = t.length - 1, r; l >= 0; l--)
575
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
576
+ return n && i && pt(e, s, i), i;
577
+ };
578
+ let m = class extends O {
579
+ constructor() {
580
+ super(...arguments), this.value = [], this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.showRangeLabels = !1, this.inputClasses = {}, this.strings = { generic: { from: "Fra", to: "Til" } }, this.inputRef = u(), this.inputRefTo = u(), this.btnRef = u();
581
+ }
582
+ get inputElement() {
583
+ return this.inputRef.value;
584
+ }
585
+ get inputElementTo() {
586
+ return this.inputRefTo.value;
587
+ }
588
+ get buttonElement() {
589
+ return this.btnRef.value;
590
+ }
591
+ get isInputReadonly() {
592
+ return this.readonly || this.inputType === "text";
593
+ }
594
+ dispatchToggleCalendar(t) {
595
+ this.readonly || this.dispatchEvent(
596
+ new CustomEvent("toggle-calendar", {
597
+ detail: t,
598
+ bubbles: !0,
599
+ composed: !0
600
+ })
601
+ );
602
+ }
603
+ dispatchInput(t) {
604
+ this.dispatchEvent(
605
+ new CustomEvent("input-change", {
606
+ detail: t,
607
+ bubbles: !0,
608
+ composed: !0
609
+ })
610
+ );
611
+ }
612
+ dispatchFocus() {
613
+ this.dispatchEvent(
614
+ new CustomEvent("input-focus", {
615
+ bubbles: !0,
616
+ composed: !0
617
+ })
618
+ );
619
+ }
620
+ dispatchBlur(t) {
621
+ this.dispatchEvent(
622
+ new CustomEvent("input-blur", {
623
+ detail: t,
624
+ bubbles: !0,
625
+ composed: !0
626
+ })
627
+ );
628
+ }
629
+ dispatchChange(t) {
630
+ this.dispatchEvent(
631
+ new CustomEvent("input-changed", {
632
+ detail: t,
633
+ bubbles: !0,
634
+ composed: !0
635
+ })
636
+ );
637
+ }
638
+ dispatchManageValidity(t) {
639
+ this.dispatchEvent(
640
+ new CustomEvent("manage-validity", {
641
+ detail: t,
642
+ bubbles: !0,
643
+ composed: !0
644
+ })
645
+ );
646
+ }
647
+ createRenderRoot() {
648
+ return this;
649
+ }
650
+ render() {
651
+ const t = I.getRangeLabelClasses(this.showRangeLabels);
652
+ return d`
653
+ <div class="pkt-input__container">
654
+ ${this.showRangeLabels ? d` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : B}
655
+ <input
656
+ class=${x(this.inputClasses)}
657
+ .type=${this.inputType}
658
+ id="${this.id}-input"
659
+ .value=${this.value[0] ?? ""}
660
+ min=${C(this.min)}
661
+ max=${C(this.max)}
662
+ placeholder=${C(this.placeholder)}
663
+ ?readonly=${this.isInputReadonly}
664
+ ?disabled=${this.disabled}
665
+ @click=${(e) => {
666
+ e.preventDefault(), this.dispatchToggleCalendar(e);
667
+ }}
668
+ @touchend=${(e) => {
669
+ e.preventDefault(), this.dispatchToggleCalendar(e);
670
+ }}
671
+ @keydown=${(e) => T.handleInputKeydown(
672
+ e,
673
+ (s) => this.dispatchToggleCalendar(s),
674
+ () => D.submitFormOrFallback(
675
+ this.internals,
676
+ () => {
677
+ var s;
678
+ return (s = this.inputRefTo.value) == null ? void 0 : s.focus();
679
+ }
680
+ ),
681
+ () => {
682
+ var s;
683
+ return (s = this.inputRefTo.value) == null ? void 0 : s.focus();
684
+ },
685
+ () => {
686
+ var s;
687
+ return (s = this.inputRef.value) == null ? void 0 : s.blur();
688
+ }
689
+ )}
690
+ @input=${(e) => {
691
+ this.dispatchInput(e), e.stopImmediatePropagation();
692
+ }}
693
+ @focus=${() => {
694
+ this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
695
+ }}
696
+ @blur=${(e) => {
697
+ this.dispatchEvent(
698
+ new CustomEvent("range-blur", {
699
+ detail: {
700
+ event: e,
701
+ values: this.value,
702
+ inputType: "from"
703
+ },
704
+ bubbles: !0,
705
+ composed: !0
706
+ })
707
+ );
708
+ }}
709
+ @change=${(e) => {
710
+ e.stopImmediatePropagation();
711
+ }}
712
+ ${c(this.inputRef)}
713
+ />
714
+ <div class="${x(t)}" id="${this.id}-to-label">
715
+ ${this.strings.generic.to}
716
+ </div>
717
+ ${this.showRangeLabels ? B : d` <div class="pkt-input-separator">–</div> `}
718
+ <input
719
+ class=${x(this.inputClasses)}
720
+ .type=${this.inputType}
721
+ id="${this.id}-to"
722
+ aria-labelledby="${this.id}-to-label"
723
+ .value=${this.value[1] ?? ""}
724
+ min=${C(this.min)}
725
+ max=${C(this.max)}
726
+ placeholder=${C(this.placeholder)}
727
+ ?readonly=${this.isInputReadonly}
728
+ ?disabled=${this.disabled}
729
+ @click=${(e) => {
730
+ e.preventDefault(), this.dispatchToggleCalendar(e);
731
+ }}
732
+ @touchend=${(e) => {
733
+ e.preventDefault(), this.dispatchToggleCalendar(e);
734
+ }}
735
+ @keydown=${(e) => T.handleInputKeydown(
736
+ e,
737
+ (s) => this.dispatchToggleCalendar(s),
738
+ () => D.submitFormOrFallback(this.internals, () => {
739
+ var s;
740
+ return (s = this.inputRefTo.value) == null ? void 0 : s.blur();
741
+ }),
742
+ void 0,
743
+ () => {
744
+ var s;
745
+ return (s = this.inputRefTo.value) == null ? void 0 : s.blur();
746
+ }
747
+ )}
748
+ @input=${(e) => {
749
+ this.dispatchInput(e), e.stopImmediatePropagation();
750
+ }}
751
+ @focus=${() => {
752
+ this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
753
+ }}
754
+ @blur=${(e) => {
755
+ this.dispatchBlur(e), e.target.value && (this.dispatchManageValidity(e.target), this.dispatchEvent(
756
+ new CustomEvent("validate-date-input", {
757
+ detail: e.target,
758
+ bubbles: !0,
759
+ composed: !0
760
+ })
761
+ ), this.dispatchEvent(
762
+ new CustomEvent("handle-date-select", {
763
+ detail: e.target.value,
764
+ bubbles: !0,
765
+ composed: !0
766
+ })
767
+ ));
768
+ }}
769
+ @change=${(e) => {
770
+ this.dispatchChange(e), e.stopImmediatePropagation();
771
+ }}
772
+ ${c(this.inputRefTo)}
773
+ />
774
+ <button
775
+ class="${x(I.getButtonClasses())}"
776
+ type="button"
777
+ @click=${(e) => this.dispatchToggleCalendar(e)}
778
+ @keydown=${(e) => T.handleButtonKeydown(e, (s) => this.dispatchToggleCalendar(s))}
779
+ ?disabled=${this.disabled}
780
+ ${c(this.btnRef)}
781
+ >
782
+ <pkt-icon name="calendar"></pkt-icon>
783
+ <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
784
+ </button>
785
+ </div>
786
+ `;
787
+ }
788
+ };
789
+ b([
790
+ a({ type: Array })
791
+ ], m.prototype, "value", 2);
792
+ b([
793
+ a({ type: String })
794
+ ], m.prototype, "inputType", 2);
795
+ b([
796
+ a({ type: String })
797
+ ], m.prototype, "id", 2);
798
+ b([
799
+ a({ type: String })
800
+ ], m.prototype, "min", 2);
801
+ b([
802
+ a({ type: String })
803
+ ], m.prototype, "max", 2);
804
+ b([
805
+ a({ type: String })
806
+ ], m.prototype, "placeholder", 2);
807
+ b([
808
+ a({ type: Boolean })
809
+ ], m.prototype, "readonly", 2);
810
+ b([
811
+ a({ type: Boolean })
812
+ ], m.prototype, "disabled", 2);
813
+ b([
814
+ a({ type: Boolean })
815
+ ], m.prototype, "showRangeLabels", 2);
816
+ b([
817
+ a({ type: Object })
818
+ ], m.prototype, "inputClasses", 2);
819
+ b([
820
+ a({ type: Object })
821
+ ], m.prototype, "internals", 2);
822
+ b([
823
+ a({ type: Object })
824
+ ], m.prototype, "strings", 2);
825
+ m = b([
826
+ _("pkt-datepicker-range")
827
+ ], m);
828
+ var ut = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, $ = (t, e, s, n) => {
829
+ for (var i = n > 1 ? void 0 : n ? ht(e, s) : e, l = t.length - 1, r; l >= 0; l--)
830
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
831
+ return n && i && ut(e, s, i), i;
832
+ };
833
+ let f = class extends O {
834
+ constructor() {
835
+ super(...arguments), this.value = [], this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.strings = { calendar: { buttonAltText: "Åpne kalender" } }, this.inputRef = u(), this.btnRef = u();
836
+ }
837
+ get inputElement() {
838
+ return this.inputRef.value;
839
+ }
840
+ get buttonElement() {
841
+ return this.btnRef.value;
842
+ }
843
+ get isInputReadonly() {
844
+ return this.readonly || this.inputType === "text";
845
+ }
846
+ get isInputDisabled() {
847
+ return this.disabled || this.maxlength !== void 0 && this.maxlength !== null && this.value.length >= this.maxlength;
848
+ }
849
+ dispatchToggleCalendar(t) {
850
+ this.readonly || this.dispatchEvent(
851
+ new CustomEvent("toggle-calendar", {
852
+ detail: t,
853
+ bubbles: !0,
854
+ composed: !0
855
+ })
856
+ );
857
+ }
858
+ dispatchInput(t) {
859
+ this.dispatchEvent(
860
+ new CustomEvent("input-change", {
861
+ detail: t,
862
+ bubbles: !0,
863
+ composed: !0
864
+ })
865
+ );
866
+ }
867
+ dispatchFocus() {
868
+ this.dispatchEvent(
869
+ new CustomEvent("input-focus", {
870
+ bubbles: !0,
871
+ composed: !0
872
+ })
873
+ );
874
+ }
875
+ dispatchBlur(t) {
876
+ this.dispatchEvent(
877
+ new CustomEvent("input-blur", {
878
+ detail: t,
879
+ bubbles: !0,
880
+ composed: !0
881
+ })
882
+ );
883
+ }
884
+ dispatchChange(t) {
885
+ this.dispatchEvent(
886
+ new CustomEvent("input-changed", {
887
+ detail: t,
888
+ bubbles: !0,
889
+ composed: !0
890
+ })
891
+ );
892
+ }
893
+ dispatchAddToSelected(t) {
894
+ this.dispatchEvent(
895
+ new CustomEvent("add-to-selected", {
896
+ detail: t,
897
+ bubbles: !0,
898
+ composed: !0
899
+ })
900
+ );
901
+ }
902
+ createRenderRoot() {
903
+ return this;
904
+ }
905
+ render() {
906
+ return d`
907
+ <div class="pkt-input__container">
908
+ <input
909
+ class=${x(this.inputClasses)}
910
+ .type=${this.inputType}
911
+ id="${this.id}-input"
912
+ min=${C(this.min)}
913
+ max=${C(this.max)}
914
+ placeholder=${C(this.placeholder)}
915
+ ?readonly=${this.isInputReadonly}
916
+ ?disabled=${this.isInputDisabled}
917
+ @click=${(t) => {
918
+ t.preventDefault(), this.dispatchToggleCalendar(t);
919
+ }}
920
+ @touchend=${(t) => {
921
+ t.preventDefault(), this.dispatchToggleCalendar(t);
922
+ }}
923
+ @blur=${(t) => {
924
+ this.dispatchBlur(t), this.dispatchAddToSelected(t);
925
+ }}
926
+ @input=${(t) => {
927
+ this.dispatchInput(t), t.stopImmediatePropagation();
928
+ }}
929
+ @focus=${() => {
930
+ this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
931
+ }}
932
+ @keydown=${(t) => T.handleInputKeydown(
933
+ t,
934
+ (e) => this.dispatchToggleCalendar(e),
935
+ () => D.submitFormOrFallback(this.internals, () => {
936
+ var e;
937
+ return (e = this.inputRef.value) == null ? void 0 : e.blur();
938
+ }),
939
+ void 0,
940
+ void 0,
941
+ (e) => this.dispatchAddToSelected(e)
942
+ )}
943
+ @change=${(t) => {
944
+ this.dispatchChange(t), t.stopImmediatePropagation();
945
+ }}
946
+ ${c(this.inputRef)}
947
+ />
948
+ <button
949
+ class="${x(I.getButtonClasses())}"
950
+ type="button"
951
+ @click=${(t) => this.dispatchToggleCalendar(t)}
952
+ @keydown=${(t) => T.handleButtonKeydown(t, (e) => this.dispatchToggleCalendar(e))}
953
+ ?disabled=${this.disabled}
954
+ ${c(this.btnRef)}
955
+ >
956
+ <pkt-icon name="calendar"></pkt-icon>
957
+ <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
958
+ </button>
959
+ </div>
960
+ `;
961
+ }
962
+ };
963
+ $([
964
+ a({ type: Array })
965
+ ], f.prototype, "value", 2);
966
+ $([
967
+ a({ type: String })
968
+ ], f.prototype, "inputType", 2);
969
+ $([
970
+ a({ type: String })
971
+ ], f.prototype, "id", 2);
972
+ $([
973
+ a({ type: String })
974
+ ], f.prototype, "min", 2);
975
+ $([
976
+ a({ type: String })
977
+ ], f.prototype, "max", 2);
978
+ $([
979
+ a({ type: String })
980
+ ], f.prototype, "placeholder", 2);
981
+ $([
982
+ a({ type: Boolean })
983
+ ], f.prototype, "readonly", 2);
984
+ $([
985
+ a({ type: Boolean })
986
+ ], f.prototype, "disabled", 2);
987
+ $([
988
+ a({ type: Number })
989
+ ], f.prototype, "maxlength", 2);
990
+ $([
991
+ a({ type: Object })
992
+ ], f.prototype, "inputClasses", 2);
993
+ $([
994
+ a({ type: Object })
995
+ ], f.prototype, "internals", 2);
996
+ $([
997
+ a({ type: Object })
998
+ ], f.prototype, "strings", 2);
999
+ f = $([
1000
+ _("pkt-datepicker-multiple")
1001
+ ], f);
1002
+ var dt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, o = (t, e, s, n) => {
1003
+ for (var i = n > 1 ? void 0 : n ? ct(e, s) : e, l = t.length - 1, r; l >= 0; l--)
1004
+ (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
1005
+ return n && i && dt(e, s, i), i;
1006
+ };
1007
+ let p = class extends J {
1008
+ /**
1009
+ * Housekeeping / lifecycle methods
1010
+ */
1011
+ constructor() {
1012
+ super(), this._valueProperty = "", this.datepickerPopupRef = u(), this._value = [], this.label = "Datovelger", this.dateformat = S.props.dateformat.default, this.multiple = S.props.multiple.default, this.maxlength = null, this.range = S.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = S.props.weeknumbers.default, this.withcontrols = S.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = u(), this.popupRef = u(), this.helptextSlot = u(), this.singleInputRef = u(), this.rangeInputRef = u(), this.multipleInputRef = u(), this.addToSelected = (t) => {
1013
+ const e = this.datepickerPopupRef.value;
1014
+ return e && typeof e.addToSelected == "function" ? e.addToSelected(t, this.min, this.max) : A.addToSelected(t, this.calRef, this.min, this.max);
1015
+ }, this.slotController = new Y(this, this.helptextSlot);
1016
+ }
1017
+ get value() {
1018
+ return this._valueProperty;
1019
+ }
1020
+ set value(t) {
1021
+ const e = this._valueProperty;
1022
+ this._valueProperty = Array.isArray(t) ? t.join(",") : t || "", this.valueChanged(this._valueProperty, e), this.requestUpdate("value", e);
1023
+ }
1024
+ /**
1025
+ * Computed properties
1026
+ */
1027
+ get inputType() {
1028
+ return tt.getInputType();
1029
+ }
1030
+ connectedCallback() {
1031
+ super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone), this.name = k.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name;
1032
+ }
1033
+ disconnectedCallback() {
1034
+ super.disconnectedCallback();
1035
+ }
1036
+ onInput() {
1037
+ this.dispatchEvent(new Event("input", { bubbles: !0 }));
1038
+ }
1039
+ valueChanged(t, e) {
1040
+ if (t === e) return;
1041
+ const s = k.parseValue(t), n = this.multiple && s.length > 1 ? k.filterSelectableDates(
1042
+ s,
1043
+ this.min,
1044
+ this.max,
1045
+ this.excludedates,
1046
+ this.excludeweekdays
1047
+ ) : s;
1048
+ if (this.range && !k.validateRangeOrder(n)) {
1049
+ this._value = [], this._valueProperty = "", super.valueChanged("", e);
1050
+ return;
1051
+ }
1052
+ this._value = n;
1053
+ const i = k.formatValue(n);
1054
+ this._valueProperty !== i && (this._valueProperty = i), super.valueChanged(i, e);
1055
+ }
1056
+ attributeChangedCallback(t, e, s) {
1057
+ t === "value" && this.value !== e && this.valueChanged(s, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = k.normalizeStringArray(s || "")), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = k.normalizeStringArray(s || "")), super.attributeChangedCallback(t, e, s);
1058
+ }
1059
+ updated(t) {
1060
+ if (t.has("value")) {
1061
+ const e = Array.isArray(this.value) ? this.value.join(",") : this.value, s = t.get("value"), n = Array.isArray(s) ? s.join(",") : s;
1062
+ this.valueChanged(e, n);
1063
+ }
1064
+ (t.has("multiple") || t.has("range")) && (this.name = k.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name), t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = k.parseValue(this.value) : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && !this.range && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(t);
1065
+ }
1066
+ /**
1067
+ * Element references
1068
+ */
1069
+ // Override the inputRef and inputRefTo for compatibility
1070
+ get inputRef() {
1071
+ return { value: this.currentInputElement };
1072
+ }
1073
+ get inputRefTo() {
1074
+ return { value: this.currentInputElementTo };
1075
+ }
1076
+ // Getters for backward compatibility with input refs
1077
+ get currentInputElement() {
1078
+ var t, e, s;
1079
+ return this.multiple ? (t = this.multipleInputRef.value) == null ? void 0 : t.inputElement : this.range ? (e = this.rangeInputRef.value) == null ? void 0 : e.inputElement : (s = this.singleInputRef.value) == null ? void 0 : s.inputElement;
1080
+ }
1081
+ get currentInputElementTo() {
1082
+ var t;
1083
+ if (this.range)
1084
+ return (t = this.rangeInputRef.value) == null ? void 0 : t.inputElementTo;
1085
+ }
1086
+ get currentButtonElement() {
1087
+ var t, e, s;
1088
+ return this.multiple ? (t = this.multipleInputRef.value) == null ? void 0 : t.buttonElement : this.range ? (e = this.rangeInputRef.value) == null ? void 0 : e.buttonElement : (s = this.singleInputRef.value) == null ? void 0 : s.buttonElement;
1089
+ }
1090
+ // Override btnRef for compatibility
1091
+ get btnRef() {
1092
+ return { value: this.currentButtonElement };
1093
+ }
1094
+ /**
1095
+ * Rendering
1096
+ */
1097
+ renderInput() {
1098
+ return d`
1099
+ <pkt-datepicker-single
1100
+ .value=${this._value[0] ?? ""}
1101
+ .inputType=${this.inputType}
1102
+ .id=${this.id}
1103
+ .min=${this.min}
1104
+ .max=${this.max}
1105
+ .placeholder=${this.placeholder}
1106
+ .readonly=${this.readonly}
1107
+ .disabled=${this.disabled}
1108
+ .inputClasses=${this.inputClasses}
1109
+ .internals=${this.internals}
1110
+ .strings=${this.strings}
1111
+ @toggle-calendar=${(t) => this.toggleCalendar(t.detail)}
1112
+ @input-change=${() => this.onInput()}
1113
+ @input-focus=${() => this.onFocus()}
1114
+ @input-blur=${(t) => {
1115
+ var e;
1116
+ (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
1117
+ }}
1118
+ @manage-validity=${(t) => this.manageValidity(t.detail)}
1119
+ @value-change=${(t) => {
1120
+ this.value = t.detail;
1121
+ }}
1122
+ @input-changed=${() => {
1123
+ this.touched = !0;
1124
+ }}
1125
+ ${c(this.singleInputRef)}
1126
+ ></pkt-datepicker-single>
1127
+ `;
1128
+ }
1129
+ renderRangeInput() {
1130
+ return d`
1131
+ <pkt-datepicker-range
1132
+ .value=${this._value}
1133
+ .inputType=${this.inputType}
1134
+ .id=${this.id}
1135
+ .min=${this.min}
1136
+ .max=${this.max}
1137
+ .placeholder=${this.placeholder}
1138
+ .readonly=${this.readonly}
1139
+ .disabled=${this.disabled}
1140
+ .showRangeLabels=${this.showRangeLabels}
1141
+ .inputClasses=${this.inputClasses}
1142
+ .internals=${this.internals}
1143
+ .strings=${this.strings}
1144
+ @toggle-calendar=${(t) => this.toggleCalendar(t.detail)}
1145
+ @input-change=${() => this.onInput()}
1146
+ @input-focus=${() => this.onFocus()}
1147
+ @input-blur=${(t) => {
1148
+ var e;
1149
+ (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
1150
+ }}
1151
+ @range-blur=${(t) => {
1152
+ F.processRangeBlur(
1153
+ t.detail.event,
1154
+ t.detail.values,
1155
+ this.calRef,
1156
+ () => this.clearInputValue(),
1157
+ (e) => this.manageValidity(e)
1158
+ );
1159
+ }}
1160
+ @manage-validity=${(t) => this.manageValidity(t.detail)}
1161
+ @validate-date-input=${(t) => {
1162
+ D.validateDateInput(t.detail, this.internals, this.min, this.max, this.strings);
1163
+ }}
1164
+ @handle-date-select=${(t) => {
1165
+ var s, n;
1166
+ const e = M(t.detail);
1167
+ e && this._value[1] !== H(e) && ((n = (s = this.calRef) == null ? void 0 : s.value) == null || n.handleDateSelect(e));
1168
+ }}
1169
+ @input-changed=${() => {
1170
+ this.touched = !0;
1171
+ }}
1172
+ ${c(this.rangeInputRef)}
1173
+ ></pkt-datepicker-range>
1174
+ `;
1175
+ }
1176
+ renderMultipleInput() {
1177
+ return d`
1178
+ <pkt-datepicker-multiple
1179
+ .value=${this._value}
1180
+ .inputType=${this.inputType}
1181
+ .id=${this.id}
1182
+ .min=${this.min}
1183
+ .max=${this.max}
1184
+ .placeholder=${this.placeholder}
1185
+ .readonly=${this.readonly}
1186
+ .disabled=${this.disabled}
1187
+ .maxlength=${this.maxlength}
1188
+ .inputClasses=${this.inputClasses}
1189
+ .internals=${this.internals}
1190
+ .strings=${this.strings}
1191
+ @toggle-calendar=${(t) => this.toggleCalendar(t.detail)}
1192
+ @input-change=${() => this.onInput()}
1193
+ @input-focus=${() => this.onFocus()}
1194
+ @input-blur=${(t) => {
1195
+ var e;
1196
+ (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
1197
+ }}
1198
+ @add-to-selected=${(t) => this.addToSelected(t.detail)}
1199
+ @input-changed=${() => {
1200
+ this.touched = !0;
1201
+ }}
1202
+ ${c(this.multipleInputRef)}
1203
+ ></pkt-datepicker-multiple>
1204
+ `;
1205
+ }
1206
+ renderCalendar() {
1207
+ return d`
1208
+ <pkt-datepicker-popup
1209
+ class="pkt-contents"
1210
+ ?open=${this.calendarOpen}
1211
+ ?multiple=${this.multiple}
1212
+ ?range=${this.range}
1213
+ ?weeknumbers=${this.weeknumbers}
1214
+ ?withcontrols=${this.withcontrols}
1215
+ .maxMultiple=${this.maxlength}
1216
+ .selected=${this._value}
1217
+ .earliest=${this.min}
1218
+ .latest=${this.max}
1219
+ .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
1220
+ .excludeweekdays=${this.excludeweekdays}
1221
+ .currentmonth=${this.currentmonth ? G(this.currentmonth) : null}
1222
+ @date-selected=${(t) => {
1223
+ this.value = F.processDateSelection(t.detail, this.multiple, this.range), this._value = t.detail, F.updateInputValues(
1224
+ this.inputRef,
1225
+ this.inputRefTo,
1226
+ this._value,
1227
+ this.range,
1228
+ this.multiple,
1229
+ (e) => this.manageValidity(e)
1230
+ );
1231
+ }}
1232
+ @close=${() => {
1233
+ this.onBlur(), this.hideCalendar();
1234
+ }}
1235
+ ${c(this.datepickerPopupRef)}
1236
+ ></pkt-datepicker-popup>
1237
+ `;
1238
+ }
1239
+ render() {
1240
+ return this.inputClasses = I.getInputClasses(
1241
+ this.fullwidth,
1242
+ this.showRangeLabels,
1243
+ this.multiple,
1244
+ this.range,
1245
+ this.readonly,
1246
+ this.inputType
1247
+ ), d`
1248
+ <pkt-input-wrapper
1249
+ label="${this.label}"
1250
+ forId="${this.id}-input"
1251
+ ?counter=${this.multiple && !!this.maxlength}
1252
+ .counterCurrent=${this.value ? this._value.length : 0}
1253
+ .counterMaxLength=${this.maxlength}
1254
+ ?disabled=${this.disabled}
1255
+ ?hasError=${this.hasError}
1256
+ ?hasFieldset=${this.hasFieldset}
1257
+ ?inline=${this.inline}
1258
+ ?required=${this.required}
1259
+ ?optionalTag=${this.optionalTag}
1260
+ ?requiredTag=${this.requiredTag}
1261
+ ?useWrapper=${this.useWrapper}
1262
+ .optionalText=${this.optionalText}
1263
+ .requiredText=${this.requiredText}
1264
+ .tagText=${this.tagText}
1265
+ .errorMessage=${this.errorMessage}
1266
+ .helptext=${this.helptext}
1267
+ .helptextDropdown=${this.helptextDropdown}
1268
+ .helptextDropdownButton=${this.helptextDropdownButton}
1269
+ .ariaDescribedBy=${this.ariaDescribedBy}
1270
+ class="pkt-datepicker"
1271
+ >
1272
+ <div class="pkt-contents" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>
1273
+ ${this.multiple ? d`<pkt-date-tags
1274
+ .dates=${this._value}
1275
+ dateformat=${this.dateformat}
1276
+ strings=${this.strings}
1277
+ id-base=${this.id}
1278
+ @date-tag-removed=${(t) => {
1279
+ var n;
1280
+ const e = this.datepickerPopupRef.value, s = M(t.detail);
1281
+ e && s && typeof e.handleDateSelect == "function" ? e.handleDateSelect(s) : (n = this.calRef.value) == null || n.handleDateSelect(s);
1282
+ }}
1283
+ ></pkt-date-tags>` : B}
1284
+ <div
1285
+ class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
1286
+ >
1287
+ ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
1288
+ </div>
1289
+ </pkt-input-wrapper>
1290
+ ${this.renderCalendar()}
1291
+ `;
1292
+ }
1293
+ /**
1294
+ * Handlers
1295
+ */
1296
+ handleCalendarPosition() {
1297
+ const t = this.multiple && !!this.maxlength;
1298
+ A.handleCalendarPosition(this.popupRef, this.inputRef, t);
1299
+ }
1300
+ async showCalendar() {
1301
+ var e;
1302
+ const t = this.datepickerPopupRef.value;
1303
+ if (this.calendarOpen = !0, t && typeof t.show == "function") {
1304
+ t.show(), R.isIOS() && t.focusOnCurrentDate();
1305
+ return;
1306
+ }
1307
+ await Z(20), this.handleCalendarPosition(), R.isIOS() && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
1308
+ }
1309
+ hideCalendar() {
1310
+ const t = this.datepickerPopupRef.value;
1311
+ if (this.calendarOpen = !1, t && typeof t.hide == "function") return t.hide();
1312
+ }
1313
+ async toggleCalendar(t) {
1314
+ t.preventDefault();
1315
+ const e = this.datepickerPopupRef.value;
1316
+ if (e && typeof e.toggle == "function") {
1317
+ const s = !!e.open;
1318
+ e.toggle(), this.calendarOpen = !s;
1319
+ return;
1320
+ }
1321
+ this.calendarOpen ? this.hideCalendar() : this.showCalendar();
1322
+ }
1323
+ clearInputValue() {
1324
+ this._value = [], this.value = "";
1325
+ }
1326
+ };
1327
+ o([
1328
+ a({ type: String, reflect: !0 })
1329
+ ], p.prototype, "value", 1);
1330
+ o([
1331
+ a({ type: Array })
1332
+ ], p.prototype, "_value", 2);
1333
+ o([
1334
+ a({ type: String, reflect: !0 })
1335
+ ], p.prototype, "label", 2);
1336
+ o([
1337
+ a({ type: String })
1338
+ ], p.prototype, "dateformat", 2);
1339
+ o([
1340
+ a({ type: Boolean, reflect: !0 })
1341
+ ], p.prototype, "multiple", 2);
1342
+ o([
1343
+ a({ type: Number, reflect: !0 })
1344
+ ], p.prototype, "maxlength", 2);
1345
+ o([
1346
+ a({ type: Boolean, reflect: !0 })
1347
+ ], p.prototype, "range", 2);
1348
+ o([
1349
+ a({ type: Boolean })
1350
+ ], p.prototype, "showRangeLabels", 2);
1351
+ o([
1352
+ a({ type: String, reflect: !0 })
1353
+ ], p.prototype, "min", 2);
1354
+ o([
1355
+ a({ type: String, reflect: !0 })
1356
+ ], p.prototype, "max", 2);
1357
+ o([
1358
+ a({ type: Boolean })
1359
+ ], p.prototype, "weeknumbers", 2);
1360
+ o([
1361
+ a({ type: Boolean, reflect: !0 })
1362
+ ], p.prototype, "withcontrols", 2);
1363
+ o([
1364
+ a({ converter: K.csvToArray })
1365
+ ], p.prototype, "excludedates", 2);
1366
+ o([
1367
+ a({ converter: K.csvToArray })
1368
+ ], p.prototype, "excludeweekdays", 2);
1369
+ o([
1370
+ a({ type: String })
1371
+ ], p.prototype, "currentmonth", 2);
1372
+ o([
1373
+ a({ type: Boolean, reflect: !0 })
1374
+ ], p.prototype, "calendarOpen", 2);
1375
+ o([
1376
+ a({ type: String })
1377
+ ], p.prototype, "timezone", 2);
1378
+ o([
1379
+ N()
1380
+ ], p.prototype, "inputClasses", 2);
1381
+ p = o([
1382
+ _("pkt-datepicker")
1383
+ ], p);
1384
+ export {
1385
+ E as P,
1386
+ p as a,
1387
+ y as b,
1388
+ m as c,
1389
+ f as d
1390
+ };