@descope/web-components-ui 1.0.222 → 1.0.224
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1145 -739
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1264 -752
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1037.js +2 -0
- package/dist/umd/1037.js.LICENSE.txt +5 -0
- package/dist/umd/1419.js +360 -0
- package/dist/umd/1419.js.LICENSE.txt +23 -0
- package/dist/umd/1932.js +310 -0
- package/dist/umd/1932.js.LICENSE.txt +5 -0
- package/dist/umd/1990.js +3 -3
- package/dist/umd/2066.js +2 -0
- package/dist/umd/2066.js.LICENSE.txt +5 -0
- package/dist/umd/262.js +2 -0
- package/dist/umd/262.js.LICENSE.txt +5 -0
- package/dist/umd/2873.js +738 -0
- package/dist/umd/2873.js.LICENSE.txt +21 -0
- package/dist/umd/3003.js +2 -0
- package/dist/umd/3003.js.LICENSE.txt +9 -0
- package/dist/umd/{9515.js → 3092.js} +88 -88
- package/dist/umd/3660.js +17 -0
- package/dist/umd/{1883.js.LICENSE.txt → 3660.js.LICENSE.txt} +1 -11
- package/dist/umd/422.js +1 -1
- package/dist/umd/4222.js +2 -0
- package/dist/umd/{1852.js.LICENSE.txt → 4222.js.LICENSE.txt} +0 -30
- package/dist/umd/4447.js +2 -1
- package/dist/umd/4447.js.LICENSE.txt +5 -0
- package/dist/umd/4567.js +1 -0
- package/dist/umd/4746.js +123 -0
- package/dist/umd/4905.js +2 -0
- package/dist/umd/4905.js.LICENSE.txt +5 -0
- package/dist/umd/5345.js +94 -0
- package/dist/umd/5806.js +1 -1
- package/dist/umd/5977.js +289 -0
- package/dist/umd/5977.js.LICENSE.txt +17 -0
- package/dist/umd/6551.js +1 -0
- package/dist/umd/{7101.js → 6770.js} +5 -5
- package/dist/umd/6770.js.LICENSE.txt +11 -0
- package/dist/umd/7056.js +1 -1
- package/dist/umd/{6116.js → 7514.js} +9 -9
- package/dist/umd/8725.js +2 -2
- package/dist/umd/9189.js +2 -0
- package/dist/umd/9189.js.LICENSE.txt +5 -0
- package/dist/umd/9211.js +2 -2
- package/dist/umd/9437.js +1 -1
- package/dist/umd/9629.js +2 -0
- package/dist/umd/9629.js.LICENSE.txt +5 -0
- package/dist/umd/9671.js +1 -0
- package/dist/umd/9680.js +2 -0
- package/dist/umd/9680.js.LICENSE.txt +5 -0
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -0
- package/dist/umd/descope-grid-index-js.js +1 -0
- package/dist/umd/descope-modal-index-js.js +1 -0
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +4 -2
- package/src/components/descope-grid/GridClass.js +226 -0
- package/src/components/descope-grid/descope-grid-selection-column/index.js +68 -0
- package/src/components/descope-grid/descope-grid-status-column/index.js +34 -0
- package/src/components/descope-grid/descope-grid-text-column/index.js +11 -0
- package/src/components/descope-grid/helpers.js +9 -0
- package/src/components/descope-grid/index.js +10 -0
- package/src/components/descope-modal/ModalClass.js +109 -0
- package/src/components/descope-modal/index.js +6 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/mixins/createStyleMixin/helpers.js +2 -2
- package/src/mixins/createStyleMixin/index.js +2 -2
- package/src/mixins/portalMixin.js +24 -4
- package/src/theme/components/grid.js +38 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/modal.js +16 -0
- package/dist/umd/1852.js +0 -375
- package/dist/umd/1883.js +0 -289
- package/dist/umd/4767.js +0 -215
- /package/dist/umd/{7101.js.LICENSE.txt → 3092.js.LICENSE.txt} +0 -0
- /package/dist/umd/{4767.js.LICENSE.txt → 4746.js.LICENSE.txt} +0 -0
- /package/dist/umd/{9515.js.LICENSE.txt → 5345.js.LICENSE.txt} +0 -0
- /package/dist/umd/{6116.js.LICENSE.txt → 7514.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -496,7 +496,7 @@ const globals = {
|
|
496
496
|
shadow,
|
497
497
|
fonts,
|
498
498
|
};
|
499
|
-
const vars$
|
499
|
+
const vars$t = getThemeVars(globals);
|
500
500
|
|
501
501
|
const createCssVarFallback = (first, ...rest) =>
|
502
502
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
@@ -552,11 +552,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
|
|
552
552
|
|
553
553
|
const cssVarName = getCssVarName(componentName, attr);
|
554
554
|
|
555
|
-
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
|
555
|
+
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
|
556
556
|
style.add(
|
557
557
|
createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
|
558
558
|
isFunction(property) ? property() : property,
|
559
|
-
createCssVarFallback(cssVarName)
|
559
|
+
createCssVarFallback(cssVarName) + (important ? '!important' : '')
|
560
560
|
);
|
561
561
|
});
|
562
562
|
});
|
@@ -713,10 +713,10 @@ const createStyleMixin =
|
|
713
713
|
(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
|
714
714
|
}
|
715
715
|
|
716
|
-
init() {
|
716
|
+
async init() {
|
717
717
|
super.init?.();
|
718
718
|
if (this.shadowRoot.isConnected) {
|
719
|
-
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
719
|
+
this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
|
720
720
|
|
721
721
|
this.#addClassName(componentName);
|
722
722
|
|
@@ -2176,7 +2176,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
|
|
2176
2176
|
|
2177
2177
|
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
2178
2178
|
|
2179
|
-
const
|
2179
|
+
const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
2180
|
+
new Promise((res) => {
|
2181
|
+
const MAX_RETRIES = 20;
|
2182
|
+
const ele = getRootElementFn(that);
|
2183
|
+
let counter = 0;
|
2184
|
+
|
2185
|
+
const check = () => {
|
2186
|
+
if (counter > MAX_RETRIES) {
|
2187
|
+
// eslint-disable-next-line no-console
|
2188
|
+
console.error('could not get shadow root for element', ele);
|
2189
|
+
res(ele);
|
2190
|
+
return;
|
2191
|
+
}
|
2192
|
+
|
2193
|
+
counter++;
|
2194
|
+
|
2195
|
+
if (!ele.shadowRoot) setTimeout(check);
|
2196
|
+
else res(ele.shadowRoot);
|
2197
|
+
};
|
2198
|
+
check();
|
2199
|
+
});
|
2180
2200
|
|
2181
2201
|
const portalMixin =
|
2182
2202
|
({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
|
@@ -2206,17 +2226,17 @@ const portalMixin =
|
|
2206
2226
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
2207
2227
|
const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
|
2208
2228
|
|
2209
|
-
return portal
|
2229
|
+
return portal;
|
2210
2230
|
};
|
2211
2231
|
|
2212
2232
|
super({
|
2213
|
-
getRootElement,
|
2233
|
+
getRootElement: withWaitForShadowRoot(getRootElement),
|
2214
2234
|
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
2215
2235
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
2216
2236
|
baseSelector: ':host',
|
2217
2237
|
});
|
2218
2238
|
|
2219
|
-
this.#portalEle =
|
2239
|
+
this.#portalEle = getRootElement(this);
|
2220
2240
|
}
|
2221
2241
|
|
2222
2242
|
#handleHoverAttribute() {
|
@@ -2342,7 +2362,7 @@ const clickableMixin = (superclass) =>
|
|
2342
2362
|
}
|
2343
2363
|
};
|
2344
2364
|
|
2345
|
-
const componentName$
|
2365
|
+
const componentName$y = getComponentName('button');
|
2346
2366
|
|
2347
2367
|
const resetStyles = `
|
2348
2368
|
:host {
|
@@ -2380,7 +2400,7 @@ const iconStyles = `
|
|
2380
2400
|
|
2381
2401
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
2382
2402
|
|
2383
|
-
const { host: host$
|
2403
|
+
const { host: host$g, label: label$9 } = {
|
2384
2404
|
host: { selector: () => ':host' },
|
2385
2405
|
label: { selector: '::part(label)' },
|
2386
2406
|
};
|
@@ -2390,7 +2410,7 @@ let loadingIndicatorStyles;
|
|
2390
2410
|
const ButtonClass = compose(
|
2391
2411
|
createStyleMixin({
|
2392
2412
|
mappings: {
|
2393
|
-
hostWidth: { ...host$
|
2413
|
+
hostWidth: { ...host$g, property: 'width' },
|
2394
2414
|
hostHeight: { property: 'height' },
|
2395
2415
|
fontSize: {},
|
2396
2416
|
fontFamily: {},
|
@@ -2439,7 +2459,7 @@ const ButtonClass = compose(
|
|
2439
2459
|
}
|
2440
2460
|
`,
|
2441
2461
|
excludeAttrsSync: ['tabindex'],
|
2442
|
-
componentName: componentName$
|
2462
|
+
componentName: componentName$y,
|
2443
2463
|
})
|
2444
2464
|
);
|
2445
2465
|
|
@@ -2476,126 +2496,126 @@ loadingIndicatorStyles = `
|
|
2476
2496
|
}
|
2477
2497
|
`;
|
2478
2498
|
|
2479
|
-
const globalRefs$
|
2480
|
-
const compVars$
|
2499
|
+
const globalRefs$e = getThemeRefs(globals);
|
2500
|
+
const compVars$4 = ButtonClass.cssVarList;
|
2481
2501
|
|
2482
2502
|
const mode = {
|
2483
|
-
primary: globalRefs$
|
2484
|
-
secondary: globalRefs$
|
2485
|
-
success: globalRefs$
|
2486
|
-
error: globalRefs$
|
2487
|
-
surface: globalRefs$
|
2503
|
+
primary: globalRefs$e.colors.primary,
|
2504
|
+
secondary: globalRefs$e.colors.secondary,
|
2505
|
+
success: globalRefs$e.colors.success,
|
2506
|
+
error: globalRefs$e.colors.error,
|
2507
|
+
surface: globalRefs$e.colors.surface,
|
2488
2508
|
};
|
2489
2509
|
|
2490
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2510
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$y);
|
2491
2511
|
|
2492
2512
|
const button = {
|
2493
2513
|
...helperTheme$3,
|
2494
2514
|
|
2495
|
-
[compVars$
|
2515
|
+
[compVars$4.fontFamily]: globalRefs$e.fonts.font1.family,
|
2496
2516
|
|
2497
|
-
[compVars$
|
2498
|
-
[compVars$
|
2499
|
-
[compVars$
|
2517
|
+
[compVars$4.cursor]: 'pointer',
|
2518
|
+
[compVars$4.hostHeight]: '3em',
|
2519
|
+
[compVars$4.hostWidth]: 'auto',
|
2500
2520
|
|
2501
|
-
[compVars$
|
2502
|
-
[compVars$
|
2503
|
-
[compVars$
|
2504
|
-
[compVars$
|
2521
|
+
[compVars$4.borderRadius]: globalRefs$e.radius.sm,
|
2522
|
+
[compVars$4.borderWidth]: globalRefs$e.border.xs,
|
2523
|
+
[compVars$4.borderStyle]: 'solid',
|
2524
|
+
[compVars$4.borderColor]: 'transparent',
|
2505
2525
|
|
2506
|
-
[compVars$
|
2526
|
+
[compVars$4.labelSpacing]: '0.25em',
|
2507
2527
|
|
2508
|
-
[compVars$
|
2528
|
+
[compVars$4.verticalPadding]: '1em',
|
2509
2529
|
|
2510
|
-
[compVars$
|
2511
|
-
[compVars$
|
2512
|
-
[compVars$
|
2513
|
-
[compVars$
|
2530
|
+
[compVars$4.outlineWidth]: globals.border.sm,
|
2531
|
+
[compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
|
2532
|
+
[compVars$4.outlineStyle]: 'solid',
|
2533
|
+
[compVars$4.outlineColor]: 'transparent',
|
2514
2534
|
|
2515
2535
|
size: {
|
2516
|
-
xs: { [compVars$
|
2517
|
-
sm: { [compVars$
|
2518
|
-
md: { [compVars$
|
2519
|
-
lg: { [compVars$
|
2536
|
+
xs: { [compVars$4.fontSize]: '12px' },
|
2537
|
+
sm: { [compVars$4.fontSize]: '14px' },
|
2538
|
+
md: { [compVars$4.fontSize]: '16px' },
|
2539
|
+
lg: { [compVars$4.fontSize]: '18px' },
|
2520
2540
|
},
|
2521
2541
|
|
2522
2542
|
_square: {
|
2523
|
-
[compVars$
|
2524
|
-
[compVars$
|
2525
|
-
[compVars$
|
2543
|
+
[compVars$4.hostHeight]: '3em',
|
2544
|
+
[compVars$4.hostWidth]: '3em',
|
2545
|
+
[compVars$4.verticalPadding]: '0',
|
2526
2546
|
},
|
2527
2547
|
|
2528
2548
|
_fullWidth: {
|
2529
|
-
[compVars$
|
2549
|
+
[compVars$4.hostWidth]: '100%',
|
2530
2550
|
},
|
2531
2551
|
|
2532
2552
|
_loading: {
|
2533
|
-
[compVars$
|
2534
|
-
[compVars$
|
2553
|
+
[compVars$4.cursor]: 'wait',
|
2554
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2535
2555
|
},
|
2536
2556
|
|
2537
2557
|
_disabled: {
|
2538
|
-
[helperVars$3.main]: globalRefs$
|
2539
|
-
[helperVars$3.dark]: globalRefs$
|
2540
|
-
[helperVars$3.light]: globalRefs$
|
2541
|
-
[helperVars$3.contrast]: globalRefs$
|
2558
|
+
[helperVars$3.main]: globalRefs$e.colors.surface.main,
|
2559
|
+
[helperVars$3.dark]: globalRefs$e.colors.surface.dark,
|
2560
|
+
[helperVars$3.light]: globalRefs$e.colors.surface.light,
|
2561
|
+
[helperVars$3.contrast]: globalRefs$e.colors.surface.contrast,
|
2542
2562
|
},
|
2543
2563
|
|
2544
2564
|
variant: {
|
2545
2565
|
contained: {
|
2546
|
-
[compVars$
|
2547
|
-
[compVars$
|
2566
|
+
[compVars$4.labelTextColor]: helperRefs$3.contrast,
|
2567
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
2548
2568
|
_hover: {
|
2549
|
-
[compVars$
|
2569
|
+
[compVars$4.backgroundColor]: helperRefs$3.dark,
|
2550
2570
|
_loading: {
|
2551
|
-
[compVars$
|
2571
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
2552
2572
|
},
|
2553
2573
|
},
|
2554
2574
|
_active: {
|
2555
|
-
[compVars$
|
2575
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
2556
2576
|
},
|
2557
2577
|
},
|
2558
2578
|
|
2559
2579
|
outline: {
|
2560
|
-
[compVars$
|
2561
|
-
[compVars$
|
2580
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2581
|
+
[compVars$4.borderColor]: 'currentColor',
|
2562
2582
|
_hover: {
|
2563
|
-
[compVars$
|
2583
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
2564
2584
|
},
|
2565
2585
|
_active: {
|
2566
|
-
[compVars$
|
2586
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2567
2587
|
},
|
2568
2588
|
},
|
2569
2589
|
|
2570
2590
|
link: {
|
2571
|
-
[compVars$
|
2591
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2572
2592
|
_hover: {
|
2573
|
-
[compVars$
|
2574
|
-
[compVars$
|
2593
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
2594
|
+
[compVars$4.labelTextDecoration]: 'underline',
|
2575
2595
|
},
|
2576
2596
|
_active: {
|
2577
|
-
[compVars$
|
2597
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
2578
2598
|
},
|
2579
2599
|
},
|
2580
2600
|
},
|
2581
2601
|
|
2582
2602
|
_focused: {
|
2583
|
-
[compVars$
|
2603
|
+
[compVars$4.outlineColor]: globalRefs$e.colors.surface.main,
|
2584
2604
|
},
|
2585
2605
|
};
|
2586
2606
|
|
2587
|
-
const vars$
|
2588
|
-
...compVars$
|
2607
|
+
const vars$s = {
|
2608
|
+
...compVars$4,
|
2589
2609
|
...helperVars$3,
|
2590
2610
|
};
|
2591
2611
|
|
2592
2612
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2593
2613
|
__proto__: null,
|
2594
2614
|
default: button,
|
2595
|
-
vars: vars$
|
2615
|
+
vars: vars$s
|
2596
2616
|
});
|
2597
2617
|
|
2598
|
-
const { host: host$
|
2618
|
+
const { host: host$f, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
|
2599
2619
|
{
|
2600
2620
|
host: { selector: () => ':host' },
|
2601
2621
|
label: { selector: '::part(label)' },
|
@@ -2609,11 +2629,11 @@ const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndica
|
|
2609
2629
|
|
2610
2630
|
var textFieldMappings = {
|
2611
2631
|
// we apply font-size also on the host so we can set its width with em
|
2612
|
-
fontSize: [{}, host$
|
2632
|
+
fontSize: [{}, host$f],
|
2613
2633
|
fontFamily: [label$8, inputField$5, helperText$8, errorMessage$a],
|
2614
2634
|
|
2615
|
-
hostWidth: { ...host$
|
2616
|
-
hostMinWidth: { ...host$
|
2635
|
+
hostWidth: { ...host$f, property: 'width' },
|
2636
|
+
hostMinWidth: { ...host$f, property: 'min-width' },
|
2617
2637
|
|
2618
2638
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
2619
2639
|
|
@@ -2750,11 +2770,11 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
2750
2770
|
${resetInputFieldUnderlayingBorder(name)}
|
2751
2771
|
`;
|
2752
2772
|
|
2753
|
-
const componentName$
|
2773
|
+
const componentName$x = getComponentName('text-field');
|
2754
2774
|
|
2755
2775
|
const observedAttrs = ['type'];
|
2756
2776
|
|
2757
|
-
const customMixin$
|
2777
|
+
const customMixin$7 = (superclass) =>
|
2758
2778
|
class TextFieldClass extends superclass {
|
2759
2779
|
static get observedAttributes() {
|
2760
2780
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2781,7 +2801,7 @@ const TextFieldClass = compose(
|
|
2781
2801
|
draggableMixin,
|
2782
2802
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2783
2803
|
componentNameValidationMixin,
|
2784
|
-
customMixin$
|
2804
|
+
customMixin$7
|
2785
2805
|
)(
|
2786
2806
|
createProxy({
|
2787
2807
|
slots: ['prefix', 'suffix'],
|
@@ -2799,26 +2819,26 @@ const TextFieldClass = compose(
|
|
2799
2819
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2800
2820
|
`,
|
2801
2821
|
excludeAttrsSync: ['tabindex'],
|
2802
|
-
componentName: componentName$
|
2822
|
+
componentName: componentName$x,
|
2803
2823
|
})
|
2804
2824
|
);
|
2805
2825
|
|
2806
|
-
const componentName$
|
2807
|
-
const globalRefs$
|
2826
|
+
const componentName$w = getComponentName('input-wrapper');
|
2827
|
+
const globalRefs$d = getThemeRefs(globals);
|
2808
2828
|
|
2809
|
-
const [theme$1, refs, vars$
|
2829
|
+
const [theme$1, refs, vars$r] = createHelperVars(
|
2810
2830
|
{
|
2811
|
-
labelTextColor: globalRefs$
|
2812
|
-
valueTextColor: globalRefs$
|
2813
|
-
placeholderTextColor: globalRefs$
|
2831
|
+
labelTextColor: globalRefs$d.colors.surface.contrast,
|
2832
|
+
valueTextColor: globalRefs$d.colors.surface.contrast,
|
2833
|
+
placeholderTextColor: globalRefs$d.colors.surface.main,
|
2814
2834
|
requiredIndicator: "'*'",
|
2815
|
-
errorMessageTextColor: globalRefs$
|
2835
|
+
errorMessageTextColor: globalRefs$d.colors.error.main,
|
2816
2836
|
|
2817
|
-
borderWidth: globalRefs$
|
2818
|
-
borderRadius: globalRefs$
|
2837
|
+
borderWidth: globalRefs$d.border.xs,
|
2838
|
+
borderRadius: globalRefs$d.radius.xs,
|
2819
2839
|
borderColor: 'transparent',
|
2820
2840
|
|
2821
|
-
outlineWidth: globalRefs$
|
2841
|
+
outlineWidth: globalRefs$d.border.sm,
|
2822
2842
|
outlineStyle: 'solid',
|
2823
2843
|
outlineColor: 'transparent',
|
2824
2844
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -2829,9 +2849,9 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
2829
2849
|
horizontalPadding: '0.5em',
|
2830
2850
|
verticalPadding: '0.5em',
|
2831
2851
|
|
2832
|
-
backgroundColor: globalRefs$
|
2852
|
+
backgroundColor: globalRefs$d.colors.surface.light,
|
2833
2853
|
|
2834
|
-
fontFamily: globalRefs$
|
2854
|
+
fontFamily: globalRefs$d.fonts.font1.family,
|
2835
2855
|
|
2836
2856
|
size: {
|
2837
2857
|
xs: { fontSize: '12px' },
|
@@ -2845,69 +2865,69 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
2845
2865
|
},
|
2846
2866
|
|
2847
2867
|
_focused: {
|
2848
|
-
outlineColor: globalRefs$
|
2868
|
+
outlineColor: globalRefs$d.colors.surface.main,
|
2849
2869
|
_invalid: {
|
2850
|
-
outlineColor: globalRefs$
|
2870
|
+
outlineColor: globalRefs$d.colors.error.main,
|
2851
2871
|
},
|
2852
2872
|
},
|
2853
2873
|
|
2854
2874
|
_bordered: {
|
2855
|
-
outlineWidth: globalRefs$
|
2856
|
-
borderColor: globalRefs$
|
2875
|
+
outlineWidth: globalRefs$d.border.xs,
|
2876
|
+
borderColor: globalRefs$d.colors.surface.main,
|
2857
2877
|
borderStyle: 'solid',
|
2858
2878
|
_invalid: {
|
2859
|
-
borderColor: globalRefs$
|
2879
|
+
borderColor: globalRefs$d.colors.error.main,
|
2860
2880
|
},
|
2861
2881
|
},
|
2862
2882
|
|
2863
2883
|
_disabled: {
|
2864
|
-
labelTextColor: globalRefs$
|
2865
|
-
borderColor: globalRefs$
|
2866
|
-
valueTextColor: globalRefs$
|
2867
|
-
placeholderTextColor: globalRefs$
|
2868
|
-
backgroundColor: globalRefs$
|
2884
|
+
labelTextColor: globalRefs$d.colors.surface.main,
|
2885
|
+
borderColor: globalRefs$d.colors.surface.main,
|
2886
|
+
valueTextColor: globalRefs$d.colors.surface.dark,
|
2887
|
+
placeholderTextColor: globalRefs$d.colors.surface.dark,
|
2888
|
+
backgroundColor: globalRefs$d.colors.surface.main,
|
2869
2889
|
},
|
2870
2890
|
},
|
2871
|
-
componentName$
|
2891
|
+
componentName$w
|
2872
2892
|
);
|
2873
2893
|
|
2874
2894
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
2875
2895
|
__proto__: null,
|
2876
2896
|
default: theme$1,
|
2877
2897
|
refs: refs,
|
2878
|
-
vars: vars$
|
2898
|
+
vars: vars$r
|
2879
2899
|
});
|
2880
2900
|
|
2881
|
-
const vars$
|
2901
|
+
const vars$q = TextFieldClass.cssVarList;
|
2882
2902
|
|
2883
2903
|
const textField = {
|
2884
|
-
[vars$
|
2885
|
-
[vars$
|
2886
|
-
[vars$
|
2887
|
-
[vars$
|
2888
|
-
[vars$
|
2889
|
-
[vars$
|
2890
|
-
[vars$
|
2891
|
-
[vars$
|
2892
|
-
[vars$
|
2893
|
-
[vars$
|
2894
|
-
[vars$
|
2895
|
-
[vars$
|
2896
|
-
[vars$
|
2897
|
-
[vars$
|
2898
|
-
[vars$
|
2899
|
-
[vars$
|
2900
|
-
[vars$
|
2901
|
-
[vars$
|
2902
|
-
[vars$
|
2903
|
-
[vars$
|
2904
|
+
[vars$q.hostWidth]: refs.width,
|
2905
|
+
[vars$q.hostMinWidth]: refs.minWidth,
|
2906
|
+
[vars$q.fontSize]: refs.fontSize,
|
2907
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
2908
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
2909
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
2910
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
2911
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
2912
|
+
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
2913
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
2914
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
2915
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
2916
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
2917
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
2918
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
2919
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
2920
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
2921
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
2922
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
2923
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
2904
2924
|
};
|
2905
2925
|
|
2906
2926
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
2907
2927
|
__proto__: null,
|
2908
2928
|
default: textField,
|
2909
2929
|
textField: textField,
|
2910
|
-
vars: vars$
|
2930
|
+
vars: vars$q
|
2911
2931
|
});
|
2912
2932
|
|
2913
2933
|
const passwordDraggableMixin = (superclass) =>
|
@@ -2944,10 +2964,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
2944
2964
|
}
|
2945
2965
|
};
|
2946
2966
|
|
2947
|
-
const componentName$
|
2967
|
+
const componentName$v = getComponentName('password');
|
2948
2968
|
|
2949
2969
|
const {
|
2950
|
-
host: host$
|
2970
|
+
host: host$e,
|
2951
2971
|
inputField: inputField$4,
|
2952
2972
|
inputElement: inputElement$1,
|
2953
2973
|
inputElementPlaceholder,
|
@@ -2973,9 +2993,9 @@ const {
|
|
2973
2993
|
const PasswordClass = compose(
|
2974
2994
|
createStyleMixin({
|
2975
2995
|
mappings: {
|
2976
|
-
hostWidth: { ...host$
|
2977
|
-
hostMinWidth: { ...host$
|
2978
|
-
fontSize: [{}, host$
|
2996
|
+
hostWidth: { ...host$e, property: 'width' },
|
2997
|
+
hostMinWidth: { ...host$e, property: 'min-width' },
|
2998
|
+
fontSize: [{}, host$e],
|
2979
2999
|
fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
|
2980
3000
|
inputHeight: { ...inputField$4, property: 'height' },
|
2981
3001
|
inputHorizontalPadding: [
|
@@ -3073,44 +3093,44 @@ const PasswordClass = compose(
|
|
3073
3093
|
}
|
3074
3094
|
`,
|
3075
3095
|
excludeAttrsSync: ['tabindex'],
|
3076
|
-
componentName: componentName$
|
3096
|
+
componentName: componentName$v,
|
3077
3097
|
})
|
3078
3098
|
);
|
3079
3099
|
|
3080
|
-
const globalRefs$
|
3081
|
-
const vars$
|
3100
|
+
const globalRefs$c = getThemeRefs(globals);
|
3101
|
+
const vars$p = PasswordClass.cssVarList;
|
3082
3102
|
|
3083
3103
|
const password = {
|
3084
|
-
[vars$
|
3085
|
-
[vars$
|
3086
|
-
[vars$
|
3087
|
-
[vars$
|
3088
|
-
[vars$
|
3089
|
-
[vars$
|
3090
|
-
[vars$
|
3091
|
-
[vars$
|
3092
|
-
[vars$
|
3093
|
-
[vars$
|
3094
|
-
[vars$
|
3095
|
-
[vars$
|
3096
|
-
[vars$
|
3097
|
-
[vars$
|
3098
|
-
[vars$
|
3099
|
-
[vars$
|
3100
|
-
[vars$
|
3101
|
-
[vars$
|
3102
|
-
[vars$
|
3103
|
-
[vars$
|
3104
|
-
[vars$
|
3104
|
+
[vars$p.hostWidth]: refs.width,
|
3105
|
+
[vars$p.fontSize]: refs.fontSize,
|
3106
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
3107
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3108
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
3109
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
3110
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
3111
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
3112
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
3113
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
3114
|
+
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3115
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
3116
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
3117
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
3118
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
3119
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
3120
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
3121
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
3122
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
3123
|
+
[vars$p.revealButtonOffset]: globalRefs$c.spacing.md,
|
3124
|
+
[vars$p.revealButtonSize]: refs.toggleButtonSize,
|
3105
3125
|
};
|
3106
3126
|
|
3107
3127
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3108
3128
|
__proto__: null,
|
3109
3129
|
default: password,
|
3110
|
-
vars: vars$
|
3130
|
+
vars: vars$p
|
3111
3131
|
});
|
3112
3132
|
|
3113
|
-
const componentName$
|
3133
|
+
const componentName$u = getComponentName('number-field');
|
3114
3134
|
|
3115
3135
|
const NumberFieldClass = compose(
|
3116
3136
|
createStyleMixin({
|
@@ -3135,44 +3155,44 @@ const NumberFieldClass = compose(
|
|
3135
3155
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3136
3156
|
`,
|
3137
3157
|
excludeAttrsSync: ['tabindex'],
|
3138
|
-
componentName: componentName$
|
3158
|
+
componentName: componentName$u,
|
3139
3159
|
})
|
3140
3160
|
);
|
3141
3161
|
|
3142
|
-
const vars$
|
3162
|
+
const vars$o = NumberFieldClass.cssVarList;
|
3143
3163
|
|
3144
3164
|
const numberField = {
|
3145
|
-
[vars$
|
3146
|
-
[vars$
|
3147
|
-
[vars$
|
3148
|
-
[vars$
|
3149
|
-
[vars$
|
3150
|
-
[vars$
|
3151
|
-
[vars$
|
3152
|
-
[vars$
|
3153
|
-
[vars$
|
3154
|
-
[vars$
|
3155
|
-
[vars$
|
3156
|
-
[vars$
|
3157
|
-
[vars$
|
3158
|
-
[vars$
|
3159
|
-
[vars$
|
3160
|
-
[vars$
|
3161
|
-
[vars$
|
3162
|
-
[vars$
|
3163
|
-
[vars$
|
3164
|
-
[vars$
|
3165
|
+
[vars$o.hostWidth]: refs.width,
|
3166
|
+
[vars$o.hostMinWidth]: refs.minWidth,
|
3167
|
+
[vars$o.fontSize]: refs.fontSize,
|
3168
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
3169
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
3170
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
3171
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
3172
|
+
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
3173
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
3174
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
3175
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
3176
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
3177
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
3178
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
3179
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
3180
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
3181
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
3182
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
3183
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
3184
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
3165
3185
|
};
|
3166
3186
|
|
3167
3187
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3168
3188
|
__proto__: null,
|
3169
3189
|
default: numberField,
|
3170
|
-
vars: vars$
|
3190
|
+
vars: vars$o
|
3171
3191
|
});
|
3172
3192
|
|
3173
|
-
const componentName$
|
3193
|
+
const componentName$t = getComponentName('email-field');
|
3174
3194
|
|
3175
|
-
const customMixin$
|
3195
|
+
const customMixin$6 = (superclass) =>
|
3176
3196
|
class EmailFieldMixinClass extends superclass {
|
3177
3197
|
init() {
|
3178
3198
|
super.init?.();
|
@@ -3186,7 +3206,7 @@ const EmailFieldClass = compose(
|
|
3186
3206
|
draggableMixin,
|
3187
3207
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3188
3208
|
componentNameValidationMixin,
|
3189
|
-
customMixin$
|
3209
|
+
customMixin$6
|
3190
3210
|
)(
|
3191
3211
|
createProxy({
|
3192
3212
|
slots: ['', 'suffix'],
|
@@ -3204,45 +3224,45 @@ const EmailFieldClass = compose(
|
|
3204
3224
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3205
3225
|
`,
|
3206
3226
|
excludeAttrsSync: ['tabindex'],
|
3207
|
-
componentName: componentName$
|
3227
|
+
componentName: componentName$t,
|
3208
3228
|
})
|
3209
3229
|
);
|
3210
3230
|
|
3211
|
-
const vars$
|
3231
|
+
const vars$n = EmailFieldClass.cssVarList;
|
3212
3232
|
|
3213
3233
|
const emailField = {
|
3214
|
-
[vars$
|
3215
|
-
[vars$
|
3216
|
-
[vars$
|
3217
|
-
[vars$
|
3218
|
-
[vars$
|
3219
|
-
[vars$
|
3220
|
-
[vars$
|
3221
|
-
[vars$
|
3222
|
-
[vars$
|
3223
|
-
[vars$
|
3224
|
-
[vars$
|
3225
|
-
[vars$
|
3226
|
-
[vars$
|
3227
|
-
[vars$
|
3228
|
-
[vars$
|
3229
|
-
[vars$
|
3230
|
-
[vars$
|
3231
|
-
[vars$
|
3232
|
-
[vars$
|
3233
|
-
[vars$
|
3234
|
+
[vars$n.hostWidth]: refs.width,
|
3235
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
3236
|
+
[vars$n.fontSize]: refs.fontSize,
|
3237
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
3238
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
3239
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
3240
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
3241
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
3242
|
+
[vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
|
3243
|
+
[vars$n.inputBorderWidth]: refs.borderWidth,
|
3244
|
+
[vars$n.inputBorderStyle]: refs.borderStyle,
|
3245
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
3246
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
3247
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
3248
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
3249
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
3250
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
3251
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
3252
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
3253
|
+
[vars$n.inputHeight]: refs.inputHeight,
|
3234
3254
|
};
|
3235
3255
|
|
3236
3256
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3237
3257
|
__proto__: null,
|
3238
3258
|
default: emailField,
|
3239
|
-
vars: vars$
|
3259
|
+
vars: vars$n
|
3240
3260
|
});
|
3241
3261
|
|
3242
|
-
const componentName$
|
3262
|
+
const componentName$s = getComponentName('text-area');
|
3243
3263
|
|
3244
3264
|
const {
|
3245
|
-
host: host$
|
3265
|
+
host: host$d,
|
3246
3266
|
label: label$6,
|
3247
3267
|
placeholder: placeholder$1,
|
3248
3268
|
inputField: inputField$3,
|
@@ -3264,9 +3284,9 @@ const {
|
|
3264
3284
|
const TextAreaClass = compose(
|
3265
3285
|
createStyleMixin({
|
3266
3286
|
mappings: {
|
3267
|
-
hostWidth: { ...host$
|
3268
|
-
hostMinWidth: { ...host$
|
3269
|
-
fontSize: [host$
|
3287
|
+
hostWidth: { ...host$d, property: 'width' },
|
3288
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
3289
|
+
fontSize: [host$d, textArea$2],
|
3270
3290
|
fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
|
3271
3291
|
labelTextColor: [
|
3272
3292
|
{ ...label$6, property: 'color' },
|
@@ -3312,48 +3332,48 @@ const TextAreaClass = compose(
|
|
3312
3332
|
${resetInputCursor('vaadin-text-area')}
|
3313
3333
|
`,
|
3314
3334
|
excludeAttrsSync: ['tabindex'],
|
3315
|
-
componentName: componentName$
|
3335
|
+
componentName: componentName$s,
|
3316
3336
|
})
|
3317
3337
|
);
|
3318
3338
|
|
3319
|
-
const globalRefs$
|
3320
|
-
const vars$
|
3339
|
+
const globalRefs$b = getThemeRefs(globals);
|
3340
|
+
const vars$m = TextAreaClass.cssVarList;
|
3321
3341
|
|
3322
3342
|
const textArea = {
|
3323
|
-
[vars$
|
3324
|
-
[vars$
|
3325
|
-
[vars$
|
3326
|
-
[vars$
|
3327
|
-
[vars$
|
3328
|
-
[vars$
|
3329
|
-
[vars$
|
3330
|
-
[vars$
|
3331
|
-
[vars$
|
3332
|
-
[vars$
|
3333
|
-
[vars$
|
3334
|
-
[vars$
|
3335
|
-
[vars$
|
3336
|
-
[vars$
|
3337
|
-
[vars$
|
3338
|
-
[vars$
|
3339
|
-
[vars$
|
3340
|
-
[vars$
|
3341
|
-
[vars$
|
3342
|
-
[vars$
|
3343
|
+
[vars$m.hostWidth]: refs.width,
|
3344
|
+
[vars$m.hostMinWidth]: refs.minWidth,
|
3345
|
+
[vars$m.fontSize]: refs.fontSize,
|
3346
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
3347
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
3348
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
3349
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
3350
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
3351
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
3352
|
+
[vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3353
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
3354
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
3355
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
3356
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
3357
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
3358
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
3359
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
3360
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
3361
|
+
[vars$m.inputResizeType]: 'vertical',
|
3362
|
+
[vars$m.inputMinHeight]: '5em',
|
3343
3363
|
|
3344
3364
|
_disabled: {
|
3345
|
-
[vars$
|
3365
|
+
[vars$m.inputBackgroundColor]: globalRefs$b.colors.surface.light,
|
3346
3366
|
},
|
3347
3367
|
|
3348
3368
|
_readonly: {
|
3349
|
-
[vars$
|
3369
|
+
[vars$m.inputResizeType]: 'none',
|
3350
3370
|
},
|
3351
3371
|
};
|
3352
3372
|
|
3353
3373
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3354
3374
|
__proto__: null,
|
3355
3375
|
default: textArea,
|
3356
|
-
vars: vars$
|
3376
|
+
vars: vars$m
|
3357
3377
|
});
|
3358
3378
|
|
3359
3379
|
const createBaseInputClass = (...args) =>
|
@@ -3364,9 +3384,9 @@ const createBaseInputClass = (...args) =>
|
|
3364
3384
|
inputEventsDispatchingMixin
|
3365
3385
|
)(createBaseClass(...args));
|
3366
3386
|
|
3367
|
-
const componentName$
|
3387
|
+
const componentName$r = getComponentName('boolean-field-internal');
|
3368
3388
|
|
3369
|
-
createBaseInputClass({ componentName: componentName$
|
3389
|
+
createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
|
3370
3390
|
|
3371
3391
|
const booleanFieldMixin = (superclass) =>
|
3372
3392
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3375,14 +3395,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3375
3395
|
|
3376
3396
|
const template = document.createElement('template');
|
3377
3397
|
template.innerHTML = `
|
3378
|
-
<${componentName$
|
3398
|
+
<${componentName$r}
|
3379
3399
|
tabindex="-1"
|
3380
3400
|
slot="input"
|
3381
|
-
></${componentName$
|
3401
|
+
></${componentName$r}>
|
3382
3402
|
`;
|
3383
3403
|
|
3384
3404
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3385
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3405
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$r);
|
3386
3406
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3387
3407
|
|
3388
3408
|
forwardAttrs(this, this.inputElement, {
|
@@ -3444,10 +3464,10 @@ descope-boolean-field-internal {
|
|
3444
3464
|
}
|
3445
3465
|
`;
|
3446
3466
|
|
3447
|
-
const componentName$
|
3467
|
+
const componentName$q = getComponentName('checkbox');
|
3448
3468
|
|
3449
3469
|
const {
|
3450
|
-
host: host$
|
3470
|
+
host: host$c,
|
3451
3471
|
component: component$1,
|
3452
3472
|
checkboxElement,
|
3453
3473
|
checkboxSurface,
|
@@ -3469,9 +3489,9 @@ const {
|
|
3469
3489
|
const CheckboxClass = compose(
|
3470
3490
|
createStyleMixin({
|
3471
3491
|
mappings: {
|
3472
|
-
hostWidth: { ...host$
|
3492
|
+
hostWidth: { ...host$c, property: 'width' },
|
3473
3493
|
|
3474
|
-
fontSize: [host$
|
3494
|
+
fontSize: [host$c, checkboxElement, checkboxLabel$1],
|
3475
3495
|
fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
|
3476
3496
|
|
3477
3497
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -3541,53 +3561,53 @@ const CheckboxClass = compose(
|
|
3541
3561
|
}
|
3542
3562
|
`,
|
3543
3563
|
excludeAttrsSync: ['label', 'tabindex'],
|
3544
|
-
componentName: componentName$
|
3564
|
+
componentName: componentName$q,
|
3545
3565
|
})
|
3546
3566
|
);
|
3547
3567
|
|
3548
|
-
const vars$
|
3568
|
+
const vars$l = CheckboxClass.cssVarList;
|
3549
3569
|
const checkboxSize = '1.35em';
|
3550
3570
|
|
3551
3571
|
const checkbox = {
|
3552
|
-
[vars$
|
3553
|
-
[vars$
|
3554
|
-
[vars$
|
3555
|
-
[vars$
|
3556
|
-
[vars$
|
3557
|
-
[vars$
|
3558
|
-
[vars$
|
3559
|
-
[vars$
|
3560
|
-
[vars$
|
3561
|
-
[vars$
|
3562
|
-
[vars$
|
3563
|
-
[vars$
|
3564
|
-
[vars$
|
3565
|
-
[vars$
|
3566
|
-
[vars$
|
3567
|
-
[vars$
|
3568
|
-
[vars$
|
3569
|
-
[vars$
|
3570
|
-
[vars$
|
3572
|
+
[vars$l.hostWidth]: refs.width,
|
3573
|
+
[vars$l.fontSize]: refs.fontSize,
|
3574
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
3575
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
3576
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
3577
|
+
[vars$l.labelFontWeight]: '400',
|
3578
|
+
[vars$l.labelLineHeight]: checkboxSize,
|
3579
|
+
[vars$l.labelSpacing]: '1em',
|
3580
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
3581
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
3582
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
3583
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
3584
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
3585
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
3586
|
+
[vars$l.inputBorderColor]: refs.borderColor,
|
3587
|
+
[vars$l.inputBorderWidth]: refs.borderWidth,
|
3588
|
+
[vars$l.inputBorderStyle]: refs.borderStyle,
|
3589
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
3590
|
+
[vars$l.inputSize]: checkboxSize,
|
3571
3591
|
|
3572
3592
|
_checked: {
|
3573
|
-
[vars$
|
3593
|
+
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
3574
3594
|
},
|
3575
3595
|
|
3576
3596
|
_disabled: {
|
3577
|
-
[vars$
|
3597
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
3578
3598
|
},
|
3579
3599
|
};
|
3580
3600
|
|
3581
3601
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3582
3602
|
__proto__: null,
|
3583
3603
|
default: checkbox,
|
3584
|
-
vars: vars$
|
3604
|
+
vars: vars$l
|
3585
3605
|
});
|
3586
3606
|
|
3587
|
-
const componentName$
|
3607
|
+
const componentName$p = getComponentName('switch-toggle');
|
3588
3608
|
|
3589
3609
|
const {
|
3590
|
-
host: host$
|
3610
|
+
host: host$b,
|
3591
3611
|
component,
|
3592
3612
|
checkboxElement: track,
|
3593
3613
|
checkboxSurface: knob,
|
@@ -3609,7 +3629,7 @@ const {
|
|
3609
3629
|
const SwitchToggleClass = compose(
|
3610
3630
|
createStyleMixin({
|
3611
3631
|
mappings: {
|
3612
|
-
hostWidth: { ...host$
|
3632
|
+
hostWidth: { ...host$b, property: 'width' },
|
3613
3633
|
|
3614
3634
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
3615
3635
|
fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
|
@@ -3703,82 +3723,82 @@ const SwitchToggleClass = compose(
|
|
3703
3723
|
}
|
3704
3724
|
`,
|
3705
3725
|
excludeAttrsSync: ['label', 'tabindex'],
|
3706
|
-
componentName: componentName$
|
3726
|
+
componentName: componentName$p,
|
3707
3727
|
})
|
3708
3728
|
);
|
3709
3729
|
|
3710
3730
|
const knobMargin = '2px';
|
3711
3731
|
const checkboxHeight = '1.25em';
|
3712
3732
|
|
3713
|
-
const globalRefs$
|
3714
|
-
const vars$
|
3733
|
+
const globalRefs$a = getThemeRefs(globals);
|
3734
|
+
const vars$k = SwitchToggleClass.cssVarList;
|
3715
3735
|
|
3716
3736
|
const switchToggle = {
|
3717
|
-
[vars$
|
3718
|
-
[vars$
|
3719
|
-
[vars$
|
3720
|
-
|
3721
|
-
[vars$
|
3722
|
-
[vars$
|
3723
|
-
[vars$
|
3724
|
-
[vars$
|
3725
|
-
|
3726
|
-
[vars$
|
3727
|
-
[vars$
|
3728
|
-
[vars$
|
3729
|
-
[vars$
|
3730
|
-
[vars$
|
3731
|
-
[vars$
|
3732
|
-
[vars$
|
3733
|
-
|
3734
|
-
[vars$
|
3735
|
-
[vars$
|
3736
|
-
[vars$
|
3737
|
-
[vars$
|
3738
|
-
[vars$
|
3739
|
-
[vars$
|
3740
|
-
|
3741
|
-
[vars$
|
3742
|
-
[vars$
|
3743
|
-
[vars$
|
3744
|
-
[vars$
|
3745
|
-
[vars$
|
3746
|
-
[vars$
|
3737
|
+
[vars$k.hostWidth]: refs.width,
|
3738
|
+
[vars$k.fontSize]: refs.fontSize,
|
3739
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
3740
|
+
|
3741
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
3742
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
3743
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
3744
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
3745
|
+
|
3746
|
+
[vars$k.trackBorderStyle]: refs.borderStyle,
|
3747
|
+
[vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3748
|
+
[vars$k.trackBorderColor]: refs.borderColor,
|
3749
|
+
[vars$k.trackBackgroundColor]: 'none',
|
3750
|
+
[vars$k.trackBorderRadius]: globalRefs$a.radius.md,
|
3751
|
+
[vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3752
|
+
[vars$k.trackHeight]: checkboxHeight,
|
3753
|
+
|
3754
|
+
[vars$k.knobSize]: `calc(1em - ${knobMargin})`,
|
3755
|
+
[vars$k.knobRadius]: '50%',
|
3756
|
+
[vars$k.knobTopOffset]: '1px',
|
3757
|
+
[vars$k.knobLeftOffset]: knobMargin,
|
3758
|
+
[vars$k.knobColor]: refs.valueTextColor,
|
3759
|
+
[vars$k.knobTransitionDuration]: '0.3s',
|
3760
|
+
|
3761
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
3762
|
+
[vars$k.labelFontWeight]: '400',
|
3763
|
+
[vars$k.labelLineHeight]: '1.35em',
|
3764
|
+
[vars$k.labelSpacing]: '1em',
|
3765
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
3766
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
3747
3767
|
|
3748
3768
|
_checked: {
|
3749
|
-
[vars$
|
3750
|
-
[vars$
|
3751
|
-
[vars$
|
3752
|
-
[vars$
|
3753
|
-
[vars$
|
3769
|
+
[vars$k.trackBorderColor]: refs.borderColor,
|
3770
|
+
[vars$k.trackBackgroundColor]: refs.backgroundColor,
|
3771
|
+
[vars$k.knobLeftOffset]: `calc(100% - var(${vars$k.knobSize}) - ${knobMargin})`,
|
3772
|
+
[vars$k.knobColor]: refs.valueTextColor,
|
3773
|
+
[vars$k.knobTextColor]: refs.valueTextColor,
|
3754
3774
|
},
|
3755
3775
|
|
3756
3776
|
_disabled: {
|
3757
|
-
[vars$
|
3758
|
-
[vars$
|
3759
|
-
[vars$
|
3760
|
-
[vars$
|
3777
|
+
[vars$k.knobColor]: globalRefs$a.colors.surface.light,
|
3778
|
+
[vars$k.trackBorderColor]: globalRefs$a.colors.surface.main,
|
3779
|
+
[vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
|
3780
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
3761
3781
|
_checked: {
|
3762
|
-
[vars$
|
3763
|
-
[vars$
|
3782
|
+
[vars$k.knobColor]: globalRefs$a.colors.surface.light,
|
3783
|
+
[vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
|
3764
3784
|
},
|
3765
3785
|
},
|
3766
3786
|
|
3767
3787
|
_invalid: {
|
3768
|
-
[vars$
|
3769
|
-
[vars$
|
3788
|
+
[vars$k.trackBorderColor]: globalRefs$a.colors.error.main,
|
3789
|
+
[vars$k.knobColor]: globalRefs$a.colors.error.main,
|
3770
3790
|
},
|
3771
3791
|
};
|
3772
3792
|
|
3773
3793
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
3774
3794
|
__proto__: null,
|
3775
3795
|
default: switchToggle,
|
3776
|
-
vars: vars$
|
3796
|
+
vars: vars$k
|
3777
3797
|
});
|
3778
3798
|
|
3779
|
-
const componentName$
|
3799
|
+
const componentName$o = getComponentName('container');
|
3780
3800
|
|
3781
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3801
|
+
class RawContainer extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
|
3782
3802
|
constructor() {
|
3783
3803
|
super();
|
3784
3804
|
|
@@ -3830,9 +3850,9 @@ const ContainerClass = compose(
|
|
3830
3850
|
componentNameValidationMixin
|
3831
3851
|
)(RawContainer);
|
3832
3852
|
|
3833
|
-
const globalRefs$
|
3853
|
+
const globalRefs$9 = getThemeRefs(globals);
|
3834
3854
|
|
3835
|
-
const compVars$
|
3855
|
+
const compVars$3 = ContainerClass.cssVarList;
|
3836
3856
|
|
3837
3857
|
const verticalAlignment = {
|
3838
3858
|
start: { verticalAlignment: 'start' },
|
@@ -3852,7 +3872,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
3852
3872
|
horizontalAlignment,
|
3853
3873
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
3854
3874
|
},
|
3855
|
-
componentName$
|
3875
|
+
componentName$o
|
3856
3876
|
);
|
3857
3877
|
|
3858
3878
|
const { shadowColor } = helperRefs$2;
|
@@ -3860,30 +3880,30 @@ const { shadowColor } = helperRefs$2;
|
|
3860
3880
|
const container = {
|
3861
3881
|
...helperTheme$2,
|
3862
3882
|
|
3863
|
-
[compVars$
|
3864
|
-
[compVars$
|
3865
|
-
[compVars$
|
3866
|
-
[compVars$
|
3867
|
-
[compVars$
|
3883
|
+
[compVars$3.hostWidth]: '100%',
|
3884
|
+
[compVars$3.boxShadow]: 'none',
|
3885
|
+
[compVars$3.backgroundColor]: globalRefs$9.colors.surface.light,
|
3886
|
+
[compVars$3.color]: globalRefs$9.colors.surface.contrast,
|
3887
|
+
[compVars$3.borderRadius]: '0px',
|
3868
3888
|
|
3869
3889
|
verticalPadding: {
|
3870
|
-
sm: { [compVars$
|
3871
|
-
md: { [compVars$
|
3872
|
-
lg: { [compVars$
|
3890
|
+
sm: { [compVars$3.verticalPadding]: '5px' },
|
3891
|
+
md: { [compVars$3.verticalPadding]: '10px' },
|
3892
|
+
lg: { [compVars$3.verticalPadding]: '20px' },
|
3873
3893
|
},
|
3874
3894
|
|
3875
3895
|
horizontalPadding: {
|
3876
|
-
sm: { [compVars$
|
3877
|
-
md: { [compVars$
|
3878
|
-
lg: { [compVars$
|
3896
|
+
sm: { [compVars$3.horizontalPadding]: '5px' },
|
3897
|
+
md: { [compVars$3.horizontalPadding]: '10px' },
|
3898
|
+
lg: { [compVars$3.horizontalPadding]: '20px' },
|
3879
3899
|
},
|
3880
3900
|
|
3881
3901
|
direction: {
|
3882
3902
|
row: {
|
3883
|
-
[compVars$
|
3884
|
-
[compVars$
|
3885
|
-
[compVars$
|
3886
|
-
[compVars$
|
3903
|
+
[compVars$3.flexDirection]: 'row',
|
3904
|
+
[compVars$3.alignItems]: helperRefs$2.verticalAlignment,
|
3905
|
+
[compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
|
3906
|
+
[compVars$3.flexWrap]: 'wrap',
|
3887
3907
|
horizontalAlignment: {
|
3888
3908
|
spaceBetween: {
|
3889
3909
|
[helperVars$2.horizontalAlignment]: 'space-between',
|
@@ -3891,9 +3911,9 @@ const container = {
|
|
3891
3911
|
},
|
3892
3912
|
},
|
3893
3913
|
column: {
|
3894
|
-
[compVars$
|
3895
|
-
[compVars$
|
3896
|
-
[compVars$
|
3914
|
+
[compVars$3.flexDirection]: 'column',
|
3915
|
+
[compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
|
3916
|
+
[compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
|
3897
3917
|
verticalAlignment: {
|
3898
3918
|
spaceBetween: {
|
3899
3919
|
[helperVars$2.verticalAlignment]: 'space-between',
|
@@ -3903,49 +3923,49 @@ const container = {
|
|
3903
3923
|
},
|
3904
3924
|
|
3905
3925
|
spaceBetween: {
|
3906
|
-
sm: { [compVars$
|
3907
|
-
md: { [compVars$
|
3908
|
-
lg: { [compVars$
|
3926
|
+
sm: { [compVars$3.gap]: '10px' },
|
3927
|
+
md: { [compVars$3.gap]: '20px' },
|
3928
|
+
lg: { [compVars$3.gap]: '30px' },
|
3909
3929
|
},
|
3910
3930
|
|
3911
3931
|
shadow: {
|
3912
3932
|
sm: {
|
3913
|
-
[compVars$
|
3933
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${shadowColor}`,
|
3914
3934
|
},
|
3915
3935
|
md: {
|
3916
|
-
[compVars$
|
3936
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.md} ${shadowColor}, ${globalRefs$9.shadow.narrow.md} ${shadowColor}`,
|
3917
3937
|
},
|
3918
3938
|
lg: {
|
3919
|
-
[compVars$
|
3939
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${shadowColor}`,
|
3920
3940
|
},
|
3921
3941
|
xl: {
|
3922
|
-
[compVars$
|
3942
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${shadowColor}`,
|
3923
3943
|
},
|
3924
3944
|
'2xl': {
|
3925
3945
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
3926
|
-
[compVars$
|
3946
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${shadowColor}`,
|
3927
3947
|
},
|
3928
3948
|
},
|
3929
3949
|
|
3930
3950
|
borderRadius: {
|
3931
|
-
sm: { [compVars$
|
3932
|
-
md: { [compVars$
|
3933
|
-
lg: { [compVars$
|
3934
|
-
xl: { [compVars$
|
3935
|
-
'2xl': { [compVars$
|
3936
|
-
'3xl': { [compVars$
|
3951
|
+
sm: { [compVars$3.borderRadius]: globalRefs$9.radius.sm },
|
3952
|
+
md: { [compVars$3.borderRadius]: globalRefs$9.radius.md },
|
3953
|
+
lg: { [compVars$3.borderRadius]: globalRefs$9.radius.lg },
|
3954
|
+
xl: { [compVars$3.borderRadius]: globalRefs$9.radius.xl },
|
3955
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$9.radius['2xl'] },
|
3956
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$9.radius['3xl'] },
|
3937
3957
|
},
|
3938
3958
|
};
|
3939
3959
|
|
3940
|
-
const vars$
|
3941
|
-
...compVars$
|
3960
|
+
const vars$j = {
|
3961
|
+
...compVars$3,
|
3942
3962
|
...helperVars$2,
|
3943
3963
|
};
|
3944
3964
|
|
3945
3965
|
var container$1 = /*#__PURE__*/Object.freeze({
|
3946
3966
|
__proto__: null,
|
3947
3967
|
default: container,
|
3948
|
-
vars: vars$
|
3968
|
+
vars: vars$j
|
3949
3969
|
});
|
3950
3970
|
|
3951
3971
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -3998,51 +4018,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
3998
4018
|
return CssVarImageClass;
|
3999
4019
|
};
|
4000
4020
|
|
4001
|
-
const componentName$
|
4021
|
+
const componentName$n = getComponentName('logo');
|
4002
4022
|
|
4003
4023
|
const LogoClass = createCssVarImageClass({
|
4004
|
-
componentName: componentName$
|
4024
|
+
componentName: componentName$n,
|
4005
4025
|
varName: 'url',
|
4006
4026
|
fallbackVarName: 'fallbackUrl',
|
4007
4027
|
});
|
4008
4028
|
|
4009
|
-
const vars$
|
4029
|
+
const vars$i = LogoClass.cssVarList;
|
4010
4030
|
|
4011
4031
|
const logo$1 = {
|
4012
|
-
[vars$
|
4032
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4013
4033
|
};
|
4014
4034
|
|
4015
4035
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
4016
4036
|
__proto__: null,
|
4017
4037
|
default: logo$1,
|
4018
|
-
vars: vars$
|
4038
|
+
vars: vars$i
|
4019
4039
|
});
|
4020
4040
|
|
4021
|
-
const componentName$
|
4041
|
+
const componentName$m = getComponentName('totp-image');
|
4022
4042
|
|
4023
4043
|
const TotpImageClass = createCssVarImageClass({
|
4024
|
-
componentName: componentName$
|
4044
|
+
componentName: componentName$m,
|
4025
4045
|
varName: 'url',
|
4026
4046
|
fallbackVarName: 'fallbackUrl',
|
4027
4047
|
});
|
4028
4048
|
|
4029
|
-
const vars$
|
4049
|
+
const vars$h = TotpImageClass.cssVarList;
|
4030
4050
|
|
4031
4051
|
const logo = {
|
4032
|
-
[vars$
|
4052
|
+
[vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4033
4053
|
};
|
4034
4054
|
|
4035
4055
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4036
4056
|
__proto__: null,
|
4037
4057
|
default: logo,
|
4038
|
-
vars: vars$
|
4058
|
+
vars: vars$h
|
4039
4059
|
});
|
4040
4060
|
|
4041
4061
|
// eslint-disable-next-line max-classes-per-file
|
4042
4062
|
|
4043
|
-
const componentName$
|
4063
|
+
const componentName$l = getComponentName('text');
|
4044
4064
|
|
4045
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4065
|
+
class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
|
4046
4066
|
constructor() {
|
4047
4067
|
super();
|
4048
4068
|
|
@@ -4101,98 +4121,98 @@ const TextClass = compose(
|
|
4101
4121
|
customTextMixin
|
4102
4122
|
)(RawText);
|
4103
4123
|
|
4104
|
-
const globalRefs$
|
4105
|
-
const vars$
|
4124
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4125
|
+
const vars$g = TextClass.cssVarList;
|
4106
4126
|
|
4107
4127
|
const text$2 = {
|
4108
|
-
[vars$
|
4109
|
-
[vars$
|
4110
|
-
[vars$
|
4128
|
+
[vars$g.textLineHeight]: '1.35em',
|
4129
|
+
[vars$g.textAlign]: 'left',
|
4130
|
+
[vars$g.textColor]: globalRefs$8.colors.surface.dark,
|
4111
4131
|
variant: {
|
4112
4132
|
h1: {
|
4113
|
-
[vars$
|
4114
|
-
[vars$
|
4115
|
-
[vars$
|
4133
|
+
[vars$g.fontSize]: globalRefs$8.typography.h1.size,
|
4134
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h1.weight,
|
4135
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h1.font,
|
4116
4136
|
},
|
4117
4137
|
h2: {
|
4118
|
-
[vars$
|
4119
|
-
[vars$
|
4120
|
-
[vars$
|
4138
|
+
[vars$g.fontSize]: globalRefs$8.typography.h2.size,
|
4139
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h2.weight,
|
4140
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h2.font,
|
4121
4141
|
},
|
4122
4142
|
h3: {
|
4123
|
-
[vars$
|
4124
|
-
[vars$
|
4125
|
-
[vars$
|
4143
|
+
[vars$g.fontSize]: globalRefs$8.typography.h3.size,
|
4144
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h3.weight,
|
4145
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h3.font,
|
4126
4146
|
},
|
4127
4147
|
subtitle1: {
|
4128
|
-
[vars$
|
4129
|
-
[vars$
|
4130
|
-
[vars$
|
4148
|
+
[vars$g.fontSize]: globalRefs$8.typography.subtitle1.size,
|
4149
|
+
[vars$g.fontWeight]: globalRefs$8.typography.subtitle1.weight,
|
4150
|
+
[vars$g.fontFamily]: globalRefs$8.typography.subtitle1.font,
|
4131
4151
|
},
|
4132
4152
|
subtitle2: {
|
4133
|
-
[vars$
|
4134
|
-
[vars$
|
4135
|
-
[vars$
|
4153
|
+
[vars$g.fontSize]: globalRefs$8.typography.subtitle2.size,
|
4154
|
+
[vars$g.fontWeight]: globalRefs$8.typography.subtitle2.weight,
|
4155
|
+
[vars$g.fontFamily]: globalRefs$8.typography.subtitle2.font,
|
4136
4156
|
},
|
4137
4157
|
body1: {
|
4138
|
-
[vars$
|
4139
|
-
[vars$
|
4140
|
-
[vars$
|
4158
|
+
[vars$g.fontSize]: globalRefs$8.typography.body1.size,
|
4159
|
+
[vars$g.fontWeight]: globalRefs$8.typography.body1.weight,
|
4160
|
+
[vars$g.fontFamily]: globalRefs$8.typography.body1.font,
|
4141
4161
|
},
|
4142
4162
|
body2: {
|
4143
|
-
[vars$
|
4144
|
-
[vars$
|
4145
|
-
[vars$
|
4163
|
+
[vars$g.fontSize]: globalRefs$8.typography.body2.size,
|
4164
|
+
[vars$g.fontWeight]: globalRefs$8.typography.body2.weight,
|
4165
|
+
[vars$g.fontFamily]: globalRefs$8.typography.body2.font,
|
4146
4166
|
},
|
4147
4167
|
},
|
4148
4168
|
|
4149
4169
|
mode: {
|
4150
4170
|
primary: {
|
4151
|
-
[vars$
|
4171
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
4152
4172
|
},
|
4153
4173
|
secondary: {
|
4154
|
-
[vars$
|
4174
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
4155
4175
|
},
|
4156
4176
|
error: {
|
4157
|
-
[vars$
|
4177
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
4158
4178
|
},
|
4159
4179
|
success: {
|
4160
|
-
[vars$
|
4180
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
4161
4181
|
},
|
4162
4182
|
},
|
4163
4183
|
|
4164
4184
|
textAlign: {
|
4165
|
-
right: { [vars$
|
4166
|
-
left: { [vars$
|
4167
|
-
center: { [vars$
|
4185
|
+
right: { [vars$g.textAlign]: 'right' },
|
4186
|
+
left: { [vars$g.textAlign]: 'left' },
|
4187
|
+
center: { [vars$g.textAlign]: 'center' },
|
4168
4188
|
},
|
4169
4189
|
|
4170
4190
|
_fullWidth: {
|
4171
|
-
[vars$
|
4191
|
+
[vars$g.hostWidth]: '100%',
|
4172
4192
|
},
|
4173
4193
|
|
4174
4194
|
_italic: {
|
4175
|
-
[vars$
|
4195
|
+
[vars$g.fontStyle]: 'italic',
|
4176
4196
|
},
|
4177
4197
|
|
4178
4198
|
_uppercase: {
|
4179
|
-
[vars$
|
4199
|
+
[vars$g.textTransform]: 'uppercase',
|
4180
4200
|
},
|
4181
4201
|
|
4182
4202
|
_lowercase: {
|
4183
|
-
[vars$
|
4203
|
+
[vars$g.textTransform]: 'lowercase',
|
4184
4204
|
},
|
4185
4205
|
};
|
4186
4206
|
|
4187
4207
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4188
4208
|
__proto__: null,
|
4189
4209
|
default: text$2,
|
4190
|
-
vars: vars$
|
4210
|
+
vars: vars$g
|
4191
4211
|
});
|
4192
4212
|
|
4193
|
-
const componentName$
|
4213
|
+
const componentName$k = getComponentName('link');
|
4194
4214
|
|
4195
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4215
|
+
class RawLink extends createBaseClass({ componentName: componentName$k, baseSelector: ':host a' }) {
|
4196
4216
|
constructor() {
|
4197
4217
|
super();
|
4198
4218
|
|
@@ -4238,12 +4258,12 @@ const selectors$1 = {
|
|
4238
4258
|
text: { selector: () => TextClass.componentName },
|
4239
4259
|
};
|
4240
4260
|
|
4241
|
-
const { anchor, text: text$1, host: host$
|
4261
|
+
const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$1;
|
4242
4262
|
|
4243
4263
|
const LinkClass = compose(
|
4244
4264
|
createStyleMixin({
|
4245
4265
|
mappings: {
|
4246
|
-
hostWidth: { ...host$
|
4266
|
+
hostWidth: { ...host$a, property: 'width' },
|
4247
4267
|
textAlign: wrapper$1,
|
4248
4268
|
textColor: [
|
4249
4269
|
{ ...anchor, property: 'color' },
|
@@ -4256,36 +4276,36 @@ const LinkClass = compose(
|
|
4256
4276
|
componentNameValidationMixin
|
4257
4277
|
)(RawLink);
|
4258
4278
|
|
4259
|
-
const globalRefs$
|
4260
|
-
const vars$
|
4279
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4280
|
+
const vars$f = LinkClass.cssVarList;
|
4261
4281
|
|
4262
4282
|
const link = {
|
4263
|
-
[vars$
|
4283
|
+
[vars$f.cursor]: 'pointer',
|
4264
4284
|
|
4265
|
-
[vars$
|
4285
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
4266
4286
|
|
4267
4287
|
textAlign: {
|
4268
|
-
right: { [vars$
|
4269
|
-
left: { [vars$
|
4270
|
-
center: { [vars$
|
4288
|
+
right: { [vars$f.textAlign]: 'right' },
|
4289
|
+
left: { [vars$f.textAlign]: 'left' },
|
4290
|
+
center: { [vars$f.textAlign]: 'center' },
|
4271
4291
|
},
|
4272
4292
|
|
4273
4293
|
_fullWidth: {
|
4274
|
-
[vars$
|
4294
|
+
[vars$f.hostWidth]: '100%',
|
4275
4295
|
},
|
4276
4296
|
|
4277
4297
|
mode: {
|
4278
4298
|
primary: {
|
4279
|
-
[vars$
|
4299
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
4280
4300
|
},
|
4281
4301
|
secondary: {
|
4282
|
-
[vars$
|
4302
|
+
[vars$f.textColor]: globalRefs$7.colors.secondary.main,
|
4283
4303
|
},
|
4284
4304
|
error: {
|
4285
|
-
[vars$
|
4305
|
+
[vars$f.textColor]: globalRefs$7.colors.error.main,
|
4286
4306
|
},
|
4287
4307
|
success: {
|
4288
|
-
[vars$
|
4308
|
+
[vars$f.textColor]: globalRefs$7.colors.success.main,
|
4289
4309
|
},
|
4290
4310
|
},
|
4291
4311
|
};
|
@@ -4293,11 +4313,11 @@ const link = {
|
|
4293
4313
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4294
4314
|
__proto__: null,
|
4295
4315
|
default: link,
|
4296
|
-
vars: vars$
|
4316
|
+
vars: vars$f
|
4297
4317
|
});
|
4298
4318
|
|
4299
|
-
const componentName$
|
4300
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4319
|
+
const componentName$j = getComponentName('divider');
|
4320
|
+
class RawDivider extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
4301
4321
|
constructor() {
|
4302
4322
|
super();
|
4303
4323
|
|
@@ -4342,7 +4362,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$h, baseS
|
|
4342
4362
|
}
|
4343
4363
|
}
|
4344
4364
|
|
4345
|
-
const { host: host$
|
4365
|
+
const { host: host$9, before, after: after$1, text } = {
|
4346
4366
|
host: { selector: () => ':host' },
|
4347
4367
|
before: { selector: '::before' },
|
4348
4368
|
after: { selector: '::after' },
|
@@ -4352,8 +4372,8 @@ const { host: host$8, before, after: after$1, text } = {
|
|
4352
4372
|
const DividerClass = compose(
|
4353
4373
|
createStyleMixin({
|
4354
4374
|
mappings: {
|
4355
|
-
hostWidth: { ...host$
|
4356
|
-
hostPadding: { ...host$
|
4375
|
+
hostWidth: { ...host$9, property: 'width' },
|
4376
|
+
hostPadding: { ...host$9, property: 'padding' },
|
4357
4377
|
|
4358
4378
|
minHeight: {},
|
4359
4379
|
alignItems: {},
|
@@ -4393,65 +4413,65 @@ const DividerClass = compose(
|
|
4393
4413
|
componentNameValidationMixin
|
4394
4414
|
)(RawDivider);
|
4395
4415
|
|
4396
|
-
const globalRefs$
|
4397
|
-
const compVars$
|
4416
|
+
const globalRefs$6 = getThemeRefs(globals);
|
4417
|
+
const compVars$2 = DividerClass.cssVarList;
|
4398
4418
|
|
4399
4419
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
4400
4420
|
{
|
4401
4421
|
thickness: '2px',
|
4402
4422
|
spacing: '10px',
|
4403
4423
|
},
|
4404
|
-
componentName$
|
4424
|
+
componentName$j
|
4405
4425
|
);
|
4406
4426
|
|
4407
4427
|
const divider = {
|
4408
4428
|
...helperTheme$1,
|
4409
4429
|
|
4410
|
-
[compVars$
|
4411
|
-
[compVars$
|
4412
|
-
[compVars$
|
4413
|
-
[compVars$
|
4414
|
-
[compVars$
|
4415
|
-
[compVars$
|
4416
|
-
[compVars$
|
4417
|
-
[compVars$
|
4418
|
-
[compVars$
|
4419
|
-
[compVars$
|
4430
|
+
[compVars$2.alignItems]: 'center',
|
4431
|
+
[compVars$2.flexDirection]: 'row',
|
4432
|
+
[compVars$2.alignSelf]: 'stretch',
|
4433
|
+
[compVars$2.hostWidth]: '100%',
|
4434
|
+
[compVars$2.stripeColor]: globalRefs$6.colors.surface.main,
|
4435
|
+
[compVars$2.stripeColorOpacity]: '0.5',
|
4436
|
+
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4437
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
4438
|
+
[compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
|
4439
|
+
[compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
4420
4440
|
|
4421
4441
|
_vertical: {
|
4422
|
-
[compVars$
|
4423
|
-
[compVars$
|
4424
|
-
[compVars$
|
4425
|
-
[compVars$
|
4426
|
-
[compVars$
|
4427
|
-
[compVars$
|
4428
|
-
[compVars$
|
4429
|
-
[compVars$
|
4442
|
+
[compVars$2.minHeight]: '200px',
|
4443
|
+
[compVars$2.flexDirection]: 'column',
|
4444
|
+
[compVars$2.hostWidth]: 'fit-content',
|
4445
|
+
[compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
4446
|
+
[compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
|
4447
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
4448
|
+
[compVars$2.labelTextMaxWidth]: '100%',
|
4449
|
+
[compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
4430
4450
|
},
|
4431
4451
|
};
|
4432
4452
|
|
4433
|
-
const vars$
|
4434
|
-
...compVars$
|
4453
|
+
const vars$e = {
|
4454
|
+
...compVars$2,
|
4435
4455
|
...helperVars$1,
|
4436
4456
|
};
|
4437
4457
|
|
4438
4458
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4439
4459
|
__proto__: null,
|
4440
4460
|
default: divider,
|
4441
|
-
vars: vars$
|
4461
|
+
vars: vars$e
|
4442
4462
|
});
|
4443
4463
|
|
4444
4464
|
/* eslint-disable no-param-reassign */
|
4445
4465
|
|
4446
|
-
const componentName$
|
4466
|
+
const componentName$i = getComponentName('passcode-internal');
|
4447
4467
|
|
4448
|
-
createBaseInputClass({ componentName: componentName$
|
4468
|
+
createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
4449
4469
|
|
4450
|
-
const componentName$
|
4470
|
+
const componentName$h = getComponentName('passcode');
|
4451
4471
|
|
4452
4472
|
const observedAttributes$3 = ['digits'];
|
4453
4473
|
|
4454
|
-
const customMixin$
|
4474
|
+
const customMixin$5 = (superclass) =>
|
4455
4475
|
class PasscodeMixinClass extends superclass {
|
4456
4476
|
static get observedAttributes() {
|
4457
4477
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
@@ -4466,17 +4486,17 @@ const customMixin$4 = (superclass) =>
|
|
4466
4486
|
const template = document.createElement('template');
|
4467
4487
|
|
4468
4488
|
template.innerHTML = `
|
4469
|
-
<${componentName$
|
4489
|
+
<${componentName$i}
|
4470
4490
|
bordered="true"
|
4471
4491
|
name="code"
|
4472
4492
|
tabindex="-1"
|
4473
4493
|
slot="input"
|
4474
|
-
><slot></slot></${componentName$
|
4494
|
+
><slot></slot></${componentName$i}>
|
4475
4495
|
`;
|
4476
4496
|
|
4477
4497
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4478
4498
|
|
4479
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4499
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
4480
4500
|
|
4481
4501
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
4482
4502
|
}
|
@@ -4491,7 +4511,7 @@ const customMixin$4 = (superclass) =>
|
|
4491
4511
|
};
|
4492
4512
|
|
4493
4513
|
const {
|
4494
|
-
host: host$
|
4514
|
+
host: host$8,
|
4495
4515
|
digitField,
|
4496
4516
|
label: label$5,
|
4497
4517
|
requiredIndicator: requiredIndicator$5,
|
@@ -4513,9 +4533,9 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
4513
4533
|
const PasscodeClass = compose(
|
4514
4534
|
createStyleMixin({
|
4515
4535
|
mappings: {
|
4516
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
4536
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
|
4517
4537
|
hostWidth: { property: 'width' },
|
4518
|
-
fontFamily: [host$
|
4538
|
+
fontFamily: [host$8, { ...label$5 }],
|
4519
4539
|
labelTextColor: [
|
4520
4540
|
{ ...label$5, property: 'color' },
|
4521
4541
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -4543,7 +4563,7 @@ const PasscodeClass = compose(
|
|
4543
4563
|
draggableMixin,
|
4544
4564
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
4545
4565
|
componentNameValidationMixin,
|
4546
|
-
customMixin$
|
4566
|
+
customMixin$5
|
4547
4567
|
)(
|
4548
4568
|
createProxy({
|
4549
4569
|
slots: [],
|
@@ -4614,44 +4634,44 @@ const PasscodeClass = compose(
|
|
4614
4634
|
${resetInputCursor('vaadin-text-field')}
|
4615
4635
|
`,
|
4616
4636
|
excludeAttrsSync: ['tabindex'],
|
4617
|
-
componentName: componentName$
|
4637
|
+
componentName: componentName$h,
|
4618
4638
|
})
|
4619
4639
|
);
|
4620
4640
|
|
4621
|
-
const vars$
|
4641
|
+
const vars$d = PasscodeClass.cssVarList;
|
4622
4642
|
|
4623
4643
|
const passcode = {
|
4624
|
-
[vars$
|
4625
|
-
[vars$
|
4626
|
-
[vars$
|
4627
|
-
[vars$
|
4628
|
-
[vars$
|
4629
|
-
[vars$
|
4630
|
-
[vars$
|
4631
|
-
[vars$
|
4632
|
-
[vars$
|
4633
|
-
[vars$
|
4634
|
-
[vars$
|
4635
|
-
[vars$
|
4636
|
-
[vars$
|
4637
|
-
[vars$
|
4644
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
4645
|
+
[vars$d.fontSize]: refs.fontSize,
|
4646
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
4647
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
4648
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
4649
|
+
[vars$d.digitValueTextColor]: refs.valueTextColor,
|
4650
|
+
[vars$d.digitPadding]: '0',
|
4651
|
+
[vars$d.digitTextAlign]: 'center',
|
4652
|
+
[vars$d.digitSpacing]: '4px',
|
4653
|
+
[vars$d.hostWidth]: refs.width,
|
4654
|
+
[vars$d.digitOutlineColor]: 'transparent',
|
4655
|
+
[vars$d.digitOutlineWidth]: refs.outlineWidth,
|
4656
|
+
[vars$d.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
4657
|
+
[vars$d.digitSize]: refs.inputHeight,
|
4638
4658
|
|
4639
4659
|
_hideCursor: {
|
4640
|
-
[vars$
|
4660
|
+
[vars$d.digitCaretTextColor]: 'transparent',
|
4641
4661
|
},
|
4642
4662
|
};
|
4643
4663
|
|
4644
4664
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
4645
4665
|
__proto__: null,
|
4646
4666
|
default: passcode,
|
4647
|
-
vars: vars$
|
4667
|
+
vars: vars$d
|
4648
4668
|
});
|
4649
4669
|
|
4650
|
-
const componentName$
|
4670
|
+
const componentName$g = getComponentName('loader-linear');
|
4651
4671
|
|
4652
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4672
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
|
4653
4673
|
static get componentName() {
|
4654
|
-
return componentName$
|
4674
|
+
return componentName$g;
|
4655
4675
|
}
|
4656
4676
|
|
4657
4677
|
constructor() {
|
@@ -4687,18 +4707,18 @@ const selectors = {
|
|
4687
4707
|
host: { selector: () => ':host' },
|
4688
4708
|
};
|
4689
4709
|
|
4690
|
-
const { after, host: host$
|
4710
|
+
const { after, host: host$7 } = selectors;
|
4691
4711
|
|
4692
4712
|
const LoaderLinearClass = compose(
|
4693
4713
|
createStyleMixin({
|
4694
4714
|
mappings: {
|
4695
4715
|
hostDisplay: {},
|
4696
|
-
hostWidth: { ...host$
|
4716
|
+
hostWidth: { ...host$7, property: 'width' },
|
4697
4717
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
4698
4718
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
4699
4719
|
verticalPadding: [
|
4700
|
-
{ ...host$
|
4701
|
-
{ ...host$
|
4720
|
+
{ ...host$7, property: 'padding-top' },
|
4721
|
+
{ ...host$7, property: 'padding-bottom' },
|
4702
4722
|
],
|
4703
4723
|
barBackgroundColor: { property: 'background-color' },
|
4704
4724
|
barColor: { ...after, property: 'background-color' },
|
@@ -4712,54 +4732,54 @@ const LoaderLinearClass = compose(
|
|
4712
4732
|
componentNameValidationMixin
|
4713
4733
|
)(RawLoaderLinear);
|
4714
4734
|
|
4715
|
-
const globalRefs$
|
4716
|
-
const vars$
|
4735
|
+
const globalRefs$5 = getThemeRefs(globals);
|
4736
|
+
const vars$c = LoaderLinearClass.cssVarList;
|
4717
4737
|
|
4718
4738
|
const loaderLinear = {
|
4719
|
-
[vars$
|
4720
|
-
[vars$
|
4739
|
+
[vars$c.hostDisplay]: 'inline-block',
|
4740
|
+
[vars$c.hostWidth]: '100%',
|
4721
4741
|
|
4722
|
-
[vars$
|
4723
|
-
[vars$
|
4742
|
+
[vars$c.barColor]: globalRefs$5.colors.surface.contrast,
|
4743
|
+
[vars$c.barWidth]: '20%',
|
4724
4744
|
|
4725
|
-
[vars$
|
4726
|
-
[vars$
|
4745
|
+
[vars$c.barBackgroundColor]: globalRefs$5.colors.surface.main,
|
4746
|
+
[vars$c.barBorderRadius]: '4px',
|
4727
4747
|
|
4728
|
-
[vars$
|
4729
|
-
[vars$
|
4730
|
-
[vars$
|
4731
|
-
[vars$
|
4748
|
+
[vars$c.animationDuration]: '2s',
|
4749
|
+
[vars$c.animationTimingFunction]: 'linear',
|
4750
|
+
[vars$c.animationIterationCount]: 'infinite',
|
4751
|
+
[vars$c.verticalPadding]: '0.25em',
|
4732
4752
|
|
4733
4753
|
size: {
|
4734
|
-
xs: { [vars$
|
4735
|
-
sm: { [vars$
|
4736
|
-
md: { [vars$
|
4737
|
-
lg: { [vars$
|
4754
|
+
xs: { [vars$c.barHeight]: '2px' },
|
4755
|
+
sm: { [vars$c.barHeight]: '4px' },
|
4756
|
+
md: { [vars$c.barHeight]: '6px' },
|
4757
|
+
lg: { [vars$c.barHeight]: '8px' },
|
4738
4758
|
},
|
4739
4759
|
|
4740
4760
|
mode: {
|
4741
4761
|
primary: {
|
4742
|
-
[vars$
|
4762
|
+
[vars$c.barColor]: globalRefs$5.colors.primary.main,
|
4743
4763
|
},
|
4744
4764
|
secondary: {
|
4745
|
-
[vars$
|
4765
|
+
[vars$c.barColor]: globalRefs$5.colors.secondary.main,
|
4746
4766
|
},
|
4747
4767
|
},
|
4748
4768
|
|
4749
4769
|
_hidden: {
|
4750
|
-
[vars$
|
4770
|
+
[vars$c.hostDisplay]: 'none',
|
4751
4771
|
},
|
4752
4772
|
};
|
4753
4773
|
|
4754
4774
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
4755
4775
|
__proto__: null,
|
4756
4776
|
default: loaderLinear,
|
4757
|
-
vars: vars$
|
4777
|
+
vars: vars$c
|
4758
4778
|
});
|
4759
4779
|
|
4760
|
-
const componentName$
|
4780
|
+
const componentName$f = getComponentName('loader-radial');
|
4761
4781
|
|
4762
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4782
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
|
4763
4783
|
constructor() {
|
4764
4784
|
super();
|
4765
4785
|
|
@@ -4803,62 +4823,62 @@ const LoaderRadialClass = compose(
|
|
4803
4823
|
componentNameValidationMixin
|
4804
4824
|
)(RawLoaderRadial);
|
4805
4825
|
|
4806
|
-
const globalRefs$
|
4807
|
-
const compVars = LoaderRadialClass.cssVarList;
|
4826
|
+
const globalRefs$4 = getThemeRefs(globals);
|
4827
|
+
const compVars$1 = LoaderRadialClass.cssVarList;
|
4808
4828
|
|
4809
4829
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
4810
4830
|
{
|
4811
|
-
spinnerColor: globalRefs$
|
4831
|
+
spinnerColor: globalRefs$4.colors.surface.contrast,
|
4812
4832
|
mode: {
|
4813
4833
|
primary: {
|
4814
|
-
spinnerColor: globalRefs$
|
4834
|
+
spinnerColor: globalRefs$4.colors.primary.main,
|
4815
4835
|
},
|
4816
4836
|
secondary: {
|
4817
|
-
spinnerColor: globalRefs$
|
4837
|
+
spinnerColor: globalRefs$4.colors.secondary.main,
|
4818
4838
|
},
|
4819
4839
|
},
|
4820
4840
|
},
|
4821
|
-
componentName$
|
4841
|
+
componentName$f
|
4822
4842
|
);
|
4823
4843
|
|
4824
4844
|
const loaderRadial = {
|
4825
4845
|
...helperTheme,
|
4826
4846
|
|
4827
|
-
[compVars.animationDuration]: '2s',
|
4828
|
-
[compVars.animationTimingFunction]: 'linear',
|
4829
|
-
[compVars.animationIterationCount]: 'infinite',
|
4830
|
-
[compVars.spinnerBorderStyle]: 'solid',
|
4831
|
-
[compVars.spinnerBorderWidth]: '0.2em',
|
4832
|
-
[compVars.spinnerBorderRadius]: '50%',
|
4833
|
-
[compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
4834
|
-
[compVars.spinnerQuadrant2Color]: 'transparent',
|
4835
|
-
[compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
4836
|
-
[compVars.spinnerQuadrant4Color]: 'transparent',
|
4847
|
+
[compVars$1.animationDuration]: '2s',
|
4848
|
+
[compVars$1.animationTimingFunction]: 'linear',
|
4849
|
+
[compVars$1.animationIterationCount]: 'infinite',
|
4850
|
+
[compVars$1.spinnerBorderStyle]: 'solid',
|
4851
|
+
[compVars$1.spinnerBorderWidth]: '0.2em',
|
4852
|
+
[compVars$1.spinnerBorderRadius]: '50%',
|
4853
|
+
[compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
4854
|
+
[compVars$1.spinnerQuadrant2Color]: 'transparent',
|
4855
|
+
[compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
4856
|
+
[compVars$1.spinnerQuadrant4Color]: 'transparent',
|
4837
4857
|
|
4838
4858
|
size: {
|
4839
|
-
xs: { [compVars.spinnerSize]: '20px' },
|
4840
|
-
sm: { [compVars.spinnerSize]: '30px' },
|
4841
|
-
md: { [compVars.spinnerSize]: '40px' },
|
4842
|
-
lg: { [compVars.spinnerSize]: '60px' },
|
4843
|
-
xl: { [compVars.spinnerSize]: '80px' },
|
4859
|
+
xs: { [compVars$1.spinnerSize]: '20px' },
|
4860
|
+
sm: { [compVars$1.spinnerSize]: '30px' },
|
4861
|
+
md: { [compVars$1.spinnerSize]: '40px' },
|
4862
|
+
lg: { [compVars$1.spinnerSize]: '60px' },
|
4863
|
+
xl: { [compVars$1.spinnerSize]: '80px' },
|
4844
4864
|
},
|
4845
4865
|
|
4846
4866
|
_hidden: {
|
4847
|
-
[compVars.hostDisplay]: 'none',
|
4867
|
+
[compVars$1.hostDisplay]: 'none',
|
4848
4868
|
},
|
4849
4869
|
};
|
4850
|
-
const vars$
|
4851
|
-
...compVars,
|
4870
|
+
const vars$b = {
|
4871
|
+
...compVars$1,
|
4852
4872
|
...helperVars,
|
4853
4873
|
};
|
4854
4874
|
|
4855
4875
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
4856
4876
|
__proto__: null,
|
4857
4877
|
default: loaderRadial,
|
4858
|
-
vars: vars$
|
4878
|
+
vars: vars$b
|
4859
4879
|
});
|
4860
4880
|
|
4861
|
-
const componentName$
|
4881
|
+
const componentName$e = getComponentName('combo-box');
|
4862
4882
|
|
4863
4883
|
const ComboBoxMixin = (superclass) =>
|
4864
4884
|
class ComboBoxMixinClass extends superclass {
|
@@ -5080,7 +5100,7 @@ const ComboBoxMixin = (superclass) =>
|
|
5080
5100
|
};
|
5081
5101
|
|
5082
5102
|
const {
|
5083
|
-
host: host$
|
5103
|
+
host: host$6,
|
5084
5104
|
inputField: inputField$2,
|
5085
5105
|
inputElement,
|
5086
5106
|
placeholder,
|
@@ -5104,9 +5124,9 @@ const {
|
|
5104
5124
|
const ComboBoxClass = compose(
|
5105
5125
|
createStyleMixin({
|
5106
5126
|
mappings: {
|
5107
|
-
hostWidth: { ...host$
|
5127
|
+
hostWidth: { ...host$6, property: 'width' },
|
5108
5128
|
// we apply font-size also on the host so we can set its width with em
|
5109
|
-
fontSize: [{}, host$
|
5129
|
+
fontSize: [{}, host$6],
|
5110
5130
|
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
5111
5131
|
labelTextColor: [
|
5112
5132
|
{ ...label$4, property: 'color' },
|
@@ -5209,66 +5229,66 @@ const ComboBoxClass = compose(
|
|
5209
5229
|
// and reset items to an empty array, and opening the list box with no items
|
5210
5230
|
// to display.
|
5211
5231
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5212
|
-
componentName: componentName$
|
5232
|
+
componentName: componentName$e,
|
5213
5233
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5214
5234
|
})
|
5215
5235
|
);
|
5216
5236
|
|
5217
|
-
const globalRefs$
|
5218
|
-
const vars$
|
5237
|
+
const globalRefs$3 = getThemeRefs(globals);
|
5238
|
+
const vars$a = ComboBoxClass.cssVarList;
|
5219
5239
|
|
5220
5240
|
const comboBox = {
|
5221
|
-
[vars$
|
5222
|
-
[vars$
|
5223
|
-
[vars$
|
5224
|
-
[vars$
|
5225
|
-
[vars$
|
5226
|
-
[vars$
|
5227
|
-
[vars$
|
5228
|
-
[vars$
|
5229
|
-
[vars$
|
5230
|
-
[vars$
|
5231
|
-
[vars$
|
5232
|
-
[vars$
|
5233
|
-
[vars$
|
5234
|
-
[vars$
|
5235
|
-
[vars$
|
5236
|
-
[vars$
|
5237
|
-
[vars$
|
5238
|
-
[vars$
|
5239
|
-
[vars$
|
5240
|
-
[vars$
|
5241
|
-
[vars$
|
5242
|
-
[vars$
|
5243
|
-
[vars$
|
5241
|
+
[vars$a.hostWidth]: refs.width,
|
5242
|
+
[vars$a.fontSize]: refs.fontSize,
|
5243
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
5244
|
+
[vars$a.labelTextColor]: refs.labelTextColor,
|
5245
|
+
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
5246
|
+
[vars$a.inputBorderColor]: refs.borderColor,
|
5247
|
+
[vars$a.inputBorderWidth]: refs.borderWidth,
|
5248
|
+
[vars$a.inputBorderStyle]: refs.borderStyle,
|
5249
|
+
[vars$a.inputBorderRadius]: refs.borderRadius,
|
5250
|
+
[vars$a.inputOutlineColor]: refs.outlineColor,
|
5251
|
+
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
5252
|
+
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
5253
|
+
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
5254
|
+
[vars$a.labelRequiredIndicator]: refs.requiredIndicator,
|
5255
|
+
[vars$a.inputValueTextColor]: refs.valueTextColor,
|
5256
|
+
[vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5257
|
+
[vars$a.inputBackgroundColor]: refs.backgroundColor,
|
5258
|
+
[vars$a.inputHorizontalPadding]: refs.horizontalPadding,
|
5259
|
+
[vars$a.inputHeight]: refs.inputHeight,
|
5260
|
+
[vars$a.inputDropdownButtonColor]: globalRefs$3.colors.surface.contrast,
|
5261
|
+
[vars$a.inputDropdownButtonCursor]: 'pointer',
|
5262
|
+
[vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5263
|
+
[vars$a.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
|
5244
5264
|
|
5245
5265
|
_readonly: {
|
5246
|
-
[vars$
|
5266
|
+
[vars$a.inputDropdownButtonCursor]: 'default',
|
5247
5267
|
},
|
5248
5268
|
|
5249
5269
|
// Overlay theme exposed via the component:
|
5250
|
-
[vars$
|
5251
|
-
[vars$
|
5252
|
-
[vars$
|
5253
|
-
[vars$
|
5270
|
+
[vars$a.overlayFontSize]: refs.fontSize,
|
5271
|
+
[vars$a.overlayFontFamily]: refs.fontFamily,
|
5272
|
+
[vars$a.overlayCursor]: 'pointer',
|
5273
|
+
[vars$a.overlayItemBoxShadow]: 'none',
|
5254
5274
|
|
5255
5275
|
// Overlay direct theme:
|
5256
|
-
[vars$
|
5257
|
-
[vars$
|
5276
|
+
[vars$a.overlay.minHeight]: '400px',
|
5277
|
+
[vars$a.overlay.margin]: '0',
|
5258
5278
|
};
|
5259
5279
|
|
5260
5280
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5261
5281
|
__proto__: null,
|
5262
5282
|
comboBox: comboBox,
|
5263
5283
|
default: comboBox,
|
5264
|
-
vars: vars$
|
5284
|
+
vars: vars$a
|
5265
5285
|
});
|
5266
5286
|
|
5267
5287
|
const observedAttributes$2 = ['src', 'alt'];
|
5268
5288
|
|
5269
|
-
const componentName$
|
5289
|
+
const componentName$d = getComponentName('image');
|
5270
5290
|
|
5271
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5291
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
|
5272
5292
|
class RawImage extends BaseClass$1 {
|
5273
5293
|
static get observedAttributes() {
|
5274
5294
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5308,14 +5328,14 @@ const ImageClass = compose(
|
|
5308
5328
|
draggableMixin
|
5309
5329
|
)(RawImage);
|
5310
5330
|
|
5311
|
-
const vars$
|
5331
|
+
const vars$9 = ImageClass.cssVarList;
|
5312
5332
|
|
5313
5333
|
const image = {};
|
5314
5334
|
|
5315
5335
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5316
5336
|
__proto__: null,
|
5317
5337
|
default: image,
|
5318
|
-
vars: vars$
|
5338
|
+
vars: vars$9
|
5319
5339
|
});
|
5320
5340
|
|
5321
5341
|
var CountryCodes = [
|
@@ -6531,16 +6551,16 @@ var CountryCodes = [
|
|
6531
6551
|
},
|
6532
6552
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
6533
6553
|
|
6534
|
-
const componentName$
|
6554
|
+
const componentName$c = getComponentName('phone-field-internal');
|
6535
6555
|
|
6536
|
-
createBaseInputClass({ componentName: componentName$
|
6556
|
+
createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
|
6537
6557
|
|
6538
6558
|
const textVars$1 = TextFieldClass.cssVarList;
|
6539
6559
|
const comboVars = ComboBoxClass.cssVarList;
|
6540
6560
|
|
6541
|
-
const componentName$
|
6561
|
+
const componentName$b = getComponentName('phone-field');
|
6542
6562
|
|
6543
|
-
const customMixin$
|
6563
|
+
const customMixin$4 = (superclass) =>
|
6544
6564
|
class PhoneFieldMixinClass extends superclass {
|
6545
6565
|
static get CountryCodes() {
|
6546
6566
|
return CountryCodes;
|
@@ -6552,15 +6572,15 @@ const customMixin$3 = (superclass) =>
|
|
6552
6572
|
const template = document.createElement('template');
|
6553
6573
|
|
6554
6574
|
template.innerHTML = `
|
6555
|
-
<${componentName$
|
6575
|
+
<${componentName$c}
|
6556
6576
|
tabindex="-1"
|
6557
6577
|
slot="input"
|
6558
|
-
></${componentName$
|
6578
|
+
></${componentName$c}>
|
6559
6579
|
`;
|
6560
6580
|
|
6561
6581
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6562
6582
|
|
6563
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6583
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
6564
6584
|
|
6565
6585
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6566
6586
|
includeAttrs: [
|
@@ -6580,7 +6600,7 @@ const customMixin$3 = (superclass) =>
|
|
6580
6600
|
};
|
6581
6601
|
|
6582
6602
|
const {
|
6583
|
-
host: host$
|
6603
|
+
host: host$5,
|
6584
6604
|
label: label$3,
|
6585
6605
|
requiredIndicator: requiredIndicator$3,
|
6586
6606
|
inputField: inputField$1,
|
@@ -6605,7 +6625,7 @@ const PhoneFieldClass = compose(
|
|
6605
6625
|
createStyleMixin({
|
6606
6626
|
mappings: {
|
6607
6627
|
fontSize: [
|
6608
|
-
host$
|
6628
|
+
host$5,
|
6609
6629
|
inputField$1,
|
6610
6630
|
{
|
6611
6631
|
selector: TextFieldClass.componentName,
|
@@ -6626,7 +6646,7 @@ const PhoneFieldClass = compose(
|
|
6626
6646
|
},
|
6627
6647
|
],
|
6628
6648
|
hostWidth: [
|
6629
|
-
{ ...host$
|
6649
|
+
{ ...host$5, property: 'width' },
|
6630
6650
|
{ ...phoneInput$1, property: 'width' },
|
6631
6651
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
6632
6652
|
],
|
@@ -6679,7 +6699,7 @@ const PhoneFieldClass = compose(
|
|
6679
6699
|
}),
|
6680
6700
|
draggableMixin,
|
6681
6701
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6682
|
-
customMixin$
|
6702
|
+
customMixin$4
|
6683
6703
|
)(
|
6684
6704
|
createProxy({
|
6685
6705
|
slots: [],
|
@@ -6755,32 +6775,32 @@ const PhoneFieldClass = compose(
|
|
6755
6775
|
}
|
6756
6776
|
`,
|
6757
6777
|
excludeAttrsSync: ['tabindex'],
|
6758
|
-
componentName: componentName$
|
6778
|
+
componentName: componentName$b,
|
6759
6779
|
})
|
6760
6780
|
);
|
6761
6781
|
|
6762
|
-
const vars$
|
6782
|
+
const vars$8 = PhoneFieldClass.cssVarList;
|
6763
6783
|
|
6764
6784
|
const phoneField = {
|
6765
|
-
[vars$
|
6766
|
-
[vars$
|
6767
|
-
[vars$
|
6768
|
-
[vars$
|
6769
|
-
[vars$
|
6770
|
-
[vars$
|
6771
|
-
[vars$
|
6772
|
-
[vars$
|
6773
|
-
[vars$
|
6774
|
-
[vars$
|
6775
|
-
[vars$
|
6776
|
-
[vars$
|
6777
|
-
[vars$
|
6778
|
-
[vars$
|
6779
|
-
[vars$
|
6780
|
-
[vars$
|
6781
|
-
[vars$
|
6782
|
-
[vars$
|
6783
|
-
[vars$
|
6785
|
+
[vars$8.hostWidth]: refs.width,
|
6786
|
+
[vars$8.fontSize]: refs.fontSize,
|
6787
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
6788
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
6789
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
6790
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
6791
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
6792
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6793
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
6794
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
6795
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
6796
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
6797
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
6798
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
6799
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
6800
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
6801
|
+
[vars$8.phoneInputWidth]: refs.minWidth,
|
6802
|
+
[vars$8.countryCodeInputWidth]: '5em',
|
6803
|
+
[vars$8.countryCodeDropdownWidth]: '20em',
|
6784
6804
|
|
6785
6805
|
// '@overlay': {
|
6786
6806
|
// overlayItemBackgroundColor: 'red'
|
@@ -6790,18 +6810,18 @@ const phoneField = {
|
|
6790
6810
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
6791
6811
|
__proto__: null,
|
6792
6812
|
default: phoneField,
|
6793
|
-
vars: vars$
|
6813
|
+
vars: vars$8
|
6794
6814
|
});
|
6795
6815
|
|
6796
|
-
const componentName$
|
6816
|
+
const componentName$a = getComponentName('phone-field-internal-input-box');
|
6797
6817
|
|
6798
|
-
createBaseInputClass({ componentName: componentName$
|
6818
|
+
createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
|
6799
6819
|
|
6800
6820
|
const textVars = TextFieldClass.cssVarList;
|
6801
6821
|
|
6802
|
-
const componentName$
|
6822
|
+
const componentName$9 = getComponentName('phone-input-box-field');
|
6803
6823
|
|
6804
|
-
const customMixin$
|
6824
|
+
const customMixin$3 = (superclass) =>
|
6805
6825
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
6806
6826
|
static get CountryCodes() {
|
6807
6827
|
return CountryCodes;
|
@@ -6813,15 +6833,15 @@ const customMixin$2 = (superclass) =>
|
|
6813
6833
|
const template = document.createElement('template');
|
6814
6834
|
|
6815
6835
|
template.innerHTML = `
|
6816
|
-
<${componentName$
|
6836
|
+
<${componentName$a}
|
6817
6837
|
tabindex="-1"
|
6818
6838
|
slot="input"
|
6819
|
-
></${componentName$
|
6839
|
+
></${componentName$a}>
|
6820
6840
|
`;
|
6821
6841
|
|
6822
6842
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6823
6843
|
|
6824
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6844
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
6825
6845
|
|
6826
6846
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6827
6847
|
includeAttrs: [
|
@@ -6838,7 +6858,7 @@ const customMixin$2 = (superclass) =>
|
|
6838
6858
|
}
|
6839
6859
|
};
|
6840
6860
|
|
6841
|
-
const { host: host$
|
6861
|
+
const { host: host$4, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
6842
6862
|
host: { selector: () => ':host' },
|
6843
6863
|
label: { selector: '::part(label)' },
|
6844
6864
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6852,7 +6872,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
6852
6872
|
createStyleMixin({
|
6853
6873
|
mappings: {
|
6854
6874
|
fontSize: [
|
6855
|
-
host$
|
6875
|
+
host$4,
|
6856
6876
|
inputField,
|
6857
6877
|
{
|
6858
6878
|
selector: TextFieldClass.componentName,
|
@@ -6860,8 +6880,8 @@ const PhoneFieldInputBoxClass = compose(
|
|
6860
6880
|
},
|
6861
6881
|
],
|
6862
6882
|
fontFamily: [label$2, errorMessage$2, helperText$1],
|
6863
|
-
hostWidth: { ...host$
|
6864
|
-
hostMinWidth: { ...host$
|
6883
|
+
hostWidth: { ...host$4, property: 'width' },
|
6884
|
+
hostMinWidth: { ...host$4, property: 'min-width' },
|
6865
6885
|
|
6866
6886
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
6867
6887
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
@@ -6887,7 +6907,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
6887
6907
|
}),
|
6888
6908
|
draggableMixin,
|
6889
6909
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6890
|
-
customMixin$
|
6910
|
+
customMixin$3
|
6891
6911
|
)(
|
6892
6912
|
createProxy({
|
6893
6913
|
slots: [],
|
@@ -6953,46 +6973,46 @@ const PhoneFieldInputBoxClass = compose(
|
|
6953
6973
|
}
|
6954
6974
|
`,
|
6955
6975
|
excludeAttrsSync: ['tabindex'],
|
6956
|
-
componentName: componentName$
|
6976
|
+
componentName: componentName$9,
|
6957
6977
|
})
|
6958
6978
|
);
|
6959
6979
|
|
6960
|
-
const vars$
|
6980
|
+
const vars$7 = PhoneFieldInputBoxClass.cssVarList;
|
6961
6981
|
|
6962
6982
|
const phoneInputBoxField = {
|
6963
|
-
[vars$
|
6964
|
-
[vars$
|
6965
|
-
[vars$
|
6966
|
-
[vars$
|
6967
|
-
[vars$
|
6968
|
-
[vars$
|
6969
|
-
[vars$
|
6970
|
-
[vars$
|
6971
|
-
[vars$
|
6972
|
-
[vars$
|
6973
|
-
[vars$
|
6974
|
-
[vars$
|
6975
|
-
[vars$
|
6976
|
-
[vars$
|
6977
|
-
[vars$
|
6978
|
-
[vars$
|
6979
|
-
[vars$
|
6983
|
+
[vars$7.hostWidth]: '16em',
|
6984
|
+
[vars$7.hostMinWidth]: refs.minWidth,
|
6985
|
+
[vars$7.fontSize]: refs.fontSize,
|
6986
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
6987
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
6988
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
6989
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
6990
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
6991
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6992
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
6993
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
6994
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
6995
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
6996
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
6997
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
6998
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
6999
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
6980
7000
|
_fullWidth: {
|
6981
|
-
[vars$
|
7001
|
+
[vars$7.hostWidth]: refs.width,
|
6982
7002
|
},
|
6983
7003
|
};
|
6984
7004
|
|
6985
7005
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
6986
7006
|
__proto__: null,
|
6987
7007
|
default: phoneInputBoxField,
|
6988
|
-
vars: vars$
|
7008
|
+
vars: vars$7
|
6989
7009
|
});
|
6990
7010
|
|
6991
|
-
const componentName$
|
7011
|
+
const componentName$8 = getComponentName('new-password-internal');
|
6992
7012
|
|
6993
|
-
const componentName$
|
7013
|
+
const componentName$7 = getComponentName('new-password');
|
6994
7014
|
|
6995
|
-
const customMixin$
|
7015
|
+
const customMixin$2 = (superclass) =>
|
6996
7016
|
class NewPasswordMixinClass extends superclass {
|
6997
7017
|
init() {
|
6998
7018
|
super.init?.();
|
@@ -7000,16 +7020,16 @@ const customMixin$1 = (superclass) =>
|
|
7000
7020
|
const template = document.createElement('template');
|
7001
7021
|
|
7002
7022
|
template.innerHTML = `
|
7003
|
-
<${componentName$
|
7023
|
+
<${componentName$8}
|
7004
7024
|
name="new-password"
|
7005
7025
|
tabindex="-1"
|
7006
7026
|
slot="input"
|
7007
|
-
></${componentName$
|
7027
|
+
></${componentName$8}>
|
7008
7028
|
`;
|
7009
7029
|
|
7010
7030
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7011
7031
|
|
7012
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7032
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
7013
7033
|
|
7014
7034
|
forwardAttrs(this, this.inputElement, {
|
7015
7035
|
includeAttrs: [
|
@@ -7030,7 +7050,7 @@ const customMixin$1 = (superclass) =>
|
|
7030
7050
|
}
|
7031
7051
|
};
|
7032
7052
|
|
7033
|
-
const { host: host$
|
7053
|
+
const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
7034
7054
|
host: { selector: () => ':host' },
|
7035
7055
|
label: { selector: '::part(label)' },
|
7036
7056
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -7042,7 +7062,7 @@ const NewPasswordClass = compose(
|
|
7042
7062
|
createStyleMixin({
|
7043
7063
|
mappings: {
|
7044
7064
|
fontSize: [
|
7045
|
-
host$
|
7065
|
+
host$3,
|
7046
7066
|
{},
|
7047
7067
|
{
|
7048
7068
|
selector: PasswordClass.componentName,
|
@@ -7051,15 +7071,15 @@ const NewPasswordClass = compose(
|
|
7051
7071
|
],
|
7052
7072
|
fontFamily: [label$1, errorMessage$1, helperText],
|
7053
7073
|
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
7054
|
-
hostWidth: { ...host$
|
7055
|
-
hostMinWidth: { ...host$
|
7056
|
-
inputsRequiredIndicator: { ...host$
|
7074
|
+
hostWidth: { ...host$3, property: 'width' },
|
7075
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
7076
|
+
inputsRequiredIndicator: { ...host$3, property: 'content' },
|
7057
7077
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
7058
7078
|
},
|
7059
7079
|
}),
|
7060
7080
|
draggableMixin,
|
7061
7081
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
7062
|
-
customMixin$
|
7082
|
+
customMixin$2
|
7063
7083
|
)(
|
7064
7084
|
createProxy({
|
7065
7085
|
slots: [],
|
@@ -7108,32 +7128,32 @@ const NewPasswordClass = compose(
|
|
7108
7128
|
},
|
7109
7129
|
`,
|
7110
7130
|
excludeAttrsSync: ['tabindex'],
|
7111
|
-
componentName: componentName$
|
7131
|
+
componentName: componentName$7,
|
7112
7132
|
})
|
7113
7133
|
);
|
7114
7134
|
|
7115
|
-
const vars$
|
7135
|
+
const vars$6 = NewPasswordClass.cssVarList;
|
7116
7136
|
|
7117
7137
|
const newPassword = {
|
7118
|
-
[vars$
|
7119
|
-
[vars$
|
7120
|
-
[vars$
|
7121
|
-
[vars$
|
7122
|
-
[vars$
|
7123
|
-
[vars$
|
7138
|
+
[vars$6.hostWidth]: refs.width,
|
7139
|
+
[vars$6.hostMinWidth]: refs.minWidth,
|
7140
|
+
[vars$6.fontSize]: refs.fontSize,
|
7141
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
7142
|
+
[vars$6.spaceBetweenInputs]: '1em',
|
7143
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
7124
7144
|
|
7125
7145
|
_required: {
|
7126
7146
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7127
7147
|
// That's why we fake the required indicator on each input.
|
7128
7148
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7129
|
-
[vars$
|
7149
|
+
[vars$6.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7130
7150
|
},
|
7131
7151
|
};
|
7132
7152
|
|
7133
7153
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7134
7154
|
__proto__: null,
|
7135
7155
|
default: newPassword,
|
7136
|
-
vars: vars$
|
7156
|
+
vars: vars$6
|
7137
7157
|
});
|
7138
7158
|
|
7139
7159
|
const getFileBase64 = (fileObj) => {
|
@@ -7148,7 +7168,7 @@ const getFilename = (fileObj) => {
|
|
7148
7168
|
return fileObj.name.replace(/^.*\\/, '');
|
7149
7169
|
};
|
7150
7170
|
|
7151
|
-
const componentName$
|
7171
|
+
const componentName$6 = getComponentName('upload-file');
|
7152
7172
|
|
7153
7173
|
const observedAttributes$1 = [
|
7154
7174
|
'title',
|
@@ -7163,7 +7183,7 @@ const observedAttributes$1 = [
|
|
7163
7183
|
'icon',
|
7164
7184
|
];
|
7165
7185
|
|
7166
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7186
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: ':host > div' });
|
7167
7187
|
|
7168
7188
|
class RawUploadFile extends BaseInputClass {
|
7169
7189
|
static get observedAttributes() {
|
@@ -7334,7 +7354,7 @@ class RawUploadFile extends BaseInputClass {
|
|
7334
7354
|
}
|
7335
7355
|
}
|
7336
7356
|
|
7337
|
-
const { host: host$
|
7357
|
+
const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
7338
7358
|
host: { selector: () => ':host' },
|
7339
7359
|
wrapper: { selector: () => ':host > div' },
|
7340
7360
|
icon: { selector: () => '::slotted(*)' },
|
@@ -7353,8 +7373,8 @@ const UploadFileClass = compose(
|
|
7353
7373
|
borderWidth: {},
|
7354
7374
|
borderStyle: {},
|
7355
7375
|
borderRadius: {},
|
7356
|
-
hostHeight: { ...host$
|
7357
|
-
hostWidth: { ...host$
|
7376
|
+
hostHeight: { ...host$2, property: 'height' },
|
7377
|
+
hostWidth: { ...host$2, property: 'width' },
|
7358
7378
|
hostPadding: { property: 'padding' },
|
7359
7379
|
gap: { ...wrapper },
|
7360
7380
|
lineHeight: { ...wrapper, property: 'line-height' },
|
@@ -7373,76 +7393,76 @@ const UploadFileClass = compose(
|
|
7373
7393
|
componentNameValidationMixin
|
7374
7394
|
)(RawUploadFile);
|
7375
7395
|
|
7376
|
-
const vars$
|
7396
|
+
const vars$5 = UploadFileClass.cssVarList;
|
7377
7397
|
|
7378
7398
|
const uploadFile = {
|
7379
|
-
[vars$
|
7380
|
-
[vars$
|
7399
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
7400
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
7381
7401
|
|
7382
|
-
[vars$
|
7402
|
+
[vars$5.iconSize]: '2em',
|
7383
7403
|
|
7384
|
-
[vars$
|
7385
|
-
[vars$
|
7404
|
+
[vars$5.hostPadding]: '0.75em',
|
7405
|
+
[vars$5.gap]: '0.5em',
|
7386
7406
|
|
7387
|
-
[vars$
|
7388
|
-
[vars$
|
7389
|
-
[vars$
|
7407
|
+
[vars$5.fontSize]: '16px',
|
7408
|
+
[vars$5.titleFontWeight]: '500',
|
7409
|
+
[vars$5.lineHeight]: '1em',
|
7390
7410
|
|
7391
|
-
[vars$
|
7392
|
-
[vars$
|
7393
|
-
[vars$
|
7394
|
-
[vars$
|
7411
|
+
[vars$5.borderWidth]: refs.borderWidth,
|
7412
|
+
[vars$5.borderColor]: refs.borderColor,
|
7413
|
+
[vars$5.borderRadius]: refs.borderRadius,
|
7414
|
+
[vars$5.borderStyle]: 'dashed',
|
7395
7415
|
|
7396
7416
|
_required: {
|
7397
|
-
[vars$
|
7417
|
+
[vars$5.requiredIndicator]: refs.requiredIndicator,
|
7398
7418
|
},
|
7399
7419
|
|
7400
7420
|
size: {
|
7401
7421
|
xs: {
|
7402
|
-
[vars$
|
7403
|
-
[vars$
|
7404
|
-
[vars$
|
7405
|
-
[vars$
|
7406
|
-
[vars$
|
7422
|
+
[vars$5.hostHeight]: '196px',
|
7423
|
+
[vars$5.hostWidth]: '200px',
|
7424
|
+
[vars$5.titleFontSize]: '0.875em',
|
7425
|
+
[vars$5.descriptionFontSize]: '0.875em',
|
7426
|
+
[vars$5.lineHeight]: '1.25em',
|
7407
7427
|
},
|
7408
7428
|
sm: {
|
7409
|
-
[vars$
|
7410
|
-
[vars$
|
7411
|
-
[vars$
|
7412
|
-
[vars$
|
7413
|
-
[vars$
|
7429
|
+
[vars$5.hostHeight]: '216px',
|
7430
|
+
[vars$5.hostWidth]: '230px',
|
7431
|
+
[vars$5.titleFontSize]: '1em',
|
7432
|
+
[vars$5.descriptionFontSize]: '0.875em',
|
7433
|
+
[vars$5.lineHeight]: '1.25em',
|
7414
7434
|
},
|
7415
7435
|
md: {
|
7416
|
-
[vars$
|
7417
|
-
[vars$
|
7418
|
-
[vars$
|
7419
|
-
[vars$
|
7420
|
-
[vars$
|
7436
|
+
[vars$5.hostHeight]: '256px',
|
7437
|
+
[vars$5.hostWidth]: '312px',
|
7438
|
+
[vars$5.titleFontSize]: '1.125em',
|
7439
|
+
[vars$5.descriptionFontSize]: '1em',
|
7440
|
+
[vars$5.lineHeight]: '1.5em',
|
7421
7441
|
},
|
7422
7442
|
lg: {
|
7423
|
-
[vars$
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7426
|
-
[vars$
|
7427
|
-
[vars$
|
7443
|
+
[vars$5.hostHeight]: '280px',
|
7444
|
+
[vars$5.hostWidth]: '336px',
|
7445
|
+
[vars$5.titleFontSize]: '1.125em',
|
7446
|
+
[vars$5.descriptionFontSize]: '1.125em',
|
7447
|
+
[vars$5.lineHeight]: '1.75em',
|
7428
7448
|
},
|
7429
7449
|
},
|
7430
7450
|
|
7431
7451
|
_fullWidth: {
|
7432
|
-
[vars$
|
7452
|
+
[vars$5.hostWidth]: refs.width,
|
7433
7453
|
},
|
7434
7454
|
};
|
7435
7455
|
|
7436
7456
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7437
7457
|
__proto__: null,
|
7438
7458
|
default: uploadFile,
|
7439
|
-
vars: vars$
|
7459
|
+
vars: vars$5
|
7440
7460
|
});
|
7441
7461
|
|
7442
|
-
const componentName$
|
7462
|
+
const componentName$5 = getComponentName('button-selection-group-item');
|
7443
7463
|
|
7444
7464
|
class RawSelectItem extends createBaseClass({
|
7445
|
-
componentName: componentName$
|
7465
|
+
componentName: componentName$5,
|
7446
7466
|
baseSelector: ':host > descope-button',
|
7447
7467
|
}) {
|
7448
7468
|
get size() {
|
@@ -7536,38 +7556,38 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7536
7556
|
componentNameValidationMixin
|
7537
7557
|
)(RawSelectItem);
|
7538
7558
|
|
7539
|
-
const globalRefs$
|
7559
|
+
const globalRefs$2 = getThemeRefs(globals);
|
7540
7560
|
|
7541
|
-
const vars$
|
7561
|
+
const vars$4 = ButtonSelectionGroupItemClass.cssVarList;
|
7542
7562
|
|
7543
7563
|
const buttonSelectionGroupItem = {
|
7544
|
-
[vars$
|
7545
|
-
[vars$
|
7546
|
-
[vars$
|
7547
|
-
[vars$
|
7548
|
-
[vars$
|
7564
|
+
[vars$4.backgroundColor]: globalRefs$2.colors.surface.light,
|
7565
|
+
[vars$4.labelTextColor]: globalRefs$2.colors.surface.contrast,
|
7566
|
+
[vars$4.borderColor]: globalRefs$2.colors.surface.main,
|
7567
|
+
[vars$4.borderStyle]: 'solid',
|
7568
|
+
[vars$4.borderRadius]: globalRefs$2.radius.sm,
|
7549
7569
|
|
7550
7570
|
_hover: {
|
7551
|
-
[vars$
|
7571
|
+
[vars$4.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7552
7572
|
},
|
7553
7573
|
|
7554
7574
|
_selected: {
|
7555
|
-
[vars$
|
7556
|
-
[vars$
|
7557
|
-
[vars$
|
7575
|
+
[vars$4.borderColor]: globalRefs$2.colors.surface.contrast,
|
7576
|
+
[vars$4.backgroundColor]: globalRefs$2.colors.surface.contrast,
|
7577
|
+
[vars$4.labelTextColor]: globalRefs$2.colors.surface.light,
|
7558
7578
|
},
|
7559
7579
|
};
|
7560
7580
|
|
7561
7581
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7562
7582
|
__proto__: null,
|
7563
7583
|
default: buttonSelectionGroupItem,
|
7564
|
-
vars: vars$
|
7584
|
+
vars: vars$4
|
7565
7585
|
});
|
7566
7586
|
|
7567
|
-
const componentName$
|
7587
|
+
const componentName$4 = getComponentName('button-selection-group-internal');
|
7568
7588
|
|
7569
7589
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
7570
|
-
componentName: componentName$
|
7590
|
+
componentName: componentName$4,
|
7571
7591
|
baseSelector: 'slot',
|
7572
7592
|
}) {
|
7573
7593
|
constructor() {
|
@@ -7704,9 +7724,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7704
7724
|
}
|
7705
7725
|
}
|
7706
7726
|
|
7707
|
-
const componentName$
|
7727
|
+
const componentName$3 = getComponentName('button-selection-group');
|
7708
7728
|
|
7709
|
-
const customMixin = (superclass) =>
|
7729
|
+
const customMixin$1 = (superclass) =>
|
7710
7730
|
class ButtonSelectionGroupMixinClass extends superclass {
|
7711
7731
|
// eslint-disable-next-line class-methods-use-this
|
7712
7732
|
#renderItem = ({ value, label }) =>
|
@@ -7779,18 +7799,18 @@ const customMixin = (superclass) =>
|
|
7779
7799
|
const template = document.createElement('template');
|
7780
7800
|
|
7781
7801
|
template.innerHTML = `
|
7782
|
-
<${componentName$
|
7802
|
+
<${componentName$4}
|
7783
7803
|
name="button-selection-group"
|
7784
7804
|
slot="input"
|
7785
7805
|
tabindex="-1"
|
7786
7806
|
>
|
7787
7807
|
<slot></slot>
|
7788
|
-
</${componentName$
|
7808
|
+
</${componentName$4}>
|
7789
7809
|
`;
|
7790
7810
|
|
7791
7811
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7792
7812
|
|
7793
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7813
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$4);
|
7794
7814
|
|
7795
7815
|
forwardAttrs(this, this.inputElement, {
|
7796
7816
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -7809,7 +7829,7 @@ const customMixin = (superclass) =>
|
|
7809
7829
|
}
|
7810
7830
|
};
|
7811
7831
|
|
7812
|
-
const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
7832
|
+
const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage } = {
|
7813
7833
|
host: { selector: () => ':host' },
|
7814
7834
|
label: { selector: '::part(label)' },
|
7815
7835
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -7820,8 +7840,8 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
|
7820
7840
|
const ButtonSelectionGroupClass = compose(
|
7821
7841
|
createStyleMixin({
|
7822
7842
|
mappings: {
|
7823
|
-
hostWidth: { ...host, property: 'width' },
|
7824
|
-
fontFamily: host,
|
7843
|
+
hostWidth: { ...host$1, property: 'width' },
|
7844
|
+
fontFamily: host$1,
|
7825
7845
|
labelTextColor: [
|
7826
7846
|
{ ...label, property: 'color' },
|
7827
7847
|
{ ...requiredIndicator, property: 'color' },
|
@@ -7834,7 +7854,7 @@ const ButtonSelectionGroupClass = compose(
|
|
7834
7854
|
draggableMixin,
|
7835
7855
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
7836
7856
|
componentNameValidationMixin,
|
7837
|
-
customMixin
|
7857
|
+
customMixin$1
|
7838
7858
|
)(
|
7839
7859
|
createProxy({
|
7840
7860
|
slots: [],
|
@@ -7893,25 +7913,408 @@ const ButtonSelectionGroupClass = compose(
|
|
7893
7913
|
${resetInputCursor('vaadin-text-field')}
|
7894
7914
|
`,
|
7895
7915
|
excludeAttrsSync: ['tabindex'],
|
7896
|
-
componentName: componentName$
|
7916
|
+
componentName: componentName$3,
|
7897
7917
|
})
|
7898
7918
|
);
|
7899
7919
|
|
7900
|
-
const globalRefs = getThemeRefs(globals);
|
7901
|
-
const vars$
|
7920
|
+
const globalRefs$1 = getThemeRefs(globals);
|
7921
|
+
const vars$3 = ButtonSelectionGroupClass.cssVarList;
|
7902
7922
|
|
7903
7923
|
const buttonSelectionGroup = {
|
7904
|
-
[vars$
|
7905
|
-
[vars$
|
7906
|
-
[vars$
|
7907
|
-
[vars$
|
7908
|
-
[vars$
|
7909
|
-
[vars$
|
7924
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
7925
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
7926
|
+
[vars$3.labelRequiredIndicator]: refs.requiredIndicator,
|
7927
|
+
[vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
|
7928
|
+
[vars$3.itemsSpacing]: globalRefs$1.spacing.sm,
|
7929
|
+
[vars$3.hostWidth]: refs.width,
|
7910
7930
|
};
|
7911
7931
|
|
7912
7932
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
7913
7933
|
__proto__: null,
|
7914
7934
|
default: buttonSelectionGroup,
|
7935
|
+
vars: vars$3
|
7936
|
+
});
|
7937
|
+
|
7938
|
+
const componentName$2 = getComponentName('modal');
|
7939
|
+
|
7940
|
+
const customMixin = (superclass) =>
|
7941
|
+
class ModalMixinClass extends superclass {
|
7942
|
+
get opened() {
|
7943
|
+
return this.getAttribute('opened') === 'true';
|
7944
|
+
}
|
7945
|
+
|
7946
|
+
handleOpened() {
|
7947
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
7948
|
+
if (this.opened) {
|
7949
|
+
this.style.display = '';
|
7950
|
+
} else {
|
7951
|
+
this.style.display = 'none';
|
7952
|
+
}
|
7953
|
+
}
|
7954
|
+
|
7955
|
+
init() {
|
7956
|
+
super.init?.();
|
7957
|
+
this.style.display = 'none';
|
7958
|
+
|
7959
|
+
// vaadin-dialog might not be loaded in time
|
7960
|
+
// in order to make sure it's loaded before this block is running
|
7961
|
+
// we are wrapping it with setTimeout
|
7962
|
+
setTimeout(() => {
|
7963
|
+
// we want to sync descope-modal content through vaadin-dialog into the overlay
|
7964
|
+
// so we are adding a slot to the overlay, which allows us to forward the content from
|
7965
|
+
// vaadin-dialog to vaadin-dialog-overlay
|
7966
|
+
this.baseElement.shadowRoot
|
7967
|
+
.querySelector('vaadin-dialog-overlay')
|
7968
|
+
.appendChild(document.createElement('slot'));
|
7969
|
+
|
7970
|
+
this.#overrideOverlaySettings();
|
7971
|
+
|
7972
|
+
// we need to always open the modal in `opened=false`
|
7973
|
+
// to prevent it from rendering outside the dialog
|
7974
|
+
// first, we have to run `overrideOverlaySettings` to setup
|
7975
|
+
// the component.
|
7976
|
+
this.handleOpened();
|
7977
|
+
});
|
7978
|
+
}
|
7979
|
+
|
7980
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
7981
|
+
// we do not want that because it's difficult to style the overlay in this way
|
7982
|
+
// so we override it to open inside the shadow DOM
|
7983
|
+
#overrideOverlaySettings() {
|
7984
|
+
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
|
7985
|
+
|
7986
|
+
overlay._attachOverlay = () => {
|
7987
|
+
overlay.bringToFront();
|
7988
|
+
this.baseElement.setAttribute('style', 'display:flex!important;');
|
7989
|
+
};
|
7990
|
+
overlay._detachOverlay = () => {
|
7991
|
+
this.baseElement.style.display = 'none';
|
7992
|
+
};
|
7993
|
+
overlay._enterModalState = () => {};
|
7994
|
+
|
7995
|
+
overlay.close = () => false;
|
7996
|
+
}
|
7997
|
+
};
|
7998
|
+
|
7999
|
+
const ModalClass = compose(
|
8000
|
+
createStyleMixin({
|
8001
|
+
mappings: {
|
8002
|
+
overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
|
8003
|
+
overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
|
8004
|
+
overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
|
8005
|
+
},
|
8006
|
+
}),
|
8007
|
+
portalMixin({
|
8008
|
+
name: 'overlay',
|
8009
|
+
selector: '',
|
8010
|
+
mappings: {
|
8011
|
+
hostDisplay: {
|
8012
|
+
selector: () => ':host(.descope-modal)',
|
8013
|
+
property: 'display',
|
8014
|
+
important: true,
|
8015
|
+
},
|
8016
|
+
backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
|
8017
|
+
width: { selector: () => '::part(overlay)', property: 'width' },
|
8018
|
+
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8019
|
+
},
|
8020
|
+
forward: {
|
8021
|
+
include: false,
|
8022
|
+
attributes: ['opened'],
|
8023
|
+
},
|
8024
|
+
}),
|
8025
|
+
draggableMixin,
|
8026
|
+
componentNameValidationMixin,
|
8027
|
+
customMixin
|
8028
|
+
)(
|
8029
|
+
createProxy({
|
8030
|
+
slots: [''],
|
8031
|
+
wrappedEleName: 'vaadin-dialog',
|
8032
|
+
style: () => ``,
|
8033
|
+
excludeAttrsSync: ['tabindex', 'opened'],
|
8034
|
+
componentName: componentName$2,
|
8035
|
+
})
|
8036
|
+
);
|
8037
|
+
|
8038
|
+
const compVars = ModalClass.cssVarList;
|
8039
|
+
|
8040
|
+
const modal = {
|
8041
|
+
[compVars.hostWidth]: '400px',
|
8042
|
+
[compVars.hostHeight]: '400px',
|
8043
|
+
[compVars.overlayShadow]: 'none',
|
8044
|
+
[compVars.overlayWidth]: '700px',
|
8045
|
+
};
|
8046
|
+
|
8047
|
+
const vars$2 = {
|
8048
|
+
...compVars,
|
8049
|
+
};
|
8050
|
+
|
8051
|
+
var modal$1 = /*#__PURE__*/Object.freeze({
|
8052
|
+
__proto__: null,
|
8053
|
+
default: modal,
|
8054
|
+
vars: vars$2
|
8055
|
+
});
|
8056
|
+
|
8057
|
+
const isValidDataType = (data) => {
|
8058
|
+
const isValid = Array.isArray(data);
|
8059
|
+
if (!isValid) {
|
8060
|
+
// eslint-disable-next-line no-console
|
8061
|
+
console.error('data must be an array, received:', data);
|
8062
|
+
}
|
8063
|
+
|
8064
|
+
return isValid;
|
8065
|
+
};
|
8066
|
+
|
8067
|
+
const componentName$1 = getComponentName('grid');
|
8068
|
+
|
8069
|
+
const GridMixin = (superclass) =>
|
8070
|
+
class GridMixinClass extends superclass {
|
8071
|
+
#columns;
|
8072
|
+
|
8073
|
+
init() {
|
8074
|
+
super.init?.();
|
8075
|
+
this.handleColumns();
|
8076
|
+
this.forwardSelectedItemsChange();
|
8077
|
+
}
|
8078
|
+
|
8079
|
+
forwardSelectedItemsChange() {
|
8080
|
+
this.baseElement.addEventListener('selected-items-changed', (e) => {
|
8081
|
+
this.dispatchEvent(
|
8082
|
+
new CustomEvent('selected-items-changed', {
|
8083
|
+
bubbles: true,
|
8084
|
+
composed: true,
|
8085
|
+
detail: e.detail,
|
8086
|
+
})
|
8087
|
+
);
|
8088
|
+
});
|
8089
|
+
}
|
8090
|
+
|
8091
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
8092
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
8093
|
+
|
8094
|
+
if (attrName === 'columns') {
|
8095
|
+
this.setColumnsDataFromAttr();
|
8096
|
+
}
|
8097
|
+
}
|
8098
|
+
|
8099
|
+
handleColumns() {
|
8100
|
+
if (this.columnsAttr) {
|
8101
|
+
this.setColumnsDataFromAttr();
|
8102
|
+
} else if (this.children.length) {
|
8103
|
+
this.setColumnsFromChildren();
|
8104
|
+
}
|
8105
|
+
}
|
8106
|
+
|
8107
|
+
setColumnsFromChildren() {
|
8108
|
+
this.#columns = Array.from(this.children).map((child) => {
|
8109
|
+
return {
|
8110
|
+
path: child.getAttribute('path'),
|
8111
|
+
header: child.getAttribute('header'),
|
8112
|
+
type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
|
8113
|
+
|
8114
|
+
attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
|
8115
|
+
const attrVal = child.getAttribute(attrName);
|
8116
|
+
|
8117
|
+
if (attrVal) {
|
8118
|
+
acc[attrName] = attrVal;
|
8119
|
+
}
|
8120
|
+
|
8121
|
+
return acc;
|
8122
|
+
}, {}),
|
8123
|
+
};
|
8124
|
+
});
|
8125
|
+
}
|
8126
|
+
|
8127
|
+
get columnsAttr() {
|
8128
|
+
return this.getAttribute('columns');
|
8129
|
+
}
|
8130
|
+
|
8131
|
+
setColumnsDataFromAttr() {
|
8132
|
+
try {
|
8133
|
+
const data = JSON.parse(this.columnsAttr);
|
8134
|
+
if (isValidDataType(data)) {
|
8135
|
+
this.columns = data;
|
8136
|
+
}
|
8137
|
+
} catch (e) {
|
8138
|
+
// eslint-disable-next-line no-console
|
8139
|
+
console.error('could not parse data string from attribute "columns" -', e.message);
|
8140
|
+
}
|
8141
|
+
}
|
8142
|
+
|
8143
|
+
// eslint-disable-next-line class-methods-use-this
|
8144
|
+
#renderColumn = ({ path, header, type, attrs }) => {
|
8145
|
+
const colAttrs = Object.entries(attrs)
|
8146
|
+
.map(([key, value]) => `${key}="${value}"`)
|
8147
|
+
.join(' ');
|
8148
|
+
|
8149
|
+
const tagName = `descope-grid-${type}-column`;
|
8150
|
+
|
8151
|
+
return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
|
8152
|
+
};
|
8153
|
+
|
8154
|
+
get renderColumn() {
|
8155
|
+
return this.#renderColumn;
|
8156
|
+
}
|
8157
|
+
|
8158
|
+
set renderColumn(renderFn) {
|
8159
|
+
this.#renderColumn = renderFn;
|
8160
|
+
this.renderColumns();
|
8161
|
+
}
|
8162
|
+
|
8163
|
+
getColumnsTemplate() {
|
8164
|
+
return this.#columns?.reduce?.(
|
8165
|
+
(acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
|
8166
|
+
''
|
8167
|
+
);
|
8168
|
+
}
|
8169
|
+
|
8170
|
+
renderColumns() {
|
8171
|
+
const template = this.getColumnsTemplate();
|
8172
|
+
if (template) this.innerHTML = template;
|
8173
|
+
}
|
8174
|
+
|
8175
|
+
get grid() {
|
8176
|
+
return this.shadowRoot.querySelector('vaadin-grid');
|
8177
|
+
}
|
8178
|
+
|
8179
|
+
get data() {
|
8180
|
+
return this.grid.items;
|
8181
|
+
}
|
8182
|
+
|
8183
|
+
set data(data) {
|
8184
|
+
if (isValidDataType(data) && this.grid.items !== data) {
|
8185
|
+
this.grid.items = data;
|
8186
|
+
|
8187
|
+
if (this.grid.selectedItems) {
|
8188
|
+
const itemsIds = new Set(
|
8189
|
+
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
8190
|
+
);
|
8191
|
+
this.grid.selectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
8192
|
+
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
8193
|
+
);
|
8194
|
+
}
|
8195
|
+
}
|
8196
|
+
}
|
8197
|
+
|
8198
|
+
get columns() {
|
8199
|
+
return this.#columns;
|
8200
|
+
}
|
8201
|
+
|
8202
|
+
set columns(data) {
|
8203
|
+
this.#columns = data;
|
8204
|
+
this.renderColumns();
|
8205
|
+
}
|
8206
|
+
|
8207
|
+
get paths() {
|
8208
|
+
return this.columns.map((col) => col.path);
|
8209
|
+
}
|
8210
|
+
|
8211
|
+
get uniqueColumnId() {
|
8212
|
+
return this.getAttribute('unique-column-id');
|
8213
|
+
}
|
8214
|
+
};
|
8215
|
+
|
8216
|
+
const {
|
8217
|
+
host,
|
8218
|
+
headerRow,
|
8219
|
+
contentRow,
|
8220
|
+
firstRow,
|
8221
|
+
sortIndicators,
|
8222
|
+
activeSortIndicator,
|
8223
|
+
selectedRow,
|
8224
|
+
rowSeparator,
|
8225
|
+
resizeHandle,
|
8226
|
+
} = {
|
8227
|
+
host: { selector: () => 'vaadin-grid' },
|
8228
|
+
headerRow: { selector: () => '::part(header-cell)' },
|
8229
|
+
contentRow: { selector: () => '::part(cell)' },
|
8230
|
+
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
8231
|
+
selectedRow: { selector: () => '::part(selected-row-cell)' },
|
8232
|
+
sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
|
8233
|
+
activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
|
8234
|
+
rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
|
8235
|
+
resizeHandle: { selector: () => '::part(resize-handle)' },
|
8236
|
+
};
|
8237
|
+
|
8238
|
+
const GridClass = compose(
|
8239
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
8240
|
+
createStyleMixin({
|
8241
|
+
mappings: {
|
8242
|
+
hostWidth: { selector: () => ':host', property: 'width' },
|
8243
|
+
hostHeight: { selector: () => ':host', property: 'height' },
|
8244
|
+
hostMinHeight: { selector: () => ':host', property: 'min-height' },
|
8245
|
+
fontFamily: [{ ...headerRow }, { ...contentRow }],
|
8246
|
+
fontSize: [{ ...headerRow }, { ...contentRow }],
|
8247
|
+
fontWeight: { ...contentRow },
|
8248
|
+
valueTextColor: { ...contentRow, property: 'color' },
|
8249
|
+
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
8250
|
+
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
8251
|
+
inputBorderColor: { ...host, property: 'border-color' },
|
8252
|
+
inputBorderWidth: { ...host, property: 'border-width' },
|
8253
|
+
inputBorderStyle: { ...host, property: 'border-style' },
|
8254
|
+
inputBorderRadius: { ...host, property: 'border-radius' },
|
8255
|
+
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
8256
|
+
selectedTextColor: { ...selectedRow, property: 'color' },
|
8257
|
+
separatorColor: [
|
8258
|
+
{ ...firstRow, property: 'border-bottom-color' },
|
8259
|
+
{ ...rowSeparator, property: 'border-top-color' },
|
8260
|
+
],
|
8261
|
+
resizeHandleColor: { ...resizeHandle, property: 'background-color' },
|
8262
|
+
},
|
8263
|
+
}),
|
8264
|
+
draggableMixin,
|
8265
|
+
componentNameValidationMixin,
|
8266
|
+
GridMixin
|
8267
|
+
)(
|
8268
|
+
createProxy({
|
8269
|
+
slots: [''],
|
8270
|
+
wrappedEleName: 'vaadin-grid',
|
8271
|
+
style: () => `
|
8272
|
+
vaadin-grid {
|
8273
|
+
overflow: hidden;
|
8274
|
+
height: 100%;
|
8275
|
+
min-height: 300px;
|
8276
|
+
}
|
8277
|
+
`,
|
8278
|
+
excludeAttrsSync: ['columns', 'tabindex'],
|
8279
|
+
componentName: componentName$1,
|
8280
|
+
})
|
8281
|
+
);
|
8282
|
+
|
8283
|
+
const globalRefs = getThemeRefs(globals);
|
8284
|
+
const vars$1 = GridClass.cssVarList;
|
8285
|
+
|
8286
|
+
const grid = {
|
8287
|
+
[vars$1.hostWidth]: '100%',
|
8288
|
+
[vars$1.hostHeight]: '100%',
|
8289
|
+
[vars$1.hostMinHeight]: '400px',
|
8290
|
+
|
8291
|
+
[vars$1.fontSize]: refs.fontSize,
|
8292
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
8293
|
+
|
8294
|
+
[vars$1.sortIndicatorsColor]: globalRefs.colors.primary.main,
|
8295
|
+
[vars$1.activeSortIndicator]: globalRefs.colors.primary.main,
|
8296
|
+
[vars$1.resizeHandleColor]: globalRefs.colors.surface.main,
|
8297
|
+
|
8298
|
+
[vars$1.inputBorderWidth]: refs.borderWidth,
|
8299
|
+
[vars$1.inputBorderStyle]: refs.borderStyle,
|
8300
|
+
[vars$1.inputBorderRadius]: refs.borderRadius,
|
8301
|
+
[vars$1.inputBorderColor]: 'transparent',
|
8302
|
+
|
8303
|
+
[vars$1.separatorColor]: refs.borderColor,
|
8304
|
+
|
8305
|
+
[vars$1.valueTextColor]: globalRefs.colors.surface.contrast,
|
8306
|
+
[vars$1.selectedBackgroundColor]: globalRefs.colors.primary.main,
|
8307
|
+
[vars$1.selectedTextColor]: globalRefs.colors.primary.contrast,
|
8308
|
+
|
8309
|
+
_bordered: {
|
8310
|
+
[vars$1.inputBorderColor]: refs.borderColor,
|
8311
|
+
},
|
8312
|
+
};
|
8313
|
+
|
8314
|
+
var grid$1 = /*#__PURE__*/Object.freeze({
|
8315
|
+
__proto__: null,
|
8316
|
+
default: grid,
|
8317
|
+
grid: grid,
|
7915
8318
|
vars: vars$1
|
7916
8319
|
});
|
7917
8320
|
|
@@ -7942,6 +8345,8 @@ const components = {
|
|
7942
8345
|
uploadFile: uploadFile$1,
|
7943
8346
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
7944
8347
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8348
|
+
modal: modal$1,
|
8349
|
+
grid: grid$1,
|
7945
8350
|
};
|
7946
8351
|
|
7947
8352
|
const theme = Object.keys(components).reduce(
|
@@ -7954,7 +8359,7 @@ const vars = Object.keys(components).reduce(
|
|
7954
8359
|
);
|
7955
8360
|
|
7956
8361
|
const defaultTheme = { globals, components: theme };
|
7957
|
-
const themeVars = { globals: vars$
|
8362
|
+
const themeVars = { globals: vars$t, components: vars };
|
7958
8363
|
|
7959
8364
|
const componentName = getComponentName('recaptcha');
|
7960
8365
|
|
@@ -8125,6 +8530,7 @@ exports.LinkClass = LinkClass;
|
|
8125
8530
|
exports.LoaderLinearClass = LoaderLinearClass;
|
8126
8531
|
exports.LoaderRadialClass = LoaderRadialClass;
|
8127
8532
|
exports.LogoClass = LogoClass;
|
8533
|
+
exports.ModalClass = ModalClass;
|
8128
8534
|
exports.NewPasswordClass = NewPasswordClass;
|
8129
8535
|
exports.NumberFieldClass = NumberFieldClass;
|
8130
8536
|
exports.PasscodeClass = PasscodeClass;
|