@m3e/web 2.0.5 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.js +773 -473
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +52 -58
- package/dist/all.min.js.map +1 -1
- package/dist/autocomplete.js +342 -69
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/chips.js +18 -4
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/core-a11y.js +3 -118
- package/dist/core-a11y.js.map +1 -1
- package/dist/core-a11y.min.js +13 -4
- package/dist/core-a11y.min.js.map +1 -1
- package/dist/core-anchoring.js +193 -1
- package/dist/core-anchoring.js.map +1 -1
- package/dist/core-anchoring.min.js +1 -1
- package/dist/core-anchoring.min.js.map +1 -1
- package/dist/core.js +119 -91
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +406 -326
- package/dist/custom-elements.json +4321 -3297
- package/dist/html-custom-data.json +169 -94
- package/dist/loading-indicator.js +1 -0
- package/dist/loading-indicator.js.map +1 -1
- package/dist/loading-indicator.min.js +1 -1
- package/dist/loading-indicator.min.js.map +1 -1
- package/dist/menu.js +1 -1
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/option.js +94 -121
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/progress-indicator.js +2 -0
- package/dist/progress-indicator.js.map +1 -1
- package/dist/progress-indicator.min.js +2 -2
- package/dist/progress-indicator.min.js.map +1 -1
- package/dist/select.js +59 -23
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts +71 -2
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/autocomplete/AutocompleteFilterMode.d.ts +3 -0
- package/dist/src/autocomplete/AutocompleteFilterMode.d.ts.map +1 -0
- package/dist/src/autocomplete/QueryEventDetail.d.ts +12 -0
- package/dist/src/autocomplete/QueryEventDetail.d.ts.map +1 -0
- package/dist/src/autocomplete/index.d.ts +2 -0
- package/dist/src/autocomplete/index.d.ts.map +1 -1
- package/dist/src/chips/ChipElement.d.ts +2 -0
- package/dist/src/chips/ChipElement.d.ts.map +1 -1
- package/dist/src/chips/InputChipSetChangeEventDetail.d.ts +13 -0
- package/dist/src/chips/InputChipSetChangeEventDetail.d.ts.map +1 -0
- package/dist/src/chips/InputChipSetElement.d.ts +10 -0
- package/dist/src/chips/InputChipSetElement.d.ts.map +1 -1
- package/dist/src/chips/index.d.ts +1 -0
- package/dist/src/chips/index.d.ts.map +1 -1
- package/dist/src/core/a11y/FocusTrapElement.d.ts +1 -1
- package/dist/src/core/a11y/list-key/ListKeyManager.d.ts.map +1 -1
- package/dist/src/core/a11y/list-key/RadioKeyManager.d.ts +1 -2
- package/dist/src/core/a11y/list-key/RadioKeyManager.d.ts.map +1 -1
- package/dist/src/core/a11y/list-key/SelectionManager.d.ts +1 -2
- package/dist/src/core/a11y/list-key/SelectionManager.d.ts.map +1 -1
- package/dist/src/core/a11y/list-key/Typeahead.d.ts.map +1 -1
- package/dist/src/core/anchoring/FloatingPanelElement.d.ts +74 -0
- package/dist/src/core/anchoring/FloatingPanelElement.d.ts.map +1 -0
- package/dist/src/core/anchoring/index.d.ts +1 -0
- package/dist/src/core/anchoring/index.d.ts.map +1 -1
- package/dist/src/core/shared/controllers/MutationController.d.ts.map +1 -1
- package/dist/src/core/shared/controllers/ResizeController.d.ts.map +1 -1
- package/dist/src/core/shared/mixins/AttachInternals.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/TextHighlightElement.d.ts +9 -2
- package/dist/src/core/shared/primitives/TextHighlightElement.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/TextHighlightMode.d.ts +3 -0
- package/dist/src/core/shared/primitives/TextHighlightMode.d.ts.map +1 -0
- package/dist/src/core/shared/primitives/index.d.ts +2 -1
- package/dist/src/core/shared/primitives/index.d.ts.map +1 -1
- package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts.map +1 -1
- package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
- package/dist/src/option/OptionElement.d.ts +21 -1
- package/dist/src/option/OptionElement.d.ts.map +1 -1
- package/dist/src/option/OptionPanelElement.d.ts +11 -34
- package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
- package/dist/src/option/OptionPanelState.d.ts +3 -0
- package/dist/src/option/OptionPanelState.d.ts.map +1 -0
- package/dist/src/option/index.d.ts +1 -0
- package/dist/src/option/index.d.ts.map +1 -1
- package/dist/src/progress-indicator/CircularProgressIndicatorElement.d.ts.map +1 -1
- package/dist/src/progress-indicator/LinearProgressIndicatorElement.d.ts.map +1 -1
- package/dist/src/select/SelectElement.d.ts +3 -2
- package/dist/src/select/SelectElement.d.ts.map +1 -1
- package/dist/src/toc/TocElement.d.ts.map +1 -1
- package/dist/toc.js +0 -1
- package/dist/toc.js.map +1 -1
- package/dist/toc.min.js +1 -1
- package/dist/toc.min.js.map +1 -1
- package/package.json +1 -1
- package/dist/datepicker.js +0 -2346
- package/dist/datepicker.js.map +0 -1
- package/dist/datepicker.min.js +0 -102
- package/dist/datepicker.min.js.map +0 -1
- package/dist/src/core/shared/decorators/component.d.ts +0 -19
- package/dist/src/core/shared/decorators/component.d.ts.map +0 -1
- package/dist/src/core/shared/decorators/element.d.ts +0 -19
- package/dist/src/core/shared/decorators/element.d.ts.map +0 -1
- package/dist/src/core/shared/utils/getState.d.ts +0 -15
- package/dist/src/core/shared/utils/getState.d.ts.map +0 -1
- package/dist/src/datepicker/CalendarElement.d.ts +0 -203
- package/dist/src/datepicker/CalendarElement.d.ts.map +0 -1
- package/dist/src/datepicker/CalendarView.d.ts +0 -3
- package/dist/src/datepicker/CalendarView.d.ts.map +0 -1
- package/dist/src/datepicker/CalendarViewElementBase.d.ts +0 -28
- package/dist/src/datepicker/CalendarViewElementBase.d.ts.map +0 -1
- package/dist/src/datepicker/DateAdapter.d.ts +0 -4
- package/dist/src/datepicker/DateAdapter.d.ts.map +0 -1
- package/dist/src/datepicker/DatepickerElement.d.ts +0 -180
- package/dist/src/datepicker/DatepickerElement.d.ts.map +0 -1
- package/dist/src/datepicker/DatepickerToggleElement.d.ts +0 -21
- package/dist/src/datepicker/DatepickerToggleElement.d.ts.map +0 -1
- package/dist/src/datepicker/DatepickerVariant.d.ts +0 -3
- package/dist/src/datepicker/DatepickerVariant.d.ts.map +0 -1
- package/dist/src/datepicker/MonthViewElement.d.ts +0 -35
- package/dist/src/datepicker/MonthViewElement.d.ts.map +0 -1
- package/dist/src/datepicker/MultiYearViewElement.d.ts +0 -27
- package/dist/src/datepicker/MultiYearViewElement.d.ts.map +0 -1
- package/dist/src/datepicker/YearViewElement.d.ts +0 -27
- package/dist/src/datepicker/YearViewElement.d.ts.map +0 -1
- package/dist/src/datepicker/index.d.ts +0 -10
- package/dist/src/datepicker/index.d.ts.map +0 -1
- package/dist/src/datepicker/utils.d.ts +0 -26
- package/dist/src/datepicker/utils.d.ts.map +0 -1
package/dist/datepicker.js
DELETED
|
@@ -1,2346 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
4
|
-
* See LICENSE file in the project root for full license text.
|
|
5
|
-
*/
|
|
6
|
-
import { css, LitElement, html, nothing, unsafeCSS } from 'lit';
|
|
7
|
-
import { DesignToken, focusWhenReady, prefersReducedMotion, Role, ScrollController, HtmlFor, ActionElementBase } from '@m3e/web/core';
|
|
8
|
-
import { M3eDirectionality } from '@m3e/web/core/bidi';
|
|
9
|
-
import { positionAnchor } from '@m3e/web/core/anchoring';
|
|
10
|
-
import { M3eBreakpointObserver, Breakpoint } from '@m3e/web/core/layout';
|
|
11
|
-
|
|
12
|
-
/******************************************************************************
|
|
13
|
-
Copyright (c) Microsoft Corporation.
|
|
14
|
-
|
|
15
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
16
|
-
purpose with or without fee is hereby granted.
|
|
17
|
-
|
|
18
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
19
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
20
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
21
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
22
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
23
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
24
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
25
|
-
***************************************************************************** */
|
|
26
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
27
|
-
|
|
28
|
-
function __decorate(decorators, target, key, desc) {
|
|
29
|
-
var c = arguments.length,
|
|
30
|
-
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
31
|
-
d;
|
|
32
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
33
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
34
|
-
}
|
|
35
|
-
function __classPrivateFieldGet(receiver, state, kind, f) {
|
|
36
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
37
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
38
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
39
|
-
}
|
|
40
|
-
function __classPrivateFieldSet(receiver, state, value, kind, f) {
|
|
41
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
42
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
43
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
44
|
-
return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
|
|
45
|
-
}
|
|
46
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
47
|
-
var e = new Error(message);
|
|
48
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* @license
|
|
53
|
-
* Copyright 2017 Google LLC
|
|
54
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
55
|
-
*/
|
|
56
|
-
const t$3 = t => (e, o) => {
|
|
57
|
-
void 0 !== o ? o.addInitializer(() => {
|
|
58
|
-
customElements.define(t, e);
|
|
59
|
-
}) : customElements.define(t, e);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* @license
|
|
64
|
-
* Copyright 2019 Google LLC
|
|
65
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
66
|
-
*/
|
|
67
|
-
const t$2 = globalThis,
|
|
68
|
-
e$6 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
|
|
69
|
-
s$1 = Symbol(),
|
|
70
|
-
o$4 = new WeakMap();
|
|
71
|
-
let n$3 = class n {
|
|
72
|
-
constructor(t, e, o) {
|
|
73
|
-
if (this._$cssResult$ = true, o !== s$1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
74
|
-
this.cssText = t, this.t = e;
|
|
75
|
-
}
|
|
76
|
-
get styleSheet() {
|
|
77
|
-
let t = this.o;
|
|
78
|
-
const s = this.t;
|
|
79
|
-
if (e$6 && void 0 === t) {
|
|
80
|
-
const e = void 0 !== s && 1 === s.length;
|
|
81
|
-
e && (t = o$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$4.set(s, t));
|
|
82
|
-
}
|
|
83
|
-
return t;
|
|
84
|
-
}
|
|
85
|
-
toString() {
|
|
86
|
-
return this.cssText;
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$1),
|
|
90
|
-
S$1 = (s, o) => {
|
|
91
|
-
if (e$6) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
|
|
92
|
-
const o = document.createElement("style"),
|
|
93
|
-
n = t$2.litNonce;
|
|
94
|
-
void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
c$2 = e$6 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
|
|
98
|
-
let e = "";
|
|
99
|
-
for (const s of t.cssRules) e += s.cssText;
|
|
100
|
-
return r$4(e);
|
|
101
|
-
})(t) : t;
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* @license
|
|
105
|
-
* Copyright 2017 Google LLC
|
|
106
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
107
|
-
*/
|
|
108
|
-
const {
|
|
109
|
-
is: i$2,
|
|
110
|
-
defineProperty: e$5,
|
|
111
|
-
getOwnPropertyDescriptor: h$1,
|
|
112
|
-
getOwnPropertyNames: r$3,
|
|
113
|
-
getOwnPropertySymbols: o$3,
|
|
114
|
-
getPrototypeOf: n$2
|
|
115
|
-
} = Object,
|
|
116
|
-
a$1 = globalThis,
|
|
117
|
-
c$1 = a$1.trustedTypes,
|
|
118
|
-
l$1 = c$1 ? c$1.emptyScript : "",
|
|
119
|
-
p$1 = a$1.reactiveElementPolyfillSupport,
|
|
120
|
-
d$1 = (t, s) => t,
|
|
121
|
-
u$1 = {
|
|
122
|
-
toAttribute(t, s) {
|
|
123
|
-
switch (s) {
|
|
124
|
-
case Boolean:
|
|
125
|
-
t = t ? l$1 : null;
|
|
126
|
-
break;
|
|
127
|
-
case Object:
|
|
128
|
-
case Array:
|
|
129
|
-
t = null == t ? t : JSON.stringify(t);
|
|
130
|
-
}
|
|
131
|
-
return t;
|
|
132
|
-
},
|
|
133
|
-
fromAttribute(t, s) {
|
|
134
|
-
let i = t;
|
|
135
|
-
switch (s) {
|
|
136
|
-
case Boolean:
|
|
137
|
-
i = null !== t;
|
|
138
|
-
break;
|
|
139
|
-
case Number:
|
|
140
|
-
i = null === t ? null : Number(t);
|
|
141
|
-
break;
|
|
142
|
-
case Object:
|
|
143
|
-
case Array:
|
|
144
|
-
try {
|
|
145
|
-
i = JSON.parse(t);
|
|
146
|
-
} catch (t) {
|
|
147
|
-
i = null;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
return i;
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
f$1 = (t, s) => !i$2(t, s),
|
|
154
|
-
b = {
|
|
155
|
-
attribute: true,
|
|
156
|
-
type: String,
|
|
157
|
-
converter: u$1,
|
|
158
|
-
reflect: false,
|
|
159
|
-
useDefault: false,
|
|
160
|
-
hasChanged: f$1
|
|
161
|
-
};
|
|
162
|
-
Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= new WeakMap();
|
|
163
|
-
class y extends HTMLElement {
|
|
164
|
-
static addInitializer(t) {
|
|
165
|
-
this._$Ei(), (this.l ??= []).push(t);
|
|
166
|
-
}
|
|
167
|
-
static get observedAttributes() {
|
|
168
|
-
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
169
|
-
}
|
|
170
|
-
static createProperty(t, s = b) {
|
|
171
|
-
if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
|
|
172
|
-
const i = Symbol(),
|
|
173
|
-
h = this.getPropertyDescriptor(t, i, s);
|
|
174
|
-
void 0 !== h && e$5(this.prototype, t, h);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
static getPropertyDescriptor(t, s, i) {
|
|
178
|
-
const {
|
|
179
|
-
get: e,
|
|
180
|
-
set: r
|
|
181
|
-
} = h$1(this.prototype, t) ?? {
|
|
182
|
-
get() {
|
|
183
|
-
return this[s];
|
|
184
|
-
},
|
|
185
|
-
set(t) {
|
|
186
|
-
this[s] = t;
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
return {
|
|
190
|
-
get: e,
|
|
191
|
-
set(s) {
|
|
192
|
-
const h = e?.call(this);
|
|
193
|
-
r?.call(this, s), this.requestUpdate(t, h, i);
|
|
194
|
-
},
|
|
195
|
-
configurable: true,
|
|
196
|
-
enumerable: true
|
|
197
|
-
};
|
|
198
|
-
}
|
|
199
|
-
static getPropertyOptions(t) {
|
|
200
|
-
return this.elementProperties.get(t) ?? b;
|
|
201
|
-
}
|
|
202
|
-
static _$Ei() {
|
|
203
|
-
if (this.hasOwnProperty(d$1("elementProperties"))) return;
|
|
204
|
-
const t = n$2(this);
|
|
205
|
-
t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
|
|
206
|
-
}
|
|
207
|
-
static finalize() {
|
|
208
|
-
if (this.hasOwnProperty(d$1("finalized"))) return;
|
|
209
|
-
if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
|
|
210
|
-
const t = this.properties,
|
|
211
|
-
s = [...r$3(t), ...o$3(t)];
|
|
212
|
-
for (const i of s) this.createProperty(i, t[i]);
|
|
213
|
-
}
|
|
214
|
-
const t = this[Symbol.metadata];
|
|
215
|
-
if (null !== t) {
|
|
216
|
-
const s = litPropertyMetadata.get(t);
|
|
217
|
-
if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
|
|
218
|
-
}
|
|
219
|
-
this._$Eh = new Map();
|
|
220
|
-
for (const [t, s] of this.elementProperties) {
|
|
221
|
-
const i = this._$Eu(t, s);
|
|
222
|
-
void 0 !== i && this._$Eh.set(i, t);
|
|
223
|
-
}
|
|
224
|
-
this.elementStyles = this.finalizeStyles(this.styles);
|
|
225
|
-
}
|
|
226
|
-
static finalizeStyles(s) {
|
|
227
|
-
const i = [];
|
|
228
|
-
if (Array.isArray(s)) {
|
|
229
|
-
const e = new Set(s.flat(1 / 0).reverse());
|
|
230
|
-
for (const s of e) i.unshift(c$2(s));
|
|
231
|
-
} else void 0 !== s && i.push(c$2(s));
|
|
232
|
-
return i;
|
|
233
|
-
}
|
|
234
|
-
static _$Eu(t, s) {
|
|
235
|
-
const i = s.attribute;
|
|
236
|
-
return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
|
|
237
|
-
}
|
|
238
|
-
constructor() {
|
|
239
|
-
super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
|
|
240
|
-
}
|
|
241
|
-
_$Ev() {
|
|
242
|
-
this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
|
|
243
|
-
}
|
|
244
|
-
addController(t) {
|
|
245
|
-
(this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
|
|
246
|
-
}
|
|
247
|
-
removeController(t) {
|
|
248
|
-
this._$EO?.delete(t);
|
|
249
|
-
}
|
|
250
|
-
_$E_() {
|
|
251
|
-
const t = new Map(),
|
|
252
|
-
s = this.constructor.elementProperties;
|
|
253
|
-
for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
|
|
254
|
-
t.size > 0 && (this._$Ep = t);
|
|
255
|
-
}
|
|
256
|
-
createRenderRoot() {
|
|
257
|
-
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
258
|
-
return S$1(t, this.constructor.elementStyles), t;
|
|
259
|
-
}
|
|
260
|
-
connectedCallback() {
|
|
261
|
-
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
|
|
262
|
-
}
|
|
263
|
-
enableUpdating(t) {}
|
|
264
|
-
disconnectedCallback() {
|
|
265
|
-
this._$EO?.forEach(t => t.hostDisconnected?.());
|
|
266
|
-
}
|
|
267
|
-
attributeChangedCallback(t, s, i) {
|
|
268
|
-
this._$AK(t, i);
|
|
269
|
-
}
|
|
270
|
-
_$ET(t, s) {
|
|
271
|
-
const i = this.constructor.elementProperties.get(t),
|
|
272
|
-
e = this.constructor._$Eu(t, i);
|
|
273
|
-
if (void 0 !== e && true === i.reflect) {
|
|
274
|
-
const h = (void 0 !== i.converter?.toAttribute ? i.converter : u$1).toAttribute(s, i.type);
|
|
275
|
-
this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
_$AK(t, s) {
|
|
279
|
-
const i = this.constructor,
|
|
280
|
-
e = i._$Eh.get(t);
|
|
281
|
-
if (void 0 !== e && this._$Em !== e) {
|
|
282
|
-
const t = i.getPropertyOptions(e),
|
|
283
|
-
h = "function" == typeof t.converter ? {
|
|
284
|
-
fromAttribute: t.converter
|
|
285
|
-
} : void 0 !== t.converter?.fromAttribute ? t.converter : u$1;
|
|
286
|
-
this._$Em = e;
|
|
287
|
-
const r = h.fromAttribute(s, t.type);
|
|
288
|
-
this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
requestUpdate(t, s, i) {
|
|
292
|
-
if (void 0 !== t) {
|
|
293
|
-
const e = this.constructor,
|
|
294
|
-
h = this[t];
|
|
295
|
-
if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f$1)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
|
|
296
|
-
this.C(t, s, i);
|
|
297
|
-
}
|
|
298
|
-
false === this.isUpdatePending && (this._$ES = this._$EP());
|
|
299
|
-
}
|
|
300
|
-
C(t, s, {
|
|
301
|
-
useDefault: i,
|
|
302
|
-
reflect: e,
|
|
303
|
-
wrapped: h
|
|
304
|
-
}, r) {
|
|
305
|
-
i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
|
|
306
|
-
}
|
|
307
|
-
async _$EP() {
|
|
308
|
-
this.isUpdatePending = true;
|
|
309
|
-
try {
|
|
310
|
-
await this._$ES;
|
|
311
|
-
} catch (t) {
|
|
312
|
-
Promise.reject(t);
|
|
313
|
-
}
|
|
314
|
-
const t = this.scheduleUpdate();
|
|
315
|
-
return null != t && (await t), !this.isUpdatePending;
|
|
316
|
-
}
|
|
317
|
-
scheduleUpdate() {
|
|
318
|
-
return this.performUpdate();
|
|
319
|
-
}
|
|
320
|
-
performUpdate() {
|
|
321
|
-
if (!this.isUpdatePending) return;
|
|
322
|
-
if (!this.hasUpdated) {
|
|
323
|
-
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
|
|
324
|
-
for (const [t, s] of this._$Ep) this[t] = s;
|
|
325
|
-
this._$Ep = void 0;
|
|
326
|
-
}
|
|
327
|
-
const t = this.constructor.elementProperties;
|
|
328
|
-
if (t.size > 0) for (const [s, i] of t) {
|
|
329
|
-
const {
|
|
330
|
-
wrapped: t
|
|
331
|
-
} = i,
|
|
332
|
-
e = this[s];
|
|
333
|
-
true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
let t = false;
|
|
337
|
-
const s = this._$AL;
|
|
338
|
-
try {
|
|
339
|
-
t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
|
|
340
|
-
} catch (s) {
|
|
341
|
-
throw t = false, this._$EM(), s;
|
|
342
|
-
}
|
|
343
|
-
t && this._$AE(s);
|
|
344
|
-
}
|
|
345
|
-
willUpdate(t) {}
|
|
346
|
-
_$AE(t) {
|
|
347
|
-
this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
|
|
348
|
-
}
|
|
349
|
-
_$EM() {
|
|
350
|
-
this._$AL = new Map(), this.isUpdatePending = false;
|
|
351
|
-
}
|
|
352
|
-
get updateComplete() {
|
|
353
|
-
return this.getUpdateComplete();
|
|
354
|
-
}
|
|
355
|
-
getUpdateComplete() {
|
|
356
|
-
return this._$ES;
|
|
357
|
-
}
|
|
358
|
-
shouldUpdate(t) {
|
|
359
|
-
return true;
|
|
360
|
-
}
|
|
361
|
-
update(t) {
|
|
362
|
-
this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
|
|
363
|
-
}
|
|
364
|
-
updated(t) {}
|
|
365
|
-
firstUpdated(t) {}
|
|
366
|
-
}
|
|
367
|
-
y.elementStyles = [], y.shadowRootOptions = {
|
|
368
|
-
mode: "open"
|
|
369
|
-
}, y[d$1("elementProperties")] = new Map(), y[d$1("finalized")] = new Map(), p$1?.({
|
|
370
|
-
ReactiveElement: y
|
|
371
|
-
}), (a$1.reactiveElementVersions ??= []).push("2.1.1");
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* @license
|
|
375
|
-
* Copyright 2017 Google LLC
|
|
376
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
377
|
-
*/
|
|
378
|
-
const o$2 = {
|
|
379
|
-
attribute: true,
|
|
380
|
-
type: String,
|
|
381
|
-
converter: u$1,
|
|
382
|
-
reflect: false,
|
|
383
|
-
hasChanged: f$1
|
|
384
|
-
},
|
|
385
|
-
r$2 = (t = o$2, e, r) => {
|
|
386
|
-
const {
|
|
387
|
-
kind: n,
|
|
388
|
-
metadata: i
|
|
389
|
-
} = r;
|
|
390
|
-
let s = globalThis.litPropertyMetadata.get(i);
|
|
391
|
-
if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
|
|
392
|
-
const {
|
|
393
|
-
name: o
|
|
394
|
-
} = r;
|
|
395
|
-
return {
|
|
396
|
-
set(r) {
|
|
397
|
-
const n = e.get.call(this);
|
|
398
|
-
e.set.call(this, r), this.requestUpdate(o, n, t);
|
|
399
|
-
},
|
|
400
|
-
init(e) {
|
|
401
|
-
return void 0 !== e && this.C(o, void 0, t, e), e;
|
|
402
|
-
}
|
|
403
|
-
};
|
|
404
|
-
}
|
|
405
|
-
if ("setter" === n) {
|
|
406
|
-
const {
|
|
407
|
-
name: o
|
|
408
|
-
} = r;
|
|
409
|
-
return function (r) {
|
|
410
|
-
const n = this[o];
|
|
411
|
-
e.call(this, r), this.requestUpdate(o, n, t);
|
|
412
|
-
};
|
|
413
|
-
}
|
|
414
|
-
throw Error("Unsupported decorator location: " + n);
|
|
415
|
-
};
|
|
416
|
-
function n$1(t) {
|
|
417
|
-
return (e, o) => "object" == typeof o ? r$2(t, e, o) : ((t, e, o) => {
|
|
418
|
-
const r = e.hasOwnProperty(o);
|
|
419
|
-
return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
|
|
420
|
-
})(t, e, o);
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
/**
|
|
424
|
-
* @license
|
|
425
|
-
* Copyright 2017 Google LLC
|
|
426
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
427
|
-
*/
|
|
428
|
-
function r$1(r) {
|
|
429
|
-
return n$1({
|
|
430
|
-
...r,
|
|
431
|
-
state: true,
|
|
432
|
-
attribute: false
|
|
433
|
-
});
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* @license
|
|
438
|
-
* Copyright 2017 Google LLC
|
|
439
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
440
|
-
*/
|
|
441
|
-
const e$4 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
|
|
442
|
-
|
|
443
|
-
/**
|
|
444
|
-
* @license
|
|
445
|
-
* Copyright 2017 Google LLC
|
|
446
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
447
|
-
*/
|
|
448
|
-
function e$3(e, r) {
|
|
449
|
-
return (n, s, i) => {
|
|
450
|
-
const o = t => t.renderRoot?.querySelector(e) ?? null;
|
|
451
|
-
return e$4(n, s, {
|
|
452
|
-
get() {
|
|
453
|
-
return o(this);
|
|
454
|
-
}
|
|
455
|
-
});
|
|
456
|
-
};
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
/**
|
|
460
|
-
* @license
|
|
461
|
-
* Copyright 2017 Google LLC
|
|
462
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
463
|
-
*/
|
|
464
|
-
const t$1 = globalThis,
|
|
465
|
-
i$1 = t$1.trustedTypes,
|
|
466
|
-
s = i$1 ? i$1.createPolicy("lit-html", {
|
|
467
|
-
createHTML: t => t
|
|
468
|
-
}) : void 0,
|
|
469
|
-
e$2 = "$lit$",
|
|
470
|
-
h = `lit$${Math.random().toFixed(9).slice(2)}$`,
|
|
471
|
-
o$1 = "?" + h,
|
|
472
|
-
n = `<${o$1}>`,
|
|
473
|
-
r = document,
|
|
474
|
-
l = () => r.createComment(""),
|
|
475
|
-
c = t => null === t || "object" != typeof t && "function" != typeof t,
|
|
476
|
-
a = Array.isArray,
|
|
477
|
-
u = t => a(t) || "function" == typeof t?.[Symbol.iterator],
|
|
478
|
-
d = "[ \t\n\f\r]",
|
|
479
|
-
f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
|
|
480
|
-
v = /-->/g,
|
|
481
|
-
_ = />/g,
|
|
482
|
-
m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
|
|
483
|
-
p = /'/g,
|
|
484
|
-
g = /"/g,
|
|
485
|
-
$ = /^(?:script|style|textarea|title)$/i,
|
|
486
|
-
T = Symbol.for("lit-noChange"),
|
|
487
|
-
E = Symbol.for("lit-nothing"),
|
|
488
|
-
A = new WeakMap(),
|
|
489
|
-
C = r.createTreeWalker(r, 129);
|
|
490
|
-
function P(t, i) {
|
|
491
|
-
if (!a(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
492
|
-
return void 0 !== s ? s.createHTML(i) : i;
|
|
493
|
-
}
|
|
494
|
-
const V = (t, i) => {
|
|
495
|
-
const s = t.length - 1,
|
|
496
|
-
o = [];
|
|
497
|
-
let r,
|
|
498
|
-
l = 2 === i ? "<svg>" : 3 === i ? "<math>" : "",
|
|
499
|
-
c = f;
|
|
500
|
-
for (let i = 0; i < s; i++) {
|
|
501
|
-
const s = t[i];
|
|
502
|
-
let a,
|
|
503
|
-
u,
|
|
504
|
-
d = -1,
|
|
505
|
-
y = 0;
|
|
506
|
-
for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m) : void 0 !== u[3] && (c = m) : c === m ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m : '"' === u[3] ? g : p) : c === g || c === p ? c = m : c === v || c === _ ? c = f : (c = m, r = void 0);
|
|
507
|
-
const x = c === m && t[i + 1].startsWith("/>") ? " " : "";
|
|
508
|
-
l += c === f ? s + n : d >= 0 ? (o.push(a), s.slice(0, d) + e$2 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
|
|
509
|
-
}
|
|
510
|
-
return [P(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")), o];
|
|
511
|
-
};
|
|
512
|
-
class N {
|
|
513
|
-
constructor({
|
|
514
|
-
strings: t,
|
|
515
|
-
_$litType$: s
|
|
516
|
-
}, n) {
|
|
517
|
-
let r;
|
|
518
|
-
this.parts = [];
|
|
519
|
-
let c = 0,
|
|
520
|
-
a = 0;
|
|
521
|
-
const u = t.length - 1,
|
|
522
|
-
d = this.parts,
|
|
523
|
-
[f, v] = V(t, s);
|
|
524
|
-
if (this.el = N.createElement(f, n), C.currentNode = this.el.content, 2 === s || 3 === s) {
|
|
525
|
-
const t = this.el.content.firstChild;
|
|
526
|
-
t.replaceWith(...t.childNodes);
|
|
527
|
-
}
|
|
528
|
-
for (; null !== (r = C.nextNode()) && d.length < u;) {
|
|
529
|
-
if (1 === r.nodeType) {
|
|
530
|
-
if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$2)) {
|
|
531
|
-
const i = v[a++],
|
|
532
|
-
s = r.getAttribute(t).split(h),
|
|
533
|
-
e = /([.?@])?(.*)/.exec(i);
|
|
534
|
-
d.push({
|
|
535
|
-
type: 1,
|
|
536
|
-
index: c,
|
|
537
|
-
name: e[2],
|
|
538
|
-
strings: s,
|
|
539
|
-
ctor: "." === e[1] ? H : "?" === e[1] ? I : "@" === e[1] ? L : k
|
|
540
|
-
}), r.removeAttribute(t);
|
|
541
|
-
} else t.startsWith(h) && (d.push({
|
|
542
|
-
type: 6,
|
|
543
|
-
index: c
|
|
544
|
-
}), r.removeAttribute(t));
|
|
545
|
-
if ($.test(r.tagName)) {
|
|
546
|
-
const t = r.textContent.split(h),
|
|
547
|
-
s = t.length - 1;
|
|
548
|
-
if (s > 0) {
|
|
549
|
-
r.textContent = i$1 ? i$1.emptyScript : "";
|
|
550
|
-
for (let i = 0; i < s; i++) r.append(t[i], l()), C.nextNode(), d.push({
|
|
551
|
-
type: 2,
|
|
552
|
-
index: ++c
|
|
553
|
-
});
|
|
554
|
-
r.append(t[s], l());
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
} else if (8 === r.nodeType) if (r.data === o$1) d.push({
|
|
558
|
-
type: 2,
|
|
559
|
-
index: c
|
|
560
|
-
});else {
|
|
561
|
-
let t = -1;
|
|
562
|
-
for (; -1 !== (t = r.data.indexOf(h, t + 1));) d.push({
|
|
563
|
-
type: 7,
|
|
564
|
-
index: c
|
|
565
|
-
}), t += h.length - 1;
|
|
566
|
-
}
|
|
567
|
-
c++;
|
|
568
|
-
}
|
|
569
|
-
}
|
|
570
|
-
static createElement(t, i) {
|
|
571
|
-
const s = r.createElement("template");
|
|
572
|
-
return s.innerHTML = t, s;
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
function S(t, i, s = t, e) {
|
|
576
|
-
if (i === T) return i;
|
|
577
|
-
let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
|
|
578
|
-
const o = c(i) ? void 0 : i._$litDirective$;
|
|
579
|
-
return h?.constructor !== o && (h?._$AO?.(false), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = S(t, h._$AS(t, i.values), h, e)), i;
|
|
580
|
-
}
|
|
581
|
-
class M {
|
|
582
|
-
constructor(t, i) {
|
|
583
|
-
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
|
|
584
|
-
}
|
|
585
|
-
get parentNode() {
|
|
586
|
-
return this._$AM.parentNode;
|
|
587
|
-
}
|
|
588
|
-
get _$AU() {
|
|
589
|
-
return this._$AM._$AU;
|
|
590
|
-
}
|
|
591
|
-
u(t) {
|
|
592
|
-
const {
|
|
593
|
-
el: {
|
|
594
|
-
content: i
|
|
595
|
-
},
|
|
596
|
-
parts: s
|
|
597
|
-
} = this._$AD,
|
|
598
|
-
e = (t?.creationScope ?? r).importNode(i, true);
|
|
599
|
-
C.currentNode = e;
|
|
600
|
-
let h = C.nextNode(),
|
|
601
|
-
o = 0,
|
|
602
|
-
n = 0,
|
|
603
|
-
l = s[0];
|
|
604
|
-
for (; void 0 !== l;) {
|
|
605
|
-
if (o === l.index) {
|
|
606
|
-
let i;
|
|
607
|
-
2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z(h, this, t)), this._$AV.push(i), l = s[++n];
|
|
608
|
-
}
|
|
609
|
-
o !== l?.index && (h = C.nextNode(), o++);
|
|
610
|
-
}
|
|
611
|
-
return C.currentNode = r, e;
|
|
612
|
-
}
|
|
613
|
-
p(t) {
|
|
614
|
-
let i = 0;
|
|
615
|
-
for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
|
|
616
|
-
}
|
|
617
|
-
}
|
|
618
|
-
class R {
|
|
619
|
-
get _$AU() {
|
|
620
|
-
return this._$AM?._$AU ?? this._$Cv;
|
|
621
|
-
}
|
|
622
|
-
constructor(t, i, s, e) {
|
|
623
|
-
this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? true;
|
|
624
|
-
}
|
|
625
|
-
get parentNode() {
|
|
626
|
-
let t = this._$AA.parentNode;
|
|
627
|
-
const i = this._$AM;
|
|
628
|
-
return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
|
|
629
|
-
}
|
|
630
|
-
get startNode() {
|
|
631
|
-
return this._$AA;
|
|
632
|
-
}
|
|
633
|
-
get endNode() {
|
|
634
|
-
return this._$AB;
|
|
635
|
-
}
|
|
636
|
-
_$AI(t, i = this) {
|
|
637
|
-
t = S(this, t, i), c(t) ? t === E || null == t || "" === t ? (this._$AH !== E && this._$AR(), this._$AH = E) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : u(t) ? this.k(t) : this._(t);
|
|
638
|
-
}
|
|
639
|
-
O(t) {
|
|
640
|
-
return this._$AA.parentNode.insertBefore(t, this._$AB);
|
|
641
|
-
}
|
|
642
|
-
T(t) {
|
|
643
|
-
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
|
|
644
|
-
}
|
|
645
|
-
_(t) {
|
|
646
|
-
this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t : this.T(r.createTextNode(t)), this._$AH = t;
|
|
647
|
-
}
|
|
648
|
-
$(t) {
|
|
649
|
-
const {
|
|
650
|
-
values: i,
|
|
651
|
-
_$litType$: s
|
|
652
|
-
} = t,
|
|
653
|
-
e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = N.createElement(P(s.h, s.h[0]), this.options)), s);
|
|
654
|
-
if (this._$AH?._$AD === e) this._$AH.p(i);else {
|
|
655
|
-
const t = new M(e, this),
|
|
656
|
-
s = t.u(this.options);
|
|
657
|
-
t.p(i), this.T(s), this._$AH = t;
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
_$AC(t) {
|
|
661
|
-
let i = A.get(t.strings);
|
|
662
|
-
return void 0 === i && A.set(t.strings, i = new N(t)), i;
|
|
663
|
-
}
|
|
664
|
-
k(t) {
|
|
665
|
-
a(this._$AH) || (this._$AH = [], this._$AR());
|
|
666
|
-
const i = this._$AH;
|
|
667
|
-
let s,
|
|
668
|
-
e = 0;
|
|
669
|
-
for (const h of t) e === i.length ? i.push(s = new R(this.O(l()), this.O(l()), this, this.options)) : s = i[e], s._$AI(h), e++;
|
|
670
|
-
e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
|
|
671
|
-
}
|
|
672
|
-
_$AR(t = this._$AA.nextSibling, i) {
|
|
673
|
-
for (this._$AP?.(false, true, i); t !== this._$AB;) {
|
|
674
|
-
const i = t.nextSibling;
|
|
675
|
-
t.remove(), t = i;
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
setConnected(t) {
|
|
679
|
-
void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
class k {
|
|
683
|
-
get tagName() {
|
|
684
|
-
return this.element.tagName;
|
|
685
|
-
}
|
|
686
|
-
get _$AU() {
|
|
687
|
-
return this._$AM._$AU;
|
|
688
|
-
}
|
|
689
|
-
constructor(t, i, s, e, h) {
|
|
690
|
-
this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = E;
|
|
691
|
-
}
|
|
692
|
-
_$AI(t, i = this, s, e) {
|
|
693
|
-
const h = this.strings;
|
|
694
|
-
let o = false;
|
|
695
|
-
if (void 0 === h) t = S(this, t, i, 0), o = !c(t) || t !== this._$AH && t !== T, o && (this._$AH = t);else {
|
|
696
|
-
const e = t;
|
|
697
|
-
let n, r;
|
|
698
|
-
for (t = h[0], n = 0; n < h.length - 1; n++) r = S(this, e[s + n], i, n), r === T && (r = this._$AH[n]), o ||= !c(r) || r !== this._$AH[n], r === E ? t = E : t !== E && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
|
|
699
|
-
}
|
|
700
|
-
o && !e && this.j(t);
|
|
701
|
-
}
|
|
702
|
-
j(t) {
|
|
703
|
-
t === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
class H extends k {
|
|
707
|
-
constructor() {
|
|
708
|
-
super(...arguments), this.type = 3;
|
|
709
|
-
}
|
|
710
|
-
j(t) {
|
|
711
|
-
this.element[this.name] = t === E ? void 0 : t;
|
|
712
|
-
}
|
|
713
|
-
}
|
|
714
|
-
class I extends k {
|
|
715
|
-
constructor() {
|
|
716
|
-
super(...arguments), this.type = 4;
|
|
717
|
-
}
|
|
718
|
-
j(t) {
|
|
719
|
-
this.element.toggleAttribute(this.name, !!t && t !== E);
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
|
-
class L extends k {
|
|
723
|
-
constructor(t, i, s, e, h) {
|
|
724
|
-
super(t, i, s, e, h), this.type = 5;
|
|
725
|
-
}
|
|
726
|
-
_$AI(t, i = this) {
|
|
727
|
-
if ((t = S(this, t, i, 0) ?? E) === T) return;
|
|
728
|
-
const s = this._$AH,
|
|
729
|
-
e = t === E && s !== E || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
|
|
730
|
-
h = t !== E && (s === E || e);
|
|
731
|
-
e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
|
|
732
|
-
}
|
|
733
|
-
handleEvent(t) {
|
|
734
|
-
"function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
class z {
|
|
738
|
-
constructor(t, i, s) {
|
|
739
|
-
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
|
|
740
|
-
}
|
|
741
|
-
get _$AU() {
|
|
742
|
-
return this._$AM._$AU;
|
|
743
|
-
}
|
|
744
|
-
_$AI(t) {
|
|
745
|
-
S(this, t);
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
const j = t$1.litHtmlPolyfillSupport;
|
|
749
|
-
j?.(N, R), (t$1.litHtmlVersions ??= []).push("3.3.1");
|
|
750
|
-
|
|
751
|
-
/**
|
|
752
|
-
* @license
|
|
753
|
-
* Copyright 2017 Google LLC
|
|
754
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
755
|
-
*/
|
|
756
|
-
const t = {
|
|
757
|
-
ATTRIBUTE: 1},
|
|
758
|
-
e$1 = t => (...e) => ({
|
|
759
|
-
_$litDirective$: t,
|
|
760
|
-
values: e
|
|
761
|
-
});
|
|
762
|
-
class i {
|
|
763
|
-
constructor(t) {}
|
|
764
|
-
get _$AU() {
|
|
765
|
-
return this._$AM._$AU;
|
|
766
|
-
}
|
|
767
|
-
_$AT(t, e, i) {
|
|
768
|
-
this._$Ct = t, this._$AM = e, this._$Ci = i;
|
|
769
|
-
}
|
|
770
|
-
_$AS(t, e) {
|
|
771
|
-
return this.update(t, e);
|
|
772
|
-
}
|
|
773
|
-
update(t, e) {
|
|
774
|
-
return this.render(...e);
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
|
|
778
|
-
/**
|
|
779
|
-
* @license
|
|
780
|
-
* Copyright 2018 Google LLC
|
|
781
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
782
|
-
*/
|
|
783
|
-
const e = e$1(class extends i {
|
|
784
|
-
constructor(t$1) {
|
|
785
|
-
if (super(t$1), t$1.type !== t.ATTRIBUTE || "class" !== t$1.name || t$1.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
|
|
786
|
-
}
|
|
787
|
-
render(t) {
|
|
788
|
-
return " " + Object.keys(t).filter(s => t[s]).join(" ") + " ";
|
|
789
|
-
}
|
|
790
|
-
update(s, [i]) {
|
|
791
|
-
if (void 0 === this.st) {
|
|
792
|
-
this.st = new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter(t => "" !== t)));
|
|
793
|
-
for (const t in i) i[t] && !this.nt?.has(t) && this.st.add(t);
|
|
794
|
-
return this.render(i);
|
|
795
|
-
}
|
|
796
|
-
const r = s.element.classList;
|
|
797
|
-
for (const t of this.st) t in i || (r.remove(t), this.st.delete(t));
|
|
798
|
-
for (const t in i) {
|
|
799
|
-
const s = !!i[t];
|
|
800
|
-
s === this.st.has(t) || this.nt?.has(t) || (s ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
|
|
801
|
-
}
|
|
802
|
-
return T;
|
|
803
|
-
}
|
|
804
|
-
});
|
|
805
|
-
|
|
806
|
-
/**
|
|
807
|
-
* @license
|
|
808
|
-
* Copyright 2018 Google LLC
|
|
809
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
810
|
-
*/
|
|
811
|
-
const o = o => o ?? E;
|
|
812
|
-
|
|
813
|
-
/** @private */
|
|
814
|
-
function createDateWithOverflow(year, month, day) {
|
|
815
|
-
const date = new Date();
|
|
816
|
-
date.setFullYear(year, month, day);
|
|
817
|
-
date.setHours(0, 0, 0, 0);
|
|
818
|
-
return date;
|
|
819
|
-
}
|
|
820
|
-
/** @private */
|
|
821
|
-
function getStartingYear(minDate, maxDate) {
|
|
822
|
-
if (maxDate) {
|
|
823
|
-
return maxDate.getFullYear() - YEARS_PER_PAGE + 1;
|
|
824
|
-
} else if (minDate) {
|
|
825
|
-
return minDate.getFullYear();
|
|
826
|
-
}
|
|
827
|
-
return 0;
|
|
828
|
-
}
|
|
829
|
-
/** @private */
|
|
830
|
-
function euclideanModulo(a, b) {
|
|
831
|
-
return (a % b + b) % b;
|
|
832
|
-
}
|
|
833
|
-
/** @internal */
|
|
834
|
-
function addCalendarDays(date, days) {
|
|
835
|
-
return createDateWithOverflow(date.getFullYear(), date.getMonth(), date.getDate() + days);
|
|
836
|
-
}
|
|
837
|
-
/** @internal */
|
|
838
|
-
function addCalendarMonths(date, months) {
|
|
839
|
-
let newDate = createDateWithOverflow(date.getFullYear(), date.getMonth() + months, date.getDate());
|
|
840
|
-
if (newDate.getMonth() != ((date.getMonth() + months) % 12 + 12) % 12) {
|
|
841
|
-
newDate = createDateWithOverflow(newDate.getFullYear(), newDate.getMonth(), 0);
|
|
842
|
-
}
|
|
843
|
-
return newDate;
|
|
844
|
-
}
|
|
845
|
-
/** @internal */
|
|
846
|
-
function addCalendarYears(date, years) {
|
|
847
|
-
return addCalendarMonths(date, years * 12);
|
|
848
|
-
}
|
|
849
|
-
/** @internal */
|
|
850
|
-
function getNumDaysInMonth(date) {
|
|
851
|
-
return createDateWithOverflow(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
|
852
|
-
}
|
|
853
|
-
/** @internal */
|
|
854
|
-
function compareDate(first, second) {
|
|
855
|
-
return first.getFullYear() - second.getFullYear() || first.getMonth() - second.getMonth() || first.getDate() - second.getDate();
|
|
856
|
-
}
|
|
857
|
-
/** @internal */
|
|
858
|
-
function sameDate(first, second) {
|
|
859
|
-
return first && second ? compareDate(first, second) == 0 : first == second;
|
|
860
|
-
}
|
|
861
|
-
/** @internal */
|
|
862
|
-
function parseDate$1(value) {
|
|
863
|
-
return !value ? null : new Date(value);
|
|
864
|
-
}
|
|
865
|
-
/** @internal */
|
|
866
|
-
function getActiveOffset(activeDate, minDate, maxDate) {
|
|
867
|
-
return euclideanModulo(activeDate.getFullYear() - getStartingYear(minDate, maxDate), YEARS_PER_PAGE);
|
|
868
|
-
}
|
|
869
|
-
/** @internal */
|
|
870
|
-
function minYearOfPage(activeDate, minDate, maxDate) {
|
|
871
|
-
return activeDate.getFullYear() - getActiveOffset(activeDate, minDate, maxDate);
|
|
872
|
-
}
|
|
873
|
-
/** @internal */
|
|
874
|
-
function maxYearOfPage(activeDate, minDate, maxDate) {
|
|
875
|
-
return minYearOfPage(activeDate, minDate, maxDate) + YEARS_PER_PAGE - 1;
|
|
876
|
-
}
|
|
877
|
-
/** @internal */
|
|
878
|
-
function clampDate(date, minDate, maxDate) {
|
|
879
|
-
if (minDate && compareDate(date, minDate) < 0) return minDate;
|
|
880
|
-
if (maxDate && compareDate(date, maxDate) > 0) return maxDate;
|
|
881
|
-
return date;
|
|
882
|
-
}
|
|
883
|
-
/** @internal */
|
|
884
|
-
const YEARS_PER_PAGE = 15;
|
|
885
|
-
/** @internal */
|
|
886
|
-
const YEARS_PER_ROW = 3;
|
|
887
|
-
/** @internal */
|
|
888
|
-
const MONTHS_PER_ROW = 4;
|
|
889
|
-
|
|
890
|
-
/**
|
|
891
|
-
* A base implementation for a view in a calendar. This class must be inherited.
|
|
892
|
-
* @internal
|
|
893
|
-
*/
|
|
894
|
-
class CalendarViewElementBase extends LitElement {
|
|
895
|
-
constructor() {
|
|
896
|
-
super(...arguments);
|
|
897
|
-
/** Today's date. */
|
|
898
|
-
this.today = new Date();
|
|
899
|
-
/** The selected date. */
|
|
900
|
-
this.date = null;
|
|
901
|
-
/** The active date. */
|
|
902
|
-
this.activeDate = new Date();
|
|
903
|
-
/** The minimum date that can be selected. */
|
|
904
|
-
this.minDate = null;
|
|
905
|
-
/** The maximum date that can be selected. */
|
|
906
|
-
this.maxDate = null;
|
|
907
|
-
}
|
|
908
|
-
/**
|
|
909
|
-
* Asynchronously focuses the active date.
|
|
910
|
-
* @returns {Promise<void>} A promise that resolves after the active date has been focused.
|
|
911
|
-
*/
|
|
912
|
-
async focusActiveCell() {
|
|
913
|
-
if (this.isUpdatePending) {
|
|
914
|
-
await this.updateComplete;
|
|
915
|
-
}
|
|
916
|
-
if (this._activeItem) {
|
|
917
|
-
await focusWhenReady(this._activeItem);
|
|
918
|
-
}
|
|
919
|
-
}
|
|
920
|
-
/** @internal */
|
|
921
|
-
_changeActiveDate(activeDate) {
|
|
922
|
-
activeDate = clampDate(activeDate, this.minDate, this.maxDate);
|
|
923
|
-
if (!sameDate(activeDate, this.activeDate)) {
|
|
924
|
-
this._activeItem?.style.setProperty("--m3e-state-layer-duration", "0ms");
|
|
925
|
-
this._activeItem?.blur();
|
|
926
|
-
this._activeItem?.style.removeProperty("--m3e-state-layer-duration");
|
|
927
|
-
this.activeDate = activeDate;
|
|
928
|
-
this.dispatchEvent(new Event("active-change", {
|
|
929
|
-
bubbles: false
|
|
930
|
-
}));
|
|
931
|
-
}
|
|
932
|
-
}
|
|
933
|
-
}
|
|
934
|
-
/** The styles of the element. */
|
|
935
|
-
CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-style: solid; border-width: var(--m3e-calendar-item-current-outline-thickness, 0.0625rem); border-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); }`;
|
|
936
|
-
__decorate([e$3(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
|
|
937
|
-
__decorate([n$1({
|
|
938
|
-
converter: {
|
|
939
|
-
fromAttribute: parseDate$1
|
|
940
|
-
}
|
|
941
|
-
})], CalendarViewElementBase.prototype, "today", void 0);
|
|
942
|
-
__decorate([n$1({
|
|
943
|
-
converter: {
|
|
944
|
-
fromAttribute: parseDate$1
|
|
945
|
-
}
|
|
946
|
-
})], CalendarViewElementBase.prototype, "date", void 0);
|
|
947
|
-
__decorate([n$1({
|
|
948
|
-
attribute: "active-date",
|
|
949
|
-
converter: {
|
|
950
|
-
fromAttribute: parseDate$1
|
|
951
|
-
}
|
|
952
|
-
})], CalendarViewElementBase.prototype, "activeDate", void 0);
|
|
953
|
-
__decorate([n$1({
|
|
954
|
-
attribute: "min-date",
|
|
955
|
-
converter: {
|
|
956
|
-
fromAttribute: parseDate$1
|
|
957
|
-
}
|
|
958
|
-
})], CalendarViewElementBase.prototype, "minDate", void 0);
|
|
959
|
-
__decorate([n$1({
|
|
960
|
-
attribute: "max-date",
|
|
961
|
-
converter: {
|
|
962
|
-
fromAttribute: parseDate$1
|
|
963
|
-
}
|
|
964
|
-
})], CalendarViewElementBase.prototype, "maxDate", void 0);
|
|
965
|
-
|
|
966
|
-
/**
|
|
967
|
-
* Adapted from Angular Material Datepicker
|
|
968
|
-
* Source: https://github.com/angular/components/blob/main/src/material/datepicker/month-view.ts
|
|
969
|
-
*
|
|
970
|
-
* @license MIT
|
|
971
|
-
* Copyright (c) 2025 Google LLC
|
|
972
|
-
* See LICENSE file in the project root for full license text.
|
|
973
|
-
*/
|
|
974
|
-
var _M3eMonthViewElement_instances, _M3eMonthViewElement_renderItem, _M3eMonthViewElement_handleItemClick, _M3eMonthViewElement_handleItemKeyDown, _M3eMonthViewElement_handleDateRangeHighlight, _M3eMonthViewElement_setRangeHighlight, _M3eMonthViewElement_clearRangeHighlight;
|
|
975
|
-
/**
|
|
976
|
-
* An internal component used to display a single month in a calendar.
|
|
977
|
-
* @internal
|
|
978
|
-
*/
|
|
979
|
-
let M3eMonthViewElement = class M3eMonthViewElement extends CalendarViewElementBase {
|
|
980
|
-
constructor() {
|
|
981
|
-
super(...arguments);
|
|
982
|
-
_M3eMonthViewElement_instances.add(this);
|
|
983
|
-
/** Start of a date range. */
|
|
984
|
-
this.rangeStart = null;
|
|
985
|
-
/** End of a date range. */
|
|
986
|
-
this.rangeEnd = null;
|
|
987
|
-
/** A function used to determine whether a date cannot be selected. */
|
|
988
|
-
this.blackoutDates = null;
|
|
989
|
-
/** A function used to determine whether a date is special. */
|
|
990
|
-
this.specialDates = null;
|
|
991
|
-
}
|
|
992
|
-
/** @inheritdoc */
|
|
993
|
-
render() {
|
|
994
|
-
const date = new Date(this.today);
|
|
995
|
-
date.setDate(1);
|
|
996
|
-
while (date.getDay() != 0) {
|
|
997
|
-
date.setDate(date.getDate() + 1);
|
|
998
|
-
}
|
|
999
|
-
const weekdays = new Array();
|
|
1000
|
-
const narrowFormat = new Intl.DateTimeFormat(navigator.language, {
|
|
1001
|
-
weekday: "narrow"
|
|
1002
|
-
});
|
|
1003
|
-
const longFormat = new Intl.DateTimeFormat(navigator.language, {
|
|
1004
|
-
weekday: "long"
|
|
1005
|
-
});
|
|
1006
|
-
for (let i = 0; i < 7; i++) {
|
|
1007
|
-
weekdays.push({
|
|
1008
|
-
id: i,
|
|
1009
|
-
narrow: narrowFormat.format(date),
|
|
1010
|
-
long: longFormat.format(date)
|
|
1011
|
-
});
|
|
1012
|
-
date.setDate(date.getDate() + 1);
|
|
1013
|
-
}
|
|
1014
|
-
const year = this.activeDate.getFullYear();
|
|
1015
|
-
const month = this.activeDate.getMonth();
|
|
1016
|
-
const firstDate = new Date(year, month, 1);
|
|
1017
|
-
const lastDate = new Date(year, month + 1, 0);
|
|
1018
|
-
const numDays = lastDate.getDate();
|
|
1019
|
-
let weeks = [];
|
|
1020
|
-
let dayOfWeek = firstDate.getDay();
|
|
1021
|
-
for (let i = 1; i <= numDays; i++) {
|
|
1022
|
-
if (dayOfWeek === 0 || weeks.length === 0) {
|
|
1023
|
-
weeks.push([]);
|
|
1024
|
-
}
|
|
1025
|
-
weeks[weeks.length - 1].push(i);
|
|
1026
|
-
dayOfWeek = (dayOfWeek + 1) % 7;
|
|
1027
|
-
}
|
|
1028
|
-
weeks = weeks.filter(x => !!x.length);
|
|
1029
|
-
return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div><m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip></th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
|
|
1030
|
-
}
|
|
1031
|
-
};
|
|
1032
|
-
_M3eMonthViewElement_instances = new WeakSet();
|
|
1033
|
-
_M3eMonthViewElement_renderItem = function _M3eMonthViewElement_renderItem(value) {
|
|
1034
|
-
const long = new Intl.DateTimeFormat(navigator.language, {
|
|
1035
|
-
year: "numeric",
|
|
1036
|
-
month: "long",
|
|
1037
|
-
day: "numeric"
|
|
1038
|
-
}).format(value);
|
|
1039
|
-
const special = this.specialDates?.(value) ?? false;
|
|
1040
|
-
const selected = sameDate(this.date, value);
|
|
1041
|
-
const active = sameDate(this.activeDate, value);
|
|
1042
|
-
const current = sameDate(this.today, value);
|
|
1043
|
-
const disabled = this.minDate && compareDate(value, this.minDate) < 0 || this.maxDate && compareDate(value, this.maxDate) > 0 || this.blackoutDates?.(value) === true;
|
|
1044
|
-
const id = `date-${value.getMonth()}-${value.getDate()}-${value.getFullYear()}`;
|
|
1045
|
-
let range = false,
|
|
1046
|
-
rangeStart = false,
|
|
1047
|
-
rangeEnd = false,
|
|
1048
|
-
rangeStartRange = false;
|
|
1049
|
-
if (this.rangeStart) {
|
|
1050
|
-
if (!this.rangeEnd) {
|
|
1051
|
-
rangeStart = sameDate(value, this.rangeStart);
|
|
1052
|
-
} else {
|
|
1053
|
-
range = compareDate(value, this.rangeStart) > 0 && compareDate(value, this.rangeEnd) < 0;
|
|
1054
|
-
if (!range) {
|
|
1055
|
-
rangeStart = compareDate(value, this.rangeStart) >= 0 && compareDate(value, this.rangeEnd) < 0;
|
|
1056
|
-
if (!rangeStart) {
|
|
1057
|
-
rangeEnd = compareDate(value, this.rangeStart) > 0 && compareDate(value, this.rangeEnd) <= 0;
|
|
1058
|
-
} else {
|
|
1059
|
-
rangeStartRange = true;
|
|
1060
|
-
}
|
|
1061
|
-
}
|
|
1062
|
-
}
|
|
1063
|
-
}
|
|
1064
|
-
return html`<td role="gridcell" class="${e({
|
|
1065
|
-
current,
|
|
1066
|
-
selected,
|
|
1067
|
-
active,
|
|
1068
|
-
special,
|
|
1069
|
-
range,
|
|
1070
|
-
"range-start": rangeStart,
|
|
1071
|
-
"range-start-range": rangeStartRange,
|
|
1072
|
-
"range-end": rangeEnd
|
|
1073
|
-
})}"><div id="${id}" role="button" class="item" data-value="${value.toISOString()}" tabindex="${active ? "0" : "-1"}" aria-disabled="${o(disabled || undefined)}" aria-current="${o(current ? "date" : undefined)}" aria-pressed="${selected || rangeStart || rangeEnd}" @click="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemClick)}" @mouseenter="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleDateRangeHighlight)}" @focus="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleDateRangeHighlight)}" @mouseleave="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight)}" @blur="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight)}" @keydown="${__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered for="${id}" ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span class="visually-hidden">${long}</span> <span aria-hidden="true">${value.getDate()}</span></div></td>`;
|
|
1074
|
-
};
|
|
1075
|
-
_M3eMonthViewElement_handleItemClick = function _M3eMonthViewElement_handleItemClick(e) {
|
|
1076
|
-
const item = e.currentTarget;
|
|
1077
|
-
if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
|
|
1078
|
-
this.activeDate = new Date(item.dataset["value"]);
|
|
1079
|
-
this.activeDate = clampDate(this.activeDate, this.minDate, this.maxDate);
|
|
1080
|
-
if (this.rangeStart) {
|
|
1081
|
-
if (compareDate(this.activeDate, this.rangeStart) < 0) {
|
|
1082
|
-
this.rangeStart = this.activeDate;
|
|
1083
|
-
this.rangeEnd = null;
|
|
1084
|
-
} else {
|
|
1085
|
-
this.rangeEnd = this.activeDate;
|
|
1086
|
-
}
|
|
1087
|
-
__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
|
|
1088
|
-
}
|
|
1089
|
-
this.dispatchEvent(new Event("change", {
|
|
1090
|
-
bubbles: false
|
|
1091
|
-
}));
|
|
1092
|
-
};
|
|
1093
|
-
_M3eMonthViewElement_handleItemKeyDown = function _M3eMonthViewElement_handleItemKeyDown(e) {
|
|
1094
|
-
let activeDate = this.activeDate;
|
|
1095
|
-
switch (e.key) {
|
|
1096
|
-
case " ":
|
|
1097
|
-
case "Enter":
|
|
1098
|
-
e.preventDefault();
|
|
1099
|
-
e.currentTarget.click();
|
|
1100
|
-
return;
|
|
1101
|
-
case "ArrowLeft":
|
|
1102
|
-
case "Left":
|
|
1103
|
-
activeDate = addCalendarDays(this.activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
|
|
1104
|
-
break;
|
|
1105
|
-
case "ArrowRight":
|
|
1106
|
-
case "Right":
|
|
1107
|
-
activeDate = addCalendarDays(this.activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
|
|
1108
|
-
break;
|
|
1109
|
-
case "ArrowUp":
|
|
1110
|
-
case "Up":
|
|
1111
|
-
activeDate = addCalendarDays(this.activeDate, -7);
|
|
1112
|
-
break;
|
|
1113
|
-
case "ArrowDown":
|
|
1114
|
-
case "Down":
|
|
1115
|
-
activeDate = addCalendarDays(this.activeDate, 7);
|
|
1116
|
-
break;
|
|
1117
|
-
case "Home":
|
|
1118
|
-
activeDate = addCalendarDays(this.activeDate, 1 - this.activeDate.getDate());
|
|
1119
|
-
break;
|
|
1120
|
-
case "End":
|
|
1121
|
-
activeDate = addCalendarDays(this.activeDate, getNumDaysInMonth(this.activeDate) - this.activeDate.getDate());
|
|
1122
|
-
break;
|
|
1123
|
-
case "PageUp":
|
|
1124
|
-
activeDate = e.altKey ? addCalendarYears(this.activeDate, -1) : addCalendarMonths(this.activeDate, -1);
|
|
1125
|
-
break;
|
|
1126
|
-
case "PageDown":
|
|
1127
|
-
activeDate = e.altKey ? addCalendarYears(this.activeDate, 1) : addCalendarMonths(this.activeDate, 1);
|
|
1128
|
-
break;
|
|
1129
|
-
default:
|
|
1130
|
-
return;
|
|
1131
|
-
}
|
|
1132
|
-
e.preventDefault();
|
|
1133
|
-
this._changeActiveDate(activeDate);
|
|
1134
|
-
};
|
|
1135
|
-
_M3eMonthViewElement_handleDateRangeHighlight = function _M3eMonthViewElement_handleDateRangeHighlight(e) {
|
|
1136
|
-
__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_setRangeHighlight).call(this, e.currentTarget);
|
|
1137
|
-
};
|
|
1138
|
-
_M3eMonthViewElement_setRangeHighlight = function _M3eMonthViewElement_setRangeHighlight(item) {
|
|
1139
|
-
__classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
|
|
1140
|
-
if (this.rangeStart && item.dataset["value"]) {
|
|
1141
|
-
if (compareDate(new Date(item.dataset["value"]), this.rangeStart) > 0) {
|
|
1142
|
-
item.parentElement.classList.add("range-highlight-end");
|
|
1143
|
-
}
|
|
1144
|
-
for (const cell of item.closest("table")?.querySelectorAll(".item") ?? []) {
|
|
1145
|
-
if (cell === item) break;
|
|
1146
|
-
const value = new Date(cell.dataset["value"]);
|
|
1147
|
-
if (compareDate(value, this.rangeStart) > 0) {
|
|
1148
|
-
cell.parentElement.classList.add("range-highlight");
|
|
1149
|
-
} else if (compareDate(value, this.rangeStart) >= 0) {
|
|
1150
|
-
cell.parentElement.classList.add("range-highlight-start");
|
|
1151
|
-
}
|
|
1152
|
-
}
|
|
1153
|
-
}
|
|
1154
|
-
};
|
|
1155
|
-
_M3eMonthViewElement_clearRangeHighlight = function _M3eMonthViewElement_clearRangeHighlight() {
|
|
1156
|
-
if (this.rangeStart) {
|
|
1157
|
-
this.shadowRoot?.querySelectorAll(".range-highlight,.range-highlight-end,.range-highlight-start").forEach(x => x.classList.remove("range-highlight", "range-highlight-end", "range-highlight-start"));
|
|
1158
|
-
}
|
|
1159
|
-
};
|
|
1160
|
-
/** The styles of the element. */
|
|
1161
|
-
M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken.typescale.standard.title.small.tracking}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken.shape.corner.full}; border-end-end-radius: ${DesignToken.shape.corner.full}; border-inline-start-style: none; }`];
|
|
1162
|
-
__decorate([n$1({
|
|
1163
|
-
attribute: "range-start",
|
|
1164
|
-
converter: {
|
|
1165
|
-
fromAttribute: parseDate$1
|
|
1166
|
-
}
|
|
1167
|
-
})], M3eMonthViewElement.prototype, "rangeStart", void 0);
|
|
1168
|
-
__decorate([n$1({
|
|
1169
|
-
attribute: "range-end",
|
|
1170
|
-
converter: {
|
|
1171
|
-
fromAttribute: parseDate$1
|
|
1172
|
-
}
|
|
1173
|
-
})], M3eMonthViewElement.prototype, "rangeEnd", void 0);
|
|
1174
|
-
__decorate([n$1({
|
|
1175
|
-
attribute: false
|
|
1176
|
-
})], M3eMonthViewElement.prototype, "blackoutDates", void 0);
|
|
1177
|
-
__decorate([n$1({
|
|
1178
|
-
attribute: false
|
|
1179
|
-
})], M3eMonthViewElement.prototype, "specialDates", void 0);
|
|
1180
|
-
M3eMonthViewElement = __decorate([t$3("m3e-month-view")], M3eMonthViewElement);
|
|
1181
|
-
|
|
1182
|
-
/**
|
|
1183
|
-
* Adapted from Angular Material Datepicker
|
|
1184
|
-
* Source: https://github.com/angular/components/blob/main/src/material/datepicker/calendar.ts
|
|
1185
|
-
*
|
|
1186
|
-
* @license MIT
|
|
1187
|
-
* Copyright (c) 2025 Google LLC
|
|
1188
|
-
* See LICENSE file in the project root for full license text.
|
|
1189
|
-
*/
|
|
1190
|
-
var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eCalendarElement_renderHeader, _M3eCalendarElement_renderView, _M3eCalendarElement_handleDateChange, _M3eCalendarElement_handleMonthChange, _M3eCalendarElement_handleYearChange, _M3eCalendarElement_handleActiveChange, _M3eCalendarElement_getPreviousPeriod, _M3eCalendarElement_getNextPeriod;
|
|
1191
|
-
/**
|
|
1192
|
-
* A calendar used to select a date.
|
|
1193
|
-
*
|
|
1194
|
-
* @description
|
|
1195
|
-
* The `m3e-calendar` component provides structured navigation and selection across
|
|
1196
|
-
* month, year, and multi‑year views. It supports single‑date and range selection,
|
|
1197
|
-
* applies disabled rules including minimum, maximum, and blackout constraints, and
|
|
1198
|
-
* provides styling hooks for special date states.
|
|
1199
|
-
*
|
|
1200
|
-
* @example
|
|
1201
|
-
* The following example illustrates use of the `m3e-calendar`. In this example, a calendar is displayed
|
|
1202
|
-
* with a selected date.
|
|
1203
|
-
*
|
|
1204
|
-
* ```html
|
|
1205
|
-
* <m3e-calendar date="2025-12-13"></m3e-calendar>
|
|
1206
|
-
* ```
|
|
1207
|
-
*
|
|
1208
|
-
* @tag m3e-calendar
|
|
1209
|
-
*
|
|
1210
|
-
* @slot header - Renders the header of the calendar.
|
|
1211
|
-
*
|
|
1212
|
-
* @attr date - The selected date.
|
|
1213
|
-
* @attr max-date - The maximum date that can be selected.
|
|
1214
|
-
* @attr min-date - The minimum date that can be selected.
|
|
1215
|
-
* @attr range-end - End of a date range.
|
|
1216
|
-
* @attr range-start - Start of a date range.
|
|
1217
|
-
* @attr start-at - A date specifying the period (month or year) to start the calendar in.
|
|
1218
|
-
* @attr start-view - The initial view used to select a date.
|
|
1219
|
-
* @attr previous-month-label - The accessible label given to the button used to move to the previous month.
|
|
1220
|
-
* @attr next-month-label - The accessible label given to the button used to move to the next month.
|
|
1221
|
-
* @attr previous-year-label - The accessible label given to the button used to move to the previous year.
|
|
1222
|
-
* @attr next-year-label - The accessible label given to the button used to move to the next year.
|
|
1223
|
-
* @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.
|
|
1224
|
-
* @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.
|
|
1225
|
-
*
|
|
1226
|
-
* @fires change - Emitted when the selected date changes.
|
|
1227
|
-
*
|
|
1228
|
-
* @cssprop --m3e-calendar-padding - Padding applied to the calendar header and body.
|
|
1229
|
-
* @cssprop --m3e-calendar-period-button-text-color - Text color used for the period‑navigation buttons in the header.
|
|
1230
|
-
* @cssprop --m3e-calendar-weekday-font-size - Font size of weekday labels in month view.
|
|
1231
|
-
* @cssprop --m3e-calendar-weekday-font-weight - Font weight of weekday labels in month view.
|
|
1232
|
-
* @cssprop --m3e-calendar-weekday-line-height - Line height of weekday labels in month view.
|
|
1233
|
-
* @cssprop --m3e-calendar-weekday-tracking - Letter spacing of weekday labels in month view.
|
|
1234
|
-
* @cssprop --m3e-calendar-date-font-size - Font size of date cells in month view.
|
|
1235
|
-
* @cssprop --m3e-calendar-date-font-weight - Font weight of date cells in month view.
|
|
1236
|
-
* @cssprop --m3e-calendar-date-line-height - Line height of date cells in month view.
|
|
1237
|
-
* @cssprop --m3e-calendar-date-tracking - Letter spacing of date cells in month view.
|
|
1238
|
-
* @cssprop --m3e-calendar-item-font-size - Font size of items in year and multi‑year views.
|
|
1239
|
-
* @cssprop --m3e-calendar-item-font-weight - Font weight of items in year and multi‑year views.
|
|
1240
|
-
* @cssprop --m3e-calendar-item-line-height - Line height of items in year and multi‑year views.
|
|
1241
|
-
* @cssprop --m3e-calendar-item-tracking - Letter spacing of items in year and multi‑year views.
|
|
1242
|
-
* @cssprop --m3e-calendar-item-selected-color - Text color for selected date items.
|
|
1243
|
-
* @cssprop --m3e-calendar-item-selected-container-color - Background color for selected date items.
|
|
1244
|
-
* @cssprop --m3e-calendar-item-selected-ripple-color - Ripple color used when interacting with selected date items.
|
|
1245
|
-
* @cssprop --m3e-calendar-item-selected-hover-color - Hover color used when interacting with selected date items.
|
|
1246
|
-
* @cssprop --m3e-calendar-item-selected-focus-color - Focus color used when interacting with selected date items.
|
|
1247
|
-
* @cssprop --m3e-calendar-item-current-outline-thickness - Outline thickness used to indicate the current date.
|
|
1248
|
-
* @cssprop --m3e-calendar-item-current-outline-color - Outline color used to indicate the current date.
|
|
1249
|
-
* @cssprop --m3e-calendar-item-special-color - Text color for dates marked as special.
|
|
1250
|
-
* @cssprop --m3e-calendar-item-special-container-color - Background color for dates marked as special.
|
|
1251
|
-
* @cssprop --m3e-calendar-item-special-ripple-color - Ripple color used when interacting with dates marked as special.
|
|
1252
|
-
* @cssprop --m3e-calendar-item-special-hover-color - Hover color used when interacting with dates marked as special.
|
|
1253
|
-
* @cssprop --m3e-calendar-item-special-focus-color - Focus color used when interacting with dates marked as special.
|
|
1254
|
-
* @cssprop --m3e-calendar-range-container-color - Background color applied to the selected date range.
|
|
1255
|
-
* @cssprop --m3e-calendar-range-color - Text color for dates within a selected range.
|
|
1256
|
-
* @cssprop --m3e-calendar-item-disabled-color - Color used for disabled date items.
|
|
1257
|
-
* @cssprop --m3e-calendar-item-disabled-color-opacity - Opacity applied to the disabled item color.
|
|
1258
|
-
* @cssprop --m3e-calendar-slide-animation-duration - Duration of slide transitions between calendar views.
|
|
1259
|
-
*/
|
|
1260
|
-
let M3eCalendarElement = class M3eCalendarElement extends LitElement {
|
|
1261
|
-
constructor() {
|
|
1262
|
-
super(...arguments);
|
|
1263
|
-
_M3eCalendarElement_instances.add(this);
|
|
1264
|
-
/** @private */
|
|
1265
|
-
_M3eCalendarElement_transitionComplete.set(this, void 0);
|
|
1266
|
-
/** @private */
|
|
1267
|
-
this._today = new Date();
|
|
1268
|
-
/** @private */
|
|
1269
|
-
this._activeView = "month";
|
|
1270
|
-
/** @private */
|
|
1271
|
-
this._activeDate = new Date();
|
|
1272
|
-
/**
|
|
1273
|
-
* The initial view used to select a date.
|
|
1274
|
-
* @default "month"
|
|
1275
|
-
*/
|
|
1276
|
-
this.startView = "month";
|
|
1277
|
-
/**
|
|
1278
|
-
* The selected date.
|
|
1279
|
-
* @default null
|
|
1280
|
-
*/
|
|
1281
|
-
this.date = null;
|
|
1282
|
-
/**
|
|
1283
|
-
* A date specifying the period (month or year) to start the calendar in.
|
|
1284
|
-
* @default null
|
|
1285
|
-
*/
|
|
1286
|
-
this.startAt = null;
|
|
1287
|
-
/**
|
|
1288
|
-
* The minimum date that can be selected.
|
|
1289
|
-
* @default null
|
|
1290
|
-
*/
|
|
1291
|
-
this.minDate = null;
|
|
1292
|
-
/**
|
|
1293
|
-
* The maximum date that can be selected.
|
|
1294
|
-
* @default null
|
|
1295
|
-
*/
|
|
1296
|
-
this.maxDate = null;
|
|
1297
|
-
/**
|
|
1298
|
-
* Start of a date range.
|
|
1299
|
-
* @default null
|
|
1300
|
-
*/
|
|
1301
|
-
this.rangeStart = null;
|
|
1302
|
-
/**
|
|
1303
|
-
* End of a date range.
|
|
1304
|
-
* @default null
|
|
1305
|
-
*/
|
|
1306
|
-
this.rangeEnd = null;
|
|
1307
|
-
/**
|
|
1308
|
-
* A function used to determine whether a date cannot be selected.
|
|
1309
|
-
* @default null
|
|
1310
|
-
*/
|
|
1311
|
-
this.blackoutDates = null;
|
|
1312
|
-
/**
|
|
1313
|
-
* A function used to determine whether a date is special.
|
|
1314
|
-
* @default null
|
|
1315
|
-
*/
|
|
1316
|
-
this.specialDates = null;
|
|
1317
|
-
/**
|
|
1318
|
-
* The accessible label given to the button used to move to the previous month.
|
|
1319
|
-
* @default "Previous month"
|
|
1320
|
-
*/
|
|
1321
|
-
this.previousMonthLabel = "Previous month";
|
|
1322
|
-
/**
|
|
1323
|
-
* The accessible label given to the button used to move to the previous year.
|
|
1324
|
-
* @default "Previous year"
|
|
1325
|
-
*/
|
|
1326
|
-
this.previousYearLabel = "Previous year";
|
|
1327
|
-
/**
|
|
1328
|
-
* The accessible label given to the button used to move to the previous 24 years.
|
|
1329
|
-
* @default "Previous 24 years"
|
|
1330
|
-
*/
|
|
1331
|
-
this.previousMultiYearLabel = "Previous 24 years";
|
|
1332
|
-
/**
|
|
1333
|
-
* The accessible label given to the button used to move to the next month.
|
|
1334
|
-
* @default "Next month"
|
|
1335
|
-
*/
|
|
1336
|
-
this.nextMonthLabel = "Next month";
|
|
1337
|
-
/**
|
|
1338
|
-
* The accessible label given to the button used to move to the next year.
|
|
1339
|
-
* @default "Next year"
|
|
1340
|
-
*/
|
|
1341
|
-
this.nextYearLabel = "Next year";
|
|
1342
|
-
/**
|
|
1343
|
-
* The accessible label given to the button used to move to the next 24 years.
|
|
1344
|
-
* @default "Next 24 years"
|
|
1345
|
-
*/
|
|
1346
|
-
this.nextMultiYearLabel = "Next 24 years";
|
|
1347
|
-
}
|
|
1348
|
-
/** The label to present for the current period. */
|
|
1349
|
-
get periodLabel() {
|
|
1350
|
-
switch (this._activeView) {
|
|
1351
|
-
case "month":
|
|
1352
|
-
return new Intl.DateTimeFormat(navigator.language, {
|
|
1353
|
-
month: "short",
|
|
1354
|
-
year: "numeric"
|
|
1355
|
-
}).format(this._activeDate);
|
|
1356
|
-
case "year":
|
|
1357
|
-
return new Intl.DateTimeFormat(navigator.language, {
|
|
1358
|
-
year: "numeric"
|
|
1359
|
-
}).format(new Date(this._activeDate.getFullYear(), 0, 1));
|
|
1360
|
-
case "multi-year":
|
|
1361
|
-
return new Intl.DateTimeFormat(navigator.language, {
|
|
1362
|
-
year: "numeric"
|
|
1363
|
-
}).formatRange(new Date(minYearOfPage(this._activeDate, this.minDate, this.maxDate), 0, 1), new Date(maxYearOfPage(this._activeDate, this.minDate, this.maxDate), 0, 1));
|
|
1364
|
-
}
|
|
1365
|
-
}
|
|
1366
|
-
/** Whether the calendar can move to the previous period. */
|
|
1367
|
-
get canMovePreviousPeriod() {
|
|
1368
|
-
if (!this.minDate) return true;
|
|
1369
|
-
switch (this._activeView) {
|
|
1370
|
-
case "month":
|
|
1371
|
-
return new Date(this._activeDate.getFullYear(), this._activeDate.getMonth(), 0) >= this.minDate;
|
|
1372
|
-
case "year":
|
|
1373
|
-
return new Date(this._activeDate.getFullYear() - 1, 12, 1) >= this.minDate;
|
|
1374
|
-
case "multi-year":
|
|
1375
|
-
return new Date(minYearOfPage(this._activeDate, this.minDate, this.maxDate) - 1, 12, 1) >= this.minDate;
|
|
1376
|
-
}
|
|
1377
|
-
}
|
|
1378
|
-
/** Whether the calendar can move to the next period. */
|
|
1379
|
-
get canMoveNextPeriod() {
|
|
1380
|
-
if (!this.maxDate) return true;
|
|
1381
|
-
switch (this._activeView) {
|
|
1382
|
-
case "month":
|
|
1383
|
-
return new Date(this._activeDate.getFullYear(), this._activeDate.getMonth() + 1, 1) <= this.maxDate;
|
|
1384
|
-
case "year":
|
|
1385
|
-
return new Date(this._activeDate.getFullYear() + 1, 1, 1) <= this.maxDate;
|
|
1386
|
-
case "multi-year":
|
|
1387
|
-
return new Date(maxYearOfPage(this._activeDate, this.minDate, this.maxDate) + 1, 12, 1) <= this.maxDate;
|
|
1388
|
-
}
|
|
1389
|
-
}
|
|
1390
|
-
/**
|
|
1391
|
-
* Asynchronously focuses the active date.
|
|
1392
|
-
* @returns {Promise<void>} A promise that resolves after the active date has been focused.
|
|
1393
|
-
*/
|
|
1394
|
-
async focusActiveCell() {
|
|
1395
|
-
if (this.isUpdatePending) {
|
|
1396
|
-
await this.updateComplete;
|
|
1397
|
-
}
|
|
1398
|
-
await this._view?.focusActiveCell();
|
|
1399
|
-
}
|
|
1400
|
-
/** Updates today's date. */
|
|
1401
|
-
updateTodayDate() {
|
|
1402
|
-
this._today = new Date();
|
|
1403
|
-
}
|
|
1404
|
-
/**
|
|
1405
|
-
* Moves the calendar to the previous period.
|
|
1406
|
-
* @returns {Promise<void>} A promise that resolves when the operation is complete.
|
|
1407
|
-
*/
|
|
1408
|
-
async movePreviousPeriod() {
|
|
1409
|
-
if (!this.canMovePreviousPeriod) return;
|
|
1410
|
-
if (prefersReducedMotion()) {
|
|
1411
|
-
this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, this._activeView);
|
|
1412
|
-
return;
|
|
1413
|
-
}
|
|
1414
|
-
await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
|
|
1415
|
-
const views = [...(this.shadowRoot?.querySelectorAll(`.row.${this._activeView} .view`) ?? [])];
|
|
1416
|
-
if (views.length != 3) return;
|
|
1417
|
-
__classPrivateFieldSet(this, _M3eCalendarElement_transitionComplete, new Promise(resolve => {
|
|
1418
|
-
views[0].addEventListener("transitionend", () => {
|
|
1419
|
-
this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, this._activeView);
|
|
1420
|
-
views.forEach(x => x.classList.add("no-animate"));
|
|
1421
|
-
views[1].classList.remove("after");
|
|
1422
|
-
views[0].classList.add("before");
|
|
1423
|
-
setTimeout(() => {
|
|
1424
|
-
views.forEach(x => x.classList.remove("no-animate"));
|
|
1425
|
-
resolve();
|
|
1426
|
-
});
|
|
1427
|
-
}, {
|
|
1428
|
-
once: true
|
|
1429
|
-
});
|
|
1430
|
-
}), "f");
|
|
1431
|
-
views[1].classList.add("after");
|
|
1432
|
-
views[0].classList.remove("before");
|
|
1433
|
-
await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
|
|
1434
|
-
}
|
|
1435
|
-
/**
|
|
1436
|
-
* Moves the calendar to the next period.
|
|
1437
|
-
* @returns {Promise<void>} A promise that resolves when the operation is complete.
|
|
1438
|
-
*/
|
|
1439
|
-
async moveNextPeriod() {
|
|
1440
|
-
if (!this.canMoveNextPeriod) return;
|
|
1441
|
-
if (prefersReducedMotion()) {
|
|
1442
|
-
this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, this._activeView);
|
|
1443
|
-
return;
|
|
1444
|
-
}
|
|
1445
|
-
await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
|
|
1446
|
-
const views = [...(this.shadowRoot?.querySelectorAll(`.row.${this._activeView} .view`) ?? [])];
|
|
1447
|
-
if (views.length != 3) return;
|
|
1448
|
-
__classPrivateFieldSet(this, _M3eCalendarElement_transitionComplete, new Promise(resolve => {
|
|
1449
|
-
views[2].addEventListener("transitionend", () => {
|
|
1450
|
-
this._activeDate = __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, this._activeView);
|
|
1451
|
-
views.forEach(x => x.classList.add("no-animate"));
|
|
1452
|
-
views[1].classList.remove("before");
|
|
1453
|
-
views[2].classList.add("after");
|
|
1454
|
-
setTimeout(() => {
|
|
1455
|
-
views.forEach(x => x.classList.remove("no-animate"));
|
|
1456
|
-
resolve();
|
|
1457
|
-
});
|
|
1458
|
-
}, {
|
|
1459
|
-
once: true
|
|
1460
|
-
});
|
|
1461
|
-
}), "f");
|
|
1462
|
-
views[1].classList.add("before");
|
|
1463
|
-
views[2].classList.remove("after");
|
|
1464
|
-
await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
|
|
1465
|
-
}
|
|
1466
|
-
/**
|
|
1467
|
-
* Toggles the current period.
|
|
1468
|
-
* @returns {Promise<void>} A promise that resolves when the operation is complete.
|
|
1469
|
-
*/
|
|
1470
|
-
async togglePeriod() {
|
|
1471
|
-
await __classPrivateFieldGet(this, _M3eCalendarElement_transitionComplete, "f");
|
|
1472
|
-
this._activeView = this._activeView === "month" ? "multi-year" : "month";
|
|
1473
|
-
await this.focusActiveCell();
|
|
1474
|
-
}
|
|
1475
|
-
/** @inheritdoc */
|
|
1476
|
-
update(changedProperties) {
|
|
1477
|
-
super.update(changedProperties);
|
|
1478
|
-
if (changedProperties.has("date")) {
|
|
1479
|
-
this._activeDate = new Date(this.date ?? this._today);
|
|
1480
|
-
}
|
|
1481
|
-
if (changedProperties.has("startAt")) {
|
|
1482
|
-
this._activeDate = new Date(this.startAt ?? this.date ?? this._today);
|
|
1483
|
-
}
|
|
1484
|
-
if (changedProperties.has("startView")) {
|
|
1485
|
-
this._activeView = this.startView;
|
|
1486
|
-
}
|
|
1487
|
-
}
|
|
1488
|
-
/** @inheritdoc */
|
|
1489
|
-
updated(_changedProperties) {
|
|
1490
|
-
super.updated(_changedProperties);
|
|
1491
|
-
if (this._view instanceof M3eMonthViewElement) {
|
|
1492
|
-
if (_changedProperties.has("specialDates") || _changedProperties.has("blackoutDates")) {
|
|
1493
|
-
this.shadowRoot?.querySelectorAll("m3e-month-view").forEach(x => {
|
|
1494
|
-
x.specialDates = this.specialDates;
|
|
1495
|
-
x.blackoutDates = this.blackoutDates;
|
|
1496
|
-
});
|
|
1497
|
-
}
|
|
1498
|
-
}
|
|
1499
|
-
}
|
|
1500
|
-
/** @inheritdoc */
|
|
1501
|
-
render() {
|
|
1502
|
-
return html`<slot name="header">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderHeader).call(this)}</slot><div class="body ${this._activeView}"><div class="row multi-year">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "multi-year", 1)}</div><div class="row year">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "year", 1)}</div><div class="row month">${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", -1)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", 0)}${__classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_renderView).call(this, "month", 1)}</div></div>`;
|
|
1503
|
-
}
|
|
1504
|
-
};
|
|
1505
|
-
_M3eCalendarElement_transitionComplete = new WeakMap();
|
|
1506
|
-
_M3eCalendarElement_instances = new WeakSet();
|
|
1507
|
-
_M3eCalendarElement_renderHeader = function _M3eCalendarElement_renderHeader() {
|
|
1508
|
-
return html`<div class="header"><m3e-button @click="${this.togglePeriod}">${this.periodLabel} <svg class="${e({
|
|
1509
|
-
rotate: this._activeView !== "month"
|
|
1510
|
-
})}" slot="trailing-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></m3e-button><div class="spacer"></div><m3e-icon-button ?disabled="${!this.canMovePreviousPeriod}" @click="${this.movePreviousPeriod}" aria-label="${this._activeView === "month" ? this.previousMonthLabel : this._activeView === "year" ? this.previousYearLabel : this.previousMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`}</m3e-icon-button><m3e-icon-button ?disabled="${!this.canMoveNextPeriod}" @click="${this.moveNextPeriod}" aria-label="${this._activeView === "month" ? this.nextMonthLabel : this._activeView === "year" ? this.nextYearLabel : this.nextMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`}</m3e-icon-button></div>`;
|
|
1511
|
-
};
|
|
1512
|
-
_M3eCalendarElement_renderView = function _M3eCalendarElement_renderView(view, offset) {
|
|
1513
|
-
const activeDate = offset < 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, view) : offset > 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, view) : new Date(this._activeDate);
|
|
1514
|
-
switch (view) {
|
|
1515
|
-
case "month":
|
|
1516
|
-
return html`<m3e-month-view class="view ${e({
|
|
1517
|
-
before: offset < 0,
|
|
1518
|
-
after: offset > 0,
|
|
1519
|
-
active: view === this._activeView && offset === 0
|
|
1520
|
-
})}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${o(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${o(this.minDate?.toISOString())}" max-date="${o(this.maxDate?.toISOString())}" range-start="${o(this.rangeStart?.toISOString())}" range-end="${o(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
|
|
1521
|
-
case "year":
|
|
1522
|
-
return html`<m3e-year-view class="view ${e({
|
|
1523
|
-
before: offset < 0,
|
|
1524
|
-
after: offset > 0,
|
|
1525
|
-
active: view === this._activeView && offset === 0
|
|
1526
|
-
})}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${o(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${o(this.minDate?.toISOString())}" max-date="${o(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
|
|
1527
|
-
case "multi-year":
|
|
1528
|
-
return html`<m3e-multi-year-view class="view ${e({
|
|
1529
|
-
before: offset < 0,
|
|
1530
|
-
after: offset > 0,
|
|
1531
|
-
active: view === this._activeView && offset === 0
|
|
1532
|
-
})}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${o(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${o(this.minDate?.toISOString())}" max-date="${o(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
|
|
1533
|
-
}
|
|
1534
|
-
};
|
|
1535
|
-
_M3eCalendarElement_handleDateChange = function _M3eCalendarElement_handleDateChange(e) {
|
|
1536
|
-
const monthView = e.currentTarget;
|
|
1537
|
-
this._activeDate = new Date(monthView.activeDate);
|
|
1538
|
-
this.rangeStart = monthView.rangeStart;
|
|
1539
|
-
this.rangeEnd = monthView.rangeEnd;
|
|
1540
|
-
this.date = new Date(this._activeDate);
|
|
1541
|
-
this.dispatchEvent(new Event("change", {
|
|
1542
|
-
bubbles: true
|
|
1543
|
-
}));
|
|
1544
|
-
};
|
|
1545
|
-
_M3eCalendarElement_handleMonthChange = /** @private */
|
|
1546
|
-
async function _M3eCalendarElement_handleMonthChange(e) {
|
|
1547
|
-
this._activeDate = new Date(e.currentTarget.activeDate);
|
|
1548
|
-
this._activeView = "month";
|
|
1549
|
-
this.focusActiveCell();
|
|
1550
|
-
};
|
|
1551
|
-
_M3eCalendarElement_handleYearChange = function _M3eCalendarElement_handleYearChange(e) {
|
|
1552
|
-
this._activeDate = new Date(e.currentTarget.activeDate);
|
|
1553
|
-
this._activeView = "year";
|
|
1554
|
-
this.focusActiveCell();
|
|
1555
|
-
};
|
|
1556
|
-
_M3eCalendarElement_handleActiveChange = /** @private */
|
|
1557
|
-
async function _M3eCalendarElement_handleActiveChange(e) {
|
|
1558
|
-
this._activeDate = new Date(e.currentTarget.activeDate);
|
|
1559
|
-
await this.focusActiveCell();
|
|
1560
|
-
};
|
|
1561
|
-
_M3eCalendarElement_getPreviousPeriod = function _M3eCalendarElement_getPreviousPeriod(view) {
|
|
1562
|
-
const activeDate = new Date(this._activeDate);
|
|
1563
|
-
switch (view) {
|
|
1564
|
-
case "month":
|
|
1565
|
-
activeDate.setMonth(this._activeDate.getMonth() - 1);
|
|
1566
|
-
while (activeDate.getMonth() === this._activeDate.getMonth()) {
|
|
1567
|
-
activeDate.setDate(activeDate.getDate() - 1);
|
|
1568
|
-
}
|
|
1569
|
-
break;
|
|
1570
|
-
case "year":
|
|
1571
|
-
activeDate.setFullYear(this._activeDate.getFullYear() - 1);
|
|
1572
|
-
break;
|
|
1573
|
-
case "multi-year":
|
|
1574
|
-
{
|
|
1575
|
-
activeDate.setDate(1);
|
|
1576
|
-
activeDate.setFullYear(minYearOfPage(this._activeDate, this.minDate, this.maxDate) - 1);
|
|
1577
|
-
}
|
|
1578
|
-
}
|
|
1579
|
-
return activeDate;
|
|
1580
|
-
};
|
|
1581
|
-
_M3eCalendarElement_getNextPeriod = function _M3eCalendarElement_getNextPeriod(view) {
|
|
1582
|
-
const activeDate = new Date(this._activeDate);
|
|
1583
|
-
switch (view) {
|
|
1584
|
-
case "month":
|
|
1585
|
-
activeDate.setMonth(this._activeDate.getMonth() + 1);
|
|
1586
|
-
while (activeDate.getMonth() === this._activeDate.getMonth()) {
|
|
1587
|
-
activeDate.setDate(activeDate.getDate() + 1);
|
|
1588
|
-
}
|
|
1589
|
-
break;
|
|
1590
|
-
case "year":
|
|
1591
|
-
activeDate.setFullYear(this._activeDate.getFullYear() + 1);
|
|
1592
|
-
break;
|
|
1593
|
-
case "multi-year":
|
|
1594
|
-
activeDate.setDate(1);
|
|
1595
|
-
activeDate.setFullYear(maxYearOfPage(this._activeDate, this.minDate, this.maxDate) + 1);
|
|
1596
|
-
break;
|
|
1597
|
-
}
|
|
1598
|
-
return activeDate;
|
|
1599
|
-
};
|
|
1600
|
-
/** The styles of the element. */
|
|
1601
|
-
M3eCalendarElement.styles = css`:host { display: inline-block; vertical-align: top; } .header { display: flex; align-items: center; padding-block-start: var(--m3e-calendar-padding, 0.5rem); padding-inline: var(--m3e-calendar-padding, 0.5rem); --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; overflow: hidden; padding-inline: var(--m3e-calendar-padding, 0.5rem); padding-block-end: var(--m3e-calendar-padding, 0.5rem); } .view:not(.no-animate) { transition: ${unsafeCSS(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
|
|
1602
|
-
visibility var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .view.before, .view.after { visibility: hidden; position: absolute; } .view.before { margin-inline-start: -100%; } .view.after { margin-inline-start: 100%; } .view:not(.before):not(.after) { visibility: visible; position: relative; left: 0; margin-inline-start: 0; } .row { opacity: 1; transform: translateY(0); } .row.multi-year { transition: ${unsafeCSS(`transform var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete,
|
|
1603
|
-
opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .row:not(.multi-year) { transition: ${unsafeCSS(`opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .body.month > .row:not(.month), .body.year > .row:not(.year), .body.multi-year > .row:not(.multi-year) { visibility: hidden; position: absolute; transform: translateY(-10%); opacity: 0; } .body.month > .row:not(.month) .view:not(.before):not(.after), .body.year > .row:not(.year) .view:not(.before):not(.after), .body.multi-year > .row:not(.multi-year) .view:not(.before):not(.after) { visibility: hidden; transition: none; } @media (prefers-reduced-motion) { .row:not(.multi-year), .row.multi-year, .view:not(.no-animate), svg { transition: none; } }`;
|
|
1604
|
-
__decorate([r$1()], M3eCalendarElement.prototype, "_today", void 0);
|
|
1605
|
-
__decorate([r$1()], M3eCalendarElement.prototype, "_activeView", void 0);
|
|
1606
|
-
__decorate([r$1()], M3eCalendarElement.prototype, "_activeDate", void 0);
|
|
1607
|
-
__decorate([e$3(".active")], M3eCalendarElement.prototype, "_view", void 0);
|
|
1608
|
-
__decorate([n$1({
|
|
1609
|
-
attribute: "start-view"
|
|
1610
|
-
})], M3eCalendarElement.prototype, "startView", void 0);
|
|
1611
|
-
__decorate([n$1({
|
|
1612
|
-
converter: {
|
|
1613
|
-
fromAttribute: parseDate$1
|
|
1614
|
-
}
|
|
1615
|
-
})], M3eCalendarElement.prototype, "date", void 0);
|
|
1616
|
-
__decorate([n$1({
|
|
1617
|
-
attribute: "start-at",
|
|
1618
|
-
converter: {
|
|
1619
|
-
fromAttribute: parseDate$1
|
|
1620
|
-
}
|
|
1621
|
-
})], M3eCalendarElement.prototype, "startAt", void 0);
|
|
1622
|
-
__decorate([n$1({
|
|
1623
|
-
attribute: "min-date",
|
|
1624
|
-
converter: {
|
|
1625
|
-
fromAttribute: parseDate$1
|
|
1626
|
-
}
|
|
1627
|
-
})], M3eCalendarElement.prototype, "minDate", void 0);
|
|
1628
|
-
__decorate([n$1({
|
|
1629
|
-
attribute: "max-date",
|
|
1630
|
-
converter: {
|
|
1631
|
-
fromAttribute: parseDate$1
|
|
1632
|
-
}
|
|
1633
|
-
})], M3eCalendarElement.prototype, "maxDate", void 0);
|
|
1634
|
-
__decorate([n$1({
|
|
1635
|
-
attribute: "range-start",
|
|
1636
|
-
converter: {
|
|
1637
|
-
fromAttribute: parseDate$1
|
|
1638
|
-
}
|
|
1639
|
-
})], M3eCalendarElement.prototype, "rangeStart", void 0);
|
|
1640
|
-
__decorate([n$1({
|
|
1641
|
-
attribute: "range-end",
|
|
1642
|
-
converter: {
|
|
1643
|
-
fromAttribute: parseDate$1
|
|
1644
|
-
}
|
|
1645
|
-
})], M3eCalendarElement.prototype, "rangeEnd", void 0);
|
|
1646
|
-
__decorate([n$1({
|
|
1647
|
-
attribute: false
|
|
1648
|
-
})], M3eCalendarElement.prototype, "blackoutDates", void 0);
|
|
1649
|
-
__decorate([n$1({
|
|
1650
|
-
attribute: false
|
|
1651
|
-
})], M3eCalendarElement.prototype, "specialDates", void 0);
|
|
1652
|
-
__decorate([n$1({
|
|
1653
|
-
attribute: "previous-month-label"
|
|
1654
|
-
})], M3eCalendarElement.prototype, "previousMonthLabel", void 0);
|
|
1655
|
-
__decorate([n$1({
|
|
1656
|
-
attribute: "previous-year-label"
|
|
1657
|
-
})], M3eCalendarElement.prototype, "previousYearLabel", void 0);
|
|
1658
|
-
__decorate([n$1({
|
|
1659
|
-
attribute: "previous-multi-year-label"
|
|
1660
|
-
})], M3eCalendarElement.prototype, "previousMultiYearLabel", void 0);
|
|
1661
|
-
__decorate([n$1({
|
|
1662
|
-
attribute: "next-month-label"
|
|
1663
|
-
})], M3eCalendarElement.prototype, "nextMonthLabel", void 0);
|
|
1664
|
-
__decorate([n$1({
|
|
1665
|
-
attribute: "next-year-label"
|
|
1666
|
-
})], M3eCalendarElement.prototype, "nextYearLabel", void 0);
|
|
1667
|
-
__decorate([n$1({
|
|
1668
|
-
attribute: "next-multi-year-label"
|
|
1669
|
-
})], M3eCalendarElement.prototype, "nextMultiYearLabel", void 0);
|
|
1670
|
-
M3eCalendarElement = __decorate([t$3("m3e-calendar")], M3eCalendarElement);
|
|
1671
|
-
|
|
1672
|
-
var _M3eDatepickerElement_instances, _M3eDatepickerElement_breakpointUnobserve, _M3eDatepickerElement_trigger, _M3eDatepickerElement_anchor, _M3eDatepickerElement_anchorCleanup, _M3eDatepickerElement_documentClickHandler, _M3eDatepickerElement_scrollController, _M3eDatepickerElement_toggleHandler, _M3eDatepickerElement_renderHeader, _M3eDatepickerElement_handleDocumentClick, _M3eDatepickerElement_handleCalendarChange, _M3eDatepickerElement_handleDismissClick, _M3eDatepickerElement_handleConfirmClick, _M3eDatepickerElement_updateVariant, _M3eDatepickerElement_updatePosition, _M3eDatepickerElement_clearSelectionState;
|
|
1673
|
-
var M3eDatepickerElement_1;
|
|
1674
|
-
/**
|
|
1675
|
-
* Presents a date picker on a temporary surface.
|
|
1676
|
-
*
|
|
1677
|
-
* @description
|
|
1678
|
-
* The `m3e-datepicker` component provides a date selection interface that presents
|
|
1679
|
-
* a temporary surface for picking a date. It supports various variants and modes, including modal
|
|
1680
|
-
* and input-based presentations, with full keyboard navigation and accessibility support.
|
|
1681
|
-
*
|
|
1682
|
-
* @tag m3e-datepicker
|
|
1683
|
-
*
|
|
1684
|
-
* @fires change - Dispatched when the selected date changes.
|
|
1685
|
-
* @fires beforetoggle - Dispatched before the toggle state changes.
|
|
1686
|
-
* @fires toggle - Dispatched after the toggle state has changed.
|
|
1687
|
-
*
|
|
1688
|
-
* @cssprop --m3e-datepicker-container-shape - Controls the corner radius of the container.
|
|
1689
|
-
* @cssprop --m3e-datepicker-container-padding-block - Vertical padding inside the container.
|
|
1690
|
-
* @cssprop --m3e-datepicker-container-color - Background color of the container.
|
|
1691
|
-
* @cssprop --m3e-datepicker-container-elevation - Box shadow elevation of the container.
|
|
1692
|
-
*/
|
|
1693
|
-
let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement extends Role(LitElement, "dialog") {
|
|
1694
|
-
constructor() {
|
|
1695
|
-
super(...arguments);
|
|
1696
|
-
_M3eDatepickerElement_instances.add(this);
|
|
1697
|
-
/** @private */
|
|
1698
|
-
_M3eDatepickerElement_breakpointUnobserve.set(this, void 0);
|
|
1699
|
-
/** @private */
|
|
1700
|
-
_M3eDatepickerElement_trigger.set(this, void 0);
|
|
1701
|
-
/** @private */
|
|
1702
|
-
_M3eDatepickerElement_anchor.set(this, void 0);
|
|
1703
|
-
/** @private */
|
|
1704
|
-
_M3eDatepickerElement_anchorCleanup.set(this, void 0);
|
|
1705
|
-
/** @private */
|
|
1706
|
-
_M3eDatepickerElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleDocumentClick).call(this, e));
|
|
1707
|
-
/** @private */
|
|
1708
|
-
_M3eDatepickerElement_scrollController.set(this, new ScrollController(this, {
|
|
1709
|
-
target: null,
|
|
1710
|
-
callback: () => this.hide(false)
|
|
1711
|
-
}));
|
|
1712
|
-
/** @private */
|
|
1713
|
-
_M3eDatepickerElement_toggleHandler.set(this, e => {
|
|
1714
|
-
if (e.newState === "closed") {
|
|
1715
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
|
|
1716
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
|
|
1717
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
|
|
1718
|
-
}
|
|
1719
|
-
});
|
|
1720
|
-
/**
|
|
1721
|
-
* The appearance variant of the picker.
|
|
1722
|
-
* @default "docked"
|
|
1723
|
-
*/
|
|
1724
|
-
this.variant = "docked";
|
|
1725
|
-
/**
|
|
1726
|
-
* The initial view used to select a date.
|
|
1727
|
-
* @default "month"
|
|
1728
|
-
*/
|
|
1729
|
-
this.startView = "month";
|
|
1730
|
-
/**
|
|
1731
|
-
* The selected date.
|
|
1732
|
-
* @default null
|
|
1733
|
-
*/
|
|
1734
|
-
this.date = null;
|
|
1735
|
-
/**
|
|
1736
|
-
* A date specifying the period (month or year) to start the calendar in.
|
|
1737
|
-
* @default null
|
|
1738
|
-
*/
|
|
1739
|
-
this.startAt = null;
|
|
1740
|
-
/**
|
|
1741
|
-
* The minimum date that can be selected.
|
|
1742
|
-
* @default null
|
|
1743
|
-
*/
|
|
1744
|
-
this.minDate = null;
|
|
1745
|
-
/**
|
|
1746
|
-
* The maximum date that can be selected.
|
|
1747
|
-
* @default null
|
|
1748
|
-
*/
|
|
1749
|
-
this.maxDate = null;
|
|
1750
|
-
/**
|
|
1751
|
-
* Start of a date range.
|
|
1752
|
-
* @default null
|
|
1753
|
-
*/
|
|
1754
|
-
this.rangeStart = null;
|
|
1755
|
-
/**
|
|
1756
|
-
* End of a date range.
|
|
1757
|
-
* @default null
|
|
1758
|
-
*/
|
|
1759
|
-
this.rangeEnd = null;
|
|
1760
|
-
/**
|
|
1761
|
-
* A function used to determine whether a date cannot be selected.
|
|
1762
|
-
* @default null
|
|
1763
|
-
*/
|
|
1764
|
-
this.blackoutDates = null;
|
|
1765
|
-
/**
|
|
1766
|
-
* A function used to determine whether a date is special.
|
|
1767
|
-
* @default null
|
|
1768
|
-
*/
|
|
1769
|
-
this.specialDates = null;
|
|
1770
|
-
/**
|
|
1771
|
-
* The accessible label given to the button used to move to the previous month.
|
|
1772
|
-
* @default "Previous month"
|
|
1773
|
-
*/
|
|
1774
|
-
this.previousMonthLabel = "Previous month";
|
|
1775
|
-
/**
|
|
1776
|
-
* The accessible label given to the button used to move to the previous year.
|
|
1777
|
-
* @default "Previous year"
|
|
1778
|
-
*/
|
|
1779
|
-
this.previousYearLabel = "Previous year";
|
|
1780
|
-
/**
|
|
1781
|
-
* The accessible label given to the button used to move to the previous 24 years.
|
|
1782
|
-
* @default "Previous 24 years"
|
|
1783
|
-
*/
|
|
1784
|
-
this.previousMultiYearLabel = "Previous 24 years";
|
|
1785
|
-
/**
|
|
1786
|
-
* The accessible label given to the button used to move to the next month.
|
|
1787
|
-
* @default "Next month"
|
|
1788
|
-
*/
|
|
1789
|
-
this.nextMonthLabel = "Next month";
|
|
1790
|
-
/**
|
|
1791
|
-
* The accessible label given to the button used to move to the next year.
|
|
1792
|
-
* @default "Next year"
|
|
1793
|
-
*/
|
|
1794
|
-
this.nextYearLabel = "Next year";
|
|
1795
|
-
/**
|
|
1796
|
-
* The accessible label given to the button used to move to the next 24 years.
|
|
1797
|
-
* @default "Next 24 years"
|
|
1798
|
-
*/
|
|
1799
|
-
this.nextMultiYearLabel = "Next 24 years";
|
|
1800
|
-
/**
|
|
1801
|
-
* The label given to the button used apply the selected date and close the picker.
|
|
1802
|
-
* @default "OK"
|
|
1803
|
-
*/
|
|
1804
|
-
this.confirmLabel = "OK";
|
|
1805
|
-
/**
|
|
1806
|
-
* The label given to the button used discard the selected date and close the picker.
|
|
1807
|
-
* @default "Cancel"
|
|
1808
|
-
*/
|
|
1809
|
-
this.dismissLabel = "Cancel";
|
|
1810
|
-
/**
|
|
1811
|
-
* The label given to the the picker.
|
|
1812
|
-
* @default "Select date"
|
|
1813
|
-
*/
|
|
1814
|
-
this.label = "Select date";
|
|
1815
|
-
}
|
|
1816
|
-
/** Whether the picker is open. */
|
|
1817
|
-
get isOpen() {
|
|
1818
|
-
return __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") !== undefined;
|
|
1819
|
-
}
|
|
1820
|
-
/** The current variant applied to the picker. */
|
|
1821
|
-
get currentVariant() {
|
|
1822
|
-
return this._variant ?? (this.variant !== "modal" ? "docked" : "modal");
|
|
1823
|
-
}
|
|
1824
|
-
/** @inheritdoc */
|
|
1825
|
-
connectedCallback() {
|
|
1826
|
-
super.connectedCallback();
|
|
1827
|
-
this.ariaModal = "true";
|
|
1828
|
-
this.classList.add("-no-animate");
|
|
1829
|
-
this.setAttribute("popover", "manual");
|
|
1830
|
-
this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eDatepickerElement_toggleHandler, "f"));
|
|
1831
|
-
document.addEventListener("click", __classPrivateFieldGet(this, _M3eDatepickerElement_documentClickHandler, "f"));
|
|
1832
|
-
}
|
|
1833
|
-
/** @inheritdoc */
|
|
1834
|
-
disconnectedCallback() {
|
|
1835
|
-
super.disconnectedCallback();
|
|
1836
|
-
this._variant = undefined;
|
|
1837
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
|
|
1838
|
-
this.classList.remove("-docked");
|
|
1839
|
-
this.classList.remove("-modal");
|
|
1840
|
-
this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eDatepickerElement_toggleHandler, "f"));
|
|
1841
|
-
document.removeEventListener("click", __classPrivateFieldGet(this, _M3eDatepickerElement_documentClickHandler, "f"));
|
|
1842
|
-
}
|
|
1843
|
-
/**
|
|
1844
|
-
* Opens the picker.
|
|
1845
|
-
* @param {HTMLElement} trigger The element that triggered the picker.
|
|
1846
|
-
* @param {HTMLElement | undefined} anchor The element used to position the picker.
|
|
1847
|
-
* @returns {Promise<void>} A `Promise` that resolves when the picker is opened.
|
|
1848
|
-
*/
|
|
1849
|
-
async show(trigger, anchor) {
|
|
1850
|
-
if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") && __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") !== trigger) {
|
|
1851
|
-
this.hide();
|
|
1852
|
-
}
|
|
1853
|
-
this._calendar.date = this.date;
|
|
1854
|
-
this._calendar.rangeStart = this.rangeStart;
|
|
1855
|
-
this._calendar.rangeEnd = this.rangeEnd;
|
|
1856
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_trigger, trigger, "f");
|
|
1857
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").ariaExpanded = "true";
|
|
1858
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_anchor, anchor, "f");
|
|
1859
|
-
await __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updatePosition).call(this);
|
|
1860
|
-
this.showPopover();
|
|
1861
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f"));
|
|
1862
|
-
await this._calendar.focusActiveCell();
|
|
1863
|
-
}
|
|
1864
|
-
/**
|
|
1865
|
-
* Hides the picker.
|
|
1866
|
-
* @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.
|
|
1867
|
-
*/
|
|
1868
|
-
hide(restoreFocus = false) {
|
|
1869
|
-
this.hidePopover();
|
|
1870
|
-
if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
|
|
1871
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").ariaExpanded = "false";
|
|
1872
|
-
if (restoreFocus) {
|
|
1873
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f").focus();
|
|
1874
|
-
}
|
|
1875
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f"));
|
|
1876
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_trigger, undefined, "f");
|
|
1877
|
-
}
|
|
1878
|
-
}
|
|
1879
|
-
/**
|
|
1880
|
-
* Toggles the picker.
|
|
1881
|
-
* @param {HTMLElement} trigger The element that triggered the picker.
|
|
1882
|
-
* @param {HTMLElement | undefined} anchor The element used to position the picker.
|
|
1883
|
-
* @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.
|
|
1884
|
-
*/
|
|
1885
|
-
async toggle(trigger, anchor) {
|
|
1886
|
-
if (__classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
|
|
1887
|
-
this.hide();
|
|
1888
|
-
} else {
|
|
1889
|
-
await this.show(trigger, anchor);
|
|
1890
|
-
}
|
|
1891
|
-
}
|
|
1892
|
-
/** @inheritdoc */
|
|
1893
|
-
render() {
|
|
1894
|
-
return html`<m3e-focus-trap>${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_renderHeader).call(this)}<m3e-calendar start-view="${this.startView}" start-at="${o(this.startAt?.toISOString())}" min-date="${o(this.minDate?.toISOString())}" max-date="${o(this.maxDate?.toISOString())}" @change="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleCalendarChange)}"></m3e-calendar><div class="actions"><m3e-button @click="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleDismissClick)}">${this.dismissLabel}</m3e-button><m3e-button @click="${__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_handleConfirmClick)}">${this.confirmLabel}</m3e-button></div></m3e-focus-trap>`;
|
|
1895
|
-
}
|
|
1896
|
-
/** @inheritdoc */
|
|
1897
|
-
firstUpdated(_changedProperties) {
|
|
1898
|
-
super.firstUpdated(_changedProperties);
|
|
1899
|
-
requestAnimationFrame(() => this.classList.remove("-no-animate"));
|
|
1900
|
-
}
|
|
1901
|
-
/** @inheritdoc */
|
|
1902
|
-
update(changedProperties) {
|
|
1903
|
-
super.update(changedProperties);
|
|
1904
|
-
if (["date", "rangeStart", "rangeEnd"].some(x => changedProperties.has(x))) {
|
|
1905
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
|
|
1906
|
-
}
|
|
1907
|
-
if (changedProperties.has("variant")) {
|
|
1908
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
|
|
1909
|
-
if (this.variant === "auto") {
|
|
1910
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => {
|
|
1911
|
-
this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? "modal" : "docked";
|
|
1912
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updateVariant).call(this);
|
|
1913
|
-
}), "f");
|
|
1914
|
-
} else {
|
|
1915
|
-
this._variant = undefined;
|
|
1916
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updateVariant).call(this);
|
|
1917
|
-
}
|
|
1918
|
-
}
|
|
1919
|
-
}
|
|
1920
|
-
/** @inheritdoc */
|
|
1921
|
-
updated(_changedProperties) {
|
|
1922
|
-
super.updated(_changedProperties);
|
|
1923
|
-
if (_changedProperties.has("specialDates") || _changedProperties.has("blackoutDates")) {
|
|
1924
|
-
this._calendar.specialDates = this.specialDates;
|
|
1925
|
-
this._calendar.blackoutDates = this.blackoutDates;
|
|
1926
|
-
}
|
|
1927
|
-
}
|
|
1928
|
-
};
|
|
1929
|
-
_M3eDatepickerElement_breakpointUnobserve = new WeakMap();
|
|
1930
|
-
_M3eDatepickerElement_trigger = new WeakMap();
|
|
1931
|
-
_M3eDatepickerElement_anchor = new WeakMap();
|
|
1932
|
-
_M3eDatepickerElement_anchorCleanup = new WeakMap();
|
|
1933
|
-
_M3eDatepickerElement_documentClickHandler = new WeakMap();
|
|
1934
|
-
_M3eDatepickerElement_scrollController = new WeakMap();
|
|
1935
|
-
_M3eDatepickerElement_toggleHandler = new WeakMap();
|
|
1936
|
-
_M3eDatepickerElement_instances = new WeakSet();
|
|
1937
|
-
_M3eDatepickerElement_renderHeader = function _M3eDatepickerElement_renderHeader() {
|
|
1938
|
-
if (this.currentVariant === "docked") return nothing;
|
|
1939
|
-
const selectedDate = this._date ?? this.date;
|
|
1940
|
-
return html`<div class="supporting-text">${this.label}</div><div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
|
|
1941
|
-
weekday: "short",
|
|
1942
|
-
month: "short",
|
|
1943
|
-
day: "numeric"
|
|
1944
|
-
}).format(selectedDate) : "––"}</div><div class="divider"></div>`;
|
|
1945
|
-
};
|
|
1946
|
-
_M3eDatepickerElement_handleDocumentClick = function _M3eDatepickerElement_handleDocumentClick(e) {
|
|
1947
|
-
if (!e.composedPath().some(x => x instanceof M3eDatepickerElement_1 || x === __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f"))) {
|
|
1948
|
-
this.hide();
|
|
1949
|
-
}
|
|
1950
|
-
};
|
|
1951
|
-
_M3eDatepickerElement_handleCalendarChange = function _M3eDatepickerElement_handleCalendarChange() {
|
|
1952
|
-
this._date = this._calendar.date;
|
|
1953
|
-
this._rangeStart = this._calendar.rangeStart;
|
|
1954
|
-
this._rangeEnd = this._calendar.rangeEnd;
|
|
1955
|
-
};
|
|
1956
|
-
_M3eDatepickerElement_handleDismissClick = function _M3eDatepickerElement_handleDismissClick() {
|
|
1957
|
-
this.hide(true);
|
|
1958
|
-
};
|
|
1959
|
-
_M3eDatepickerElement_handleConfirmClick = function _M3eDatepickerElement_handleConfirmClick() {
|
|
1960
|
-
this.date = this._date ?? this.date;
|
|
1961
|
-
this.rangeStart = this._rangeStart ?? this.rangeStart;
|
|
1962
|
-
this.rangeEnd = this._rangeEnd ?? this.rangeEnd;
|
|
1963
|
-
this.hide(true);
|
|
1964
|
-
this.dispatchEvent(new Event("change", {
|
|
1965
|
-
bubbles: true
|
|
1966
|
-
}));
|
|
1967
|
-
};
|
|
1968
|
-
_M3eDatepickerElement_updateVariant = function _M3eDatepickerElement_updateVariant() {
|
|
1969
|
-
switch (this.currentVariant) {
|
|
1970
|
-
case "docked":
|
|
1971
|
-
this.classList.remove("-modal");
|
|
1972
|
-
this.classList.add("-docked");
|
|
1973
|
-
break;
|
|
1974
|
-
case "modal":
|
|
1975
|
-
this.classList.remove("-docked");
|
|
1976
|
-
this.classList.add("-modal");
|
|
1977
|
-
break;
|
|
1978
|
-
}
|
|
1979
|
-
if (this.isOpen) {
|
|
1980
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_updatePosition).call(this);
|
|
1981
|
-
}
|
|
1982
|
-
};
|
|
1983
|
-
_M3eDatepickerElement_updatePosition = /** @private */
|
|
1984
|
-
async function _M3eDatepickerElement_updatePosition() {
|
|
1985
|
-
if (this.currentVariant === "docked" && __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
|
|
1986
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, await positionAnchor(this, __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f") ?? __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f"), {
|
|
1987
|
-
position: "bottom-start",
|
|
1988
|
-
inline: true,
|
|
1989
|
-
flip: true
|
|
1990
|
-
}, (x, y, position) => {
|
|
1991
|
-
this.classList.toggle("-top", position.includes("top"));
|
|
1992
|
-
this.classList.toggle("-bottom", position.includes("bottom"));
|
|
1993
|
-
if (M3eDirectionality.current === "rtl") {
|
|
1994
|
-
this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
|
|
1995
|
-
this.style.left = "";
|
|
1996
|
-
} else {
|
|
1997
|
-
this.style.left = `${x}px`;
|
|
1998
|
-
this.style.right = "";
|
|
1999
|
-
}
|
|
2000
|
-
this.style.top = `${y}px`;
|
|
2001
|
-
}), "f");
|
|
2002
|
-
} else {
|
|
2003
|
-
__classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
|
|
2004
|
-
__classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
|
|
2005
|
-
this.style.left = "";
|
|
2006
|
-
this.style.right = "";
|
|
2007
|
-
this.style.top = "";
|
|
2008
|
-
}
|
|
2009
|
-
};
|
|
2010
|
-
_M3eDatepickerElement_clearSelectionState = function _M3eDatepickerElement_clearSelectionState() {
|
|
2011
|
-
this._date = this._rangeStart = this._rangeEnd = undefined;
|
|
2012
|
-
};
|
|
2013
|
-
/** The styles of the element. */
|
|
2014
|
-
M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .headline { font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; justify-content: flex-end; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } :host(.-docked) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken.shape.corner.large}); } :host(.-modal) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
2015
|
-
transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
2016
|
-
overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
2017
|
-
display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(.-docked)::backdrop { background-color: transparent; } :host(.-modal)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(.-modal:not(:popover-open))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
2018
|
-
overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
2019
|
-
visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(.-modal:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
|
|
2020
|
-
overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
2021
|
-
visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } :host(.-modal:popover-open)::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`;
|
|
2022
|
-
__decorate([r$1()], M3eDatepickerElement.prototype, "_date", void 0);
|
|
2023
|
-
__decorate([r$1()], M3eDatepickerElement.prototype, "_rangeStart", void 0);
|
|
2024
|
-
__decorate([r$1()], M3eDatepickerElement.prototype, "_rangeEnd", void 0);
|
|
2025
|
-
__decorate([e$3("m3e-calendar")], M3eDatepickerElement.prototype, "_calendar", void 0);
|
|
2026
|
-
__decorate([r$1()], M3eDatepickerElement.prototype, "_variant", void 0);
|
|
2027
|
-
__decorate([n$1()], M3eDatepickerElement.prototype, "variant", void 0);
|
|
2028
|
-
__decorate([n$1({
|
|
2029
|
-
attribute: "start-view"
|
|
2030
|
-
})], M3eDatepickerElement.prototype, "startView", void 0);
|
|
2031
|
-
__decorate([n$1({
|
|
2032
|
-
converter: {
|
|
2033
|
-
fromAttribute: parseDate
|
|
2034
|
-
}
|
|
2035
|
-
})], M3eDatepickerElement.prototype, "date", void 0);
|
|
2036
|
-
__decorate([n$1({
|
|
2037
|
-
attribute: "start-at",
|
|
2038
|
-
converter: {
|
|
2039
|
-
fromAttribute: parseDate
|
|
2040
|
-
}
|
|
2041
|
-
})], M3eDatepickerElement.prototype, "startAt", void 0);
|
|
2042
|
-
__decorate([n$1({
|
|
2043
|
-
attribute: "min-date",
|
|
2044
|
-
converter: {
|
|
2045
|
-
fromAttribute: parseDate
|
|
2046
|
-
}
|
|
2047
|
-
})], M3eDatepickerElement.prototype, "minDate", void 0);
|
|
2048
|
-
__decorate([n$1({
|
|
2049
|
-
attribute: "max-date",
|
|
2050
|
-
converter: {
|
|
2051
|
-
fromAttribute: parseDate
|
|
2052
|
-
}
|
|
2053
|
-
})], M3eDatepickerElement.prototype, "maxDate", void 0);
|
|
2054
|
-
__decorate([n$1({
|
|
2055
|
-
attribute: "range-start",
|
|
2056
|
-
converter: {
|
|
2057
|
-
fromAttribute: parseDate
|
|
2058
|
-
}
|
|
2059
|
-
})], M3eDatepickerElement.prototype, "rangeStart", void 0);
|
|
2060
|
-
__decorate([n$1({
|
|
2061
|
-
attribute: "range-end",
|
|
2062
|
-
converter: {
|
|
2063
|
-
fromAttribute: parseDate
|
|
2064
|
-
}
|
|
2065
|
-
})], M3eDatepickerElement.prototype, "rangeEnd", void 0);
|
|
2066
|
-
__decorate([n$1({
|
|
2067
|
-
attribute: false
|
|
2068
|
-
})], M3eDatepickerElement.prototype, "blackoutDates", void 0);
|
|
2069
|
-
__decorate([n$1({
|
|
2070
|
-
attribute: false
|
|
2071
|
-
})], M3eDatepickerElement.prototype, "specialDates", void 0);
|
|
2072
|
-
__decorate([n$1({
|
|
2073
|
-
attribute: "previous-month-label"
|
|
2074
|
-
})], M3eDatepickerElement.prototype, "previousMonthLabel", void 0);
|
|
2075
|
-
__decorate([n$1({
|
|
2076
|
-
attribute: "previous-year-label"
|
|
2077
|
-
})], M3eDatepickerElement.prototype, "previousYearLabel", void 0);
|
|
2078
|
-
__decorate([n$1({
|
|
2079
|
-
attribute: "previous-multi-year-label"
|
|
2080
|
-
})], M3eDatepickerElement.prototype, "previousMultiYearLabel", void 0);
|
|
2081
|
-
__decorate([n$1({
|
|
2082
|
-
attribute: "next-month-label"
|
|
2083
|
-
})], M3eDatepickerElement.prototype, "nextMonthLabel", void 0);
|
|
2084
|
-
__decorate([n$1({
|
|
2085
|
-
attribute: "next-year-label"
|
|
2086
|
-
})], M3eDatepickerElement.prototype, "nextYearLabel", void 0);
|
|
2087
|
-
__decorate([n$1({
|
|
2088
|
-
attribute: "next-multi-year-label"
|
|
2089
|
-
})], M3eDatepickerElement.prototype, "nextMultiYearLabel", void 0);
|
|
2090
|
-
__decorate([n$1({
|
|
2091
|
-
attribute: "confirm-label"
|
|
2092
|
-
})], M3eDatepickerElement.prototype, "confirmLabel", void 0);
|
|
2093
|
-
__decorate([n$1({
|
|
2094
|
-
attribute: "dismiss-label"
|
|
2095
|
-
})], M3eDatepickerElement.prototype, "dismissLabel", void 0);
|
|
2096
|
-
__decorate([n$1()], M3eDatepickerElement.prototype, "label", void 0);
|
|
2097
|
-
M3eDatepickerElement = M3eDatepickerElement_1 = __decorate([t$3("m3e-datepicker")], M3eDatepickerElement);
|
|
2098
|
-
/** @private */
|
|
2099
|
-
function parseDate(value) {
|
|
2100
|
-
return !value ? null : new Date(value);
|
|
2101
|
-
}
|
|
2102
|
-
|
|
2103
|
-
/**
|
|
2104
|
-
* An element, nested within a clickable element, used to toggle a datepicker.
|
|
2105
|
-
* @tag m3e-datepicker-toggle
|
|
2106
|
-
*/
|
|
2107
|
-
let M3eDatepickerToggleElement = class M3eDatepickerToggleElement extends HtmlFor(ActionElementBase) {
|
|
2108
|
-
/** @inheritdoc */
|
|
2109
|
-
connectedCallback() {
|
|
2110
|
-
super.connectedCallback();
|
|
2111
|
-
if (this.parentElement) {
|
|
2112
|
-
this.parentElement.ariaHasPopup = "dialog";
|
|
2113
|
-
}
|
|
2114
|
-
}
|
|
2115
|
-
/** @inheritdoc */
|
|
2116
|
-
disconnectedCallback() {
|
|
2117
|
-
super.disconnectedCallback();
|
|
2118
|
-
if (this.parentElement) {
|
|
2119
|
-
this.parentElement.ariaHasPopup = null;
|
|
2120
|
-
}
|
|
2121
|
-
}
|
|
2122
|
-
/** @inheritdoc */
|
|
2123
|
-
_onClick() {
|
|
2124
|
-
if (this.control instanceof M3eDatepickerElement && this.parentElement) {
|
|
2125
|
-
this.control.toggle(this.parentElement, this.closest("m3e-form-field") ?? undefined);
|
|
2126
|
-
}
|
|
2127
|
-
}
|
|
2128
|
-
};
|
|
2129
|
-
M3eDatepickerToggleElement = __decorate([t$3("m3e-datepicker-toggle")], M3eDatepickerToggleElement);
|
|
2130
|
-
|
|
2131
|
-
/**
|
|
2132
|
-
* Adapted from Angular Material Datepicker
|
|
2133
|
-
* Source: https://github.com/angular/components/blob/main/src/material/datepicker/multi-year-view.ts
|
|
2134
|
-
*
|
|
2135
|
-
* @license MIT
|
|
2136
|
-
* Copyright (c) 2025 Google LLC
|
|
2137
|
-
* See LICENSE file in the project root for full license text.
|
|
2138
|
-
*/
|
|
2139
|
-
var _M3eMultiYearViewElement_instances, _M3eMultiYearViewElement_renderItem, _M3eMultiYearViewElement_handleItemClick, _M3eMultiYearViewElement_handleItemKeyDown;
|
|
2140
|
-
/**
|
|
2141
|
-
* An internal component used to display a year selector in a calendar.
|
|
2142
|
-
* @internal
|
|
2143
|
-
*/
|
|
2144
|
-
let M3eMultiYearViewElement = class M3eMultiYearViewElement extends CalendarViewElementBase {
|
|
2145
|
-
constructor() {
|
|
2146
|
-
super(...arguments);
|
|
2147
|
-
_M3eMultiYearViewElement_instances.add(this);
|
|
2148
|
-
}
|
|
2149
|
-
/** @inheritdoc */
|
|
2150
|
-
render() {
|
|
2151
|
-
const years = new Array();
|
|
2152
|
-
const minYear = minYearOfPage(this.activeDate, this.minDate, this.maxDate);
|
|
2153
|
-
for (let i = 0, row = []; i < YEARS_PER_PAGE; i++) {
|
|
2154
|
-
row.push(minYear + i);
|
|
2155
|
-
if (row.length === YEARS_PER_ROW) {
|
|
2156
|
-
years.push(row);
|
|
2157
|
-
row = new Array();
|
|
2158
|
-
}
|
|
2159
|
-
}
|
|
2160
|
-
return html`<table role="grid"><thead aria-hidden="true"><tr><th colspan="${YEARS_PER_ROW}"></th></tr></thead><tbody>${years.map(row => html`<tr role="row">${row.map(year => __classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_renderItem).call(this, year))}</tr>`)}</tbody></table>`;
|
|
2161
|
-
}
|
|
2162
|
-
};
|
|
2163
|
-
_M3eMultiYearViewElement_instances = new WeakSet();
|
|
2164
|
-
_M3eMultiYearViewElement_renderItem = function _M3eMultiYearViewElement_renderItem(year) {
|
|
2165
|
-
const yearFormat = new Intl.DateTimeFormat(navigator.language, {
|
|
2166
|
-
year: "numeric"
|
|
2167
|
-
});
|
|
2168
|
-
const active = this.activeDate.getFullYear() === year;
|
|
2169
|
-
const selected = this.date?.getFullYear() === year;
|
|
2170
|
-
const current = this.today.getFullYear() === year;
|
|
2171
|
-
const disabled = this.minDate && year < this.minDate.getFullYear() || this.maxDate && year > this.maxDate.getFullYear();
|
|
2172
|
-
const id = `year-${year}`;
|
|
2173
|
-
return html`<td role="gridcell" class="${e({
|
|
2174
|
-
current,
|
|
2175
|
-
selected,
|
|
2176
|
-
active
|
|
2177
|
-
})}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${year}" aria-disabled="${o(disabled || undefined)}" aria-current="${o(current ? "date" : undefined)}" aria-pressed="${selected}" @click="${__classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_handleItemClick)}" @keydown="${__classPrivateFieldGet(this, _M3eMultiYearViewElement_instances, "m", _M3eMultiYearViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" for="${id}" centered ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span>${yearFormat.format(new Date(year, 0, 1))}</span></div></td>`;
|
|
2178
|
-
};
|
|
2179
|
-
_M3eMultiYearViewElement_handleItemClick = function _M3eMultiYearViewElement_handleItemClick(e) {
|
|
2180
|
-
const item = e.currentTarget;
|
|
2181
|
-
if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
|
|
2182
|
-
this.activeDate = new Date(this.activeDate);
|
|
2183
|
-
this.activeDate.setFullYear(Number(item.dataset["value"]));
|
|
2184
|
-
this.activeDate = clampDate(this.activeDate, this.minDate, this.maxDate);
|
|
2185
|
-
this.dispatchEvent(new Event("change", {
|
|
2186
|
-
bubbles: false
|
|
2187
|
-
}));
|
|
2188
|
-
};
|
|
2189
|
-
_M3eMultiYearViewElement_handleItemKeyDown = function _M3eMultiYearViewElement_handleItemKeyDown(e) {
|
|
2190
|
-
let activeDate = this.activeDate;
|
|
2191
|
-
switch (e.key) {
|
|
2192
|
-
case " ":
|
|
2193
|
-
case "Enter":
|
|
2194
|
-
e.preventDefault();
|
|
2195
|
-
e.currentTarget.click();
|
|
2196
|
-
return;
|
|
2197
|
-
case "ArrowLeft":
|
|
2198
|
-
case "Left":
|
|
2199
|
-
activeDate = addCalendarYears(this.activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
|
|
2200
|
-
break;
|
|
2201
|
-
case "ArrowRight":
|
|
2202
|
-
case "Right":
|
|
2203
|
-
activeDate = addCalendarYears(this.activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
|
|
2204
|
-
break;
|
|
2205
|
-
case "ArrowUp":
|
|
2206
|
-
case "Up":
|
|
2207
|
-
activeDate = addCalendarYears(this.activeDate, -YEARS_PER_ROW);
|
|
2208
|
-
break;
|
|
2209
|
-
case "ArrowDown":
|
|
2210
|
-
case "Down":
|
|
2211
|
-
activeDate = addCalendarYears(this.activeDate, YEARS_PER_ROW);
|
|
2212
|
-
break;
|
|
2213
|
-
case "Home":
|
|
2214
|
-
activeDate = addCalendarYears(this.activeDate, -getActiveOffset(this.activeDate, this.minDate, this.maxDate));
|
|
2215
|
-
break;
|
|
2216
|
-
case "End":
|
|
2217
|
-
activeDate = addCalendarYears(this.activeDate, YEARS_PER_PAGE - getActiveOffset(this.activeDate, this.minDate, this.maxDate) - 1);
|
|
2218
|
-
break;
|
|
2219
|
-
case "PageUp":
|
|
2220
|
-
activeDate = addCalendarYears(this.activeDate, e.altKey ? -YEARS_PER_PAGE * 10 : -YEARS_PER_PAGE);
|
|
2221
|
-
break;
|
|
2222
|
-
case "PageDown":
|
|
2223
|
-
activeDate = addCalendarYears(this.activeDate, e.altKey ? YEARS_PER_PAGE * 10 : YEARS_PER_PAGE);
|
|
2224
|
-
break;
|
|
2225
|
-
default:
|
|
2226
|
-
return;
|
|
2227
|
-
}
|
|
2228
|
-
e.preventDefault();
|
|
2229
|
-
this._changeActiveDate(activeDate);
|
|
2230
|
-
};
|
|
2231
|
-
/** The styles of the element. */
|
|
2232
|
-
M3eMultiYearViewElement.styles = [CalendarViewElementBase.styles, css`.item { height: 2.25rem; } .touch { width: 100%; } th { height: 1rem; } td { padding-inline: 1rem; } tbody { font-size: var(--m3e-calendar-item-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-item-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-item-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-item-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); }`];
|
|
2233
|
-
M3eMultiYearViewElement = __decorate([t$3("m3e-multi-year-view")], M3eMultiYearViewElement);
|
|
2234
|
-
|
|
2235
|
-
/**
|
|
2236
|
-
* Adapted from Angular Material Datepicker
|
|
2237
|
-
* Source: https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts
|
|
2238
|
-
*
|
|
2239
|
-
* @license MIT
|
|
2240
|
-
* Copyright (c) 2025 Google LLC
|
|
2241
|
-
* See LICENSE file in the project root for full license text.
|
|
2242
|
-
*/
|
|
2243
|
-
var _M3eYearViewElement_instances, _M3eYearViewElement_renderItem, _M3eYearViewElement_handleItemClick, _M3eYearViewElement_handleItemKeyDown;
|
|
2244
|
-
/**
|
|
2245
|
-
* An internal component used to display a single year in a calendar.
|
|
2246
|
-
* @internal
|
|
2247
|
-
*/
|
|
2248
|
-
let M3eYearViewElement = class M3eYearViewElement extends CalendarViewElementBase {
|
|
2249
|
-
constructor() {
|
|
2250
|
-
super(...arguments);
|
|
2251
|
-
_M3eYearViewElement_instances.add(this);
|
|
2252
|
-
}
|
|
2253
|
-
/** @inheritdoc */
|
|
2254
|
-
render() {
|
|
2255
|
-
const months = new Array();
|
|
2256
|
-
const shortFormat = new Intl.DateTimeFormat(navigator.language, {
|
|
2257
|
-
month: "short"
|
|
2258
|
-
});
|
|
2259
|
-
const longFormat = new Intl.DateTimeFormat(navigator.language, {
|
|
2260
|
-
month: "long"
|
|
2261
|
-
});
|
|
2262
|
-
const year = this.activeDate.getFullYear();
|
|
2263
|
-
for (let month = 0, row = new Array(); month < 12; month++) {
|
|
2264
|
-
const date = new Date(year, month, 1);
|
|
2265
|
-
row.push({
|
|
2266
|
-
narrow: shortFormat.format(date),
|
|
2267
|
-
long: longFormat.format(date),
|
|
2268
|
-
date: date
|
|
2269
|
-
});
|
|
2270
|
-
if (row.length == MONTHS_PER_ROW) {
|
|
2271
|
-
months.push(row);
|
|
2272
|
-
row = [];
|
|
2273
|
-
}
|
|
2274
|
-
}
|
|
2275
|
-
return html`<table role="grid"><thead aria-hidden="true"><tr><th colspan="${MONTHS_PER_ROW}"></th></tr></thead><tbody>${months.map(row => html`<tr role="row">${row.map(month => __classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_renderItem).call(this, month))}</tr>`)}</tbody></table>`;
|
|
2276
|
-
}
|
|
2277
|
-
};
|
|
2278
|
-
_M3eYearViewElement_instances = new WeakSet();
|
|
2279
|
-
_M3eYearViewElement_renderItem = function _M3eYearViewElement_renderItem(month) {
|
|
2280
|
-
const active = this.activeDate.getFullYear() === month.date.getFullYear() && this.activeDate.getMonth() === month.date.getMonth();
|
|
2281
|
-
const selected = this.date?.getFullYear() === month.date.getFullYear() && this.date?.getMonth() === month.date.getMonth();
|
|
2282
|
-
const current = this.today.getFullYear() === month.date.getFullYear() && this.today.getMonth() === month.date.getMonth();
|
|
2283
|
-
const disabled = this.minDate && (month.date.getFullYear() < this.minDate.getFullYear() || month.date.getFullYear() === this.minDate.getFullYear() && month.date.getMonth() < this.minDate.getMonth()) || this.maxDate && (month.date.getFullYear() > this.maxDate.getFullYear() || month.date.getFullYear() === this.maxDate.getFullYear() && month.date.getMonth() > this.maxDate.getMonth());
|
|
2284
|
-
const id = `month-${month.date.getMonth()}`;
|
|
2285
|
-
return html`<td role="gridcell" class="${e({
|
|
2286
|
-
current,
|
|
2287
|
-
selected,
|
|
2288
|
-
active
|
|
2289
|
-
})}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${month.date.toISOString()}" aria-disabled="${o(disabled || undefined)}" aria-current="${o(current ? "date" : undefined)}" aria-pressed="${selected}" @click="${__classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_handleItemClick)}" @keydown="${__classPrivateFieldGet(this, _M3eYearViewElement_instances, "m", _M3eYearViewElement_handleItemKeyDown)}"><m3e-focus-ring class="focus-ring" for="${id}"></m3e-focus-ring><m3e-state-layer class="state-layer" for="${id}" ?disable-hover="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered for="${id}" ?disabled="${disabled}"></m3e-ripple><div class="touch"></div><span class="visually-hidden">${month.long}</span> <span aria-hidden="true">${month.narrow}</span></div></td>`;
|
|
2290
|
-
};
|
|
2291
|
-
_M3eYearViewElement_handleItemClick = function _M3eYearViewElement_handleItemClick(e) {
|
|
2292
|
-
const item = e.currentTarget;
|
|
2293
|
-
if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
|
|
2294
|
-
this.activeDate = clampDate(new Date(item.dataset["value"]), this.minDate, this.maxDate);
|
|
2295
|
-
this.dispatchEvent(new Event("change", {
|
|
2296
|
-
bubbles: false
|
|
2297
|
-
}));
|
|
2298
|
-
};
|
|
2299
|
-
_M3eYearViewElement_handleItemKeyDown = function _M3eYearViewElement_handleItemKeyDown(e) {
|
|
2300
|
-
let activeDate = this.activeDate;
|
|
2301
|
-
switch (e.key) {
|
|
2302
|
-
case " ":
|
|
2303
|
-
case "Enter":
|
|
2304
|
-
e.preventDefault();
|
|
2305
|
-
e.currentTarget.click();
|
|
2306
|
-
return;
|
|
2307
|
-
case "ArrowLeft":
|
|
2308
|
-
case "Left":
|
|
2309
|
-
activeDate = addCalendarMonths(this.activeDate, M3eDirectionality.current === "rtl" ? 1 : -1);
|
|
2310
|
-
break;
|
|
2311
|
-
case "ArrowRight":
|
|
2312
|
-
case "Right":
|
|
2313
|
-
activeDate = addCalendarMonths(this.activeDate, M3eDirectionality.current === "rtl" ? -1 : 1);
|
|
2314
|
-
break;
|
|
2315
|
-
case "ArrowUp":
|
|
2316
|
-
case "Up":
|
|
2317
|
-
activeDate = addCalendarMonths(this.activeDate, -4);
|
|
2318
|
-
break;
|
|
2319
|
-
case "ArrowDown":
|
|
2320
|
-
case "Down":
|
|
2321
|
-
activeDate = addCalendarMonths(this.activeDate, 4);
|
|
2322
|
-
break;
|
|
2323
|
-
case "Home":
|
|
2324
|
-
activeDate = addCalendarMonths(this.activeDate, -this.activeDate.getMonth());
|
|
2325
|
-
break;
|
|
2326
|
-
case "End":
|
|
2327
|
-
activeDate = addCalendarMonths(this.activeDate, 11 - this.activeDate.getMonth());
|
|
2328
|
-
break;
|
|
2329
|
-
case "PageUp":
|
|
2330
|
-
activeDate = addCalendarYears(this.activeDate, e.altKey ? -10 : -1);
|
|
2331
|
-
break;
|
|
2332
|
-
case "PageDown":
|
|
2333
|
-
activeDate = addCalendarYears(this.activeDate, e.altKey ? 10 : 1);
|
|
2334
|
-
break;
|
|
2335
|
-
default:
|
|
2336
|
-
return;
|
|
2337
|
-
}
|
|
2338
|
-
e.preventDefault();
|
|
2339
|
-
this._changeActiveDate(activeDate);
|
|
2340
|
-
};
|
|
2341
|
-
/** The styles of the element. */
|
|
2342
|
-
M3eYearViewElement.styles = [CalendarViewElementBase.styles, css`.item { height: 2.25rem; } .touch { width: 100%; } th { height: 1rem; } td { padding-inline: 0.375rem; } tbody { font-size: var(--m3e-calendar-item-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-item-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-item-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-item-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); }`];
|
|
2343
|
-
M3eYearViewElement = __decorate([t$3("m3e-year-view")], M3eYearViewElement);
|
|
2344
|
-
|
|
2345
|
-
export { CalendarViewElementBase, M3eCalendarElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eYearViewElement };
|
|
2346
|
-
//# sourceMappingURL=datepicker.js.map
|