@descope/web-components-ui 1.0.222 → 1.0.223
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|