@oslokommune/punkt-elements 13.5.13 → 13.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/{calendar-CJSxvwAq.js → calendar-DJVaC_zI.js} +3 -3
- package/dist/datepicker-CA1a4oIH.cjs +169 -0
- package/dist/{datepicker-F3TwE9o7.js → datepicker-X2o0j5kW.js} +144 -107
- package/dist/index.d.ts +23 -1
- package/dist/pkt-calendar.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +3 -3
- package/dist/pkt-index.cjs +3 -3
- package/dist/pkt-index.js +48 -47
- package/package.json +2 -2
- package/src/components/datepicker/date-tags.test.ts +126 -0
- package/src/components/datepicker/date-tags.ts +59 -0
- package/src/components/datepicker/datepicker.ts +13 -35
- package/src/components/index.ts +1 -0
- package/dist/datepicker-DonUad47.cjs +0 -164
|
@@ -1,16 +1,68 @@
|
|
|
1
1
|
import { e as f } from "./class-map-BpTj9gtz.js";
|
|
2
|
-
import { o
|
|
3
|
-
import {
|
|
4
|
-
import { r as
|
|
5
|
-
import {
|
|
6
|
-
import { P as
|
|
7
|
-
import { e as m, n as
|
|
8
|
-
import { c as S } from "./repeat-C8BeHwYx.js";
|
|
2
|
+
import { o } from "./if-defined-CmuO4Vz9.js";
|
|
3
|
+
import { P as _, E as y, x as p, n as r, a as w } from "./element-CgEWt74-.js";
|
|
4
|
+
import { r as R } from "./state-Bo2bck5_.js";
|
|
5
|
+
import { f as k, n as $, a as b, b as S, p as T, d as C } from "./calendar-DJVaC_zI.js";
|
|
6
|
+
import { P as D } from "./input-element-NnrDmp4r.js";
|
|
7
|
+
import { e as m, n as d } from "./ref-BBYSqgeW.js";
|
|
9
8
|
import "./icon-CC1js8eR.js";
|
|
10
9
|
import "./input-wrapper-Dr__Sxql.js";
|
|
10
|
+
import { c as P } from "./repeat-C8BeHwYx.js";
|
|
11
11
|
import "./tag-DyXzTY68.js";
|
|
12
|
-
import {
|
|
13
|
-
|
|
12
|
+
import { u as B } from "./stringutils-DJjRa8dG.js";
|
|
13
|
+
import { P as I } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
14
|
+
var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, v = (t, e, i, a) => {
|
|
15
|
+
for (var s = a > 1 ? void 0 : a ? A(e, i) : e, h = t.length - 1, u; h >= 0; h--)
|
|
16
|
+
(u = t[h]) && (s = (a ? u(e, i, s) : u(s)) || s);
|
|
17
|
+
return a && s && O(e, i, s), s;
|
|
18
|
+
};
|
|
19
|
+
let g = class extends _ {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = B();
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
return this.classes = {
|
|
25
|
+
"pkt-date-tags": !0,
|
|
26
|
+
[this.className]: !0
|
|
27
|
+
}, p`
|
|
28
|
+
<div class=${f(this.classes)} aria-live="polite">
|
|
29
|
+
${Array.isArray(this.dates) && this.dates[0] ? P(
|
|
30
|
+
(this.dates ?? []).filter(Boolean).sort(),
|
|
31
|
+
(t) => t,
|
|
32
|
+
(t) => {
|
|
33
|
+
var e;
|
|
34
|
+
return p` <pkt-tag
|
|
35
|
+
id=${this.idBase + t + "-tag"}
|
|
36
|
+
closeTag
|
|
37
|
+
@close=${() => {
|
|
38
|
+
this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: t }));
|
|
39
|
+
}}
|
|
40
|
+
.ariaLabel=${`${(e = this.strings) == null ? void 0 : e.calendar.deleteDate} ${k(t, this.dateformat)}`}
|
|
41
|
+
>
|
|
42
|
+
<time datetime=${t}>${k(t, this.dateformat)}</time>
|
|
43
|
+
</pkt-tag>`;
|
|
44
|
+
}
|
|
45
|
+
) : y}
|
|
46
|
+
</div>
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
v([
|
|
51
|
+
r({ type: Array })
|
|
52
|
+
], g.prototype, "dates", 2);
|
|
53
|
+
v([
|
|
54
|
+
r({ type: String })
|
|
55
|
+
], g.prototype, "dateformat", 2);
|
|
56
|
+
v([
|
|
57
|
+
r({ type: String, attribute: "class" })
|
|
58
|
+
], g.prototype, "className", 2);
|
|
59
|
+
v([
|
|
60
|
+
r({ type: String, attribute: "id-base" })
|
|
61
|
+
], g.prototype, "idBase", 2);
|
|
62
|
+
g = v([
|
|
63
|
+
w("pkt-date-tags")
|
|
64
|
+
], g);
|
|
65
|
+
const E = {
|
|
14
66
|
dateformat: {
|
|
15
67
|
default: "dd.MM.yyyy"
|
|
16
68
|
},
|
|
@@ -33,15 +85,15 @@ const D = {
|
|
|
33
85
|
default: !1
|
|
34
86
|
}
|
|
35
87
|
}, c = {
|
|
36
|
-
props:
|
|
88
|
+
props: E
|
|
37
89
|
};
|
|
38
|
-
var
|
|
39
|
-
for (var
|
|
40
|
-
(
|
|
41
|
-
return
|
|
90
|
+
var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
|
|
91
|
+
for (var s = a > 1 ? void 0 : a ? M(e, i) : e, h = t.length - 1, u; h >= 0; h--)
|
|
92
|
+
(u = t[h]) && (s = (a ? u(e, i, s) : u(s)) || s);
|
|
93
|
+
return a && s && L(e, i, s), s;
|
|
42
94
|
};
|
|
43
|
-
const
|
|
44
|
-
let l = class extends
|
|
95
|
+
const x = (t) => new Promise((e) => setTimeout(e, t));
|
|
96
|
+
let l = class extends D {
|
|
45
97
|
/**
|
|
46
98
|
* Housekeeping / lifecycle methods
|
|
47
99
|
*/
|
|
@@ -49,9 +101,9 @@ let l = class extends _ {
|
|
|
49
101
|
super(), this._valueProperty = "", this._value = [], this.label = "Datovelger", this.dateformat = c.props.dateformat.default, this.multiple = c.props.multiple.default, this.maxlength = null, this.range = c.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = c.props.weeknumbers.default, this.withcontrols = c.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = m(), this.inputRefTo = m(), this.btnRef = m(), this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.addToSelected = (t) => {
|
|
50
102
|
const e = t.target;
|
|
51
103
|
if (!e.value) return;
|
|
52
|
-
const i = this.min ?
|
|
53
|
-
|
|
54
|
-
}, this.slotController = new
|
|
104
|
+
const i = this.min ? $(this.min) : null, a = this.max ? $(this.max) : null, s = $(e.value.split(",")[0]);
|
|
105
|
+
s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
|
|
106
|
+
}, this.slotController = new I(this, this.helptextSlot);
|
|
55
107
|
}
|
|
56
108
|
get value() {
|
|
57
109
|
return this._valueProperty;
|
|
@@ -64,11 +116,11 @@ let l = class extends _ {
|
|
|
64
116
|
super.connectedCallback();
|
|
65
117
|
const t = navigator.userAgent, e = /iP(hone|od|ad)/.test(t);
|
|
66
118
|
this.inputType = e ? "text" : "date", document && document.body.addEventListener("click", (i) => {
|
|
67
|
-
var
|
|
68
|
-
(
|
|
119
|
+
var a, s;
|
|
120
|
+
(a = this.inputRef) != null && a.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(i.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(i.target)) && !this.btnRef.value.contains(i.target) && !i.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
|
|
69
121
|
}), document && document.body.addEventListener("keydown", (i) => {
|
|
70
122
|
i.key === "Escape" && this.calendarOpen && this.hideCalendar();
|
|
71
|
-
}), this.value && (this._value = Array.isArray(this.value) ? this.value.filter(Boolean) : this.value.split(",").filter(Boolean)), this.min = this.min || c.props.min.default, this.max = this.max || c.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
|
|
123
|
+
}), this.value && (this._value = Array.isArray(this.value) ? this.value.filter(Boolean) : this.value.split(",").filter(Boolean)), this.min = this.min || c.props.min.default, this.max = this.max || c.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 x(20), this.handleCalendarPosition());
|
|
72
124
|
}
|
|
73
125
|
disconnectedCallback() {
|
|
74
126
|
super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
|
|
@@ -83,16 +135,16 @@ let l = class extends _ {
|
|
|
83
135
|
if (t === e) return;
|
|
84
136
|
let i = [];
|
|
85
137
|
t && (typeof t == "string" ? i = t.split(",").filter(Boolean) : i = String(t).split(",").filter(Boolean)), this._value = i;
|
|
86
|
-
const
|
|
87
|
-
this._valueProperty !==
|
|
138
|
+
const a = i.join(",");
|
|
139
|
+
this._valueProperty !== a && (this._valueProperty = a), super.valueChanged(a, e);
|
|
88
140
|
}
|
|
89
141
|
attributeChangedCallback(t, e, i) {
|
|
90
142
|
t === "value" && this.value !== e && this.valueChanged(i, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(t, e, i);
|
|
91
143
|
}
|
|
92
144
|
updated(t) {
|
|
93
145
|
if (t.has("value")) {
|
|
94
|
-
const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"),
|
|
95
|
-
this.valueChanged(e,
|
|
146
|
+
const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"), a = Array.isArray(i) ? i.join(",") : i;
|
|
147
|
+
this.valueChanged(e, a);
|
|
96
148
|
}
|
|
97
149
|
t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = typeof this.value == "string" ? this.value ? this.value.split(",").filter(Boolean) : [] : [] : !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);
|
|
98
150
|
}
|
|
@@ -100,15 +152,15 @@ let l = class extends _ {
|
|
|
100
152
|
* Rendering
|
|
101
153
|
*/
|
|
102
154
|
renderInput() {
|
|
103
|
-
return
|
|
155
|
+
return p`
|
|
104
156
|
<input
|
|
105
157
|
class="${f(this.inputClasses)}"
|
|
106
158
|
.type=${this.inputType}
|
|
107
159
|
id="${this.id}-input"
|
|
108
160
|
.value=${this._value[0] ?? ""}
|
|
109
|
-
min=${
|
|
110
|
-
max=${
|
|
111
|
-
placeholder=${
|
|
161
|
+
min=${o(this.min)}
|
|
162
|
+
max=${o(this.max)}
|
|
163
|
+
placeholder=${o(this.placeholder)}
|
|
112
164
|
?readonly=${this.readonly}
|
|
113
165
|
aria-describedby="${this.id}-helptext"
|
|
114
166
|
@click=${(t) => {
|
|
@@ -118,8 +170,8 @@ let l = class extends _ {
|
|
|
118
170
|
@keydown=${(t) => {
|
|
119
171
|
var e, i;
|
|
120
172
|
if (t.key === "," && ((e = this.inputRef.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t)), t.key === "Enter") {
|
|
121
|
-
const
|
|
122
|
-
|
|
173
|
+
const a = this.internals.form;
|
|
174
|
+
a ? a.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
|
|
123
175
|
}
|
|
124
176
|
}}
|
|
125
177
|
@input=${(t) => {
|
|
@@ -135,7 +187,7 @@ let l = class extends _ {
|
|
|
135
187
|
@change=${(t) => {
|
|
136
188
|
this.touched = !0, t.stopImmediatePropagation();
|
|
137
189
|
}}
|
|
138
|
-
${
|
|
190
|
+
${d(this.inputRef)}
|
|
139
191
|
/>
|
|
140
192
|
`;
|
|
141
193
|
}
|
|
@@ -144,26 +196,26 @@ let l = class extends _ {
|
|
|
144
196
|
"pkt-input-prefix": this.showRangeLabels,
|
|
145
197
|
"pkt-hide": !this.showRangeLabels
|
|
146
198
|
};
|
|
147
|
-
return
|
|
148
|
-
${this.showRangeLabels ?
|
|
199
|
+
return p`
|
|
200
|
+
${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : y}
|
|
149
201
|
<input
|
|
150
202
|
class=${f(this.inputClasses)}
|
|
151
203
|
.type=${this.inputType}
|
|
152
204
|
id="${this.id}-input"
|
|
153
205
|
.value=${this._value[0] ?? ""}
|
|
154
|
-
min=${
|
|
155
|
-
max=${
|
|
156
|
-
placeholder=${
|
|
206
|
+
min=${o(this.min)}
|
|
207
|
+
max=${o(this.max)}
|
|
208
|
+
placeholder=${o(this.placeholder)}
|
|
157
209
|
?readonly=${this.readonly}
|
|
158
210
|
?disabled=${this.disabled}
|
|
159
211
|
@click=${(e) => {
|
|
160
212
|
e.preventDefault(), this.showCalendar();
|
|
161
213
|
}}
|
|
162
214
|
@keydown=${(e) => {
|
|
163
|
-
var i,
|
|
215
|
+
var i, a;
|
|
164
216
|
if (e.key === "," && ((i = this.inputRef.value) == null || i.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e)), e.key === "Enter") {
|
|
165
|
-
const
|
|
166
|
-
|
|
217
|
+
const s = this.internals.form;
|
|
218
|
+
s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.focus();
|
|
167
219
|
}
|
|
168
220
|
}}
|
|
169
221
|
@input=${(e) => {
|
|
@@ -173,41 +225,41 @@ let l = class extends _ {
|
|
|
173
225
|
this.onFocus(), this.isMobileSafari && this.showCalendar();
|
|
174
226
|
}}
|
|
175
227
|
@blur=${(e) => {
|
|
176
|
-
var i,
|
|
228
|
+
var i, a;
|
|
177
229
|
if (e.target.value) {
|
|
178
230
|
this.manageValidity(e.target);
|
|
179
|
-
const
|
|
180
|
-
|
|
231
|
+
const s = b(e.target.value);
|
|
232
|
+
s && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (a = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
|
|
181
233
|
} else this._value[0] && this.clearInputValue();
|
|
182
234
|
}}
|
|
183
235
|
@change=${(e) => {
|
|
184
236
|
e.stopImmediatePropagation();
|
|
185
237
|
}}
|
|
186
|
-
${
|
|
238
|
+
${d(this.inputRef)}
|
|
187
239
|
/>
|
|
188
240
|
<div class="${f(t)}" id="${this.id}-to-label">
|
|
189
241
|
${this.strings.generic.to}
|
|
190
242
|
</div>
|
|
191
|
-
${this.showRangeLabels ?
|
|
243
|
+
${this.showRangeLabels ? y : p` <div class="pkt-input-separator">–</div> `}
|
|
192
244
|
<input
|
|
193
245
|
class=${f(this.inputClasses)}
|
|
194
246
|
.type=${this.inputType}
|
|
195
247
|
id="${this.id}-to"
|
|
196
248
|
aria-labelledby="${this.id}-to-label"
|
|
197
249
|
.value=${this._value[1] ?? ""}
|
|
198
|
-
min=${
|
|
199
|
-
max=${
|
|
200
|
-
placeholder=${
|
|
250
|
+
min=${o(this.min)}
|
|
251
|
+
max=${o(this.max)}
|
|
252
|
+
placeholder=${o(this.placeholder)}
|
|
201
253
|
?readonly=${this.readonly}
|
|
202
254
|
?disabled=${this.disabled}
|
|
203
255
|
@click=${(e) => {
|
|
204
256
|
e.preventDefault(), this.showCalendar();
|
|
205
257
|
}}
|
|
206
258
|
@keydown=${(e) => {
|
|
207
|
-
var i,
|
|
259
|
+
var i, a;
|
|
208
260
|
if (e.key === "," && ((i = this.inputRefTo.value) == null || i.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e)), e.key === "Enter") {
|
|
209
|
-
const
|
|
210
|
-
|
|
261
|
+
const s = this.internals.form;
|
|
262
|
+
s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.blur();
|
|
211
263
|
}
|
|
212
264
|
}}
|
|
213
265
|
@input=${(e) => {
|
|
@@ -217,39 +269,39 @@ let l = class extends _ {
|
|
|
217
269
|
this.onFocus(), this.isMobileSafari && this.showCalendar();
|
|
218
270
|
}}
|
|
219
271
|
@blur=${(e) => {
|
|
220
|
-
var i,
|
|
272
|
+
var i, a, s;
|
|
221
273
|
if ((i = this.calRef.value) != null && i.contains(e.relatedTarget) || this.onBlur(), e.target.value) {
|
|
222
274
|
this.manageValidity(e.target);
|
|
223
|
-
const
|
|
224
|
-
this.min && this.min >
|
|
275
|
+
const h = e.target.value;
|
|
276
|
+
this.min && this.min > h ? this.internals.setValidity(
|
|
225
277
|
{ rangeUnderflow: !0 },
|
|
226
278
|
this.strings.forms.messages.rangeUnderflow,
|
|
227
279
|
e.target
|
|
228
|
-
) : this.max && this.max <
|
|
280
|
+
) : this.max && this.max < h && this.internals.setValidity(
|
|
229
281
|
{ rangeOverflow: !0 },
|
|
230
282
|
this.strings.forms.messages.rangeOverflow,
|
|
231
283
|
e.target
|
|
232
284
|
);
|
|
233
|
-
const
|
|
234
|
-
|
|
285
|
+
const u = b(e.target.value);
|
|
286
|
+
u && this._value[1] !== S(u) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(u));
|
|
235
287
|
}
|
|
236
288
|
}}
|
|
237
289
|
@change=${(e) => {
|
|
238
290
|
this.touched = !0, e.stopImmediatePropagation();
|
|
239
291
|
}}
|
|
240
|
-
${
|
|
292
|
+
${d(this.inputRefTo)}
|
|
241
293
|
/>
|
|
242
294
|
`;
|
|
243
295
|
}
|
|
244
296
|
renderMultipleInput() {
|
|
245
|
-
return
|
|
297
|
+
return p`
|
|
246
298
|
<input
|
|
247
299
|
class=${f(this.inputClasses)}
|
|
248
300
|
.type=${this.inputType}
|
|
249
301
|
id="${this.id}-input"
|
|
250
|
-
min=${
|
|
251
|
-
max=${
|
|
252
|
-
placeholder=${
|
|
302
|
+
min=${o(this.min)}
|
|
303
|
+
max=${o(this.max)}
|
|
304
|
+
placeholder=${o(this.placeholder)}
|
|
253
305
|
?readonly=${this.readonly}
|
|
254
306
|
?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
|
|
255
307
|
@click=${(t) => {
|
|
@@ -275,43 +327,18 @@ let l = class extends _ {
|
|
|
275
327
|
@change=${(t) => {
|
|
276
328
|
this.touched = !0, t.stopImmediatePropagation();
|
|
277
329
|
}}
|
|
278
|
-
${
|
|
330
|
+
${d(this.inputRef)}
|
|
279
331
|
/>
|
|
280
332
|
`;
|
|
281
333
|
}
|
|
282
|
-
renderTags() {
|
|
283
|
-
return u`
|
|
284
|
-
<div class="pkt-datepicker__tags" aria-live="polite">
|
|
285
|
-
${this._value[0] ? S(
|
|
286
|
-
(this._value ?? []).filter(Boolean).sort(),
|
|
287
|
-
(t) => t,
|
|
288
|
-
(t) => u`
|
|
289
|
-
<pkt-tag
|
|
290
|
-
.id="${this.id + t + "-tag"}"
|
|
291
|
-
closeTag
|
|
292
|
-
ariaLabel="${this.strings.calendar.deleteDate} ${$(
|
|
293
|
-
t,
|
|
294
|
-
this.dateformat
|
|
295
|
-
)}"
|
|
296
|
-
@close=${() => {
|
|
297
|
-
var e;
|
|
298
|
-
return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(y(t));
|
|
299
|
-
}}
|
|
300
|
-
><time datetime="${t}">${$(t, this.dateformat)}</time></pkt-tag
|
|
301
|
-
>
|
|
302
|
-
`
|
|
303
|
-
) : g}
|
|
304
|
-
</div>
|
|
305
|
-
`;
|
|
306
|
-
}
|
|
307
334
|
renderCalendar() {
|
|
308
|
-
return
|
|
335
|
+
return p`<div
|
|
309
336
|
class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
|
|
310
337
|
@focusout=${(t) => {
|
|
311
338
|
this.calendarOpen && this.handleFocusOut(t);
|
|
312
339
|
}}
|
|
313
340
|
id="${this.id}-popup"
|
|
314
|
-
${
|
|
341
|
+
${d(this.popupRef)}
|
|
315
342
|
>
|
|
316
343
|
<pkt-calendar
|
|
317
344
|
id="${this.id}-calendar"
|
|
@@ -325,14 +352,14 @@ let l = class extends _ {
|
|
|
325
352
|
.latest=${this.max}
|
|
326
353
|
.excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
|
|
327
354
|
.excludeweekdays=${this.excludeweekdays}
|
|
328
|
-
.currentmonth=${this.currentmonth ?
|
|
355
|
+
.currentmonth=${this.currentmonth ? T(this.currentmonth) : null}
|
|
329
356
|
@date-selected=${(t) => {
|
|
330
357
|
this.value = !this.multiple && !this.range ? t.detail[0] : Array.isArray(t.detail) ? t.detail.join(",") : t.detail, this._value = t.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "", this.manageValidity(this.inputRef.value), this.manageValidity(this.inputRefTo.value)) : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : "", this.manageValidity(this.inputRef.value)));
|
|
331
358
|
}}
|
|
332
359
|
@close=${() => {
|
|
333
360
|
this.onBlur(), this.hideCalendar();
|
|
334
361
|
}}
|
|
335
|
-
${
|
|
362
|
+
${d(this.calRef)}
|
|
336
363
|
></pkt-calendar>
|
|
337
364
|
</div>`;
|
|
338
365
|
}
|
|
@@ -350,7 +377,7 @@ let l = class extends _ {
|
|
|
350
377
|
"pkt-btn--icon-only": !0,
|
|
351
378
|
"pkt-btn--tertiary": !0,
|
|
352
379
|
"pkt-datepicker__calendar-button": !0
|
|
353
|
-
},
|
|
380
|
+
}, p`
|
|
354
381
|
<pkt-input-wrapper
|
|
355
382
|
label="${this.label}"
|
|
356
383
|
forId="${this.id}-input"
|
|
@@ -375,8 +402,17 @@ let l = class extends _ {
|
|
|
375
402
|
.ariaDescribedBy=${this.ariaDescribedBy}
|
|
376
403
|
class="pkt-datepicker"
|
|
377
404
|
>
|
|
378
|
-
<div class="pkt-contents" ${
|
|
379
|
-
${this.multiple ?
|
|
405
|
+
<div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
406
|
+
${this.multiple ? p`<pkt-date-tags
|
|
407
|
+
.dates=${this._value}
|
|
408
|
+
dateformat=${this.dateformat}
|
|
409
|
+
strings=${this.strings}
|
|
410
|
+
id-base=${this.id}
|
|
411
|
+
@date-tag-removed=${(t) => {
|
|
412
|
+
var e;
|
|
413
|
+
(e = this.calRef.value) == null || e.handleDateSelect(b(t.detail));
|
|
414
|
+
}}
|
|
415
|
+
></pkt-date-tags>` : y}
|
|
380
416
|
<div
|
|
381
417
|
class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
|
|
382
418
|
>
|
|
@@ -390,7 +426,7 @@ let l = class extends _ {
|
|
|
390
426
|
(t.key === "Enter" || t.key === " " || t.key === "Space") && (t.preventDefault(), this.toggleCalendar(t));
|
|
391
427
|
}}
|
|
392
428
|
?disabled=${this.disabled}
|
|
393
|
-
${
|
|
429
|
+
${d(this.btnRef)}
|
|
394
430
|
>
|
|
395
431
|
<pkt-icon name="calendar"></pkt-icon>
|
|
396
432
|
<span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
|
|
@@ -407,9 +443,9 @@ let l = class extends _ {
|
|
|
407
443
|
handleCalendarPosition() {
|
|
408
444
|
var t;
|
|
409
445
|
if (this.popupRef.value && this.inputRef.value) {
|
|
410
|
-
const e = this.multiple && !!this.maxlength, i = ((t = this.inputRef.value.parentElement) == null ? void 0 : t.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(),
|
|
411
|
-
let
|
|
412
|
-
i && i.top +
|
|
446
|
+
const e = this.multiple && !!this.maxlength, i = ((t = this.inputRef.value.parentElement) == null ? void 0 : t.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = e ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
|
|
447
|
+
let h = e ? "calc(100% - 30px)" : "100%";
|
|
448
|
+
i && i.top + s > window.innerHeight && i.top - s > 0 && (h = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = h;
|
|
413
449
|
}
|
|
414
450
|
}
|
|
415
451
|
handleFocusOut(t) {
|
|
@@ -417,7 +453,7 @@ let l = class extends _ {
|
|
|
417
453
|
}
|
|
418
454
|
async showCalendar() {
|
|
419
455
|
var t;
|
|
420
|
-
this.calendarOpen = !0, await
|
|
456
|
+
this.calendarOpen = !0, await x(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
|
|
421
457
|
}
|
|
422
458
|
hideCalendar() {
|
|
423
459
|
this.calendarOpen = !1;
|
|
@@ -466,10 +502,10 @@ n([
|
|
|
466
502
|
r({ type: Boolean, reflect: !0 })
|
|
467
503
|
], l.prototype, "withcontrols", 2);
|
|
468
504
|
n([
|
|
469
|
-
r({ converter:
|
|
505
|
+
r({ converter: C.csvToArray })
|
|
470
506
|
], l.prototype, "excludedates", 2);
|
|
471
507
|
n([
|
|
472
|
-
r({ converter:
|
|
508
|
+
r({ converter: C.csvToArray })
|
|
473
509
|
], l.prototype, "excludeweekdays", 2);
|
|
474
510
|
n([
|
|
475
511
|
r({ type: String })
|
|
@@ -481,14 +517,15 @@ n([
|
|
|
481
517
|
r({ type: String })
|
|
482
518
|
], l.prototype, "timezone", 2);
|
|
483
519
|
n([
|
|
484
|
-
|
|
520
|
+
R()
|
|
485
521
|
], l.prototype, "inputClasses", 2);
|
|
486
522
|
n([
|
|
487
|
-
|
|
523
|
+
R()
|
|
488
524
|
], l.prototype, "buttonClasses", 2);
|
|
489
525
|
l = n([
|
|
490
|
-
|
|
526
|
+
w("pkt-datepicker")
|
|
491
527
|
], l);
|
|
492
528
|
export {
|
|
493
|
-
|
|
529
|
+
g as P,
|
|
530
|
+
l as a
|
|
494
531
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -707,7 +707,6 @@ export declare class PktDatepicker extends PktInputElement {
|
|
|
707
707
|
renderInput(): TemplateResult<1>;
|
|
708
708
|
renderRangeInput(): TemplateResult<1>;
|
|
709
709
|
renderMultipleInput(): TemplateResult<1>;
|
|
710
|
-
renderTags(): TemplateResult<1>;
|
|
711
710
|
renderCalendar(): TemplateResult<1>;
|
|
712
711
|
render(): TemplateResult<1>;
|
|
713
712
|
/**
|
|
@@ -722,6 +721,21 @@ export declare class PktDatepicker extends PktInputElement {
|
|
|
722
721
|
clearInputValue(): void;
|
|
723
722
|
}
|
|
724
723
|
|
|
724
|
+
/**
|
|
725
|
+
* OBS! `dateformat` er standard formatteringsstreng for visning av datoer.
|
|
726
|
+
* Denne brukes for å sette "menneskeleselig" format på datoene i tags.
|
|
727
|
+
*
|
|
728
|
+
* Følger denne unicode-standarden:
|
|
729
|
+
* https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
|
|
730
|
+
*/
|
|
731
|
+
export declare class PktDateTags extends PktElement {
|
|
732
|
+
dates: TISODate[];
|
|
733
|
+
dateformat: string;
|
|
734
|
+
className: string;
|
|
735
|
+
idBase: string;
|
|
736
|
+
render(): TemplateResult<1>;
|
|
737
|
+
}
|
|
738
|
+
|
|
725
739
|
/**
|
|
726
740
|
* Base class for Punkt light DOM elements
|
|
727
741
|
* This class extends PktShadowElement but renders in light DOM instead of shadow DOM
|
|
@@ -1230,12 +1244,18 @@ declare type TCardTagPosition = 'top' | 'bottom';
|
|
|
1230
1244
|
|
|
1231
1245
|
declare type TCounterPosition = 'top' | 'bottom';
|
|
1232
1246
|
|
|
1247
|
+
declare type TDay = `${number}${number}`;
|
|
1248
|
+
|
|
1249
|
+
declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
|
|
1250
|
+
|
|
1233
1251
|
declare type TLayout = 'vertical' | 'horizontal';
|
|
1234
1252
|
|
|
1235
1253
|
declare type TLinkCardSkin = 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
|
|
1236
1254
|
|
|
1237
1255
|
declare type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
|
|
1238
1256
|
|
|
1257
|
+
declare type TMonth = `${number}${number}`;
|
|
1258
|
+
|
|
1239
1259
|
export declare type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
|
|
1240
1260
|
|
|
1241
1261
|
export declare type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
|
|
@@ -1284,4 +1304,6 @@ export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | '
|
|
|
1284
1304
|
|
|
1285
1305
|
export declare type TTagType = 'button' | 'reset' | 'submit';
|
|
1286
1306
|
|
|
1307
|
+
declare type TYear = `${number}${number}${number}${number}`;
|
|
1308
|
+
|
|
1287
1309
|
export { }
|
package/dist/pkt-calendar.js
CHANGED
package/dist/pkt-datepicker.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-CA1a4oIH.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
|
package/dist/pkt-datepicker.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
<div class="${
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),b=require("./backlink-JbBNi3qg.cjs"),m=require("./button-B8rdtaHB.cjs"),P=require("./calendar-32W9p9uc.cjs"),g=require("./card-DBlFf1ry.cjs"),h=require("./combobox-D84REr9N.cjs"),f=require("./consent-hYeFWNFr.cjs"),y=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),j=require("./class-map-BBG2gMX4.cjs"),k=require("./datepicker-CA1a4oIH.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),T=require("./messagebox-CjPtPPrW.cjs"),_=require("./modal-CRtxhCaP.cjs"),A=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),B=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),D=require("./textinput-aNI5kibM.cjs"),M=require("./select-Be--DBcR.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
|
|
2
|
+
<div class="${j.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
|
5
5
|
<h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
<ul>
|
|
27
27
|
${e.map(r=>t.x`<li>${r}</li>`)}
|
|
28
28
|
</ul>
|
|
29
|
-
`}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:
|
|
29
|
+
`}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:P.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>d.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>b.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>m.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>P.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>g.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>h.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>f.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>y.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>k.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>k.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>T.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>_.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>D.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>M.PktSelect});
|