@sbb-esta/lyne-elements 3.1.0 → 3.3.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/calendar/calendar.component.d.ts +54 -8
- package/calendar/calendar.component.d.ts.map +1 -1
- package/calendar/calendar.component.js +543 -256
- package/core/i18n/i18n.d.ts +1 -0
- package/core/i18n/i18n.d.ts.map +1 -1
- package/core/i18n/i18n.js +22 -16
- package/core/i18n.js +79 -78
- package/core/styles/_index.scss +1 -0
- package/core/styles/core.scss +2 -8
- package/core/styles/mixins/popover.scss +14 -0
- package/custom-elements.json +226 -21
- package/development/calendar/calendar.component.d.ts +54 -8
- package/development/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar.component.js +496 -81
- package/development/core/i18n/i18n.d.ts +1 -0
- package/development/core/i18n/i18n.d.ts.map +1 -1
- package/development/core/i18n/i18n.js +8 -1
- package/development/core/i18n.js +2 -1
- package/development/icon/icon-request.js +2 -2
- package/icon/icon-request.js +3 -3
- package/package.json +1 -1
|
@@ -1,119 +1,212 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var Ie = (o) => {
|
|
2
|
+
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as
|
|
9
|
-
import { classMap as
|
|
10
|
-
import { sbbInputModalityDetector as
|
|
11
|
-
import { readConfig as
|
|
12
|
-
import { SbbLanguageController as
|
|
13
|
-
import { defaultDateAdapter as
|
|
14
|
-
import { forceType as
|
|
15
|
-
import { i18nPreviousMonth as
|
|
16
|
-
import { SbbHydrationMixin as
|
|
4
|
+
var Re = (o, n, c) => n.has(o) || Ie("Cannot " + c);
|
|
5
|
+
var k = (o, n, c) => (Re(o, n, "read from private field"), c ? c.call(o) : n.get(o)), x = (o, n, c) => n.has(o) ? Ie("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, c), f = (o, n, c, b) => (Re(o, n, "write to private field"), b ? b.call(o, c) : n.set(o, c), c);
|
|
6
|
+
import { __esDecorate as y, __runInitializers as u } from "tslib";
|
|
7
|
+
import { css as Be, LitElement as He, isServer as Se, nothing as w, html as h } from "lit";
|
|
8
|
+
import { customElement as Ke, property as z, state as G } from "lit/decorators.js";
|
|
9
|
+
import { classMap as Q } from "lit/directives/class-map.js";
|
|
10
|
+
import { sbbInputModalityDetector as qe, isArrowKeyOrPageKeysPressed as Ue } from "../core/a11y.js";
|
|
11
|
+
import { readConfig as je } from "../core/config.js";
|
|
12
|
+
import { SbbLanguageController as Ge, SbbMediaMatcherController as Qe, SbbMediaQueryBreakpointMediumAndAbove as Te } from "../core/controllers.js";
|
|
13
|
+
import { defaultDateAdapter as Je, YEARS_PER_PAGE as V, DAYS_PER_ROW as D, MONTHS_PER_ROW as J, YEARS_PER_ROW as X, MONTHS_PER_PAGE as Xe } from "../core/datetime.js";
|
|
14
|
+
import { forceType as ee, plainDate as Ee, handleDistinctChange as Ze } from "../core/decorators.js";
|
|
15
|
+
import { i18nPreviousMonth as et, i18nNextMonth as tt, i18nYearMonthSelection as at, i18nCalendarWeekNumber as U, i18nPreviousYear as st, i18nNextYear as it, i18nCalendarDateSelection as Pe, i18nPreviousYearRange as rt, i18nNextYearRange as nt } from "../core/i18n.js";
|
|
16
|
+
import { SbbHydrationMixin as lt } from "../core/mixins.js";
|
|
17
17
|
import "../button/secondary-button.js";
|
|
18
18
|
import "../icon.js";
|
|
19
19
|
import "../screen-reader-only.js";
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
const ot = 6048e5, Le = Symbol.for("constructDateFrom");
|
|
21
|
+
function O(o, n) {
|
|
22
|
+
return typeof o == "function" ? o(n) : o && typeof o == "object" && Le in o ? o[Le](n) : o instanceof Date ? new o.constructor(n) : new Date(n);
|
|
23
|
+
}
|
|
24
|
+
function j(o, n) {
|
|
25
|
+
return O(n || o, o);
|
|
26
|
+
}
|
|
27
|
+
function dt(o, n, c) {
|
|
28
|
+
const b = j(o, c?.in);
|
|
29
|
+
return isNaN(n) ? O(o, NaN) : (n && b.setDate(b.getDate() + n), b);
|
|
30
|
+
}
|
|
31
|
+
let ct = {};
|
|
32
|
+
function ae() {
|
|
33
|
+
return ct;
|
|
34
|
+
}
|
|
35
|
+
function F(o, n) {
|
|
36
|
+
const c = ae(), b = n?.weekStartsOn ?? n?.locale?.options?.weekStartsOn ?? c.weekStartsOn ?? c.locale?.options?.weekStartsOn ?? 0, m = j(o, n?.in), v = m.getDay(), $ = (v < b ? 7 : 0) + v - b;
|
|
37
|
+
return m.setDate(m.getDate() - $), m.setHours(0, 0, 0, 0), m;
|
|
38
|
+
}
|
|
39
|
+
function ht(o, ...n) {
|
|
40
|
+
const c = O.bind(
|
|
41
|
+
null,
|
|
42
|
+
o || n.find((b) => typeof b == "object")
|
|
43
|
+
);
|
|
44
|
+
return n.map(c);
|
|
45
|
+
}
|
|
46
|
+
function bt(o, n, c) {
|
|
47
|
+
return dt(o, n * 7, c);
|
|
48
|
+
}
|
|
49
|
+
function _t(o, n) {
|
|
50
|
+
const c = j(o, n?.in), b = c.getMonth();
|
|
51
|
+
return c.setFullYear(c.getFullYear(), b + 1, 0), c.setHours(23, 59, 59, 999), c;
|
|
52
|
+
}
|
|
53
|
+
function ut(o, n) {
|
|
54
|
+
const [c, b] = ht(o, n.start, n.end);
|
|
55
|
+
return { start: c, end: b };
|
|
56
|
+
}
|
|
57
|
+
function ft(o, n) {
|
|
58
|
+
const { start: c, end: b } = ut(n?.in, o);
|
|
59
|
+
let m = +c > +b;
|
|
60
|
+
const v = F(m ? b : c, n), $ = F(m ? c : b, n);
|
|
61
|
+
v.setHours(15), $.setHours(15);
|
|
62
|
+
const W = +$.getTime();
|
|
63
|
+
let A = v, M = n?.step ?? 1;
|
|
64
|
+
if (!M) return [];
|
|
65
|
+
M < 0 && (M = -M, m = !m);
|
|
66
|
+
const N = [];
|
|
67
|
+
for (; +A <= W; )
|
|
68
|
+
A.setHours(0), N.push(O(c, A)), A = bt(A, M), A.setHours(15);
|
|
69
|
+
return m ? N.reverse() : N;
|
|
70
|
+
}
|
|
71
|
+
function pt(o, n) {
|
|
72
|
+
const c = j(o, n?.in);
|
|
73
|
+
return c.setDate(1), c.setHours(0, 0, 0, 0), c;
|
|
74
|
+
}
|
|
75
|
+
function mt(o, n) {
|
|
76
|
+
const c = j(o, n?.in), b = c.getFullYear(), m = ae(), v = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? m.firstWeekContainsDate ?? m.locale?.options?.firstWeekContainsDate ?? 1, $ = O(n?.in || o, 0);
|
|
77
|
+
$.setFullYear(b + 1, 0, v), $.setHours(0, 0, 0, 0);
|
|
78
|
+
const W = F($, n), A = O(n?.in || o, 0);
|
|
79
|
+
A.setFullYear(b, 0, v), A.setHours(0, 0, 0, 0);
|
|
80
|
+
const M = F(A, n);
|
|
81
|
+
return +c >= +W ? b + 1 : +c >= +M ? b : b - 1;
|
|
82
|
+
}
|
|
83
|
+
function gt(o, n) {
|
|
84
|
+
const c = ae(), b = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? c.firstWeekContainsDate ?? c.locale?.options?.firstWeekContainsDate ?? 1, m = mt(o, n), v = O(n?.in || o, 0);
|
|
85
|
+
return v.setFullYear(m, 0, b), v.setHours(0, 0, 0, 0), F(v, n);
|
|
86
|
+
}
|
|
87
|
+
function te(o, n) {
|
|
88
|
+
const c = j(o, n?.in), b = +F(c, n) - +gt(c, n);
|
|
89
|
+
return Math.round(b / ot) + 1;
|
|
90
|
+
}
|
|
91
|
+
const wt = Be`*,:before,:after{box-sizing:border-box}:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white)}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0}:host(:not([multiple])) .sbb-calendar__table-header-cell{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__header-cell,.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__header-cell:before,.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell:disabled,.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__header-cell:focus-visible:before,.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color)}.sbb-calendar__weekday,.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__weekday:before,.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
|
|
92
|
+
let It = (() => {
|
|
93
|
+
var C, I, R, S, T, E, P, L, B, H, K, q, p;
|
|
94
|
+
let o = [Ke("sbb-calendar")], n, c = [], b, m = lt(He), v = [], $, W = [], A = [], M, N = [], se = [], ie, re = [], ne = [], le, oe = [], de = [], ce, he = [], be = [], _e, ue, fe = [], pe = [], me, ge = [], we = [], ve, ye = [], De = [], Ae, ke = [], xe = [], $e, Ve = [], Me = [], Ye, ze, Fe = [], Oe = [], We, Ne = [], Ce = [];
|
|
95
|
+
return p = class extends m {
|
|
25
96
|
constructor() {
|
|
26
97
|
super();
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
98
|
+
x(this, C);
|
|
99
|
+
x(this, I);
|
|
100
|
+
x(this, R);
|
|
101
|
+
x(this, S);
|
|
102
|
+
x(this, T);
|
|
103
|
+
x(this, E);
|
|
104
|
+
x(this, P);
|
|
105
|
+
x(this, L);
|
|
106
|
+
x(this, B);
|
|
107
|
+
x(this, H);
|
|
108
|
+
x(this, K);
|
|
109
|
+
x(this, q);
|
|
110
|
+
f(this, C, (u(this, v), u(this, W, !1))), f(this, I, (u(this, A), u(this, N, "day"))), f(this, R, (u(this, se), u(this, re, null))), f(this, S, (u(this, ne), u(this, oe, null))), f(this, T, (u(this, de), u(this, he, !1))), f(this, E, (u(this, be), u(this, fe, null))), f(this, P, (u(this, pe), u(this, ge, null))), f(this, L, (u(this, we), u(this, ye, "horizontal"))), f(this, B, (u(this, De), u(this, ke, !1))), this._dateAdapter = (u(this, xe), je().datetime?.dateAdapter ?? Je), f(this, H, u(this, Ve, this._dateAdapter.today())), f(this, K, (u(this, Me), u(this, Fe, "day"))), this._nextCalendarView = (u(this, Oe), "day"), this._keyboardNavigationDayViewParameters = {
|
|
38
111
|
firstDayInView: null,
|
|
39
112
|
lastDayInView: null,
|
|
40
113
|
firstMonthOffset: 0,
|
|
41
114
|
firstMonthLength: 0,
|
|
42
115
|
secondMonthOffset: 0
|
|
43
|
-
}, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1,
|
|
116
|
+
}, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, f(this, q, u(this, Ne, !1)), this._language = (u(this, Ce), new Ge(this).withHandler(() => {
|
|
44
117
|
this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
|
|
45
|
-
})), this._mediaMatcher = new
|
|
46
|
-
[
|
|
118
|
+
})), this._mediaMatcher = new Qe(this, {
|
|
119
|
+
[Te]: () => this._init()
|
|
47
120
|
}), this._createMonthRows(), this._setWeekdays();
|
|
48
121
|
}
|
|
49
122
|
/** If set to true, two months are displayed */
|
|
50
123
|
get wide() {
|
|
51
|
-
return
|
|
124
|
+
return k(this, C);
|
|
52
125
|
}
|
|
53
126
|
set wide(e) {
|
|
54
|
-
|
|
127
|
+
f(this, C, e);
|
|
55
128
|
}
|
|
56
129
|
/** The initial view of the calendar which should be displayed on opening. */
|
|
57
130
|
get view() {
|
|
58
|
-
return
|
|
131
|
+
return k(this, I);
|
|
59
132
|
}
|
|
60
133
|
set view(e) {
|
|
61
|
-
|
|
134
|
+
f(this, I, e);
|
|
62
135
|
}
|
|
63
136
|
/**
|
|
64
137
|
* The minimum valid date. Accepts a date object or null.
|
|
65
138
|
* Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
|
|
66
139
|
*/
|
|
67
140
|
get min() {
|
|
68
|
-
return
|
|
141
|
+
return k(this, R);
|
|
69
142
|
}
|
|
70
143
|
set min(e) {
|
|
71
|
-
|
|
144
|
+
f(this, R, e);
|
|
72
145
|
}
|
|
73
146
|
/**
|
|
74
147
|
* The maximum valid date. Accepts a date object or null.
|
|
75
148
|
* Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
|
|
76
149
|
*/
|
|
77
150
|
get max() {
|
|
78
|
-
return
|
|
151
|
+
return k(this, S);
|
|
79
152
|
}
|
|
80
153
|
set max(e) {
|
|
81
|
-
|
|
154
|
+
f(this, S, e);
|
|
82
155
|
}
|
|
83
|
-
/**
|
|
156
|
+
/** Whether the calendar allows for multiple date selection. */
|
|
157
|
+
get multiple() {
|
|
158
|
+
return k(this, T);
|
|
159
|
+
}
|
|
160
|
+
set multiple(e) {
|
|
161
|
+
f(this, T, e);
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* The selected date: accepts a date object, or, if `multiple`, an array of dates.
|
|
165
|
+
*/
|
|
84
166
|
set selected(e) {
|
|
85
|
-
|
|
167
|
+
if (Array.isArray(e))
|
|
168
|
+
this._selected = e.map((t) => this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t))).filter((t) => t !== null).filter((t) => !this._isDayInRange(this._dateAdapter.toIso8601(t)) || this._dateFilter(t));
|
|
169
|
+
else {
|
|
170
|
+
const t = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));
|
|
171
|
+
t && (!this._isDayInRange(this._dateAdapter.toIso8601(t)) || this._dateFilter(t)) ? this._selected = t : this._selected = null;
|
|
172
|
+
}
|
|
86
173
|
}
|
|
87
174
|
get selected() {
|
|
88
|
-
return this.
|
|
175
|
+
return this._selected;
|
|
176
|
+
}
|
|
177
|
+
get _selected() {
|
|
178
|
+
return k(this, E);
|
|
179
|
+
}
|
|
180
|
+
set _selected(e) {
|
|
181
|
+
f(this, E, e);
|
|
89
182
|
}
|
|
90
183
|
/** A function used to filter out dates. */
|
|
91
184
|
get dateFilter() {
|
|
92
|
-
return
|
|
185
|
+
return k(this, P);
|
|
93
186
|
}
|
|
94
187
|
set dateFilter(e) {
|
|
95
|
-
|
|
188
|
+
f(this, P, e);
|
|
96
189
|
}
|
|
97
190
|
/** The orientation of days in the calendar. */
|
|
98
191
|
get orientation() {
|
|
99
|
-
return
|
|
192
|
+
return k(this, L);
|
|
100
193
|
}
|
|
101
194
|
set orientation(e) {
|
|
102
|
-
|
|
195
|
+
f(this, L, e);
|
|
196
|
+
}
|
|
197
|
+
/** Whether it has to display the week numbers in addition to week days. */
|
|
198
|
+
get weekNumbers() {
|
|
199
|
+
return k(this, B);
|
|
200
|
+
}
|
|
201
|
+
set weekNumbers(e) {
|
|
202
|
+
f(this, B, e);
|
|
103
203
|
}
|
|
104
204
|
/** The currently active date. */
|
|
105
205
|
get _activeDate() {
|
|
106
|
-
return
|
|
206
|
+
return k(this, H);
|
|
107
207
|
}
|
|
108
208
|
set _activeDate(e) {
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
/** The selected date as ISOString. */
|
|
112
|
-
get _selected() {
|
|
113
|
-
return w(this, F);
|
|
114
|
-
}
|
|
115
|
-
set _selected(e) {
|
|
116
|
-
c(this, F, e);
|
|
209
|
+
f(this, H, e);
|
|
117
210
|
}
|
|
118
211
|
/** The current wide property considering property value and breakpoints. From zero to small `wide` has always to be false. */
|
|
119
212
|
set _wide(e) {
|
|
@@ -123,20 +216,20 @@ let ot = (() => {
|
|
|
123
216
|
return this.hasAttribute("data-wide");
|
|
124
217
|
}
|
|
125
218
|
get _calendarView() {
|
|
126
|
-
return
|
|
219
|
+
return k(this, K);
|
|
127
220
|
}
|
|
128
221
|
set _calendarView(e) {
|
|
129
|
-
|
|
222
|
+
f(this, K, e);
|
|
130
223
|
}
|
|
131
224
|
/** A list of buttons corresponding to days, months or years depending on the view. */
|
|
132
225
|
get _cells() {
|
|
133
226
|
return Array.from(this.shadowRoot.querySelectorAll(".sbb-calendar__cell") ?? []);
|
|
134
227
|
}
|
|
135
228
|
get _initialized() {
|
|
136
|
-
return
|
|
229
|
+
return k(this, q);
|
|
137
230
|
}
|
|
138
231
|
set _initialized(e) {
|
|
139
|
-
|
|
232
|
+
f(this, q, e);
|
|
140
233
|
}
|
|
141
234
|
_dateFilter(e) {
|
|
142
235
|
return this.dateFilter?.(e) ?? !0;
|
|
@@ -156,18 +249,26 @@ let ot = (() => {
|
|
|
156
249
|
super.willUpdate(e), this._initialized && ((e.has("wide") || e.has("orientation")) && this.resetPosition(), e.has("view") && (this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view));
|
|
157
250
|
}
|
|
158
251
|
updated(e) {
|
|
159
|
-
super.updated(e), this._setTabIndex(),
|
|
252
|
+
super.updated(e), this._setTabIndex(), qe.mostRecentModality === "keyboard" && this._focusCell();
|
|
253
|
+
}
|
|
254
|
+
/**
|
|
255
|
+
* The `_selected` state should be adapted when the `multiple` property changes:
|
|
256
|
+
* - if it changes to true, the '_selected' is set to an array;
|
|
257
|
+
* - if it changes to false, the first available option is set as 'value' otherwise it's set to null.
|
|
258
|
+
*/
|
|
259
|
+
_onMultipleChanged(e) {
|
|
260
|
+
e && !Array.isArray(this._selected) && (this._selected = this._selected ? [this._selected] : []), !e && Array.isArray(this._selected) && (this._selected = this._selected.length ? this._selected[0] : null);
|
|
160
261
|
}
|
|
161
262
|
/** Initializes the component. */
|
|
162
263
|
_init(e) {
|
|
163
|
-
if (!
|
|
264
|
+
if (!Se) {
|
|
164
265
|
if (this.hydrationRequired) {
|
|
165
266
|
this.hydrationComplete.then(() => this._init());
|
|
166
267
|
return;
|
|
167
268
|
}
|
|
168
|
-
if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(
|
|
269
|
+
if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(Te) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._weekNumbers = this._createWeekNumbers(this._activeDate), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
|
|
169
270
|
const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
|
|
170
|
-
this._nextMonthWeeks = this._createWeekRows(t, !0), this._nextMonthYears = this._createYearRows(
|
|
271
|
+
this._nextMonthWeeks = this._createWeekRows(t, !0), this._nextMonthYears = this._createYearRows(V), this._nextMonthWeekNumbers = this._createWeekNumbers(t);
|
|
171
272
|
}
|
|
172
273
|
this._initialized = !0;
|
|
173
274
|
}
|
|
@@ -178,13 +279,27 @@ let ot = (() => {
|
|
|
178
279
|
}
|
|
179
280
|
/** Creates the array of weekdays. */
|
|
180
281
|
_setWeekdays() {
|
|
181
|
-
const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((i,
|
|
282
|
+
const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((i, l) => ({
|
|
182
283
|
long: i,
|
|
183
|
-
narrow: e[
|
|
284
|
+
narrow: e[l]
|
|
184
285
|
})), s = this._dateAdapter.getFirstDayOfWeek();
|
|
185
286
|
this._weekdays = a.slice(s).concat(a.slice(0, s));
|
|
186
287
|
}
|
|
187
|
-
/**
|
|
288
|
+
/**
|
|
289
|
+
* Given a date, it returns the week numbers for the month the date belongs to.
|
|
290
|
+
* TODO: check if date-fns can be replaced with custom logic.
|
|
291
|
+
*
|
|
292
|
+
* Since the calculation is not simple (see https://en.wikipedia.org/wiki/Week#Numbering),
|
|
293
|
+
* the date-fns library has been used this way:
|
|
294
|
+
* the first and the last day of the month are calculated and then passed to the `eachWeekOfInterval` function,
|
|
295
|
+
* which returns an array containing the starting day of every ISO week of the month,
|
|
296
|
+
* considering Monday as the first day.
|
|
297
|
+
* Then, this array is mapped via the `getWeek` function, which returns the ISO week number for that date.
|
|
298
|
+
*/
|
|
299
|
+
_createWeekNumbers(e) {
|
|
300
|
+
return ft({ start: pt(e), end: _t(e) }, { weekStartsOn: 1 }).map((t) => te(t, { weekStartsOn: 1, firstWeekContainsDate: 4 }));
|
|
301
|
+
}
|
|
302
|
+
/** Creates the rows along the horizontal direction and sets the parameters used in keyboard navigation. */
|
|
188
303
|
_createWeekRows(e, t = !1) {
|
|
189
304
|
const a = this._dateAdapter.getDateNames(), s = this._dateAdapter.getNumDaysInMonth(e), i = this._dateAdapter.getFirstWeekOffset(e);
|
|
190
305
|
return t ? (this._keyboardNavigationDayViewParameters.secondMonthOffset = i, this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), s))) : (this._keyboardNavigationDayViewParameters.firstMonthLength = s, this._keyboardNavigationDayViewParameters.firstMonthOffset = i, this._keyboardNavigationDayViewParameters.firstDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), 1)), this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), s))), this.orientation === "horizontal" ? this._createWeekRowsHorizontal(e, a, s, i) : this._createWeekRowsVertical(e, a, s, i);
|
|
@@ -199,15 +314,17 @@ let ot = (() => {
|
|
|
199
314
|
*/
|
|
200
315
|
_createWeekRowsHorizontal(e, t, a, s) {
|
|
201
316
|
const i = [[]];
|
|
202
|
-
for (let
|
|
203
|
-
|
|
204
|
-
const
|
|
317
|
+
for (let l = 0, r = s; l < a; l++, r++) {
|
|
318
|
+
r === D && (i.push([]), r = 0);
|
|
319
|
+
const d = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), l + 1), _ = this._dateAdapter.toIso8601(d);
|
|
205
320
|
i[i.length - 1].push({
|
|
206
|
-
value:
|
|
207
|
-
dateValue:
|
|
208
|
-
dayValue: t[
|
|
209
|
-
monthValue: String(this._dateAdapter.getMonth(
|
|
210
|
-
yearValue: String(this._dateAdapter.getYear(
|
|
321
|
+
value: _,
|
|
322
|
+
dateValue: d,
|
|
323
|
+
dayValue: t[l],
|
|
324
|
+
monthValue: String(this._dateAdapter.getMonth(d)),
|
|
325
|
+
yearValue: String(this._dateAdapter.getYear(d)),
|
|
326
|
+
weekValue: te(_, { weekStartsOn: 1, firstWeekContainsDate: 4 }),
|
|
327
|
+
weekDayValue: this._dateAdapter.getDayOfWeek(d)
|
|
211
328
|
});
|
|
212
329
|
}
|
|
213
330
|
return i;
|
|
@@ -227,36 +344,38 @@ let ot = (() => {
|
|
|
227
344
|
* - row 7: all the Sundays.
|
|
228
345
|
*/
|
|
229
346
|
_createWeekRowsVertical(e, t, a, s) {
|
|
230
|
-
const i = Array.from({ length:
|
|
231
|
-
for (let
|
|
232
|
-
|
|
233
|
-
const
|
|
234
|
-
i[
|
|
235
|
-
value:
|
|
236
|
-
dateValue:
|
|
237
|
-
dayValue: t[
|
|
238
|
-
monthValue: String(this._dateAdapter.getMonth(
|
|
239
|
-
yearValue: String(this._dateAdapter.getYear(
|
|
347
|
+
const i = Array.from({ length: D }, () => []);
|
|
348
|
+
for (let l = 0, r = s; l < a; l++, r++) {
|
|
349
|
+
r === D && (r = 0);
|
|
350
|
+
const d = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), l + 1), _ = this._dateAdapter.toIso8601(d);
|
|
351
|
+
i[r].push({
|
|
352
|
+
value: _,
|
|
353
|
+
dateValue: d,
|
|
354
|
+
dayValue: t[l],
|
|
355
|
+
monthValue: String(this._dateAdapter.getMonth(d)),
|
|
356
|
+
yearValue: String(this._dateAdapter.getYear(d)),
|
|
357
|
+
weekValue: te(_, { weekStartsOn: 1, firstWeekContainsDate: 4 }),
|
|
358
|
+
weekDayValue: this._dateAdapter.getDayOfWeek(d)
|
|
240
359
|
});
|
|
241
360
|
}
|
|
242
361
|
return i;
|
|
243
362
|
}
|
|
244
363
|
/** Creates the rows for the month selection view. */
|
|
245
364
|
_createMonthRows() {
|
|
246
|
-
const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((i,
|
|
247
|
-
value: e[
|
|
248
|
-
longValue: this._monthNames[
|
|
249
|
-
monthValue:
|
|
250
|
-
})), a = 12 /
|
|
365
|
+
const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((i, l) => ({
|
|
366
|
+
value: e[l],
|
|
367
|
+
longValue: this._monthNames[l],
|
|
368
|
+
monthValue: l + 1
|
|
369
|
+
})), a = 12 / J, s = [];
|
|
251
370
|
for (let i = 0; i < a; i++)
|
|
252
|
-
s.push(t.slice(
|
|
371
|
+
s.push(t.slice(J * i, J * (i + 1)));
|
|
253
372
|
this._months = s;
|
|
254
373
|
}
|
|
255
374
|
/** Creates the rows for the year selection view. */
|
|
256
375
|
_createYearRows(e = 0) {
|
|
257
|
-
const t = this._getStartValueYearView(), a = new Array(
|
|
258
|
-
for (let
|
|
259
|
-
i.push(a.slice(
|
|
376
|
+
const t = this._getStartValueYearView(), a = new Array(V).fill(0).map((l, r) => t + e + r), s = V / X, i = [];
|
|
377
|
+
for (let l = 0; l < s; l++)
|
|
378
|
+
i.push(a.slice(X * l, X * (l + 1)));
|
|
260
379
|
return i;
|
|
261
380
|
}
|
|
262
381
|
/**
|
|
@@ -271,9 +390,9 @@ let ot = (() => {
|
|
|
271
390
|
*/
|
|
272
391
|
_getStartValueYearView() {
|
|
273
392
|
let e = 0;
|
|
274
|
-
this.max ? e = this._dateAdapter.getYear(this.max) -
|
|
393
|
+
this.max ? e = this._dateAdapter.getYear(this.max) - V + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
|
|
275
394
|
const t = this._dateAdapter.getYear(this._activeDate);
|
|
276
|
-
return t - ((t - e) %
|
|
395
|
+
return t - ((t - e) % V + V) % V;
|
|
277
396
|
}
|
|
278
397
|
/** Checks if date is within the min-max range. */
|
|
279
398
|
_isDayInRange(e) {
|
|
@@ -317,15 +436,65 @@ let ot = (() => {
|
|
|
317
436
|
return !1;
|
|
318
437
|
}
|
|
319
438
|
/** Emits the selected date and sets it internally. */
|
|
320
|
-
_selectDate(e) {
|
|
321
|
-
this._chosenMonth = void 0, this._setChosenYear(), this.
|
|
322
|
-
|
|
439
|
+
_selectDate(e, t) {
|
|
440
|
+
if (this._chosenMonth = void 0, this._setChosenYear(), this.multiple) {
|
|
441
|
+
if (e.ctrlKey || e.metaKey)
|
|
442
|
+
if (this._selected && this._selected.length > 0) {
|
|
443
|
+
const a = this._selected.findIndex((s) => this._dateAdapter.compareDate(s, t) === 0);
|
|
444
|
+
a !== -1 ? (this._selected.splice(a, 1), this._selected = [...this._selected]) : this._selected = [...this._selected, t];
|
|
445
|
+
} else
|
|
446
|
+
this._selected = [t];
|
|
447
|
+
else {
|
|
448
|
+
if (this._selected?.length === 1 && this._dateAdapter.compareDate(this._selected[0], t) === 0)
|
|
449
|
+
return;
|
|
450
|
+
this._selected = [t];
|
|
451
|
+
}
|
|
452
|
+
this._emitDateSelectedEvent(this._selected.map((a) => this._dateAdapter.deserialize(a)));
|
|
453
|
+
} else
|
|
454
|
+
(!this._selected || this._dateAdapter.compareDate(this._selected, t) !== 0) && (this._selected = t, this._emitDateSelectedEvent(this._dateAdapter.deserialize(t)));
|
|
455
|
+
}
|
|
456
|
+
/**
|
|
457
|
+
* Handle multiple dates selection via weekNumber / weekDay buttons:
|
|
458
|
+
* - if Cmd or Ctrl are pressed, add the new date to the current ones;
|
|
459
|
+
* - if not,
|
|
460
|
+
* - if the new dates are the same of the current ones, it means that the same button has been clicked twice, so do nothing;
|
|
461
|
+
* - if not, the selected dates are the new ones.
|
|
462
|
+
*/
|
|
463
|
+
_selectMultipleDates(e, t) {
|
|
464
|
+
const a = this._cells.filter((r) => !r.disabled).map((r) => r.value), s = t.map((r) => r.value).filter((r) => a.includes(r)), i = new Set(s), l = new Set(this._selected.map((r) => this._dateAdapter.toIso8601(r)));
|
|
465
|
+
if (e.ctrlKey || e.metaKey) {
|
|
466
|
+
const r = this._updateSelectedWithMultipleDates(s, i, l);
|
|
467
|
+
this._selected = r.map((d) => this._dateAdapter.deserialize(d));
|
|
468
|
+
} else {
|
|
469
|
+
if (i.size === l.size && [...i].every((r) => l.has(r)))
|
|
470
|
+
return;
|
|
471
|
+
this._selected = s.map((r) => this._dateAdapter.deserialize(r));
|
|
472
|
+
}
|
|
473
|
+
this._emitDateSelectedEvent(this._selected.map((r) => this._dateAdapter.deserialize(r)));
|
|
474
|
+
}
|
|
475
|
+
/**
|
|
476
|
+
* Emits the dateselected event given the detail (as T or T[] based on the value of the multiple flag).
|
|
477
|
+
*/
|
|
478
|
+
_emitDateSelectedEvent(e) {
|
|
479
|
+
this.dispatchEvent(new CustomEvent("dateselected", {
|
|
480
|
+
detail: e,
|
|
323
481
|
composed: !0,
|
|
324
482
|
bubbles: !0
|
|
325
|
-
}))
|
|
483
|
+
}));
|
|
484
|
+
}
|
|
485
|
+
/**
|
|
486
|
+
* In case of multiple selection, newly added days must be added to the existing ones, without duplication.
|
|
487
|
+
* If the days to add are exactly the same as the selected ones, the set must be emptied.
|
|
488
|
+
*/
|
|
489
|
+
_updateSelectedWithMultipleDates(e, t, a) {
|
|
490
|
+
return e.every((s) => a.has(s)) ? t.forEach((s) => a.delete(s)) : t.forEach((s) => a.add(s)), Array.from(a);
|
|
326
491
|
}
|
|
327
492
|
_setChosenYear() {
|
|
328
|
-
this.view === "month"
|
|
493
|
+
if (this.view === "month") {
|
|
494
|
+
let e;
|
|
495
|
+
this.multiple ? e = this.selected.at(-1) : e = this.selected, this._chosenYear = this._dateAdapter.getYear(e ?? this._dateAdapter.today());
|
|
496
|
+
} else
|
|
497
|
+
this._chosenYear = void 0;
|
|
329
498
|
}
|
|
330
499
|
_assignActiveDate(e) {
|
|
331
500
|
if (this.min && this._dateAdapter.compareDate(this.min, e) > 0) {
|
|
@@ -394,7 +563,8 @@ let ot = (() => {
|
|
|
394
563
|
}
|
|
395
564
|
/** Get the element in the calendar to assign focus. */
|
|
396
565
|
_getFirstFocusable() {
|
|
397
|
-
|
|
566
|
+
let e;
|
|
567
|
+
this.multiple ? e = this._selected?.length ? [...this._selected].sort()[0] : this._dateAdapter.today() : e = this._selected ?? this._dateAdapter.today();
|
|
398
568
|
let t = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(`[value="${this._dateAdapter.toIso8601(e)}"]`) ?? this.shadowRoot.querySelector(`[data-month="${this._dateAdapter.getMonth(e)}"]`) ?? this.shadowRoot.querySelector(`[data-year="${this._dateAdapter.getYear(e)}"]`);
|
|
399
569
|
return (!t || t?.disabled) && (t = this._calendarView === "day" ? this._getFirstFocusableDay() : this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), t || null;
|
|
400
570
|
}
|
|
@@ -415,15 +585,15 @@ let ot = (() => {
|
|
|
415
585
|
}
|
|
416
586
|
}
|
|
417
587
|
_handleKeyboardEvent(e, t) {
|
|
418
|
-
|
|
419
|
-
const a = this._cells, s = a.findIndex((
|
|
588
|
+
Ue(e) && e.preventDefault();
|
|
589
|
+
const a = this._cells, s = a.findIndex((r) => r === e.target);
|
|
420
590
|
let i;
|
|
421
591
|
t ? i = this._navigateByKeyboardDayView(e, s, a, t) : i = this._navigateByKeyboard(e, s, a);
|
|
422
|
-
const
|
|
423
|
-
i !==
|
|
592
|
+
const l = this.shadowRoot.activeElement;
|
|
593
|
+
i !== l && (i.tabIndex = 0, i?.focus(), l.tabIndex = -1);
|
|
424
594
|
}
|
|
425
595
|
_navigateByKeyboardDayView(e, t, a, s) {
|
|
426
|
-
const i = this.orientation === "horizontal" ? { leftRight: 1, upDown:
|
|
596
|
+
const i = this.orientation === "horizontal" ? { leftRight: 1, upDown: D } : { leftRight: D, upDown: 1 }, l = t < this._keyboardNavigationDayViewParameters.firstMonthLength ? this._keyboardNavigationDayViewParameters.firstMonthOffset : this._keyboardNavigationDayViewParameters.secondMonthOffset;
|
|
427
597
|
switch (e.key) {
|
|
428
598
|
case "ArrowUp":
|
|
429
599
|
return this._findDayArrows(a, t, s.dateValue, -i.upDown);
|
|
@@ -435,25 +605,25 @@ let ot = (() => {
|
|
|
435
605
|
return this._findDayArrows(a, t, s.dateValue, i.leftRight);
|
|
436
606
|
case "PageUp":
|
|
437
607
|
if (this.orientation === "horizontal") {
|
|
438
|
-
const
|
|
439
|
-
return this._findDayPageUpDown(a, t, s,
|
|
608
|
+
const d = (+s.dayValue % D || D) - +s.dayValue;
|
|
609
|
+
return this._findDayPageUpDown(a, t, s, d, i.upDown);
|
|
440
610
|
} else {
|
|
441
|
-
const
|
|
442
|
-
return this._findDayPageUpDown(a, t, s,
|
|
611
|
+
const _ = (Math.ceil((+s.dayValue + l) / D) - 1) * D - l + 1 - +s.dayValue;
|
|
612
|
+
return this._findDayPageUpDown(a, t, s, _, i.upDown);
|
|
443
613
|
}
|
|
444
614
|
case "PageDown":
|
|
445
615
|
if (this.orientation === "horizontal") {
|
|
446
|
-
const
|
|
447
|
-
return this._findDayPageUpDown(a, t, s,
|
|
616
|
+
const r = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, d = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, _ = this._dateAdapter.createDate(d, r, 1), g = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(_, -1)), Y = Math.trunc((g - +s.dayValue) / D) * D;
|
|
617
|
+
return this._findDayPageUpDown(a, t, s, Y, -i.upDown);
|
|
448
618
|
} else {
|
|
449
|
-
const
|
|
450
|
-
return this._findDayPageUpDown(a, t, s,
|
|
619
|
+
const _ = Math.ceil((+s.dayValue + l) / D) * D - l - +s.dayValue;
|
|
620
|
+
return this._findDayPageUpDown(a, t, s, _, -i.upDown);
|
|
451
621
|
}
|
|
452
622
|
case "Home":
|
|
453
623
|
return this._findDayFirst(a, t, s, 1);
|
|
454
624
|
case "End": {
|
|
455
|
-
const
|
|
456
|
-
return this._findDayLast(a, t,
|
|
625
|
+
const r = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, d = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, _ = this._dateAdapter.createDate(d, r, 1);
|
|
626
|
+
return this._findDayLast(a, t, _);
|
|
457
627
|
}
|
|
458
628
|
default:
|
|
459
629
|
return a[t];
|
|
@@ -466,28 +636,28 @@ let ot = (() => {
|
|
|
466
636
|
const i = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a, s));
|
|
467
637
|
if (this._isDayOutOfView(i))
|
|
468
638
|
return e[t];
|
|
469
|
-
const
|
|
470
|
-
return !
|
|
639
|
+
const l = e.find((r) => r.value === i);
|
|
640
|
+
return !l || l.disabled ? this._findDayArrows(e, t, this._dateAdapter.deserialize(i), s) : l;
|
|
471
641
|
}
|
|
472
642
|
_findDayPageUpDown(e, t, a, s, i) {
|
|
473
|
-
const
|
|
474
|
-
if (this._isDayOutOfView(
|
|
643
|
+
const l = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a.dateValue, s));
|
|
644
|
+
if (this._isDayOutOfView(l))
|
|
475
645
|
return e[t];
|
|
476
|
-
const
|
|
477
|
-
return !
|
|
646
|
+
const r = e.find((d) => d.value === l);
|
|
647
|
+
return !r || r.disabled ? this._findDayPageUpDown(e, t, a, s + i, i) : r;
|
|
478
648
|
}
|
|
479
649
|
_findDayFirst(e, t, a, s) {
|
|
480
650
|
const i = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+a.yearValue, +a.monthValue, s));
|
|
481
651
|
if (this._isDayOutOfView(i))
|
|
482
652
|
return e[t];
|
|
483
|
-
const
|
|
484
|
-
return !
|
|
653
|
+
const l = e.find((r) => r.value === i);
|
|
654
|
+
return !l || l.disabled ? this._findDayFirst(e, t, a, s + 1) : l;
|
|
485
655
|
}
|
|
486
656
|
_findDayLast(e, t, a) {
|
|
487
657
|
const s = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a, -1));
|
|
488
658
|
if (this._isDayOutOfView(s))
|
|
489
659
|
return e[t];
|
|
490
|
-
const i = e.find((
|
|
660
|
+
const i = e.find((l) => l.value === s);
|
|
491
661
|
return !i || i.disabled ? this._findDayLast(e, t, this._dateAdapter.deserialize(s)) : i;
|
|
492
662
|
}
|
|
493
663
|
/**
|
|
@@ -497,12 +667,12 @@ let ot = (() => {
|
|
|
497
667
|
* while in month and year view it's not due to the fixed amount of rendered cells.
|
|
498
668
|
*/
|
|
499
669
|
_navigateByKeyboard(e, t, a) {
|
|
500
|
-
const { elementIndexForWideMode: s, offsetForWideMode: i, lastElementIndexForWideMode:
|
|
670
|
+
const { elementIndexForWideMode: s, offsetForWideMode: i, lastElementIndexForWideMode: l, verticalOffset: r } = this._calculateParametersForKeyboardNavigation(t, this._calendarView === "year");
|
|
501
671
|
switch (e.key) {
|
|
502
672
|
case "ArrowUp":
|
|
503
|
-
return this._findNext(a, t, -
|
|
673
|
+
return this._findNext(a, t, -r);
|
|
504
674
|
case "ArrowDown":
|
|
505
|
-
return this._findNext(a, t,
|
|
675
|
+
return this._findNext(a, t, r);
|
|
506
676
|
case "ArrowLeft":
|
|
507
677
|
return this._findNext(a, t, -1);
|
|
508
678
|
case "ArrowRight":
|
|
@@ -510,11 +680,11 @@ let ot = (() => {
|
|
|
510
680
|
case "Home":
|
|
511
681
|
return this._findFirst(a, i);
|
|
512
682
|
case "PageUp":
|
|
513
|
-
return this._findFirstOnColumn(a, s, i,
|
|
683
|
+
return this._findFirstOnColumn(a, s, i, r);
|
|
514
684
|
case "PageDown":
|
|
515
|
-
return this._findLastOnColumn(a, t,
|
|
685
|
+
return this._findLastOnColumn(a, t, l, r);
|
|
516
686
|
case "End":
|
|
517
|
-
return this._findLast(a,
|
|
687
|
+
return this._findLast(a, l - 1);
|
|
518
688
|
default:
|
|
519
689
|
return a[t];
|
|
520
690
|
}
|
|
@@ -525,9 +695,9 @@ let ot = (() => {
|
|
|
525
695
|
* @param isYearView Whether the displayed `view` is the year one.
|
|
526
696
|
*/
|
|
527
697
|
_calculateParametersForKeyboardNavigation(e, t) {
|
|
528
|
-
const a = t ?
|
|
698
|
+
const a = t ? V : Xe, s = Math.trunc(e / a) * a, i = s === 0 ? e : e - a;
|
|
529
699
|
return {
|
|
530
|
-
verticalOffset: t ?
|
|
700
|
+
verticalOffset: t ? X : J,
|
|
531
701
|
elementIndexForWideMode: i,
|
|
532
702
|
offsetForWideMode: e - i,
|
|
533
703
|
lastElementIndexForWideMode: s === 0 ? a : a * 2
|
|
@@ -562,30 +732,30 @@ let ot = (() => {
|
|
|
562
732
|
return e[i].disabled ? this._findNext(e, i, -s) : e[i];
|
|
563
733
|
}
|
|
564
734
|
_resetCalendarView(e = !1) {
|
|
565
|
-
this._resetFocus = !0, this._activeDate = this.
|
|
735
|
+
this._resetFocus = !0, this._activeDate = (this.multiple ? this._selected.at(-1) : this._selected) ?? this._dateAdapter.today(), this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view, e && this._startTableTransition();
|
|
566
736
|
}
|
|
567
737
|
/** Render the view for the day selection. */
|
|
568
738
|
_renderDayView() {
|
|
569
739
|
const e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
|
|
570
|
-
return
|
|
740
|
+
return h`
|
|
571
741
|
<div class="sbb-calendar__controls">
|
|
572
|
-
${this._getArrow("left", () => this._goToDifferentMonth(-1),
|
|
742
|
+
${this._getArrow("left", () => this._goToDifferentMonth(-1), et[this._language.current], this._previousMonthDisabled())}
|
|
573
743
|
<div class="sbb-calendar__controls-month">
|
|
574
744
|
${this._createLabelForDayView(this._activeDate)}
|
|
575
|
-
${this._wide ? this._createLabelForDayView(e) :
|
|
745
|
+
${this._wide ? this._createLabelForDayView(e) : w}
|
|
576
746
|
<sbb-screen-reader-only role="status">
|
|
577
747
|
${this._createAriaLabelForDayView(this._activeDate, e)}
|
|
578
748
|
</sbb-screen-reader-only>
|
|
579
749
|
</div>
|
|
580
|
-
${this._getArrow("right", () => this._goToDifferentMonth(1),
|
|
750
|
+
${this._getArrow("right", () => this._goToDifferentMonth(1), tt[this._language.current], this._nextMonthDisabled())}
|
|
581
751
|
</div>
|
|
582
752
|
<div class="sbb-calendar__table-container sbb-calendar__table-day-view">
|
|
583
|
-
${this.orientation === "horizontal" ?
|
|
584
|
-
${this._createDayTable(this._weeks)}
|
|
585
|
-
${this._wide ? this._createDayTable(this._nextMonthWeeks) :
|
|
586
|
-
` :
|
|
587
|
-
${this._createDayTableVertical(this._weeks)}
|
|
588
|
-
${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, e) :
|
|
753
|
+
${this.orientation === "horizontal" ? h`
|
|
754
|
+
${this._createDayTable(this._weeks, this._weekNumbers)}
|
|
755
|
+
${this._wide ? this._createDayTable(this._nextMonthWeeks, this._nextMonthWeekNumbers, !0) : w}
|
|
756
|
+
` : h`
|
|
757
|
+
${this._createDayTableVertical(this._weeks, this._weekNumbers)}
|
|
758
|
+
${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, this._nextMonthWeekNumbers, e) : w}
|
|
589
759
|
`}
|
|
590
760
|
</div>
|
|
591
761
|
`;
|
|
@@ -593,11 +763,11 @@ let ot = (() => {
|
|
|
593
763
|
/** Creates the label with the month for the daily view. */
|
|
594
764
|
_createLabelForDayView(e) {
|
|
595
765
|
const t = `${this._monthNames[this._dateAdapter.getMonth(e) - 1]} ${this._dateAdapter.getYear(e)}`;
|
|
596
|
-
return
|
|
766
|
+
return h`
|
|
597
767
|
<button
|
|
598
768
|
type="button"
|
|
599
769
|
class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
|
|
600
|
-
aria-label="${
|
|
770
|
+
aria-label="${at[this._language.current]} ${t}"
|
|
601
771
|
@click=${() => {
|
|
602
772
|
this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
|
|
603
773
|
}}
|
|
@@ -615,60 +785,158 @@ let ot = (() => {
|
|
|
615
785
|
return t;
|
|
616
786
|
}
|
|
617
787
|
/** Creates the calendar table for the daily view. */
|
|
618
|
-
_createDayTable(e) {
|
|
619
|
-
const
|
|
620
|
-
return
|
|
788
|
+
_createDayTable(e, t, a = !1) {
|
|
789
|
+
const s = this._dateAdapter.toIso8601(this._dateAdapter.today()), i = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat(), l = (a ? this._nextMonthWeeks : this._weeks).flat();
|
|
790
|
+
return h`
|
|
621
791
|
<table
|
|
622
792
|
class="sbb-calendar__table"
|
|
623
|
-
@focusout=${(
|
|
624
|
-
@animationend=${(
|
|
793
|
+
@focusout=${(r) => this._handleTableBlur(r.relatedTarget)}
|
|
794
|
+
@animationend=${(r) => this._tableAnimationEnd(r)}
|
|
625
795
|
>
|
|
626
796
|
<thead class="sbb-calendar__table-header">
|
|
627
|
-
<tr
|
|
628
|
-
${this.
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
797
|
+
<tr>
|
|
798
|
+
${this.weekNumbers ? h`<th class="sbb-calendar__table-header-cell"></th>` : w}
|
|
799
|
+
${this._weekdays.map((r, d) => h`
|
|
800
|
+
<th class="sbb-calendar__table-header-cell">
|
|
801
|
+
${this.multiple ? h`
|
|
802
|
+
<button
|
|
803
|
+
class="sbb-calendar__header-cell sbb-calendar__weekday"
|
|
804
|
+
aria-label=${r.long}
|
|
805
|
+
@click=${(_) => {
|
|
806
|
+
const g = l.filter((Y) => Y.weekDayValue === (d + 1) % 7);
|
|
807
|
+
this._selectMultipleDates(_, g);
|
|
808
|
+
}}
|
|
809
|
+
>
|
|
810
|
+
${r.narrow}
|
|
811
|
+
</button>
|
|
812
|
+
` : h`
|
|
813
|
+
<sbb-screen-reader-only>${r.long}</sbb-screen-reader-only>
|
|
814
|
+
<span aria-hidden="true">${r.narrow}</span>
|
|
815
|
+
`}
|
|
632
816
|
</th>
|
|
633
817
|
`)}
|
|
634
818
|
</tr>
|
|
635
819
|
</thead>
|
|
636
820
|
<tbody class="sbb-calendar__table-body">
|
|
637
|
-
${e.map((
|
|
638
|
-
const
|
|
639
|
-
return
|
|
821
|
+
${e.map((r, d) => {
|
|
822
|
+
const _ = D - r.length;
|
|
823
|
+
return d === 0 && _ ? h`
|
|
640
824
|
<tr>
|
|
641
|
-
${
|
|
642
|
-
|
|
825
|
+
${this.weekNumbers ? h`
|
|
826
|
+
<td class="sbb-calendar__table-header-cell">
|
|
827
|
+
${this.multiple ? h`
|
|
828
|
+
<button
|
|
829
|
+
class="sbb-calendar__header-cell sbb-calendar__weekday"
|
|
830
|
+
aria-label=${`${U[this._language.current]} ${t[0]}`}
|
|
831
|
+
@click=${(g) => {
|
|
832
|
+
const Y = i.filter((Z) => Z.weekValue === t[0]);
|
|
833
|
+
this._selectMultipleDates(g, Y);
|
|
834
|
+
}}
|
|
835
|
+
>
|
|
836
|
+
${t[0]}
|
|
837
|
+
</button>
|
|
838
|
+
` : h`
|
|
839
|
+
<sbb-screen-reader-only
|
|
840
|
+
>${`${U[this._language.current]} ${t[0]}`}</sbb-screen-reader-only
|
|
841
|
+
>
|
|
842
|
+
<span aria-hidden="true">${t[0]}</span>
|
|
843
|
+
`}
|
|
844
|
+
</td>
|
|
845
|
+
` : w}
|
|
846
|
+
${[...Array(_).keys()].map(() => h`<td class="sbb-calendar__table-data"></td>`)}
|
|
847
|
+
${this._createDayCells(r, s)}
|
|
643
848
|
</tr>
|
|
644
|
-
` :
|
|
645
|
-
|
|
646
|
-
|
|
849
|
+
` : h`
|
|
850
|
+
<tr>
|
|
851
|
+
${this.weekNumbers ? h`
|
|
852
|
+
<td class="sbb-calendar__table-header-cell">
|
|
853
|
+
${this.multiple ? h`
|
|
854
|
+
<button
|
|
855
|
+
class="sbb-calendar__header-cell sbb-calendar__weekday"
|
|
856
|
+
aria-label=${`${U[this._language.current]} ${t[d]}`}
|
|
857
|
+
@click=${(g) => {
|
|
858
|
+
const Y = i.filter((Z) => Z.weekValue === t[d]);
|
|
859
|
+
this._selectMultipleDates(g, Y);
|
|
860
|
+
}}
|
|
861
|
+
>
|
|
862
|
+
${t[d]}
|
|
863
|
+
</button>
|
|
864
|
+
` : h`
|
|
865
|
+
<sbb-screen-reader-only
|
|
866
|
+
>${`${U[this._language.current]} ${t[d]}`}</sbb-screen-reader-only
|
|
867
|
+
>
|
|
868
|
+
<span aria-hidden="true">${t[d]}</span>
|
|
869
|
+
`}
|
|
870
|
+
</td>
|
|
871
|
+
` : w}
|
|
872
|
+
${this._createDayCells(r, s)}
|
|
873
|
+
</tr>
|
|
874
|
+
`;
|
|
647
875
|
})}
|
|
648
876
|
</tbody>
|
|
649
877
|
</table>
|
|
650
878
|
`;
|
|
651
879
|
}
|
|
652
880
|
/* Creates the table in orientation='vertical'. */
|
|
653
|
-
_createDayTableVertical(e, t) {
|
|
654
|
-
const
|
|
655
|
-
return
|
|
881
|
+
_createDayTableVertical(e, t, a) {
|
|
882
|
+
const s = this._dateAdapter.toIso8601(this._dateAdapter.today()), i = this._dateAdapter.getFirstWeekOffset(a ?? this._activeDate), l = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat();
|
|
883
|
+
return h`
|
|
656
884
|
<table
|
|
657
885
|
class="sbb-calendar__table"
|
|
658
|
-
@focusout=${(
|
|
659
|
-
@animationend=${(
|
|
886
|
+
@focusout=${(r) => this._handleTableBlur(r.relatedTarget)}
|
|
887
|
+
@animationend=${(r) => this._tableAnimationEnd(r)}
|
|
660
888
|
>
|
|
889
|
+
${this.weekNumbers ? h`
|
|
890
|
+
<thead class="sbb-calendar__table-header">
|
|
891
|
+
<tr>
|
|
892
|
+
${a ? w : h`<th class="sbb-calendar__table-data"></th>`}
|
|
893
|
+
${t.map((r) => h`
|
|
894
|
+
<th class="sbb-calendar__table-header-cell">
|
|
895
|
+
${this.multiple ? h`
|
|
896
|
+
<button
|
|
897
|
+
class="sbb-calendar__header-cell sbb-calendar__weekday"
|
|
898
|
+
aria-label=${`${U[this._language.current]} ${r}`}
|
|
899
|
+
@click=${(d) => {
|
|
900
|
+
const _ = l.filter((g) => g.weekValue === r);
|
|
901
|
+
this._selectMultipleDates(d, _);
|
|
902
|
+
}}
|
|
903
|
+
>
|
|
904
|
+
${r}
|
|
905
|
+
</button>
|
|
906
|
+
` : h`
|
|
907
|
+
<sbb-screen-reader-only
|
|
908
|
+
>${`${U[this._language.current]} ${r}`}</sbb-screen-reader-only
|
|
909
|
+
>
|
|
910
|
+
<span aria-hidden="true">${r}</span>
|
|
911
|
+
`}
|
|
912
|
+
</th>
|
|
913
|
+
`)}
|
|
914
|
+
</tr>
|
|
915
|
+
</thead>
|
|
916
|
+
` : w}
|
|
661
917
|
<tbody class="sbb-calendar__table-body">
|
|
662
|
-
${e.map((
|
|
663
|
-
const
|
|
664
|
-
return
|
|
918
|
+
${e.map((r, d) => {
|
|
919
|
+
const _ = this._weekdays[d], g = this._wide ? [...r, ...this._nextMonthWeeks[d]] : r;
|
|
920
|
+
return h`
|
|
665
921
|
<tr>
|
|
666
|
-
${
|
|
667
|
-
<sbb-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
922
|
+
${a ? w : h`
|
|
923
|
+
<td class="sbb-calendar__table-header-cell">
|
|
924
|
+
${this.multiple ? h`
|
|
925
|
+
<button
|
|
926
|
+
class="sbb-calendar__header-cell sbb-calendar__weekday"
|
|
927
|
+
aria-label=${_.long}
|
|
928
|
+
@click=${(Y) => this._selectMultipleDates(Y, g)}
|
|
929
|
+
>
|
|
930
|
+
${_.narrow}
|
|
931
|
+
</button>
|
|
932
|
+
` : h`
|
|
933
|
+
<sbb-screen-reader-only>${_.long}</sbb-screen-reader-only>
|
|
934
|
+
<span aria-hidden="true">${_.narrow}</span>
|
|
935
|
+
`}
|
|
936
|
+
</td>
|
|
937
|
+
`}
|
|
938
|
+
${d < i ? h`<td class="sbb-calendar__table-data"></td>` : w}
|
|
939
|
+
${this._createDayCells(r, s)}
|
|
672
940
|
</tr>
|
|
673
941
|
`;
|
|
674
942
|
})}
|
|
@@ -679,32 +947,33 @@ let ot = (() => {
|
|
|
679
947
|
/** Creates the cells for the daily view. */
|
|
680
948
|
_createDayCells(e, t) {
|
|
681
949
|
return e.map((a) => {
|
|
682
|
-
const s = !this._isDayInRange(a.value), i = !this._dateFilter(this._dateAdapter.deserialize(a.value)),
|
|
683
|
-
|
|
950
|
+
const s = !this._isDayInRange(a.value), i = !this._dateFilter(this._dateAdapter.deserialize(a.value)), l = a.value === t;
|
|
951
|
+
let r;
|
|
952
|
+
return this.multiple ? r = this._selected.find((d) => this._dateAdapter.compareDate(a.dateValue, d) === 0) !== void 0 : r = !!this._selected && this._dateAdapter.compareDate(a.dateValue, this._selected) === 0, h`
|
|
684
953
|
<td
|
|
685
|
-
class=${
|
|
954
|
+
class=${Q({
|
|
686
955
|
"sbb-calendar__table-data": !0,
|
|
687
956
|
"sbb-calendar__table-data-selected": r
|
|
688
957
|
})}
|
|
689
958
|
>
|
|
690
959
|
<button
|
|
691
|
-
class=${
|
|
960
|
+
class=${Q({
|
|
692
961
|
"sbb-calendar__cell": !0,
|
|
693
962
|
"sbb-calendar__day": !0,
|
|
694
|
-
"sbb-calendar__cell-current":
|
|
963
|
+
"sbb-calendar__cell-current": l,
|
|
695
964
|
"sbb-calendar__selected": r,
|
|
696
965
|
"sbb-calendar__crossed-out": !s && i
|
|
697
966
|
})}
|
|
698
|
-
@click=${() => this._selectDate(a.
|
|
967
|
+
@click=${(d) => this._selectDate(d, a.dateValue)}
|
|
699
968
|
?disabled=${s || i}
|
|
700
969
|
value=${a.value}
|
|
701
970
|
type="button"
|
|
702
971
|
aria-label=${this._dateAdapter.getAccessibilityFormatDate(a.value)}
|
|
703
972
|
aria-pressed=${r}
|
|
704
973
|
aria-disabled=${s || i}
|
|
705
|
-
aria-current=${
|
|
974
|
+
aria-current=${l ? "date" : w}
|
|
706
975
|
tabindex="-1"
|
|
707
|
-
@keydown=${(
|
|
976
|
+
@keydown=${(d) => this._handleKeyboardEvent(d, a)}
|
|
708
977
|
sbb-popover-close
|
|
709
978
|
>
|
|
710
979
|
${a.dayValue}
|
|
@@ -715,71 +984,78 @@ let ot = (() => {
|
|
|
715
984
|
}
|
|
716
985
|
/** Render the view for the month selection. */
|
|
717
986
|
_renderMonthView() {
|
|
718
|
-
return
|
|
987
|
+
return h`
|
|
719
988
|
<div class="sbb-calendar__controls">
|
|
720
|
-
${this._getArrow("left", () => this._goToDifferentYear(-1),
|
|
989
|
+
${this._getArrow("left", () => this._goToDifferentYear(-1), st[this._language.current], this._previousYearDisabled())}
|
|
721
990
|
<div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
|
|
722
|
-
${this._getArrow("right", () => this._goToDifferentYear(1),
|
|
991
|
+
${this._getArrow("right", () => this._goToDifferentYear(1), it[this._language.current], this._nextYearDisabled())}
|
|
723
992
|
</div>
|
|
724
993
|
<div class="sbb-calendar__table-container sbb-calendar__table-month-view">
|
|
725
994
|
${this._createMonthTable(this._months, this._chosenYear)}
|
|
726
|
-
${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) :
|
|
995
|
+
${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : w}
|
|
727
996
|
</div>
|
|
728
997
|
`;
|
|
729
998
|
}
|
|
730
999
|
/** Creates the label with the year for the monthly view. */
|
|
731
1000
|
_createLabelForMonthView() {
|
|
732
|
-
return
|
|
1001
|
+
return h` <button
|
|
733
1002
|
type="button"
|
|
734
1003
|
id="sbb-calendar__month-selection"
|
|
735
1004
|
class="sbb-calendar__controls-change-date"
|
|
736
|
-
aria-label=${`${
|
|
1005
|
+
aria-label=${`${Pe[this._language.current]} ${this._chosenYear}`}
|
|
737
1006
|
@click=${() => this._resetCalendarView(!0)}
|
|
738
1007
|
>
|
|
739
|
-
${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` :
|
|
1008
|
+
${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : w}
|
|
740
1009
|
<sbb-icon name="chevron-small-up-small"></sbb-icon>
|
|
741
1010
|
</button>
|
|
742
1011
|
<sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
|
|
743
1012
|
}
|
|
744
1013
|
/** Creates the table for the month selection view. */
|
|
745
1014
|
_createMonthTable(e, t) {
|
|
746
|
-
return
|
|
1015
|
+
return h`
|
|
747
1016
|
<table
|
|
748
1017
|
class="sbb-calendar__table"
|
|
749
1018
|
@animationend=${(a) => this._tableAnimationEnd(a)}
|
|
750
1019
|
>
|
|
751
|
-
${this._wide ?
|
|
752
|
-
<tr
|
|
753
|
-
<th class="sbb-calendar__table-header" colspan=${
|
|
1020
|
+
${this._wide ? h`<thead class="sbb-calendar__table-header" aria-hidden="true">
|
|
1021
|
+
<tr>
|
|
1022
|
+
<th class="sbb-calendar__table-header-cell" colspan=${J}>${t}</th>
|
|
754
1023
|
</tr>
|
|
755
|
-
</thead>` :
|
|
1024
|
+
</thead>` : w}
|
|
756
1025
|
<tbody class="sbb-calendar__table-body">
|
|
757
|
-
${e.map((a) =>
|
|
1026
|
+
${e.map((a) => h`
|
|
758
1027
|
<tr>
|
|
759
1028
|
${a.map((s) => {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
1029
|
+
let i;
|
|
1030
|
+
if (this.multiple)
|
|
1031
|
+
i = this._selected.find((_) => t === this._dateAdapter.getYear(_) && s.monthValue === this._dateAdapter.getMonth(_)) !== void 0;
|
|
1032
|
+
else {
|
|
1033
|
+
const _ = this._selected ? this._dateAdapter.getMonth(this._selected) : void 0, g = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
|
|
1034
|
+
i = !!this._selected && t === g && s.monthValue === _;
|
|
1035
|
+
}
|
|
1036
|
+
const l = !this._isMonthInRange(s.monthValue, t), r = !this._isMonthFilteredOut(s.monthValue, t), d = t === this._dateAdapter.getYear(this._dateAdapter.today()) && this._dateAdapter.getMonth(this._dateAdapter.today()) === s.monthValue;
|
|
1037
|
+
return h` <td
|
|
1038
|
+
class=${Q({
|
|
763
1039
|
"sbb-calendar__table-data": !0,
|
|
764
1040
|
"sbb-calendar__table-month": !0
|
|
765
1041
|
})}
|
|
766
1042
|
>
|
|
767
1043
|
<button
|
|
768
|
-
class=${
|
|
1044
|
+
class=${Q({
|
|
769
1045
|
"sbb-calendar__cell": !0,
|
|
770
1046
|
"sbb-calendar__pill": !0,
|
|
771
|
-
"sbb-calendar__cell-current":
|
|
772
|
-
"sbb-calendar__crossed-out": !
|
|
773
|
-
"sbb-calendar__selected":
|
|
1047
|
+
"sbb-calendar__cell-current": d,
|
|
1048
|
+
"sbb-calendar__crossed-out": !l && r,
|
|
1049
|
+
"sbb-calendar__selected": i
|
|
774
1050
|
})}
|
|
775
1051
|
@click=${() => this._onMonthSelection(s.monthValue, t)}
|
|
776
|
-
?disabled=${
|
|
1052
|
+
?disabled=${l || r}
|
|
777
1053
|
aria-label=${`${s.longValue} ${t}`}
|
|
778
|
-
aria-pressed=${
|
|
779
|
-
aria-disabled=${String(
|
|
1054
|
+
aria-pressed=${i}
|
|
1055
|
+
aria-disabled=${String(l || r)}
|
|
780
1056
|
tabindex="-1"
|
|
781
|
-
data-month=${s.monthValue ||
|
|
782
|
-
@keydown=${(
|
|
1057
|
+
data-month=${s.monthValue || w}
|
|
1058
|
+
@keydown=${(_) => this._handleKeyboardEvent(_)}
|
|
783
1059
|
>
|
|
784
1060
|
${s.value}
|
|
785
1061
|
</button>
|
|
@@ -797,21 +1073,21 @@ let ot = (() => {
|
|
|
797
1073
|
}
|
|
798
1074
|
/** Render the view for the year selection. */
|
|
799
1075
|
_renderYearView() {
|
|
800
|
-
return
|
|
1076
|
+
return h`
|
|
801
1077
|
<div class="sbb-calendar__controls">
|
|
802
|
-
${this._getArrow("left", () => this._goToDifferentYearRange(-
|
|
1078
|
+
${this._getArrow("left", () => this._goToDifferentYearRange(-V), rt(V)[this._language.current], this._previousYearRangeDisabled())}
|
|
803
1079
|
<div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
|
|
804
|
-
${this._getArrow("right", () => this._goToDifferentYearRange(
|
|
1080
|
+
${this._getArrow("right", () => this._goToDifferentYearRange(V), nt(V)[this._language.current], this._nextYearRangeDisabled())}
|
|
805
1081
|
</div>
|
|
806
1082
|
<div class="sbb-calendar__table-container sbb-calendar__table-year-view">
|
|
807
1083
|
${this._createYearTable(this._years)}
|
|
808
|
-
${this._wide ? this._createYearTable(this._nextMonthYears, !0) :
|
|
1084
|
+
${this._wide ? this._createYearTable(this._nextMonthYears, !0) : w}
|
|
809
1085
|
</div>
|
|
810
1086
|
`;
|
|
811
1087
|
}
|
|
812
1088
|
/** Creates the button arrow for all the views. */
|
|
813
1089
|
_getArrow(e, t, a, s) {
|
|
814
|
-
return
|
|
1090
|
+
return h`<sbb-secondary-button
|
|
815
1091
|
size="m"
|
|
816
1092
|
icon-name="chevron-small-${e}-small"
|
|
817
1093
|
aria-label=${a}
|
|
@@ -823,12 +1099,12 @@ let ot = (() => {
|
|
|
823
1099
|
/** Creates the label with the year range for the yearly view. */
|
|
824
1100
|
_createLabelForYearView() {
|
|
825
1101
|
const e = this._years.flat()[0], t = (this._wide ? this._nextMonthYears : this._years).flat(), a = t[t.length - 1], s = `${e} - ${a}`;
|
|
826
|
-
return
|
|
1102
|
+
return h`
|
|
827
1103
|
<button
|
|
828
1104
|
type="button"
|
|
829
1105
|
id="sbb-calendar__year-selection"
|
|
830
1106
|
class="sbb-calendar__controls-change-date"
|
|
831
|
-
aria-label="${
|
|
1107
|
+
aria-label="${Pe[this._language.current]} ${s}"
|
|
832
1108
|
@click=${() => this._resetCalendarView(!0)}
|
|
833
1109
|
>
|
|
834
1110
|
${s}
|
|
@@ -840,31 +1116,38 @@ let ot = (() => {
|
|
|
840
1116
|
/** Creates the table for the year selection view. */
|
|
841
1117
|
_createYearTable(e, t = !1) {
|
|
842
1118
|
const a = this._dateAdapter.today();
|
|
843
|
-
return
|
|
1119
|
+
return h` <table
|
|
844
1120
|
class="sbb-calendar__table"
|
|
845
1121
|
@animationend=${(s) => this._tableAnimationEnd(s)}
|
|
846
1122
|
>
|
|
847
1123
|
<tbody class="sbb-calendar__table-body">
|
|
848
|
-
${e.map((s) =>
|
|
1124
|
+
${e.map((s) => h` <tr>
|
|
849
1125
|
${s.map((i) => {
|
|
850
|
-
|
|
851
|
-
|
|
1126
|
+
let l;
|
|
1127
|
+
if (this.multiple)
|
|
1128
|
+
l = this._selected.find((g) => i === this._dateAdapter.getYear(g)) !== void 0;
|
|
1129
|
+
else {
|
|
1130
|
+
const g = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
|
|
1131
|
+
l = !!this._selected && i === g;
|
|
1132
|
+
}
|
|
1133
|
+
const r = !this._isYearInRange(i), d = !this._isYearFilteredOut(i), _ = this._dateAdapter.getYear(a) === i;
|
|
1134
|
+
return h` <td class="sbb-calendar__table-data sbb-calendar__table-year">
|
|
852
1135
|
<button
|
|
853
|
-
class=${
|
|
1136
|
+
class=${Q({
|
|
854
1137
|
"sbb-calendar__cell": !0,
|
|
855
1138
|
"sbb-calendar__pill": !0,
|
|
856
|
-
"sbb-calendar__cell-current":
|
|
857
|
-
"sbb-calendar__crossed-out": !r &&
|
|
858
|
-
"sbb-calendar__selected":
|
|
1139
|
+
"sbb-calendar__cell-current": _,
|
|
1140
|
+
"sbb-calendar__crossed-out": !r && d,
|
|
1141
|
+
"sbb-calendar__selected": l
|
|
859
1142
|
})}
|
|
860
1143
|
@click=${() => this._onYearSelection(i, t)}
|
|
861
|
-
?disabled=${r ||
|
|
1144
|
+
?disabled=${r || d}
|
|
862
1145
|
aria-label=${i}
|
|
863
|
-
aria-pressed=${
|
|
864
|
-
aria-disabled=${String(r ||
|
|
1146
|
+
aria-pressed=${l}
|
|
1147
|
+
aria-disabled=${String(r || d)}
|
|
865
1148
|
tabindex="-1"
|
|
866
|
-
data-year=${i ||
|
|
867
|
-
@keydown=${(
|
|
1149
|
+
data-year=${i || w}
|
|
1150
|
+
@keydown=${(g) => this._handleKeyboardEvent(g)}
|
|
868
1151
|
>
|
|
869
1152
|
${i}
|
|
870
1153
|
</button>
|
|
@@ -879,8 +1162,8 @@ let ot = (() => {
|
|
|
879
1162
|
this._chosenYear = t ? e - 1 : e, this._nextCalendarView = "month", this._assignActiveDate(this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate))), this._startTableTransition();
|
|
880
1163
|
}
|
|
881
1164
|
_getView() {
|
|
882
|
-
if (
|
|
883
|
-
return
|
|
1165
|
+
if (Se || this.hydrationRequired)
|
|
1166
|
+
return h`${w}`;
|
|
884
1167
|
switch (this._calendarView) {
|
|
885
1168
|
case "year":
|
|
886
1169
|
return this._renderYearView();
|
|
@@ -899,39 +1182,43 @@ let ot = (() => {
|
|
|
899
1182
|
this.toggleAttribute("data-transition", !0), this.shadowRoot?.querySelectorAll("table")?.forEach((e) => e.classList.toggle("sbb-calendar__table-hide"));
|
|
900
1183
|
}
|
|
901
1184
|
render() {
|
|
902
|
-
return
|
|
1185
|
+
return h`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
|
|
903
1186
|
}
|
|
904
|
-
},
|
|
905
|
-
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
906
|
-
|
|
1187
|
+
}, C = new WeakMap(), I = new WeakMap(), R = new WeakMap(), S = new WeakMap(), T = new WeakMap(), E = new WeakMap(), P = new WeakMap(), L = new WeakMap(), B = new WeakMap(), H = new WeakMap(), K = new WeakMap(), q = new WeakMap(), b = p, (() => {
|
|
1188
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
|
|
1189
|
+
$ = [ee(), z({ type: Boolean })], M = [z()], ie = [Ee(), z()], le = [Ee(), z()], ce = [ee(), Ze((t, a) => t._onMultipleChanged(a)), z({ type: Boolean })], _e = [z()], ue = [G()], me = [z({ attribute: "date-filter" })], ve = [z({ reflect: !0 })], Ae = [ee(), z({ attribute: "week-numbers", type: Boolean })], $e = [G()], Ye = [G()], ze = [G()], We = [G()], y(p, null, $, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, a) => {
|
|
907
1190
|
t.wide = a;
|
|
908
|
-
} }, metadata: e },
|
|
1191
|
+
} }, metadata: e }, W, A), y(p, null, M, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, a) => {
|
|
909
1192
|
t.view = a;
|
|
910
|
-
} }, metadata: e },
|
|
1193
|
+
} }, metadata: e }, N, se), y(p, null, ie, { kind: "accessor", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, get: (t) => t.min, set: (t, a) => {
|
|
911
1194
|
t.min = a;
|
|
912
|
-
} }, metadata: e },
|
|
1195
|
+
} }, metadata: e }, re, ne), y(p, null, le, { kind: "accessor", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, get: (t) => t.max, set: (t, a) => {
|
|
913
1196
|
t.max = a;
|
|
914
|
-
} }, metadata: e },
|
|
1197
|
+
} }, metadata: e }, oe, de), y(p, null, ce, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, a) => {
|
|
1198
|
+
t.multiple = a;
|
|
1199
|
+
} }, metadata: e }, he, be), y(p, null, _e, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
|
|
915
1200
|
t.selected = a;
|
|
916
|
-
} }, metadata: e }, null,
|
|
1201
|
+
} }, metadata: e }, null, v), y(p, null, ue, { kind: "accessor", name: "_selected", static: !1, private: !1, access: { has: (t) => "_selected" in t, get: (t) => t._selected, set: (t, a) => {
|
|
1202
|
+
t._selected = a;
|
|
1203
|
+
} }, metadata: e }, fe, pe), y(p, null, me, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, get: (t) => t.dateFilter, set: (t, a) => {
|
|
917
1204
|
t.dateFilter = a;
|
|
918
|
-
} }, metadata: e },
|
|
1205
|
+
} }, metadata: e }, ge, we), y(p, null, ve, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, a) => {
|
|
919
1206
|
t.orientation = a;
|
|
920
|
-
} }, metadata: e },
|
|
1207
|
+
} }, metadata: e }, ye, De), y(p, null, Ae, { kind: "accessor", name: "weekNumbers", static: !1, private: !1, access: { has: (t) => "weekNumbers" in t, get: (t) => t.weekNumbers, set: (t, a) => {
|
|
1208
|
+
t.weekNumbers = a;
|
|
1209
|
+
} }, metadata: e }, ke, xe), y(p, null, $e, { kind: "accessor", name: "_activeDate", static: !1, private: !1, access: { has: (t) => "_activeDate" in t, get: (t) => t._activeDate, set: (t, a) => {
|
|
921
1210
|
t._activeDate = a;
|
|
922
|
-
} }, metadata: e },
|
|
923
|
-
t._selected = a;
|
|
924
|
-
} }, metadata: e }, he, be), p(h, null, _e, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
|
|
1211
|
+
} }, metadata: e }, Ve, Me), y(p, null, Ye, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
|
|
925
1212
|
t._wide = a;
|
|
926
|
-
} }, metadata: e }, null,
|
|
1213
|
+
} }, metadata: e }, null, v), y(p, null, ze, { kind: "accessor", name: "_calendarView", static: !1, private: !1, access: { has: (t) => "_calendarView" in t, get: (t) => t._calendarView, set: (t, a) => {
|
|
927
1214
|
t._calendarView = a;
|
|
928
|
-
} }, metadata: e },
|
|
1215
|
+
} }, metadata: e }, Fe, Oe), y(p, null, We, { kind: "accessor", name: "_initialized", static: !1, private: !1, access: { has: (t) => "_initialized" in t, get: (t) => t._initialized, set: (t, a) => {
|
|
929
1216
|
t._initialized = a;
|
|
930
|
-
} }, metadata: e },
|
|
931
|
-
})(),
|
|
1217
|
+
} }, metadata: e }, Ne, Ce), y(null, n = { value: b }, o, { kind: "class", name: b.name, metadata: e }, null, c), b = n.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
1218
|
+
})(), p.styles = wt, p.events = {
|
|
932
1219
|
dateselected: "dateselected"
|
|
933
|
-
},
|
|
1220
|
+
}, u(b, c), b;
|
|
934
1221
|
})();
|
|
935
1222
|
export {
|
|
936
|
-
|
|
1223
|
+
It as SbbCalendarElement
|
|
937
1224
|
};
|