@descope/web-components-ui 1.0.378 → 1.0.380
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +3166 -1257
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +4738 -2826
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1224.js +1 -1
- package/dist/umd/1438.js +3 -3
- package/dist/umd/1612.js +1 -1
- package/dist/umd/2773.js +4 -4
- package/dist/umd/3830.js +1 -1
- package/dist/umd/3951.js +1 -1
- package/dist/umd/3966.js +319 -0
- package/dist/umd/4024.js +1 -1
- package/dist/umd/4052.js +1 -1
- package/dist/umd/4392.js +1 -1
- package/dist/umd/4525.js +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/5135.js +2 -2
- package/dist/umd/5517.js +1 -1
- package/dist/umd/5778.js +275 -0
- package/dist/umd/5806.js +1 -1
- package/dist/umd/5977.js +140 -0
- package/dist/umd/5977.js.LICENSE.txt +29 -0
- package/dist/umd/63.js +4 -4
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7056.js +3 -3
- package/dist/umd/7284.js +1 -1
- package/dist/umd/7541.js +449 -0
- package/dist/umd/7541.js.LICENSE.txt +17 -0
- package/dist/umd/7911.js +2 -2
- package/dist/umd/{4028.js → 8060.js} +3 -3
- package/dist/umd/8137.js +1 -1
- package/dist/umd/8191.js +2 -2
- package/dist/umd/8655.js +123 -0
- package/dist/umd/9314.js +2 -2
- package/dist/umd/9423.js +6 -6
- package/dist/umd/9562.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-apps-list-index-js.js +1 -1
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +5 -5
- package/dist/umd/descope-date-field-descope-calendar-index-js.js +1 -0
- package/dist/umd/descope-date-field-index-js.js +1 -0
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +2 -2
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js +2 -2
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +4 -4
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +11 -5
- package/src/components/descope-combo-box/ComboBoxClass.js +7 -1
- package/src/components/descope-date-field/DateCounterClass.js +83 -0
- package/src/components/descope-date-field/DateFieldClass.js +675 -0
- package/src/components/descope-date-field/consts.js +55 -0
- package/src/components/descope-date-field/descope-calendar/CalendarClass.js +666 -0
- package/src/components/descope-date-field/descope-calendar/helpers.js +186 -0
- package/src/components/descope-date-field/descope-calendar/index.js +9 -0
- package/src/components/descope-date-field/formats.js +49 -0
- package/src/components/descope-date-field/helpers.js +72 -0
- package/src/components/descope-date-field/icons.js +14 -0
- package/src/components/descope-date-field/index.js +10 -0
- package/src/components/descope-text-field/textFieldMappings.js +2 -0
- package/src/index.cjs.js +2 -0
- package/src/index.d.ts +2 -0
- package/src/index.js +2 -1
- package/src/mixins/inputValidationMixin.js +8 -2
- package/src/mixins/portalMixin.js +6 -3
- package/src/theme/components/calendar.js +94 -0
- package/src/theme/components/dateField.js +63 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/inputWrapper.js +6 -0
- package/src/theme/components/textField.js +1 -0
- package/dist/umd/4746.js +0 -124
- package/dist/umd/7531.js +0 -319
- package/dist/umd/8866.js +0 -275
- package/dist/umd/9092.js +0 -1086
- package/dist/umd/9092.js.LICENSE.txt +0 -27
- package/dist/umd/descope-date-picker-index-js.js +0 -1
- package/src/components/descope-date-picker/index.js +0 -20
- /package/dist/umd/{7531.js.LICENSE.txt → 3966.js.LICENSE.txt} +0 -0
- /package/dist/umd/{8866.js.LICENSE.txt → 5778.js.LICENSE.txt} +0 -0
- /package/dist/umd/{4028.js.LICENSE.txt → 8060.js.LICENSE.txt} +0 -0
- /package/dist/umd/{4746.js.LICENSE.txt → 8655.js.LICENSE.txt} +0 -0
package/dist/umd/9092.js
DELETED
@@ -1,1086 +0,0 @@
|
|
1
|
-
/*! For license information please see 9092.js.LICENSE.txt */
|
2
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9092],{17078:(t,e,i)=>{i.d(e,{z:()=>p});var o=i(74241),a=i(16155),s=i(52807),n=i(12521),r=i(34463),l=i(46570);const h=i(9392).iv`
|
3
|
-
:host {
|
4
|
-
display: inline-block;
|
5
|
-
position: relative;
|
6
|
-
outline: none;
|
7
|
-
white-space: nowrap;
|
8
|
-
-webkit-user-select: none;
|
9
|
-
-moz-user-select: none;
|
10
|
-
user-select: none;
|
11
|
-
}
|
12
|
-
|
13
|
-
:host([hidden]) {
|
14
|
-
display: none !important;
|
15
|
-
}
|
16
|
-
|
17
|
-
/* Aligns the button with form fields when placed on the same line.
|
18
|
-
Note, to make it work, the form fields should have the same "::before" pseudo-element. */
|
19
|
-
.vaadin-button-container::before {
|
20
|
-
content: '\\2003';
|
21
|
-
display: inline-block;
|
22
|
-
width: 0;
|
23
|
-
max-height: 100%;
|
24
|
-
}
|
25
|
-
|
26
|
-
.vaadin-button-container {
|
27
|
-
display: inline-flex;
|
28
|
-
align-items: center;
|
29
|
-
justify-content: center;
|
30
|
-
text-align: center;
|
31
|
-
width: 100%;
|
32
|
-
height: 100%;
|
33
|
-
min-height: inherit;
|
34
|
-
text-shadow: inherit;
|
35
|
-
}
|
36
|
-
|
37
|
-
[part='prefix'],
|
38
|
-
[part='suffix'] {
|
39
|
-
flex: none;
|
40
|
-
}
|
41
|
-
|
42
|
-
[part='label'] {
|
43
|
-
white-space: nowrap;
|
44
|
-
overflow: hidden;
|
45
|
-
text-overflow: ellipsis;
|
46
|
-
}
|
47
|
-
|
48
|
-
@media (forced-colors: active) {
|
49
|
-
:host {
|
50
|
-
outline: 1px solid;
|
51
|
-
outline-offset: -1px;
|
52
|
-
}
|
53
|
-
|
54
|
-
:host([focused]) {
|
55
|
-
outline-width: 2px;
|
56
|
-
}
|
57
|
-
|
58
|
-
:host([disabled]) {
|
59
|
-
outline-color: GrayText;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
`;var d=i(61224),c=i(21360),u=i(58298);const _=t=>class extends((0,d.D)((0,u.N)((0,c.W)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.hC)("vaadin-button",h,{moduleId:"vaadin-button-styles"});class p extends(_((0,n.S)((0,l.Tb)((0,a.k)(o.H3))))){static get is(){return"vaadin-button"}static get template(){return o.dy`
|
63
|
-
<div class="vaadin-button-container">
|
64
|
-
<span part="prefix" aria-hidden="true">
|
65
|
-
<slot name="prefix"></slot>
|
66
|
-
</span>
|
67
|
-
<span part="label">
|
68
|
-
<slot></slot>
|
69
|
-
</span>
|
70
|
-
<span part="suffix" aria-hidden="true">
|
71
|
-
<slot name="suffix"></slot>
|
72
|
-
</span>
|
73
|
-
</div>
|
74
|
-
<slot name="tooltip"></slot>
|
75
|
-
`}ready(){super.ready(),this._tooltipController=new r.f(this),this.addController(this._tooltipController)}}(0,s.M)(p)},74750:(t,e,i)=>{i.d(e,{L:()=>a}),i(51195),i(79098),i(29416),i(29849),i(34173);var o=i(46570);const a=o.iv`
|
76
|
-
:host {
|
77
|
-
/* Sizing */
|
78
|
-
--lumo-button-size: var(--lumo-size-m);
|
79
|
-
min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
|
80
|
-
height: var(--_button-size);
|
81
|
-
padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
|
82
|
-
margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
|
83
|
-
box-sizing: border-box;
|
84
|
-
/* Style */
|
85
|
-
font-family: var(--lumo-font-family);
|
86
|
-
font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
|
87
|
-
font-weight: var(--vaadin-button-font-weight, 500);
|
88
|
-
color: var(--_lumo-button-text-color);
|
89
|
-
background: var(--_lumo-button-background);
|
90
|
-
border: var(--vaadin-button-border, none);
|
91
|
-
border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
|
92
|
-
cursor: var(--lumo-clickable-cursor);
|
93
|
-
-webkit-tap-highlight-color: transparent;
|
94
|
-
-webkit-font-smoothing: antialiased;
|
95
|
-
-moz-osx-font-smoothing: grayscale;
|
96
|
-
flex-shrink: 0;
|
97
|
-
--_button-size: var(--vaadin-button-height, var(--lumo-button-size));
|
98
|
-
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
99
|
-
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
100
|
-
/* Used by notification */
|
101
|
-
--_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
|
102
|
-
--_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
|
103
|
-
--_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
|
104
|
-
--_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
|
105
|
-
}
|
106
|
-
|
107
|
-
/* Set only for the internal parts so we don't affect the host vertical alignment */
|
108
|
-
[part='label'],
|
109
|
-
[part='prefix'],
|
110
|
-
[part='suffix'] {
|
111
|
-
line-height: var(--lumo-line-height-xs);
|
112
|
-
}
|
113
|
-
|
114
|
-
[part='label'] {
|
115
|
-
padding: calc(var(--lumo-button-size) / 6) 0;
|
116
|
-
}
|
117
|
-
|
118
|
-
:host([theme~='small']) {
|
119
|
-
font-size: var(--lumo-font-size-s);
|
120
|
-
--lumo-button-size: var(--lumo-size-s);
|
121
|
-
}
|
122
|
-
|
123
|
-
:host([theme~='large']) {
|
124
|
-
font-size: var(--lumo-font-size-l);
|
125
|
-
--lumo-button-size: var(--lumo-size-l);
|
126
|
-
}
|
127
|
-
|
128
|
-
/* For interaction states */
|
129
|
-
:host::before,
|
130
|
-
:host::after {
|
131
|
-
content: '';
|
132
|
-
/* We rely on the host always being relative */
|
133
|
-
position: absolute;
|
134
|
-
z-index: 1;
|
135
|
-
inset: 0;
|
136
|
-
background-color: currentColor;
|
137
|
-
border-radius: inherit;
|
138
|
-
opacity: 0;
|
139
|
-
pointer-events: none;
|
140
|
-
}
|
141
|
-
|
142
|
-
/* Hover */
|
143
|
-
|
144
|
-
@media (any-hover: hover) {
|
145
|
-
:host(:hover)::before {
|
146
|
-
opacity: 0.02;
|
147
|
-
}
|
148
|
-
}
|
149
|
-
|
150
|
-
/* Active */
|
151
|
-
|
152
|
-
:host::after {
|
153
|
-
transition: opacity 1.4s, transform 0.1s;
|
154
|
-
filter: blur(8px);
|
155
|
-
}
|
156
|
-
|
157
|
-
:host([active])::before {
|
158
|
-
opacity: 0.05;
|
159
|
-
transition-duration: 0s;
|
160
|
-
}
|
161
|
-
|
162
|
-
:host([active])::after {
|
163
|
-
opacity: 0.1;
|
164
|
-
transition-duration: 0s, 0s;
|
165
|
-
transform: scale(0);
|
166
|
-
}
|
167
|
-
|
168
|
-
/* Keyboard focus */
|
169
|
-
|
170
|
-
:host([focus-ring]) {
|
171
|
-
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
172
|
-
}
|
173
|
-
|
174
|
-
:host([theme~='primary'][focus-ring]) {
|
175
|
-
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
|
176
|
-
}
|
177
|
-
|
178
|
-
/* Types (primary, tertiary, tertiary-inline */
|
179
|
-
|
180
|
-
:host([theme~='tertiary']),
|
181
|
-
:host([theme~='tertiary-inline']) {
|
182
|
-
--_background: transparent !important;
|
183
|
-
background: var(--vaadin-button-tertiary-background, var(--_background));
|
184
|
-
min-width: 0;
|
185
|
-
}
|
186
|
-
|
187
|
-
:host([theme~='tertiary']) {
|
188
|
-
border: var(--vaadin-button-tertiary-border, none);
|
189
|
-
color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
|
190
|
-
font-weight: var(--vaadin-button-tertiary-font-weight, 500);
|
191
|
-
padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
|
192
|
-
}
|
193
|
-
|
194
|
-
:host([theme~='tertiary-inline'])::before {
|
195
|
-
display: none;
|
196
|
-
}
|
197
|
-
|
198
|
-
:host([theme~='tertiary-inline']) {
|
199
|
-
margin: 0;
|
200
|
-
height: auto;
|
201
|
-
padding: 0;
|
202
|
-
line-height: inherit;
|
203
|
-
font-size: inherit;
|
204
|
-
}
|
205
|
-
|
206
|
-
:host([theme~='tertiary-inline']) [part='label'] {
|
207
|
-
padding: 0;
|
208
|
-
overflow: visible;
|
209
|
-
line-height: inherit;
|
210
|
-
}
|
211
|
-
|
212
|
-
:host([theme~='primary']) {
|
213
|
-
background: var(--_lumo-button-primary-background);
|
214
|
-
border: var(--vaadin-button-primary-border, none);
|
215
|
-
color: var(--_lumo-button-primary-text-color);
|
216
|
-
font-weight: var(--vaadin-button-primary-font-weight, 600);
|
217
|
-
min-width: calc(var(--lumo-button-size) * 2.5);
|
218
|
-
}
|
219
|
-
|
220
|
-
:host([theme~='primary'])::before {
|
221
|
-
background-color: black;
|
222
|
-
}
|
223
|
-
|
224
|
-
@media (any-hover: hover) {
|
225
|
-
:host([theme~='primary']:hover)::before {
|
226
|
-
opacity: 0.05;
|
227
|
-
}
|
228
|
-
}
|
229
|
-
|
230
|
-
:host([theme~='primary'][active])::before {
|
231
|
-
opacity: 0.1;
|
232
|
-
}
|
233
|
-
|
234
|
-
:host([theme~='primary'][active])::after {
|
235
|
-
opacity: 0.2;
|
236
|
-
}
|
237
|
-
|
238
|
-
/* Colors (success, error, contrast) */
|
239
|
-
|
240
|
-
:host([theme~='success']) {
|
241
|
-
color: var(--lumo-success-text-color);
|
242
|
-
}
|
243
|
-
|
244
|
-
:host([theme~='success'][theme~='primary']) {
|
245
|
-
background-color: var(--lumo-success-color);
|
246
|
-
color: var(--lumo-success-contrast-color);
|
247
|
-
}
|
248
|
-
|
249
|
-
:host([theme~='error']) {
|
250
|
-
color: var(--lumo-error-text-color);
|
251
|
-
}
|
252
|
-
|
253
|
-
:host([theme~='error'][theme~='primary']) {
|
254
|
-
background-color: var(--lumo-error-color);
|
255
|
-
color: var(--lumo-error-contrast-color);
|
256
|
-
}
|
257
|
-
|
258
|
-
:host([theme~='contrast']) {
|
259
|
-
color: var(--lumo-contrast);
|
260
|
-
}
|
261
|
-
|
262
|
-
:host([theme~='contrast'][theme~='primary']) {
|
263
|
-
background-color: var(--lumo-contrast);
|
264
|
-
color: var(--lumo-base-color);
|
265
|
-
}
|
266
|
-
|
267
|
-
/* Disabled state. Keep selectors after other color variants. */
|
268
|
-
|
269
|
-
:host([disabled]) {
|
270
|
-
pointer-events: none;
|
271
|
-
color: var(--lumo-disabled-text-color);
|
272
|
-
}
|
273
|
-
|
274
|
-
:host([theme~='primary'][disabled]) {
|
275
|
-
background-color: var(--lumo-contrast-30pct);
|
276
|
-
color: var(--lumo-base-color);
|
277
|
-
}
|
278
|
-
|
279
|
-
:host([theme~='primary'][disabled]) [part] {
|
280
|
-
opacity: 0.7;
|
281
|
-
}
|
282
|
-
|
283
|
-
/* Icons */
|
284
|
-
|
285
|
-
[part] ::slotted(vaadin-icon) {
|
286
|
-
display: inline-block;
|
287
|
-
width: var(--lumo-icon-size-m);
|
288
|
-
height: var(--lumo-icon-size-m);
|
289
|
-
}
|
290
|
-
|
291
|
-
/* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
|
292
|
-
[part] ::slotted(vaadin-icon[icon^='vaadin:']) {
|
293
|
-
padding: 0.25em;
|
294
|
-
box-sizing: border-box !important;
|
295
|
-
}
|
296
|
-
|
297
|
-
[part='prefix'] {
|
298
|
-
margin-left: -0.25em;
|
299
|
-
margin-right: 0.25em;
|
300
|
-
}
|
301
|
-
|
302
|
-
[part='suffix'] {
|
303
|
-
margin-left: 0.25em;
|
304
|
-
margin-right: -0.25em;
|
305
|
-
}
|
306
|
-
|
307
|
-
/* Icon-only */
|
308
|
-
|
309
|
-
:host([theme~='icon']:not([theme~='tertiary-inline'])) {
|
310
|
-
min-width: var(--lumo-button-size);
|
311
|
-
padding-left: calc(var(--lumo-button-size) / 4);
|
312
|
-
padding-right: calc(var(--lumo-button-size) / 4);
|
313
|
-
}
|
314
|
-
|
315
|
-
:host([theme~='icon']) [part='prefix'],
|
316
|
-
:host([theme~='icon']) [part='suffix'] {
|
317
|
-
margin-left: 0;
|
318
|
-
margin-right: 0;
|
319
|
-
}
|
320
|
-
|
321
|
-
/* RTL specific styles */
|
322
|
-
|
323
|
-
:host([dir='rtl']) [part='prefix'] {
|
324
|
-
margin-left: 0.25em;
|
325
|
-
margin-right: -0.25em;
|
326
|
-
}
|
327
|
-
|
328
|
-
:host([dir='rtl']) [part='suffix'] {
|
329
|
-
margin-left: -0.25em;
|
330
|
-
margin-right: 0.25em;
|
331
|
-
}
|
332
|
-
|
333
|
-
:host([dir='rtl'][theme~='icon']) [part='prefix'],
|
334
|
-
:host([dir='rtl'][theme~='icon']) [part='suffix'] {
|
335
|
-
margin-left: 0;
|
336
|
-
margin-right: 0;
|
337
|
-
}
|
338
|
-
`;(0,o.hC)("vaadin-button",a,{moduleId:"lumo-button"})},79092:(t,e,i)=>{i(79098),i(29416);var o=i(96754),a=i(46570);const s=a.iv`
|
339
|
-
[part='overlay'] {
|
340
|
-
/*
|
341
|
-
Width:
|
342
|
-
date cell widths
|
343
|
-
+ month calendar side padding
|
344
|
-
+ year scroller width
|
345
|
-
*/
|
346
|
-
/* prettier-ignore */
|
347
|
-
width:
|
348
|
-
calc(
|
349
|
-
var(--lumo-size-m) * 7
|
350
|
-
+ var(--lumo-space-xs) * 2
|
351
|
-
+ 57px
|
352
|
-
);
|
353
|
-
height: 100%;
|
354
|
-
max-height: calc(var(--lumo-size-m) * 14);
|
355
|
-
overflow: hidden;
|
356
|
-
-webkit-tap-highlight-color: transparent;
|
357
|
-
}
|
358
|
-
|
359
|
-
[part='overlay'] {
|
360
|
-
flex-direction: column;
|
361
|
-
}
|
362
|
-
|
363
|
-
[part='content'] {
|
364
|
-
padding: 0;
|
365
|
-
height: 100%;
|
366
|
-
overflow: hidden;
|
367
|
-
-webkit-mask-image: none;
|
368
|
-
mask-image: none;
|
369
|
-
}
|
370
|
-
|
371
|
-
:host([top-aligned]) [part~='overlay'] {
|
372
|
-
margin-top: var(--lumo-space-xs);
|
373
|
-
}
|
374
|
-
|
375
|
-
:host([bottom-aligned]) [part~='overlay'] {
|
376
|
-
margin-bottom: var(--lumo-space-xs);
|
377
|
-
}
|
378
|
-
|
379
|
-
@media (max-width: 420px), (max-height: 420px) {
|
380
|
-
[part='overlay'] {
|
381
|
-
width: 100vw;
|
382
|
-
height: 70vh;
|
383
|
-
max-height: 70vh;
|
384
|
-
}
|
385
|
-
}
|
386
|
-
`;(0,a.hC)("vaadin-date-picker-overlay",[o.L,s],{moduleId:"lumo-date-picker-overlay"}),i(51195),i(29849),i(34173),i(74750),(0,a.hC)("vaadin-date-picker-year",a.iv`
|
387
|
-
:host([current]) [part='year-number'] {
|
388
|
-
color: var(--lumo-primary-text-color);
|
389
|
-
}
|
390
|
-
|
391
|
-
:host(:not([current])) [part='year-number'],
|
392
|
-
[part='year-separator'] {
|
393
|
-
opacity: var(--_lumo-date-picker-year-opacity, 0.7);
|
394
|
-
transition: 0.2s opacity;
|
395
|
-
}
|
396
|
-
|
397
|
-
[part='year-number'],
|
398
|
-
[part='year-separator'] {
|
399
|
-
display: flex;
|
400
|
-
align-items: center;
|
401
|
-
justify-content: center;
|
402
|
-
height: 50%;
|
403
|
-
transform: translateY(-50%);
|
404
|
-
}
|
405
|
-
|
406
|
-
[part='year-separator']::after {
|
407
|
-
color: var(--lumo-disabled-text-color);
|
408
|
-
content: '\\2022';
|
409
|
-
}
|
410
|
-
`,{moduleId:"lumo-date-picker-year"}),(0,a.hC)("vaadin-date-picker-overlay-content",a.iv`
|
411
|
-
:host {
|
412
|
-
position: relative;
|
413
|
-
/* Background for the year scroller, placed here as we are using a mask image on the actual years part */
|
414
|
-
background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
|
415
|
-
background-size: 57px 100%;
|
416
|
-
background-position: top right;
|
417
|
-
background-repeat: no-repeat;
|
418
|
-
cursor: default;
|
419
|
-
}
|
420
|
-
|
421
|
-
::slotted([slot='months']) {
|
422
|
-
/* Month calendar height:
|
423
|
-
header height + margin-bottom
|
424
|
-
+ weekdays height + margin-bottom
|
425
|
-
+ date cell heights
|
426
|
-
+ small margin between month calendars
|
427
|
-
*/
|
428
|
-
/* prettier-ignore */
|
429
|
-
--vaadin-infinite-scroller-item-height:
|
430
|
-
calc(
|
431
|
-
var(--lumo-font-size-l) + var(--lumo-space-m)
|
432
|
-
+ var(--lumo-font-size-xs) + var(--lumo-space-s)
|
433
|
-
+ var(--lumo-size-m) * 6
|
434
|
-
+ var(--lumo-space-s)
|
435
|
-
);
|
436
|
-
--vaadin-infinite-scroller-buffer-offset: 10%;
|
437
|
-
-webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
|
438
|
-
mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
|
439
|
-
position: relative;
|
440
|
-
margin-right: 57px;
|
441
|
-
}
|
442
|
-
|
443
|
-
::slotted([slot='years']) {
|
444
|
-
/* TODO get rid of fixed magic number */
|
445
|
-
--vaadin-infinite-scroller-buffer-width: 97px;
|
446
|
-
width: 57px;
|
447
|
-
height: auto;
|
448
|
-
top: 0;
|
449
|
-
bottom: 0;
|
450
|
-
font-size: var(--lumo-font-size-s);
|
451
|
-
box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
|
452
|
-
-webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
|
453
|
-
mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
|
454
|
-
cursor: var(--lumo-clickable-cursor);
|
455
|
-
}
|
456
|
-
|
457
|
-
::slotted([slot='years']:hover) {
|
458
|
-
--_lumo-date-picker-year-opacity: 1;
|
459
|
-
}
|
460
|
-
|
461
|
-
/* TODO unsupported selector */
|
462
|
-
#scrollers {
|
463
|
-
position: static;
|
464
|
-
display: block;
|
465
|
-
}
|
466
|
-
|
467
|
-
/* TODO fix this in vaadin-date-picker that it adapts to the width of the year scroller */
|
468
|
-
:host([desktop]) ::slotted([slot='months']) {
|
469
|
-
right: auto;
|
470
|
-
}
|
471
|
-
|
472
|
-
/* Year scroller position indicator */
|
473
|
-
::slotted([slot='years'])::before {
|
474
|
-
border: none;
|
475
|
-
width: 1em;
|
476
|
-
height: 1em;
|
477
|
-
background-color: var(--lumo-base-color);
|
478
|
-
background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
|
479
|
-
transform: translate(-75%, -50%) rotate(45deg);
|
480
|
-
border-top-right-radius: var(--lumo-border-radius-s);
|
481
|
-
box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
|
482
|
-
z-index: 1;
|
483
|
-
}
|
484
|
-
|
485
|
-
[part='toolbar'] {
|
486
|
-
padding: var(--lumo-space-s);
|
487
|
-
border-bottom-left-radius: var(--lumo-border-radius-l);
|
488
|
-
margin-right: 57px;
|
489
|
-
}
|
490
|
-
|
491
|
-
[part='toolbar'] ::slotted(vaadin-button) {
|
492
|
-
margin: 0;
|
493
|
-
}
|
494
|
-
|
495
|
-
/* Narrow viewport mode (fullscreen) */
|
496
|
-
|
497
|
-
:host([fullscreen]) [part='toolbar'] {
|
498
|
-
order: -1;
|
499
|
-
background-color: var(--lumo-base-color);
|
500
|
-
}
|
501
|
-
|
502
|
-
:host([fullscreen]) [part='overlay-header'] {
|
503
|
-
order: -2;
|
504
|
-
height: var(--lumo-size-m);
|
505
|
-
padding: var(--lumo-space-s);
|
506
|
-
position: absolute;
|
507
|
-
left: 0;
|
508
|
-
right: 0;
|
509
|
-
justify-content: center;
|
510
|
-
}
|
511
|
-
|
512
|
-
:host([fullscreen]) [part='toggle-button'],
|
513
|
-
:host([fullscreen]) [part='clear-button'],
|
514
|
-
[part='overlay-header'] [part='label'] {
|
515
|
-
display: none;
|
516
|
-
}
|
517
|
-
|
518
|
-
/* Very narrow screen (year scroller initially hidden) */
|
519
|
-
|
520
|
-
[part='years-toggle-button'] {
|
521
|
-
display: flex;
|
522
|
-
align-items: center;
|
523
|
-
height: var(--lumo-size-s);
|
524
|
-
padding: 0 0.5em;
|
525
|
-
border-radius: var(--lumo-border-radius-m);
|
526
|
-
z-index: 3;
|
527
|
-
color: var(--lumo-primary-text-color);
|
528
|
-
font-weight: 500;
|
529
|
-
-webkit-font-smoothing: antialiased;
|
530
|
-
-moz-osx-font-smoothing: grayscale;
|
531
|
-
}
|
532
|
-
|
533
|
-
:host([years-visible]) [part='years-toggle-button'] {
|
534
|
-
background-color: var(--lumo-primary-color);
|
535
|
-
color: var(--lumo-primary-contrast-color);
|
536
|
-
}
|
537
|
-
|
538
|
-
/* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
|
539
|
-
@media screen and (max-width: 374px) {
|
540
|
-
:host {
|
541
|
-
background-image: none;
|
542
|
-
}
|
543
|
-
|
544
|
-
[part='toolbar'],
|
545
|
-
::slotted([slot='months']) {
|
546
|
-
margin-right: 0;
|
547
|
-
}
|
548
|
-
|
549
|
-
/* TODO make date-picker adapt to the width of the years part */
|
550
|
-
::slotted([slot='years']) {
|
551
|
-
--vaadin-infinite-scroller-buffer-width: 90px;
|
552
|
-
width: 50px;
|
553
|
-
background-color: var(--lumo-shade-5pct);
|
554
|
-
}
|
555
|
-
|
556
|
-
:host([years-visible]) ::slotted([slot='months']) {
|
557
|
-
padding-left: 50px;
|
558
|
-
}
|
559
|
-
}
|
560
|
-
`,{moduleId:"lumo-date-picker-overlay-content"}),(0,a.hC)("vaadin-month-calendar",a.iv`
|
561
|
-
:host {
|
562
|
-
-moz-user-select: none;
|
563
|
-
-webkit-user-select: none;
|
564
|
-
-webkit-tap-highlight-color: transparent;
|
565
|
-
user-select: none;
|
566
|
-
font-size: var(--lumo-font-size-m);
|
567
|
-
color: var(--lumo-body-text-color);
|
568
|
-
text-align: center;
|
569
|
-
padding: 0 var(--lumo-space-xs);
|
570
|
-
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
571
|
-
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
572
|
-
--_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
|
573
|
-
--_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
|
574
|
-
}
|
575
|
-
|
576
|
-
/* Month header */
|
577
|
-
|
578
|
-
[part='month-header'] {
|
579
|
-
color: var(--lumo-header-text-color);
|
580
|
-
font-size: var(--lumo-font-size-l);
|
581
|
-
line-height: 1;
|
582
|
-
font-weight: 500;
|
583
|
-
margin-bottom: var(--lumo-space-m);
|
584
|
-
}
|
585
|
-
|
586
|
-
/* Week days and numbers */
|
587
|
-
|
588
|
-
[part='weekdays'],
|
589
|
-
[part='weekday'],
|
590
|
-
[part='week-number'] {
|
591
|
-
font-size: var(--lumo-font-size-xxs);
|
592
|
-
line-height: 1;
|
593
|
-
color: var(--lumo-secondary-text-color);
|
594
|
-
}
|
595
|
-
|
596
|
-
[part='weekdays'] {
|
597
|
-
margin-bottom: var(--lumo-space-s);
|
598
|
-
}
|
599
|
-
|
600
|
-
[part='weekday']:empty,
|
601
|
-
[part='week-number'] {
|
602
|
-
width: var(--lumo-size-xs);
|
603
|
-
}
|
604
|
-
|
605
|
-
/* Date and week number cells */
|
606
|
-
|
607
|
-
[part~='date'],
|
608
|
-
[part='week-number'] {
|
609
|
-
box-sizing: border-box;
|
610
|
-
display: inline-flex;
|
611
|
-
align-items: center;
|
612
|
-
justify-content: center;
|
613
|
-
height: var(--lumo-size-m);
|
614
|
-
position: relative;
|
615
|
-
}
|
616
|
-
|
617
|
-
[part~='date'] {
|
618
|
-
transition: color 0.1s;
|
619
|
-
}
|
620
|
-
|
621
|
-
[part~='date']:not(:empty) {
|
622
|
-
cursor: var(--lumo-clickable-cursor);
|
623
|
-
}
|
624
|
-
|
625
|
-
:host([week-numbers]) [part='weekday']:not(:empty),
|
626
|
-
:host([week-numbers]) [part~='date'] {
|
627
|
-
width: calc((100% - var(--lumo-size-xs)) / 7);
|
628
|
-
}
|
629
|
-
|
630
|
-
/* Today date */
|
631
|
-
|
632
|
-
[part~='date'][part~='today'] {
|
633
|
-
color: var(--_selection-color-text);
|
634
|
-
}
|
635
|
-
|
636
|
-
/* Focused date */
|
637
|
-
|
638
|
-
[part~='date']::before {
|
639
|
-
content: '';
|
640
|
-
position: absolute;
|
641
|
-
z-index: -1;
|
642
|
-
top: 50%;
|
643
|
-
left: 50%;
|
644
|
-
transform: translate(-50%, -50%);
|
645
|
-
min-width: 2em;
|
646
|
-
min-height: 2em;
|
647
|
-
width: 80%;
|
648
|
-
height: 80%;
|
649
|
-
max-height: 100%;
|
650
|
-
max-width: 100%;
|
651
|
-
border-radius: var(--lumo-border-radius-m);
|
652
|
-
}
|
653
|
-
|
654
|
-
[part~='date'][part~='focused']::before {
|
655
|
-
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
|
656
|
-
}
|
657
|
-
|
658
|
-
:host(:not([focused])) [part~='date'][part~='focused']::before {
|
659
|
-
animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
|
660
|
-
}
|
661
|
-
|
662
|
-
@keyframes vaadin-date-picker-month-calendar-focus-date {
|
663
|
-
50% {
|
664
|
-
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
|
665
|
-
}
|
666
|
-
}
|
667
|
-
|
668
|
-
[part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
|
669
|
-
background-color: var(--lumo-primary-color-10pct);
|
670
|
-
}
|
671
|
-
|
672
|
-
[part~='date'][part~='selected'] {
|
673
|
-
color: var(--lumo-primary-contrast-color);
|
674
|
-
}
|
675
|
-
|
676
|
-
[part~='date'][part~='selected']::before {
|
677
|
-
background-color: var(--_selection-color);
|
678
|
-
}
|
679
|
-
|
680
|
-
[part~='date'][part~='disabled'] {
|
681
|
-
color: var(--lumo-disabled-text-color);
|
682
|
-
}
|
683
|
-
|
684
|
-
@media (pointer: coarse) {
|
685
|
-
[part~='date']:hover:not([part~='selected'])::before,
|
686
|
-
[part~='focused']:not([part~='selected'])::before {
|
687
|
-
display: none;
|
688
|
-
}
|
689
|
-
|
690
|
-
[part~='date']:not(:empty):not([part~='disabled']):active::before {
|
691
|
-
display: block;
|
692
|
-
}
|
693
|
-
|
694
|
-
[part~='date'][part~='selected']::before {
|
695
|
-
box-shadow: none;
|
696
|
-
}
|
697
|
-
}
|
698
|
-
|
699
|
-
/* Disabled */
|
700
|
-
|
701
|
-
:host([disabled]) * {
|
702
|
-
color: var(--lumo-disabled-text-color) !important;
|
703
|
-
}
|
704
|
-
`,{moduleId:"lumo-month-calendar"});const n=document.createElement("template");n.innerHTML="\n <style>\n @keyframes vaadin-date-picker-month-calendar-focus-date {\n 50% {\n box-shadow: 0 0 0 var(--_focus-ring-width) transparent;\n }\n }\n </style>\n",document.head.appendChild(n.content),i(21578),i(71189);var r=i(83208);const l=a.iv`
|
705
|
-
:host {
|
706
|
-
outline: none;
|
707
|
-
}
|
708
|
-
|
709
|
-
[part='toggle-button']::before {
|
710
|
-
content: var(--lumo-icons-calendar);
|
711
|
-
}
|
712
|
-
|
713
|
-
[part='clear-button']::before {
|
714
|
-
content: var(--lumo-icons-cross);
|
715
|
-
}
|
716
|
-
|
717
|
-
@media (max-width: 420px), (max-height: 420px) {
|
718
|
-
[part='overlay-content'] {
|
719
|
-
height: 70vh;
|
720
|
-
}
|
721
|
-
}
|
722
|
-
|
723
|
-
:host([dir='rtl']) [part='input-field'] ::slotted(input) {
|
724
|
-
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
|
725
|
-
}
|
726
|
-
|
727
|
-
:host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
|
728
|
-
--_lumo-text-field-overflow-mask-image: none;
|
729
|
-
}
|
730
|
-
`;(0,a.hC)("vaadin-date-picker",[r.J,l],{moduleId:"lumo-date-picker"}),i(13553);var h=i(74241),d=i(52807),c=i(51914),u=i(44457),_=i(63373),p=i(6196),m=i(9392);const f=m.iv`
|
731
|
-
[part='overlay'] {
|
732
|
-
display: flex;
|
733
|
-
flex: auto;
|
734
|
-
}
|
735
|
-
|
736
|
-
[part~='content'] {
|
737
|
-
flex: auto;
|
738
|
-
}
|
739
|
-
|
740
|
-
@media (forced-colors: active) {
|
741
|
-
[part='overlay'] {
|
742
|
-
outline: 3px solid;
|
743
|
-
}
|
744
|
-
}
|
745
|
-
`;(0,a.hC)("vaadin-date-picker-overlay",[p.r,f],{moduleId:"vaadin-date-picker-overlay-styles"});class y extends((0,_.y)((0,u.F)((0,c.U)((0,a.Tb)(h.H3))))){static get is(){return"vaadin-date-picker-overlay"}static get template(){return h.dy`
|
746
|
-
<div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
|
747
|
-
<div part="overlay" id="overlay">
|
748
|
-
<div part="content" id="content">
|
749
|
-
<slot></slot>
|
750
|
-
</div>
|
751
|
-
</div>
|
752
|
-
`}}function g(t,e){return t instanceof Date&&e instanceof Date&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function v(t,e,i){return(!e||t>=e)&&(!i||t<=i)}function b(t,e){return e.filter((t=>void 0!==t)).reduce(((e,i)=>i?e?Math.abs(t.getTime()-i.getTime())<Math.abs(e.getTime()-t.getTime())?i:e:i:e))}function D(t){return{day:t.getDate(),month:t.getMonth(),year:t.getFullYear()}}function w(t){const e=new Date,i=new Date(e);return i.setDate(1),i.setMonth(parseInt(t)+e.getMonth()),i}function k(t){const e=/^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/u.exec(t);if(!e)return;const i=new Date(0,0);return i.setFullYear(parseInt(e[1],10)),i.setMonth(parseInt(e[2],10)-1),i.setDate(parseInt(e[3],10)),i}(0,d.M)(y),i(17078);var x=i(87913),C=i(61037),S=i(36139),E=i(73971);const T=document.createElement("template");T.innerHTML='\n <style>\n :host {\n display: block;\n overflow: hidden;\n height: 500px;\n }\n\n #scroller {\n position: relative;\n height: 100%;\n overflow: auto;\n outline: none;\n margin-right: -40px;\n -webkit-overflow-scrolling: touch;\n overflow-x: hidden;\n }\n\n #scroller.notouchscroll {\n -webkit-overflow-scrolling: auto;\n }\n\n #scroller::-webkit-scrollbar {\n display: none;\n }\n\n .buffer {\n position: absolute;\n width: var(--vaadin-infinite-scroller-buffer-width, 100%);\n box-sizing: border-box;\n padding-right: 40px;\n top: var(--vaadin-infinite-scroller-buffer-offset, 0);\n animation: fadein 0.2s;\n }\n\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n </style>\n\n <div id="scroller">\n <div class="buffer"></div>\n <div class="buffer"></div>\n <div id="fullHeight"></div>\n </div>\n';class M extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(T.content.cloneNode(!0)),this.bufferSize=20,this._initialScroll=5e5,this._initialIndex=0,this._activated=!1}get active(){return this._activated}set active(t){t&&!this._activated&&(this._createPool(),this._activated=!0)}get bufferOffset(){return this._buffers[0].offsetTop}get itemHeight(){if(!this._itemHeightVal){const t=getComputedStyle(this).getPropertyValue("--vaadin-infinite-scroller-item-height"),e="background-position";this.$.fullHeight.style.setProperty(e,t);const i=getComputedStyle(this.$.fullHeight).getPropertyValue(e);this.$.fullHeight.style.removeProperty(e),this._itemHeightVal=parseFloat(i)}return this._itemHeightVal}get _bufferHeight(){return this.itemHeight*this.bufferSize}get position(){return(this.$.scroller.scrollTop-this._buffers[0].translateY)/this.itemHeight+this._firstIndex}set position(t){this._preventScrollEvent=!0,t>this._firstIndex&&t<this._firstIndex+2*this.bufferSize?this.$.scroller.scrollTop=this.itemHeight*(t-this._firstIndex)+this._buffers[0].translateY:(this._initialIndex=~~t,this._reset(),this._scrollDisabled=!0,this.$.scroller.scrollTop+=t%1*this.itemHeight,this._scrollDisabled=!1),this._mayHaveMomentum&&(this.$.scroller.classList.add("notouchscroll"),this._mayHaveMomentum=!1,setTimeout((()=>{this.$.scroller.classList.remove("notouchscroll")}),10))}connectedCallback(){this._ready||(this._ready=!0,this.$={},this.shadowRoot.querySelectorAll("[id]").forEach((t=>{this.$[t.id]=t})),this.$.scroller.addEventListener("scroll",(()=>this._scroll())),this._buffers=[...this.shadowRoot.querySelectorAll(".buffer")],this.$.fullHeight.style.height=2*this._initialScroll+"px",C.vU&&(this.$.scroller.tabIndex=-1))}forceUpdate(){this._debouncerUpdateClones&&(this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones(),this._debouncerUpdateClones.cancel())}_createElement(){}_updateElement(t,e){}_finishInit(){this._initDone||(this._buffers.forEach((t=>{[...t.children].forEach((t=>{this._ensureStampedInstance(t._itemWrapper)}))})),this._buffers[0].translateY||this._reset(),this._initDone=!0,this.dispatchEvent(new CustomEvent("init-done")))}_translateBuffer(t){const e=t?1:0;this._buffers[e].translateY=this._buffers[e?0:1].translateY+this._bufferHeight*(e?-1:1),this._buffers[e].style.transform=`translate3d(0, ${this._buffers[e].translateY}px, 0)`,this._buffers[e].updated=!1,this._buffers.reverse()}_scroll(){if(this._scrollDisabled)return;const t=this.$.scroller.scrollTop;(t<this._bufferHeight||t>2*this._initialScroll-this._bufferHeight)&&(this._initialIndex=~~this.position,this._reset());const e=this.itemHeight+this.bufferOffset,i=t>this._buffers[1].translateY+e,o=t<this._buffers[0].translateY+e;(i||o)&&(this._translateBuffer(o),this._updateClones()),this._preventScrollEvent||(this.dispatchEvent(new CustomEvent("custom-scroll",{bubbles:!1,composed:!0})),this._mayHaveMomentum=!0),this._preventScrollEvent=!1,this._debouncerScrollFinish=S.dx.debounce(this._debouncerScrollFinish,x.Wc.after(200),(()=>{const t=this.$.scroller.getBoundingClientRect();this._isVisible(this._buffers[0],t)||this._isVisible(this._buffers[1],t)||(this.position=this.position)}))}_reset(){this._scrollDisabled=!0,this.$.scroller.scrollTop=this._initialScroll,this._buffers[0].translateY=this._initialScroll-this._bufferHeight,this._buffers[1].translateY=this._initialScroll,this._buffers.forEach((t=>{t.style.transform=`translate3d(0, ${t.translateY}px, 0)`})),this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones(!0),this._debouncerUpdateClones=S.dx.debounce(this._debouncerUpdateClones,x.Wc.after(200),(()=>{this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones()})),this._scrollDisabled=!1}_createPool(){const t=this.getBoundingClientRect();this._buffers.forEach((e=>{for(let i=0;i<this.bufferSize;i++){const i=document.createElement("div");i.style.height=`${this.itemHeight}px`,i.instance={};const o=`vaadin-infinite-scroller-item-content-${(0,E.l)()}`,a=document.createElement("slot");a.setAttribute("name",o),a._itemWrapper=i,e.appendChild(a),i.setAttribute("slot",o),this.appendChild(i),this._isVisible(i,t)&&this._ensureStampedInstance(i)}})),requestAnimationFrame((()=>{this._finishInit()}))}_ensureStampedInstance(t){if(t.firstElementChild)return;const e=t.instance;t.instance=this._createElement(),t.appendChild(t.instance),Object.keys(e).forEach((i=>{t.instance[i]=e[i]}))}_updateClones(t){this._firstIndex=~~((this._buffers[0].translateY-this._initialScroll)/this.itemHeight)+this._initialIndex;const e=t?this.$.scroller.getBoundingClientRect():void 0;this._buffers.forEach(((i,o)=>{if(!i.updated){const a=this._firstIndex+this.bufferSize*o;[...i.children].forEach(((i,o)=>{const s=i._itemWrapper;t&&!this._isVisible(s,e)||this._updateElement(s.instance,a+o)})),i.updated=!0}}))}_isVisible(t,e){const i=t.getBoundingClientRect();return i.bottom>e.top&&i.top<e.bottom}}const P=document.createElement("template");P.innerHTML="\n <style>\n :host {\n --vaadin-infinite-scroller-item-height: 270px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n }\n </style>\n",(0,d.M)(class extends M{static get is(){return"vaadin-date-picker-month-scroller"}constructor(){super(),this.bufferSize=3,this.shadowRoot.appendChild(P.content.cloneNode(!0))}_createElement(){return document.createElement("vaadin-month-calendar")}_updateElement(t,e){t.month=w(e)}});const A=document.createElement("template");A.innerHTML="\n <style>\n :host {\n --vaadin-infinite-scroller-item-height: 80px;\n width: 50px;\n display: block;\n height: 100%;\n position: absolute;\n right: 0;\n transform: translateX(100%);\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n /* Center the year scroller position. */\n --vaadin-infinite-scroller-buffer-offset: 50%;\n }\n\n :host::before {\n content: '';\n display: block;\n background: transparent;\n width: 0;\n height: 0;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n border-width: 6px;\n border-style: solid;\n border-color: transparent;\n border-left-color: #000;\n }\n </style>\n",(0,d.M)(class extends M{static get is(){return"vaadin-date-picker-year-scroller"}constructor(){super(),this.bufferSize=12,this.shadowRoot.appendChild(A.content.cloneNode(!0))}_createElement(){return document.createElement("vaadin-date-picker-year")}_updateElement(t,e){t.year=this._yearAfterXYears(e)}_yearAfterXYears(t){const e=new Date,i=new Date(e);return i.setFullYear(parseInt(t)+e.getFullYear()),i.getFullYear()}});const I=t=>class extends t{static get properties(){return{year:{type:String,sync:!0},selectedDate:{type:Object,sync:!0}}}static get observers(){return["__updateSelected(year, selectedDate)"]}__updateSelected(t,e){this.toggleAttribute("selected",e&&e.getFullYear()===t),this.toggleAttribute("current",t===(new Date).getFullYear())}};class O extends((0,a.Tb)(I(h.H3))){static get is(){return"vaadin-date-picker-year"}static get template(){return h.dy`
|
753
|
-
<style>
|
754
|
-
:host {
|
755
|
-
display: block;
|
756
|
-
height: 100%;
|
757
|
-
}
|
758
|
-
</style>
|
759
|
-
<div part="year-number">[[year]]</div>
|
760
|
-
<div part="year-separator" aria-hidden="true"></div>
|
761
|
-
`}}(0,d.M)(O),i(7894);var F=i(74933),H=i(91014);function z(t,e,i,o,a){let s;a&&(s="object"==typeof i&&null!==i,s&&(o=t.__dataTemp[e]));let n=o!==i&&(o==o||i==i);return s&&n&&(t.__dataTemp[e]=i),n}const Y=(0,H.o)((t=>class extends t{_shouldPropertyChange(t,e,i){return z(this,t,e,i,!0)}})),V=(0,H.o)((t=>class extends t{static get properties(){return{mutableData:Boolean}}_shouldPropertyChange(t,e,i){return z(this,t,e,i,this.mutableData)}}));Y._mutablePropertyChange=z;var B=i(89387),L=i(31342);let N=null;function $(){return N}$.prototype=Object.create(HTMLTemplateElement.prototype,{constructor:{value:$,writable:!0}});const W=(0,F.q)($),R=Y(W),j=(0,F.q)(class{});class q extends j{constructor(t){super(),this._configureProperties(t),this.root=this._stampTemplate(this.__dataHost);let e=[];this.children=e;for(let t=this.root.firstChild;t;t=t.nextSibling)e.push(t),t.__templatizeInstance=this;this.__templatizeOwner&&this.__templatizeOwner.__hideTemplateChildren__&&this._showHideChildren(!0);let i=this.__templatizeOptions;(t&&i.instanceProps||!i.instanceProps)&&this._enableProperties()}_configureProperties(t){if(this.__templatizeOptions.forwardHostProp)for(let t in this.__hostProps)this._setPendingProperty(t,this.__dataHost["_host_"+t]);for(let e in t)this._setPendingProperty(e,t[e])}forwardHostProp(t,e){this._setPendingPropertyOrPath(t,e,!1,!0)&&this.__dataHost._enqueueClient(this)}_addEventListenerToNode(t,e,i){if(this._methodHost&&this.__templatizeOptions.parentModel)this._methodHost._addEventListenerToNode(t,e,(t=>{t.model=this,i(t)}));else{let o=this.__dataHost.__dataHost;o&&o._addEventListenerToNode(t,e,i)}}_showHideChildren(t){!function(t,e){for(let i=0;i<e.length;i++){let o=e[i];if(Boolean(t)!=Boolean(o.__hideTemplateChildren__))if(o.nodeType===Node.TEXT_NODE)t?(o.__polymerTextContent__=o.textContent,o.textContent=""):o.textContent=o.__polymerTextContent__;else if("slot"===o.localName)if(t)o.__polymerReplaced__=document.createComment("hidden-slot"),(0,L.r)((0,L.r)(o).parentNode).replaceChild(o.__polymerReplaced__,o);else{const t=o.__polymerReplaced__;t&&(0,L.r)((0,L.r)(t).parentNode).replaceChild(o,t)}else o.style&&(t?(o.__polymerDisplay__=o.style.display,o.style.display="none"):o.style.display=o.__polymerDisplay__);o.__hideTemplateChildren__=t,o._showHideChildren&&o._showHideChildren(t)}}(t,this.children)}_setUnmanagedPropertyToNode(t,e,i){t.__hideTemplateChildren__&&t.nodeType==Node.TEXT_NODE&&"textContent"==e?t.__polymerTextContent__=i:super._setUnmanagedPropertyToNode(t,e,i)}get parentModel(){let t=this.__parentModel;if(!t){let e;t=this;do{t=t.__dataHost.__dataHost}while((e=t.__templatizeOptions)&&!e.parentModel);this.__parentModel=t}return t}dispatchEvent(t){return!0}}q.prototype.__dataHost,q.prototype.__templatizeOptions,q.prototype._methodHost,q.prototype.__templatizeOwner,q.prototype.__hostProps;const K=Y(q);function U(t){let e=t.__dataHost;return e&&e._methodHost||e}function X(t,e){return function(t,i,o){e.call(t.__templatizeOwner,i.substring(6),o[i])}}function Q(t,e){return function(t,i,o){e.call(t.__templatizeOwner,t,i,o[i])}}function J(t,e,i){if(B.XN&&!U(t))throw new Error("strictTemplatePolicy: template owner not trusted");if(i=i||{},t.__templatizeOwner)throw new Error("A <template> can only be templatized once");t.__templatizeOwner=e;let o=(e?e.constructor:q)._parseTemplate(t),a=o.templatizeInstanceClass;a||(a=function(t,e,i){let o=i.mutableData?K:q;J.mixin&&(o=J.mixin(o));let a=class extends o{};return a.prototype.__templatizeOptions=i,a.prototype._bindTemplate(t),function(t,e,i,o){let a=i.hostProps||{};for(let e in o.instanceProps){delete a[e];let i=o.notifyInstanceProp;i&&t.prototype._addPropertyEffect(e,t.prototype.PROPERTY_EFFECT_TYPES.NOTIFY,{fn:Q(0,i)})}if(o.forwardHostProp&&e.__dataHost)for(let e in a)i.hasHostProps||(i.hasHostProps=!0),t.prototype._addPropertyEffect(e,t.prototype.PROPERTY_EFFECT_TYPES.NOTIFY,{fn:function(t,e,i){t.__dataHost._setPendingPropertyOrPath("_host_"+e,i[e],!0,!0)}})}(a,t,e,i),a}(t,o,i),o.templatizeInstanceClass=a);const s=U(t);!function(t,e,i,o){let a=i.forwardHostProp;if(a&&e.hasHostProps){const s="template"==t.localName;let n=e.templatizeTemplateClass;if(!n){if(s){let t=i.mutableData?R:W;class o extends t{}n=e.templatizeTemplateClass=o}else{const i=t.constructor;class o extends i{}n=e.templatizeTemplateClass=o}let r=e.hostProps;for(let t in r)n.prototype._addPropertyEffect("_host_"+t,n.prototype.PROPERTY_EFFECT_TYPES.PROPAGATE,{fn:X(0,a)}),n.prototype._createNotifyingProperty("_host_"+t);B.a2&&o&&function(t,e,i){const o=i.constructor._properties,{propertyEffects:a}=t,{instanceProps:s}=e;for(let t in a)if(!(o[t]||s&&s[t])){const e=a[t];for(let i=0;i<e.length;i++){const{part:o}=e[i].info;if(!o.signature||!o.signature.static){console.warn(`Property '${t}' used in template but not declared in 'properties'; attribute will not be observed.`);break}}}}(e,i,o)}if(t.__dataProto&&Object.assign(t.__data,t.__dataProto),s)!function(t,e){N=t,Object.setPrototypeOf(t,e.prototype),new e,N=null}(t,n),t.__dataTemp={},t.__dataPending=null,t.__dataOld=null,t._enableProperties();else{Object.setPrototypeOf(t,n.prototype);const i=e.hostProps;for(let e in i)if(e="_host_"+e,e in t){const i=t[e];delete t[e],t.__data[e]=i}}}}(t,o,i,s);let n=class extends a{};return n.prototype._methodHost=s,n.prototype.__dataHost=t,n.prototype.__templatizeOwner=e,n.prototype.__hostProps=o.hostProps,n}var G=i(2224);class Z{constructor(){this._asyncModule=null,this._callback=null,this._timer=null}setConfig(t,e){this._asyncModule=t,this._callback=e,this._timer=this._asyncModule.run((()=>{this._timer=null,tt.delete(this),this._callback()}))}cancel(){this.isActive()&&(this._cancelAsync(),tt.delete(this))}_cancelAsync(){this.isActive()&&(this._asyncModule.cancel(this._timer),this._timer=null)}flush(){this.isActive()&&(this.cancel(),this._callback())}isActive(){return null!=this._timer}static debounce(t,e,i){return t instanceof Z?t._cancelAsync():t=new Z,t.setConfig(e,i),t}}let tt=new Set;const et=function(){const t=Boolean(tt.size);return tt.forEach((t=>{try{t.flush()}catch(t){setTimeout((()=>{throw t}))}})),t},it=function(){let t,e;do{t=window.ShadyDOM&&ShadyDOM.flush(),window.ShadyCSS&&window.ShadyCSS.ScopingShim&&window.ShadyCSS.ScopingShim.flush(),e=et()}while(t||e)};var ot=i(81446);let at=!1;const st=V(h.H3);class nt extends st{static get is(){return"dom-repeat"}static get template(){return null}static get properties(){return{items:{type:Array},as:{type:String,value:"item"},indexAs:{type:String,value:"index"},itemsIndexAs:{type:String,value:"itemsIndex"},sort:{type:Function,observer:"__sortChanged"},filter:{type:Function,observer:"__filterChanged"},observe:{type:String,observer:"__observeChanged"},delay:Number,renderedItemCount:{type:Number,notify:!B.dJ,readOnly:!0},initialCount:{type:Number},targetFramerate:{type:Number,value:20},_targetFrameTime:{type:Number,computed:"__computeFrameTime(targetFramerate)"},notifyDomChange:{type:Boolean},reuseChunkedInstances:{type:Boolean}}}static get observers(){return["__itemsChanged(items.*)"]}constructor(){super(),this.__instances=[],this.__renderDebouncer=null,this.__itemsIdxToInstIdx={},this.__chunkCount=null,this.__renderStartTime=null,this.__itemsArrayChanged=!1,this.__shouldMeasureChunk=!1,this.__shouldContinueChunking=!1,this.__chunkingId=0,this.__sortFn=null,this.__filterFn=null,this.__observePaths=null,this.__ctor=null,this.__isDetached=!0,this.template=null,this._templateInfo}disconnectedCallback(){super.disconnectedCallback(),this.__isDetached=!0;for(let t=0;t<this.__instances.length;t++)this.__detachInstance(t);this.__chunkingId&&cancelAnimationFrame(this.__chunkingId)}connectedCallback(){if(super.connectedCallback(),function(){if(B.nL&&!B.my){if(!at){at=!0;const t=document.createElement("style");t.textContent="dom-bind,dom-if,dom-repeat{display:none;}",document.head.appendChild(t)}return!0}return!1}()||(this.style.display="none"),this.__isDetached){this.__isDetached=!1;let t=(0,L.r)((0,L.r)(this).parentNode);for(let e=0;e<this.__instances.length;e++)this.__attachInstance(e,t);this.__chunkingId&&this.__render()}}__ensureTemplatized(){if(!this.__ctor){const t=this;let e=this.template=t._templateInfo?t:this.querySelector("template");if(!e){let t=new MutationObserver((()=>{if(!this.querySelector("template"))throw new Error("dom-repeat requires a <template> child");t.disconnect(),this.__render()}));return t.observe(this,{childList:!0}),!1}let i={};i[this.as]=!0,i[this.indexAs]=!0,i[this.itemsIndexAs]=!0,this.__ctor=J(e,this,{mutableData:this.mutableData,parentModel:!0,instanceProps:i,forwardHostProp:function(t,e){let i=this.__instances;for(let o,a=0;a<i.length&&(o=i[a]);a++)o.forwardHostProp(t,e)},notifyInstanceProp:function(t,e,i){if((0,ot.wB)(this.as,e)){let o=t[this.itemsIndexAs];e==this.as&&(this.items[o]=i);let a=(0,ot.Iu)(this.as,`${JSCompiler_renameProperty("items",this)}.${o}`,e);this.notifyPath(a,i)}}})}return!0}__getMethodHost(){return this.__dataHost._methodHost||this.__dataHost}__functionFromPropertyValue(t){if("string"==typeof t){let e=t,i=this.__getMethodHost();return function(){return i[e].apply(i,arguments)}}return t}__sortChanged(t){this.__sortFn=this.__functionFromPropertyValue(t),this.items&&this.__debounceRender(this.__render)}__filterChanged(t){this.__filterFn=this.__functionFromPropertyValue(t),this.items&&this.__debounceRender(this.__render)}__computeFrameTime(t){return Math.ceil(1e3/t)}__observeChanged(){this.__observePaths=this.observe&&this.observe.replace(".*",".").split(" ")}__handleObservedPaths(t){if(this.__sortFn||this.__filterFn)if(t){if(this.__observePaths){let e=this.__observePaths;for(let i=0;i<e.length;i++)0===t.indexOf(e[i])&&this.__debounceRender(this.__render,this.delay)}}else this.__debounceRender(this.__render,this.delay)}__itemsChanged(t){this.items&&!Array.isArray(this.items)&&console.warn("dom-repeat expected array for `items`, found",this.items),this.__handleItemPath(t.path,t.value)||("items"===t.path&&(this.__itemsArrayChanged=!0),this.__debounceRender(this.__render))}__debounceRender(t,e=0){var i;this.__renderDebouncer=Z.debounce(this.__renderDebouncer,e>0?G.Wc.after(e):G.YA,t.bind(this)),i=this.__renderDebouncer,tt.add(i)}render(){this.__debounceRender(this.__render),it()}__render(){if(!this.__ensureTemplatized())return;let t=this.items||[];const e=this.__sortAndFilterItems(t),i=this.__calculateLimit(e.length);this.__updateInstances(t,i,e),this.initialCount&&(this.__shouldMeasureChunk||this.__shouldContinueChunking)&&(cancelAnimationFrame(this.__chunkingId),this.__chunkingId=requestAnimationFrame((()=>{this.__chunkingId=null,this.__continueChunking()}))),this._setRenderedItemCount(this.__instances.length),B.dJ&&!this.notifyDomChange||this.dispatchEvent(new CustomEvent("dom-change",{bubbles:!0,composed:!0}))}__sortAndFilterItems(t){let e=new Array(t.length);for(let i=0;i<t.length;i++)e[i]=i;return this.__filterFn&&(e=e.filter(((e,i,o)=>this.__filterFn(t[e],i,o)))),this.__sortFn&&e.sort(((e,i)=>this.__sortFn(t[e],t[i]))),e}__calculateLimit(t){let e=t;const i=this.__instances.length;if(this.initialCount){let o;!this.__chunkCount||this.__itemsArrayChanged&&!this.reuseChunkedInstances?(e=Math.min(t,this.initialCount),o=Math.max(e-i,0),this.__chunkCount=o||1):(o=Math.min(Math.max(t-i,0),this.__chunkCount),e=Math.min(i+o,t)),this.__shouldMeasureChunk=o===this.__chunkCount,this.__shouldContinueChunking=e<t,this.__renderStartTime=performance.now()}return this.__itemsArrayChanged=!1,e}__continueChunking(){if(this.__shouldMeasureChunk){const t=performance.now()-this.__renderStartTime,e=this._targetFrameTime/t;this.__chunkCount=Math.round(this.__chunkCount*e)||1}this.__shouldContinueChunking&&this.__debounceRender(this.__render)}__updateInstances(t,e,i){const o=this.__itemsIdxToInstIdx={};let a;for(a=0;a<e;a++){let e=this.__instances[a],s=i[a],n=t[s];o[s]=a,e?(e._setPendingProperty(this.as,n),e._setPendingProperty(this.indexAs,a),e._setPendingProperty(this.itemsIndexAs,s),e._flushProperties()):this.__insertInstance(n,a,s)}for(let t=this.__instances.length-1;t>=a;t--)this.__detachAndRemoveInstance(t)}__detachInstance(t){let e=this.__instances[t];const i=(0,L.r)(e.root);for(let t=0;t<e.children.length;t++){let o=e.children[t];i.appendChild(o)}return e}__attachInstance(t,e){let i=this.__instances[t];e.insertBefore(i.root,this)}__detachAndRemoveInstance(t){this.__detachInstance(t),this.__instances.splice(t,1)}__stampInstance(t,e,i){let o={};return o[this.as]=t,o[this.indexAs]=e,o[this.itemsIndexAs]=i,new this.__ctor(o)}__insertInstance(t,e,i){const o=this.__stampInstance(t,e,i);let a=this.__instances[e+1],s=a?a.children[0]:this;return(0,L.r)((0,L.r)(this).parentNode).insertBefore(o.root,s),this.__instances[e]=o,o}_showHideChildren(t){for(let e=0;e<this.__instances.length;e++)this.__instances[e]._showHideChildren(t)}__handleItemPath(t,e){let i=t.slice(6),o=i.indexOf("."),a=o<0?i:i.substring(0,o);if(a==parseInt(a,10)){let t=o<0?"":i.substring(o+1);this.__handleObservedPaths(t);let s=this.__itemsIdxToInstIdx[a],n=this.__instances[s];if(n){let i=this.as+(t?"."+t:"");n._setPendingPropertyOrPath(i,e,!1,!0),n._flushProperties()}return!0}}itemForElement(t){let e=this.modelForElement(t);return e&&e[this.as]}indexForElement(t){let e=this.modelForElement(t);return e&&e[this.indexAs]}modelForElement(t){return function(t,e){let i;for(;e;)if(i=e.__dataHost?e:e.__templatizeInstance){if(i.__dataHost==t)return i;e=i.__dataHost}else e=(0,L.r)(e).parentNode;return null}(this.template,t)}}customElements.define(nt.is,nt);var rt=i(21360),lt=i(99109);const ht=t=>class extends((0,rt.W)(t)){static get properties(){return{month:{type:Object,value:new Date,sync:!0},selectedDate:{type:Object,notify:!0,sync:!0},focusedDate:{type:Object},showWeekNumbers:{type:Boolean,value:!1},i18n:{type:Object},ignoreTaps:{type:Boolean},minDate:{type:Date,value:null,sync:!0},maxDate:{type:Date,value:null,sync:!0},disabled:{type:Boolean,reflectToAttribute:!0},_days:{type:Array},_weeks:{type:Array},_notTapping:{type:Boolean}}}static get observers(){return["__focusedDateChanged(focusedDate, _days)"]}get focusableDateElement(){return[...this.shadowRoot.querySelectorAll("[part~=date]")].find((t=>g(t.date,this.focusedDate)))}ready(){super.ready(),(0,lt.NH)(this.$.monthGrid,"tap",this._handleTap.bind(this))}_isDisabled(t,e,i){const o=new Date(0,0);o.setFullYear(t.getFullYear()),o.setMonth(t.getMonth()),o.setDate(1);const a=new Date(0,0);return a.setFullYear(t.getFullYear()),a.setMonth(t.getMonth()+1),a.setDate(0),!(e&&i&&e.getMonth()===i.getMonth()&&e.getMonth()===t.getMonth()&&i.getDate()-e.getDate()>=0||v(o,e,i)||v(a,e,i))}_getTitle(t,e){if(void 0!==t&&void 0!==e)return e.formatTitle(e.monthNames[t.getMonth()],t.getFullYear())}_onMonthGridTouchStart(){this._notTapping=!1,setTimeout((()=>{this._notTapping=!0}),300)}_dateAdd(t,e){t.setDate(t.getDate()+e)}_applyFirstDayOfWeek(t,e){if(void 0!==t&&void 0!==e)return t.slice(e).concat(t.slice(0,e))}_getWeekDayNames(t,e){if(void 0===t||void 0===e)return[];const{weekdays:i,weekdaysShort:o,firstDayOfWeek:a}=t,s=this._applyFirstDayOfWeek(o,a);return this._applyFirstDayOfWeek(i,a).map(((t,e)=>({weekDay:t,weekDayShort:s[e]})))}__focusedDateChanged(t,e){Array.isArray(e)&&e.some((e=>g(e,t)))?this.removeAttribute("aria-hidden"):this.setAttribute("aria-hidden","true")}_getDate(t){return t?t.getDate():""}_showWeekSeparator(t,e){return t&&e&&1===e.firstDayOfWeek}_isToday(t){return g(new Date,t)}_getDays(t,e){if(void 0===t||void 0===e)return[];const i=new Date(0,0);for(i.setFullYear(t.getFullYear()),i.setMonth(t.getMonth()),i.setDate(1);i.getDay()!==e.firstDayOfWeek;)this._dateAdd(i,-1);const o=[],a=i.getMonth(),s=t.getMonth();for(;i.getMonth()===s||i.getMonth()===a;)o.push(i.getMonth()===s?new Date(i.getTime()):null),this._dateAdd(i,1);return o}_getWeeks(t){return t.reduce(((t,e,i)=>(i%7==0&&t.push([]),t[t.length-1].push(e),t)),[])}_handleTap(t){this.ignoreTaps||this._notTapping||!t.target.date||t.target.hasAttribute("disabled")||(this.selectedDate=t.target.date,this.dispatchEvent(new CustomEvent("date-tap",{detail:{date:t.target.date},bubbles:!0,composed:!0})))}_preventDefault(t){t.preventDefault()}__getWeekNumber(t){return function(t){let e=t.getDay();0===e&&(e=7);const i=4-e,o=new Date(t.getTime()+24*i*3600*1e3),a=new Date(0,0);a.setFullYear(o.getFullYear());const s=o.getTime()-a.getTime(),n=Math.round(s/864e5);return Math.floor(n/7+1)}(t.reduce(((t,e)=>!t&&e?e:t)))}__getDayAriaLabel(t){if(!t)return"";let e=`${this._getDate(t)} ${this.i18n.monthNames[t.getMonth()]} ${t.getFullYear()}, ${this.i18n.weekdays[t.getDay()]}`;return this._isToday(t)&&(e+=`, ${this.i18n.today}`),e}},dt=m.iv`
|
762
|
-
:host {
|
763
|
-
display: block;
|
764
|
-
}
|
765
|
-
|
766
|
-
#monthGrid {
|
767
|
-
width: 100%;
|
768
|
-
border-collapse: collapse;
|
769
|
-
}
|
770
|
-
|
771
|
-
#days-container tr,
|
772
|
-
#weekdays-container tr {
|
773
|
-
display: flex;
|
774
|
-
}
|
775
|
-
|
776
|
-
[part~='date'] {
|
777
|
-
outline: none;
|
778
|
-
}
|
779
|
-
|
780
|
-
[part~='disabled'] {
|
781
|
-
pointer-events: none;
|
782
|
-
}
|
783
|
-
|
784
|
-
[part='week-number'][hidden],
|
785
|
-
[part='weekday'][hidden] {
|
786
|
-
display: none;
|
787
|
-
}
|
788
|
-
|
789
|
-
[part='weekday'],
|
790
|
-
[part~='date'] {
|
791
|
-
width: calc(100% / 7);
|
792
|
-
padding: 0;
|
793
|
-
font-weight: normal;
|
794
|
-
}
|
795
|
-
|
796
|
-
[part='weekday']:empty,
|
797
|
-
[part='week-number'] {
|
798
|
-
width: 12.5%;
|
799
|
-
flex-shrink: 0;
|
800
|
-
padding: 0;
|
801
|
-
}
|
802
|
-
|
803
|
-
:host([week-numbers]) [part='weekday']:not(:empty),
|
804
|
-
:host([week-numbers]) [part~='date'] {
|
805
|
-
width: 12.5%;
|
806
|
-
}
|
807
|
-
|
808
|
-
@media (forced-colors: active) {
|
809
|
-
[part~='date'][part~='focused'] {
|
810
|
-
outline: 1px solid;
|
811
|
-
}
|
812
|
-
|
813
|
-
[part~='date'][part~='selected'] {
|
814
|
-
outline: 3px solid;
|
815
|
-
}
|
816
|
-
}
|
817
|
-
`;(0,a.hC)("vaadin-month-calendar",dt,{moduleId:"vaadin-month-calendar-styles"});class ct extends(ht((0,a.Tb)(h.H3))){static get template(){return h.dy`
|
818
|
-
<div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n)]]</div>
|
819
|
-
<table
|
820
|
-
id="monthGrid"
|
821
|
-
role="grid"
|
822
|
-
aria-labelledby="month-header"
|
823
|
-
on-touchend="_preventDefault"
|
824
|
-
on-touchstart="_onMonthGridTouchStart"
|
825
|
-
>
|
826
|
-
<thead id="weekdays-container">
|
827
|
-
<tr role="row" part="weekdays">
|
828
|
-
<th part="weekday" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]"></th>
|
829
|
-
<template is="dom-repeat" items="[[_getWeekDayNames(i18n, showWeekNumbers)]]">
|
830
|
-
<th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
|
831
|
-
[[item.weekDayShort]]
|
832
|
-
</th>
|
833
|
-
</template>
|
834
|
-
</tr>
|
835
|
-
</thead>
|
836
|
-
<tbody id="days-container">
|
837
|
-
<template is="dom-repeat" items="[[_weeks]]" as="week">
|
838
|
-
<tr role="row">
|
839
|
-
<td part="week-number" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]">
|
840
|
-
[[__getWeekNumber(week)]]
|
841
|
-
</td>
|
842
|
-
<template is="dom-repeat" items="[[week]]">
|
843
|
-
<td
|
844
|
-
role="gridcell"
|
845
|
-
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
|
846
|
-
date="[[item]]"
|
847
|
-
tabindex$="[[__getDayTabindex(item, focusedDate)]]"
|
848
|
-
disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
|
849
|
-
aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
|
850
|
-
aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
|
851
|
-
aria-label$="[[__getDayAriaLabel(item)]]"
|
852
|
-
>[[_getDate(item)]]</td
|
853
|
-
>
|
854
|
-
</template>
|
855
|
-
</tr>
|
856
|
-
</template>
|
857
|
-
</tbody>
|
858
|
-
</table>
|
859
|
-
`}static get is(){return"vaadin-month-calendar"}static get properties(){return{_days:{type:Array,computed:"_getDays(month, i18n, minDate, maxDate)"},_weeks:{type:Array,computed:"_getWeeks(_days)"},disabled:{type:Boolean,reflectToAttribute:!0,computed:"_isDisabled(month, minDate, maxDate)"}}}static get observers(){return["_showWeekNumbersChanged(showWeekNumbers, i18n)"]}_showWeekNumbersChanged(t,e){t&&e&&1===e.firstDayOfWeek?this.setAttribute("week-numbers",""):this.removeAttribute("week-numbers")}__getDatePart(t,e,i,o,a){const s=["date"];return this.__isDayDisabled(t,o,a)&&s.push("disabled"),this.__isDayFocused(t,e)&&s.push("focused"),this.__isDaySelected(t,i)&&s.push("selected"),this._isToday(t)&&s.push("today"),s.join(" ")}__isDayFocused(t,e){return g(t,e)}__isDaySelected(t,e){return g(t,e)}__getDayAriaSelected(t,e){if(this.__isDaySelected(t,e))return"true"}__isDayDisabled(t,e,i){return!v(t,e,i)}__getDayAriaDisabled(t,e,i){if(void 0!==t&&void 0!==e&&void 0!==i)return this.__isDayDisabled(t,e,i)?"true":void 0}__getDayTabindex(t,e){return this.__isDayFocused(t,e)?"0":"-1"}}(0,d.M)(ct);var ut=i(16155),_t=i(52223);class pt{constructor(t,e){this.query=t,this.callback=e,this._boundQueryHandler=this._queryHandler.bind(this)}hostConnected(){this._removeListener(),this._mediaQuery=window.matchMedia(this.query),this._addListener(),this._queryHandler(this._mediaQuery)}hostDisconnected(){this._removeListener()}_addListener(){this._mediaQuery&&this._mediaQuery.addListener(this._boundQueryHandler)}_removeListener(){this._mediaQuery&&this._mediaQuery.removeListener(this._boundQueryHandler),this._mediaQuery=null}_queryHandler(t){"function"==typeof this.callback&&this.callback(t.matches)}}var mt=i(78591);const ft=t=>class extends t{static get properties(){return{scrollDuration:{type:Number,value:300},selectedDate:{type:Object,value:null,sync:!0},focusedDate:{type:Object,notify:!0,observer:"_focusedDateChanged",sync:!0},_focusedMonthDate:Number,initialPosition:{type:Object,observer:"_initialPositionChanged"},_originDate:{type:Object,value:new Date},_visibleMonthIndex:Number,_desktopMode:{type:Boolean,observer:"_desktopModeChanged"},_desktopMediaQuery:{type:String,value:"(min-width: 375px)"},_translateX:{observer:"_translateXChanged"},_yearScrollerWidth:{value:50},i18n:{type:Object},showWeekNumbers:{type:Boolean,value:!1},_ignoreTaps:Boolean,_notTapping:Boolean,minDate:{type:Object,sync:!0},maxDate:{type:Object,sync:!0},label:String,_cancelButton:{type:Object},_todayButton:{type:Object},calendars:{type:Array,value:()=>[]},years:{type:Array,value:()=>[]}}}static get observers(){return["__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme)","__updateCancelButton(_cancelButton, i18n)","__updateTodayButton(_todayButton, i18n, minDate, maxDate)","__updateYears(years, selectedDate, _theme)"]}get __useSubMonthScrolling(){return this._monthScroller.clientHeight<this._monthScroller.itemHeight+this._monthScroller.bufferOffset}get focusableDateElement(){return this.calendars.map((t=>t.focusableDateElement)).find(Boolean)}_addListeners(){(0,lt.BP)(this.$.scrollers,"pan-y"),(0,lt.NH)(this.$.scrollers,"track",this._track.bind(this)),(0,lt.NH)(this.shadowRoot.querySelector('[part="clear-button"]'),"tap",this._clear.bind(this)),(0,lt.NH)(this.shadowRoot.querySelector('[part="toggle-button"]'),"tap",this._cancel.bind(this)),(0,lt.NH)(this.shadowRoot.querySelector('[part="years-toggle-button"]'),"tap",this._toggleYearScroller.bind(this))}_initControllers(){this.addController(new pt(this._desktopMediaQuery,(t=>{this._desktopMode=t}))),this.addController(new mt.n(this,"today-button","vaadin-button",{observe:!1,initializer:t=>{t.setAttribute("theme","tertiary"),t.addEventListener("keydown",(t=>this.__onTodayButtonKeyDown(t))),(0,lt.NH)(t,"tap",this._onTodayTap.bind(this)),this._todayButton=t}})),this.addController(new mt.n(this,"cancel-button","vaadin-button",{observe:!1,initializer:t=>{t.setAttribute("theme","tertiary"),t.addEventListener("keydown",(t=>this.__onCancelButtonKeyDown(t))),(0,lt.NH)(t,"tap",this._cancel.bind(this)),this._cancelButton=t}})),this.__initMonthScroller(),this.__initYearScroller()}reset(){this._closeYearScroller(),this._toggleAnimateClass(!0)}focusCancel(){this._cancelButton.focus()}scrollToDate(t,e){const i=this.__useSubMonthScrolling?this._calculateWeekScrollOffset(t):0;this._scrollToPosition(this._differenceInMonths(t,this._originDate)+i,e),this._monthScroller.forceUpdate()}__initMonthScroller(){this.addController(new mt.n(this,"months","vaadin-date-picker-month-scroller",{observe:!1,initializer:t=>{t.addEventListener("custom-scroll",(()=>{this._onMonthScroll()})),t.addEventListener("touchstart",(()=>{this._onMonthScrollTouchStart()})),t.addEventListener("keydown",(t=>{this.__onMonthCalendarKeyDown(t)})),t.addEventListener("init-done",(()=>{const t=[...this.querySelectorAll("vaadin-month-calendar")];t.forEach((t=>{t.addEventListener("selected-date-changed",(t=>{this.selectedDate=t.detail.value}))})),this.calendars=t})),this._monthScroller=t}}))}__initYearScroller(){this.addController(new mt.n(this,"years","vaadin-date-picker-year-scroller",{observe:!1,initializer:t=>{t.setAttribute("aria-hidden","true"),(0,lt.NH)(t,"tap",(t=>{this._onYearTap(t)})),t.addEventListener("custom-scroll",(()=>{this._onYearScroll()})),t.addEventListener("touchstart",(()=>{this._onYearScrollTouchStart()})),t.addEventListener("init-done",(()=>{this.years=[...this.querySelectorAll("vaadin-date-picker-year")]})),this._yearScroller=t}}))}__updateCancelButton(t,e){t&&(t.textContent=e&&e.cancel)}__updateTodayButton(t,e,i,o){t&&(t.textContent=e&&e.today,t.disabled=!this._isTodayAllowed(i,o))}__updateCalendars(t,e,i,o,a,s,n,r,l){t&&t.length&&t.forEach((t=>{t.i18n=e,t.minDate=i,t.maxDate=o,t.focusedDate=s,t.selectedDate=a,t.showWeekNumbers=n,t.ignoreTaps=r,l?t.setAttribute("theme",l):t.removeAttribute("theme")}))}__updateYears(t,e,i){t&&t.length&&t.forEach((t=>{t.selectedDate=e,i?t.setAttribute("theme",i):t.removeAttribute("theme")}))}_selectDate(t){this.selectedDate=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{date:t},bubbles:!0,composed:!0}))}_desktopModeChanged(t){this.toggleAttribute("desktop",t)}_focusedDateChanged(t){this.revealDate(t)}revealDate(t,e=!0){if(!t)return;const i=this._differenceInMonths(t,this._originDate);if(this.__useSubMonthScrolling){const o=this._calculateWeekScrollOffset(t);return void this._scrollToPosition(i+o,e)}const o=this._monthScroller.position>i,a=Math.max(this._monthScroller.itemHeight,this._monthScroller.clientHeight-2*this._monthScroller.bufferOffset)/this._monthScroller.itemHeight,s=this._monthScroller.position+a-1<i;o?this._scrollToPosition(i,e):s&&this._scrollToPosition(i-a+1,e)}_calculateWeekScrollOffset(t){const e=new Date(0,0);e.setFullYear(t.getFullYear()),e.setMonth(t.getMonth()),e.setDate(1);let i=0;for(;e.getDate()<t.getDate();)e.setDate(e.getDate()+1),e.getDay()===this.i18n.firstDayOfWeek&&(i+=1);return i/6}_initialPositionChanged(t){this._monthScroller&&this._yearScroller&&(this._monthScroller.active=!0,this._yearScroller.active=!0),this.scrollToDate(t)}_repositionYearScroller(){const t=this._monthScroller.position;this._visibleMonthIndex=Math.floor(t),this._yearScroller.position=(t+this._originDate.getMonth())/12}_repositionMonthScroller(){this._monthScroller.position=12*this._yearScroller.position-this._originDate.getMonth(),this._visibleMonthIndex=Math.floor(this._monthScroller.position)}_onMonthScroll(){this._repositionYearScroller(),this._doIgnoreTaps()}_onYearScroll(){this._repositionMonthScroller(),this._doIgnoreTaps()}_onYearScrollTouchStart(){this._notTapping=!1,setTimeout((()=>{this._notTapping=!0}),300),this._repositionMonthScroller()}_onMonthScrollTouchStart(){this._repositionYearScroller()}_doIgnoreTaps(){this._ignoreTaps=!0,this._debouncer=S.dx.debounce(this._debouncer,x.Wc.after(300),(()=>{this._ignoreTaps=!1}))}_formatDisplayed(t,e,i){return t&&e&&"function"==typeof e.formatDate?e.formatDate(D(t)):i}_onTodayTap(){const t=new Date;Math.abs(this._monthScroller.position-this._differenceInMonths(t,this._originDate))<.001?(this._selectDate(t),this._close()):this._scrollToCurrentMonth()}_scrollToCurrentMonth(){this.focusedDate&&(this.focusedDate=new Date),this.scrollToDate(new Date,!0)}_onYearTap(t){if(!this._ignoreTaps&&!this._notTapping){const e=(t.detail.y-(this._yearScroller.getBoundingClientRect().top+this._yearScroller.clientHeight/2))/this._yearScroller.itemHeight;this._scrollToPosition(this._monthScroller.position+12*e,!0)}}_scrollToPosition(t,e){if(void 0!==this._targetPosition)return void(this._targetPosition=t);if(!e)return this._monthScroller.position=t,this._targetPosition=void 0,this._repositionYearScroller(),void this.__tryFocusDate();let i;this._targetPosition=t,this._revealPromise=new Promise((t=>{i=t}));let o=0;const a=this._monthScroller.position,s=t=>{o||(o=t);const e=t-o;if(e<this.scrollDuration){const t=(n=e,r=a,l=this._targetPosition-a,(n/=this.scrollDuration/2)<1?l/2*n*n+r:-l/2*((n-=1)*(n-2)-1)+r);this._monthScroller.position=t,window.requestAnimationFrame(s)}else this.dispatchEvent(new CustomEvent("scroll-animation-finished",{bubbles:!0,composed:!0,detail:{position:this._targetPosition,oldPosition:a}})),this._monthScroller.position=this._targetPosition,this._targetPosition=void 0,i(),this._revealPromise=void 0;var n,r,l;setTimeout(this._repositionYearScroller.bind(this),1)};window.requestAnimationFrame(s)}_limit(t,e){return Math.min(e.max,Math.max(e.min,t))}_handleTrack(t){if(Math.abs(t.detail.dx)<10||Math.abs(t.detail.ddy)>10)return;Math.abs(t.detail.ddx)>this._yearScrollerWidth/3&&this._toggleAnimateClass(!0);const e=this._translateX+t.detail.ddx;this._translateX=this._limit(e,{min:0,max:this._yearScrollerWidth})}_track(t){if(!this._desktopMode)switch(t.detail.state){case"start":this._toggleAnimateClass(!1);break;case"track":this._handleTrack(t);break;case"end":this._toggleAnimateClass(!0),this._translateX>=this._yearScrollerWidth/2?this._closeYearScroller():this._openYearScroller()}}_toggleAnimateClass(t){t?this.classList.add("animate"):this.classList.remove("animate")}_toggleYearScroller(){this._isYearScrollerVisible()?this._closeYearScroller():this._openYearScroller()}_openYearScroller(){this._translateX=0,this.setAttribute("years-visible","")}_closeYearScroller(){this.removeAttribute("years-visible"),this._translateX=this._yearScrollerWidth}_isYearScrollerVisible(){return this._translateX<this._yearScrollerWidth/2}_translateXChanged(t){this._desktopMode||(this._monthScroller.style.transform=`translateX(${t-this._yearScrollerWidth}px)`,this._yearScroller.style.transform=`translateX(${t}px)`)}_yearAfterXMonths(t){return w(t).getFullYear()}_differenceInMonths(t,e){return 12*(t.getFullYear()-e.getFullYear())-e.getMonth()+t.getMonth()}_clear(){this._selectDate("")}_close(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}_cancel(){this.focusedDate=this.selectedDate,this._close()}_preventDefault(t){t.preventDefault()}__toggleDate(t){g(t,this.selectedDate)?(this._clear(),this.focusedDate=t):this._selectDate(t)}__onMonthCalendarKeyDown(t){let e=!1;switch(t.key){case"ArrowDown":this._moveFocusByDays(7),e=!0;break;case"ArrowUp":this._moveFocusByDays(-7),e=!0;break;case"ArrowRight":this._moveFocusByDays(this.__isRTL?-1:1),e=!0;break;case"ArrowLeft":this._moveFocusByDays(this.__isRTL?1:-1),e=!0;break;case"Enter":this._selectDate(this.focusedDate),this._close(),e=!0;break;case" ":this.__toggleDate(this.focusedDate),e=!0;break;case"Home":this._moveFocusInsideMonth(this.focusedDate,"minDate"),e=!0;break;case"End":this._moveFocusInsideMonth(this.focusedDate,"maxDate"),e=!0;break;case"PageDown":this._moveFocusByMonths(t.shiftKey?12:1),e=!0;break;case"PageUp":this._moveFocusByMonths(t.shiftKey?-12:-1),e=!0;break;case"Tab":this._onTabKeyDown(t,"calendar")}e&&(t.preventDefault(),t.stopPropagation())}_onTabKeyDown(t,e){switch(t.stopPropagation(),e){case"calendar":t.shiftKey&&(t.preventDefault(),this.hasAttribute("fullscreen")?this.focusCancel():this.__focusInput());break;case"today":t.shiftKey&&(t.preventDefault(),this.focusDateElement());break;case"cancel":t.shiftKey||(t.preventDefault(),this.hasAttribute("fullscreen")?this.focusDateElement():this.__focusInput())}}__onTodayButtonKeyDown(t){"Tab"===t.key&&this._onTabKeyDown(t,"today")}__onCancelButtonKeyDown(t){"Tab"===t.key&&this._onTabKeyDown(t,"cancel")}__focusInput(){this.dispatchEvent(new CustomEvent("focus-input",{bubbles:!0,composed:!0}))}__tryFocusDate(){if(this.__pendingDateFocus){const t=this.focusableDateElement;t&&g(t.date,this.__pendingDateFocus)&&(delete this.__pendingDateFocus,t.focus())}}async focusDate(t,e){const i=t||this.selectedDate||this.initialPosition||new Date;this.focusedDate=i,e||(this._focusedMonthDate=i.getDate()),await this.focusDateElement(!1)}async focusDateElement(t=!0){this.__pendingDateFocus=this.focusedDate,this.calendars.length||await new Promise((t=>{(0,_t.T8)(this,(()=>{it(),t()}))})),t&&this.revealDate(this.focusedDate),this._revealPromise&&await this._revealPromise,this.__tryFocusDate()}_focusClosestDate(t){this.focusDate(b(t,[this.minDate,this.maxDate]))}_focusAllowedDate(t,e,i){this._dateAllowed(t)?this.focusDate(t,i):this._dateAllowed(this.focusedDate)?e>0?this.focusDate(this.maxDate):this.focusDate(this.minDate):this._focusClosestDate(this.focusedDate)}_getDateDiff(t,e){const i=new Date(0,0);return i.setFullYear(this.focusedDate.getFullYear()),i.setMonth(this.focusedDate.getMonth()+t),e&&i.setDate(this.focusedDate.getDate()+e),i}_moveFocusByDays(t){const e=this._getDateDiff(0,t);this._focusAllowedDate(e,t,!1)}_moveFocusByMonths(t){const e=this._getDateDiff(t),i=e.getMonth();this._focusedMonthDate||(this._focusedMonthDate=this.focusedDate.getDate()),e.setDate(this._focusedMonthDate),e.getMonth()!==i&&e.setDate(0),this._focusAllowedDate(e,t,!0)}_moveFocusInsideMonth(t,e){const i=new Date(0,0);i.setFullYear(t.getFullYear()),"minDate"===e?(i.setMonth(t.getMonth()),i.setDate(1)):(i.setMonth(t.getMonth()+1),i.setDate(0)),this._dateAllowed(i)?this.focusDate(i):this._dateAllowed(t)?this.focusDate(this[e]):this._focusClosestDate(t)}_dateAllowed(t,e=this.minDate,i=this.maxDate){return(!e||t>=e)&&(!i||t<=i)}_isTodayAllowed(t,e){const i=new Date,o=new Date(0,0);return o.setFullYear(i.getFullYear()),o.setMonth(i.getMonth()),o.setDate(i.getDate()),this._dateAllowed(o,t,e)}},yt=m.iv`
|
860
|
-
:host {
|
861
|
-
display: flex;
|
862
|
-
flex-direction: column;
|
863
|
-
height: 100%;
|
864
|
-
width: 100%;
|
865
|
-
outline: none;
|
866
|
-
}
|
867
|
-
|
868
|
-
[part='overlay-header'] {
|
869
|
-
display: flex;
|
870
|
-
flex-shrink: 0;
|
871
|
-
flex-wrap: nowrap;
|
872
|
-
align-items: center;
|
873
|
-
}
|
874
|
-
|
875
|
-
:host(:not([fullscreen])) [part='overlay-header'] {
|
876
|
-
display: none;
|
877
|
-
}
|
878
|
-
|
879
|
-
[part='label'] {
|
880
|
-
flex-grow: 1;
|
881
|
-
}
|
882
|
-
|
883
|
-
[hidden] {
|
884
|
-
display: none !important;
|
885
|
-
}
|
886
|
-
|
887
|
-
[part='years-toggle-button'] {
|
888
|
-
display: flex;
|
889
|
-
}
|
890
|
-
|
891
|
-
#scrollers {
|
892
|
-
display: flex;
|
893
|
-
height: 100%;
|
894
|
-
width: 100%;
|
895
|
-
position: relative;
|
896
|
-
overflow: hidden;
|
897
|
-
}
|
898
|
-
|
899
|
-
:host([desktop]) ::slotted([slot='months']) {
|
900
|
-
right: 50px;
|
901
|
-
transform: none !important;
|
902
|
-
}
|
903
|
-
|
904
|
-
:host([desktop]) ::slotted([slot='years']) {
|
905
|
-
transform: none !important;
|
906
|
-
}
|
907
|
-
|
908
|
-
:host(.animate) ::slotted([slot='months']),
|
909
|
-
:host(.animate) ::slotted([slot='years']) {
|
910
|
-
transition: all 200ms;
|
911
|
-
}
|
912
|
-
|
913
|
-
[part='toolbar'] {
|
914
|
-
display: flex;
|
915
|
-
justify-content: space-between;
|
916
|
-
z-index: 2;
|
917
|
-
flex-shrink: 0;
|
918
|
-
}
|
919
|
-
`;(0,a.hC)("vaadin-date-picker-overlay-content",yt,{moduleId:"vaadin-date-picker-overlay-content-styles"});class gt extends(ft((0,ut.k)((0,a.Tb)((0,c.U)(h.H3))))){static get template(){return h.dy`
|
920
|
-
<div part="overlay-header" on-touchend="_preventDefault" aria-hidden="true">
|
921
|
-
<div part="label">[[_formatDisplayed(selectedDate, i18n, label)]]</div>
|
922
|
-
<div part="clear-button" hidden$="[[!selectedDate]]"></div>
|
923
|
-
<div part="toggle-button"></div>
|
924
|
-
|
925
|
-
<div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
|
926
|
-
[[_yearAfterXMonths(_visibleMonthIndex)]]
|
927
|
-
</div>
|
928
|
-
</div>
|
929
|
-
|
930
|
-
<div id="scrollers">
|
931
|
-
<slot name="months"></slot>
|
932
|
-
<slot name="years"></slot>
|
933
|
-
</div>
|
934
|
-
|
935
|
-
<div on-touchend="_preventDefault" role="toolbar" part="toolbar">
|
936
|
-
<slot name="today-button"></slot>
|
937
|
-
<slot name="cancel-button"></slot>
|
938
|
-
</div>
|
939
|
-
`}static get is(){return"vaadin-date-picker-overlay-content"}ready(){super.ready(),this.setAttribute("role","dialog"),this._addListeners(),this._initControllers()}}(0,d.M)(gt);var vt=i(12521),bt=i(34463),Dt=i(73406),wt=i(73208),kt=i(46729),xt=i(62743),Ct=i(80962),St=i(41370),Et=i(52628),Tt=i(39320),Mt=i(39091),Pt=i(29580);const At=t=>class extends((0,Tt.u)((0,ut.k)((0,St.B)((0,Mt.t)((0,Et.L)(t)))))){static get properties(){return{_selectedDate:{type:Object,sync:!0},_focusedDate:{type:Object,sync:!0},value:{type:String,notify:!0,value:"",sync:!0},initialPosition:String,opened:{type:Boolean,reflectToAttribute:!0,notify:!0,observer:"_openedChanged",sync:!0},autoOpenDisabled:Boolean,showWeekNumbers:{type:Boolean,value:!1,sync:!0},_fullscreen:{type:Boolean,value:!1,sync:!0},_fullscreenMediaQuery:{value:"(max-width: 420px), (max-height: 420px)"},i18n:{type:Object,sync:!0,value:()=>({monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],firstDayOfWeek:0,today:"Today",cancel:"Cancel",referenceDate:"",formatDate(t){const e=String(t.year).replace(/\d+/u,(t=>"0000".substr(t.length)+t));return[t.month+1,t.day,e].join("/")},parseDate(t){const e=t.split("/"),i=new Date;let o,a=i.getMonth(),s=i.getFullYear();if(3===e.length?(a=parseInt(e[0])-1,o=parseInt(e[1]),s=parseInt(e[2]),e[2].length<3&&s>=0&&(s=function(t,e,i=0,o=1){if(e>99)throw new Error("The provided year cannot have more than 2 digits.");if(e<0)throw new Error("The provided year cannot be negative.");let a=e+100*Math.floor(t.getFullYear()/100);return t<new Date(a-50,i,o)?a-=100:t>new Date(a+50,i,o)&&(a+=100),a}(this.referenceDate?k(this.referenceDate):new Date,s,a,o))):2===e.length?(a=parseInt(e[0])-1,o=parseInt(e[1])):1===e.length&&(o=parseInt(e[0])),void 0!==o)return{day:o,month:a,year:s}},formatTitle:(t,e)=>`${t} ${e}`})},min:{type:String,sync:!0},max:{type:String,sync:!0},_minDate:{type:Date,computed:"__computeMinOrMaxDate(min)",sync:!0},_maxDate:{type:Date,computed:"__computeMinOrMaxDate(max)",sync:!0},_noInput:{type:Boolean,computed:"_isNoInput(inputElement, _fullscreen, _ios, i18n, opened, autoOpenDisabled)"},_ios:{type:Boolean,value:C.gn},_focusOverlayOnOpen:Boolean,_overlayContent:{type:Object,sync:!0},_hasInputValue:{type:Boolean}}}static get observers(){return["_selectedDateChanged(_selectedDate, i18n)","_focusedDateChanged(_focusedDate, i18n)","__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)","__updateOverlayContentTheme(_overlayContent, _theme)","__updateOverlayContentFullScreen(_overlayContent, _fullscreen)"]}static get constraints(){return[...super.constraints,"min","max"]}constructor(){super(),this._boundOnClick=this._onClick.bind(this),this._boundOnScroll=this._onScroll.bind(this),this._boundOverlayRenderer=this._overlayRenderer.bind(this)}get _inputElementValue(){return super._inputElementValue}set _inputElementValue(t){super._inputElementValue=t,this._hasInputValue=!1}get clearElement(){return null}get _nativeInput(){return this.inputElement?this.inputElement.focusElement||this.inputElement:null}get __unparsableValue(){return!this._inputElementValue||this.__parseDate(this._inputElementValue)?"":this._inputElementValue}_onFocus(t){super._onFocus(t),this._noInput&&t.target.blur()}_onBlur(t){super._onBlur(t),this.opened||(this.__commitParsedOrFocusedDate(),document.hasFocus()&&this.validate())}ready(){super.ready(),this.addEventListener("click",this._boundOnClick),this.addController(new pt(this._fullscreenMediaQuery,(t=>{this._fullscreen=t}))),this.addController(new Pt.B(this));const t=this.$.overlay;this._overlayElement=t,t.renderer=this._boundOverlayRenderer,this.addEventListener("mousedown",(()=>this.__bringToFront())),this.addEventListener("touchstart",(()=>this.__bringToFront()))}disconnectedCallback(){super.disconnectedCallback(),this.opened=!1}open(){this.disabled||this.readonly||(this.opened=!0)}close(){this.$.overlay.close()}_overlayRenderer(t){if(t.firstChild)return;const e=document.createElement("vaadin-date-picker-overlay-content");t.appendChild(e),this._overlayContent=e,e.addEventListener("close",(()=>{this._close()})),e.addEventListener("focus-input",this._focusAndSelect.bind(this)),e.addEventListener("date-tap",(t=>{this.__commitDate(t.detail.date),this._close()})),e.addEventListener("date-selected",(t=>{this.__commitDate(t.detail.date)})),e.addEventListener("focusin",(()=>{this._keyboardActive&&this._setFocused(!0)})),e.addEventListener("focused-date-changed",(t=>{this._focusedDate=t.detail.value})),e.addEventListener("click",(t=>t.stopPropagation()))}__parseDate(t){if(!this.i18n.parseDate)return;let e=this.i18n.parseDate(t);return e&&(e=k(`${e.year}-${e.month+1}-${e.day}`)),e&&!isNaN(e.getTime())?e:void 0}__formatDate(t){if(this.i18n.formatDate)return this.i18n.formatDate(D(t))}checkValidity(){const t=this._inputElementValue,e=!t||!!this._selectedDate&&t===this.__formatDate(this._selectedDate),i=!this._selectedDate||v(this._selectedDate,this._minDate,this._maxDate);let o=!0;return this.inputElement&&(this.inputElement.checkValidity?o=this.inputElement.checkValidity():this.inputElement.validate&&(o=this.inputElement.validate())),e&&i&&o}_shouldSetFocus(t){return!this._shouldKeepFocusRing}_shouldRemoveFocus(t){return!this.opened}_setFocused(t){super._setFocused(t),this._shouldKeepFocusRing=t&&this._keyboardActive}__commitValueChange(){const t=this.__unparsableValue;this.__committedValue!==this.value?(this.validate(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))):this.__committedUnparsableValue!==t&&(this.validate(),this.dispatchEvent(new CustomEvent("unparsable-change"))),this.__committedValue=this.value,this.__committedUnparsableValue=t}__commitDate(t){this.__keepCommittedValue=!0,this._selectedDate=t,this.__keepCommittedValue=!1,this.__commitValueChange()}_close(){this._focus(),this.close()}__bringToFront(){requestAnimationFrame((()=>{this.$.overlay.bringToFront()}))}_isNoInput(t,e,i,o,a,s){return!t||e&&(!s||a)||i&&a||!o.parseDate}_formatISO(t){if(!(t instanceof Date))return"";const e=(t,e="00")=>(e+t).substr((e+t).length-e.length);let i="",o="0000",a=t.getFullYear();return a<0?(a=-a,i="-",o="000000"):t.getFullYear()>=1e4&&(i="+",o="000000"),[i+e(a,o),e(t.getMonth()+1),e(t.getDate())].join("-")}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.autocomplete="off",t.setAttribute("role","combobox"),t.setAttribute("aria-haspopup","dialog"),t.setAttribute("aria-expanded",!!this.opened),this._applyInputValue(this._selectedDate))}_openedChanged(t){this.inputElement&&this.inputElement.setAttribute("aria-expanded",t)}_selectedDateChanged(t,e){void 0!==t&&void 0!==e&&(this.__keepInputValue||this._applyInputValue(t),this.value=this._formatISO(t),this._ignoreFocusedDateChange=!0,this._focusedDate=t,this._ignoreFocusedDateChange=!1)}_focusedDateChanged(t,e){void 0!==t&&void 0!==e&&(this._ignoreFocusedDateChange||this._noInput||this._applyInputValue(t))}_valueChanged(t,e){const i=k(t);!t||i?(t?g(this._selectedDate,i)||(this._selectedDate=i,void 0!==e&&this.validate()):this._selectedDate=null,this.__keepCommittedValue||(this.__committedValue=this.value,this.__committedUnparsableValue=""),this._toggleHasValue(this._hasValue)):this.value=e}__updateOverlayContent(t,e,i,o,a,s,n,r){t&&(t.i18n=e,t.label=i,t.minDate=o,t.maxDate=a,t.focusedDate=s,t.selectedDate=n,t.showWeekNumbers=r)}__updateOverlayContentTheme(t,e){t&&(e?t.setAttribute("theme",e):t.removeAttribute("theme"))}__updateOverlayContentFullScreen(t,e){t&&t.toggleAttribute("fullscreen",e)}_onOverlayEscapePress(){this._focusedDate=this._selectedDate,this._close()}_onOverlayOpened(){const t=this._overlayContent;t.reset();const e=this._getInitialPosition();t.initialPosition=e;const i=t.focusedDate||e;t.scrollToDate(i),this._ignoreFocusedDateChange=!0,t.focusedDate=i,this._ignoreFocusedDateChange=!1,window.addEventListener("scroll",this._boundOnScroll,!0),this._focusOverlayOnOpen?(t.focusDateElement(),this._focusOverlayOnOpen=!1):this._focus();const o=this._nativeInput;this._noInput&&o&&(o.blur(),this._overlayContent.focusDateElement());const a=this._noInput?t:[o,t];this.__showOthers=(0,Ct.Ry)(a)}_getInitialPosition(){const t=k(this.initialPosition),e=this._selectedDate||this._overlayContent.initialPosition||t||new Date;return t||v(e,this._minDate,this._maxDate)?e:b(e,[this._minDate,this._maxDate])}__commitParsedOrFocusedDate(){if(this._ignoreFocusedDateChange=!0,this.i18n.parseDate){const t=this._inputElementValue||"",e=this.__parseDate(t);e?this.__commitDate(e):(this.__keepInputValue=!0,this.__commitDate(null),this.__keepInputValue=!1)}else this._focusedDate&&this.__commitDate(this._focusedDate);this._ignoreFocusedDateChange=!1}_onOverlayClosed(){this.__showOthers&&(this.__showOthers(),this.__showOthers=null),window.removeEventListener("scroll",this._boundOnScroll,!0),this.__commitParsedOrFocusedDate(),this._nativeInput&&this._nativeInput.selectionStart&&(this._nativeInput.selectionStart=this._nativeInput.selectionEnd),this.value||this._keyboardActive||this.validate()}_onScroll(t){t.target!==window&&this._overlayContent.contains(t.target)||this._overlayContent._repositionYearScroller()}_focus(){this._noInput||this.inputElement.focus()}_focusAndSelect(){this._focus(),this._setSelectionRange(0,this._inputElementValue.length)}_applyInputValue(t){this._inputElementValue=t?this.__formatDate(t):""}_setSelectionRange(t,e){this._nativeInput&&this._nativeInput.setSelectionRange&&this._nativeInput.setSelectionRange(t,e)}_onChange(t){t.stopPropagation()}_onClick(t){this._isClearButton(t)||this._onHostClick(t)}_onHostClick(t){this.autoOpenDisabled&&!this._noInput||(t.preventDefault(),this.open())}_onClearButtonClick(t){t.preventDefault(),this.__commitDate(null)}_onKeyDown(t){switch(super._onKeyDown(t),this._noInput&&-1===[9].indexOf(t.keyCode)&&t.preventDefault(),t.key){case"ArrowDown":case"ArrowUp":t.preventDefault(),this.opened?this._overlayContent.focusDateElement():(this._focusOverlayOnOpen=!0,this.open());break;case"Tab":this.opened&&(t.preventDefault(),t.stopPropagation(),this._setSelectionRange(0,0),t.shiftKey?this._overlayContent.focusCancel():this._overlayContent.focusDateElement())}}_onEnter(t){this.opened?this.close():this.__commitParsedOrFocusedDate()}_onEscape(t){if(!this.opened)return this.clearButtonVisible&&this.value?(t.stopPropagation(),void this._onClearButtonClick(t)):void(""===this.inputElement.value?this.__commitDate(null):this._applyInputValue(this._selectedDate))}_isClearButton(t){return t.composedPath()[0]===this.clearElement}_onInput(){if(this.opened||!this._inputElementValue||this.autoOpenDisabled||this.open(),this._inputElementValue){const t=this.__parseDate(this._inputElementValue);t&&(this._ignoreFocusedDateChange=!0,g(t,this._focusedDate)||(this._focusedDate=t),this._ignoreFocusedDateChange=!1)}}__computeMinOrMaxDate(t){return k(t)}},It=m.iv`
|
940
|
-
:host([opened]) {
|
941
|
-
pointer-events: auto;
|
942
|
-
}
|
943
|
-
|
944
|
-
:host([dir='rtl']) [part='input-field'] {
|
945
|
-
direction: ltr;
|
946
|
-
}
|
947
|
-
|
948
|
-
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
|
949
|
-
direction: rtl;
|
950
|
-
text-align: left;
|
951
|
-
}
|
952
|
-
`;(0,a.hC)("vaadin-date-picker",[xt.J,It],{moduleId:"vaadin-date-picker-styles"});class Ot extends(At((0,Dt.L)((0,a.Tb)((0,vt.S)(h.H3))))){static get is(){return"vaadin-date-picker"}static get template(){return h.dy`
|
953
|
-
<div class="vaadin-date-picker-container">
|
954
|
-
<div part="label">
|
955
|
-
<slot name="label"></slot>
|
956
|
-
<span part="required-indicator" aria-hidden="true" on-click="focus"></span>
|
957
|
-
</div>
|
958
|
-
|
959
|
-
<vaadin-input-container
|
960
|
-
part="input-field"
|
961
|
-
readonly="[[readonly]]"
|
962
|
-
disabled="[[disabled]]"
|
963
|
-
invalid="[[invalid]]"
|
964
|
-
theme$="[[_theme]]"
|
965
|
-
>
|
966
|
-
<slot name="prefix" slot="prefix"></slot>
|
967
|
-
<slot name="input"></slot>
|
968
|
-
<div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
|
969
|
-
<div part="toggle-button" slot="suffix" aria-hidden="true" on-click="_toggle"></div>
|
970
|
-
</vaadin-input-container>
|
971
|
-
|
972
|
-
<div part="helper-text">
|
973
|
-
<slot name="helper"></slot>
|
974
|
-
</div>
|
975
|
-
|
976
|
-
<div part="error-message">
|
977
|
-
<slot name="error-message"></slot>
|
978
|
-
</div>
|
979
|
-
</div>
|
980
|
-
|
981
|
-
<vaadin-date-picker-overlay
|
982
|
-
id="overlay"
|
983
|
-
fullscreen$="[[_fullscreen]]"
|
984
|
-
theme$="[[_theme]]"
|
985
|
-
opened="{{opened}}"
|
986
|
-
on-vaadin-overlay-escape-press="_onOverlayEscapePress"
|
987
|
-
on-vaadin-overlay-open="_onOverlayOpened"
|
988
|
-
on-vaadin-overlay-closing="_onOverlayClosed"
|
989
|
-
restore-focus-on-close
|
990
|
-
restore-focus-node="[[inputElement]]"
|
991
|
-
></vaadin-date-picker-overlay>
|
992
|
-
|
993
|
-
<slot name="tooltip"></slot>
|
994
|
-
`}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new wt.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new kt.v(this.inputElement,this._labelController)),this._tooltipController=new bt.f(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this.shadowRoot.querySelector('[part="toggle-button"]').addEventListener("mousedown",(t=>t.preventDefault())),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this))}_onVaadinOverlayClose(t){t.detail.sourceEvent&&t.detail.sourceEvent.composedPath().includes(this)&&t.preventDefault()}_toggle(t){t.stopPropagation(),this.$.overlay.opened?this.close():this.open()}_openedChanged(t){super._openedChanged(t),this.$.overlay.positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this.$.overlay.noVerticalOverlap=!0}}(0,d.M)(Ot)},73208:(t,e,i)=>{i.d(e,{b:()=>a});var o=i(78591);class a extends o.n{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},29580:(t,e,i)=>{i.d(e,{B:()=>o});class o{constructor(t){this.host=t,t.addEventListener("opened-changed",(()=>{t.opened||this.__setVirtualKeyboardEnabled(!1)})),t.addEventListener("blur",(()=>this.__setVirtualKeyboardEnabled(!0))),t.addEventListener("touchstart",(()=>this.__setVirtualKeyboardEnabled(!0)))}__setVirtualKeyboardEnabled(t){this.host.inputElement&&(this.host.inputElement.inputMode=t?"":"none")}}},63373:(t,e,i)=>{i.d(e,{y:()=>r});var o=i(63726);const a={start:"top",end:"bottom"},s={start:"left",end:"right"},n=new ResizeObserver((t=>{setTimeout((()=>{t.forEach((t=>{t.target.__overlay&&t.target.__overlay._updatePosition()}))}))})),r=t=>class extends t{static get properties(){return{positionTarget:{type:Object,value:null,sync:!0},horizontalAlign:{type:String,value:"start",sync:!0},verticalAlign:{type:String,value:"top",sync:!0},noHorizontalOverlap:{type:Boolean,value:!1,sync:!0},noVerticalOverlap:{type:Boolean,value:!1,sync:!0},requiredVerticalSpace:{type:Number,value:0,sync:!0}}}static get observers(){return["__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)","__overlayOpenedChanged(opened, positionTarget)"]}constructor(){super(),this.__onScroll=this.__onScroll.bind(this),this._updatePosition=this._updatePosition.bind(this)}connectedCallback(){super.connectedCallback(),this.opened&&this.__addUpdatePositionEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.__removeUpdatePositionEventListeners()}__addUpdatePositionEventListeners(){window.addEventListener("resize",this._updatePosition),this.__positionTargetAncestorRootNodes=(0,o.AD)(this.positionTarget),this.__positionTargetAncestorRootNodes.forEach((t=>{t.addEventListener("scroll",this.__onScroll,!0)}))}__removeUpdatePositionEventListeners(){window.removeEventListener("resize",this._updatePosition),this.__positionTargetAncestorRootNodes&&(this.__positionTargetAncestorRootNodes.forEach((t=>{t.removeEventListener("scroll",this.__onScroll,!0)})),this.__positionTargetAncestorRootNodes=null)}__overlayOpenedChanged(t,e){if(this.__removeUpdatePositionEventListeners(),e&&(e.__overlay=null,n.unobserve(e),t&&(this.__addUpdatePositionEventListeners(),e.__overlay=this,n.observe(e))),t){const t=getComputedStyle(this);this.__margins||(this.__margins={},["top","bottom","left","right"].forEach((e=>{this.__margins[e]=parseInt(t[e],10)}))),this.setAttribute("dir",t.direction),this._updatePosition(),requestAnimationFrame((()=>this._updatePosition()))}}__positionSettingsChanged(){this._updatePosition()}__onScroll(t){this.contains(t.target)||this._updatePosition()}_updatePosition(){if(!this.positionTarget||!this.opened)return;const t=this.positionTarget.getBoundingClientRect(),e=this.__shouldAlignStartVertically(t);this.style.justifyContent=e?"flex-start":"flex-end";const i=this.__isRTL,o=this.__shouldAlignStartHorizontally(t,i),n=!i&&o||i&&!o;this.style.alignItems=n?"flex-start":"flex-end";const r=this.getBoundingClientRect(),l=this.__calculatePositionInOneDimension(t,r,this.noVerticalOverlap,a,this,e),h=this.__calculatePositionInOneDimension(t,r,this.noHorizontalOverlap,s,this,o);Object.assign(this.style,l,h),this.toggleAttribute("bottom-aligned",!e),this.toggleAttribute("top-aligned",e),this.toggleAttribute("end-aligned",!n),this.toggleAttribute("start-aligned",n)}__shouldAlignStartHorizontally(t,e){const i=Math.max(this.__oldContentWidth||0,this.$.overlay.offsetWidth);this.__oldContentWidth=this.$.overlay.offsetWidth;const o=Math.min(window.innerWidth,document.documentElement.clientWidth),a=!e&&"start"===this.horizontalAlign||e&&"end"===this.horizontalAlign;return this.__shouldAlignStart(t,i,o,this.__margins,a,this.noHorizontalOverlap,s)}__shouldAlignStartVertically(t){const e=this.requiredVerticalSpace||Math.max(this.__oldContentHeight||0,this.$.overlay.offsetHeight);this.__oldContentHeight=this.$.overlay.offsetHeight;const i=Math.min(window.innerHeight,document.documentElement.clientHeight),o="top"===this.verticalAlign;return this.__shouldAlignStart(t,e,i,this.__margins,o,this.noVerticalOverlap,a)}__shouldAlignStart(t,e,i,o,a,s,n){const r=i-t[s?n.end:n.start]-o[n.end],l=t[s?n.start:n.end]-o[n.start],h=a?r:l;return a===(h>(a?l:r)||h>e)}__adjustBottomProperty(t,e,i){let o;if(t===e.end){if(e.end===a.end){const t=Math.min(window.innerHeight,document.documentElement.clientHeight);i>t&&this.__oldViewportHeight&&(o=i-(this.__oldViewportHeight-t)),this.__oldViewportHeight=t}if(e.end===s.end){const t=Math.min(window.innerWidth,document.documentElement.clientWidth);i>t&&this.__oldViewportWidth&&(o=i-(this.__oldViewportWidth-t)),this.__oldViewportWidth=t}}return o}__calculatePositionInOneDimension(t,e,i,o,a,s){const n=s?o.start:o.end,r=s?o.end:o.start,l=parseFloat(a.style[n]||getComputedStyle(a)[n]),h=this.__adjustBottomProperty(n,o,l),d=e[s?o.start:o.end]-t[i===s?o.end:o.start];return{[n]:h?`${h}px`:`${l+d*(s?-1:1)}px`,[r]:""}}}},96754:(t,e,i)=>{i.d(e,{L:()=>r,e:()=>s}),i(29416),i(29849);var o=i(46570),a=i(90510);const s=o.iv`
|
995
|
-
:host([opening]),
|
996
|
-
:host([closing]) {
|
997
|
-
animation: 0.14s lumo-overlay-dummy-animation;
|
998
|
-
}
|
999
|
-
|
1000
|
-
[part='overlay'] {
|
1001
|
-
will-change: opacity, transform;
|
1002
|
-
}
|
1003
|
-
|
1004
|
-
:host([opening]) [part='overlay'] {
|
1005
|
-
animation: 0.1s lumo-menu-overlay-enter ease-out both;
|
1006
|
-
}
|
1007
|
-
|
1008
|
-
@keyframes lumo-menu-overlay-enter {
|
1009
|
-
0% {
|
1010
|
-
opacity: 0;
|
1011
|
-
transform: translateY(-4px);
|
1012
|
-
}
|
1013
|
-
}
|
1014
|
-
|
1015
|
-
:host([closing]) [part='overlay'] {
|
1016
|
-
animation: 0.1s lumo-menu-overlay-exit both;
|
1017
|
-
}
|
1018
|
-
|
1019
|
-
@keyframes lumo-menu-overlay-exit {
|
1020
|
-
100% {
|
1021
|
-
opacity: 0;
|
1022
|
-
}
|
1023
|
-
}
|
1024
|
-
`;(0,o.hC)("",s,{moduleId:"lumo-menu-overlay-core"});const n=o.iv`
|
1025
|
-
/* Small viewport (bottom sheet) styles */
|
1026
|
-
/* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
|
1027
|
-
@media (max-width: 420px), (max-height: 420px) {
|
1028
|
-
:host {
|
1029
|
-
top: 0 !important;
|
1030
|
-
right: 0 !important;
|
1031
|
-
bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
|
1032
|
-
left: 0 !important;
|
1033
|
-
align-items: stretch !important;
|
1034
|
-
justify-content: flex-end !important;
|
1035
|
-
}
|
1036
|
-
|
1037
|
-
[part='overlay'] {
|
1038
|
-
max-height: 50vh;
|
1039
|
-
width: 100vw;
|
1040
|
-
border-radius: 0;
|
1041
|
-
box-shadow: var(--lumo-box-shadow-xl);
|
1042
|
-
}
|
1043
|
-
|
1044
|
-
/* The content part scrolls instead of the overlay part, because of the gradient fade-out */
|
1045
|
-
[part='content'] {
|
1046
|
-
padding: 30px var(--lumo-space-m);
|
1047
|
-
max-height: inherit;
|
1048
|
-
box-sizing: border-box;
|
1049
|
-
-webkit-overflow-scrolling: touch;
|
1050
|
-
overflow: auto;
|
1051
|
-
-webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
|
1052
|
-
mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
|
1053
|
-
}
|
1054
|
-
|
1055
|
-
[part='backdrop'] {
|
1056
|
-
display: block;
|
1057
|
-
}
|
1058
|
-
|
1059
|
-
/* Animations */
|
1060
|
-
|
1061
|
-
:host([opening]) [part='overlay'] {
|
1062
|
-
animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
1063
|
-
}
|
1064
|
-
|
1065
|
-
:host([closing]),
|
1066
|
-
:host([closing]) [part='backdrop'] {
|
1067
|
-
animation-delay: 0.14s;
|
1068
|
-
}
|
1069
|
-
|
1070
|
-
:host([closing]) [part='overlay'] {
|
1071
|
-
animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
|
1072
|
-
}
|
1073
|
-
}
|
1074
|
-
|
1075
|
-
@keyframes lumo-mobile-menu-overlay-enter {
|
1076
|
-
0% {
|
1077
|
-
transform: translateY(150%);
|
1078
|
-
}
|
1079
|
-
}
|
1080
|
-
|
1081
|
-
@keyframes lumo-mobile-menu-overlay-exit {
|
1082
|
-
100% {
|
1083
|
-
transform: translateY(150%);
|
1084
|
-
}
|
1085
|
-
}
|
1086
|
-
`,r=[a.I,s,n];(0,o.hC)("",r,{moduleId:"lumo-menu-overlay"})}}]);
|