@sbb-esta/lyne-elements 1.14.0 → 1.14.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/calendar/calendar.d.ts.map +1 -1
- package/calendar.js +173 -174
- package/custom-elements.json +41 -12
- package/development/calendar/calendar.d.ts.map +1 -1
- package/development/calendar.js +33 -34
- package/development/core/controllers.js +1 -1
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +1 -1
- package/development/expansion-panel/expansion-panel-header.js +2 -2
- package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +1 -1
- package/expansion-panel/expansion-panel-header.js +1 -1
- package/package.json +2 -2
package/calendar.js
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
var
|
|
1
|
+
var he = (o) => {
|
|
2
2
|
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var v = (o, h, m) => (
|
|
4
|
+
var _e = (o, h, m) => h.has(o) || he("Cannot " + m);
|
|
5
|
+
var v = (o, h, m) => (_e(o, h, "read from private field"), m ? m.call(o) : h.get(o)), w = (o, h, m) => h.has(o) ? he("Cannot add the same private member more than once") : h instanceof WeakSet ? h.add(o) : h.set(o, m), u = (o, h, m, p) => (_e(o, h, "write to private field"), p ? p.call(o, m) : h.set(o, m), m);
|
|
6
6
|
import { __esDecorate as f, __runInitializers as c } from "tslib";
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as
|
|
7
|
+
import { css as fe, LitElement as ge, isServer as ue, html as n, nothing as g } from "lit";
|
|
8
|
+
import { customElement as pe, property as A, state as F } from "lit/decorators.js";
|
|
9
9
|
import { classMap as R } from "lit/directives/class-map.js";
|
|
10
|
-
import { sbbInputModalityDetector as
|
|
11
|
-
import { readConfig as
|
|
12
|
-
import { SbbConnectedAbortController as
|
|
13
|
-
import { defaultDateAdapter as
|
|
14
|
-
import { forceType as
|
|
15
|
-
import { isBreakpoint as
|
|
16
|
-
import { EventEmitter as
|
|
17
|
-
import { i18nPreviousMonth as
|
|
18
|
-
import { SbbHydrationMixin as
|
|
10
|
+
import { sbbInputModalityDetector as ve, isArrowKeyOrPageKeysPressed as we } from "./core/a11y.js";
|
|
11
|
+
import { readConfig as ye } from "./core/config.js";
|
|
12
|
+
import { SbbConnectedAbortController as Ae, SbbLanguageController as xe } from "./core/controllers.js";
|
|
13
|
+
import { defaultDateAdapter as De, YEARS_PER_PAGE as b, DAYS_PER_ROW as O, MONTHS_PER_ROW as I, YEARS_PER_ROW as C } from "./core/datetime.js";
|
|
14
|
+
import { forceType as $e } from "./core/decorators.js";
|
|
15
|
+
import { isBreakpoint as Ye } from "./core/dom.js";
|
|
16
|
+
import { EventEmitter as Me } from "./core/eventing.js";
|
|
17
|
+
import { i18nPreviousMonth as ke, i18nNextMonth as Ve, i18nYearMonthSelection as ze, i18nPreviousYear as Fe, i18nNextYear as Re, i18nCalendarDateSelection as me, i18nPreviousYearRange as Ie, i18nNextYearRange as Ce } from "./core/i18n.js";
|
|
18
|
+
import { SbbHydrationMixin as Se } from "./core/mixins.js";
|
|
19
19
|
import "./button/secondary-button.js";
|
|
20
20
|
import "./icon.js";
|
|
21
21
|
import "./screen-reader-only.js";
|
|
22
|
-
const
|
|
23
|
-
let
|
|
24
|
-
var
|
|
25
|
-
let o = [
|
|
26
|
-
var
|
|
22
|
+
const Te = fe`*,: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-zero-time, 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:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) 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))}.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-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);width:var(--sbb-calendar-cell-size);padding:0;padding-block-end:var(--sbb-spacing-fixed-4x);text-align:center}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.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__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__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__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.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))}}`;
|
|
23
|
+
let tt = (() => {
|
|
24
|
+
var D, $, Y, M, k, V, z, l;
|
|
25
|
+
let o = [pe("sbb-calendar")], h, m = [], p, E = Se(ge), x = [], W, L = [], P = [], B, q = [], K = [], H, U, j, G, J, Q = [], X = [], Z, ee = [], te = [], ae, se = [], ie = [], re, ne, le = [], de = [], oe, ce = [], be = [];
|
|
26
|
+
var S = (l = class extends E {
|
|
27
27
|
constructor() {
|
|
28
28
|
var e;
|
|
29
29
|
super();
|
|
30
|
-
w(this, x);
|
|
31
30
|
w(this, D);
|
|
32
|
-
w(this, Y);
|
|
33
31
|
w(this, $);
|
|
32
|
+
w(this, Y);
|
|
34
33
|
w(this, M);
|
|
35
34
|
w(this, k);
|
|
36
35
|
w(this, V);
|
|
37
|
-
|
|
36
|
+
w(this, z);
|
|
37
|
+
u(this, D, (c(this, x), c(this, L, !1))), u(this, $, (c(this, P), c(this, q, "day"))), this._min = c(this, K), this._now = null, u(this, Y, c(this, Q, null)), this._dateAdapter = (c(this, X), ((e = ye().datetime) == null ? void 0 : e.dateAdapter) ?? De), this._dateSelected = new Me(this, S.events.dateSelected), u(this, M, c(this, ee, this.now)), u(this, k, (c(this, te), c(this, se, void 0))), u(this, V, (c(this, ie), c(this, le, "day"))), this._nextCalendarView = (c(this, de), "day"), this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, u(this, z, c(this, ce, !1)), this._abort = (c(this, be), new Ae(this)), this._language = new xe(this).withHandler(() => {
|
|
38
38
|
this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
|
|
39
39
|
}), this._createMonthRows(), this._setWeekdays();
|
|
40
40
|
}
|
|
41
41
|
/** If set to true, two months are displayed */
|
|
42
42
|
get wide() {
|
|
43
|
-
return v(this,
|
|
43
|
+
return v(this, D);
|
|
44
44
|
}
|
|
45
45
|
set wide(e) {
|
|
46
|
-
u(this,
|
|
46
|
+
u(this, D, e);
|
|
47
47
|
}
|
|
48
48
|
/** The initial view of the calendar which should be displayed on opening. */
|
|
49
49
|
get view() {
|
|
50
|
-
return v(this,
|
|
50
|
+
return v(this, $);
|
|
51
51
|
}
|
|
52
52
|
set view(e) {
|
|
53
|
-
u(this,
|
|
53
|
+
u(this, $, e);
|
|
54
54
|
}
|
|
55
55
|
/** The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
|
|
56
56
|
set min(e) {
|
|
@@ -89,17 +89,17 @@ let at = (() => {
|
|
|
89
89
|
}
|
|
90
90
|
/** The currently active date. */
|
|
91
91
|
get _activeDate() {
|
|
92
|
-
return v(this,
|
|
92
|
+
return v(this, M);
|
|
93
93
|
}
|
|
94
94
|
set _activeDate(e) {
|
|
95
|
-
u(this,
|
|
95
|
+
u(this, M, e);
|
|
96
96
|
}
|
|
97
97
|
/** The selected date as ISOString. */
|
|
98
98
|
get _selected() {
|
|
99
|
-
return v(this,
|
|
99
|
+
return v(this, k);
|
|
100
100
|
}
|
|
101
101
|
set _selected(e) {
|
|
102
|
-
u(this,
|
|
102
|
+
u(this, k, e);
|
|
103
103
|
}
|
|
104
104
|
/** The current wide property considering property value and breakpoints. From zero to small `wide` has always to be false. */
|
|
105
105
|
set _wide(e) {
|
|
@@ -109,20 +109,20 @@ let at = (() => {
|
|
|
109
109
|
return this.hasAttribute("data-wide");
|
|
110
110
|
}
|
|
111
111
|
get _calendarView() {
|
|
112
|
-
return v(this,
|
|
112
|
+
return v(this, V);
|
|
113
113
|
}
|
|
114
114
|
set _calendarView(e) {
|
|
115
|
-
u(this,
|
|
115
|
+
u(this, V, e);
|
|
116
116
|
}
|
|
117
117
|
/** A list of buttons corresponding to days, months or years depending on the view. */
|
|
118
118
|
get _cells() {
|
|
119
119
|
return Array.from(this.shadowRoot.querySelectorAll(".sbb-calendar__cell") ?? []);
|
|
120
120
|
}
|
|
121
121
|
get _initialized() {
|
|
122
|
-
return v(this,
|
|
122
|
+
return v(this, z);
|
|
123
123
|
}
|
|
124
124
|
set _initialized(e) {
|
|
125
|
-
u(this,
|
|
125
|
+
u(this, z, e);
|
|
126
126
|
}
|
|
127
127
|
_dateFilter(e) {
|
|
128
128
|
var t;
|
|
@@ -145,16 +145,16 @@ let at = (() => {
|
|
|
145
145
|
super.willUpdate(e), this._initialized && (e.has("wide") && this.resetPosition(), e.has("view") && (this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view));
|
|
146
146
|
}
|
|
147
147
|
updated(e) {
|
|
148
|
-
super.updated(e), this._setTabIndex(),
|
|
148
|
+
super.updated(e), this._setTabIndex(), ve.mostRecentModality === "keyboard" && this._focusCell();
|
|
149
149
|
}
|
|
150
150
|
/** Initializes the component. */
|
|
151
151
|
_init(e) {
|
|
152
|
-
if (!
|
|
152
|
+
if (!ue) {
|
|
153
153
|
if (this.hydrationRequired) {
|
|
154
154
|
this.hydrationComplete.then(() => this._init());
|
|
155
155
|
return;
|
|
156
156
|
}
|
|
157
|
-
if (e && this._assignActiveDate(e), this._wide =
|
|
157
|
+
if (e && this._assignActiveDate(e), this._wide = Ye("medium") && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
|
|
158
158
|
const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
|
|
159
159
|
this._nextMonthWeeks = this._createWeekRows(t), this._nextMonthYears = this._createYearRows(b);
|
|
160
160
|
}
|
|
@@ -168,44 +168,44 @@ let at = (() => {
|
|
|
168
168
|
}
|
|
169
169
|
/** Creates the array of weekdays. */
|
|
170
170
|
_setWeekdays() {
|
|
171
|
-
const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((
|
|
172
|
-
long:
|
|
171
|
+
const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((i, r) => ({
|
|
172
|
+
long: i,
|
|
173
173
|
narrow: e[r]
|
|
174
|
-
})),
|
|
175
|
-
this._weekdays = a.slice(
|
|
174
|
+
})), s = this._dateAdapter.getFirstDayOfWeek();
|
|
175
|
+
this._weekdays = a.slice(s).concat(a.slice(0, s));
|
|
176
176
|
}
|
|
177
177
|
/** Creates the rows for each week. */
|
|
178
178
|
_createWeekRows(e) {
|
|
179
|
-
const t = this._dateAdapter.getNumDaysInMonth(e), a = this._dateAdapter.getDateNames(),
|
|
180
|
-
for (let r = 0, d =
|
|
181
|
-
d === O && (
|
|
179
|
+
const t = this._dateAdapter.getNumDaysInMonth(e), a = this._dateAdapter.getDateNames(), s = [[]], i = this._dateAdapter.getFirstWeekOffset(e);
|
|
180
|
+
for (let r = 0, d = i; r < t; r++, d++) {
|
|
181
|
+
d === O && (s.push([]), d = 0);
|
|
182
182
|
const _ = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
|
|
183
|
-
|
|
183
|
+
s[s.length - 1].push({
|
|
184
184
|
value: this._dateAdapter.toIso8601(_),
|
|
185
185
|
dayValue: a[r],
|
|
186
186
|
monthValue: String(this._dateAdapter.getMonth(_)),
|
|
187
187
|
yearValue: String(this._dateAdapter.getYear(_))
|
|
188
188
|
});
|
|
189
189
|
}
|
|
190
|
-
return
|
|
190
|
+
return s;
|
|
191
191
|
}
|
|
192
192
|
/** Creates the rows for the month selection view. */
|
|
193
193
|
_createMonthRows() {
|
|
194
|
-
const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((
|
|
194
|
+
const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((i, r) => ({
|
|
195
195
|
value: e[r],
|
|
196
196
|
longValue: this._monthNames[r],
|
|
197
197
|
monthValue: r + 1
|
|
198
|
-
})), a = 12 / I,
|
|
199
|
-
for (let
|
|
200
|
-
|
|
201
|
-
this._months =
|
|
198
|
+
})), a = 12 / I, s = [];
|
|
199
|
+
for (let i = 0; i < a; i++)
|
|
200
|
+
s.push(t.slice(I * i, I * (i + 1)));
|
|
201
|
+
this._months = s;
|
|
202
202
|
}
|
|
203
203
|
/** Creates the rows for the year selection view. */
|
|
204
204
|
_createYearRows(e = 0) {
|
|
205
|
-
const t = this._getStartValueYearView(), a = new Array(b).fill(0).map((r, d) => t + e + d),
|
|
206
|
-
for (let r = 0; r <
|
|
207
|
-
|
|
208
|
-
return
|
|
205
|
+
const t = this._getStartValueYearView(), a = new Array(b).fill(0).map((r, d) => t + e + d), s = b / C, i = [];
|
|
206
|
+
for (let r = 0; r < s; r++)
|
|
207
|
+
i.push(a.slice(C * r, C * (r + 1)));
|
|
208
|
+
return i;
|
|
209
209
|
}
|
|
210
210
|
/**
|
|
211
211
|
* Calculates the first year that will be shown in the year selection panel.
|
|
@@ -225,30 +225,30 @@ let at = (() => {
|
|
|
225
225
|
}
|
|
226
226
|
/** Checks if date is within the min-max range. */
|
|
227
227
|
_isDayInRange(e) {
|
|
228
|
-
if (!this.
|
|
228
|
+
if (!this.min && !this.max)
|
|
229
229
|
return !0;
|
|
230
|
-
const t = this._dateAdapter.isValid(this.
|
|
230
|
+
const t = this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this._dateAdapter.deserialize(e)) > 0, a = this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.max, this._dateAdapter.deserialize(e)) < 0;
|
|
231
231
|
return !(t || a);
|
|
232
232
|
}
|
|
233
|
-
_isMonthInRange(e) {
|
|
234
|
-
if (!this.
|
|
233
|
+
_isMonthInRange(e, t) {
|
|
234
|
+
if (!this.min && !this.max)
|
|
235
235
|
return !0;
|
|
236
|
-
const
|
|
237
|
-
return !(
|
|
236
|
+
const a = this._dateAdapter.isValid(this.min) && (t < this._dateAdapter.getYear(this.min) || t === this._dateAdapter.getYear(this.min) && e < this._dateAdapter.getMonth(this.min)), s = this._dateAdapter.isValid(this.max) && (t > this._dateAdapter.getYear(this.max) || t === this._dateAdapter.getYear(this.max) && e > this._dateAdapter.getMonth(this.max));
|
|
237
|
+
return !(a || s);
|
|
238
238
|
}
|
|
239
239
|
_isYearInRange(e) {
|
|
240
|
-
if (!this.
|
|
240
|
+
if (!this.min && !this.max)
|
|
241
241
|
return !0;
|
|
242
|
-
const t = this._dateAdapter.isValid(this.
|
|
242
|
+
const t = this._dateAdapter.isValid(this.min) && this._dateAdapter.getYear(this.min) > e, a = this._dateAdapter.isValid(this.max) && this._dateAdapter.getYear(this.max) < e;
|
|
243
243
|
return !(t || a);
|
|
244
244
|
}
|
|
245
245
|
// Implementation adapted from https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts#L366
|
|
246
|
-
_isMonthFilteredOut(e) {
|
|
246
|
+
_isMonthFilteredOut(e, t) {
|
|
247
247
|
if (!this.dateFilter)
|
|
248
248
|
return !0;
|
|
249
|
-
const
|
|
250
|
-
for (let
|
|
251
|
-
if (this.dateFilter(
|
|
249
|
+
const a = this._dateAdapter.createDate(t, e, 1);
|
|
250
|
+
for (let s = a; this._dateAdapter.getMonth(s) == e; s = this._dateAdapter.addCalendarDays(s, 1))
|
|
251
|
+
if (this.dateFilter(s))
|
|
252
252
|
return !0;
|
|
253
253
|
return !1;
|
|
254
254
|
}
|
|
@@ -270,12 +270,12 @@ let at = (() => {
|
|
|
270
270
|
this.view === "month" ? this._chosenYear = this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected) ?? this.selected ?? this.now) : this._chosenYear = void 0;
|
|
271
271
|
}
|
|
272
272
|
_assignActiveDate(e) {
|
|
273
|
-
if (this.
|
|
274
|
-
this._activeDate = this.
|
|
273
|
+
if (this.min && this._dateAdapter.compareDate(this.min, e) > 0) {
|
|
274
|
+
this._activeDate = this.min;
|
|
275
275
|
return;
|
|
276
276
|
}
|
|
277
|
-
if (this.
|
|
278
|
-
this._activeDate = this.
|
|
277
|
+
if (this.max && this._dateAdapter.compareDate(this.max, e) < 0) {
|
|
278
|
+
this._activeDate = this.max;
|
|
279
279
|
return;
|
|
280
280
|
}
|
|
281
281
|
this._activeDate = e;
|
|
@@ -291,10 +291,10 @@ let at = (() => {
|
|
|
291
291
|
this._init(this._dateAdapter.addCalendarYears(this._activeDate, e));
|
|
292
292
|
}
|
|
293
293
|
_prevDisabled(e) {
|
|
294
|
-
return this.
|
|
294
|
+
return this.min ? this._dateAdapter.compareDate(e, this.min) < 0 : !1;
|
|
295
295
|
}
|
|
296
296
|
_nextDisabled(e) {
|
|
297
|
-
return this.
|
|
297
|
+
return this.max ? this._dateAdapter.compareDate(e, this.max) > 0 : !1;
|
|
298
298
|
}
|
|
299
299
|
/** Checks if the "previous month" button should be disabled. */
|
|
300
300
|
_previousMonthDisabled() {
|
|
@@ -311,7 +311,7 @@ let at = (() => {
|
|
|
311
311
|
return this._prevDisabled(e);
|
|
312
312
|
}
|
|
313
313
|
_nextYearDisabled() {
|
|
314
|
-
const e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) + 1, 1, 1);
|
|
314
|
+
const e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) + (this._wide ? 2 : 1), 1, 1);
|
|
315
315
|
return this._nextDisabled(e);
|
|
316
316
|
}
|
|
317
317
|
_previousYearRangeDisabled() {
|
|
@@ -319,8 +319,8 @@ let at = (() => {
|
|
|
319
319
|
return this._prevDisabled(e);
|
|
320
320
|
}
|
|
321
321
|
_nextYearRangeDisabled() {
|
|
322
|
-
const e =
|
|
323
|
-
return this._nextDisabled(
|
|
322
|
+
const e = this._wide ? this._nextMonthYears : this._years, t = e[e.length - 1], a = t[t.length - 1], s = this._dateAdapter.createDate(a + 1, 1, 1);
|
|
323
|
+
return this._nextDisabled(s);
|
|
324
324
|
}
|
|
325
325
|
_handleTableBlur(e) {
|
|
326
326
|
(e == null ? void 0 : e.localName) !== "button" && this._setTabIndex();
|
|
@@ -336,9 +336,9 @@ let at = (() => {
|
|
|
336
336
|
return (!t || t != null && t.disabled) && (t = this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), t || null;
|
|
337
337
|
}
|
|
338
338
|
_handleKeyboardEvent(e, t) {
|
|
339
|
-
|
|
340
|
-
const a = this._cells,
|
|
341
|
-
|
|
339
|
+
we(e) && e.preventDefault();
|
|
340
|
+
const a = this._cells, s = a.findIndex((d) => d === e.target), i = this._navigateByKeyboard(e, s, a, t), r = this.shadowRoot.activeElement;
|
|
341
|
+
i !== r && (i.tabIndex = 0, i == null || i.focus(), r.tabIndex = -1);
|
|
342
342
|
}
|
|
343
343
|
/**
|
|
344
344
|
* Gets the index of the element to move to, based on a list of elements (which can be potentially disabled),
|
|
@@ -346,8 +346,8 @@ let at = (() => {
|
|
|
346
346
|
* In the day view, the `day?: Day` parameter is mandatory for calculation,
|
|
347
347
|
* while in month and year view it's not due to the fixed amount of rendered cells.
|
|
348
348
|
*/
|
|
349
|
-
_navigateByKeyboard(e, t, a,
|
|
350
|
-
const { elementIndexForWideMode:
|
|
349
|
+
_navigateByKeyboard(e, t, a, s) {
|
|
350
|
+
const { elementIndexForWideMode: i, offsetForWideMode: r, lastElementIndexForWideMode: d, verticalOffset: _ } = this._calculateParametersForKeyboardNavigation(a, t, s);
|
|
351
351
|
switch (e.key) {
|
|
352
352
|
case "ArrowUp":
|
|
353
353
|
return this._findNext(a, t, -_);
|
|
@@ -360,7 +360,7 @@ let at = (() => {
|
|
|
360
360
|
case "Home":
|
|
361
361
|
return this._findFirst(a, r);
|
|
362
362
|
case "PageUp":
|
|
363
|
-
return this._findFirstOnColumn(a,
|
|
363
|
+
return this._findFirstOnColumn(a, i, r, _);
|
|
364
364
|
case "PageDown":
|
|
365
365
|
return this._findLastOnColumn(a, t, d, _);
|
|
366
366
|
case "End":
|
|
@@ -380,12 +380,12 @@ let at = (() => {
|
|
|
380
380
|
_calculateParametersForKeyboardNavigation(e, t, a) {
|
|
381
381
|
switch (this._calendarView) {
|
|
382
382
|
case "day": {
|
|
383
|
-
const
|
|
383
|
+
const s = +a.dayValue - 1;
|
|
384
384
|
return {
|
|
385
385
|
verticalOffset: O,
|
|
386
|
-
elementIndexForWideMode:
|
|
387
|
-
offsetForWideMode: t -
|
|
388
|
-
lastElementIndexForWideMode: t ===
|
|
386
|
+
elementIndexForWideMode: s,
|
|
387
|
+
offsetForWideMode: t - s,
|
|
388
|
+
lastElementIndexForWideMode: t === s ? this._dateAdapter.getNumDaysInMonth(this._dateAdapter.addCalendarMonths(this._dateAdapter.deserialize(a.value), -1)) : e.length
|
|
389
389
|
};
|
|
390
390
|
}
|
|
391
391
|
case "month":
|
|
@@ -396,12 +396,12 @@ let at = (() => {
|
|
|
396
396
|
lastElementIndexForWideMode: 12
|
|
397
397
|
};
|
|
398
398
|
case "year": {
|
|
399
|
-
const
|
|
399
|
+
const s = Math.trunc(t / b) * b, i = s === 0 ? t : t - b;
|
|
400
400
|
return {
|
|
401
|
-
verticalOffset:
|
|
402
|
-
elementIndexForWideMode:
|
|
403
|
-
offsetForWideMode: t -
|
|
404
|
-
lastElementIndexForWideMode:
|
|
401
|
+
verticalOffset: C,
|
|
402
|
+
elementIndexForWideMode: i,
|
|
403
|
+
offsetForWideMode: t - i,
|
|
404
|
+
lastElementIndexForWideMode: s === 0 ? b : b * 2
|
|
405
405
|
};
|
|
406
406
|
}
|
|
407
407
|
}
|
|
@@ -411,11 +411,11 @@ let at = (() => {
|
|
|
411
411
|
* If the found element is disabled, it continues adding `delta` until it finds an enabled one in the array bounds.
|
|
412
412
|
*/
|
|
413
413
|
_findNext(e, t, a) {
|
|
414
|
-
var
|
|
415
|
-
let
|
|
416
|
-
for (;
|
|
417
|
-
|
|
418
|
-
return e[
|
|
414
|
+
var i;
|
|
415
|
+
let s = t + a;
|
|
416
|
+
for (; s < e.length && ((i = e[s]) != null && i.disabled); )
|
|
417
|
+
s += a;
|
|
418
|
+
return e[s] ?? e[t];
|
|
419
419
|
}
|
|
420
420
|
/** Find the first enabled element in the provided array. */
|
|
421
421
|
_findFirst(e, t) {
|
|
@@ -426,14 +426,14 @@ let at = (() => {
|
|
|
426
426
|
return e[t].disabled ? this._findNext(e, t, -1) : e[t];
|
|
427
427
|
}
|
|
428
428
|
/** Find the first enabled element in the same column of the provided array. */
|
|
429
|
-
_findFirstOnColumn(e, t, a,
|
|
430
|
-
const
|
|
431
|
-
return e[
|
|
429
|
+
_findFirstOnColumn(e, t, a, s) {
|
|
430
|
+
const i = t % s + a;
|
|
431
|
+
return e[i].disabled ? this._findNext(e, i, s) : e[i];
|
|
432
432
|
}
|
|
433
433
|
/** Find the last enabled element in the same column of the provided array. */
|
|
434
|
-
_findLastOnColumn(e, t, a,
|
|
435
|
-
const
|
|
436
|
-
return e[
|
|
434
|
+
_findLastOnColumn(e, t, a, s) {
|
|
435
|
+
const i = t + Math.trunc((a - t - 1) / s) * s;
|
|
436
|
+
return e[i].disabled ? this._findNext(e, i, -s) : e[i];
|
|
437
437
|
}
|
|
438
438
|
_resetCalendarView(e = !1) {
|
|
439
439
|
this._resetFocus = !0, this._activeDate = this.selected ?? this.now, this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view, e && this._startTableTransition();
|
|
@@ -443,7 +443,7 @@ let at = (() => {
|
|
|
443
443
|
const e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
|
|
444
444
|
return n`
|
|
445
445
|
<div class="sbb-calendar__controls">
|
|
446
|
-
${this._getArrow("left", () => this._goToDifferentMonth(-1),
|
|
446
|
+
${this._getArrow("left", () => this._goToDifferentMonth(-1), ke[this._language.current], this._previousMonthDisabled())}
|
|
447
447
|
<div class="sbb-calendar__controls-month">
|
|
448
448
|
${this._createLabelForDayView(this._activeDate)}
|
|
449
449
|
${this._wide ? this._createLabelForDayView(e) : g}
|
|
@@ -451,7 +451,7 @@ let at = (() => {
|
|
|
451
451
|
${this._createAriaLabelForDayView(this._activeDate, e)}
|
|
452
452
|
</sbb-screen-reader-only>
|
|
453
453
|
</div>
|
|
454
|
-
${this._getArrow("right", () => this._goToDifferentMonth(1),
|
|
454
|
+
${this._getArrow("right", () => this._goToDifferentMonth(1), Ve[this._language.current], this._nextMonthDisabled())}
|
|
455
455
|
</div>
|
|
456
456
|
<div class="sbb-calendar__table-container sbb-calendar__table-day-view">
|
|
457
457
|
${this._createDayTable(this._weeks)}
|
|
@@ -465,9 +465,8 @@ let at = (() => {
|
|
|
465
465
|
return n`
|
|
466
466
|
<button
|
|
467
467
|
type="button"
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
aria-label="${Fe[this._language.current]} ${t}"
|
|
468
|
+
class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
|
|
469
|
+
aria-label="${ze[this._language.current]} ${t}"
|
|
471
470
|
@click=${() => {
|
|
472
471
|
this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
|
|
473
472
|
}}
|
|
@@ -515,11 +514,11 @@ let at = (() => {
|
|
|
515
514
|
/** Creates the table body with the day cells. For the first row, it also considers the possible day's offset. */
|
|
516
515
|
_createDayTableBody(e) {
|
|
517
516
|
const t = this._dateAdapter.toIso8601(this.now);
|
|
518
|
-
return e.map((a,
|
|
519
|
-
const
|
|
520
|
-
return
|
|
517
|
+
return e.map((a, s) => {
|
|
518
|
+
const i = O - a.length;
|
|
519
|
+
return s === 0 && i ? n`
|
|
521
520
|
<tr>
|
|
522
|
-
${[...Array(
|
|
521
|
+
${[...Array(i).keys()].map(() => n`<td
|
|
523
522
|
class="sbb-calendar__table-data"
|
|
524
523
|
data-day=${`0 ${a[0].monthValue} ${a[0].yearValue}`}
|
|
525
524
|
></td>`)}
|
|
@@ -533,7 +532,7 @@ let at = (() => {
|
|
|
533
532
|
/** Creates the cells for the daily view. */
|
|
534
533
|
_createDayCells(e, t) {
|
|
535
534
|
return e.map((a) => {
|
|
536
|
-
const
|
|
535
|
+
const s = !this._isDayInRange(a.value), i = !this._dateFilter(this._dateAdapter.deserialize(a.value)), r = !!this._selected && a.value === this._selected, d = `${a.dayValue} ${a.monthValue} ${a.yearValue}`, _ = a.value === t;
|
|
537
536
|
return n`
|
|
538
537
|
<td
|
|
539
538
|
class=${R({
|
|
@@ -547,17 +546,17 @@ let at = (() => {
|
|
|
547
546
|
"sbb-calendar__day": !0,
|
|
548
547
|
"sbb-calendar__cell-current": _,
|
|
549
548
|
"sbb-calendar__selected": r,
|
|
550
|
-
"sbb-calendar__crossed-out": !
|
|
549
|
+
"sbb-calendar__crossed-out": !s && i
|
|
551
550
|
})}
|
|
552
551
|
@click=${() => this._selectDate(a.value)}
|
|
553
|
-
?disabled=${
|
|
552
|
+
?disabled=${s || i}
|
|
554
553
|
aria-label=${this._dateAdapter.getAccessibilityFormatDate(a.value)}
|
|
555
554
|
aria-pressed=${r}
|
|
556
|
-
aria-disabled=${
|
|
555
|
+
aria-disabled=${s || i}
|
|
557
556
|
aria-current=${_ ? "date" : g}
|
|
558
557
|
data-day=${d || g}
|
|
559
558
|
tabindex="-1"
|
|
560
|
-
@keydown=${(
|
|
559
|
+
@keydown=${(y) => this._handleKeyboardEvent(y, a)}
|
|
561
560
|
sbb-popover-close
|
|
562
561
|
>
|
|
563
562
|
${a.dayValue}
|
|
@@ -570,13 +569,13 @@ let at = (() => {
|
|
|
570
569
|
_renderMonthView() {
|
|
571
570
|
return n`
|
|
572
571
|
<div class="sbb-calendar__controls">
|
|
573
|
-
${this._getArrow("left", () => this._goToDifferentYear(-1),
|
|
572
|
+
${this._getArrow("left", () => this._goToDifferentYear(-1), Fe[this._language.current], this._previousYearDisabled())}
|
|
574
573
|
<div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
|
|
575
|
-
${this._getArrow("right", () => this._goToDifferentYear(1),
|
|
574
|
+
${this._getArrow("right", () => this._goToDifferentYear(1), Re[this._language.current], this._nextYearDisabled())}
|
|
576
575
|
</div>
|
|
577
576
|
<div class="sbb-calendar__table-container sbb-calendar__table-month-view">
|
|
578
577
|
${this._createMonthTable(this._months, this._chosenYear)}
|
|
579
|
-
${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1
|
|
578
|
+
${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : g}
|
|
580
579
|
</div>
|
|
581
580
|
`;
|
|
582
581
|
}
|
|
@@ -586,7 +585,7 @@ let at = (() => {
|
|
|
586
585
|
type="button"
|
|
587
586
|
id="sbb-calendar__month-selection"
|
|
588
587
|
class="sbb-calendar__controls-change-date"
|
|
589
|
-
aria-label=${`${
|
|
588
|
+
aria-label=${`${me[this._language.current]} ${this._chosenYear}`}
|
|
590
589
|
@click=${() => this._resetCalendarView(!0)}
|
|
591
590
|
>
|
|
592
591
|
${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : g}
|
|
@@ -595,11 +594,11 @@ let at = (() => {
|
|
|
595
594
|
<sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
|
|
596
595
|
}
|
|
597
596
|
/** Creates the table for the month selection view. */
|
|
598
|
-
_createMonthTable(e, t
|
|
597
|
+
_createMonthTable(e, t) {
|
|
599
598
|
return n`
|
|
600
599
|
<table
|
|
601
600
|
class="sbb-calendar__table"
|
|
602
|
-
@animationend=${(
|
|
601
|
+
@animationend=${(a) => this._tableAnimationEnd(a)}
|
|
603
602
|
>
|
|
604
603
|
${this._wide ? n`<thead class="sbb-calendar__table-header" aria-hidden="true">
|
|
605
604
|
<tr class="sbb-calendar__table-header-row">
|
|
@@ -607,10 +606,10 @@ let at = (() => {
|
|
|
607
606
|
</tr>
|
|
608
607
|
</thead>` : g}
|
|
609
608
|
<tbody class="sbb-calendar__table-body">
|
|
610
|
-
${e.map((
|
|
609
|
+
${e.map((a) => n`
|
|
611
610
|
<tr>
|
|
612
|
-
${
|
|
613
|
-
const
|
|
611
|
+
${a.map((s) => {
|
|
612
|
+
const i = !this._isMonthInRange(s.monthValue, t), r = !this._isMonthFilteredOut(s.monthValue, t), d = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, y = !!this._selected && t === _ && s.monthValue === d, T = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
|
|
614
613
|
return n` <td
|
|
615
614
|
class=${R({
|
|
616
615
|
"sbb-calendar__table-data": !0,
|
|
@@ -621,18 +620,18 @@ let at = (() => {
|
|
|
621
620
|
class=${R({
|
|
622
621
|
"sbb-calendar__cell": !0,
|
|
623
622
|
"sbb-calendar__pill": !0,
|
|
624
|
-
"sbb-calendar__cell-current":
|
|
625
|
-
"sbb-calendar__crossed-out": !
|
|
626
|
-
"sbb-calendar__selected":
|
|
623
|
+
"sbb-calendar__cell-current": T,
|
|
624
|
+
"sbb-calendar__crossed-out": !i && r,
|
|
625
|
+
"sbb-calendar__selected": y
|
|
627
626
|
})}
|
|
628
|
-
@click=${() => this._onMonthSelection(s.monthValue, t
|
|
629
|
-
?disabled=${
|
|
630
|
-
aria-label=${`${s.longValue} ${
|
|
631
|
-
aria-pressed=${
|
|
632
|
-
aria-disabled=${String(
|
|
627
|
+
@click=${() => this._onMonthSelection(s.monthValue, t)}
|
|
628
|
+
?disabled=${i || r}
|
|
629
|
+
aria-label=${`${s.longValue} ${t}`}
|
|
630
|
+
aria-pressed=${y}
|
|
631
|
+
aria-disabled=${String(i || r)}
|
|
633
632
|
tabindex="-1"
|
|
634
633
|
data-month=${s.monthValue || g}
|
|
635
|
-
@keydown=${(
|
|
634
|
+
@keydown=${(N) => this._handleKeyboardEvent(N)}
|
|
636
635
|
>
|
|
637
636
|
${s.value}
|
|
638
637
|
</button>
|
|
@@ -645,16 +644,16 @@ let at = (() => {
|
|
|
645
644
|
`;
|
|
646
645
|
}
|
|
647
646
|
/** Select the month and change the view to day selection. */
|
|
648
|
-
_onMonthSelection(e, t
|
|
649
|
-
this._chosenMonth =
|
|
647
|
+
_onMonthSelection(e, t) {
|
|
648
|
+
this._chosenMonth = e, this._nextCalendarView = "day", this._init(this._dateAdapter.createDate(t, this._chosenMonth, this._dateAdapter.getDate(this._activeDate))), this._startTableTransition();
|
|
650
649
|
}
|
|
651
650
|
/** Render the view for the year selection. */
|
|
652
651
|
_renderYearView() {
|
|
653
652
|
return n`
|
|
654
653
|
<div class="sbb-calendar__controls">
|
|
655
|
-
${this._getArrow("left", () => this._goToDifferentYearRange(-b),
|
|
654
|
+
${this._getArrow("left", () => this._goToDifferentYearRange(-b), Ie(b)[this._language.current], this._previousYearRangeDisabled())}
|
|
656
655
|
<div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
|
|
657
|
-
${this._getArrow("right", () => this._goToDifferentYearRange(b),
|
|
656
|
+
${this._getArrow("right", () => this._goToDifferentYearRange(b), Ce(b)[this._language.current], this._nextYearRangeDisabled())}
|
|
658
657
|
</div>
|
|
659
658
|
<div class="sbb-calendar__table-container sbb-calendar__table-year-view">
|
|
660
659
|
${this._createYearTable(this._years)}
|
|
@@ -663,31 +662,31 @@ let at = (() => {
|
|
|
663
662
|
`;
|
|
664
663
|
}
|
|
665
664
|
/** Creates the button arrow for all the views. */
|
|
666
|
-
_getArrow(e, t, a,
|
|
665
|
+
_getArrow(e, t, a, s) {
|
|
667
666
|
return n`<sbb-secondary-button
|
|
668
667
|
size="m"
|
|
669
668
|
icon-name="chevron-small-${e}-small"
|
|
670
669
|
aria-label=${a}
|
|
671
670
|
@click=${t}
|
|
672
|
-
?disabled=${
|
|
671
|
+
?disabled=${s}
|
|
673
672
|
id="sbb-calendar__controls-${e === "left" ? "previous" : "next"}"
|
|
674
673
|
></sbb-secondary-button>`;
|
|
675
674
|
}
|
|
676
675
|
/** Creates the label with the year range for the yearly view. */
|
|
677
676
|
_createLabelForYearView() {
|
|
678
|
-
const e = this._years.flat()[0], t = (
|
|
677
|
+
const e = this._years.flat()[0], t = (this._wide ? this._nextMonthYears : this._years).flat(), a = t[t.length - 1], s = `${e} - ${a}`;
|
|
679
678
|
return n`
|
|
680
679
|
<button
|
|
681
680
|
type="button"
|
|
682
681
|
id="sbb-calendar__year-selection"
|
|
683
682
|
class="sbb-calendar__controls-change-date"
|
|
684
|
-
aria-label="${
|
|
683
|
+
aria-label="${me[this._language.current]} ${s}"
|
|
685
684
|
@click=${() => this._resetCalendarView(!0)}
|
|
686
685
|
>
|
|
687
|
-
${
|
|
686
|
+
${s}
|
|
688
687
|
<sbb-icon name="chevron-small-up-small"></sbb-icon>
|
|
689
688
|
</button>
|
|
690
|
-
<sbb-screen-reader-only role="status"> ${
|
|
689
|
+
<sbb-screen-reader-only role="status"> ${s} </sbb-screen-reader-only>
|
|
691
690
|
`;
|
|
692
691
|
}
|
|
693
692
|
/** Creates the table for the year selection view. */
|
|
@@ -695,31 +694,31 @@ let at = (() => {
|
|
|
695
694
|
const a = this.now;
|
|
696
695
|
return n` <table
|
|
697
696
|
class="sbb-calendar__table"
|
|
698
|
-
@animationend=${(
|
|
697
|
+
@animationend=${(s) => this._tableAnimationEnd(s)}
|
|
699
698
|
>
|
|
700
699
|
<tbody class="sbb-calendar__table-body">
|
|
701
|
-
${e.map((
|
|
702
|
-
${
|
|
703
|
-
const r = !this._isYearInRange(
|
|
700
|
+
${e.map((s) => n` <tr>
|
|
701
|
+
${s.map((i) => {
|
|
702
|
+
const r = !this._isYearInRange(i), d = !this._isYearFilteredOut(i), _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, y = !!this._selected && i === _, T = this._dateAdapter.getYear(a) === i;
|
|
704
703
|
return n` <td class="sbb-calendar__table-data sbb-calendar__table-year">
|
|
705
704
|
<button
|
|
706
705
|
class=${R({
|
|
707
706
|
"sbb-calendar__cell": !0,
|
|
708
707
|
"sbb-calendar__pill": !0,
|
|
709
|
-
"sbb-calendar__cell-current":
|
|
708
|
+
"sbb-calendar__cell-current": T,
|
|
710
709
|
"sbb-calendar__crossed-out": !r && d,
|
|
711
|
-
"sbb-calendar__selected":
|
|
710
|
+
"sbb-calendar__selected": y
|
|
712
711
|
})}
|
|
713
|
-
@click=${() => this._onYearSelection(
|
|
712
|
+
@click=${() => this._onYearSelection(i, t)}
|
|
714
713
|
?disabled=${r || d}
|
|
715
|
-
aria-label=${
|
|
716
|
-
aria-pressed=${
|
|
714
|
+
aria-label=${i}
|
|
715
|
+
aria-pressed=${y}
|
|
717
716
|
aria-disabled=${String(r || d)}
|
|
718
717
|
tabindex="-1"
|
|
719
|
-
data-year=${
|
|
718
|
+
data-year=${i || g}
|
|
720
719
|
@keydown=${(N) => this._handleKeyboardEvent(N)}
|
|
721
720
|
>
|
|
722
|
-
${
|
|
721
|
+
${i}
|
|
723
722
|
</button>
|
|
724
723
|
</td>`;
|
|
725
724
|
})}
|
|
@@ -732,7 +731,7 @@ let at = (() => {
|
|
|
732
731
|
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();
|
|
733
732
|
}
|
|
734
733
|
_getView() {
|
|
735
|
-
if (
|
|
734
|
+
if (ue || this.hydrationRequired)
|
|
736
735
|
return n`${g}`;
|
|
737
736
|
switch (this._calendarView) {
|
|
738
737
|
case "year":
|
|
@@ -755,38 +754,38 @@ let at = (() => {
|
|
|
755
754
|
render() {
|
|
756
755
|
return n`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
|
|
757
756
|
}
|
|
758
|
-
},
|
|
759
|
-
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
760
|
-
|
|
757
|
+
}, D = new WeakMap(), $ = new WeakMap(), Y = new WeakMap(), M = new WeakMap(), k = new WeakMap(), V = new WeakMap(), z = new WeakMap(), p = l, (() => {
|
|
758
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
|
|
759
|
+
W = [$e(), A({ type: Boolean })], B = [A()], H = [A()], U = [A()], j = [A()], G = [A()], J = [A({ attribute: "date-filter" })], Z = [F()], ae = [F()], re = [F()], ne = [F()], oe = [F()], f(l, null, W, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, a) => {
|
|
761
760
|
t.wide = a;
|
|
762
|
-
} }, metadata: e },
|
|
761
|
+
} }, metadata: e }, L, P), f(l, null, B, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, a) => {
|
|
763
762
|
t.view = a;
|
|
764
|
-
} }, metadata: e },
|
|
763
|
+
} }, metadata: e }, q, K), f(l, null, H, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, set: (t, a) => {
|
|
765
764
|
t.min = a;
|
|
766
|
-
} }, metadata: e }, null,
|
|
765
|
+
} }, metadata: e }, null, x), f(l, null, U, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, set: (t, a) => {
|
|
767
766
|
t.max = a;
|
|
768
|
-
} }, metadata: e }, null,
|
|
767
|
+
} }, metadata: e }, null, x), f(l, null, j, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (t) => "now" in t, set: (t, a) => {
|
|
769
768
|
t.now = a;
|
|
770
|
-
} }, metadata: e }, null,
|
|
769
|
+
} }, metadata: e }, null, x), f(l, null, G, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
|
|
771
770
|
t.selected = a;
|
|
772
|
-
} }, metadata: e }, null,
|
|
771
|
+
} }, metadata: e }, null, x), f(l, null, J, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, get: (t) => t.dateFilter, set: (t, a) => {
|
|
773
772
|
t.dateFilter = a;
|
|
774
|
-
} }, metadata: e },
|
|
773
|
+
} }, metadata: e }, Q, X), f(l, null, Z, { kind: "accessor", name: "_activeDate", static: !1, private: !1, access: { has: (t) => "_activeDate" in t, get: (t) => t._activeDate, set: (t, a) => {
|
|
775
774
|
t._activeDate = a;
|
|
776
|
-
} }, metadata: e },
|
|
775
|
+
} }, metadata: e }, ee, te), f(l, null, ae, { kind: "accessor", name: "_selected", static: !1, private: !1, access: { has: (t) => "_selected" in t, get: (t) => t._selected, set: (t, a) => {
|
|
777
776
|
t._selected = a;
|
|
778
|
-
} }, metadata: e },
|
|
777
|
+
} }, metadata: e }, se, ie), f(l, null, re, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
|
|
779
778
|
t._wide = a;
|
|
780
|
-
} }, metadata: e }, null,
|
|
779
|
+
} }, metadata: e }, null, x), f(l, null, ne, { kind: "accessor", name: "_calendarView", static: !1, private: !1, access: { has: (t) => "_calendarView" in t, get: (t) => t._calendarView, set: (t, a) => {
|
|
781
780
|
t._calendarView = a;
|
|
782
|
-
} }, metadata: e },
|
|
781
|
+
} }, metadata: e }, le, de), f(l, null, oe, { kind: "accessor", name: "_initialized", static: !1, private: !1, access: { has: (t) => "_initialized" in t, get: (t) => t._initialized, set: (t, a) => {
|
|
783
782
|
t._initialized = a;
|
|
784
|
-
} }, metadata: e },
|
|
785
|
-
})(), l.styles =
|
|
783
|
+
} }, metadata: e }, ce, be), f(null, h = { value: p }, o, { kind: "class", name: p.name, metadata: e }, null, m), S = p = h.value, e && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
784
|
+
})(), l.styles = Te, l.events = {
|
|
786
785
|
dateSelected: "dateSelected"
|
|
787
786
|
}, c(p, m), l);
|
|
788
|
-
return
|
|
787
|
+
return S = p;
|
|
789
788
|
})();
|
|
790
789
|
export {
|
|
791
|
-
|
|
790
|
+
tt as SbbCalendarElement
|
|
792
791
|
};
|