@descope/web-components-ui 1.0.222 → 1.0.223
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +783 -642
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +771 -631
- 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/1932.js +310 -0
- package/dist/umd/1932.js.LICENSE.txt +5 -0
- package/dist/umd/1990.js +1 -1
- package/dist/umd/262.js +2 -0
- package/dist/umd/262.js.LICENSE.txt +5 -0
- package/dist/umd/3660.js +17 -0
- package/dist/umd/3660.js.LICENSE.txt +23 -0
- package/dist/umd/3952.js +123 -0
- package/dist/umd/{1883.js → 4273.js} +5 -5
- package/dist/umd/5345.js +94 -0
- package/dist/umd/5345.js.LICENSE.txt +11 -0
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6116.js +8 -8
- package/dist/umd/7056.js +1 -1
- package/dist/umd/7101.js +1 -1
- package/dist/umd/7196.js +360 -0
- package/dist/umd/{1852.js.LICENSE.txt → 7196.js.LICENSE.txt} +0 -12
- package/dist/umd/8725.js +2 -2
- package/dist/umd/9211.js +2 -2
- package/dist/umd/9437.js +1 -1
- package/dist/umd/9515.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +3 -2
- 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/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/index.js +2 -0
- package/src/theme/components/modal.js +16 -0
- package/dist/umd/1852.js +0 -375
- package/dist/umd/4767.js +0 -215
- /package/dist/umd/{4767.js.LICENSE.txt → 3952.js.LICENSE.txt} +0 -0
- /package/dist/umd/{1883.js.LICENSE.txt → 4273.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$s = 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$x = getComponentName('button');
|
2346
2366
|
|
2347
2367
|
const resetStyles = `
|
2348
2368
|
:host {
|
@@ -2439,7 +2459,7 @@ const ButtonClass = compose(
|
|
2439
2459
|
}
|
2440
2460
|
`,
|
2441
2461
|
excludeAttrsSync: ['tabindex'],
|
2442
|
-
componentName: componentName$
|
2462
|
+
componentName: componentName$x,
|
2443
2463
|
})
|
2444
2464
|
);
|
2445
2465
|
|
@@ -2477,7 +2497,7 @@ loadingIndicatorStyles = `
|
|
2477
2497
|
`;
|
2478
2498
|
|
2479
2499
|
const globalRefs$d = getThemeRefs(globals);
|
2480
|
-
const compVars$
|
2500
|
+
const compVars$4 = ButtonClass.cssVarList;
|
2481
2501
|
|
2482
2502
|
const mode = {
|
2483
2503
|
primary: globalRefs$d.colors.primary,
|
@@ -2487,51 +2507,51 @@ const mode = {
|
|
2487
2507
|
surface: globalRefs$d.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$x);
|
2491
2511
|
|
2492
2512
|
const button = {
|
2493
2513
|
...helperTheme$3,
|
2494
2514
|
|
2495
|
-
[compVars$
|
2515
|
+
[compVars$4.fontFamily]: globalRefs$d.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$d.radius.sm,
|
2522
|
+
[compVars$4.borderWidth]: globalRefs$d.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: {
|
@@ -2543,56 +2563,56 @@ const button = {
|
|
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$d.colors.surface.main,
|
2584
2604
|
},
|
2585
2605
|
};
|
2586
2606
|
|
2587
|
-
const vars$
|
2588
|
-
...compVars$
|
2607
|
+
const vars$r = {
|
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$r
|
2596
2616
|
});
|
2597
2617
|
|
2598
2618
|
const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
|
@@ -2750,11 +2770,11 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
2750
2770
|
${resetInputFieldUnderlayingBorder(name)}
|
2751
2771
|
`;
|
2752
2772
|
|
2753
|
-
const componentName$
|
2773
|
+
const componentName$w = 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,14 +2819,14 @@ const TextFieldClass = compose(
|
|
2799
2819
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2800
2820
|
`,
|
2801
2821
|
excludeAttrsSync: ['tabindex'],
|
2802
|
-
componentName: componentName$
|
2822
|
+
componentName: componentName$w,
|
2803
2823
|
})
|
2804
2824
|
);
|
2805
2825
|
|
2806
|
-
const componentName$
|
2826
|
+
const componentName$v = getComponentName('input-wrapper');
|
2807
2827
|
const globalRefs$c = getThemeRefs(globals);
|
2808
2828
|
|
2809
|
-
const [theme$1, refs, vars$
|
2829
|
+
const [theme$1, refs, vars$q] = createHelperVars(
|
2810
2830
|
{
|
2811
2831
|
labelTextColor: globalRefs$c.colors.surface.contrast,
|
2812
2832
|
valueTextColor: globalRefs$c.colors.surface.contrast,
|
@@ -2868,46 +2888,46 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
2868
2888
|
backgroundColor: globalRefs$c.colors.surface.main,
|
2869
2889
|
},
|
2870
2890
|
},
|
2871
|
-
componentName$
|
2891
|
+
componentName$v
|
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$q
|
2879
2899
|
});
|
2880
2900
|
|
2881
|
-
const vars$
|
2901
|
+
const vars$p = 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$p.hostWidth]: refs.width,
|
2905
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
2906
|
+
[vars$p.fontSize]: refs.fontSize,
|
2907
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
2908
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
2909
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
2910
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
2911
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
2912
|
+
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
2913
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
2914
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
2915
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
2916
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
2917
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
2918
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
2919
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
2920
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
2921
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
2922
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
2923
|
+
[vars$p.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$p
|
2911
2931
|
});
|
2912
2932
|
|
2913
2933
|
const passwordDraggableMixin = (superclass) =>
|
@@ -2944,7 +2964,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2944
2964
|
}
|
2945
2965
|
};
|
2946
2966
|
|
2947
|
-
const componentName$
|
2967
|
+
const componentName$u = getComponentName('password');
|
2948
2968
|
|
2949
2969
|
const {
|
2950
2970
|
host: host$d,
|
@@ -3073,44 +3093,44 @@ const PasswordClass = compose(
|
|
3073
3093
|
}
|
3074
3094
|
`,
|
3075
3095
|
excludeAttrsSync: ['tabindex'],
|
3076
|
-
componentName: componentName$
|
3096
|
+
componentName: componentName$u,
|
3077
3097
|
})
|
3078
3098
|
);
|
3079
3099
|
|
3080
3100
|
const globalRefs$b = getThemeRefs(globals);
|
3081
|
-
const vars$
|
3101
|
+
const vars$o = 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$o.hostWidth]: refs.width,
|
3105
|
+
[vars$o.fontSize]: refs.fontSize,
|
3106
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
3107
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
3108
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
3109
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
3110
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
3111
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
3112
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
3113
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
3114
|
+
[vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3115
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
3116
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
3117
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
3118
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
3119
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
3120
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
3121
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
3122
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
3123
|
+
[vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
|
3124
|
+
[vars$o.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$o
|
3111
3131
|
});
|
3112
3132
|
|
3113
|
-
const componentName$
|
3133
|
+
const componentName$t = 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$t,
|
3139
3159
|
})
|
3140
3160
|
);
|
3141
3161
|
|
3142
|
-
const vars$
|
3162
|
+
const vars$n = 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$n.hostWidth]: refs.width,
|
3166
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
3167
|
+
[vars$n.fontSize]: refs.fontSize,
|
3168
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
3169
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
3170
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
3171
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
3172
|
+
[vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
|
3173
|
+
[vars$n.inputBorderWidth]: refs.borderWidth,
|
3174
|
+
[vars$n.inputBorderStyle]: refs.borderStyle,
|
3175
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
3176
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
3177
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
3178
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
3179
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
3180
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
3181
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
3182
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
3183
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
3184
|
+
[vars$n.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$n
|
3171
3191
|
});
|
3172
3192
|
|
3173
|
-
const componentName$
|
3193
|
+
const componentName$s = 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,42 +3224,42 @@ const EmailFieldClass = compose(
|
|
3204
3224
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3205
3225
|
`,
|
3206
3226
|
excludeAttrsSync: ['tabindex'],
|
3207
|
-
componentName: componentName$
|
3227
|
+
componentName: componentName$s,
|
3208
3228
|
})
|
3209
3229
|
);
|
3210
3230
|
|
3211
|
-
const vars$
|
3231
|
+
const vars$m = 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$m.hostWidth]: refs.width,
|
3235
|
+
[vars$m.hostMinWidth]: refs.minWidth,
|
3236
|
+
[vars$m.fontSize]: refs.fontSize,
|
3237
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
3238
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
3239
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
3240
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
3241
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
3242
|
+
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
3243
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
3244
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
3245
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
3246
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
3247
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
3248
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
3249
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
3250
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
3251
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
3252
|
+
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
3253
|
+
[vars$m.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$m
|
3240
3260
|
});
|
3241
3261
|
|
3242
|
-
const componentName$
|
3262
|
+
const componentName$r = getComponentName('text-area');
|
3243
3263
|
|
3244
3264
|
const {
|
3245
3265
|
host: host$c,
|
@@ -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$r,
|
3316
3336
|
})
|
3317
3337
|
);
|
3318
3338
|
|
3319
3339
|
const globalRefs$a = getThemeRefs(globals);
|
3320
|
-
const vars$
|
3340
|
+
const vars$l = 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$l.hostWidth]: refs.width,
|
3344
|
+
[vars$l.hostMinWidth]: refs.minWidth,
|
3345
|
+
[vars$l.fontSize]: refs.fontSize,
|
3346
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
3347
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
3348
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
3349
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
3350
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
3351
|
+
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
3352
|
+
[vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3353
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
3354
|
+
[vars$l.inputBorderWidth]: refs.borderWidth,
|
3355
|
+
[vars$l.inputBorderStyle]: refs.borderStyle,
|
3356
|
+
[vars$l.inputBorderColor]: refs.borderColor,
|
3357
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
3358
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
3359
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
3360
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
3361
|
+
[vars$l.inputResizeType]: 'vertical',
|
3362
|
+
[vars$l.inputMinHeight]: '5em',
|
3343
3363
|
|
3344
3364
|
_disabled: {
|
3345
|
-
[vars$
|
3365
|
+
[vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
3346
3366
|
},
|
3347
3367
|
|
3348
3368
|
_readonly: {
|
3349
|
-
[vars$
|
3369
|
+
[vars$l.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$l
|
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$q = getComponentName('boolean-field-internal');
|
3368
3388
|
|
3369
|
-
createBaseInputClass({ componentName: componentName$
|
3389
|
+
createBaseInputClass({ componentName: componentName$q, 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$q}
|
3379
3399
|
tabindex="-1"
|
3380
3400
|
slot="input"
|
3381
|
-
></${componentName$
|
3401
|
+
></${componentName$q}>
|
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$q);
|
3386
3406
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3387
3407
|
|
3388
3408
|
forwardAttrs(this, this.inputElement, {
|
@@ -3444,7 +3464,7 @@ descope-boolean-field-internal {
|
|
3444
3464
|
}
|
3445
3465
|
`;
|
3446
3466
|
|
3447
|
-
const componentName$
|
3467
|
+
const componentName$p = getComponentName('checkbox');
|
3448
3468
|
|
3449
3469
|
const {
|
3450
3470
|
host: host$b,
|
@@ -3541,50 +3561,50 @@ const CheckboxClass = compose(
|
|
3541
3561
|
}
|
3542
3562
|
`,
|
3543
3563
|
excludeAttrsSync: ['label', 'tabindex'],
|
3544
|
-
componentName: componentName$
|
3564
|
+
componentName: componentName$p,
|
3545
3565
|
})
|
3546
3566
|
);
|
3547
3567
|
|
3548
|
-
const vars$
|
3568
|
+
const vars$k = 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$k.hostWidth]: refs.width,
|
3573
|
+
[vars$k.fontSize]: refs.fontSize,
|
3574
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
3575
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
3576
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
3577
|
+
[vars$k.labelFontWeight]: '400',
|
3578
|
+
[vars$k.labelLineHeight]: checkboxSize,
|
3579
|
+
[vars$k.labelSpacing]: '1em',
|
3580
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
3581
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
3582
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
3583
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
3584
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
3585
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
3586
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
3587
|
+
[vars$k.inputBorderWidth]: refs.borderWidth,
|
3588
|
+
[vars$k.inputBorderStyle]: refs.borderStyle,
|
3589
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
3590
|
+
[vars$k.inputSize]: checkboxSize,
|
3571
3591
|
|
3572
3592
|
_checked: {
|
3573
|
-
[vars$
|
3593
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
3574
3594
|
},
|
3575
3595
|
|
3576
3596
|
_disabled: {
|
3577
|
-
[vars$
|
3597
|
+
[vars$k.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$k
|
3585
3605
|
});
|
3586
3606
|
|
3587
|
-
const componentName$
|
3607
|
+
const componentName$o = getComponentName('switch-toggle');
|
3588
3608
|
|
3589
3609
|
const {
|
3590
3610
|
host: host$a,
|
@@ -3703,7 +3723,7 @@ const SwitchToggleClass = compose(
|
|
3703
3723
|
}
|
3704
3724
|
`,
|
3705
3725
|
excludeAttrsSync: ['label', 'tabindex'],
|
3706
|
-
componentName: componentName$
|
3726
|
+
componentName: componentName$o,
|
3707
3727
|
})
|
3708
3728
|
);
|
3709
3729
|
|
@@ -3711,74 +3731,74 @@ const knobMargin = '2px';
|
|
3711
3731
|
const checkboxHeight = '1.25em';
|
3712
3732
|
|
3713
3733
|
const globalRefs$9 = getThemeRefs(globals);
|
3714
|
-
const vars$
|
3734
|
+
const vars$j = 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$j.hostWidth]: refs.width,
|
3738
|
+
[vars$j.fontSize]: refs.fontSize,
|
3739
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
3740
|
+
|
3741
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
3742
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
3743
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
3744
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
3745
|
+
|
3746
|
+
[vars$j.trackBorderStyle]: refs.borderStyle,
|
3747
|
+
[vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3748
|
+
[vars$j.trackBorderColor]: refs.borderColor,
|
3749
|
+
[vars$j.trackBackgroundColor]: 'none',
|
3750
|
+
[vars$j.trackBorderRadius]: globalRefs$9.radius.md,
|
3751
|
+
[vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3752
|
+
[vars$j.trackHeight]: checkboxHeight,
|
3753
|
+
|
3754
|
+
[vars$j.knobSize]: `calc(1em - ${knobMargin})`,
|
3755
|
+
[vars$j.knobRadius]: '50%',
|
3756
|
+
[vars$j.knobTopOffset]: '1px',
|
3757
|
+
[vars$j.knobLeftOffset]: knobMargin,
|
3758
|
+
[vars$j.knobColor]: refs.valueTextColor,
|
3759
|
+
[vars$j.knobTransitionDuration]: '0.3s',
|
3760
|
+
|
3761
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
3762
|
+
[vars$j.labelFontWeight]: '400',
|
3763
|
+
[vars$j.labelLineHeight]: '1.35em',
|
3764
|
+
[vars$j.labelSpacing]: '1em',
|
3765
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
3766
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
3747
3767
|
|
3748
3768
|
_checked: {
|
3749
|
-
[vars$
|
3750
|
-
[vars$
|
3751
|
-
[vars$
|
3752
|
-
[vars$
|
3753
|
-
[vars$
|
3769
|
+
[vars$j.trackBorderColor]: refs.borderColor,
|
3770
|
+
[vars$j.trackBackgroundColor]: refs.backgroundColor,
|
3771
|
+
[vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
|
3772
|
+
[vars$j.knobColor]: refs.valueTextColor,
|
3773
|
+
[vars$j.knobTextColor]: refs.valueTextColor,
|
3754
3774
|
},
|
3755
3775
|
|
3756
3776
|
_disabled: {
|
3757
|
-
[vars$
|
3758
|
-
[vars$
|
3759
|
-
[vars$
|
3760
|
-
[vars$
|
3777
|
+
[vars$j.knobColor]: globalRefs$9.colors.surface.light,
|
3778
|
+
[vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
|
3779
|
+
[vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
3780
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
3761
3781
|
_checked: {
|
3762
|
-
[vars$
|
3763
|
-
[vars$
|
3782
|
+
[vars$j.knobColor]: globalRefs$9.colors.surface.light,
|
3783
|
+
[vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
3764
3784
|
},
|
3765
3785
|
},
|
3766
3786
|
|
3767
3787
|
_invalid: {
|
3768
|
-
[vars$
|
3769
|
-
[vars$
|
3788
|
+
[vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
|
3789
|
+
[vars$j.knobColor]: globalRefs$9.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$j
|
3777
3797
|
});
|
3778
3798
|
|
3779
|
-
const componentName$
|
3799
|
+
const componentName$n = getComponentName('container');
|
3780
3800
|
|
3781
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3801
|
+
class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
|
3782
3802
|
constructor() {
|
3783
3803
|
super();
|
3784
3804
|
|
@@ -3832,7 +3852,7 @@ const ContainerClass = compose(
|
|
3832
3852
|
|
3833
3853
|
const globalRefs$8 = 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$n
|
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$8.colors.surface.light,
|
3886
|
+
[compVars$3.color]: globalRefs$8.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$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
3914
3934
|
},
|
3915
3935
|
md: {
|
3916
|
-
[compVars$
|
3936
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
3917
3937
|
},
|
3918
3938
|
lg: {
|
3919
|
-
[compVars$
|
3939
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
3920
3940
|
},
|
3921
3941
|
xl: {
|
3922
|
-
[compVars$
|
3942
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.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$8.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$8.radius.sm },
|
3952
|
+
md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
|
3953
|
+
lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
|
3954
|
+
xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
|
3955
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
|
3956
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
|
3937
3957
|
},
|
3938
3958
|
};
|
3939
3959
|
|
3940
|
-
const vars$
|
3941
|
-
...compVars$
|
3960
|
+
const vars$i = {
|
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$i
|
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$m = getComponentName('logo');
|
4002
4022
|
|
4003
4023
|
const LogoClass = createCssVarImageClass({
|
4004
|
-
componentName: componentName$
|
4024
|
+
componentName: componentName$m,
|
4005
4025
|
varName: 'url',
|
4006
4026
|
fallbackVarName: 'fallbackUrl',
|
4007
4027
|
});
|
4008
4028
|
|
4009
|
-
const vars$
|
4029
|
+
const vars$h = LogoClass.cssVarList;
|
4010
4030
|
|
4011
4031
|
const logo$1 = {
|
4012
|
-
[vars$
|
4032
|
+
[vars$h.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$h
|
4019
4039
|
});
|
4020
4040
|
|
4021
|
-
const componentName$
|
4041
|
+
const componentName$l = getComponentName('totp-image');
|
4022
4042
|
|
4023
4043
|
const TotpImageClass = createCssVarImageClass({
|
4024
|
-
componentName: componentName$
|
4044
|
+
componentName: componentName$l,
|
4025
4045
|
varName: 'url',
|
4026
4046
|
fallbackVarName: 'fallbackUrl',
|
4027
4047
|
});
|
4028
4048
|
|
4029
|
-
const vars$
|
4049
|
+
const vars$g = TotpImageClass.cssVarList;
|
4030
4050
|
|
4031
4051
|
const logo = {
|
4032
|
-
[vars$
|
4052
|
+
[vars$g.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$g
|
4039
4059
|
});
|
4040
4060
|
|
4041
4061
|
// eslint-disable-next-line max-classes-per-file
|
4042
4062
|
|
4043
|
-
const componentName$
|
4063
|
+
const componentName$k = getComponentName('text');
|
4044
4064
|
|
4045
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4065
|
+
class RawText extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > slot' }) {
|
4046
4066
|
constructor() {
|
4047
4067
|
super();
|
4048
4068
|
|
@@ -4102,97 +4122,97 @@ const TextClass = compose(
|
|
4102
4122
|
)(RawText);
|
4103
4123
|
|
4104
4124
|
const globalRefs$7 = getThemeRefs(globals);
|
4105
|
-
const vars$
|
4125
|
+
const vars$f = TextClass.cssVarList;
|
4106
4126
|
|
4107
4127
|
const text$2 = {
|
4108
|
-
[vars$
|
4109
|
-
[vars$
|
4110
|
-
[vars$
|
4128
|
+
[vars$f.textLineHeight]: '1.35em',
|
4129
|
+
[vars$f.textAlign]: 'left',
|
4130
|
+
[vars$f.textColor]: globalRefs$7.colors.surface.dark,
|
4111
4131
|
variant: {
|
4112
4132
|
h1: {
|
4113
|
-
[vars$
|
4114
|
-
[vars$
|
4115
|
-
[vars$
|
4133
|
+
[vars$f.fontSize]: globalRefs$7.typography.h1.size,
|
4134
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
|
4135
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h1.font,
|
4116
4136
|
},
|
4117
4137
|
h2: {
|
4118
|
-
[vars$
|
4119
|
-
[vars$
|
4120
|
-
[vars$
|
4138
|
+
[vars$f.fontSize]: globalRefs$7.typography.h2.size,
|
4139
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
|
4140
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h2.font,
|
4121
4141
|
},
|
4122
4142
|
h3: {
|
4123
|
-
[vars$
|
4124
|
-
[vars$
|
4125
|
-
[vars$
|
4143
|
+
[vars$f.fontSize]: globalRefs$7.typography.h3.size,
|
4144
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
|
4145
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h3.font,
|
4126
4146
|
},
|
4127
4147
|
subtitle1: {
|
4128
|
-
[vars$
|
4129
|
-
[vars$
|
4130
|
-
[vars$
|
4148
|
+
[vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
|
4149
|
+
[vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
4150
|
+
[vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
|
4131
4151
|
},
|
4132
4152
|
subtitle2: {
|
4133
|
-
[vars$
|
4134
|
-
[vars$
|
4135
|
-
[vars$
|
4153
|
+
[vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
|
4154
|
+
[vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
4155
|
+
[vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
|
4136
4156
|
},
|
4137
4157
|
body1: {
|
4138
|
-
[vars$
|
4139
|
-
[vars$
|
4140
|
-
[vars$
|
4158
|
+
[vars$f.fontSize]: globalRefs$7.typography.body1.size,
|
4159
|
+
[vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
|
4160
|
+
[vars$f.fontFamily]: globalRefs$7.typography.body1.font,
|
4141
4161
|
},
|
4142
4162
|
body2: {
|
4143
|
-
[vars$
|
4144
|
-
[vars$
|
4145
|
-
[vars$
|
4163
|
+
[vars$f.fontSize]: globalRefs$7.typography.body2.size,
|
4164
|
+
[vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
|
4165
|
+
[vars$f.fontFamily]: globalRefs$7.typography.body2.font,
|
4146
4166
|
},
|
4147
4167
|
},
|
4148
4168
|
|
4149
4169
|
mode: {
|
4150
4170
|
primary: {
|
4151
|
-
[vars$
|
4171
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
4152
4172
|
},
|
4153
4173
|
secondary: {
|
4154
|
-
[vars$
|
4174
|
+
[vars$f.textColor]: globalRefs$7.colors.secondary.main,
|
4155
4175
|
},
|
4156
4176
|
error: {
|
4157
|
-
[vars$
|
4177
|
+
[vars$f.textColor]: globalRefs$7.colors.error.main,
|
4158
4178
|
},
|
4159
4179
|
success: {
|
4160
|
-
[vars$
|
4180
|
+
[vars$f.textColor]: globalRefs$7.colors.success.main,
|
4161
4181
|
},
|
4162
4182
|
},
|
4163
4183
|
|
4164
4184
|
textAlign: {
|
4165
|
-
right: { [vars$
|
4166
|
-
left: { [vars$
|
4167
|
-
center: { [vars$
|
4185
|
+
right: { [vars$f.textAlign]: 'right' },
|
4186
|
+
left: { [vars$f.textAlign]: 'left' },
|
4187
|
+
center: { [vars$f.textAlign]: 'center' },
|
4168
4188
|
},
|
4169
4189
|
|
4170
4190
|
_fullWidth: {
|
4171
|
-
[vars$
|
4191
|
+
[vars$f.hostWidth]: '100%',
|
4172
4192
|
},
|
4173
4193
|
|
4174
4194
|
_italic: {
|
4175
|
-
[vars$
|
4195
|
+
[vars$f.fontStyle]: 'italic',
|
4176
4196
|
},
|
4177
4197
|
|
4178
4198
|
_uppercase: {
|
4179
|
-
[vars$
|
4199
|
+
[vars$f.textTransform]: 'uppercase',
|
4180
4200
|
},
|
4181
4201
|
|
4182
4202
|
_lowercase: {
|
4183
|
-
[vars$
|
4203
|
+
[vars$f.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$f
|
4191
4211
|
});
|
4192
4212
|
|
4193
|
-
const componentName$
|
4213
|
+
const componentName$j = getComponentName('link');
|
4194
4214
|
|
4195
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4215
|
+
class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
|
4196
4216
|
constructor() {
|
4197
4217
|
super();
|
4198
4218
|
|
@@ -4257,35 +4277,35 @@ const LinkClass = compose(
|
|
4257
4277
|
)(RawLink);
|
4258
4278
|
|
4259
4279
|
const globalRefs$6 = getThemeRefs(globals);
|
4260
|
-
const vars$
|
4280
|
+
const vars$e = LinkClass.cssVarList;
|
4261
4281
|
|
4262
4282
|
const link = {
|
4263
|
-
[vars$
|
4283
|
+
[vars$e.cursor]: 'pointer',
|
4264
4284
|
|
4265
|
-
[vars$
|
4285
|
+
[vars$e.textColor]: globalRefs$6.colors.primary.main,
|
4266
4286
|
|
4267
4287
|
textAlign: {
|
4268
|
-
right: { [vars$
|
4269
|
-
left: { [vars$
|
4270
|
-
center: { [vars$
|
4288
|
+
right: { [vars$e.textAlign]: 'right' },
|
4289
|
+
left: { [vars$e.textAlign]: 'left' },
|
4290
|
+
center: { [vars$e.textAlign]: 'center' },
|
4271
4291
|
},
|
4272
4292
|
|
4273
4293
|
_fullWidth: {
|
4274
|
-
[vars$
|
4294
|
+
[vars$e.hostWidth]: '100%',
|
4275
4295
|
},
|
4276
4296
|
|
4277
4297
|
mode: {
|
4278
4298
|
primary: {
|
4279
|
-
[vars$
|
4299
|
+
[vars$e.textColor]: globalRefs$6.colors.primary.main,
|
4280
4300
|
},
|
4281
4301
|
secondary: {
|
4282
|
-
[vars$
|
4302
|
+
[vars$e.textColor]: globalRefs$6.colors.secondary.main,
|
4283
4303
|
},
|
4284
4304
|
error: {
|
4285
|
-
[vars$
|
4305
|
+
[vars$e.textColor]: globalRefs$6.colors.error.main,
|
4286
4306
|
},
|
4287
4307
|
success: {
|
4288
|
-
[vars$
|
4308
|
+
[vars$e.textColor]: globalRefs$6.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$e
|
4297
4317
|
});
|
4298
4318
|
|
4299
|
-
const componentName$
|
4300
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4319
|
+
const componentName$i = getComponentName('divider');
|
4320
|
+
class RawDivider extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
|
4301
4321
|
constructor() {
|
4302
4322
|
super();
|
4303
4323
|
|
@@ -4394,64 +4414,64 @@ const DividerClass = compose(
|
|
4394
4414
|
)(RawDivider);
|
4395
4415
|
|
4396
4416
|
const globalRefs$5 = getThemeRefs(globals);
|
4397
|
-
const compVars$
|
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$i
|
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$5.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$d = {
|
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$d
|
4442
4462
|
});
|
4443
4463
|
|
4444
4464
|
/* eslint-disable no-param-reassign */
|
4445
4465
|
|
4446
|
-
const componentName$
|
4466
|
+
const componentName$h = getComponentName('passcode-internal');
|
4447
4467
|
|
4448
|
-
createBaseInputClass({ componentName: componentName$
|
4468
|
+
createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
|
4449
4469
|
|
4450
|
-
const componentName$
|
4470
|
+
const componentName$g = 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$h}
|
4470
4490
|
bordered="true"
|
4471
4491
|
name="code"
|
4472
4492
|
tabindex="-1"
|
4473
4493
|
slot="input"
|
4474
|
-
><slot></slot></${componentName$
|
4494
|
+
><slot></slot></${componentName$h}>
|
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$h);
|
4480
4500
|
|
4481
4501
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
4482
4502
|
}
|
@@ -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$g,
|
4618
4638
|
})
|
4619
4639
|
);
|
4620
4640
|
|
4621
|
-
const vars$
|
4641
|
+
const vars$c = 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$c.fontFamily]: refs.fontFamily,
|
4645
|
+
[vars$c.fontSize]: refs.fontSize,
|
4646
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
4647
|
+
[vars$c.labelRequiredIndicator]: refs.requiredIndicator,
|
4648
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
4649
|
+
[vars$c.digitValueTextColor]: refs.valueTextColor,
|
4650
|
+
[vars$c.digitPadding]: '0',
|
4651
|
+
[vars$c.digitTextAlign]: 'center',
|
4652
|
+
[vars$c.digitSpacing]: '4px',
|
4653
|
+
[vars$c.hostWidth]: refs.width,
|
4654
|
+
[vars$c.digitOutlineColor]: 'transparent',
|
4655
|
+
[vars$c.digitOutlineWidth]: refs.outlineWidth,
|
4656
|
+
[vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
4657
|
+
[vars$c.digitSize]: refs.inputHeight,
|
4638
4658
|
|
4639
4659
|
_hideCursor: {
|
4640
|
-
[vars$
|
4660
|
+
[vars$c.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$c
|
4648
4668
|
});
|
4649
4669
|
|
4650
|
-
const componentName$
|
4670
|
+
const componentName$f = getComponentName('loader-linear');
|
4651
4671
|
|
4652
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4672
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
|
4653
4673
|
static get componentName() {
|
4654
|
-
return componentName$
|
4674
|
+
return componentName$f;
|
4655
4675
|
}
|
4656
4676
|
|
4657
4677
|
constructor() {
|
@@ -4713,53 +4733,53 @@ const LoaderLinearClass = compose(
|
|
4713
4733
|
)(RawLoaderLinear);
|
4714
4734
|
|
4715
4735
|
const globalRefs$4 = getThemeRefs(globals);
|
4716
|
-
const vars$
|
4736
|
+
const vars$b = LoaderLinearClass.cssVarList;
|
4717
4737
|
|
4718
4738
|
const loaderLinear = {
|
4719
|
-
[vars$
|
4720
|
-
[vars$
|
4739
|
+
[vars$b.hostDisplay]: 'inline-block',
|
4740
|
+
[vars$b.hostWidth]: '100%',
|
4721
4741
|
|
4722
|
-
[vars$
|
4723
|
-
[vars$
|
4742
|
+
[vars$b.barColor]: globalRefs$4.colors.surface.contrast,
|
4743
|
+
[vars$b.barWidth]: '20%',
|
4724
4744
|
|
4725
|
-
[vars$
|
4726
|
-
[vars$
|
4745
|
+
[vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
4746
|
+
[vars$b.barBorderRadius]: '4px',
|
4727
4747
|
|
4728
|
-
[vars$
|
4729
|
-
[vars$
|
4730
|
-
[vars$
|
4731
|
-
[vars$
|
4748
|
+
[vars$b.animationDuration]: '2s',
|
4749
|
+
[vars$b.animationTimingFunction]: 'linear',
|
4750
|
+
[vars$b.animationIterationCount]: 'infinite',
|
4751
|
+
[vars$b.verticalPadding]: '0.25em',
|
4732
4752
|
|
4733
4753
|
size: {
|
4734
|
-
xs: { [vars$
|
4735
|
-
sm: { [vars$
|
4736
|
-
md: { [vars$
|
4737
|
-
lg: { [vars$
|
4754
|
+
xs: { [vars$b.barHeight]: '2px' },
|
4755
|
+
sm: { [vars$b.barHeight]: '4px' },
|
4756
|
+
md: { [vars$b.barHeight]: '6px' },
|
4757
|
+
lg: { [vars$b.barHeight]: '8px' },
|
4738
4758
|
},
|
4739
4759
|
|
4740
4760
|
mode: {
|
4741
4761
|
primary: {
|
4742
|
-
[vars$
|
4762
|
+
[vars$b.barColor]: globalRefs$4.colors.primary.main,
|
4743
4763
|
},
|
4744
4764
|
secondary: {
|
4745
|
-
[vars$
|
4765
|
+
[vars$b.barColor]: globalRefs$4.colors.secondary.main,
|
4746
4766
|
},
|
4747
4767
|
},
|
4748
4768
|
|
4749
4769
|
_hidden: {
|
4750
|
-
[vars$
|
4770
|
+
[vars$b.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$b
|
4758
4778
|
});
|
4759
4779
|
|
4760
|
-
const componentName$
|
4780
|
+
const componentName$e = getComponentName('loader-radial');
|
4761
4781
|
|
4762
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4782
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
|
4763
4783
|
constructor() {
|
4764
4784
|
super();
|
4765
4785
|
|
@@ -4804,7 +4824,7 @@ const LoaderRadialClass = compose(
|
|
4804
4824
|
)(RawLoaderRadial);
|
4805
4825
|
|
4806
4826
|
const globalRefs$3 = getThemeRefs(globals);
|
4807
|
-
const compVars = LoaderRadialClass.cssVarList;
|
4827
|
+
const compVars$1 = LoaderRadialClass.cssVarList;
|
4808
4828
|
|
4809
4829
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
4810
4830
|
{
|
@@ -4818,47 +4838,47 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
4818
4838
|
},
|
4819
4839
|
},
|
4820
4840
|
},
|
4821
|
-
componentName$
|
4841
|
+
componentName$e
|
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$a = {
|
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$a
|
4859
4879
|
});
|
4860
4880
|
|
4861
|
-
const componentName$
|
4881
|
+
const componentName$d = getComponentName('combo-box');
|
4862
4882
|
|
4863
4883
|
const ComboBoxMixin = (superclass) =>
|
4864
4884
|
class ComboBoxMixinClass extends superclass {
|
@@ -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$d,
|
5213
5233
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5214
5234
|
})
|
5215
5235
|
);
|
5216
5236
|
|
5217
5237
|
const globalRefs$2 = getThemeRefs(globals);
|
5218
|
-
const vars$
|
5238
|
+
const vars$9 = 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$9.hostWidth]: refs.width,
|
5242
|
+
[vars$9.fontSize]: refs.fontSize,
|
5243
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
5244
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
5245
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
5246
|
+
[vars$9.inputBorderColor]: refs.borderColor,
|
5247
|
+
[vars$9.inputBorderWidth]: refs.borderWidth,
|
5248
|
+
[vars$9.inputBorderStyle]: refs.borderStyle,
|
5249
|
+
[vars$9.inputBorderRadius]: refs.borderRadius,
|
5250
|
+
[vars$9.inputOutlineColor]: refs.outlineColor,
|
5251
|
+
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
5252
|
+
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
5253
|
+
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
5254
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
5255
|
+
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
5256
|
+
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5257
|
+
[vars$9.inputBackgroundColor]: refs.backgroundColor,
|
5258
|
+
[vars$9.inputHorizontalPadding]: refs.horizontalPadding,
|
5259
|
+
[vars$9.inputHeight]: refs.inputHeight,
|
5260
|
+
[vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
|
5261
|
+
[vars$9.inputDropdownButtonCursor]: 'pointer',
|
5262
|
+
[vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5263
|
+
[vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
|
5244
5264
|
|
5245
5265
|
_readonly: {
|
5246
|
-
[vars$
|
5266
|
+
[vars$9.inputDropdownButtonCursor]: 'default',
|
5247
5267
|
},
|
5248
5268
|
|
5249
5269
|
// Overlay theme exposed via the component:
|
5250
|
-
[vars$
|
5251
|
-
[vars$
|
5252
|
-
[vars$
|
5253
|
-
[vars$
|
5270
|
+
[vars$9.overlayFontSize]: refs.fontSize,
|
5271
|
+
[vars$9.overlayFontFamily]: refs.fontFamily,
|
5272
|
+
[vars$9.overlayCursor]: 'pointer',
|
5273
|
+
[vars$9.overlayItemBoxShadow]: 'none',
|
5254
5274
|
|
5255
5275
|
// Overlay direct theme:
|
5256
|
-
[vars$
|
5257
|
-
[vars$
|
5276
|
+
[vars$9.overlay.minHeight]: '400px',
|
5277
|
+
[vars$9.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$9
|
5265
5285
|
});
|
5266
5286
|
|
5267
5287
|
const observedAttributes$2 = ['src', 'alt'];
|
5268
5288
|
|
5269
|
-
const componentName$
|
5289
|
+
const componentName$c = getComponentName('image');
|
5270
5290
|
|
5271
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5291
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$c, 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$8 = 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$8
|
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$b = getComponentName('phone-field-internal');
|
6535
6555
|
|
6536
|
-
createBaseInputClass({ componentName: componentName$
|
6556
|
+
createBaseInputClass({ componentName: componentName$b, 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$a = 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$b}
|
6556
6576
|
tabindex="-1"
|
6557
6577
|
slot="input"
|
6558
|
-
></${componentName$
|
6578
|
+
></${componentName$b}>
|
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$b);
|
6564
6584
|
|
6565
6585
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6566
6586
|
includeAttrs: [
|
@@ -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$a,
|
6759
6779
|
})
|
6760
6780
|
);
|
6761
6781
|
|
6762
|
-
const vars$
|
6782
|
+
const vars$7 = 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$7.hostWidth]: refs.width,
|
6786
|
+
[vars$7.fontSize]: refs.fontSize,
|
6787
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
6788
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
6789
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
6790
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
6791
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
6792
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6793
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
6794
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
6795
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
6796
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
6797
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
6798
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
6799
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
6800
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
6801
|
+
[vars$7.phoneInputWidth]: refs.minWidth,
|
6802
|
+
[vars$7.countryCodeInputWidth]: '5em',
|
6803
|
+
[vars$7.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$7
|
6794
6814
|
});
|
6795
6815
|
|
6796
|
-
const componentName$
|
6816
|
+
const componentName$9 = getComponentName('phone-field-internal-input-box');
|
6797
6817
|
|
6798
|
-
createBaseInputClass({ componentName: componentName$
|
6818
|
+
createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
|
6799
6819
|
|
6800
6820
|
const textVars = TextFieldClass.cssVarList;
|
6801
6821
|
|
6802
|
-
const componentName$
|
6822
|
+
const componentName$8 = 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$9}
|
6817
6837
|
tabindex="-1"
|
6818
6838
|
slot="input"
|
6819
|
-
></${componentName$
|
6839
|
+
></${componentName$9}>
|
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$9);
|
6825
6845
|
|
6826
6846
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6827
6847
|
includeAttrs: [
|
@@ -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$8,
|
6957
6977
|
})
|
6958
6978
|
);
|
6959
6979
|
|
6960
|
-
const vars$
|
6980
|
+
const vars$6 = 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$6.hostWidth]: '16em',
|
6984
|
+
[vars$6.hostMinWidth]: refs.minWidth,
|
6985
|
+
[vars$6.fontSize]: refs.fontSize,
|
6986
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
6987
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
6988
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
6989
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
6990
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
6991
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6992
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
6993
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
6994
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
6995
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
6996
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
6997
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
6998
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
6999
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
6980
7000
|
_fullWidth: {
|
6981
|
-
[vars$
|
7001
|
+
[vars$6.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$6
|
6989
7009
|
});
|
6990
7010
|
|
6991
|
-
const componentName$
|
7011
|
+
const componentName$7 = getComponentName('new-password-internal');
|
6992
7012
|
|
6993
|
-
const componentName$
|
7013
|
+
const componentName$6 = 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$7}
|
7004
7024
|
name="new-password"
|
7005
7025
|
tabindex="-1"
|
7006
7026
|
slot="input"
|
7007
|
-
></${componentName$
|
7027
|
+
></${componentName$7}>
|
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$7);
|
7013
7033
|
|
7014
7034
|
forwardAttrs(this, this.inputElement, {
|
7015
7035
|
includeAttrs: [
|
@@ -7059,7 +7079,7 @@ const NewPasswordClass = compose(
|
|
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$6,
|
7112
7132
|
})
|
7113
7133
|
);
|
7114
7134
|
|
7115
|
-
const vars$
|
7135
|
+
const vars$5 = NewPasswordClass.cssVarList;
|
7116
7136
|
|
7117
7137
|
const newPassword = {
|
7118
|
-
[vars$
|
7119
|
-
[vars$
|
7120
|
-
[vars$
|
7121
|
-
[vars$
|
7122
|
-
[vars$
|
7123
|
-
[vars$
|
7138
|
+
[vars$5.hostWidth]: refs.width,
|
7139
|
+
[vars$5.hostMinWidth]: refs.minWidth,
|
7140
|
+
[vars$5.fontSize]: refs.fontSize,
|
7141
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
7142
|
+
[vars$5.spaceBetweenInputs]: '1em',
|
7143
|
+
[vars$5.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$5.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$5
|
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$5 = 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$5, baseSelector: ':host > div' });
|
7167
7187
|
|
7168
7188
|
class RawUploadFile extends BaseInputClass {
|
7169
7189
|
static get observedAttributes() {
|
@@ -7373,76 +7393,76 @@ const UploadFileClass = compose(
|
|
7373
7393
|
componentNameValidationMixin
|
7374
7394
|
)(RawUploadFile);
|
7375
7395
|
|
7376
|
-
const vars$
|
7396
|
+
const vars$4 = UploadFileClass.cssVarList;
|
7377
7397
|
|
7378
7398
|
const uploadFile = {
|
7379
|
-
[vars$
|
7380
|
-
[vars$
|
7399
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
7400
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
7381
7401
|
|
7382
|
-
[vars$
|
7402
|
+
[vars$4.iconSize]: '2em',
|
7383
7403
|
|
7384
|
-
[vars$
|
7385
|
-
[vars$
|
7404
|
+
[vars$4.hostPadding]: '0.75em',
|
7405
|
+
[vars$4.gap]: '0.5em',
|
7386
7406
|
|
7387
|
-
[vars$
|
7388
|
-
[vars$
|
7389
|
-
[vars$
|
7407
|
+
[vars$4.fontSize]: '16px',
|
7408
|
+
[vars$4.titleFontWeight]: '500',
|
7409
|
+
[vars$4.lineHeight]: '1em',
|
7390
7410
|
|
7391
|
-
[vars$
|
7392
|
-
[vars$
|
7393
|
-
[vars$
|
7394
|
-
[vars$
|
7411
|
+
[vars$4.borderWidth]: refs.borderWidth,
|
7412
|
+
[vars$4.borderColor]: refs.borderColor,
|
7413
|
+
[vars$4.borderRadius]: refs.borderRadius,
|
7414
|
+
[vars$4.borderStyle]: 'dashed',
|
7395
7415
|
|
7396
7416
|
_required: {
|
7397
|
-
[vars$
|
7417
|
+
[vars$4.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$4.hostHeight]: '196px',
|
7423
|
+
[vars$4.hostWidth]: '200px',
|
7424
|
+
[vars$4.titleFontSize]: '0.875em',
|
7425
|
+
[vars$4.descriptionFontSize]: '0.875em',
|
7426
|
+
[vars$4.lineHeight]: '1.25em',
|
7407
7427
|
},
|
7408
7428
|
sm: {
|
7409
|
-
[vars$
|
7410
|
-
[vars$
|
7411
|
-
[vars$
|
7412
|
-
[vars$
|
7413
|
-
[vars$
|
7429
|
+
[vars$4.hostHeight]: '216px',
|
7430
|
+
[vars$4.hostWidth]: '230px',
|
7431
|
+
[vars$4.titleFontSize]: '1em',
|
7432
|
+
[vars$4.descriptionFontSize]: '0.875em',
|
7433
|
+
[vars$4.lineHeight]: '1.25em',
|
7414
7434
|
},
|
7415
7435
|
md: {
|
7416
|
-
[vars$
|
7417
|
-
[vars$
|
7418
|
-
[vars$
|
7419
|
-
[vars$
|
7420
|
-
[vars$
|
7436
|
+
[vars$4.hostHeight]: '256px',
|
7437
|
+
[vars$4.hostWidth]: '312px',
|
7438
|
+
[vars$4.titleFontSize]: '1.125em',
|
7439
|
+
[vars$4.descriptionFontSize]: '1em',
|
7440
|
+
[vars$4.lineHeight]: '1.5em',
|
7421
7441
|
},
|
7422
7442
|
lg: {
|
7423
|
-
[vars$
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7426
|
-
[vars$
|
7427
|
-
[vars$
|
7443
|
+
[vars$4.hostHeight]: '280px',
|
7444
|
+
[vars$4.hostWidth]: '336px',
|
7445
|
+
[vars$4.titleFontSize]: '1.125em',
|
7446
|
+
[vars$4.descriptionFontSize]: '1.125em',
|
7447
|
+
[vars$4.lineHeight]: '1.75em',
|
7428
7448
|
},
|
7429
7449
|
},
|
7430
7450
|
|
7431
7451
|
_fullWidth: {
|
7432
|
-
[vars$
|
7452
|
+
[vars$4.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$4
|
7440
7460
|
});
|
7441
7461
|
|
7442
|
-
const componentName$
|
7462
|
+
const componentName$4 = getComponentName('button-selection-group-item');
|
7443
7463
|
|
7444
7464
|
class RawSelectItem extends createBaseClass({
|
7445
|
-
componentName: componentName$
|
7465
|
+
componentName: componentName$4,
|
7446
7466
|
baseSelector: ':host > descope-button',
|
7447
7467
|
}) {
|
7448
7468
|
get size() {
|
@@ -7538,36 +7558,36 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7538
7558
|
|
7539
7559
|
const globalRefs$1 = getThemeRefs(globals);
|
7540
7560
|
|
7541
|
-
const vars$
|
7561
|
+
const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
|
7542
7562
|
|
7543
7563
|
const buttonSelectionGroupItem = {
|
7544
|
-
[vars$
|
7545
|
-
[vars$
|
7546
|
-
[vars$
|
7547
|
-
[vars$
|
7548
|
-
[vars$
|
7564
|
+
[vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
|
7565
|
+
[vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
7566
|
+
[vars$3.borderColor]: globalRefs$1.colors.surface.main,
|
7567
|
+
[vars$3.borderStyle]: 'solid',
|
7568
|
+
[vars$3.borderRadius]: globalRefs$1.radius.sm,
|
7549
7569
|
|
7550
7570
|
_hover: {
|
7551
|
-
[vars$
|
7571
|
+
[vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7552
7572
|
},
|
7553
7573
|
|
7554
7574
|
_selected: {
|
7555
|
-
[vars$
|
7556
|
-
[vars$
|
7557
|
-
[vars$
|
7575
|
+
[vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
|
7576
|
+
[vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
|
7577
|
+
[vars$3.labelTextColor]: globalRefs$1.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$3
|
7565
7585
|
});
|
7566
7586
|
|
7567
|
-
const componentName$
|
7587
|
+
const componentName$3 = getComponentName('button-selection-group-internal');
|
7568
7588
|
|
7569
7589
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
7570
|
-
componentName: componentName$
|
7590
|
+
componentName: componentName$3,
|
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$2 = 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$3}
|
7783
7803
|
name="button-selection-group"
|
7784
7804
|
slot="input"
|
7785
7805
|
tabindex="-1"
|
7786
7806
|
>
|
7787
7807
|
<slot></slot>
|
7788
|
-
</${componentName$
|
7808
|
+
</${componentName$3}>
|
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$3);
|
7794
7814
|
|
7795
7815
|
forwardAttrs(this, this.inputElement, {
|
7796
7816
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -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,144 @@ const ButtonSelectionGroupClass = compose(
|
|
7893
7913
|
${resetInputCursor('vaadin-text-field')}
|
7894
7914
|
`,
|
7895
7915
|
excludeAttrsSync: ['tabindex'],
|
7896
|
-
componentName: componentName$
|
7916
|
+
componentName: componentName$2,
|
7897
7917
|
})
|
7898
7918
|
);
|
7899
7919
|
|
7900
7920
|
const globalRefs = getThemeRefs(globals);
|
7901
|
-
const vars$
|
7921
|
+
const vars$2 = ButtonSelectionGroupClass.cssVarList;
|
7902
7922
|
|
7903
7923
|
const buttonSelectionGroup = {
|
7904
|
-
[vars$
|
7905
|
-
[vars$
|
7906
|
-
[vars$
|
7907
|
-
[vars$
|
7908
|
-
[vars$
|
7909
|
-
[vars$
|
7924
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
7925
|
+
[vars$2.labelTextColor]: refs.labelTextColor,
|
7926
|
+
[vars$2.labelRequiredIndicator]: refs.requiredIndicator,
|
7927
|
+
[vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
|
7928
|
+
[vars$2.itemsSpacing]: globalRefs.spacing.sm,
|
7929
|
+
[vars$2.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$2
|
7936
|
+
});
|
7937
|
+
|
7938
|
+
const componentName$1 = 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$1,
|
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$1 = {
|
8048
|
+
...compVars,
|
8049
|
+
};
|
8050
|
+
|
8051
|
+
var modal$1 = /*#__PURE__*/Object.freeze({
|
8052
|
+
__proto__: null,
|
8053
|
+
default: modal,
|
7915
8054
|
vars: vars$1
|
7916
8055
|
});
|
7917
8056
|
|
@@ -7942,6 +8081,7 @@ const components = {
|
|
7942
8081
|
uploadFile: uploadFile$1,
|
7943
8082
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
7944
8083
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8084
|
+
modal: modal$1,
|
7945
8085
|
};
|
7946
8086
|
|
7947
8087
|
const theme = Object.keys(components).reduce(
|
@@ -7954,7 +8094,7 @@ const vars = Object.keys(components).reduce(
|
|
7954
8094
|
);
|
7955
8095
|
|
7956
8096
|
const defaultTheme = { globals, components: theme };
|
7957
|
-
const themeVars = { globals: vars$
|
8097
|
+
const themeVars = { globals: vars$s, components: vars };
|
7958
8098
|
|
7959
8099
|
const componentName = getComponentName('recaptcha');
|
7960
8100
|
|
@@ -8125,6 +8265,7 @@ exports.LinkClass = LinkClass;
|
|
8125
8265
|
exports.LoaderLinearClass = LoaderLinearClass;
|
8126
8266
|
exports.LoaderRadialClass = LoaderRadialClass;
|
8127
8267
|
exports.LogoClass = LogoClass;
|
8268
|
+
exports.ModalClass = ModalClass;
|
8128
8269
|
exports.NewPasswordClass = NewPasswordClass;
|
8129
8270
|
exports.NumberFieldClass = NumberFieldClass;
|
8130
8271
|
exports.PasscodeClass = PasscodeClass;
|