@oslokommune/punkt-elements 12.4.3 → 12.5.1
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/dist/class-map-Ch54kkX5.cjs +5 -0
- package/dist/{class-map-CL_lSLwn.js → class-map-DunDFQn7.js} +8 -8
- package/dist/{directive-DA0-wdk7.js → directive-Cxhakbpr.js} +3 -3
- package/dist/{directive-19_ixLKS.cjs → directive-DtixNHDT.cjs} +1 -1
- package/dist/{index-DQ5xnGw6.js → index-BI6-RUqp.js} +110 -102
- package/dist/index-BNOnscrA.cjs +94 -0
- package/dist/index-Bpc07w_P.cjs +9 -0
- package/dist/{index-m5WP1NKD.js → index-CsTujnXs.js} +93 -93
- package/dist/index-CyqOyy_9.js +88 -0
- package/dist/{index-BUZITHLd.cjs → index-DSyh6tUw.cjs} +8 -8
- package/dist/index.d.ts +7 -8
- package/dist/pkt-alert.cjs +8 -8
- package/dist/pkt-alert.js +20 -20
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +5 -5
- package/dist/pkt-card.cjs +10 -10
- package/dist/pkt-card.js +7 -7
- package/dist/pkt-component-template.cjs +6 -6
- package/dist/pkt-component-template.js +14 -14
- package/dist/pkt-datepicker.cjs +48 -48
- package/dist/pkt-datepicker.js +33 -33
- package/dist/pkt-element.cjs +1 -1
- package/dist/pkt-element.js +1 -1
- package/dist/pkt-icon.cjs +1 -1
- package/dist/pkt-icon.js +3 -3
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +2 -2
- package/dist/pkt-input-wrapper.cjs +28 -28
- package/dist/pkt-input-wrapper.js +8 -8
- package/dist/pkt-link.cjs +4 -4
- package/dist/pkt-link.js +9 -9
- package/dist/pkt-messagebox.cjs +6 -6
- package/dist/pkt-messagebox.js +7 -7
- package/dist/pkt-tag.cjs +8 -8
- package/dist/pkt-tag.js +11 -11
- package/dist/{ref-bNNrgsqL.js → ref-By_W8A-f.js} +41 -41
- package/dist/ref-C3InMDfU.cjs +13 -0
- package/package.json +3 -3
- package/src/components/calendar/index.ts +69 -45
- package/src/components/datepicker/index.ts +1 -0
- package/src/components/icon/index.ts +16 -12
- package/dist/class-map-BQ5k1q3A.cjs +0 -5
- package/dist/index-BFqUD8HI.cjs +0 -9
- package/dist/index-Bc9mksHI.cjs +0 -90
- package/dist/index-exzYRW0z.js +0 -82
- package/dist/ref-BdbjJbqo.cjs +0 -13
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";const a=require("./index-DSyh6tUw.cjs"),r=require("./directive-DtixNHDT.cjs");/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2018 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/const c=r.e(class extends r.i{constructor(s){var e;if(super(s),s.type!==r.t$1.ATTRIBUTE||s.name!=="class"||((e=s.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(s){return" "+Object.keys(s).filter(e=>s[e]).join(" ")+" "}update(s,[e]){var i,o;if(this.st===void 0){this.st=new Set,s.strings!==void 0&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(const t in e)e[t]&&!((i=this.nt)!=null&&i.has(t))&&this.st.add(t);return this.render(e)}const n=s.element.classList;for(const t of this.st)t in e||(n.remove(t),this.st.delete(t));for(const t in e){const h=!!e[t];h===this.st.has(t)||(o=this.nt)!=null&&o.has(t)||(h?(n.add(t),this.st.add(t)):(n.remove(t),this.st.delete(t)))}return a.T}});exports.e=c;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { e as h, i as d, a as c } from "./directive-
|
|
1
|
+
import { T as a } from "./index-CsTujnXs.js";
|
|
2
|
+
import { e as h, i as d, a as c } from "./directive-Cxhakbpr.js";
|
|
3
3
|
/**
|
|
4
4
|
* @license
|
|
5
5
|
* Copyright 2018 Google LLC
|
|
@@ -14,21 +14,21 @@ const u = h(class extends d {
|
|
|
14
14
|
return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
|
|
15
15
|
}
|
|
16
16
|
update(s, [e]) {
|
|
17
|
-
var
|
|
17
|
+
var n, i;
|
|
18
18
|
if (this.st === void 0) {
|
|
19
19
|
this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => t !== "")));
|
|
20
|
-
for (const t in e) e[t] && !((
|
|
20
|
+
for (const t in e) e[t] && !((n = this.nt) != null && n.has(t)) && this.st.add(t);
|
|
21
21
|
return this.render(e);
|
|
22
22
|
}
|
|
23
|
-
const
|
|
24
|
-
for (const t of this.st) t in e || (
|
|
23
|
+
const r = s.element.classList;
|
|
24
|
+
for (const t of this.st) t in e || (r.remove(t), this.st.delete(t));
|
|
25
25
|
for (const t in e) {
|
|
26
26
|
const o = !!e[t];
|
|
27
|
-
o === this.st.has(t) || (
|
|
27
|
+
o === this.st.has(t) || (i = this.nt) != null && i.has(t) || (o ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
|
|
28
28
|
}
|
|
29
29
|
return a;
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
32
|
export {
|
|
33
|
-
u as
|
|
33
|
+
u as e
|
|
34
34
|
};
|
|
@@ -14,14 +14,14 @@ const r = (s) => (t, e) => {
|
|
|
14
14
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
15
15
|
*/
|
|
16
16
|
const n = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, E = (s) => (...t) => ({ _$litDirective$: s, values: t });
|
|
17
|
-
class
|
|
17
|
+
class $ {
|
|
18
18
|
constructor(t) {
|
|
19
19
|
}
|
|
20
20
|
get _$AU() {
|
|
21
21
|
return this._$AM._$AU;
|
|
22
22
|
}
|
|
23
23
|
_$AT(t, e, i) {
|
|
24
|
-
this.
|
|
24
|
+
this._$Ct = t, this._$AM = e, this._$Ci = i;
|
|
25
25
|
}
|
|
26
26
|
_$AS(t, e) {
|
|
27
27
|
return this.update(t, e);
|
|
@@ -33,6 +33,6 @@ class T {
|
|
|
33
33
|
export {
|
|
34
34
|
n as a,
|
|
35
35
|
E as e,
|
|
36
|
-
|
|
36
|
+
$ as i,
|
|
37
37
|
r as t
|
|
38
38
|
};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright 2017 Google LLC
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
-
*/const n={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6}
|
|
9
|
+
*/const n={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},$=i=>(...t)=>({_$litDirective$:i,values:t});class E{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}exports.e=$;exports.i=E;exports.t=r;exports.t$1=n;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { r as
|
|
1
|
+
import { r as k, P as $, x as y, E as v, n as c } from "./index-CsTujnXs.js";
|
|
2
2
|
import { a as S } from "./converters-DNCwIFwr.js";
|
|
3
|
-
import { t as
|
|
4
|
-
import {
|
|
5
|
-
import "./index-
|
|
6
|
-
function
|
|
3
|
+
import { t as A } from "./directive-Cxhakbpr.js";
|
|
4
|
+
import { e as _ } from "./class-map-DunDFQn7.js";
|
|
5
|
+
import "./index-CyqOyy_9.js";
|
|
6
|
+
function D(e) {
|
|
7
7
|
const t = Object.prototype.toString.call(e);
|
|
8
8
|
return e instanceof Date || typeof e == "object" && t === "[object Date]" ? new e.constructor(+e) : typeof e == "number" || t === "[object Number]" || typeof e == "string" || t === "[object String]" ? new Date(e) : /* @__PURE__ */ new Date(NaN);
|
|
9
9
|
}
|
|
@@ -15,45 +15,45 @@ let T = {};
|
|
|
15
15
|
function O() {
|
|
16
16
|
return T;
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
var
|
|
20
|
-
const s = O(), n = (t == null ? void 0 : t.weekStartsOn) ?? ((h = (
|
|
18
|
+
function b(e, t) {
|
|
19
|
+
var d, h, f, u;
|
|
20
|
+
const s = O(), n = (t == null ? void 0 : t.weekStartsOn) ?? ((h = (d = t == null ? void 0 : t.locale) == null ? void 0 : d.options) == null ? void 0 : h.weekStartsOn) ?? s.weekStartsOn ?? ((u = (f = s.locale) == null ? void 0 : f.options) == null ? void 0 : u.weekStartsOn) ?? 0, i = D(e), o = i.getDay(), a = (o < n ? 7 : 0) + o - n;
|
|
21
21
|
return i.setDate(i.getDate() - a), i.setHours(0, 0, 0, 0), i;
|
|
22
22
|
}
|
|
23
23
|
function x(e, t) {
|
|
24
|
-
const s =
|
|
24
|
+
const s = D(e.start), n = D(e.end);
|
|
25
25
|
let i = +s > +n;
|
|
26
26
|
const o = i ? +s : +n, a = i ? n : s;
|
|
27
27
|
a.setHours(0, 0, 0, 0);
|
|
28
|
-
let
|
|
28
|
+
let d = 1;
|
|
29
29
|
const h = [];
|
|
30
30
|
for (; +a <= o; )
|
|
31
|
-
h.push(
|
|
31
|
+
h.push(D(a)), a.setDate(a.getDate() + d), a.setHours(0, 0, 0, 0);
|
|
32
32
|
return i ? h.reverse() : h;
|
|
33
33
|
}
|
|
34
34
|
function C(e, t) {
|
|
35
|
-
var
|
|
36
|
-
const s =
|
|
35
|
+
var u, p, m, w;
|
|
36
|
+
const s = D(e), n = s.getFullYear(), i = O(), o = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((p = (u = t == null ? void 0 : t.locale) == null ? void 0 : u.options) == null ? void 0 : p.firstWeekContainsDate) ?? i.firstWeekContainsDate ?? ((w = (m = i.locale) == null ? void 0 : m.options) == null ? void 0 : w.firstWeekContainsDate) ?? 1, a = M(e, 0);
|
|
37
37
|
a.setFullYear(n + 1, 0, o), a.setHours(0, 0, 0, 0);
|
|
38
|
-
const
|
|
38
|
+
const d = b(a, t), h = M(e, 0);
|
|
39
39
|
h.setFullYear(n, 0, o), h.setHours(0, 0, 0, 0);
|
|
40
|
-
const
|
|
41
|
-
return s.getTime() >=
|
|
40
|
+
const f = b(h, t);
|
|
41
|
+
return s.getTime() >= d.getTime() ? n + 1 : s.getTime() >= f.getTime() ? n : n - 1;
|
|
42
42
|
}
|
|
43
43
|
function E(e, t) {
|
|
44
|
-
var
|
|
45
|
-
const s = O(), n = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((h = (
|
|
46
|
-
return o.setFullYear(i, 0, n), o.setHours(0, 0, 0, 0),
|
|
44
|
+
var d, h, f, u;
|
|
45
|
+
const s = O(), n = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((h = (d = t == null ? void 0 : t.locale) == null ? void 0 : d.options) == null ? void 0 : h.firstWeekContainsDate) ?? s.firstWeekContainsDate ?? ((u = (f = s.locale) == null ? void 0 : f.options) == null ? void 0 : u.firstWeekContainsDate) ?? 1, i = C(e, t), o = M(e, 0);
|
|
46
|
+
return o.setFullYear(i, 0, n), o.setHours(0, 0, 0, 0), b(o, t);
|
|
47
47
|
}
|
|
48
|
-
function
|
|
49
|
-
const s =
|
|
48
|
+
function H(e, t) {
|
|
49
|
+
const s = D(e), n = +b(s, t) - +E(s, t);
|
|
50
50
|
return Math.round(n / I) + 1;
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
let s =
|
|
52
|
+
function R(e) {
|
|
53
|
+
let s = D(e).getDay();
|
|
54
54
|
return s === 0 && (s = 7), s;
|
|
55
55
|
}
|
|
56
|
-
const N = "pkt-calendar",
|
|
56
|
+
const N = "pkt-calendar", P = {
|
|
57
57
|
id: {
|
|
58
58
|
type: "string",
|
|
59
59
|
name: "ID",
|
|
@@ -130,15 +130,15 @@ const N = "pkt-calendar", W = {
|
|
|
130
130
|
default: !1,
|
|
131
131
|
description: "Allow date range selection"
|
|
132
132
|
}
|
|
133
|
-
},
|
|
133
|
+
}, W = {
|
|
134
134
|
"date-selected": {
|
|
135
135
|
description: "Returns ISO formatted date string"
|
|
136
136
|
}
|
|
137
137
|
}, g = {
|
|
138
138
|
name: N,
|
|
139
139
|
"css-class": "pkt-calendar",
|
|
140
|
-
props:
|
|
141
|
-
events:
|
|
140
|
+
props: P,
|
|
141
|
+
events: W
|
|
142
142
|
};
|
|
143
143
|
var Y = Object.defineProperty, F = Object.getOwnPropertyDescriptor, l = (e, t, s, n) => {
|
|
144
144
|
for (var i = n > 1 ? void 0 : n ? F(t, s) : t, o = e.length - 1, a; o >= 0; o--)
|
|
@@ -146,11 +146,8 @@ var Y = Object.defineProperty, F = Object.getOwnPropertyDescriptor, l = (e, t, s
|
|
|
146
146
|
return n && i && Y(t, s, i), i;
|
|
147
147
|
};
|
|
148
148
|
let r = class extends $ {
|
|
149
|
-
/**
|
|
150
|
-
* If we are initializing props, slots and events from specs, we should do it in the constructor
|
|
151
|
-
*/
|
|
152
149
|
constructor() {
|
|
153
|
-
super(), this.multiple = g.props.multiple.default, this.maxMultiple = g.props.maxMultiple.default, this.range = g.props.range.default, this.weeknumbers = g.props.weeknumbers.default, this.withcontrols = g.props.withcontrols.default, this.selected = [], this.earliest = g.props.earliest.default, this.latest = g.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.dayStrings = this.strings.dates.daysShort, this.monthStrings = this.strings.dates.months, this.weekString = this.strings.dates.week, this.prevMonthString = this.strings.dates.prevMonth, this.nextMonthString = this.strings.dates.nextMonth, this._selected = [], this.year = 0, this.month = 0, this.week = 0, this.rangeHovered = null, this.inRange = {}, this.focusedDate = null, this.selectableDates = [], this.currentmonthtouched = !1;
|
|
150
|
+
super(...arguments), this.multiple = g.props.multiple.default, this.maxMultiple = g.props.maxMultiple.default, this.range = g.props.range.default, this.weeknumbers = g.props.weeknumbers.default, this.withcontrols = g.props.withcontrols.default, this.selected = [], this.earliest = g.props.earliest.default, this.latest = g.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.dayStrings = this.strings.dates.daysShort, this.monthStrings = this.strings.dates.months, this.weekString = this.strings.dates.week, this.prevMonthString = this.strings.dates.prevMonth, this.nextMonthString = this.strings.dates.nextMonth, this._selected = [], this.year = 0, this.month = 0, this.week = 0, this.rangeHovered = null, this.inRange = {}, this.focusedDate = null, this.selectableDates = [], this.currentmonthtouched = !1, this.tabIndexSet = 0;
|
|
154
151
|
}
|
|
155
152
|
/**
|
|
156
153
|
* Runs on mount, used to set up various values and whatever you need to run
|
|
@@ -167,6 +164,9 @@ let r = class extends $ {
|
|
|
167
164
|
updated(e) {
|
|
168
165
|
e.has("selected") && this.convertSelected(), super.updated(e);
|
|
169
166
|
}
|
|
167
|
+
firstUpdated(e) {
|
|
168
|
+
this.addEventListener("keydown", this.handleKeydown);
|
|
169
|
+
}
|
|
170
170
|
convertSelected() {
|
|
171
171
|
if (typeof this.selected == "string" && (this.selected = this.selected.split(",")), this.selected.length === 1 && this.selected[0] === "" && (this.selected = []), this._selected = this.selected.map((e) => new Date(e)), this.range && this.selected.length === 2) {
|
|
172
172
|
const e = x({
|
|
@@ -206,8 +206,8 @@ let r = class extends $ {
|
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
handleArrowKey(e, t) {
|
|
209
|
-
|
|
210
|
-
const s = new Date(this.focusedDate);
|
|
209
|
+
e.preventDefault(), this.focusedDate || this.focusOnCurrentDate();
|
|
210
|
+
const s = this.focusedDate ? new Date(this.focusedDate) : new Date(this.year, this.month, 1);
|
|
211
211
|
let n = new Date(s.setDate(s.getDate() + t));
|
|
212
212
|
if (n) {
|
|
213
213
|
let i = this.querySelector(`div[data-date="${this.formatISODate(n)}"]`);
|
|
@@ -218,7 +218,7 @@ let r = class extends $ {
|
|
|
218
218
|
o = new Date(o.setDate(o.getDate() + t)), a = this.querySelector(`div[data-date="${this.formatISODate(o)}"]`);
|
|
219
219
|
i = a;
|
|
220
220
|
}
|
|
221
|
-
i instanceof HTMLDivElement && !i.dataset.disabled && i.focus();
|
|
221
|
+
i instanceof HTMLDivElement && !i.dataset.disabled && (this.focusedDate = this.formatISODate(n), i.focus());
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
}
|
|
@@ -226,41 +226,45 @@ let r = class extends $ {
|
|
|
226
226
|
* Component functionality and render
|
|
227
227
|
*/
|
|
228
228
|
render() {
|
|
229
|
-
return
|
|
229
|
+
return y`
|
|
230
230
|
<div
|
|
231
|
-
class="pkt-calendar ${this.weeknumbers ? "pkt-cal-weeknumbers" :
|
|
231
|
+
class="pkt-calendar ${this.weeknumbers ? "pkt-cal-weeknumbers" : v}"
|
|
232
232
|
@focusout=${this.closeEvent}
|
|
233
233
|
@keydown=${(e) => {
|
|
234
234
|
e.key === "Escape" && (e.preventDefault(), this.close());
|
|
235
235
|
}}
|
|
236
236
|
>
|
|
237
237
|
<nav class="pkt-cal-month-nav">
|
|
238
|
-
<div
|
|
239
|
-
|
|
240
|
-
|
|
238
|
+
<div>
|
|
239
|
+
<div
|
|
240
|
+
@click=${this.isPrevMonthAllowed() && this.prevMonth}
|
|
241
|
+
@keydown=${(e) => {
|
|
241
242
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.isNextMonthAllowed() && this.prevMonth());
|
|
242
243
|
}}
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
244
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isPrevMonthAllowed() ? "" : "pkt-hide"}"
|
|
245
|
+
.data-disabled=${this.isPrevMonthAllowed() ? v : "disabled"}
|
|
246
|
+
?aria-disabled=${!this.isPrevMonthAllowed()}
|
|
247
|
+
tabindex=${this.isPrevMonthAllowed() ? "0" : "-1"}
|
|
248
|
+
>
|
|
249
|
+
<pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
|
|
250
|
+
<span class="pkt-btn__text">${this.prevMonthString}</span>
|
|
251
|
+
</div>
|
|
250
252
|
</div>
|
|
251
253
|
${this.renderMonthNav()}
|
|
252
|
-
<div
|
|
253
|
-
|
|
254
|
-
|
|
254
|
+
<div>
|
|
255
|
+
<div
|
|
256
|
+
@click=${this.isNextMonthAllowed() && this.nextMonth}
|
|
257
|
+
@keydown=${(e) => {
|
|
255
258
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.isNextMonthAllowed() && this.nextMonth());
|
|
256
259
|
}}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
260
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isNextMonthAllowed() ? "" : "pkt-hide"}"
|
|
261
|
+
.data-disabled=${this.isNextMonthAllowed() ? v : "disabled"}
|
|
262
|
+
?aria-disabled=${!this.isNextMonthAllowed()}
|
|
263
|
+
tabindex=${this.isNextMonthAllowed() ? "0" : "-1"}
|
|
264
|
+
>
|
|
265
|
+
<pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
|
|
266
|
+
<span class="pkt-btn__text">${this.nextMonthString}</span>
|
|
267
|
+
</div>
|
|
264
268
|
</div>
|
|
265
269
|
</nav>
|
|
266
270
|
<table
|
|
@@ -275,17 +279,17 @@ let r = class extends $ {
|
|
|
275
279
|
}
|
|
276
280
|
renderDayNames() {
|
|
277
281
|
const e = [];
|
|
278
|
-
this.weeknumbers && e.push(
|
|
282
|
+
this.weeknumbers && e.push(y`<td><div>${this.weekString}<div></td>`);
|
|
279
283
|
for (let t = 0; t < this.dayStrings.length; t++)
|
|
280
|
-
e.push(
|
|
281
|
-
return
|
|
284
|
+
e.push(y`<td><div>${this.dayStrings[t]}</div></td>`);
|
|
285
|
+
return y`<tr class="pkt-cal-week-row" role="presentation">
|
|
282
286
|
${e}
|
|
283
287
|
</tr>`;
|
|
284
288
|
}
|
|
285
289
|
renderMonthNav() {
|
|
286
290
|
let e = [];
|
|
287
291
|
return this.withcontrols ? e.push(
|
|
288
|
-
|
|
292
|
+
y`<div class="pkt-cal-month-picker">
|
|
289
293
|
<select
|
|
290
294
|
class="pkt-input pkt-input-compact"
|
|
291
295
|
@change=${(t) => {
|
|
@@ -293,7 +297,7 @@ let r = class extends $ {
|
|
|
293
297
|
}}
|
|
294
298
|
>
|
|
295
299
|
${this.monthStrings.map(
|
|
296
|
-
(t, s) =>
|
|
300
|
+
(t, s) => y`<option value=${s} ?selected=${this.month === s}>${t}</option>`
|
|
297
301
|
)}
|
|
298
302
|
</select>
|
|
299
303
|
<input
|
|
@@ -308,15 +312,16 @@ let r = class extends $ {
|
|
|
308
312
|
/>
|
|
309
313
|
</div> `
|
|
310
314
|
) : e.push(
|
|
311
|
-
|
|
315
|
+
y`<div class="pkt-txt-16-medium" aria-live="polite">
|
|
312
316
|
${this.monthStrings[this.month]} ${this.year}
|
|
313
317
|
</div>`
|
|
314
318
|
), e;
|
|
315
319
|
}
|
|
316
320
|
renderDayView(e, t, s) {
|
|
317
|
-
|
|
318
|
-
this.
|
|
319
|
-
|
|
321
|
+
var u;
|
|
322
|
+
const n = new Date(this.year, this.month, e, 12), i = this.formatISODate(n), o = i === this.formatISODate(t), a = this.selected.includes(i), d = this.isExcluded(s, n) || !a && this.multiple && this.maxMultiple > 0 && this.selected.length >= this.maxMultiple, h = this.focusedDate ? this.focusedDate === i && !d ? "0" : "-1" : !d && this.tabIndexSet === 0 || this.tabIndexSet === e ? "0" : "-1";
|
|
323
|
+
h === "0" && (this.tabIndexSet = e), this.selectableDates.push({ currentDateISO: i, isDisabled: d, tabindex: h });
|
|
324
|
+
const f = {
|
|
320
325
|
"pkt-cal-today": o,
|
|
321
326
|
"pkt-cal-selected": a,
|
|
322
327
|
"pkt-cal-in-range": this.inRange[i],
|
|
@@ -325,7 +330,7 @@ let r = class extends $ {
|
|
|
325
330
|
"pkt-cal-in-range-last": this.range && this.selected.length === 2 && i === this.selected[1],
|
|
326
331
|
"pkt-cal-range-hover": this.rangeHovered !== null && i === this.formatISODate(this.rangeHovered)
|
|
327
332
|
};
|
|
328
|
-
return
|
|
333
|
+
return y`<td class=${_(f)}>
|
|
329
334
|
<div
|
|
330
335
|
?aria-selected=${a}
|
|
331
336
|
role="gridcell"
|
|
@@ -334,14 +339,14 @@ let r = class extends $ {
|
|
|
334
339
|
@focus=${() => {
|
|
335
340
|
this.range && !this.isExcluded(s, n) && this.handleRangeHover(n), this.focusedDate = i;
|
|
336
341
|
}}
|
|
337
|
-
tabindex=${
|
|
338
|
-
data-disabled=${
|
|
342
|
+
tabindex=${(u = this.selectableDates.find((p) => p.currentDateISO === i)) == null ? void 0 : u.tabindex}
|
|
343
|
+
data-disabled=${d ? "disabled" : v}
|
|
339
344
|
data-date=${i}
|
|
340
|
-
@keydown=${(
|
|
341
|
-
(
|
|
345
|
+
@keydown=${(p) => {
|
|
346
|
+
(p.key === "Enter" || p.key === " ") && (p.preventDefault(), this.handleDateSelect(n));
|
|
342
347
|
}}
|
|
343
|
-
@click=${(
|
|
344
|
-
|
|
348
|
+
@click=${(p) => {
|
|
349
|
+
d || (p.preventDefault(), this.handleDateSelect(n));
|
|
345
350
|
}}
|
|
346
351
|
>
|
|
347
352
|
<span class="pkt-btn__text pkt-txt-14-light">${e}</span>
|
|
@@ -349,28 +354,28 @@ let r = class extends $ {
|
|
|
349
354
|
</td>`;
|
|
350
355
|
}
|
|
351
356
|
renderCalendarBody() {
|
|
352
|
-
const e = /* @__PURE__ */ new Date(), t = new Date(this.year, this.month, 1, 12), s = new Date(this.year, this.month + 1, 0, 12), n = (t.getDay() + 6) % 7, i = s.getDate(), o = Math.ceil((i + n) / 7),
|
|
357
|
+
const e = /* @__PURE__ */ new Date(), t = new Date(this.year, this.month, 1, 12), s = new Date(this.year, this.month + 1, 0, 12), n = (t.getDay() + 6) % 7, i = s.getDate(), o = Math.ceil((i + n) / 7), d = new Date(this.year, this.month, 0, 12).getDate();
|
|
353
358
|
let h = 1;
|
|
354
|
-
this.week =
|
|
355
|
-
const
|
|
356
|
-
for (let
|
|
357
|
-
const
|
|
358
|
-
this.weeknumbers &&
|
|
359
|
+
this.week = H(new Date(this.year, this.month, 1, 12));
|
|
360
|
+
const f = [];
|
|
361
|
+
for (let u = 0; u < o; u++) {
|
|
362
|
+
const p = [];
|
|
363
|
+
this.weeknumbers && p.push(y`<td class="pkt-cal-week">${this.week}</td>`), this.week++;
|
|
359
364
|
for (let m = 1; m < 8; m++)
|
|
360
|
-
if (
|
|
361
|
-
const
|
|
362
|
-
|
|
363
|
-
|
|
365
|
+
if (u === 0 && m < n + 1) {
|
|
366
|
+
const w = d - (n - m);
|
|
367
|
+
p.push(
|
|
368
|
+
y`<td class="pkt-cal-other">
|
|
364
369
|
<div
|
|
365
370
|
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
|
|
366
371
|
data-disabled="disabled"
|
|
367
372
|
>
|
|
368
|
-
<span class="pkt-btn__text pkt-txt-14-light">${
|
|
373
|
+
<span class="pkt-btn__text pkt-txt-14-light">${w}</span>
|
|
369
374
|
</div>
|
|
370
375
|
</td>`
|
|
371
376
|
);
|
|
372
|
-
} else h > i ? (
|
|
373
|
-
|
|
377
|
+
} else h > i ? (p.push(
|
|
378
|
+
y`<td class="pkt-cal-other">
|
|
374
379
|
<div
|
|
375
380
|
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
|
|
376
381
|
data-disabled="disabled"
|
|
@@ -378,14 +383,14 @@ let r = class extends $ {
|
|
|
378
383
|
<span class="pkt-btn__text pkt-txt-14-light">${h - i}</span>
|
|
379
384
|
</div>
|
|
380
385
|
</td>`
|
|
381
|
-
), h++) : (
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
${
|
|
386
|
+
), h++) : (p.push(this.renderDayView(h, e, m)), h++);
|
|
387
|
+
f.push(
|
|
388
|
+
y`<tr class="pkt-cal-week-row" role="row">
|
|
389
|
+
${p}
|
|
385
390
|
</tr>`
|
|
386
391
|
);
|
|
387
392
|
}
|
|
388
|
-
return
|
|
393
|
+
return f;
|
|
389
394
|
}
|
|
390
395
|
isExcluded(e, t) {
|
|
391
396
|
return this.excludeweekdays.includes(e.toString()) || this.earliest && t < new Date(this.earliest) || this.latest && t > new Date(this.latest) ? !0 : this.excludedates.some((s) => typeof s == "string" ? s === this.formatISODate(t) : s.toDateString() === t.toDateString());
|
|
@@ -410,7 +415,7 @@ let r = class extends $ {
|
|
|
410
415
|
this.changeMonth(t, e);
|
|
411
416
|
}
|
|
412
417
|
changeMonth(e, t) {
|
|
413
|
-
this.year = e, this.month = t, this.selectableDates = [], this.requestUpdate();
|
|
418
|
+
this.year = e, this.month = t, this.tabIndexSet = 0, this.focusedDate = null, this.selectableDates = [], this.requestUpdate();
|
|
414
419
|
}
|
|
415
420
|
isInRange(e) {
|
|
416
421
|
if (this.range && this.selected.length === 2) {
|
|
@@ -430,7 +435,7 @@ let r = class extends $ {
|
|
|
430
435
|
for (let n = 0; n < s.length; n++)
|
|
431
436
|
this.excludedates.forEach((i) => {
|
|
432
437
|
i > this._selected[0] && i < e && (t = !1);
|
|
433
|
-
}), this.excludeweekdays.includes(
|
|
438
|
+
}), this.excludeweekdays.includes(R(s[n]).toString()) && (t = !1);
|
|
434
439
|
}
|
|
435
440
|
return t;
|
|
436
441
|
}
|
|
@@ -482,14 +487,14 @@ let r = class extends $ {
|
|
|
482
487
|
focusOnCurrentDate() {
|
|
483
488
|
const e = this.formatISODate(/* @__PURE__ */ new Date()), t = this.querySelector(`div[data-date="${e}"]`);
|
|
484
489
|
if (t instanceof HTMLDivElement)
|
|
485
|
-
t.focus();
|
|
490
|
+
this.focusedDate = e, t.focus();
|
|
486
491
|
else {
|
|
487
492
|
const s = this.selectableDates.find((n) => !n.isDisabled);
|
|
488
493
|
if (s) {
|
|
489
494
|
const n = this.querySelector(
|
|
490
495
|
`div[data-date="${s.currentDateISO}"]`
|
|
491
496
|
);
|
|
492
|
-
n instanceof HTMLDivElement && n.focus();
|
|
497
|
+
n instanceof HTMLDivElement && (this.focusedDate = s.currentDateISO, n.focus());
|
|
493
498
|
}
|
|
494
499
|
}
|
|
495
500
|
}
|
|
@@ -570,28 +575,31 @@ l([
|
|
|
570
575
|
c({ type: Date })
|
|
571
576
|
], r.prototype, "rangeHovered", 2);
|
|
572
577
|
l([
|
|
573
|
-
|
|
578
|
+
k()
|
|
574
579
|
], r.prototype, "inRange", 2);
|
|
575
580
|
l([
|
|
576
|
-
|
|
581
|
+
k()
|
|
577
582
|
], r.prototype, "focusedDate", 2);
|
|
578
583
|
l([
|
|
579
|
-
|
|
584
|
+
k()
|
|
580
585
|
], r.prototype, "selectableDates", 2);
|
|
581
586
|
l([
|
|
582
|
-
|
|
587
|
+
k()
|
|
583
588
|
], r.prototype, "currentmonthtouched", 2);
|
|
589
|
+
l([
|
|
590
|
+
k()
|
|
591
|
+
], r.prototype, "tabIndexSet", 2);
|
|
584
592
|
r = l([
|
|
585
|
-
|
|
593
|
+
A("pkt-calendar")
|
|
586
594
|
], r);
|
|
587
595
|
export {
|
|
588
596
|
r as P,
|
|
589
597
|
I as a,
|
|
590
|
-
|
|
598
|
+
H as b,
|
|
591
599
|
M as c,
|
|
592
600
|
O as d,
|
|
593
601
|
C as g,
|
|
594
602
|
U as m,
|
|
595
|
-
|
|
596
|
-
|
|
603
|
+
b as s,
|
|
604
|
+
D as t
|
|
597
605
|
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";const a=require("./index-DSyh6tUw.cjs"),v=require("./converters-DhM11VlY.cjs"),C=require("./directive-DtixNHDT.cjs"),$=require("./class-map-Ch54kkX5.cjs");require("./index-Bpc07w_P.cjs");function k(r){const e=Object.prototype.toString.call(r);return r instanceof Date||typeof r=="object"&&e==="[object Date]"?new r.constructor(+r):typeof r=="number"||e==="[object Number]"||typeof r=="string"||e==="[object String]"?new Date(r):new Date(NaN)}function D(r,e){return r instanceof Date?new r.constructor(e):new Date(e)}const S=6048e5,P=864e5;let A={};function w(){return A}function m(r,e){var c,h,d,p;const t=w(),s=(e==null?void 0:e.weekStartsOn)??((h=(c=e==null?void 0:e.locale)==null?void 0:c.options)==null?void 0:h.weekStartsOn)??t.weekStartsOn??((p=(d=t.locale)==null?void 0:d.options)==null?void 0:p.weekStartsOn)??0,n=k(r),i=n.getDay(),l=(i<s?7:0)+i-s;return n.setDate(n.getDate()-l),n.setHours(0,0,0,0),n}function b(r,e){const t=k(r.start),s=k(r.end);let n=+t>+s;const i=n?+t:+s,l=n?s:t;l.setHours(0,0,0,0);let c=1;const h=[];for(;+l<=i;)h.push(k(l)),l.setDate(l.getDate()+c),l.setHours(0,0,0,0);return n?h.reverse():h}function x(r,e){var p,f,u,y;const t=k(r),s=t.getFullYear(),n=w(),i=(e==null?void 0:e.firstWeekContainsDate)??((f=(p=e==null?void 0:e.locale)==null?void 0:p.options)==null?void 0:f.firstWeekContainsDate)??n.firstWeekContainsDate??((y=(u=n.locale)==null?void 0:u.options)==null?void 0:y.firstWeekContainsDate)??1,l=D(r,0);l.setFullYear(s+1,0,i),l.setHours(0,0,0,0);const c=m(l,e),h=D(r,0);h.setFullYear(s,0,i),h.setHours(0,0,0,0);const d=m(h,e);return t.getTime()>=c.getTime()?s+1:t.getTime()>=d.getTime()?s:s-1}function I(r,e){var c,h,d,p;const t=w(),s=(e==null?void 0:e.firstWeekContainsDate)??((h=(c=e==null?void 0:e.locale)==null?void 0:c.options)==null?void 0:h.firstWeekContainsDate)??t.firstWeekContainsDate??((p=(d=t.locale)==null?void 0:d.options)==null?void 0:p.firstWeekContainsDate)??1,n=x(r,e),i=D(r,0);return i.setFullYear(n,0,s),i.setHours(0,0,0,0),m(i,e)}function M(r,e){const t=k(r),s=+m(t,e)-+I(t,e);return Math.round(s/S)+1}function _(r){let t=k(r).getDay();return t===0&&(t=7),t}const E="pkt-calendar",T={id:{type:"string",name:"ID",description:"Unique identifier for the calendar"},currentmonth:{type:"date",converter:"stringToDate",description:"The current month to display"},selected:{type:"array",converter:"csvToArray",reflect:!0,items:{type:"date"},description:"Array of selected dates"},excludeweekdays:{type:"array",converter:"csvToArray",items:{type:"string"},description:"Array of weekdays (1-7) to exclude"},excludedates:{type:"array",converter:"stringsToDate",items:{type:"date"},description:"Array of specific dates to exclude"},earliest:{type:"date",converter:"stringToDate",default:null,description:"Earliest selectable date"},latest:{type:"date",converter:"stringToDate",default:null,description:"Latest selectable date"},weeknumbers:{type:"boolean",reflect:!0,default:!1,description:"Show week numbers in calendar"},withcontrols:{type:"boolean",reflect:!0,default:!1,description:"Show month and year navigation controls"},multiple:{type:"boolean",reflect:!0,default:!1,description:"Allow multiple date selection"},maxMultiple:{type:"number",default:4,description:"Maximum number of dates that can be selected"},range:{type:"boolean",reflect:!0,default:!1,description:"Allow date range selection"}},H={"date-selected":{description:"Returns ISO formatted date string"}},g={name:E,"css-class":"pkt-calendar",props:T,events:H};var R=Object.defineProperty,W=Object.getOwnPropertyDescriptor,o=(r,e,t,s)=>{for(var n=s>1?void 0:s?W(e,t):e,i=r.length-1,l;i>=0;i--)(l=r[i])&&(n=(s?l(e,t,n):l(n))||n);return s&&n&&R(e,t,n),n};exports.PktCalendar=class extends a.PktElement{constructor(){super(...arguments),this.multiple=g.props.multiple.default,this.maxMultiple=g.props.maxMultiple.default,this.range=g.props.range.default,this.weeknumbers=g.props.weeknumbers.default,this.withcontrols=g.props.withcontrols.default,this.selected=[],this.earliest=g.props.earliest.default,this.latest=g.props.latest.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.dayStrings=this.strings.dates.daysShort,this.monthStrings=this.strings.dates.months,this.weekString=this.strings.dates.week,this.prevMonthString=this.strings.dates.prevMonth,this.nextMonthString=this.strings.dates.nextMonth,this._selected=[],this.year=0,this.month=0,this.week=0,this.rangeHovered=null,this.inRange={},this.focusedDate=null,this.selectableDates=[],this.currentmonthtouched=!1,this.tabIndexSet=0}connectedCallback(){super.connectedCallback()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}attributeChangedCallback(e,t,s){e==="selected"&&s&&this.convertSelected(),super.attributeChangedCallback(e,t,s)}updated(e){e.has("selected")&&this.convertSelected(),super.updated(e)}firstUpdated(e){this.addEventListener("keydown",this.handleKeydown)}convertSelected(){if(typeof this.selected=="string"&&(this.selected=this.selected.split(",")),this.selected.length===1&&this.selected[0]===""&&(this.selected=[]),this._selected=this.selected.map(e=>new Date(e)),this.range&&this.selected.length===2){const e=b({start:new Date(this.selected[0]),end:new Date(this.selected[1])});if(this.inRange={},Array.isArray(e)&&e.length){const t={};for(let s=0;s<e.length;s++)t[this.formatISODate(e[s])]=this.isInRange(e[s]);this.inRange=t}}this.setCurrentMonth()}setCurrentMonth(){if(this.currentmonth===null&&!this.currentmonthtouched){this.currentmonthtouched=!0;return}this.selected.length&&this.selected[0]!==""?this.currentmonth=new Date(this.selected[this.selected.length-1]):this.currentmonth===null&&(this.currentmonth=new Date),this.year=this.currentmonth.getFullYear(),this.month=this.currentmonth.getMonth()}handleKeydown(e){switch(e.key){case"ArrowLeft":this.handleArrowKey(e,-1);break;case"ArrowRight":this.handleArrowKey(e,1);break;case"ArrowUp":this.handleArrowKey(e,-7);break;case"ArrowDown":this.handleArrowKey(e,7);break}}handleArrowKey(e,t){e.preventDefault(),this.focusedDate||this.focusOnCurrentDate();const s=this.focusedDate?new Date(this.focusedDate):new Date(this.year,this.month,1);let n=new Date(s.setDate(s.getDate()+t));if(n){let i=this.querySelector(`div[data-date="${this.formatISODate(n)}"]`);if(i instanceof HTMLDivElement){if(i.dataset.disabled){let l=new Date(s.setDate(s.getDate()+t)),c=this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);for(;c&&c instanceof HTMLDivElement&&c.dataset.disabled;)l=new Date(l.setDate(l.getDate()+t)),c=this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);i=c}i instanceof HTMLDivElement&&!i.dataset.disabled&&(this.focusedDate=this.formatISODate(n),i.focus())}}}render(){return a.x`
|
|
2
|
+
<div
|
|
3
|
+
class="pkt-calendar ${this.weeknumbers?"pkt-cal-weeknumbers":a.E}"
|
|
4
|
+
@focusout=${this.closeEvent}
|
|
5
|
+
@keydown=${e=>{e.key==="Escape"&&(e.preventDefault(),this.close())}}
|
|
6
|
+
>
|
|
7
|
+
<nav class="pkt-cal-month-nav">
|
|
8
|
+
<div>
|
|
9
|
+
<div
|
|
10
|
+
@click=${this.isPrevMonthAllowed()&&this.prevMonth}
|
|
11
|
+
@keydown=${e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.isNextMonthAllowed()&&this.prevMonth())}}
|
|
12
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isPrevMonthAllowed()?"":"pkt-hide"}"
|
|
13
|
+
.data-disabled=${this.isPrevMonthAllowed()?a.E:"disabled"}
|
|
14
|
+
?aria-disabled=${!this.isPrevMonthAllowed()}
|
|
15
|
+
tabindex=${this.isPrevMonthAllowed()?"0":"-1"}
|
|
16
|
+
>
|
|
17
|
+
<pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
|
|
18
|
+
<span class="pkt-btn__text">${this.prevMonthString}</span>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
${this.renderMonthNav()}
|
|
22
|
+
<div>
|
|
23
|
+
<div
|
|
24
|
+
@click=${this.isNextMonthAllowed()&&this.nextMonth}
|
|
25
|
+
@keydown=${e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.isNextMonthAllowed()&&this.nextMonth())}}
|
|
26
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isNextMonthAllowed()?"":"pkt-hide"}"
|
|
27
|
+
.data-disabled=${this.isNextMonthAllowed()?a.E:"disabled"}
|
|
28
|
+
?aria-disabled=${!this.isNextMonthAllowed()}
|
|
29
|
+
tabindex=${this.isNextMonthAllowed()?"0":"-1"}
|
|
30
|
+
>
|
|
31
|
+
<pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
|
|
32
|
+
<span class="pkt-btn__text">${this.nextMonthString}</span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</nav>
|
|
36
|
+
<table
|
|
37
|
+
class="pkt-cal-days pkt-txt-12-medium"
|
|
38
|
+
role="grid"
|
|
39
|
+
?aria-multiselectable=${this.range||this.multiple}
|
|
40
|
+
>
|
|
41
|
+
${this.renderDayNames()} ${this.renderCalendarBody()}
|
|
42
|
+
</table>
|
|
43
|
+
</div>
|
|
44
|
+
`}renderDayNames(){const e=[];this.weeknumbers&&e.push(a.x`<td><div>${this.weekString}<div></td>`);for(let t=0;t<this.dayStrings.length;t++)e.push(a.x`<td><div>${this.dayStrings[t]}</div></td>`);return a.x`<tr class="pkt-cal-week-row" role="presentation">
|
|
45
|
+
${e}
|
|
46
|
+
</tr>`}renderMonthNav(){let e=[];return this.withcontrols?e.push(a.x`<div class="pkt-cal-month-picker">
|
|
47
|
+
<select
|
|
48
|
+
class="pkt-input pkt-input-compact"
|
|
49
|
+
@change=${t=>{this.changeMonth(this.year,t.target.value)}}
|
|
50
|
+
>
|
|
51
|
+
${this.monthStrings.map((t,s)=>a.x`<option value=${s} ?selected=${this.month===s}>${t}</option>`)}
|
|
52
|
+
</select>
|
|
53
|
+
<input
|
|
54
|
+
class="pkt-input pkt-cal-input-year pkt-input-compact"
|
|
55
|
+
type="number"
|
|
56
|
+
size="4"
|
|
57
|
+
placeholder="0000"
|
|
58
|
+
@change=${t=>{this.changeMonth(t.target.value,this.month)}}
|
|
59
|
+
.value=${this.year}
|
|
60
|
+
/>
|
|
61
|
+
</div> `):e.push(a.x`<div class="pkt-txt-16-medium" aria-live="polite">
|
|
62
|
+
${this.monthStrings[this.month]} ${this.year}
|
|
63
|
+
</div>`),e}renderDayView(e,t,s){var f;const n=new Date(this.year,this.month,e,12),i=this.formatISODate(n),l=i===this.formatISODate(t),c=this.selected.includes(i),h=this.isExcluded(s,n)||!c&&this.multiple&&this.maxMultiple>0&&this.selected.length>=this.maxMultiple,d=this.focusedDate?this.focusedDate===i&&!h?"0":"-1":!h&&this.tabIndexSet===0||this.tabIndexSet===e?"0":"-1";d==="0"&&(this.tabIndexSet=e),this.selectableDates.push({currentDateISO:i,isDisabled:h,tabindex:d});const p={"pkt-cal-today":l,"pkt-cal-selected":c,"pkt-cal-in-range":this.inRange[i],"pkt-cal-excluded":this.isExcluded(s,n),"pkt-cal-in-range-first":this.range&&(this.selected.length===2||this.rangeHovered!==null)&&i===this.selected[0],"pkt-cal-in-range-last":this.range&&this.selected.length===2&&i===this.selected[1],"pkt-cal-range-hover":this.rangeHovered!==null&&i===this.formatISODate(this.rangeHovered)};return a.x`<td class=${$.e(p)}>
|
|
64
|
+
<div
|
|
65
|
+
?aria-selected=${c}
|
|
66
|
+
role="gridcell"
|
|
67
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
|
|
68
|
+
@mouseover=${()=>this.range&&!this.isExcluded(s,n)&&this.handleRangeHover(n)}
|
|
69
|
+
@focus=${()=>{this.range&&!this.isExcluded(s,n)&&this.handleRangeHover(n),this.focusedDate=i}}
|
|
70
|
+
tabindex=${(f=this.selectableDates.find(u=>u.currentDateISO===i))==null?void 0:f.tabindex}
|
|
71
|
+
data-disabled=${h?"disabled":a.E}
|
|
72
|
+
data-date=${i}
|
|
73
|
+
@keydown=${u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.handleDateSelect(n))}}
|
|
74
|
+
@click=${u=>{h||(u.preventDefault(),this.handleDateSelect(n))}}
|
|
75
|
+
>
|
|
76
|
+
<span class="pkt-btn__text pkt-txt-14-light">${e}</span>
|
|
77
|
+
</div>
|
|
78
|
+
</td>`}renderCalendarBody(){const e=new Date,t=new Date(this.year,this.month,1,12),s=new Date(this.year,this.month+1,0,12),n=(t.getDay()+6)%7,i=s.getDate(),l=Math.ceil((i+n)/7),h=new Date(this.year,this.month,0,12).getDate();let d=1;this.week=M(new Date(this.year,this.month,1,12));const p=[];for(let f=0;f<l;f++){const u=[];this.weeknumbers&&u.push(a.x`<td class="pkt-cal-week">${this.week}</td>`),this.week++;for(let y=1;y<8;y++)if(f===0&&y<n+1){const O=h-(n-y);u.push(a.x`<td class="pkt-cal-other">
|
|
79
|
+
<div
|
|
80
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
|
|
81
|
+
data-disabled="disabled"
|
|
82
|
+
>
|
|
83
|
+
<span class="pkt-btn__text pkt-txt-14-light">${O}</span>
|
|
84
|
+
</div>
|
|
85
|
+
</td>`)}else d>i?(u.push(a.x`<td class="pkt-cal-other">
|
|
86
|
+
<div
|
|
87
|
+
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
|
|
88
|
+
data-disabled="disabled"
|
|
89
|
+
>
|
|
90
|
+
<span class="pkt-btn__text pkt-txt-14-light">${d-i}</span>
|
|
91
|
+
</div>
|
|
92
|
+
</td>`),d++):(u.push(this.renderDayView(d,e,y)),d++);p.push(a.x`<tr class="pkt-cal-week-row" role="row">
|
|
93
|
+
${u}
|
|
94
|
+
</tr>`)}return p}isExcluded(e,t){return this.excludeweekdays.includes(e.toString())||this.earliest&&t<new Date(this.earliest)||this.latest&&t>new Date(this.latest)?!0:this.excludedates.some(s=>typeof s=="string"?s===this.formatISODate(t):s.toDateString()===t.toDateString())}formatISODate(e){return e.toISOString().split("T")[0]}isPrevMonthAllowed(){const e=new Date(this.year,this.month,0,12);return!(this.earliest&&new Date(this.earliest)>e)}prevMonth(){const e=this.month===0?11:this.month-1,t=this.month===0?this.year-1:this.year;this.changeMonth(t,e)}isNextMonthAllowed(){const e=new Date(this.year,this.month===11?0:this.month+1,1,12);return!(this.latest&&new Date(this.latest)<e)}nextMonth(){const e=this.month===11?0:this.month+1,t=this.month===11?this.year+1:this.year;this.changeMonth(t,e)}changeMonth(e,t){this.year=e,this.month=t,this.tabIndexSet=0,this.focusedDate=null,this.selectableDates=[],this.requestUpdate()}isInRange(e){if(this.range&&this.selected.length===2){if(e>new Date(this.selected[0])&&e<new Date(this.selected[1]))return!0}else if(this.range&&this.selected.length===1&&this.rangeHovered&&e>new Date(this.selected[0])&&e<this.rangeHovered)return!0;return!1}isRangeAllowed(e){let t=!0;if(this._selected.length===1){const s=b({start:this._selected[0],end:e});if(Array.isArray(s)&&s.length)for(let n=0;n<s.length;n++)this.excludedates.forEach(i=>{i>this._selected[0]&&i<e&&(t=!1)}),this.excludeweekdays.includes(_(s[n]).toString())&&(t=!1)}return t}emptySelected(){this.selected=[],this._selected=[],this.inRange={}}addToSelected(e){this.selected.includes(this.formatISODate(e))||(this.selected=[...this.selected,this.formatISODate(e)],this._selected=[...this._selected,e],this.range&&this.selected.length===2&&this.close())}removeFromSelected(e){if(this.selected.length===1)this.emptySelected();else{const t=this.selected.indexOf(this.formatISODate(e)),s=[...this.selected],n=[...this._selected];s.splice(t,1),n.splice(t,1),this.selected=s,this._selected=n}}toggleSelected(e){const t=this.formatISODate(e);this.selected.includes(t)?this.removeFromSelected(e):this.maxMultiple&&this.selected.length>=this.maxMultiple||this.addToSelected(e)}handleRangeSelect(e){const t=this.formatISODate(e);return this.selected.includes(t)?this.selected.indexOf(t)===0?this.emptySelected():this.removeFromSelected(e):this.selected.length>1?(this.emptySelected(),this.addToSelected(e)):(this.selected.length===1&&!this.isRangeAllowed(e)&&this.emptySelected(),this.selected.length===1&&this._selected[0]>e&&this.emptySelected(),this.addToSelected(e)),Promise.resolve()}handleRangeHover(e){if(this.range&&this._selected.length===1&&this.isRangeAllowed(e)&&this._selected[0]<e){this.rangeHovered=e,this.inRange={};const t=b({start:this._selected[0],end:e});if(Array.isArray(t)&&t.length)for(let s=0;s<t.length;s++)this.inRange[this.formatISODate(t[s])]=this.isInRange(t[s])}else this.rangeHovered=null}handleDateSelect(e){if(e)return this.range?this.handleRangeSelect(e):this.multiple?this.toggleSelected(e):(this.selected.includes(this.formatISODate(e))?this.emptySelected():(this.emptySelected(),this.addToSelected(e)),this.close()),this.dispatchEvent(new CustomEvent("date-selected",{detail:this.selected,bubbles:!0,composed:!0})),Promise.resolve()}focusOnCurrentDate(){const e=this.formatISODate(new Date),t=this.querySelector(`div[data-date="${e}"]`);if(t instanceof HTMLDivElement)this.focusedDate=e,t.focus();else{const s=this.selectableDates.find(n=>!n.isDisabled);if(s){const n=this.querySelector(`div[data-date="${s.currentDateISO}"]`);n instanceof HTMLDivElement&&(this.focusedDate=s.currentDateISO,n.focus())}}}closeEvent(e){this.contains(e.relatedTarget)||this.close()}close(){this.dispatchEvent(new CustomEvent("close",{detail:!0,bubbles:!0,composed:!0}))}};o([a.n({type:Boolean})],exports.PktCalendar.prototype,"multiple",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"maxMultiple",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"range",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"weeknumbers",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"withcontrols",2);o([a.n({converter:v.converters.csvToArray})],exports.PktCalendar.prototype,"selected",2);o([a.n({type:String})],exports.PktCalendar.prototype,"earliest",2);o([a.n({type:String})],exports.PktCalendar.prototype,"latest",2);o([a.n({converter:v.converters.stringsToDate})],exports.PktCalendar.prototype,"excludedates",2);o([a.n({converter:v.converters.csvToArray})],exports.PktCalendar.prototype,"excludeweekdays",2);o([a.n({converter:v.converters.stringToDate})],exports.PktCalendar.prototype,"currentmonth",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"dayStrings",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"monthStrings",2);o([a.n({type:String})],exports.PktCalendar.prototype,"weekString",2);o([a.n({type:String})],exports.PktCalendar.prototype,"prevMonthString",2);o([a.n({type:String})],exports.PktCalendar.prototype,"nextMonthString",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"_selected",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"year",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"month",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"week",2);o([a.n({type:Date})],exports.PktCalendar.prototype,"rangeHovered",2);o([a.r()],exports.PktCalendar.prototype,"inRange",2);o([a.r()],exports.PktCalendar.prototype,"focusedDate",2);o([a.r()],exports.PktCalendar.prototype,"selectableDates",2);o([a.r()],exports.PktCalendar.prototype,"currentmonthtouched",2);o([a.r()],exports.PktCalendar.prototype,"tabIndexSet",2);exports.PktCalendar=o([C.t("pkt-calendar")],exports.PktCalendar);exports.constructFrom=D;exports.getDefaultOptions=w;exports.getWeek=M;exports.getWeekYear=x;exports.millisecondsInDay=P;exports.millisecondsInWeek=S;exports.startOfWeek=m;exports.toDate=k;
|