@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.
Files changed (45) hide show
  1. package/calendar/_calendar.global.scss +25 -26
  2. package/calendar/calendar/calendar.component.js +1 -1
  3. package/calendar/calendar-day/calendar-day.component.js +1 -1
  4. package/calendar/calendar-month/calendar-month.component.js +1 -1
  5. package/calendar/calendar-year/calendar-year.component.js +1 -1
  6. package/calendar/common/calendar-cell-base-element.js +1 -1
  7. package/calendar-cell-base-element-DHCKK3bU.js +23 -0
  8. package/{calendar-day.component-Caf2w9lS.js → calendar-day.component-DrMWf6-w.js} +2 -2
  9. package/calendar.component-BM4L9oyb.js +987 -0
  10. package/calendar.js +3 -3
  11. package/calendar.pure.js +3 -3
  12. package/core/i18n/i18n.js +4 -4
  13. package/core/styles/_theme.scss +1 -0
  14. package/custom-elements.json +401 -233
  15. package/datepicker/datepicker/datepicker.component.js +45 -27
  16. package/development/calendar/calendar/calendar.component.d.ts +27 -42
  17. package/development/calendar/calendar/calendar.component.d.ts.map +1 -1
  18. package/development/calendar/calendar/calendar.component.js +1 -1
  19. package/development/calendar/calendar-day/calendar-day.component.js +1 -1
  20. package/development/calendar/calendar-month/calendar-month.component.js +2 -2
  21. package/development/calendar/calendar-year/calendar-year.component.js +2 -2
  22. package/development/calendar/common/calendar-cell-base-element.js +1 -1
  23. package/development/calendar-cell-base-element-D9XadTz1.js +38 -0
  24. package/development/calendar-day.component-Zky9Z-Fq.js +139 -0
  25. package/development/calendar.component-C_Yc2PNV.js +1367 -0
  26. package/development/calendar.js +3 -3
  27. package/development/calendar.pure.js +3 -3
  28. package/development/core/decorators/id-reference.d.ts.map +1 -1
  29. package/development/core/decorators/id-reference.js +1 -1
  30. package/development/core/i18n/i18n.js +5 -5
  31. package/development/datepicker/datepicker/datepicker.component.d.ts +2 -0
  32. package/development/datepicker/datepicker/datepicker.component.d.ts.map +1 -1
  33. package/development/datepicker/datepicker/datepicker.component.js +37 -11
  34. package/lean-off-brand-theme.css +14 -22
  35. package/lean-safety-theme.css +14 -22
  36. package/lean-theme.css +14 -22
  37. package/off-brand-theme.css +14 -22
  38. package/package.json +2 -2
  39. package/safety-theme.css +14 -22
  40. package/standard-theme.css +14 -22
  41. package/calendar-cell-base-element-Dq7Ap5n-.js +0 -23
  42. package/calendar.component-DKKptbyy.js +0 -1082
  43. package/development/calendar-cell-base-element-D_CTwDn9.js +0 -38
  44. package/development/calendar-day.component-Bux4ezpg.js +0 -139
  45. 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 };