@descope/web-components-ui 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +2024 -1650
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2266 -1619
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1484.js +1 -1
- package/dist/umd/1738.js +1 -0
- package/dist/umd/1902.js +373 -0
- package/dist/umd/404.js +1 -1
- package/dist/umd/4127.js +1 -1
- package/dist/umd/4619.js +1 -1
- package/dist/umd/6050.js +237 -0
- package/dist/umd/{2159.js.LICENSE.txt → 6050.js.LICENSE.txt} +0 -6
- package/dist/umd/8823.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-alert-index-js.js +1 -1
- package/dist/umd/descope-autocomplete-field.js +1 -0
- package/dist/umd/descope-combo-box.js +7 -7
- package/dist/umd/descope-date-field-descope-calendar-index-js.js +1 -1
- package/dist/umd/descope-hybrid-field-index-js.js +3 -3
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +37 -1
- package/dist/umd/descope-passcode-index-js.js.LICENSE.txt +11 -0
- package/dist/umd/descope-security-questions-setup-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/mapping-fields-descope-saml-group-mappings-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-index-js.js +8 -8
- package/package.json +6 -5
- package/src/mixins/normalizeBooleanAttributesMixin.js +1 -0
- package/src/theme/components/index.js +2 -0
- package/dist/umd/1396.js +0 -37
- package/dist/umd/2159.js +0 -608
- /package/dist/umd/{1396.js.LICENSE.txt → 1902.js.LICENSE.txt} +0 -0
package/dist/umd/2159.js
DELETED
@@ -1,608 +0,0 @@
|
|
1
|
-
/*! For license information please see 2159.js.LICENSE.txt */
|
2
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[404,2159,4127],{84312:(t,e,o)=>{o.d(e,{$:()=>m});var a=o(98633),r=o(56096),i=o(65211),s=o(27150),n=o(83798),l=o(57224);const d=o(44720).AH`
|
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 u=o(63437),c=o(73595),h=o(45898);const p=t=>class extends((0,u.e)((0,h.l)((0,c.y)(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.SF)("vaadin-button",d,{moduleId:"vaadin-button-styles"});class m extends(p((0,s.q)((0,l.cp)((0,r.w)(a.Pu))))){static get is(){return"vaadin-button"}static get template(){return a.qy`
|
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 n.I(this),this.addController(this._tooltipController)}}(0,i.X)(m)},89685:(t,e,o)=>{o.d(e,{x:()=>r}),o(44497),o(4082),o(19155),o(40999),o(52301);var a=o(57224);const r=a.AH`
|
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,a.SF)("vaadin-button",r,{moduleId:"lumo-button"})},55093:(t,e,o)=>{o(89685),o(84312)},91011:(t,e,o)=>{o(73593),o(97612),o(67239),o(34123);var a=o(80704),r=o(57224);const i=r.AH`
|
339
|
-
:host {
|
340
|
-
outline: none;
|
341
|
-
}
|
342
|
-
|
343
|
-
[part='toggle-button']::before {
|
344
|
-
content: var(--lumo-icons-dropdown);
|
345
|
-
}
|
346
|
-
`;(0,r.SF)("vaadin-combo-box",[a.k,i],{moduleId:"lumo-combo-box"}),o(94009);var s=o(98633),n=o(65211),l=o(38785),d=o(14495);class u extends((0,d.y)((0,r.cp)((0,l.v)(s.Pu)))){static get template(){return s.qy`
|
347
|
-
<style>
|
348
|
-
:host {
|
349
|
-
display: block;
|
350
|
-
}
|
351
|
-
|
352
|
-
:host([hidden]) {
|
353
|
-
display: none;
|
354
|
-
}
|
355
|
-
</style>
|
356
|
-
<span part="checkmark" aria-hidden="true"></span>
|
357
|
-
<div part="content">
|
358
|
-
<slot></slot>
|
359
|
-
</div>
|
360
|
-
`}static get is(){return"vaadin-combo-box-item"}}(0,n.X)(u);var c=o(6019),h=o(31146),p=o(31278);const m=r.AH`
|
361
|
-
#overlay {
|
362
|
-
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
|
363
|
-
}
|
364
|
-
|
365
|
-
[part='content'] {
|
366
|
-
display: flex;
|
367
|
-
flex-direction: column;
|
368
|
-
height: 100%;
|
369
|
-
}
|
370
|
-
`;(0,r.SF)("vaadin-combo-box-overlay",[h.B,m],{moduleId:"vaadin-combo-box-overlay-styles"});class v extends((0,p.p)((0,c.c)((0,l.v)((0,r.cp)(s.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return s.qy`
|
371
|
-
<div id="backdrop" part="backdrop" hidden></div>
|
372
|
-
<div part="overlay" id="overlay">
|
373
|
-
<div part="loader"></div>
|
374
|
-
<div part="content" id="content"><slot></slot></div>
|
375
|
-
</div>
|
376
|
-
`}}(0,n.X)(v);var b=o(82642);class g extends((0,b.N)(s.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return s.qy`
|
377
|
-
<style>
|
378
|
-
:host {
|
379
|
-
display: block;
|
380
|
-
min-height: 1px;
|
381
|
-
overflow: auto;
|
382
|
-
|
383
|
-
/* Fixes item background from getting on top of scrollbars on Safari */
|
384
|
-
transform: translate3d(0, 0, 0);
|
385
|
-
|
386
|
-
/* Enable momentum scrolling on iOS */
|
387
|
-
-webkit-overflow-scrolling: touch;
|
388
|
-
|
389
|
-
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
390
|
-
box-shadow: 0 0 0 white;
|
391
|
-
}
|
392
|
-
|
393
|
-
#selector {
|
394
|
-
border-width: var(--_vaadin-combo-box-items-container-border-width);
|
395
|
-
border-style: var(--_vaadin-combo-box-items-container-border-style);
|
396
|
-
border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
|
397
|
-
position: relative;
|
398
|
-
}
|
399
|
-
</style>
|
400
|
-
<div id="selector">
|
401
|
-
<slot></slot>
|
402
|
-
</div>
|
403
|
-
`}}(0,n.X)(g);var f=o(27150),y=o(83798),x=o(60354),_=o(21860),w=o(19074),k=o(45446);const z=t=>class extends((0,k.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var C=o(9685),S=o(79372),I=o(34060);(0,r.SF)("vaadin-combo-box",C.k,{moduleId:"vaadin-combo-box-styles"});class F extends((0,S.K)((0,I.x)(z((0,x.R)((0,r.cp)((0,f.q)(s.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return s.qy`
|
404
|
-
<style>
|
405
|
-
:host([opened]) {
|
406
|
-
pointer-events: auto;
|
407
|
-
}
|
408
|
-
</style>
|
409
|
-
|
410
|
-
<div class="vaadin-combo-box-container">
|
411
|
-
<div part="label">
|
412
|
-
<slot name="label"></slot>
|
413
|
-
<span part="required-indicator" aria-hidden="true" on-click="focus"></span>
|
414
|
-
</div>
|
415
|
-
|
416
|
-
<vaadin-input-container
|
417
|
-
part="input-field"
|
418
|
-
readonly="[[readonly]]"
|
419
|
-
disabled="[[disabled]]"
|
420
|
-
invalid="[[invalid]]"
|
421
|
-
theme$="[[_theme]]"
|
422
|
-
>
|
423
|
-
<slot name="prefix" slot="prefix"></slot>
|
424
|
-
<slot name="input"></slot>
|
425
|
-
<div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
|
426
|
-
<div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
427
|
-
</vaadin-input-container>
|
428
|
-
|
429
|
-
<div part="helper-text">
|
430
|
-
<slot name="helper"></slot>
|
431
|
-
</div>
|
432
|
-
|
433
|
-
<div part="error-message">
|
434
|
-
<slot name="error-message"></slot>
|
435
|
-
</div>
|
436
|
-
</div>
|
437
|
-
|
438
|
-
<vaadin-combo-box-overlay
|
439
|
-
id="overlay"
|
440
|
-
opened="[[_overlayOpened]]"
|
441
|
-
loading$="[[loading]]"
|
442
|
-
theme$="[[_theme]]"
|
443
|
-
position-target="[[_positionTarget]]"
|
444
|
-
no-vertical-overlap
|
445
|
-
restore-focus-node="[[inputElement]]"
|
446
|
-
></vaadin-combo-box-overlay>
|
447
|
-
|
448
|
-
<slot name="tooltip"></slot>
|
449
|
-
`}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new _.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new y.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,n.X)(F)},40200:(t,e,o)=>{o(44497),o(4082),o(19155),o(52301);var a=o(71005),r=o(4749),i=o(57224);const s=i.AH`
|
450
|
-
:host {
|
451
|
-
--lumo-text-field-size: var(--lumo-size-m);
|
452
|
-
color: var(--lumo-body-text-color);
|
453
|
-
font-size: var(--lumo-font-size-m);
|
454
|
-
/* align with text-field height + vertical paddings */
|
455
|
-
line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
|
456
|
-
font-family: var(--lumo-font-family);
|
457
|
-
-webkit-font-smoothing: antialiased;
|
458
|
-
-moz-osx-font-smoothing: grayscale;
|
459
|
-
-webkit-tap-highlight-color: transparent;
|
460
|
-
padding: 0;
|
461
|
-
}
|
462
|
-
|
463
|
-
:host::before {
|
464
|
-
margin-top: var(--lumo-space-xs);
|
465
|
-
height: var(--lumo-text-field-size);
|
466
|
-
box-sizing: border-box;
|
467
|
-
display: inline-flex;
|
468
|
-
align-items: center;
|
469
|
-
}
|
470
|
-
|
471
|
-
/* align with text-field label */
|
472
|
-
:host([has-label]) [part='label'] {
|
473
|
-
padding-bottom: calc(0.5em - var(--lumo-space-xs));
|
474
|
-
}
|
475
|
-
|
476
|
-
:host(:not([has-label])) [part='label'],
|
477
|
-
:host(:not([has-label]))::before {
|
478
|
-
display: none;
|
479
|
-
}
|
480
|
-
|
481
|
-
/* align with text-field error message */
|
482
|
-
:host([has-error-message]) [part='error-message']::before {
|
483
|
-
height: calc(0.4em - var(--lumo-space-xs));
|
484
|
-
}
|
485
|
-
|
486
|
-
:host([focused]:not([readonly]):not([disabled])) [part='label'] {
|
487
|
-
color: var(--lumo-primary-text-color);
|
488
|
-
}
|
489
|
-
|
490
|
-
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
|
491
|
-
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
|
492
|
-
color: var(--lumo-body-text-color);
|
493
|
-
}
|
494
|
-
|
495
|
-
/* Touch device adjustment */
|
496
|
-
@media (pointer: coarse) {
|
497
|
-
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
|
498
|
-
color: var(--lumo-secondary-text-color);
|
499
|
-
}
|
500
|
-
}
|
501
|
-
|
502
|
-
/* Disabled */
|
503
|
-
:host([disabled]) [part='label'] {
|
504
|
-
color: var(--lumo-disabled-text-color);
|
505
|
-
-webkit-text-fill-color: var(--lumo-disabled-text-color);
|
506
|
-
}
|
507
|
-
|
508
|
-
/* Small theme */
|
509
|
-
:host([theme~='small']) {
|
510
|
-
font-size: var(--lumo-font-size-s);
|
511
|
-
--lumo-text-field-size: var(--lumo-size-s);
|
512
|
-
}
|
513
|
-
|
514
|
-
:host([theme~='small'][has-label]) [part='label'] {
|
515
|
-
font-size: var(--lumo-font-size-xs);
|
516
|
-
}
|
517
|
-
|
518
|
-
:host([theme~='small'][has-label]) [part='error-message'] {
|
519
|
-
font-size: var(--lumo-font-size-xxs);
|
520
|
-
}
|
521
|
-
|
522
|
-
/* When custom-field is used with components without outer margin */
|
523
|
-
:host([theme~='whitespace'][has-label]) [part='label'] {
|
524
|
-
padding-bottom: 0.5em;
|
525
|
-
}
|
526
|
-
`;(0,i.SF)("vaadin-custom-field",[r.Q,a.d,s],{moduleId:"lumo-custom-field"});var n=o(98633),l=o(65211),d=o(27150),u=o(73595),c=o(79258),h=o(7094),p=o(83798),m=o(12850);const v=t=>t.split("\t"),b=t=>t.join("\t"),g=t=>class extends((0,m.Y)((0,u.y)((0,c.f)(t)))){static get properties(){return{name:String,value:{type:String,observer:"__valueChanged",notify:!0},inputs:{type:Array,readOnly:!0},formatValue:{type:Function},parseValue:{type:Function}}}ready(){super.ready(),this.setAttribute("role","group"),this.ariaTarget=this,this.__childrenObserver=new MutationObserver((()=>{this.__setInputsFromSlot()})),this.__setInputsFromSlot(),this.$.slot.addEventListener("slotchange",(()=>{this.__setInputsFromSlot(),(0,h.J$)(this.$.slot).filter((t=>!this.__isInput(t))).forEach((t=>{this.__childrenObserver.observe(t,{childList:!0})}))})),this._tooltipController=new p.I(this),this.addController(this._tooltipController),this._tooltipController.setShouldShow((t=>!(t.inputs||[]).some((t=>t.opened))))}focus(){this.inputs&&this.inputs[0]&&this.inputs[0].focus()}_setFocused(t){super._setFocused(t),t||this.validate()}_shouldRemoveFocus(t){const{relatedTarget:e}=t;return!this.inputs.some((t=>e===(t.focusElement||t)))}checkValidity(){return!(this.inputs.filter((t=>!(t.validate||t.checkValidity).call(t))).length||this.required&&!this.value.trim())}_onKeyDown(t){"Tab"===t.key&&(this.inputs.indexOf(t.target)<this.inputs.length-1&&!t.shiftKey||this.inputs.indexOf(t.target)>0&&t.shiftKey?this.dispatchEvent(new CustomEvent("internal-tab")):this.__setValue())}_onInputChange(t){t.stopPropagation(),this.__setValue(),this.validate(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{value:this.value}}))}__setValue(){this.__settingValue=!0;const t=this.formatValue||b;this.value=t.apply(this,[this.inputs.map((t=>t.value))]),this.__settingValue=!1}__isInput(t){return!("input"===t.getAttribute("slot")||"textarea"===t.getAttribute("slot"))&&(t.validate||t.checkValidity)}__getInputsFromSlot(){return(0,h.J$)(this.$.slot).filter((t=>this.__isInput(t)))}__setInputsFromSlot(){this._setInputs(this.__getInputsFromSlot()),this.__setValue()}__toggleHasValue(t){this.toggleAttribute("has-value",null!==t&&""!==t.trim())}__valueChanged(t,e){if(this.__settingValue||!this.inputs)return;this.__toggleHasValue(t);const o=(this.parseValue||v).apply(this,[t]);o&&0!==o.length?(this.inputs.forEach(((t,e)=>{t.value=o[e]})),void 0!==e&&this.validate()):console.warn("Value parser has not provided values array")}},f=o(44720).AH`
|
527
|
-
:host {
|
528
|
-
display: inline-flex;
|
529
|
-
}
|
530
|
-
|
531
|
-
:host::before {
|
532
|
-
content: '\\2003';
|
533
|
-
width: 0;
|
534
|
-
display: inline-block;
|
535
|
-
/* Size and position this element on the same vertical position as the input-field element
|
536
|
-
to make vertical align for the host element work as expected */
|
537
|
-
}
|
538
|
-
|
539
|
-
:host([hidden]) {
|
540
|
-
display: none !important;
|
541
|
-
}
|
542
|
-
|
543
|
-
.vaadin-custom-field-container {
|
544
|
-
width: 100%;
|
545
|
-
display: flex;
|
546
|
-
flex-direction: column;
|
547
|
-
}
|
548
|
-
|
549
|
-
.inputs-wrapper {
|
550
|
-
flex: none;
|
551
|
-
}
|
552
|
-
`;(0,i.SF)("vaadin-custom-field",f,{moduleId:"vaadin-custom-field-styles"});class y extends(g((0,i.cp)((0,d.q)(n.Pu)))){static get is(){return"vaadin-custom-field"}static get template(){return n.qy`
|
553
|
-
<div class="vaadin-custom-field-container">
|
554
|
-
<div part="label" on-click="focus">
|
555
|
-
<slot name="label"></slot>
|
556
|
-
<span part="required-indicator" aria-hidden="true"></span>
|
557
|
-
</div>
|
558
|
-
|
559
|
-
<div class="inputs-wrapper" part="input-fields" on-change="_onInputChange">
|
560
|
-
<slot id="slot"></slot>
|
561
|
-
</div>
|
562
|
-
|
563
|
-
<div part="helper-text">
|
564
|
-
<slot name="helper"></slot>
|
565
|
-
</div>
|
566
|
-
|
567
|
-
<div part="error-message">
|
568
|
-
<slot name="error-message"></slot>
|
569
|
-
</div>
|
570
|
-
</div>
|
571
|
-
|
572
|
-
<slot name="tooltip"></slot>
|
573
|
-
`}}(0,l.X)(y)},60978:(t,e,o)=>{o.d(e,{a:()=>r});var a=o(60354);const r=t=>class extends((0,a.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},10056:(t,e,o)=>{o.d(e,{A:()=>p}),o(94009);var a=o(98633),r=o(65211),i=o(27150),s=o(83798),n=o(9685),l=o(57224),d=o(21860),u=o(60978),c=o(19074);const h=t=>class extends((0,u.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,l.SF)("vaadin-text-field",n.k,{moduleId:"vaadin-text-field-styles"});class p extends(h((0,l.cp)((0,i.q)(a.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return a.qy`
|
574
|
-
<style>
|
575
|
-
[part='input-field'] {
|
576
|
-
flex-grow: 0;
|
577
|
-
}
|
578
|
-
</style>
|
579
|
-
|
580
|
-
<div class="vaadin-field-container">
|
581
|
-
<div part="label">
|
582
|
-
<slot name="label"></slot>
|
583
|
-
<span part="required-indicator" aria-hidden="true" on-click="focus"></span>
|
584
|
-
</div>
|
585
|
-
|
586
|
-
<vaadin-input-container
|
587
|
-
part="input-field"
|
588
|
-
readonly="[[readonly]]"
|
589
|
-
disabled="[[disabled]]"
|
590
|
-
invalid="[[invalid]]"
|
591
|
-
theme$="[[_theme]]"
|
592
|
-
>
|
593
|
-
<slot name="prefix" slot="prefix"></slot>
|
594
|
-
<slot name="input"></slot>
|
595
|
-
<slot name="suffix" slot="suffix"></slot>
|
596
|
-
<div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
|
597
|
-
</vaadin-input-container>
|
598
|
-
|
599
|
-
<div part="helper-text">
|
600
|
-
<slot name="helper"></slot>
|
601
|
-
</div>
|
602
|
-
|
603
|
-
<div part="error-message">
|
604
|
-
<slot name="error-message"></slot>
|
605
|
-
</div>
|
606
|
-
</div>
|
607
|
-
<slot name="tooltip"></slot>
|
608
|
-
`}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new s.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,r.X)(p)},44085:(t,e,o)=>{o(67239);var a=o(80704);(0,o(57224).SF)("vaadin-text-field",a.k,{moduleId:"lumo-text-field-styles"}),o(10056)},63970:(t,e,o)=>{o(44085),o(10056)}}]);
|
File without changes
|