@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1780400156 → 5.0.0-next.3-dev.1780406485
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.global.scss +25 -26
- package/calendar/calendar/calendar.component.js +1 -1
- package/calendar/calendar-day/calendar-day.component.js +1 -1
- package/calendar/calendar-month/calendar-month.component.js +1 -1
- package/calendar/calendar-year/calendar-year.component.js +1 -1
- package/calendar/common/calendar-cell-base-element.js +1 -1
- package/calendar-cell-base-element-DHCKK3bU.js +23 -0
- package/{calendar-day.component-Caf2w9lS.js → calendar-day.component-DrMWf6-w.js} +2 -2
- package/calendar.component-BM4L9oyb.js +987 -0
- package/calendar.js +3 -3
- package/calendar.pure.js +3 -3
- package/core/i18n/i18n.js +4 -4
- package/core/styles/_theme.scss +1 -0
- package/custom-elements.json +401 -233
- package/datepicker/datepicker/datepicker.component.js +45 -27
- package/development/calendar/calendar/calendar.component.d.ts +27 -42
- package/development/calendar/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar/calendar.component.js +1 -1
- package/development/calendar/calendar-day/calendar-day.component.js +1 -1
- package/development/calendar/calendar-month/calendar-month.component.js +2 -2
- package/development/calendar/calendar-year/calendar-year.component.js +2 -2
- package/development/calendar/common/calendar-cell-base-element.js +1 -1
- package/development/calendar-cell-base-element-D9XadTz1.js +38 -0
- package/development/calendar-day.component-Zky9Z-Fq.js +139 -0
- package/development/calendar.component-C_Yc2PNV.js +1367 -0
- package/development/calendar.js +3 -3
- package/development/calendar.pure.js +3 -3
- package/development/core/decorators/id-reference.d.ts.map +1 -1
- package/development/core/decorators/id-reference.js +1 -1
- package/development/core/i18n/i18n.js +5 -5
- package/development/datepicker/datepicker/datepicker.component.d.ts +2 -0
- package/development/datepicker/datepicker/datepicker.component.d.ts.map +1 -1
- package/development/datepicker/datepicker/datepicker.component.js +37 -11
- package/lean-off-brand-theme.css +14 -22
- package/lean-safety-theme.css +14 -22
- package/lean-theme.css +14 -22
- package/off-brand-theme.css +14 -22
- package/package.json +2 -2
- package/safety-theme.css +14 -22
- package/standard-theme.css +14 -22
- package/calendar-cell-base-element-Dq7Ap5n-.js +0 -23
- package/calendar.component-DKKptbyy.js +0 -1082
- package/development/calendar-cell-base-element-D_CTwDn9.js +0 -38
- package/development/calendar-day.component-Bux4ezpg.js +0 -139
- package/development/calendar.component-NvMN01yi.js +0 -1478
|
@@ -1,1082 +0,0 @@
|
|
|
1
|
-
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
-
import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
|
|
3
|
-
import { property as o, state as s } from "lit/decorators.js";
|
|
4
|
-
import { MONDAY as c, SbbElement as ee, SbbLanguageController as te, SbbMediaMatcherController as ne, SbbMediaQueryBreakpointLargeAndAbove as l, THURSDAY as re, TUESDAY as ie, WEDNESDAY as ae, buttonResetStyles as oe, defaultDateAdapter as se, forceType as u, handleDistinctChange as ce, i18nCalendarDateSelection as d, i18nCalendarWeekNumber as f, i18nNextMonth as le, i18nNextYear as ue, i18nNextYearRange as de, i18nPreviousMonth as fe, i18nPreviousYear as pe, i18nPreviousYearRange as me, i18nYearMonthSelection as he, isArrowKeyOrPageKeysPressed as ge, plainDate as p, readConfig as _e, screenReaderOnlyStyles as ve } from "./core.js";
|
|
5
|
-
import { SbbSecondaryButtonElement as ye } from "./button.pure.js";
|
|
6
|
-
import { SbbIconElement as be } from "./icon.pure.js";
|
|
7
|
-
import { SbbCalendarDayElement as xe } from "./calendar/calendar-day/calendar-day.component.js";
|
|
8
|
-
import { SbbCalendarMonthElement as Se } from "./calendar/calendar-month/calendar-month.component.js";
|
|
9
|
-
import { SbbCalendarWeekdayElement as Ce } from "./calendar/calendar-weekday/calendar-weekday.component.js";
|
|
10
|
-
import { SbbCalendarWeeknumberElement as we } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
|
|
11
|
-
import { SbbCalendarYearElement as Te } from "./calendar/calendar-year/calendar-year.component.js";
|
|
12
|
-
//#region src/elements/calendar/calendar/calendar.scss?inline
|
|
13
|
-
var Ee = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-height-text);--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-cell-border-radius: calc( var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width) );--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) )}@media(min-width:37.5rem){:host{--sbb-calendar-control-view-change-height: 3rem}}:host(:is(:state(enhanced),[state--enhanced])){--sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x)}.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-calendar-control-gap);margin-block-end:var(--sbb-calendar-control-margin-block-end)}.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{display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-letter-spacing-text);text-transform:capitalize;cursor:var(--sbb-cursor-pointer);padding-inline:var(--sbb-calendar-control-view-change-padding-inline);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-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );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-cell-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-overflow-break{contain:layout}.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(:is(:state(wide),[state--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]:is(:state(wide),[state--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]:is(:state(wide),[state--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(:is(:state(wide),[state--wide]))) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell,.sbb-calendar__table-header-cell-vertical{width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0;font-size:var(--sbb-text-font-size-xs);font-weight:400;letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:not([multiple])) .sbb-calendar__table-header-cell,:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-header-cell-vertical{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__day-cell{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day{--sbb-calendar-cell-justify-content: center;--sbb-calendar-day-height: 2.75rem;--sbb-calendar-day-extra-display: none;--sbb-calendar-day-value-height: unset;--sbb-calendar-day-crossed-out-top: 50%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -50%) rotate(-45deg)}@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))}}", m = 7, h = 4, g = 4, De = 12, _ = 24, v = class extends Event {
|
|
14
|
-
get range() {
|
|
15
|
-
return this._range;
|
|
16
|
-
}
|
|
17
|
-
constructor(e) {
|
|
18
|
-
super("monthchange", {
|
|
19
|
-
bubbles: !0,
|
|
20
|
-
composed: !0
|
|
21
|
-
}), this._range = Object.freeze(e || []);
|
|
22
|
-
}
|
|
23
|
-
}, y = class extends Event {
|
|
24
|
-
get dateSelected() {
|
|
25
|
-
return this._dateSelected;
|
|
26
|
-
}
|
|
27
|
-
constructor(e) {
|
|
28
|
-
super("dateselected", {
|
|
29
|
-
bubbles: !0,
|
|
30
|
-
composed: !0
|
|
31
|
-
}), this._dateSelected = Object.freeze(e);
|
|
32
|
-
}
|
|
33
|
-
}, b = (() => {
|
|
34
|
-
let b = ee, x = [], S, C = [], w = [], Oe, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L, R = [], z = [], B, V = [], H = [], U, W = [], G = [], K, q = [], J = [], Y, X = [], Z = [], Q, $, ke = [], Ae = [], je, Me = [], Ne = [];
|
|
35
|
-
return class extends b {
|
|
36
|
-
static {
|
|
37
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
|
|
38
|
-
S = [u(), o({ type: Boolean })], Oe = [o()], D = [p(), o()], A = [p(), o()], N = [
|
|
39
|
-
u(),
|
|
40
|
-
ce((e, t) => e._onMultipleChanged(t)),
|
|
41
|
-
o({ type: Boolean })
|
|
42
|
-
], I = [o()], L = [s()], B = [o({ attribute: "date-filter" })], U = [o({ reflect: !0 })], K = [u(), o({
|
|
43
|
-
attribute: "week-numbers",
|
|
44
|
-
type: Boolean
|
|
45
|
-
})], Y = [s()], Q = [s()], $ = [s()], je = [s()], e(this, null, S, {
|
|
46
|
-
kind: "accessor",
|
|
47
|
-
name: "wide",
|
|
48
|
-
static: !1,
|
|
49
|
-
private: !1,
|
|
50
|
-
access: {
|
|
51
|
-
has: (e) => "wide" in e,
|
|
52
|
-
get: (e) => e.wide,
|
|
53
|
-
set: (e, t) => {
|
|
54
|
-
e.wide = t;
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
metadata: t
|
|
58
|
-
}, C, w), e(this, null, Oe, {
|
|
59
|
-
kind: "accessor",
|
|
60
|
-
name: "view",
|
|
61
|
-
static: !1,
|
|
62
|
-
private: !1,
|
|
63
|
-
access: {
|
|
64
|
-
has: (e) => "view" in e,
|
|
65
|
-
get: (e) => e.view,
|
|
66
|
-
set: (e, t) => {
|
|
67
|
-
e.view = t;
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
metadata: t
|
|
71
|
-
}, T, E), e(this, null, D, {
|
|
72
|
-
kind: "accessor",
|
|
73
|
-
name: "min",
|
|
74
|
-
static: !1,
|
|
75
|
-
private: !1,
|
|
76
|
-
access: {
|
|
77
|
-
has: (e) => "min" in e,
|
|
78
|
-
get: (e) => e.min,
|
|
79
|
-
set: (e, t) => {
|
|
80
|
-
e.min = t;
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
metadata: t
|
|
84
|
-
}, O, k), e(this, null, A, {
|
|
85
|
-
kind: "accessor",
|
|
86
|
-
name: "max",
|
|
87
|
-
static: !1,
|
|
88
|
-
private: !1,
|
|
89
|
-
access: {
|
|
90
|
-
has: (e) => "max" in e,
|
|
91
|
-
get: (e) => e.max,
|
|
92
|
-
set: (e, t) => {
|
|
93
|
-
e.max = t;
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
metadata: t
|
|
97
|
-
}, j, M), e(this, null, N, {
|
|
98
|
-
kind: "accessor",
|
|
99
|
-
name: "multiple",
|
|
100
|
-
static: !1,
|
|
101
|
-
private: !1,
|
|
102
|
-
access: {
|
|
103
|
-
has: (e) => "multiple" in e,
|
|
104
|
-
get: (e) => e.multiple,
|
|
105
|
-
set: (e, t) => {
|
|
106
|
-
e.multiple = t;
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
metadata: t
|
|
110
|
-
}, P, F), e(this, null, I, {
|
|
111
|
-
kind: "setter",
|
|
112
|
-
name: "selected",
|
|
113
|
-
static: !1,
|
|
114
|
-
private: !1,
|
|
115
|
-
access: {
|
|
116
|
-
has: (e) => "selected" in e,
|
|
117
|
-
set: (e, t) => {
|
|
118
|
-
e.selected = t;
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
metadata: t
|
|
122
|
-
}, null, x), e(this, null, L, {
|
|
123
|
-
kind: "accessor",
|
|
124
|
-
name: "_selected",
|
|
125
|
-
static: !1,
|
|
126
|
-
private: !1,
|
|
127
|
-
access: {
|
|
128
|
-
has: (e) => "_selected" in e,
|
|
129
|
-
get: (e) => e._selected,
|
|
130
|
-
set: (e, t) => {
|
|
131
|
-
e._selected = t;
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
|
-
metadata: t
|
|
135
|
-
}, R, z), e(this, null, B, {
|
|
136
|
-
kind: "accessor",
|
|
137
|
-
name: "dateFilter",
|
|
138
|
-
static: !1,
|
|
139
|
-
private: !1,
|
|
140
|
-
access: {
|
|
141
|
-
has: (e) => "dateFilter" in e,
|
|
142
|
-
get: (e) => e.dateFilter,
|
|
143
|
-
set: (e, t) => {
|
|
144
|
-
e.dateFilter = t;
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
metadata: t
|
|
148
|
-
}, V, H), e(this, null, U, {
|
|
149
|
-
kind: "accessor",
|
|
150
|
-
name: "orientation",
|
|
151
|
-
static: !1,
|
|
152
|
-
private: !1,
|
|
153
|
-
access: {
|
|
154
|
-
has: (e) => "orientation" in e,
|
|
155
|
-
get: (e) => e.orientation,
|
|
156
|
-
set: (e, t) => {
|
|
157
|
-
e.orientation = t;
|
|
158
|
-
}
|
|
159
|
-
},
|
|
160
|
-
metadata: t
|
|
161
|
-
}, W, G), e(this, null, K, {
|
|
162
|
-
kind: "accessor",
|
|
163
|
-
name: "weekNumbers",
|
|
164
|
-
static: !1,
|
|
165
|
-
private: !1,
|
|
166
|
-
access: {
|
|
167
|
-
has: (e) => "weekNumbers" in e,
|
|
168
|
-
get: (e) => e.weekNumbers,
|
|
169
|
-
set: (e, t) => {
|
|
170
|
-
e.weekNumbers = t;
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
metadata: t
|
|
174
|
-
}, q, J), e(this, null, Y, {
|
|
175
|
-
kind: "accessor",
|
|
176
|
-
name: "_activeDate",
|
|
177
|
-
static: !1,
|
|
178
|
-
private: !1,
|
|
179
|
-
access: {
|
|
180
|
-
has: (e) => "_activeDate" in e,
|
|
181
|
-
get: (e) => e._activeDate,
|
|
182
|
-
set: (e, t) => {
|
|
183
|
-
e._activeDate = t;
|
|
184
|
-
}
|
|
185
|
-
},
|
|
186
|
-
metadata: t
|
|
187
|
-
}, X, Z), e(this, null, Q, {
|
|
188
|
-
kind: "setter",
|
|
189
|
-
name: "_wide",
|
|
190
|
-
static: !1,
|
|
191
|
-
private: !1,
|
|
192
|
-
access: {
|
|
193
|
-
has: (e) => "_wide" in e,
|
|
194
|
-
set: (e, t) => {
|
|
195
|
-
e._wide = t;
|
|
196
|
-
}
|
|
197
|
-
},
|
|
198
|
-
metadata: t
|
|
199
|
-
}, null, x), e(this, null, $, {
|
|
200
|
-
kind: "accessor",
|
|
201
|
-
name: "_calendarView",
|
|
202
|
-
static: !1,
|
|
203
|
-
private: !1,
|
|
204
|
-
access: {
|
|
205
|
-
has: (e) => "_calendarView" in e,
|
|
206
|
-
get: (e) => e._calendarView,
|
|
207
|
-
set: (e, t) => {
|
|
208
|
-
e._calendarView = t;
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
|
-
metadata: t
|
|
212
|
-
}, ke, Ae), e(this, null, je, {
|
|
213
|
-
kind: "accessor",
|
|
214
|
-
name: "_initialized",
|
|
215
|
-
static: !1,
|
|
216
|
-
private: !1,
|
|
217
|
-
access: {
|
|
218
|
-
has: (e) => "_initialized" in e,
|
|
219
|
-
get: (e) => e._initialized,
|
|
220
|
-
set: (e, t) => {
|
|
221
|
-
e._initialized = t;
|
|
222
|
-
}
|
|
223
|
-
},
|
|
224
|
-
metadata: t
|
|
225
|
-
}, Me, Ne), t && Object.defineProperty(this, Symbol.metadata, {
|
|
226
|
-
enumerable: !0,
|
|
227
|
-
configurable: !0,
|
|
228
|
-
writable: !0,
|
|
229
|
-
value: t
|
|
230
|
-
});
|
|
231
|
-
}
|
|
232
|
-
static {
|
|
233
|
-
this.elementName = "sbb-calendar";
|
|
234
|
-
}
|
|
235
|
-
static {
|
|
236
|
-
this.elementDependencies = [
|
|
237
|
-
xe,
|
|
238
|
-
Se,
|
|
239
|
-
Ce,
|
|
240
|
-
we,
|
|
241
|
-
Te,
|
|
242
|
-
be,
|
|
243
|
-
ye
|
|
244
|
-
];
|
|
245
|
-
}
|
|
246
|
-
static {
|
|
247
|
-
this.styles = [
|
|
248
|
-
oe,
|
|
249
|
-
ve,
|
|
250
|
-
a(Ee)
|
|
251
|
-
];
|
|
252
|
-
}
|
|
253
|
-
static {
|
|
254
|
-
this.events = {
|
|
255
|
-
dateselected: "dateselected",
|
|
256
|
-
monthchange: "monthchange"
|
|
257
|
-
};
|
|
258
|
-
}
|
|
259
|
-
#e;
|
|
260
|
-
get wide() {
|
|
261
|
-
return this.#e;
|
|
262
|
-
}
|
|
263
|
-
set wide(e) {
|
|
264
|
-
this.#e = e;
|
|
265
|
-
}
|
|
266
|
-
#t;
|
|
267
|
-
get view() {
|
|
268
|
-
return this.#t;
|
|
269
|
-
}
|
|
270
|
-
set view(e) {
|
|
271
|
-
this.#t = e;
|
|
272
|
-
}
|
|
273
|
-
#n;
|
|
274
|
-
get min() {
|
|
275
|
-
return this.#n;
|
|
276
|
-
}
|
|
277
|
-
set min(e) {
|
|
278
|
-
this.#n = e;
|
|
279
|
-
}
|
|
280
|
-
#r;
|
|
281
|
-
get max() {
|
|
282
|
-
return this.#r;
|
|
283
|
-
}
|
|
284
|
-
set max(e) {
|
|
285
|
-
this.#r = e;
|
|
286
|
-
}
|
|
287
|
-
#i;
|
|
288
|
-
get multiple() {
|
|
289
|
-
return this.#i;
|
|
290
|
-
}
|
|
291
|
-
set multiple(e) {
|
|
292
|
-
this.#i = e;
|
|
293
|
-
}
|
|
294
|
-
set selected(e) {
|
|
295
|
-
if (Array.isArray(e)) this._selected = e.map((e) => this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e))).filter((e) => e !== null).filter((e) => !this._isDayInRange(this._dateAdapter.toIso8601(e)) || this._dateFilter(e)).sort(this._sortDate);
|
|
296
|
-
else {
|
|
297
|
-
let t = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));
|
|
298
|
-
t && (!this._isDayInRange(this._dateAdapter.toIso8601(t)) || this._dateFilter(t)) ? this._selected = t : this._selected = null;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
get selected() {
|
|
302
|
-
return this._selected;
|
|
303
|
-
}
|
|
304
|
-
#a;
|
|
305
|
-
get _selected() {
|
|
306
|
-
return this.#a;
|
|
307
|
-
}
|
|
308
|
-
set _selected(e) {
|
|
309
|
-
this.#a = e;
|
|
310
|
-
}
|
|
311
|
-
#o;
|
|
312
|
-
get dateFilter() {
|
|
313
|
-
return this.#o;
|
|
314
|
-
}
|
|
315
|
-
set dateFilter(e) {
|
|
316
|
-
this.#o = e;
|
|
317
|
-
}
|
|
318
|
-
#s;
|
|
319
|
-
get orientation() {
|
|
320
|
-
return this.#s;
|
|
321
|
-
}
|
|
322
|
-
set orientation(e) {
|
|
323
|
-
this.#s = e;
|
|
324
|
-
}
|
|
325
|
-
#c;
|
|
326
|
-
get weekNumbers() {
|
|
327
|
-
return this.#c;
|
|
328
|
-
}
|
|
329
|
-
set weekNumbers(e) {
|
|
330
|
-
this.#c = e;
|
|
331
|
-
}
|
|
332
|
-
#l;
|
|
333
|
-
get _activeDate() {
|
|
334
|
-
return this.#l;
|
|
335
|
-
}
|
|
336
|
-
set _activeDate(e) {
|
|
337
|
-
this.#l = e;
|
|
338
|
-
}
|
|
339
|
-
set _wide(e) {
|
|
340
|
-
this.toggleState("wide", e), this._wideInternal = e;
|
|
341
|
-
}
|
|
342
|
-
get _wide() {
|
|
343
|
-
return this._wideInternal;
|
|
344
|
-
}
|
|
345
|
-
#u;
|
|
346
|
-
get _calendarView() {
|
|
347
|
-
return this.#u;
|
|
348
|
-
}
|
|
349
|
-
set _calendarView(e) {
|
|
350
|
-
this.#u = e;
|
|
351
|
-
}
|
|
352
|
-
get _cells() {
|
|
353
|
-
return Array.from((this._calendarView === "day" ? Array.from(this.shadowRoot.querySelectorAll("slot")).flatMap((e) => e.assignedElements({ flatten: !0 })) : this.shadowRoot?.querySelectorAll(`sbb-calendar-${this._calendarView}`)) ?? []);
|
|
354
|
-
}
|
|
355
|
-
#d;
|
|
356
|
-
get _initialized() {
|
|
357
|
-
return this.#d;
|
|
358
|
-
}
|
|
359
|
-
set _initialized(e) {
|
|
360
|
-
this.#d = e;
|
|
361
|
-
}
|
|
362
|
-
constructor() {
|
|
363
|
-
super(), this.#e = (t(this, x), t(this, C, !1)), this.#t = (t(this, w), t(this, T, "day")), this.#n = (t(this, E), t(this, O, null)), this.#r = (t(this, k), t(this, j, null)), this.#i = (t(this, M), t(this, P, !1)), this.#a = (t(this, F), t(this, R, null)), this.#o = (t(this, z), t(this, V, null)), this.#s = (t(this, H), t(this, W, "horizontal")), this.#c = (t(this, G), t(this, q, !1)), this._dateAdapter = (t(this, J), _e().datetime?.dateAdapter ?? se), this.#l = t(this, X, this._dateAdapter.today()), this._wideInternal = (t(this, Z), !1), this.#u = t(this, ke, "day"), this._nextCalendarView = (t(this, Ae), "day"), this._keyboardNavigationDayViewParameters = {
|
|
364
|
-
firstDayInView: null,
|
|
365
|
-
lastDayInView: null,
|
|
366
|
-
firstMonthOffset: 0,
|
|
367
|
-
firstMonthLength: 0,
|
|
368
|
-
secondMonthOffset: 0
|
|
369
|
-
}, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._enhancedVariant = !1, this._resetFocus = !1, this._containingFocus = !1, this._lastSelection = null, this.#d = t(this, Me, !1), this._language = (t(this, Ne), new te(this).withHandler(() => {
|
|
370
|
-
this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
|
|
371
|
-
})), this._mediaMatcher = new ne(this, { [l]: () => this._init() }), this._sortDate = (e, t) => this._dateAdapter.compareDate(e, t), this._onSlotChange = () => {
|
|
372
|
-
this._enhancedVariant = Array.from(this.children).some((e) => e.localName === "sbb-calendar-day"), this.toggleState("enhanced", this._enhancedVariant), this._setTabIndex();
|
|
373
|
-
}, this._createMonthRows(), this._setWeekdays(), this.addEventListener("focusin", () => this._containingFocus = !0), this.addEventListener("focusout", () => this._containingFocus = !1);
|
|
374
|
-
let e = (e) => e.target.closest("sbb-calendar-day") ?? e.composedPath().find((e) => e.localName === "sbb-calendar-day") ?? null;
|
|
375
|
-
this.addEventListener("click", (t) => {
|
|
376
|
-
let n = e(t);
|
|
377
|
-
n && this._selectDate(n.value, t);
|
|
378
|
-
}), this.addEventListener("keydown", (t) => {
|
|
379
|
-
let n = e(t);
|
|
380
|
-
n && this._handleKeyboardEvent(t, n);
|
|
381
|
-
}), this.addEventListener("blur", () => this._lastSelection = null);
|
|
382
|
-
}
|
|
383
|
-
_dateFilter(e) {
|
|
384
|
-
return this.dateFilter?.(e) ?? !0;
|
|
385
|
-
}
|
|
386
|
-
resetPosition() {
|
|
387
|
-
this._resetCalendarView(), this._init();
|
|
388
|
-
}
|
|
389
|
-
connectedCallback() {
|
|
390
|
-
super.connectedCallback(), this.resetPosition(), this.shadowRoot?.addEventListener("slotchange", this._onSlotChange, { capture: !0 });
|
|
391
|
-
}
|
|
392
|
-
disconnectedCallback() {
|
|
393
|
-
super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._onSlotChange, { capture: !0 });
|
|
394
|
-
}
|
|
395
|
-
focus() {
|
|
396
|
-
this._resetFocus = !0, this._focusCell();
|
|
397
|
-
}
|
|
398
|
-
willUpdate(e) {
|
|
399
|
-
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));
|
|
400
|
-
}
|
|
401
|
-
updated(e) {
|
|
402
|
-
super.updated(e), this._setTabIndex(), this._focusCell();
|
|
403
|
-
}
|
|
404
|
-
_onMultipleChanged(e) {
|
|
405
|
-
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);
|
|
406
|
-
}
|
|
407
|
-
_init(e) {
|
|
408
|
-
if (!r) {
|
|
409
|
-
if (this.hydrationRequired) {
|
|
410
|
-
this.hydrationComplete.then(() => this._init());
|
|
411
|
-
return;
|
|
412
|
-
}
|
|
413
|
-
if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(l) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._weekNumbers = this._weeks.flat().sort((e, t) => e.value.localeCompare(t.value)).map((e) => e.weekValue).filter((e, t, n) => n.indexOf(e) === t), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
|
|
414
|
-
let e = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
|
|
415
|
-
this._nextMonthWeeks = this._createWeekRows(e, !0), this._nextMonthYears = this._createYearRows(_), this._nextMonthWeekNumbers = this._nextMonthWeeks.flat().sort((e, t) => e.value.localeCompare(t.value)).map((e) => e.weekValue).filter((e, t, n) => n.indexOf(e) === t);
|
|
416
|
-
}
|
|
417
|
-
this._initialized = !0;
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
_focusCell() {
|
|
421
|
-
this._resetFocus &&= (this._getFirstFocusable()?.focus(), !1);
|
|
422
|
-
}
|
|
423
|
-
_setWeekdays() {
|
|
424
|
-
let e = this._dateAdapter.getDayOfWeekNames("narrow"), t = this._dateAdapter.getDayOfWeekNames("long").map((t, n) => ({
|
|
425
|
-
long: t,
|
|
426
|
-
narrow: e[n]
|
|
427
|
-
})), n = this._dateAdapter.getFirstDayOfWeek();
|
|
428
|
-
this._weekdays = t.slice(n).concat(t.slice(0, n));
|
|
429
|
-
}
|
|
430
|
-
_createWeekRows(e, t = !1) {
|
|
431
|
-
let n = this._dateAdapter.getNumDaysInMonth(e), r = this._dateAdapter.getFirstWeekOffset(e);
|
|
432
|
-
return t ? (this._keyboardNavigationDayViewParameters.secondMonthOffset = r, this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), n))) : (this._keyboardNavigationDayViewParameters.firstMonthLength = n, this._keyboardNavigationDayViewParameters.firstMonthOffset = r, 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), n))), this.orientation === "horizontal" ? this._createWeekRowsHorizontal(e, n, r) : this._createWeekRowsVertical(e, n, r);
|
|
433
|
-
}
|
|
434
|
-
_createWeekRowsHorizontal(e, t, n) {
|
|
435
|
-
let r = [[]];
|
|
436
|
-
for (let i = 0, a = n; i < t; i++, a++) {
|
|
437
|
-
a === m && (r.push([]), a = 0);
|
|
438
|
-
let t = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), i + 1);
|
|
439
|
-
r[r.length - 1].push(this._mapDateToDay(t));
|
|
440
|
-
}
|
|
441
|
-
return r;
|
|
442
|
-
}
|
|
443
|
-
_createWeekRowsVertical(e, t, n) {
|
|
444
|
-
let r = Array.from({ length: m }, () => []);
|
|
445
|
-
for (let i = 0, a = n; i < t; i++, a++) {
|
|
446
|
-
a === m && (a = 0);
|
|
447
|
-
let t = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), i + 1);
|
|
448
|
-
r[a].push(this._mapDateToDay(t));
|
|
449
|
-
}
|
|
450
|
-
return r;
|
|
451
|
-
}
|
|
452
|
-
_mapDateToDay(e) {
|
|
453
|
-
return {
|
|
454
|
-
value: this._dateAdapter.toIso8601(e),
|
|
455
|
-
dateValue: e,
|
|
456
|
-
dayValue: String(this._dateAdapter.getDate(e)),
|
|
457
|
-
monthValue: String(this._dateAdapter.getMonth(e)),
|
|
458
|
-
yearValue: String(this._dateAdapter.getYear(e)),
|
|
459
|
-
weekValue: this._getWeek(e),
|
|
460
|
-
weekDayValue: this._dateAdapter.getDayOfWeek(e)
|
|
461
|
-
};
|
|
462
|
-
}
|
|
463
|
-
_getWeek(e) {
|
|
464
|
-
let t = this._dateAdapter.createDate(this._dateAdapter.getYear(e), 1, 1), n = this._dateAdapter.getDayOfWeek(t), r = +!![
|
|
465
|
-
c,
|
|
466
|
-
ie,
|
|
467
|
-
ae,
|
|
468
|
-
re
|
|
469
|
-
].includes(n), i = this._dateAdapter.addCalendarDays(t, this._dateAdapter.getFirstWeekOffset(t) * -1);
|
|
470
|
-
for (; this._dateAdapter.compareDate(i, e) <= 0;) {
|
|
471
|
-
let n = this._dateAdapter.addCalendarDays(i, 6);
|
|
472
|
-
if (this._dateAdapter.compareDate(e, n) <= 0) return r > 0 ? r : this._getWeek(this._dateAdapter.addCalendarDays(t, -1));
|
|
473
|
-
i = this._dateAdapter.addCalendarDays(i, m), r++;
|
|
474
|
-
}
|
|
475
|
-
throw Error("The provided date is invalid");
|
|
476
|
-
}
|
|
477
|
-
_mapValueToISODate(e) {
|
|
478
|
-
return typeof e == "string" ? e : this._dateAdapter.toIso8601(e);
|
|
479
|
-
}
|
|
480
|
-
_createMonthRows() {
|
|
481
|
-
let e = Array(12).fill(null).map((e, t) => ({
|
|
482
|
-
value: String(t + 1).padStart(2, "0"),
|
|
483
|
-
monthValue: t + 1
|
|
484
|
-
})), t = 12 / h, n = [];
|
|
485
|
-
for (let r = 0; r < t; r++) n.push(e.slice(h * r, h * (r + 1)));
|
|
486
|
-
this._months = n;
|
|
487
|
-
}
|
|
488
|
-
_createYearRows(e = 0) {
|
|
489
|
-
let t = this._getStartValueYearView(), n = Array(_).fill(0).map((n, r) => t + e + r), r = _ / g, i = [];
|
|
490
|
-
for (let e = 0; e < r; e++) i.push(n.slice(g * e, g * (e + 1)));
|
|
491
|
-
return i;
|
|
492
|
-
}
|
|
493
|
-
_getStartValueYearView() {
|
|
494
|
-
let e = 0;
|
|
495
|
-
this.max ? e = this._dateAdapter.getYear(this.max) - _ + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
|
|
496
|
-
let t = this._dateAdapter.getYear(this._activeDate);
|
|
497
|
-
return t - ((t - e) % _ + _) % _;
|
|
498
|
-
}
|
|
499
|
-
_isDayInRange(e) {
|
|
500
|
-
if (!this.min && !this.max) return !0;
|
|
501
|
-
let t = this._dateAdapter.deserialize(e);
|
|
502
|
-
return this._dateAdapter.sameDate(t, this._dateAdapter.clampDate(t, this.min, this.max));
|
|
503
|
-
}
|
|
504
|
-
_selectDate(e, t) {
|
|
505
|
-
if (this._chosenMonth = void 0, this._setChosenYear(), this.multiple) {
|
|
506
|
-
window.getSelection()?.removeAllRanges();
|
|
507
|
-
let n = this._selected ? Array.isArray(this._selected) ? this._selected : [this._selected] : [], r = n.map((e) => this._dateAdapter.toIso8601(e));
|
|
508
|
-
if (t.shiftKey && this._lastSelection && r.includes(this._dateAdapter.toIso8601(this._lastSelection)) && !r.includes(this._dateAdapter.toIso8601(e))) {
|
|
509
|
-
let t = this._dateAdapter.compareDate(this._lastSelection, e) < 0 ? 1 : -1, i = [], a = this._lastSelection;
|
|
510
|
-
for (; !this._dateAdapter.sameDate(a, e);) {
|
|
511
|
-
a = this._dateAdapter.addCalendarDays(a, t);
|
|
512
|
-
let e = this._dateAdapter.toIso8601(a);
|
|
513
|
-
r.includes(e) || i.push(e);
|
|
514
|
-
}
|
|
515
|
-
n = this._mergeDates(i, r);
|
|
516
|
-
} else n = n.some((t) => this._dateAdapter.sameDate(t, e)) ? n.filter((t) => !this._dateAdapter.sameDate(t, e)) : [...n, e].sort(this._sortDate);
|
|
517
|
-
this._lastSelection = e, this._selected = n, this._emitDateSelectedEvent(this._selected.map((e) => this._dateAdapter.deserialize(e)));
|
|
518
|
-
} else (!this._selected || this._dateAdapter.compareDate(this._selected, e) !== 0) && (this._selected = e, this._emitDateSelectedEvent(this._dateAdapter.deserialize(e)));
|
|
519
|
-
}
|
|
520
|
-
_selectMultipleDates(e) {
|
|
521
|
-
this._selected = this._mergeDates(e.map((e) => e.value)), this._emitDateSelectedEvent(this._selected.map((e) => this._dateAdapter.deserialize(e)));
|
|
522
|
-
}
|
|
523
|
-
_mergeDates(e, t) {
|
|
524
|
-
t ??= this._selected.map((e) => this._dateAdapter.toIso8601(e));
|
|
525
|
-
let n = this._cells.filter((e) => !e.disabled).map((e) => this._mapValueToISODate(e.value)), r = e.filter((e) => n.includes(e));
|
|
526
|
-
return t = r.every((e) => t.includes(e)) ? t.filter((e) => !r.includes(e)) : [...t, ...r].filter((e, t, n) => n.indexOf(e) === t), t.map((e) => this._dateAdapter.deserialize(e)).sort(this._sortDate);
|
|
527
|
-
}
|
|
528
|
-
_emitDateSelectedEvent(e) {
|
|
529
|
-
this.dispatchEvent(new y(e));
|
|
530
|
-
}
|
|
531
|
-
_emitMonthChange() {
|
|
532
|
-
let e = (this.wide ? [...this._weeks, ...this._nextMonthWeeks] : this._weeks).flat().sort((e, t) => e.value.localeCompare(t.value));
|
|
533
|
-
this.dispatchEvent(new v(e));
|
|
534
|
-
}
|
|
535
|
-
_setChosenYear() {
|
|
536
|
-
if (this.view === "month") {
|
|
537
|
-
let e;
|
|
538
|
-
e = this.multiple ? this.selected.at(-1) : this.selected, this._chosenYear = this._dateAdapter.getYear(e ?? this._dateAdapter.today());
|
|
539
|
-
} else this._chosenYear = void 0;
|
|
540
|
-
}
|
|
541
|
-
_assignActiveDate(e) {
|
|
542
|
-
if (this.min && this._dateAdapter.compareDate(this.min, e) > 0) {
|
|
543
|
-
this._activeDate = this.min;
|
|
544
|
-
return;
|
|
545
|
-
}
|
|
546
|
-
if (this.max && this._dateAdapter.compareDate(this.max, e) < 0) {
|
|
547
|
-
this._activeDate = this.max;
|
|
548
|
-
return;
|
|
549
|
-
}
|
|
550
|
-
this._activeDate = e;
|
|
551
|
-
}
|
|
552
|
-
_goToDifferentMonth(e) {
|
|
553
|
-
this._init(this._dateAdapter.addCalendarMonths(this._activeDate, e)), this._emitMonthChange();
|
|
554
|
-
}
|
|
555
|
-
_goToDifferentYear(e) {
|
|
556
|
-
this._chosenYear += e, this._activeDate = this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate)), this._init();
|
|
557
|
-
}
|
|
558
|
-
_goToDifferentYearRange(e) {
|
|
559
|
-
this._init(this._dateAdapter.addCalendarYears(this._activeDate, e));
|
|
560
|
-
}
|
|
561
|
-
_prevDisabled(e) {
|
|
562
|
-
return this.min ? this._dateAdapter.compareDate(e, this.min) < 0 : !1;
|
|
563
|
-
}
|
|
564
|
-
_nextDisabled(e) {
|
|
565
|
-
return this.max ? this._dateAdapter.compareDate(e, this.max) > 0 : !1;
|
|
566
|
-
}
|
|
567
|
-
_previousMonthDisabled() {
|
|
568
|
-
let e = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getDate(this._activeDate) * -1);
|
|
569
|
-
return this._prevDisabled(e);
|
|
570
|
-
}
|
|
571
|
-
_nextMonthDisabled() {
|
|
572
|
-
let e = this._dateAdapter.addCalendarMonths(this._activeDate, this._wide ? 2 : 1);
|
|
573
|
-
return e = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), 1), this._nextDisabled(e);
|
|
574
|
-
}
|
|
575
|
-
_previousYearDisabled() {
|
|
576
|
-
let e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) - 1, 12, 31);
|
|
577
|
-
return this._prevDisabled(e);
|
|
578
|
-
}
|
|
579
|
-
_nextYearDisabled() {
|
|
580
|
-
let e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) + (this._wide ? 2 : 1), 1, 1);
|
|
581
|
-
return this._nextDisabled(e);
|
|
582
|
-
}
|
|
583
|
-
_previousYearRangeDisabled() {
|
|
584
|
-
let e = this._dateAdapter.createDate(this._years[0][0] - 1, 12, 31);
|
|
585
|
-
return this._prevDisabled(e);
|
|
586
|
-
}
|
|
587
|
-
_nextYearRangeDisabled() {
|
|
588
|
-
let e = this._wide ? this._nextMonthYears : this._years, t = e[e.length - 1], n = t[t.length - 1], r = this._dateAdapter.createDate(n + 1, 1, 1);
|
|
589
|
-
return this._nextDisabled(r);
|
|
590
|
-
}
|
|
591
|
-
_handleTableBlur(e) {
|
|
592
|
-
e?.localName !== "sbb-calendar-day" && this._setTabIndex();
|
|
593
|
-
}
|
|
594
|
-
_setTabIndex() {
|
|
595
|
-
Array.from(this._cells.filter((e) => e.tabIndex === 0) ?? []).forEach((e) => e.tabIndex = -1);
|
|
596
|
-
let e = this._getFirstFocusable();
|
|
597
|
-
e && (e.tabIndex = 0);
|
|
598
|
-
}
|
|
599
|
-
_getFirstFocusable() {
|
|
600
|
-
if (this._calendarView === "day") {
|
|
601
|
-
let e = this._cells.find((e) => e.matches(":is(:state(selected),[state--selected])")) ?? this._cells.find((e) => e.matches(":is(:state(current),[state--current])"));
|
|
602
|
-
return e && !e.disabled ? e : this._getFirstFocusableDay();
|
|
603
|
-
} else {
|
|
604
|
-
let e = this.shadowRoot?.querySelector(":is(:state(selected),[state--selected])") ?? this.shadowRoot?.querySelector(":is(:state(current),[state--current])");
|
|
605
|
-
return e && !e.disabled ? e : this.shadowRoot.querySelector(`sbb-calendar-${this._calendarView}:not([disabled])`);
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
_getFirstFocusableDay() {
|
|
609
|
-
let e = this._cells, t = e.filter((e) => !e.disabled);
|
|
610
|
-
if (!t || t.length === 0) return null;
|
|
611
|
-
{
|
|
612
|
-
let n = t.map((e) => this._dateAdapter.toIso8601(e.value)).sort()[0];
|
|
613
|
-
return e.find((e) => e.matches(`[slot="${n}"]`)) ?? null;
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
_handleKeyboardEvent(e, t) {
|
|
617
|
-
ge(e) && e.preventDefault();
|
|
618
|
-
let n = t ?? e.target, r = this._cells, i = r.indexOf(n), a;
|
|
619
|
-
a = t ? this._navigateByKeyboardDayView(e, i, r, this._mapDateToDay(t.value)) : this._navigateByKeyboard(e, i, r);
|
|
620
|
-
let o = (this._enhancedVariant ? document : this.shadowRoot).activeElement;
|
|
621
|
-
a !== o && (a.tabIndex = 0, a?.focus(), o.tabIndex = -1);
|
|
622
|
-
}
|
|
623
|
-
_navigateByKeyboardDayView(e, t, n, r) {
|
|
624
|
-
let i = this.orientation === "horizontal" ? {
|
|
625
|
-
leftRight: 1,
|
|
626
|
-
upDown: m
|
|
627
|
-
} : {
|
|
628
|
-
leftRight: m,
|
|
629
|
-
upDown: 1
|
|
630
|
-
}, a = t < this._keyboardNavigationDayViewParameters.firstMonthLength ? this._keyboardNavigationDayViewParameters.firstMonthOffset : this._keyboardNavigationDayViewParameters.secondMonthOffset;
|
|
631
|
-
switch (e.key) {
|
|
632
|
-
case "ArrowUp": return this._findDayArrows(n, t, r.dateValue, -i.upDown);
|
|
633
|
-
case "ArrowDown": return this._findDayArrows(n, t, r.dateValue, i.upDown);
|
|
634
|
-
case "ArrowLeft": return this._findDayArrows(n, t, r.dateValue, -i.leftRight);
|
|
635
|
-
case "ArrowRight": return this._findDayArrows(n, t, r.dateValue, i.leftRight);
|
|
636
|
-
case "PageUp": if (this.orientation === "horizontal") {
|
|
637
|
-
let e = (+r.dayValue % m || m) - +r.dayValue;
|
|
638
|
-
return this._findDayPageUpDown(n, t, r, e, i.upDown);
|
|
639
|
-
} else {
|
|
640
|
-
let e = (Math.ceil((+r.dayValue + a) / m) - 1) * m - a + 1 - r.dayValue;
|
|
641
|
-
return this._findDayPageUpDown(n, t, r, e, i.upDown);
|
|
642
|
-
}
|
|
643
|
-
case "PageDown": if (this.orientation === "horizontal") {
|
|
644
|
-
let e = +r.monthValue + 1 > 12 ? 1 : +r.monthValue + 1, a = +r.monthValue + 1 > 12 ? +r.yearValue + 1 : +r.yearValue, o = this._dateAdapter.createDate(a, e, 1), s = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(o, -1)), c = Math.trunc((s - +r.dayValue) / m) * m;
|
|
645
|
-
return this._findDayPageUpDown(n, t, r, c, -i.upDown);
|
|
646
|
-
} else {
|
|
647
|
-
let e = Math.ceil((+r.dayValue + a) / m) * m - a - +r.dayValue;
|
|
648
|
-
return this._findDayPageUpDown(n, t, r, e, -i.upDown);
|
|
649
|
-
}
|
|
650
|
-
case "Home": return this._findDayFirst(n, t, r, 1);
|
|
651
|
-
case "End": {
|
|
652
|
-
let e = +r.monthValue + 1 > 12 ? 1 : +r.monthValue + 1, i = +r.monthValue + 1 > 12 ? +r.yearValue + 1 : +r.yearValue, a = this._dateAdapter.createDate(i, e, 1);
|
|
653
|
-
return this._findDayLast(n, t, a);
|
|
654
|
-
}
|
|
655
|
-
default: return n[t];
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
_isDayOutOfView(e) {
|
|
659
|
-
return e < this._keyboardNavigationDayViewParameters.firstDayInView || e > this._keyboardNavigationDayViewParameters.lastDayInView;
|
|
660
|
-
}
|
|
661
|
-
_findDayArrows(e, t, n, r) {
|
|
662
|
-
let i = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n, r));
|
|
663
|
-
if (this._isDayOutOfView(i)) return e[t];
|
|
664
|
-
let a = e.find((e) => this._mapValueToISODate(e.value) === i);
|
|
665
|
-
return !a || a.disabled ? this._findDayArrows(e, t, this._dateAdapter.deserialize(i), r) : a;
|
|
666
|
-
}
|
|
667
|
-
_findDayPageUpDown(e, t, n, r, i) {
|
|
668
|
-
let a = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n.dateValue, r));
|
|
669
|
-
if (this._isDayOutOfView(a)) return e[t];
|
|
670
|
-
let o = e.find((e) => this._mapValueToISODate(e.value) === a);
|
|
671
|
-
return !o || o.disabled ? this._findDayPageUpDown(e, t, n, r + i, i) : o;
|
|
672
|
-
}
|
|
673
|
-
_findDayFirst(e, t, n, r) {
|
|
674
|
-
let i = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+n.yearValue, +n.monthValue, r));
|
|
675
|
-
if (this._isDayOutOfView(i)) return e[t];
|
|
676
|
-
let a = e.find((e) => this._mapValueToISODate(e.value) === i);
|
|
677
|
-
return !a || a.disabled ? this._findDayFirst(e, t, n, r + 1) : a;
|
|
678
|
-
}
|
|
679
|
-
_findDayLast(e, t, n) {
|
|
680
|
-
let r = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n, -1));
|
|
681
|
-
if (this._isDayOutOfView(r)) return e[t];
|
|
682
|
-
let i = e.find((e) => this._mapValueToISODate(e.value) === r);
|
|
683
|
-
return !i || i.disabled ? this._findDayLast(e, t, this._dateAdapter.deserialize(r)) : i;
|
|
684
|
-
}
|
|
685
|
-
_navigateByKeyboard(e, t, n) {
|
|
686
|
-
let { elementIndexForWideMode: r, offsetForWideMode: i, lastElementIndexForWideMode: a, verticalOffset: o } = this._calculateParametersForKeyboardNavigation(t, this._calendarView === "year");
|
|
687
|
-
switch (e.key) {
|
|
688
|
-
case "ArrowUp": return this._findNext(n, t, -o);
|
|
689
|
-
case "ArrowDown": return this._findNext(n, t, o);
|
|
690
|
-
case "ArrowLeft": return this._findNext(n, t, -1);
|
|
691
|
-
case "ArrowRight": return this._findNext(n, t, 1);
|
|
692
|
-
case "Home": return this._findFirst(n, i);
|
|
693
|
-
case "PageUp": return this._findFirstOnColumn(n, r, i, o);
|
|
694
|
-
case "PageDown": return this._findLastOnColumn(n, t, a, o);
|
|
695
|
-
case "End": return this._findLast(n, a - 1);
|
|
696
|
-
default: return n[t];
|
|
697
|
-
}
|
|
698
|
-
}
|
|
699
|
-
_calculateParametersForKeyboardNavigation(e, t) {
|
|
700
|
-
let n = t ? _ : De, r = Math.trunc(e / n) * n, i = r === 0 ? e : e - n;
|
|
701
|
-
return {
|
|
702
|
-
verticalOffset: t ? g : h,
|
|
703
|
-
elementIndexForWideMode: i,
|
|
704
|
-
offsetForWideMode: e - i,
|
|
705
|
-
lastElementIndexForWideMode: r === 0 ? n : n * 2
|
|
706
|
-
};
|
|
707
|
-
}
|
|
708
|
-
_findNext(e, t, n) {
|
|
709
|
-
let r = t + n;
|
|
710
|
-
for (; r < e.length && e[r]?.disabled;) r += n;
|
|
711
|
-
return e[r] ?? e[t];
|
|
712
|
-
}
|
|
713
|
-
_findFirst(e, t) {
|
|
714
|
-
return e[t].disabled ? this._findNext(e, t, 1) : e[t];
|
|
715
|
-
}
|
|
716
|
-
_findLast(e, t) {
|
|
717
|
-
return e[t].disabled ? this._findNext(e, t, -1) : e[t];
|
|
718
|
-
}
|
|
719
|
-
_findFirstOnColumn(e, t, n, r) {
|
|
720
|
-
let i = t % r + n;
|
|
721
|
-
return e[i].disabled ? this._findNext(e, i, r) : e[i];
|
|
722
|
-
}
|
|
723
|
-
_findLastOnColumn(e, t, n, r) {
|
|
724
|
-
let i = t + Math.trunc((n - t - 1) / r) * r;
|
|
725
|
-
return e[i].disabled ? this._findNext(e, i, -r) : e[i];
|
|
726
|
-
}
|
|
727
|
-
_resetCalendarViewAndEmitMonthChange(e = !1) {
|
|
728
|
-
this._resetCalendarView(e), this._emitMonthChange();
|
|
729
|
-
}
|
|
730
|
-
_resetCalendarView(e = !1) {
|
|
731
|
-
this._containingFocus && (this._resetFocus = !0), this._activeDate = (this.multiple ? this._selected.at(-1) : this._selected) ?? this._dateAdapter.today(), this._setChosenYear(), this._chosenMonth = void 0, this._init(), this._nextCalendarView = this._calendarView = this.view, e && this._startTableTransition();
|
|
732
|
-
}
|
|
733
|
-
_renderDayView() {
|
|
734
|
-
let e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
|
|
735
|
-
return n`
|
|
736
|
-
<div class="sbb-calendar__controls">
|
|
737
|
-
${this._getArrow("left", () => this._goToDifferentMonth(-1), fe[this._language.current], this._previousMonthDisabled())}
|
|
738
|
-
<div class="sbb-calendar__controls-month">
|
|
739
|
-
${this._createLabelForDayView(this._activeDate)}
|
|
740
|
-
${this._wide ? this._createLabelForDayView(e) : i}
|
|
741
|
-
<span class="sbb-screen-reader-only" role="status">
|
|
742
|
-
${this._createAriaLabelForDayView(this._activeDate, e)}
|
|
743
|
-
</span>
|
|
744
|
-
</div>
|
|
745
|
-
${this._getArrow("right", () => this._goToDifferentMonth(1), le[this._language.current], this._nextMonthDisabled())}
|
|
746
|
-
</div>
|
|
747
|
-
<div class="sbb-calendar__table-overflow-break">
|
|
748
|
-
<div class="sbb-calendar__table-container sbb-calendar__table-day-view">
|
|
749
|
-
${this.orientation === "horizontal" ? n`
|
|
750
|
-
${this._createDayTable(this._weeks, this._weekNumbers)}
|
|
751
|
-
${this._wide ? this._createDayTable(this._nextMonthWeeks, this._nextMonthWeekNumbers, !0) : i}
|
|
752
|
-
` : n`
|
|
753
|
-
${this._createDayTableVertical(this._weeks, this._weekNumbers)}
|
|
754
|
-
${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, this._nextMonthWeekNumbers, e) : i}
|
|
755
|
-
`}
|
|
756
|
-
</div>
|
|
757
|
-
</div>
|
|
758
|
-
`;
|
|
759
|
-
}
|
|
760
|
-
_createLabelForDayView(e) {
|
|
761
|
-
let t = `${this._monthNames[this._dateAdapter.getMonth(e) - 1]} ${this._dateAdapter.getYear(e)}`;
|
|
762
|
-
return n`
|
|
763
|
-
<button
|
|
764
|
-
type="button"
|
|
765
|
-
class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
|
|
766
|
-
aria-label="${he[this._language.current]} ${t}"
|
|
767
|
-
@click=${() => {
|
|
768
|
-
this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
|
|
769
|
-
}}
|
|
770
|
-
>
|
|
771
|
-
${t}
|
|
772
|
-
<sbb-icon name="chevron-small-down-small"></sbb-icon>
|
|
773
|
-
</button>
|
|
774
|
-
`;
|
|
775
|
-
}
|
|
776
|
-
_createAriaLabelForDayView(...e) {
|
|
777
|
-
let t = "";
|
|
778
|
-
for (let n of e) n && (t += `${this._monthNames[this._dateAdapter.getMonth(n) - 1]} ${this._dateAdapter.getYear(n)} `);
|
|
779
|
-
return t;
|
|
780
|
-
}
|
|
781
|
-
_createDayTable(e, t, r = !1) {
|
|
782
|
-
let a = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : r ? this._nextMonthWeeks : this._weeks).flat(), o = (r ? this._nextMonthWeeks : this._weeks).flat();
|
|
783
|
-
return n`
|
|
784
|
-
<table
|
|
785
|
-
class="sbb-calendar__table"
|
|
786
|
-
@focusout=${(e) => this._handleTableBlur(e.relatedTarget)}
|
|
787
|
-
@animationend=${(e) => this._tableAnimationEnd(e)}
|
|
788
|
-
>
|
|
789
|
-
<thead class="sbb-calendar__table-header">
|
|
790
|
-
<tr>
|
|
791
|
-
${this.weekNumbers ? n`<th class="sbb-calendar__table-header-cell"></th>` : i}
|
|
792
|
-
${this._weekdays.map((e, t) => n`
|
|
793
|
-
<th class="sbb-calendar__table-header-cell">
|
|
794
|
-
${this.multiple ? n`
|
|
795
|
-
<sbb-calendar-weekday
|
|
796
|
-
.value=${e}
|
|
797
|
-
@click=${() => {
|
|
798
|
-
let e = o.filter((e) => e.weekDayValue === (t + 1) % 7);
|
|
799
|
-
this._selectMultipleDates(e);
|
|
800
|
-
}}
|
|
801
|
-
></sbb-calendar-weekday>
|
|
802
|
-
` : n`
|
|
803
|
-
<span class="sbb-screen-reader-only">${e.long}</span>
|
|
804
|
-
<span aria-hidden="true">${e.narrow}</span>
|
|
805
|
-
`}
|
|
806
|
-
</th>
|
|
807
|
-
`)}
|
|
808
|
-
</tr>
|
|
809
|
-
</thead>
|
|
810
|
-
<tbody class="sbb-calendar__table-body">
|
|
811
|
-
${e.map((e, r) => {
|
|
812
|
-
let o = m - e.length;
|
|
813
|
-
return r === 0 && o ? n`
|
|
814
|
-
<tr>
|
|
815
|
-
${this.weekNumbers ? n`
|
|
816
|
-
<td class="sbb-calendar__table-header-cell-vertical">
|
|
817
|
-
${this.multiple ? n`
|
|
818
|
-
<sbb-calendar-weeknumber
|
|
819
|
-
.value=${t[0]}
|
|
820
|
-
@click=${() => {
|
|
821
|
-
let e = a.filter((e) => e.weekValue === t[0]);
|
|
822
|
-
this._selectMultipleDates(e);
|
|
823
|
-
}}
|
|
824
|
-
></sbb-calendar-weeknumber>
|
|
825
|
-
` : n`
|
|
826
|
-
<span class="sbb-screen-reader-only"
|
|
827
|
-
>${`${f[this._language.current]} ${t[0]}`}</span
|
|
828
|
-
>
|
|
829
|
-
<span aria-hidden="true">${t[0]}</span>
|
|
830
|
-
`}
|
|
831
|
-
</td>
|
|
832
|
-
` : i}
|
|
833
|
-
${[...Array(o).keys()].map(() => n`<td class="sbb-calendar__table-data"></td>`)}
|
|
834
|
-
${this._createDayCells(e)}
|
|
835
|
-
</tr>
|
|
836
|
-
` : n`
|
|
837
|
-
<tr>
|
|
838
|
-
${this.weekNumbers ? n`
|
|
839
|
-
<td class="sbb-calendar__table-header-cell-vertical">
|
|
840
|
-
${this.multiple ? n`
|
|
841
|
-
<sbb-calendar-weeknumber
|
|
842
|
-
.value=${t[r]}
|
|
843
|
-
@click=${() => {
|
|
844
|
-
let e = a.filter((e) => e.weekValue === t[r]);
|
|
845
|
-
this._selectMultipleDates(e);
|
|
846
|
-
}}
|
|
847
|
-
></sbb-calendar-weeknumber>
|
|
848
|
-
` : n`
|
|
849
|
-
<span class="sbb-screen-reader-only"
|
|
850
|
-
>${`${f[this._language.current]} ${t[r]}`}</span
|
|
851
|
-
>
|
|
852
|
-
<span aria-hidden="true">${t[r]}</span>
|
|
853
|
-
`}
|
|
854
|
-
</td>
|
|
855
|
-
` : i}
|
|
856
|
-
${this._createDayCells(e)}
|
|
857
|
-
</tr>
|
|
858
|
-
`;
|
|
859
|
-
})}
|
|
860
|
-
</tbody>
|
|
861
|
-
</table>
|
|
862
|
-
`;
|
|
863
|
-
}
|
|
864
|
-
_createDayTableVertical(e, t, r) {
|
|
865
|
-
let a = this._dateAdapter.getFirstWeekOffset(r ?? this._activeDate), o = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : r ? this._nextMonthWeeks : this._weeks).flat();
|
|
866
|
-
return n`
|
|
867
|
-
<table
|
|
868
|
-
class="sbb-calendar__table"
|
|
869
|
-
@focusout=${(e) => this._handleTableBlur(e.relatedTarget)}
|
|
870
|
-
@animationend=${(e) => this._tableAnimationEnd(e)}
|
|
871
|
-
>
|
|
872
|
-
${this.weekNumbers ? n`
|
|
873
|
-
<thead class="sbb-calendar__table-header">
|
|
874
|
-
<tr>
|
|
875
|
-
${r ? i : n`<th class="sbb-calendar__table-data"></th>`}
|
|
876
|
-
${t.map((e) => n`
|
|
877
|
-
<th class="sbb-calendar__table-header-cell">
|
|
878
|
-
${this.multiple ? n`
|
|
879
|
-
<sbb-calendar-weeknumber
|
|
880
|
-
.value=${e}
|
|
881
|
-
@click=${() => {
|
|
882
|
-
let t = o.filter((t) => t.weekValue === e);
|
|
883
|
-
this._selectMultipleDates(t);
|
|
884
|
-
}}
|
|
885
|
-
></sbb-calendar-weeknumber>
|
|
886
|
-
` : n`
|
|
887
|
-
<span class="sbb-screen-reader-only"
|
|
888
|
-
>${`${f[this._language.current]} ${e}`}</span
|
|
889
|
-
>
|
|
890
|
-
<span aria-hidden="true">${e}</span>
|
|
891
|
-
`}
|
|
892
|
-
</th>
|
|
893
|
-
`)}
|
|
894
|
-
</tr>
|
|
895
|
-
</thead>
|
|
896
|
-
` : i}
|
|
897
|
-
<tbody class="sbb-calendar__table-body">
|
|
898
|
-
${e.map((e, t) => {
|
|
899
|
-
let o = this._weekdays[t], s = this._wide ? [...e, ...this._nextMonthWeeks[t]] : e;
|
|
900
|
-
return n`
|
|
901
|
-
<tr>
|
|
902
|
-
${r ? i : n`
|
|
903
|
-
<td class="sbb-calendar__table-header-cell-vertical">
|
|
904
|
-
${this.multiple ? n`
|
|
905
|
-
<sbb-calendar-weekday
|
|
906
|
-
.value=${o}
|
|
907
|
-
@click=${() => this._selectMultipleDates(s)}
|
|
908
|
-
>
|
|
909
|
-
${o.narrow}
|
|
910
|
-
</sbb-calendar-weekday>
|
|
911
|
-
` : n`
|
|
912
|
-
<span class="sbb-screen-reader-only">${o.long}</span>
|
|
913
|
-
<span aria-hidden="true">${o.narrow}</span>
|
|
914
|
-
`}
|
|
915
|
-
</td>
|
|
916
|
-
`}
|
|
917
|
-
${t < a ? n`<td class="sbb-calendar__table-data"></td>` : i}
|
|
918
|
-
${this._createDayCells(e)}
|
|
919
|
-
</tr>
|
|
920
|
-
`;
|
|
921
|
-
})}
|
|
922
|
-
</tbody>
|
|
923
|
-
</table>
|
|
924
|
-
`;
|
|
925
|
-
}
|
|
926
|
-
_createDayCells(e) {
|
|
927
|
-
return e.map((e) => n`
|
|
928
|
-
<td class="sbb-calendar__table-data sbb-calendar__day-cell">
|
|
929
|
-
<slot name=${e.value}>
|
|
930
|
-
<sbb-calendar-day slot=${e.value}></sbb-calendar-day>
|
|
931
|
-
</slot>
|
|
932
|
-
</td>
|
|
933
|
-
`);
|
|
934
|
-
}
|
|
935
|
-
_renderMonthView() {
|
|
936
|
-
return n`
|
|
937
|
-
<div class="sbb-calendar__controls">
|
|
938
|
-
${this._getArrow("left", () => this._goToDifferentYear(-1), pe[this._language.current], this._previousYearDisabled())}
|
|
939
|
-
<div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
|
|
940
|
-
${this._getArrow("right", () => this._goToDifferentYear(1), ue[this._language.current], this._nextYearDisabled())}
|
|
941
|
-
</div>
|
|
942
|
-
<div class="sbb-calendar__table-overflow-break">
|
|
943
|
-
<div class="sbb-calendar__table-container sbb-calendar__table-month-view">
|
|
944
|
-
${this._createMonthTable(this._months, this._chosenYear)}
|
|
945
|
-
${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : i}
|
|
946
|
-
</div>
|
|
947
|
-
</div>
|
|
948
|
-
`;
|
|
949
|
-
}
|
|
950
|
-
_createLabelForMonthView() {
|
|
951
|
-
return n`<button
|
|
952
|
-
type="button"
|
|
953
|
-
id="sbb-calendar__month-selection"
|
|
954
|
-
class="sbb-calendar__controls-change-date"
|
|
955
|
-
aria-label=${`${d[this._language.current]} ${this._chosenYear}`}
|
|
956
|
-
@click=${() => this._resetCalendarViewAndEmitMonthChange(!0)}
|
|
957
|
-
>
|
|
958
|
-
${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : i}
|
|
959
|
-
<sbb-icon name="chevron-small-up-small"></sbb-icon>
|
|
960
|
-
</button>
|
|
961
|
-
<span class="sbb-screen-reader-only" role="status"> ${this._chosenYear} </span>`;
|
|
962
|
-
}
|
|
963
|
-
_createMonthTable(e, t) {
|
|
964
|
-
return n`
|
|
965
|
-
<table
|
|
966
|
-
class="sbb-calendar__table"
|
|
967
|
-
@animationend=${(e) => this._tableAnimationEnd(e)}
|
|
968
|
-
>
|
|
969
|
-
${this._wide ? n`<thead class="sbb-calendar__table-header" aria-hidden="true">
|
|
970
|
-
<tr>
|
|
971
|
-
<th class="sbb-calendar__table-header-cell" colspan=${h}>${t}</th>
|
|
972
|
-
</tr>
|
|
973
|
-
</thead>` : i}
|
|
974
|
-
<tbody class="sbb-calendar__table-body">
|
|
975
|
-
${e.map((e) => n`
|
|
976
|
-
<tr>
|
|
977
|
-
${e.map((e) => n`
|
|
978
|
-
<td class="sbb-calendar__table-data">
|
|
979
|
-
<sbb-calendar-month
|
|
980
|
-
.value="${t}-${e.value}"
|
|
981
|
-
@click=${() => this._onMonthSelection(e.monthValue, t)}
|
|
982
|
-
@keydown=${(e) => this._handleKeyboardEvent(e)}
|
|
983
|
-
>
|
|
984
|
-
</sbb-calendar-month>
|
|
985
|
-
</td>
|
|
986
|
-
`)}
|
|
987
|
-
</tr>
|
|
988
|
-
`)}
|
|
989
|
-
</tbody>
|
|
990
|
-
</table>
|
|
991
|
-
`;
|
|
992
|
-
}
|
|
993
|
-
_onMonthSelection(e, t) {
|
|
994
|
-
this._chosenMonth = e, this._nextCalendarView = "day", this._init(this._dateAdapter.createDate(t, this._chosenMonth, this._dateAdapter.getDate(this._activeDate))), this._startTableTransition(), this._emitMonthChange();
|
|
995
|
-
}
|
|
996
|
-
_renderYearView() {
|
|
997
|
-
return n`
|
|
998
|
-
<div class="sbb-calendar__controls">
|
|
999
|
-
${this._getArrow("left", () => this._goToDifferentYearRange(-24), me(_)[this._language.current], this._previousYearRangeDisabled())}
|
|
1000
|
-
<div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
|
|
1001
|
-
${this._getArrow("right", () => this._goToDifferentYearRange(_), de(_)[this._language.current], this._nextYearRangeDisabled())}
|
|
1002
|
-
</div>
|
|
1003
|
-
<div class="sbb-calendar__table-overflow-break">
|
|
1004
|
-
<div class="sbb-calendar__table-container sbb-calendar__table-year-view">
|
|
1005
|
-
${this._createYearTable(this._years)}
|
|
1006
|
-
${this._wide ? this._createYearTable(this._nextMonthYears, !0) : i}
|
|
1007
|
-
</div>
|
|
1008
|
-
</div>
|
|
1009
|
-
`;
|
|
1010
|
-
}
|
|
1011
|
-
_getArrow(e, t, r, i) {
|
|
1012
|
-
return n`<sbb-secondary-button
|
|
1013
|
-
size="m"
|
|
1014
|
-
icon-name="chevron-small-${e}-small"
|
|
1015
|
-
aria-label=${r}
|
|
1016
|
-
@click=${t}
|
|
1017
|
-
?disabled=${i}
|
|
1018
|
-
id="sbb-calendar__controls-${e === "left" ? "previous" : "next"}"
|
|
1019
|
-
></sbb-secondary-button>`;
|
|
1020
|
-
}
|
|
1021
|
-
_createLabelForYearView() {
|
|
1022
|
-
let e = this._years.flat()[0], t = (this._wide ? this._nextMonthYears : this._years).flat(), r = `${e} - ${t[t.length - 1]}`;
|
|
1023
|
-
return n`
|
|
1024
|
-
<button
|
|
1025
|
-
type="button"
|
|
1026
|
-
id="sbb-calendar__year-selection"
|
|
1027
|
-
class="sbb-calendar__controls-change-date"
|
|
1028
|
-
aria-label="${d[this._language.current]} ${r}"
|
|
1029
|
-
@click=${() => this._resetCalendarViewAndEmitMonthChange(!0)}
|
|
1030
|
-
>
|
|
1031
|
-
${r}
|
|
1032
|
-
<sbb-icon name="chevron-small-up-small"></sbb-icon>
|
|
1033
|
-
</button>
|
|
1034
|
-
<span class="sbb-screen-reader-only" role="status"> ${r} </span>
|
|
1035
|
-
`;
|
|
1036
|
-
}
|
|
1037
|
-
_createYearTable(e, t = !1) {
|
|
1038
|
-
return n` <table
|
|
1039
|
-
class="sbb-calendar__table"
|
|
1040
|
-
@animationend=${(e) => this._tableAnimationEnd(e)}
|
|
1041
|
-
>
|
|
1042
|
-
<tbody class="sbb-calendar__table-body">
|
|
1043
|
-
${e.map((e) => n` <tr>
|
|
1044
|
-
${e.map((e) => n`
|
|
1045
|
-
<td class="sbb-calendar__table-data">
|
|
1046
|
-
<sbb-calendar-year
|
|
1047
|
-
.value=${String(e)}
|
|
1048
|
-
@keydown=${(e) => this._handleKeyboardEvent(e)}
|
|
1049
|
-
@click=${() => this._onYearSelection(e, t)}
|
|
1050
|
-
>
|
|
1051
|
-
</sbb-calendar-year>
|
|
1052
|
-
</td>
|
|
1053
|
-
`)}
|
|
1054
|
-
</tr>`)}
|
|
1055
|
-
</tbody>
|
|
1056
|
-
</table>`;
|
|
1057
|
-
}
|
|
1058
|
-
_onYearSelection(e, t) {
|
|
1059
|
-
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();
|
|
1060
|
-
}
|
|
1061
|
-
_getView() {
|
|
1062
|
-
if (r || this.hydrationRequired) return n`${i}`;
|
|
1063
|
-
switch (this._calendarView) {
|
|
1064
|
-
case "year": return this._renderYearView();
|
|
1065
|
-
case "month": return this._renderMonthView();
|
|
1066
|
-
default: return this._renderDayView();
|
|
1067
|
-
}
|
|
1068
|
-
}
|
|
1069
|
-
_tableAnimationEnd(e) {
|
|
1070
|
-
let t = e.target;
|
|
1071
|
-
e.animationName === "hide" ? (t.classList.remove("sbb-calendar__table-hide"), this._containingFocus && (this._resetFocus = !0), this._calendarView = this._nextCalendarView) : e.animationName === "show" && this.internals.states.delete("transition");
|
|
1072
|
-
}
|
|
1073
|
-
_startTableTransition() {
|
|
1074
|
-
this.internals.states.add("transition"), this.shadowRoot?.querySelectorAll("table")?.forEach((e) => e.classList.toggle("sbb-calendar__table-hide"));
|
|
1075
|
-
}
|
|
1076
|
-
render() {
|
|
1077
|
-
return n`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
|
|
1078
|
-
}
|
|
1079
|
-
};
|
|
1080
|
-
})();
|
|
1081
|
-
//#endregion
|
|
1082
|
-
export { y as n, v as r, b as t };
|