@descope/web-components-ui 1.0.228 → 1.0.229
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +847 -601
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +726 -592
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1769.js +360 -0
- package/dist/umd/1932.js +1 -1
- package/dist/umd/1990.js +1 -1
- package/dist/umd/2269.js +2 -0
- package/dist/umd/2269.js.LICENSE.txt +5 -0
- package/dist/umd/3585.js +1 -1
- package/dist/umd/3878.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6091.js +123 -0
- package/dist/umd/{4746.js.LICENSE.txt → 6091.js.LICENSE.txt} +0 -6
- package/dist/umd/6542.js +288 -0
- package/dist/umd/6542.js.LICENSE.txt +11 -0
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7514.js +1 -1
- package/dist/umd/9211.js +1 -1
- package/dist/umd/9320.js +2 -0
- package/dist/umd/9320.js.LICENSE.txt +5 -0
- package/dist/umd/9437.js +1 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -0
- package/dist/umd/descope-notification-index-js.js +1 -0
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-grid/GridClass.js +8 -1
- package/src/components/descope-notification/NotificationClass.js +119 -0
- package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +67 -0
- package/src/components/descope-notification/descope-notification-card/index.js +6 -0
- package/src/components/descope-notification/descope-notification-container.js +13 -0
- package/src/components/descope-notification/index.js +8 -0
- package/src/index.cjs.js +1 -0
- package/src/mixins/normalizeBooleanAttributesMixin.js +2 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/notificationCard.js +57 -0
- package/dist/umd/1419.js +0 -360
- package/dist/umd/4746.js +0 -123
- /package/dist/umd/{1419.js.LICENSE.txt → 1769.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
var merge = require('lodash.merge');
|
4
4
|
var set = require('lodash.set');
|
5
5
|
var Color = require('color');
|
6
|
+
require('@vaadin/notification');
|
6
7
|
|
7
8
|
const DESCOPE_PREFIX = 'descope';
|
8
9
|
const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
|
@@ -496,7 +497,7 @@ const globals = {
|
|
496
497
|
shadow,
|
497
498
|
fonts,
|
498
499
|
};
|
499
|
-
const vars$
|
500
|
+
const vars$u = getThemeVars(globals);
|
500
501
|
|
501
502
|
const createCssVarFallback = (first, ...rest) =>
|
502
503
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
@@ -881,6 +882,8 @@ const booleanAttributesList = [
|
|
881
882
|
'opened',
|
882
883
|
'active',
|
883
884
|
'password-visible',
|
885
|
+
'opening',
|
886
|
+
'closing',
|
884
887
|
];
|
885
888
|
|
886
889
|
const isBooleanAttribute = (attr) => {
|
@@ -2362,7 +2365,7 @@ const clickableMixin = (superclass) =>
|
|
2362
2365
|
}
|
2363
2366
|
};
|
2364
2367
|
|
2365
|
-
const componentName$
|
2368
|
+
const componentName$A = getComponentName('button');
|
2366
2369
|
|
2367
2370
|
const resetStyles = `
|
2368
2371
|
:host {
|
@@ -2459,7 +2462,7 @@ const ButtonClass = compose(
|
|
2459
2462
|
}
|
2460
2463
|
`,
|
2461
2464
|
excludeAttrsSync: ['tabindex'],
|
2462
|
-
componentName: componentName$
|
2465
|
+
componentName: componentName$A,
|
2463
2466
|
})
|
2464
2467
|
);
|
2465
2468
|
|
@@ -2496,30 +2499,30 @@ loadingIndicatorStyles = `
|
|
2496
2499
|
}
|
2497
2500
|
`;
|
2498
2501
|
|
2499
|
-
const globalRefs$
|
2502
|
+
const globalRefs$f = getThemeRefs(globals);
|
2500
2503
|
const compVars$4 = ButtonClass.cssVarList;
|
2501
2504
|
|
2502
2505
|
const mode = {
|
2503
|
-
primary: globalRefs$
|
2504
|
-
secondary: globalRefs$
|
2505
|
-
success: globalRefs$
|
2506
|
-
error: globalRefs$
|
2507
|
-
surface: globalRefs$
|
2506
|
+
primary: globalRefs$f.colors.primary,
|
2507
|
+
secondary: globalRefs$f.colors.secondary,
|
2508
|
+
success: globalRefs$f.colors.success,
|
2509
|
+
error: globalRefs$f.colors.error,
|
2510
|
+
surface: globalRefs$f.colors.surface,
|
2508
2511
|
};
|
2509
2512
|
|
2510
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2513
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$A);
|
2511
2514
|
|
2512
2515
|
const button = {
|
2513
2516
|
...helperTheme$3,
|
2514
2517
|
|
2515
|
-
[compVars$4.fontFamily]: globalRefs$
|
2518
|
+
[compVars$4.fontFamily]: globalRefs$f.fonts.font1.family,
|
2516
2519
|
|
2517
2520
|
[compVars$4.cursor]: 'pointer',
|
2518
2521
|
[compVars$4.hostHeight]: '3em',
|
2519
2522
|
[compVars$4.hostWidth]: 'auto',
|
2520
2523
|
|
2521
|
-
[compVars$4.borderRadius]: globalRefs$
|
2522
|
-
[compVars$4.borderWidth]: globalRefs$
|
2524
|
+
[compVars$4.borderRadius]: globalRefs$f.radius.sm,
|
2525
|
+
[compVars$4.borderWidth]: globalRefs$f.border.xs,
|
2523
2526
|
[compVars$4.borderStyle]: 'solid',
|
2524
2527
|
[compVars$4.borderColor]: 'transparent',
|
2525
2528
|
|
@@ -2555,10 +2558,10 @@ const button = {
|
|
2555
2558
|
},
|
2556
2559
|
|
2557
2560
|
_disabled: {
|
2558
|
-
[helperVars$3.main]: globalRefs$
|
2559
|
-
[helperVars$3.dark]: globalRefs$
|
2560
|
-
[helperVars$3.light]: globalRefs$
|
2561
|
-
[helperVars$3.contrast]: globalRefs$
|
2561
|
+
[helperVars$3.main]: globalRefs$f.colors.surface.main,
|
2562
|
+
[helperVars$3.dark]: globalRefs$f.colors.surface.dark,
|
2563
|
+
[helperVars$3.light]: globalRefs$f.colors.surface.light,
|
2564
|
+
[helperVars$3.contrast]: globalRefs$f.colors.surface.contrast,
|
2562
2565
|
},
|
2563
2566
|
|
2564
2567
|
variant: {
|
@@ -2600,11 +2603,11 @@ const button = {
|
|
2600
2603
|
},
|
2601
2604
|
|
2602
2605
|
_focused: {
|
2603
|
-
[compVars$4.outlineColor]: globalRefs$
|
2606
|
+
[compVars$4.outlineColor]: globalRefs$f.colors.surface.main,
|
2604
2607
|
},
|
2605
2608
|
};
|
2606
2609
|
|
2607
|
-
const vars$
|
2610
|
+
const vars$t = {
|
2608
2611
|
...compVars$4,
|
2609
2612
|
...helperVars$3,
|
2610
2613
|
};
|
@@ -2612,7 +2615,7 @@ const vars$s = {
|
|
2612
2615
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2613
2616
|
__proto__: null,
|
2614
2617
|
default: button,
|
2615
|
-
vars: vars$
|
2618
|
+
vars: vars$t
|
2616
2619
|
});
|
2617
2620
|
|
2618
2621
|
const { host: host$f, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
|
@@ -2770,7 +2773,7 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
2770
2773
|
${resetInputFieldUnderlayingBorder(name)}
|
2771
2774
|
`;
|
2772
2775
|
|
2773
|
-
const componentName$
|
2776
|
+
const componentName$z = getComponentName('text-field');
|
2774
2777
|
|
2775
2778
|
const observedAttrs = ['type'];
|
2776
2779
|
|
@@ -2819,26 +2822,26 @@ const TextFieldClass = compose(
|
|
2819
2822
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2820
2823
|
`,
|
2821
2824
|
excludeAttrsSync: ['tabindex'],
|
2822
|
-
componentName: componentName$
|
2825
|
+
componentName: componentName$z,
|
2823
2826
|
})
|
2824
2827
|
);
|
2825
2828
|
|
2826
|
-
const componentName$
|
2827
|
-
const globalRefs$
|
2829
|
+
const componentName$y = getComponentName('input-wrapper');
|
2830
|
+
const globalRefs$e = getThemeRefs(globals);
|
2828
2831
|
|
2829
|
-
const [theme$1, refs, vars$
|
2832
|
+
const [theme$1, refs, vars$s] = createHelperVars(
|
2830
2833
|
{
|
2831
|
-
labelTextColor: globalRefs$
|
2832
|
-
valueTextColor: globalRefs$
|
2833
|
-
placeholderTextColor: globalRefs$
|
2834
|
+
labelTextColor: globalRefs$e.colors.surface.contrast,
|
2835
|
+
valueTextColor: globalRefs$e.colors.surface.contrast,
|
2836
|
+
placeholderTextColor: globalRefs$e.colors.surface.main,
|
2834
2837
|
requiredIndicator: "'*'",
|
2835
|
-
errorMessageTextColor: globalRefs$
|
2838
|
+
errorMessageTextColor: globalRefs$e.colors.error.main,
|
2836
2839
|
|
2837
|
-
borderWidth: globalRefs$
|
2838
|
-
borderRadius: globalRefs$
|
2840
|
+
borderWidth: globalRefs$e.border.xs,
|
2841
|
+
borderRadius: globalRefs$e.radius.xs,
|
2839
2842
|
borderColor: 'transparent',
|
2840
2843
|
|
2841
|
-
outlineWidth: globalRefs$
|
2844
|
+
outlineWidth: globalRefs$e.border.sm,
|
2842
2845
|
outlineStyle: 'solid',
|
2843
2846
|
outlineColor: 'transparent',
|
2844
2847
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -2849,9 +2852,9 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
2849
2852
|
horizontalPadding: '0.5em',
|
2850
2853
|
verticalPadding: '0.5em',
|
2851
2854
|
|
2852
|
-
backgroundColor: globalRefs$
|
2855
|
+
backgroundColor: globalRefs$e.colors.surface.light,
|
2853
2856
|
|
2854
|
-
fontFamily: globalRefs$
|
2857
|
+
fontFamily: globalRefs$e.fonts.font1.family,
|
2855
2858
|
|
2856
2859
|
size: {
|
2857
2860
|
xs: { fontSize: '12px' },
|
@@ -2865,69 +2868,69 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
2865
2868
|
},
|
2866
2869
|
|
2867
2870
|
_focused: {
|
2868
|
-
outlineColor: globalRefs$
|
2871
|
+
outlineColor: globalRefs$e.colors.surface.main,
|
2869
2872
|
_invalid: {
|
2870
|
-
outlineColor: globalRefs$
|
2873
|
+
outlineColor: globalRefs$e.colors.error.main,
|
2871
2874
|
},
|
2872
2875
|
},
|
2873
2876
|
|
2874
2877
|
_bordered: {
|
2875
|
-
outlineWidth: globalRefs$
|
2876
|
-
borderColor: globalRefs$
|
2878
|
+
outlineWidth: globalRefs$e.border.xs,
|
2879
|
+
borderColor: globalRefs$e.colors.surface.main,
|
2877
2880
|
borderStyle: 'solid',
|
2878
2881
|
_invalid: {
|
2879
|
-
borderColor: globalRefs$
|
2882
|
+
borderColor: globalRefs$e.colors.error.main,
|
2880
2883
|
},
|
2881
2884
|
},
|
2882
2885
|
|
2883
2886
|
_disabled: {
|
2884
|
-
labelTextColor: globalRefs$
|
2885
|
-
borderColor: globalRefs$
|
2886
|
-
valueTextColor: globalRefs$
|
2887
|
-
placeholderTextColor: globalRefs$
|
2888
|
-
backgroundColor: globalRefs$
|
2887
|
+
labelTextColor: globalRefs$e.colors.surface.main,
|
2888
|
+
borderColor: globalRefs$e.colors.surface.main,
|
2889
|
+
valueTextColor: globalRefs$e.colors.surface.dark,
|
2890
|
+
placeholderTextColor: globalRefs$e.colors.surface.dark,
|
2891
|
+
backgroundColor: globalRefs$e.colors.surface.main,
|
2889
2892
|
},
|
2890
2893
|
},
|
2891
|
-
componentName$
|
2894
|
+
componentName$y
|
2892
2895
|
);
|
2893
2896
|
|
2894
2897
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
2895
2898
|
__proto__: null,
|
2896
2899
|
default: theme$1,
|
2897
2900
|
refs: refs,
|
2898
|
-
vars: vars$
|
2901
|
+
vars: vars$s
|
2899
2902
|
});
|
2900
2903
|
|
2901
|
-
const vars$
|
2904
|
+
const vars$r = TextFieldClass.cssVarList;
|
2902
2905
|
|
2903
2906
|
const textField = {
|
2904
|
-
[vars$
|
2905
|
-
[vars$
|
2906
|
-
[vars$
|
2907
|
-
[vars$
|
2908
|
-
[vars$
|
2909
|
-
[vars$
|
2910
|
-
[vars$
|
2911
|
-
[vars$
|
2912
|
-
[vars$
|
2913
|
-
[vars$
|
2914
|
-
[vars$
|
2915
|
-
[vars$
|
2916
|
-
[vars$
|
2917
|
-
[vars$
|
2918
|
-
[vars$
|
2919
|
-
[vars$
|
2920
|
-
[vars$
|
2921
|
-
[vars$
|
2922
|
-
[vars$
|
2923
|
-
[vars$
|
2907
|
+
[vars$r.hostWidth]: refs.width,
|
2908
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
2909
|
+
[vars$r.fontSize]: refs.fontSize,
|
2910
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
2911
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
2912
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
2913
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
2914
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
2915
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
2916
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
2917
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
2918
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
2919
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
2920
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
2921
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
2922
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
2923
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
2924
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
2925
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
2926
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
2924
2927
|
};
|
2925
2928
|
|
2926
2929
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
2927
2930
|
__proto__: null,
|
2928
2931
|
default: textField,
|
2929
2932
|
textField: textField,
|
2930
|
-
vars: vars$
|
2933
|
+
vars: vars$r
|
2931
2934
|
});
|
2932
2935
|
|
2933
2936
|
const passwordDraggableMixin = (superclass) =>
|
@@ -2964,7 +2967,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2964
2967
|
}
|
2965
2968
|
};
|
2966
2969
|
|
2967
|
-
const componentName$
|
2970
|
+
const componentName$x = getComponentName('password');
|
2968
2971
|
|
2969
2972
|
const {
|
2970
2973
|
host: host$e,
|
@@ -3093,44 +3096,44 @@ const PasswordClass = compose(
|
|
3093
3096
|
}
|
3094
3097
|
`,
|
3095
3098
|
excludeAttrsSync: ['tabindex'],
|
3096
|
-
componentName: componentName$
|
3099
|
+
componentName: componentName$x,
|
3097
3100
|
})
|
3098
3101
|
);
|
3099
3102
|
|
3100
|
-
const globalRefs$
|
3101
|
-
const vars$
|
3103
|
+
const globalRefs$d = getThemeRefs(globals);
|
3104
|
+
const vars$q = PasswordClass.cssVarList;
|
3102
3105
|
|
3103
3106
|
const password = {
|
3104
|
-
[vars$
|
3105
|
-
[vars$
|
3106
|
-
[vars$
|
3107
|
-
[vars$
|
3108
|
-
[vars$
|
3109
|
-
[vars$
|
3110
|
-
[vars$
|
3111
|
-
[vars$
|
3112
|
-
[vars$
|
3113
|
-
[vars$
|
3114
|
-
[vars$
|
3115
|
-
[vars$
|
3116
|
-
[vars$
|
3117
|
-
[vars$
|
3118
|
-
[vars$
|
3119
|
-
[vars$
|
3120
|
-
[vars$
|
3121
|
-
[vars$
|
3122
|
-
[vars$
|
3123
|
-
[vars$
|
3124
|
-
[vars$
|
3107
|
+
[vars$q.hostWidth]: refs.width,
|
3108
|
+
[vars$q.fontSize]: refs.fontSize,
|
3109
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
3110
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
3111
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
3112
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
3113
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
3114
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
3115
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
3116
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
3117
|
+
[vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3118
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
3119
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
3120
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
3121
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
3122
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
3123
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
3124
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
3125
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
3126
|
+
[vars$q.revealButtonOffset]: globalRefs$d.spacing.md,
|
3127
|
+
[vars$q.revealButtonSize]: refs.toggleButtonSize,
|
3125
3128
|
};
|
3126
3129
|
|
3127
3130
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3128
3131
|
__proto__: null,
|
3129
3132
|
default: password,
|
3130
|
-
vars: vars$
|
3133
|
+
vars: vars$q
|
3131
3134
|
});
|
3132
3135
|
|
3133
|
-
const componentName$
|
3136
|
+
const componentName$w = getComponentName('number-field');
|
3134
3137
|
|
3135
3138
|
const NumberFieldClass = compose(
|
3136
3139
|
createStyleMixin({
|
@@ -3155,42 +3158,42 @@ const NumberFieldClass = compose(
|
|
3155
3158
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3156
3159
|
`,
|
3157
3160
|
excludeAttrsSync: ['tabindex'],
|
3158
|
-
componentName: componentName$
|
3161
|
+
componentName: componentName$w,
|
3159
3162
|
})
|
3160
3163
|
);
|
3161
3164
|
|
3162
|
-
const vars$
|
3165
|
+
const vars$p = NumberFieldClass.cssVarList;
|
3163
3166
|
|
3164
3167
|
const numberField = {
|
3165
|
-
[vars$
|
3166
|
-
[vars$
|
3167
|
-
[vars$
|
3168
|
-
[vars$
|
3169
|
-
[vars$
|
3170
|
-
[vars$
|
3171
|
-
[vars$
|
3172
|
-
[vars$
|
3173
|
-
[vars$
|
3174
|
-
[vars$
|
3175
|
-
[vars$
|
3176
|
-
[vars$
|
3177
|
-
[vars$
|
3178
|
-
[vars$
|
3179
|
-
[vars$
|
3180
|
-
[vars$
|
3181
|
-
[vars$
|
3182
|
-
[vars$
|
3183
|
-
[vars$
|
3184
|
-
[vars$
|
3168
|
+
[vars$p.hostWidth]: refs.width,
|
3169
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
3170
|
+
[vars$p.fontSize]: refs.fontSize,
|
3171
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
3172
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3173
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
3174
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
3175
|
+
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
3176
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
3177
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
3178
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
3179
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
3180
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
3181
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
3182
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
3183
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
3184
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
3185
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
3186
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
3187
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
3185
3188
|
};
|
3186
3189
|
|
3187
3190
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3188
3191
|
__proto__: null,
|
3189
3192
|
default: numberField,
|
3190
|
-
vars: vars$
|
3193
|
+
vars: vars$p
|
3191
3194
|
});
|
3192
3195
|
|
3193
|
-
const componentName$
|
3196
|
+
const componentName$v = getComponentName('email-field');
|
3194
3197
|
|
3195
3198
|
const customMixin$6 = (superclass) =>
|
3196
3199
|
class EmailFieldMixinClass extends superclass {
|
@@ -3224,42 +3227,42 @@ const EmailFieldClass = compose(
|
|
3224
3227
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3225
3228
|
`,
|
3226
3229
|
excludeAttrsSync: ['tabindex'],
|
3227
|
-
componentName: componentName$
|
3230
|
+
componentName: componentName$v,
|
3228
3231
|
})
|
3229
3232
|
);
|
3230
3233
|
|
3231
|
-
const vars$
|
3234
|
+
const vars$o = EmailFieldClass.cssVarList;
|
3232
3235
|
|
3233
3236
|
const emailField = {
|
3234
|
-
[vars$
|
3235
|
-
[vars$
|
3236
|
-
[vars$
|
3237
|
-
[vars$
|
3238
|
-
[vars$
|
3239
|
-
[vars$
|
3240
|
-
[vars$
|
3241
|
-
[vars$
|
3242
|
-
[vars$
|
3243
|
-
[vars$
|
3244
|
-
[vars$
|
3245
|
-
[vars$
|
3246
|
-
[vars$
|
3247
|
-
[vars$
|
3248
|
-
[vars$
|
3249
|
-
[vars$
|
3250
|
-
[vars$
|
3251
|
-
[vars$
|
3252
|
-
[vars$
|
3253
|
-
[vars$
|
3237
|
+
[vars$o.hostWidth]: refs.width,
|
3238
|
+
[vars$o.hostMinWidth]: refs.minWidth,
|
3239
|
+
[vars$o.fontSize]: refs.fontSize,
|
3240
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
3241
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
3242
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
3243
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
3244
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
3245
|
+
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
3246
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
3247
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
3248
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
3249
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
3250
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
3251
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
3252
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
3253
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
3254
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
3255
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
3256
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
3254
3257
|
};
|
3255
3258
|
|
3256
3259
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3257
3260
|
__proto__: null,
|
3258
3261
|
default: emailField,
|
3259
|
-
vars: vars$
|
3262
|
+
vars: vars$o
|
3260
3263
|
});
|
3261
3264
|
|
3262
|
-
const componentName$
|
3265
|
+
const componentName$u = getComponentName('text-area');
|
3263
3266
|
|
3264
3267
|
const {
|
3265
3268
|
host: host$d,
|
@@ -3332,48 +3335,48 @@ const TextAreaClass = compose(
|
|
3332
3335
|
${resetInputCursor('vaadin-text-area')}
|
3333
3336
|
`,
|
3334
3337
|
excludeAttrsSync: ['tabindex'],
|
3335
|
-
componentName: componentName$
|
3338
|
+
componentName: componentName$u,
|
3336
3339
|
})
|
3337
3340
|
);
|
3338
3341
|
|
3339
|
-
const globalRefs$
|
3340
|
-
const vars$
|
3342
|
+
const globalRefs$c = getThemeRefs(globals);
|
3343
|
+
const vars$n = TextAreaClass.cssVarList;
|
3341
3344
|
|
3342
3345
|
const textArea = {
|
3343
|
-
[vars$
|
3344
|
-
[vars$
|
3345
|
-
[vars$
|
3346
|
-
[vars$
|
3347
|
-
[vars$
|
3348
|
-
[vars$
|
3349
|
-
[vars$
|
3350
|
-
[vars$
|
3351
|
-
[vars$
|
3352
|
-
[vars$
|
3353
|
-
[vars$
|
3354
|
-
[vars$
|
3355
|
-
[vars$
|
3356
|
-
[vars$
|
3357
|
-
[vars$
|
3358
|
-
[vars$
|
3359
|
-
[vars$
|
3360
|
-
[vars$
|
3361
|
-
[vars$
|
3362
|
-
[vars$
|
3346
|
+
[vars$n.hostWidth]: refs.width,
|
3347
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
3348
|
+
[vars$n.fontSize]: refs.fontSize,
|
3349
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
3350
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
3351
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
3352
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
3353
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
3354
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
3355
|
+
[vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3356
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
3357
|
+
[vars$n.inputBorderWidth]: refs.borderWidth,
|
3358
|
+
[vars$n.inputBorderStyle]: refs.borderStyle,
|
3359
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
3360
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
3361
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
3362
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
3363
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
3364
|
+
[vars$n.inputResizeType]: 'vertical',
|
3365
|
+
[vars$n.inputMinHeight]: '5em',
|
3363
3366
|
|
3364
3367
|
_disabled: {
|
3365
|
-
[vars$
|
3368
|
+
[vars$n.inputBackgroundColor]: globalRefs$c.colors.surface.light,
|
3366
3369
|
},
|
3367
3370
|
|
3368
3371
|
_readonly: {
|
3369
|
-
[vars$
|
3372
|
+
[vars$n.inputResizeType]: 'none',
|
3370
3373
|
},
|
3371
3374
|
};
|
3372
3375
|
|
3373
3376
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3374
3377
|
__proto__: null,
|
3375
3378
|
default: textArea,
|
3376
|
-
vars: vars$
|
3379
|
+
vars: vars$n
|
3377
3380
|
});
|
3378
3381
|
|
3379
3382
|
const createBaseInputClass = (...args) =>
|
@@ -3384,9 +3387,9 @@ const createBaseInputClass = (...args) =>
|
|
3384
3387
|
inputEventsDispatchingMixin
|
3385
3388
|
)(createBaseClass(...args));
|
3386
3389
|
|
3387
|
-
const componentName$
|
3390
|
+
const componentName$t = getComponentName('boolean-field-internal');
|
3388
3391
|
|
3389
|
-
createBaseInputClass({ componentName: componentName$
|
3392
|
+
createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
|
3390
3393
|
|
3391
3394
|
const booleanFieldMixin = (superclass) =>
|
3392
3395
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3395,14 +3398,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3395
3398
|
|
3396
3399
|
const template = document.createElement('template');
|
3397
3400
|
template.innerHTML = `
|
3398
|
-
<${componentName$
|
3401
|
+
<${componentName$t}
|
3399
3402
|
tabindex="-1"
|
3400
3403
|
slot="input"
|
3401
|
-
></${componentName$
|
3404
|
+
></${componentName$t}>
|
3402
3405
|
`;
|
3403
3406
|
|
3404
3407
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3405
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3408
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$t);
|
3406
3409
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3407
3410
|
|
3408
3411
|
forwardAttrs(this, this.inputElement, {
|
@@ -3472,7 +3475,7 @@ descope-boolean-field-internal {
|
|
3472
3475
|
}
|
3473
3476
|
`;
|
3474
3477
|
|
3475
|
-
const componentName$
|
3478
|
+
const componentName$s = getComponentName('checkbox');
|
3476
3479
|
|
3477
3480
|
const {
|
3478
3481
|
host: host$c,
|
@@ -3573,50 +3576,50 @@ const CheckboxClass = compose(
|
|
3573
3576
|
}
|
3574
3577
|
`,
|
3575
3578
|
excludeAttrsSync: ['label', 'tabindex'],
|
3576
|
-
componentName: componentName$
|
3579
|
+
componentName: componentName$s,
|
3577
3580
|
})
|
3578
3581
|
);
|
3579
3582
|
|
3580
|
-
const vars$
|
3583
|
+
const vars$m = CheckboxClass.cssVarList;
|
3581
3584
|
const checkboxSize = '1.35em';
|
3582
3585
|
|
3583
3586
|
const checkbox = {
|
3584
|
-
[vars$
|
3585
|
-
[vars$
|
3586
|
-
[vars$
|
3587
|
-
[vars$
|
3588
|
-
[vars$
|
3589
|
-
[vars$
|
3590
|
-
[vars$
|
3591
|
-
[vars$
|
3592
|
-
[vars$
|
3593
|
-
[vars$
|
3594
|
-
[vars$
|
3595
|
-
[vars$
|
3596
|
-
[vars$
|
3597
|
-
[vars$
|
3598
|
-
[vars$
|
3599
|
-
[vars$
|
3600
|
-
[vars$
|
3601
|
-
[vars$
|
3602
|
-
[vars$
|
3587
|
+
[vars$m.hostWidth]: refs.width,
|
3588
|
+
[vars$m.fontSize]: refs.fontSize,
|
3589
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
3590
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
3591
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
3592
|
+
[vars$m.labelFontWeight]: '400',
|
3593
|
+
[vars$m.labelLineHeight]: checkboxSize,
|
3594
|
+
[vars$m.labelSpacing]: '1em',
|
3595
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
3596
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
3597
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
3598
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
3599
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
3600
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
3601
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
3602
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
3603
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
3604
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
3605
|
+
[vars$m.inputSize]: checkboxSize,
|
3603
3606
|
|
3604
3607
|
_checked: {
|
3605
|
-
[vars$
|
3608
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
3606
3609
|
},
|
3607
3610
|
|
3608
3611
|
_disabled: {
|
3609
|
-
[vars$
|
3612
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
3610
3613
|
},
|
3611
3614
|
};
|
3612
3615
|
|
3613
3616
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3614
3617
|
__proto__: null,
|
3615
3618
|
default: checkbox,
|
3616
|
-
vars: vars$
|
3619
|
+
vars: vars$m
|
3617
3620
|
});
|
3618
3621
|
|
3619
|
-
const componentName$
|
3622
|
+
const componentName$r = getComponentName('switch-toggle');
|
3620
3623
|
|
3621
3624
|
const {
|
3622
3625
|
host: host$b,
|
@@ -3743,82 +3746,82 @@ const SwitchToggleClass = compose(
|
|
3743
3746
|
}
|
3744
3747
|
`,
|
3745
3748
|
excludeAttrsSync: ['label', 'tabindex'],
|
3746
|
-
componentName: componentName$
|
3749
|
+
componentName: componentName$r,
|
3747
3750
|
})
|
3748
3751
|
);
|
3749
3752
|
|
3750
3753
|
const knobMargin = '2px';
|
3751
3754
|
const checkboxHeight = '1.25em';
|
3752
3755
|
|
3753
|
-
const globalRefs$
|
3754
|
-
const vars$
|
3756
|
+
const globalRefs$b = getThemeRefs(globals);
|
3757
|
+
const vars$l = SwitchToggleClass.cssVarList;
|
3755
3758
|
|
3756
3759
|
const switchToggle = {
|
3757
|
-
[vars$
|
3758
|
-
[vars$
|
3759
|
-
[vars$
|
3760
|
-
|
3761
|
-
[vars$
|
3762
|
-
[vars$
|
3763
|
-
[vars$
|
3764
|
-
[vars$
|
3765
|
-
|
3766
|
-
[vars$
|
3767
|
-
[vars$
|
3768
|
-
[vars$
|
3769
|
-
[vars$
|
3770
|
-
[vars$
|
3771
|
-
[vars$
|
3772
|
-
[vars$
|
3773
|
-
|
3774
|
-
[vars$
|
3775
|
-
[vars$
|
3776
|
-
[vars$
|
3777
|
-
[vars$
|
3778
|
-
[vars$
|
3779
|
-
[vars$
|
3780
|
-
|
3781
|
-
[vars$
|
3782
|
-
[vars$
|
3783
|
-
[vars$
|
3784
|
-
[vars$
|
3785
|
-
[vars$
|
3786
|
-
[vars$
|
3760
|
+
[vars$l.hostWidth]: refs.width,
|
3761
|
+
[vars$l.fontSize]: refs.fontSize,
|
3762
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
3763
|
+
|
3764
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
3765
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
3766
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
3767
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
3768
|
+
|
3769
|
+
[vars$l.trackBorderStyle]: refs.borderStyle,
|
3770
|
+
[vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3771
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
3772
|
+
[vars$l.trackBackgroundColor]: 'none',
|
3773
|
+
[vars$l.trackBorderRadius]: globalRefs$b.radius.md,
|
3774
|
+
[vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3775
|
+
[vars$l.trackHeight]: checkboxHeight,
|
3776
|
+
|
3777
|
+
[vars$l.knobSize]: `calc(1em - ${knobMargin})`,
|
3778
|
+
[vars$l.knobRadius]: '50%',
|
3779
|
+
[vars$l.knobTopOffset]: '1px',
|
3780
|
+
[vars$l.knobLeftOffset]: knobMargin,
|
3781
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
3782
|
+
[vars$l.knobTransitionDuration]: '0.3s',
|
3783
|
+
|
3784
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
3785
|
+
[vars$l.labelFontWeight]: '400',
|
3786
|
+
[vars$l.labelLineHeight]: '1.35em',
|
3787
|
+
[vars$l.labelSpacing]: '1em',
|
3788
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
3789
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
3787
3790
|
|
3788
3791
|
_checked: {
|
3789
|
-
[vars$
|
3790
|
-
[vars$
|
3791
|
-
[vars$
|
3792
|
-
[vars$
|
3793
|
-
[vars$
|
3792
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
3793
|
+
[vars$l.trackBackgroundColor]: refs.backgroundColor,
|
3794
|
+
[vars$l.knobLeftOffset]: `calc(100% - var(${vars$l.knobSize}) - ${knobMargin})`,
|
3795
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
3796
|
+
[vars$l.knobTextColor]: refs.valueTextColor,
|
3794
3797
|
},
|
3795
3798
|
|
3796
3799
|
_disabled: {
|
3797
|
-
[vars$
|
3798
|
-
[vars$
|
3799
|
-
[vars$
|
3800
|
-
[vars$
|
3800
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
3801
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.surface.main,
|
3802
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
3803
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
3801
3804
|
_checked: {
|
3802
|
-
[vars$
|
3803
|
-
[vars$
|
3805
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
3806
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
3804
3807
|
},
|
3805
3808
|
},
|
3806
3809
|
|
3807
3810
|
_invalid: {
|
3808
|
-
[vars$
|
3809
|
-
[vars$
|
3811
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
|
3812
|
+
[vars$l.knobColor]: globalRefs$b.colors.error.main,
|
3810
3813
|
},
|
3811
3814
|
};
|
3812
3815
|
|
3813
3816
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
3814
3817
|
__proto__: null,
|
3815
3818
|
default: switchToggle,
|
3816
|
-
vars: vars$
|
3819
|
+
vars: vars$l
|
3817
3820
|
});
|
3818
3821
|
|
3819
|
-
const componentName$
|
3822
|
+
const componentName$q = getComponentName('container');
|
3820
3823
|
|
3821
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3824
|
+
class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
|
3822
3825
|
constructor() {
|
3823
3826
|
super();
|
3824
3827
|
|
@@ -3870,7 +3873,7 @@ const ContainerClass = compose(
|
|
3870
3873
|
componentNameValidationMixin
|
3871
3874
|
)(RawContainer);
|
3872
3875
|
|
3873
|
-
const globalRefs$
|
3876
|
+
const globalRefs$a = getThemeRefs(globals);
|
3874
3877
|
|
3875
3878
|
const compVars$3 = ContainerClass.cssVarList;
|
3876
3879
|
|
@@ -3892,18 +3895,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
3892
3895
|
horizontalAlignment,
|
3893
3896
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
3894
3897
|
},
|
3895
|
-
componentName$
|
3898
|
+
componentName$q
|
3896
3899
|
);
|
3897
3900
|
|
3898
|
-
const { shadowColor } = helperRefs$2;
|
3901
|
+
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
3899
3902
|
|
3900
3903
|
const container = {
|
3901
3904
|
...helperTheme$2,
|
3902
3905
|
|
3903
3906
|
[compVars$3.hostWidth]: '100%',
|
3904
3907
|
[compVars$3.boxShadow]: 'none',
|
3905
|
-
[compVars$3.backgroundColor]: globalRefs$
|
3906
|
-
[compVars$3.color]: globalRefs$
|
3908
|
+
[compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
|
3909
|
+
[compVars$3.color]: globalRefs$a.colors.surface.contrast,
|
3907
3910
|
[compVars$3.borderRadius]: '0px',
|
3908
3911
|
|
3909
3912
|
verticalPadding: {
|
@@ -3950,34 +3953,34 @@ const container = {
|
|
3950
3953
|
|
3951
3954
|
shadow: {
|
3952
3955
|
sm: {
|
3953
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3956
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
|
3954
3957
|
},
|
3955
3958
|
md: {
|
3956
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3959
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
|
3957
3960
|
},
|
3958
3961
|
lg: {
|
3959
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3962
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
|
3960
3963
|
},
|
3961
3964
|
xl: {
|
3962
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3965
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
|
3963
3966
|
},
|
3964
3967
|
'2xl': {
|
3965
3968
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
3966
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3969
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
|
3967
3970
|
},
|
3968
3971
|
},
|
3969
3972
|
|
3970
3973
|
borderRadius: {
|
3971
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
3972
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
3973
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
3974
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
3975
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
3976
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
3974
|
+
sm: { [compVars$3.borderRadius]: globalRefs$a.radius.sm },
|
3975
|
+
md: { [compVars$3.borderRadius]: globalRefs$a.radius.md },
|
3976
|
+
lg: { [compVars$3.borderRadius]: globalRefs$a.radius.lg },
|
3977
|
+
xl: { [compVars$3.borderRadius]: globalRefs$a.radius.xl },
|
3978
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$a.radius['2xl'] },
|
3979
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$a.radius['3xl'] },
|
3977
3980
|
},
|
3978
3981
|
};
|
3979
3982
|
|
3980
|
-
const vars$
|
3983
|
+
const vars$k = {
|
3981
3984
|
...compVars$3,
|
3982
3985
|
...helperVars$2,
|
3983
3986
|
};
|
@@ -3985,7 +3988,7 @@ const vars$j = {
|
|
3985
3988
|
var container$1 = /*#__PURE__*/Object.freeze({
|
3986
3989
|
__proto__: null,
|
3987
3990
|
default: container,
|
3988
|
-
vars: vars$
|
3991
|
+
vars: vars$k
|
3989
3992
|
});
|
3990
3993
|
|
3991
3994
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4038,51 +4041,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4038
4041
|
return CssVarImageClass;
|
4039
4042
|
};
|
4040
4043
|
|
4041
|
-
const componentName$
|
4044
|
+
const componentName$p = getComponentName('logo');
|
4042
4045
|
|
4043
4046
|
const LogoClass = createCssVarImageClass({
|
4044
|
-
componentName: componentName$
|
4047
|
+
componentName: componentName$p,
|
4045
4048
|
varName: 'url',
|
4046
4049
|
fallbackVarName: 'fallbackUrl',
|
4047
4050
|
});
|
4048
4051
|
|
4049
|
-
const vars$
|
4052
|
+
const vars$j = LogoClass.cssVarList;
|
4050
4053
|
|
4051
4054
|
const logo$1 = {
|
4052
|
-
[vars$
|
4055
|
+
[vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4053
4056
|
};
|
4054
4057
|
|
4055
4058
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
4056
4059
|
__proto__: null,
|
4057
4060
|
default: logo$1,
|
4058
|
-
vars: vars$
|
4061
|
+
vars: vars$j
|
4059
4062
|
});
|
4060
4063
|
|
4061
|
-
const componentName$
|
4064
|
+
const componentName$o = getComponentName('totp-image');
|
4062
4065
|
|
4063
4066
|
const TotpImageClass = createCssVarImageClass({
|
4064
|
-
componentName: componentName$
|
4067
|
+
componentName: componentName$o,
|
4065
4068
|
varName: 'url',
|
4066
4069
|
fallbackVarName: 'fallbackUrl',
|
4067
4070
|
});
|
4068
4071
|
|
4069
|
-
const vars$
|
4072
|
+
const vars$i = TotpImageClass.cssVarList;
|
4070
4073
|
|
4071
4074
|
const logo = {
|
4072
|
-
[vars$
|
4075
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4073
4076
|
};
|
4074
4077
|
|
4075
4078
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4076
4079
|
__proto__: null,
|
4077
4080
|
default: logo,
|
4078
|
-
vars: vars$
|
4081
|
+
vars: vars$i
|
4079
4082
|
});
|
4080
4083
|
|
4081
4084
|
// eslint-disable-next-line max-classes-per-file
|
4082
4085
|
|
4083
|
-
const componentName$
|
4086
|
+
const componentName$n = getComponentName('text');
|
4084
4087
|
|
4085
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4088
|
+
class RawText extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
|
4086
4089
|
constructor() {
|
4087
4090
|
super();
|
4088
4091
|
|
@@ -4141,98 +4144,98 @@ const TextClass = compose(
|
|
4141
4144
|
customTextMixin
|
4142
4145
|
)(RawText);
|
4143
4146
|
|
4144
|
-
const globalRefs$
|
4145
|
-
const vars$
|
4147
|
+
const globalRefs$9 = getThemeRefs(globals);
|
4148
|
+
const vars$h = TextClass.cssVarList;
|
4146
4149
|
|
4147
4150
|
const text$2 = {
|
4148
|
-
[vars$
|
4149
|
-
[vars$
|
4150
|
-
[vars$
|
4151
|
+
[vars$h.textLineHeight]: '1.35em',
|
4152
|
+
[vars$h.textAlign]: 'left',
|
4153
|
+
[vars$h.textColor]: globalRefs$9.colors.surface.dark,
|
4151
4154
|
variant: {
|
4152
4155
|
h1: {
|
4153
|
-
[vars$
|
4154
|
-
[vars$
|
4155
|
-
[vars$
|
4156
|
+
[vars$h.fontSize]: globalRefs$9.typography.h1.size,
|
4157
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h1.weight,
|
4158
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h1.font,
|
4156
4159
|
},
|
4157
4160
|
h2: {
|
4158
|
-
[vars$
|
4159
|
-
[vars$
|
4160
|
-
[vars$
|
4161
|
+
[vars$h.fontSize]: globalRefs$9.typography.h2.size,
|
4162
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h2.weight,
|
4163
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h2.font,
|
4161
4164
|
},
|
4162
4165
|
h3: {
|
4163
|
-
[vars$
|
4164
|
-
[vars$
|
4165
|
-
[vars$
|
4166
|
+
[vars$h.fontSize]: globalRefs$9.typography.h3.size,
|
4167
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h3.weight,
|
4168
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h3.font,
|
4166
4169
|
},
|
4167
4170
|
subtitle1: {
|
4168
|
-
[vars$
|
4169
|
-
[vars$
|
4170
|
-
[vars$
|
4171
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle1.size,
|
4172
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle1.weight,
|
4173
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle1.font,
|
4171
4174
|
},
|
4172
4175
|
subtitle2: {
|
4173
|
-
[vars$
|
4174
|
-
[vars$
|
4175
|
-
[vars$
|
4176
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle2.size,
|
4177
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle2.weight,
|
4178
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle2.font,
|
4176
4179
|
},
|
4177
4180
|
body1: {
|
4178
|
-
[vars$
|
4179
|
-
[vars$
|
4180
|
-
[vars$
|
4181
|
+
[vars$h.fontSize]: globalRefs$9.typography.body1.size,
|
4182
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body1.weight,
|
4183
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body1.font,
|
4181
4184
|
},
|
4182
4185
|
body2: {
|
4183
|
-
[vars$
|
4184
|
-
[vars$
|
4185
|
-
[vars$
|
4186
|
+
[vars$h.fontSize]: globalRefs$9.typography.body2.size,
|
4187
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body2.weight,
|
4188
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body2.font,
|
4186
4189
|
},
|
4187
4190
|
},
|
4188
4191
|
|
4189
4192
|
mode: {
|
4190
4193
|
primary: {
|
4191
|
-
[vars$
|
4194
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
4192
4195
|
},
|
4193
4196
|
secondary: {
|
4194
|
-
[vars$
|
4197
|
+
[vars$h.textColor]: globalRefs$9.colors.secondary.main,
|
4195
4198
|
},
|
4196
4199
|
error: {
|
4197
|
-
[vars$
|
4200
|
+
[vars$h.textColor]: globalRefs$9.colors.error.main,
|
4198
4201
|
},
|
4199
4202
|
success: {
|
4200
|
-
[vars$
|
4203
|
+
[vars$h.textColor]: globalRefs$9.colors.success.main,
|
4201
4204
|
},
|
4202
4205
|
},
|
4203
4206
|
|
4204
4207
|
textAlign: {
|
4205
|
-
right: { [vars$
|
4206
|
-
left: { [vars$
|
4207
|
-
center: { [vars$
|
4208
|
+
right: { [vars$h.textAlign]: 'right' },
|
4209
|
+
left: { [vars$h.textAlign]: 'left' },
|
4210
|
+
center: { [vars$h.textAlign]: 'center' },
|
4208
4211
|
},
|
4209
4212
|
|
4210
4213
|
_fullWidth: {
|
4211
|
-
[vars$
|
4214
|
+
[vars$h.hostWidth]: '100%',
|
4212
4215
|
},
|
4213
4216
|
|
4214
4217
|
_italic: {
|
4215
|
-
[vars$
|
4218
|
+
[vars$h.fontStyle]: 'italic',
|
4216
4219
|
},
|
4217
4220
|
|
4218
4221
|
_uppercase: {
|
4219
|
-
[vars$
|
4222
|
+
[vars$h.textTransform]: 'uppercase',
|
4220
4223
|
},
|
4221
4224
|
|
4222
4225
|
_lowercase: {
|
4223
|
-
[vars$
|
4226
|
+
[vars$h.textTransform]: 'lowercase',
|
4224
4227
|
},
|
4225
4228
|
};
|
4226
4229
|
|
4227
4230
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4228
4231
|
__proto__: null,
|
4229
4232
|
default: text$2,
|
4230
|
-
vars: vars$
|
4233
|
+
vars: vars$h
|
4231
4234
|
});
|
4232
4235
|
|
4233
|
-
const componentName$
|
4236
|
+
const componentName$m = getComponentName('link');
|
4234
4237
|
|
4235
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4238
|
+
class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
|
4236
4239
|
constructor() {
|
4237
4240
|
super();
|
4238
4241
|
|
@@ -4296,36 +4299,36 @@ const LinkClass = compose(
|
|
4296
4299
|
componentNameValidationMixin
|
4297
4300
|
)(RawLink);
|
4298
4301
|
|
4299
|
-
const globalRefs$
|
4300
|
-
const vars$
|
4302
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4303
|
+
const vars$g = LinkClass.cssVarList;
|
4301
4304
|
|
4302
4305
|
const link = {
|
4303
|
-
[vars$
|
4306
|
+
[vars$g.cursor]: 'pointer',
|
4304
4307
|
|
4305
|
-
[vars$
|
4308
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
4306
4309
|
|
4307
4310
|
textAlign: {
|
4308
|
-
right: { [vars$
|
4309
|
-
left: { [vars$
|
4310
|
-
center: { [vars$
|
4311
|
+
right: { [vars$g.textAlign]: 'right' },
|
4312
|
+
left: { [vars$g.textAlign]: 'left' },
|
4313
|
+
center: { [vars$g.textAlign]: 'center' },
|
4311
4314
|
},
|
4312
4315
|
|
4313
4316
|
_fullWidth: {
|
4314
|
-
[vars$
|
4317
|
+
[vars$g.hostWidth]: '100%',
|
4315
4318
|
},
|
4316
4319
|
|
4317
4320
|
mode: {
|
4318
4321
|
primary: {
|
4319
|
-
[vars$
|
4322
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
4320
4323
|
},
|
4321
4324
|
secondary: {
|
4322
|
-
[vars$
|
4325
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
4323
4326
|
},
|
4324
4327
|
error: {
|
4325
|
-
[vars$
|
4328
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
4326
4329
|
},
|
4327
4330
|
success: {
|
4328
|
-
[vars$
|
4331
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
4329
4332
|
},
|
4330
4333
|
},
|
4331
4334
|
};
|
@@ -4333,11 +4336,11 @@ const link = {
|
|
4333
4336
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4334
4337
|
__proto__: null,
|
4335
4338
|
default: link,
|
4336
|
-
vars: vars$
|
4339
|
+
vars: vars$g
|
4337
4340
|
});
|
4338
4341
|
|
4339
|
-
const componentName$
|
4340
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4342
|
+
const componentName$l = getComponentName('divider');
|
4343
|
+
class RawDivider extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
4341
4344
|
constructor() {
|
4342
4345
|
super();
|
4343
4346
|
|
@@ -4433,7 +4436,7 @@ const DividerClass = compose(
|
|
4433
4436
|
componentNameValidationMixin
|
4434
4437
|
)(RawDivider);
|
4435
4438
|
|
4436
|
-
const globalRefs$
|
4439
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4437
4440
|
const compVars$2 = DividerClass.cssVarList;
|
4438
4441
|
|
4439
4442
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -4441,7 +4444,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
4441
4444
|
thickness: '2px',
|
4442
4445
|
spacing: '10px',
|
4443
4446
|
},
|
4444
|
-
componentName$
|
4447
|
+
componentName$l
|
4445
4448
|
);
|
4446
4449
|
|
4447
4450
|
const divider = {
|
@@ -4451,7 +4454,7 @@ const divider = {
|
|
4451
4454
|
[compVars$2.flexDirection]: 'row',
|
4452
4455
|
[compVars$2.alignSelf]: 'stretch',
|
4453
4456
|
[compVars$2.hostWidth]: '100%',
|
4454
|
-
[compVars$2.stripeColor]: globalRefs$
|
4457
|
+
[compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
|
4455
4458
|
[compVars$2.stripeColorOpacity]: '0.5',
|
4456
4459
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4457
4460
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -4470,7 +4473,7 @@ const divider = {
|
|
4470
4473
|
},
|
4471
4474
|
};
|
4472
4475
|
|
4473
|
-
const vars$
|
4476
|
+
const vars$f = {
|
4474
4477
|
...compVars$2,
|
4475
4478
|
...helperVars$1,
|
4476
4479
|
};
|
@@ -4478,16 +4481,16 @@ const vars$e = {
|
|
4478
4481
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4479
4482
|
__proto__: null,
|
4480
4483
|
default: divider,
|
4481
|
-
vars: vars$
|
4484
|
+
vars: vars$f
|
4482
4485
|
});
|
4483
4486
|
|
4484
4487
|
/* eslint-disable no-param-reassign */
|
4485
4488
|
|
4486
|
-
const componentName$
|
4489
|
+
const componentName$k = getComponentName('passcode-internal');
|
4487
4490
|
|
4488
|
-
createBaseInputClass({ componentName: componentName$
|
4491
|
+
createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
|
4489
4492
|
|
4490
|
-
const componentName$
|
4493
|
+
const componentName$j = getComponentName('passcode');
|
4491
4494
|
|
4492
4495
|
const observedAttributes$3 = ['digits'];
|
4493
4496
|
|
@@ -4506,17 +4509,17 @@ const customMixin$5 = (superclass) =>
|
|
4506
4509
|
const template = document.createElement('template');
|
4507
4510
|
|
4508
4511
|
template.innerHTML = `
|
4509
|
-
<${componentName$
|
4512
|
+
<${componentName$k}
|
4510
4513
|
bordered="true"
|
4511
4514
|
name="code"
|
4512
4515
|
tabindex="-1"
|
4513
4516
|
slot="input"
|
4514
|
-
><slot></slot></${componentName$
|
4517
|
+
><slot></slot></${componentName$k}>
|
4515
4518
|
`;
|
4516
4519
|
|
4517
4520
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4518
4521
|
|
4519
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4522
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
4520
4523
|
|
4521
4524
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
4522
4525
|
}
|
@@ -4654,44 +4657,44 @@ const PasscodeClass = compose(
|
|
4654
4657
|
${resetInputCursor('vaadin-text-field')}
|
4655
4658
|
`,
|
4656
4659
|
excludeAttrsSync: ['tabindex'],
|
4657
|
-
componentName: componentName$
|
4660
|
+
componentName: componentName$j,
|
4658
4661
|
})
|
4659
4662
|
);
|
4660
4663
|
|
4661
|
-
const vars$
|
4664
|
+
const vars$e = PasscodeClass.cssVarList;
|
4662
4665
|
|
4663
4666
|
const passcode = {
|
4664
|
-
[vars$
|
4665
|
-
[vars$
|
4666
|
-
[vars$
|
4667
|
-
[vars$
|
4668
|
-
[vars$
|
4669
|
-
[vars$
|
4670
|
-
[vars$
|
4671
|
-
[vars$
|
4672
|
-
[vars$
|
4673
|
-
[vars$
|
4674
|
-
[vars$
|
4675
|
-
[vars$
|
4676
|
-
[vars$
|
4677
|
-
[vars$
|
4667
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
4668
|
+
[vars$e.fontSize]: refs.fontSize,
|
4669
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
4670
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
4671
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
4672
|
+
[vars$e.digitValueTextColor]: refs.valueTextColor,
|
4673
|
+
[vars$e.digitPadding]: '0',
|
4674
|
+
[vars$e.digitTextAlign]: 'center',
|
4675
|
+
[vars$e.digitSpacing]: '4px',
|
4676
|
+
[vars$e.hostWidth]: refs.width,
|
4677
|
+
[vars$e.digitOutlineColor]: 'transparent',
|
4678
|
+
[vars$e.digitOutlineWidth]: refs.outlineWidth,
|
4679
|
+
[vars$e.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
4680
|
+
[vars$e.digitSize]: refs.inputHeight,
|
4678
4681
|
|
4679
4682
|
_hideCursor: {
|
4680
|
-
[vars$
|
4683
|
+
[vars$e.digitCaretTextColor]: 'transparent',
|
4681
4684
|
},
|
4682
4685
|
};
|
4683
4686
|
|
4684
4687
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
4685
4688
|
__proto__: null,
|
4686
4689
|
default: passcode,
|
4687
|
-
vars: vars$
|
4690
|
+
vars: vars$e
|
4688
4691
|
});
|
4689
4692
|
|
4690
|
-
const componentName$
|
4693
|
+
const componentName$i = getComponentName('loader-linear');
|
4691
4694
|
|
4692
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4695
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
|
4693
4696
|
static get componentName() {
|
4694
|
-
return componentName$
|
4697
|
+
return componentName$i;
|
4695
4698
|
}
|
4696
4699
|
|
4697
4700
|
constructor() {
|
@@ -4752,54 +4755,54 @@ const LoaderLinearClass = compose(
|
|
4752
4755
|
componentNameValidationMixin
|
4753
4756
|
)(RawLoaderLinear);
|
4754
4757
|
|
4755
|
-
const globalRefs$
|
4756
|
-
const vars$
|
4758
|
+
const globalRefs$6 = getThemeRefs(globals);
|
4759
|
+
const vars$d = LoaderLinearClass.cssVarList;
|
4757
4760
|
|
4758
4761
|
const loaderLinear = {
|
4759
|
-
[vars$
|
4760
|
-
[vars$
|
4762
|
+
[vars$d.hostDisplay]: 'inline-block',
|
4763
|
+
[vars$d.hostWidth]: '100%',
|
4761
4764
|
|
4762
|
-
[vars$
|
4763
|
-
[vars$
|
4765
|
+
[vars$d.barColor]: globalRefs$6.colors.surface.contrast,
|
4766
|
+
[vars$d.barWidth]: '20%',
|
4764
4767
|
|
4765
|
-
[vars$
|
4766
|
-
[vars$
|
4768
|
+
[vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
|
4769
|
+
[vars$d.barBorderRadius]: '4px',
|
4767
4770
|
|
4768
|
-
[vars$
|
4769
|
-
[vars$
|
4770
|
-
[vars$
|
4771
|
-
[vars$
|
4771
|
+
[vars$d.animationDuration]: '2s',
|
4772
|
+
[vars$d.animationTimingFunction]: 'linear',
|
4773
|
+
[vars$d.animationIterationCount]: 'infinite',
|
4774
|
+
[vars$d.verticalPadding]: '0.25em',
|
4772
4775
|
|
4773
4776
|
size: {
|
4774
|
-
xs: { [vars$
|
4775
|
-
sm: { [vars$
|
4776
|
-
md: { [vars$
|
4777
|
-
lg: { [vars$
|
4777
|
+
xs: { [vars$d.barHeight]: '2px' },
|
4778
|
+
sm: { [vars$d.barHeight]: '4px' },
|
4779
|
+
md: { [vars$d.barHeight]: '6px' },
|
4780
|
+
lg: { [vars$d.barHeight]: '8px' },
|
4778
4781
|
},
|
4779
4782
|
|
4780
4783
|
mode: {
|
4781
4784
|
primary: {
|
4782
|
-
[vars$
|
4785
|
+
[vars$d.barColor]: globalRefs$6.colors.primary.main,
|
4783
4786
|
},
|
4784
4787
|
secondary: {
|
4785
|
-
[vars$
|
4788
|
+
[vars$d.barColor]: globalRefs$6.colors.secondary.main,
|
4786
4789
|
},
|
4787
4790
|
},
|
4788
4791
|
|
4789
4792
|
_hidden: {
|
4790
|
-
[vars$
|
4793
|
+
[vars$d.hostDisplay]: 'none',
|
4791
4794
|
},
|
4792
4795
|
};
|
4793
4796
|
|
4794
4797
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
4795
4798
|
__proto__: null,
|
4796
4799
|
default: loaderLinear,
|
4797
|
-
vars: vars$
|
4800
|
+
vars: vars$d
|
4798
4801
|
});
|
4799
4802
|
|
4800
|
-
const componentName$
|
4803
|
+
const componentName$h = getComponentName('loader-radial');
|
4801
4804
|
|
4802
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4805
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
4803
4806
|
constructor() {
|
4804
4807
|
super();
|
4805
4808
|
|
@@ -4843,22 +4846,22 @@ const LoaderRadialClass = compose(
|
|
4843
4846
|
componentNameValidationMixin
|
4844
4847
|
)(RawLoaderRadial);
|
4845
4848
|
|
4846
|
-
const globalRefs$
|
4849
|
+
const globalRefs$5 = getThemeRefs(globals);
|
4847
4850
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
4848
4851
|
|
4849
4852
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
4850
4853
|
{
|
4851
|
-
spinnerColor: globalRefs$
|
4854
|
+
spinnerColor: globalRefs$5.colors.surface.contrast,
|
4852
4855
|
mode: {
|
4853
4856
|
primary: {
|
4854
|
-
spinnerColor: globalRefs$
|
4857
|
+
spinnerColor: globalRefs$5.colors.primary.main,
|
4855
4858
|
},
|
4856
4859
|
secondary: {
|
4857
|
-
spinnerColor: globalRefs$
|
4860
|
+
spinnerColor: globalRefs$5.colors.secondary.main,
|
4858
4861
|
},
|
4859
4862
|
},
|
4860
4863
|
},
|
4861
|
-
componentName$
|
4864
|
+
componentName$h
|
4862
4865
|
);
|
4863
4866
|
|
4864
4867
|
const loaderRadial = {
|
@@ -4887,7 +4890,7 @@ const loaderRadial = {
|
|
4887
4890
|
[compVars$1.hostDisplay]: 'none',
|
4888
4891
|
},
|
4889
4892
|
};
|
4890
|
-
const vars$
|
4893
|
+
const vars$c = {
|
4891
4894
|
...compVars$1,
|
4892
4895
|
...helperVars,
|
4893
4896
|
};
|
@@ -4895,10 +4898,10 @@ const vars$b = {
|
|
4895
4898
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
4896
4899
|
__proto__: null,
|
4897
4900
|
default: loaderRadial,
|
4898
|
-
vars: vars$
|
4901
|
+
vars: vars$c
|
4899
4902
|
});
|
4900
4903
|
|
4901
|
-
const componentName$
|
4904
|
+
const componentName$g = getComponentName('combo-box');
|
4902
4905
|
|
4903
4906
|
const ComboBoxMixin = (superclass) =>
|
4904
4907
|
class ComboBoxMixinClass extends superclass {
|
@@ -5249,66 +5252,66 @@ const ComboBoxClass = compose(
|
|
5249
5252
|
// and reset items to an empty array, and opening the list box with no items
|
5250
5253
|
// to display.
|
5251
5254
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5252
|
-
componentName: componentName$
|
5255
|
+
componentName: componentName$g,
|
5253
5256
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5254
5257
|
})
|
5255
5258
|
);
|
5256
5259
|
|
5257
|
-
const globalRefs$
|
5258
|
-
const vars$
|
5260
|
+
const globalRefs$4 = getThemeRefs(globals);
|
5261
|
+
const vars$b = ComboBoxClass.cssVarList;
|
5259
5262
|
|
5260
5263
|
const comboBox = {
|
5261
|
-
[vars$
|
5262
|
-
[vars$
|
5263
|
-
[vars$
|
5264
|
-
[vars$
|
5265
|
-
[vars$
|
5266
|
-
[vars$
|
5267
|
-
[vars$
|
5268
|
-
[vars$
|
5269
|
-
[vars$
|
5270
|
-
[vars$
|
5271
|
-
[vars$
|
5272
|
-
[vars$
|
5273
|
-
[vars$
|
5274
|
-
[vars$
|
5275
|
-
[vars$
|
5276
|
-
[vars$
|
5277
|
-
[vars$
|
5278
|
-
[vars$
|
5279
|
-
[vars$
|
5280
|
-
[vars$
|
5281
|
-
[vars$
|
5282
|
-
[vars$
|
5283
|
-
[vars$
|
5264
|
+
[vars$b.hostWidth]: refs.width,
|
5265
|
+
[vars$b.fontSize]: refs.fontSize,
|
5266
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
5267
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
5268
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
5269
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
5270
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
5271
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
5272
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
5273
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
5274
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
5275
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
5276
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
5277
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
5278
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
5279
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5280
|
+
[vars$b.inputBackgroundColor]: refs.backgroundColor,
|
5281
|
+
[vars$b.inputHorizontalPadding]: refs.horizontalPadding,
|
5282
|
+
[vars$b.inputHeight]: refs.inputHeight,
|
5283
|
+
[vars$b.inputDropdownButtonColor]: globalRefs$4.colors.surface.contrast,
|
5284
|
+
[vars$b.inputDropdownButtonCursor]: 'pointer',
|
5285
|
+
[vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5286
|
+
[vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
5284
5287
|
|
5285
5288
|
_readonly: {
|
5286
|
-
[vars$
|
5289
|
+
[vars$b.inputDropdownButtonCursor]: 'default',
|
5287
5290
|
},
|
5288
5291
|
|
5289
5292
|
// Overlay theme exposed via the component:
|
5290
|
-
[vars$
|
5291
|
-
[vars$
|
5292
|
-
[vars$
|
5293
|
-
[vars$
|
5293
|
+
[vars$b.overlayFontSize]: refs.fontSize,
|
5294
|
+
[vars$b.overlayFontFamily]: refs.fontFamily,
|
5295
|
+
[vars$b.overlayCursor]: 'pointer',
|
5296
|
+
[vars$b.overlayItemBoxShadow]: 'none',
|
5294
5297
|
|
5295
5298
|
// Overlay direct theme:
|
5296
|
-
[vars$
|
5297
|
-
[vars$
|
5299
|
+
[vars$b.overlay.minHeight]: '400px',
|
5300
|
+
[vars$b.overlay.margin]: '0',
|
5298
5301
|
};
|
5299
5302
|
|
5300
5303
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5301
5304
|
__proto__: null,
|
5302
5305
|
comboBox: comboBox,
|
5303
5306
|
default: comboBox,
|
5304
|
-
vars: vars$
|
5307
|
+
vars: vars$b
|
5305
5308
|
});
|
5306
5309
|
|
5307
5310
|
const observedAttributes$2 = ['src', 'alt'];
|
5308
5311
|
|
5309
|
-
const componentName$
|
5312
|
+
const componentName$f = getComponentName('image');
|
5310
5313
|
|
5311
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5314
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$f, baseSelector: ':host > img' });
|
5312
5315
|
class RawImage extends BaseClass$1 {
|
5313
5316
|
static get observedAttributes() {
|
5314
5317
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5348,14 +5351,14 @@ const ImageClass = compose(
|
|
5348
5351
|
draggableMixin
|
5349
5352
|
)(RawImage);
|
5350
5353
|
|
5351
|
-
const vars$
|
5354
|
+
const vars$a = ImageClass.cssVarList;
|
5352
5355
|
|
5353
5356
|
const image = {};
|
5354
5357
|
|
5355
5358
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5356
5359
|
__proto__: null,
|
5357
5360
|
default: image,
|
5358
|
-
vars: vars$
|
5361
|
+
vars: vars$a
|
5359
5362
|
});
|
5360
5363
|
|
5361
5364
|
var CountryCodes = [
|
@@ -6571,14 +6574,14 @@ var CountryCodes = [
|
|
6571
6574
|
},
|
6572
6575
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
6573
6576
|
|
6574
|
-
const componentName$
|
6577
|
+
const componentName$e = getComponentName('phone-field-internal');
|
6575
6578
|
|
6576
|
-
createBaseInputClass({ componentName: componentName$
|
6579
|
+
createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
|
6577
6580
|
|
6578
6581
|
const textVars$1 = TextFieldClass.cssVarList;
|
6579
6582
|
const comboVars = ComboBoxClass.cssVarList;
|
6580
6583
|
|
6581
|
-
const componentName$
|
6584
|
+
const componentName$d = getComponentName('phone-field');
|
6582
6585
|
|
6583
6586
|
const customMixin$4 = (superclass) =>
|
6584
6587
|
class PhoneFieldMixinClass extends superclass {
|
@@ -6592,15 +6595,15 @@ const customMixin$4 = (superclass) =>
|
|
6592
6595
|
const template = document.createElement('template');
|
6593
6596
|
|
6594
6597
|
template.innerHTML = `
|
6595
|
-
<${componentName$
|
6598
|
+
<${componentName$e}
|
6596
6599
|
tabindex="-1"
|
6597
6600
|
slot="input"
|
6598
|
-
></${componentName$
|
6601
|
+
></${componentName$e}>
|
6599
6602
|
`;
|
6600
6603
|
|
6601
6604
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6602
6605
|
|
6603
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6606
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
6604
6607
|
|
6605
6608
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6606
6609
|
includeAttrs: [
|
@@ -6795,32 +6798,32 @@ const PhoneFieldClass = compose(
|
|
6795
6798
|
}
|
6796
6799
|
`,
|
6797
6800
|
excludeAttrsSync: ['tabindex'],
|
6798
|
-
componentName: componentName$
|
6801
|
+
componentName: componentName$d,
|
6799
6802
|
})
|
6800
6803
|
);
|
6801
6804
|
|
6802
|
-
const vars$
|
6805
|
+
const vars$9 = PhoneFieldClass.cssVarList;
|
6803
6806
|
|
6804
6807
|
const phoneField = {
|
6805
|
-
[vars$
|
6806
|
-
[vars$
|
6807
|
-
[vars$
|
6808
|
-
[vars$
|
6809
|
-
[vars$
|
6810
|
-
[vars$
|
6811
|
-
[vars$
|
6812
|
-
[vars$
|
6813
|
-
[vars$
|
6814
|
-
[vars$
|
6815
|
-
[vars$
|
6816
|
-
[vars$
|
6817
|
-
[vars$
|
6818
|
-
[vars$
|
6819
|
-
[vars$
|
6820
|
-
[vars$
|
6821
|
-
[vars$
|
6822
|
-
[vars$
|
6823
|
-
[vars$
|
6808
|
+
[vars$9.hostWidth]: refs.width,
|
6809
|
+
[vars$9.fontSize]: refs.fontSize,
|
6810
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
6811
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
6812
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
6813
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
6814
|
+
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
6815
|
+
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6816
|
+
[vars$9.inputBorderStyle]: refs.borderStyle,
|
6817
|
+
[vars$9.inputBorderWidth]: refs.borderWidth,
|
6818
|
+
[vars$9.inputBorderColor]: refs.borderColor,
|
6819
|
+
[vars$9.inputBorderRadius]: refs.borderRadius,
|
6820
|
+
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
6821
|
+
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
6822
|
+
[vars$9.inputOutlineColor]: refs.outlineColor,
|
6823
|
+
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
6824
|
+
[vars$9.phoneInputWidth]: refs.minWidth,
|
6825
|
+
[vars$9.countryCodeInputWidth]: '5em',
|
6826
|
+
[vars$9.countryCodeDropdownWidth]: '20em',
|
6824
6827
|
|
6825
6828
|
// '@overlay': {
|
6826
6829
|
// overlayItemBackgroundColor: 'red'
|
@@ -6830,16 +6833,16 @@ const phoneField = {
|
|
6830
6833
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
6831
6834
|
__proto__: null,
|
6832
6835
|
default: phoneField,
|
6833
|
-
vars: vars$
|
6836
|
+
vars: vars$9
|
6834
6837
|
});
|
6835
6838
|
|
6836
|
-
const componentName$
|
6839
|
+
const componentName$c = getComponentName('phone-field-internal-input-box');
|
6837
6840
|
|
6838
|
-
createBaseInputClass({ componentName: componentName$
|
6841
|
+
createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
|
6839
6842
|
|
6840
6843
|
const textVars = TextFieldClass.cssVarList;
|
6841
6844
|
|
6842
|
-
const componentName$
|
6845
|
+
const componentName$b = getComponentName('phone-input-box-field');
|
6843
6846
|
|
6844
6847
|
const customMixin$3 = (superclass) =>
|
6845
6848
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -6853,15 +6856,15 @@ const customMixin$3 = (superclass) =>
|
|
6853
6856
|
const template = document.createElement('template');
|
6854
6857
|
|
6855
6858
|
template.innerHTML = `
|
6856
|
-
<${componentName$
|
6859
|
+
<${componentName$c}
|
6857
6860
|
tabindex="-1"
|
6858
6861
|
slot="input"
|
6859
|
-
></${componentName$
|
6862
|
+
></${componentName$c}>
|
6860
6863
|
`;
|
6861
6864
|
|
6862
6865
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6863
6866
|
|
6864
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6867
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
6865
6868
|
|
6866
6869
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6867
6870
|
includeAttrs: [
|
@@ -6993,44 +6996,44 @@ const PhoneFieldInputBoxClass = compose(
|
|
6993
6996
|
}
|
6994
6997
|
`,
|
6995
6998
|
excludeAttrsSync: ['tabindex'],
|
6996
|
-
componentName: componentName$
|
6999
|
+
componentName: componentName$b,
|
6997
7000
|
})
|
6998
7001
|
);
|
6999
7002
|
|
7000
|
-
const vars$
|
7003
|
+
const vars$8 = PhoneFieldInputBoxClass.cssVarList;
|
7001
7004
|
|
7002
7005
|
const phoneInputBoxField = {
|
7003
|
-
[vars$
|
7004
|
-
[vars$
|
7005
|
-
[vars$
|
7006
|
-
[vars$
|
7007
|
-
[vars$
|
7008
|
-
[vars$
|
7009
|
-
[vars$
|
7010
|
-
[vars$
|
7011
|
-
[vars$
|
7012
|
-
[vars$
|
7013
|
-
[vars$
|
7014
|
-
[vars$
|
7015
|
-
[vars$
|
7016
|
-
[vars$
|
7017
|
-
[vars$
|
7018
|
-
[vars$
|
7019
|
-
[vars$
|
7006
|
+
[vars$8.hostWidth]: '16em',
|
7007
|
+
[vars$8.hostMinWidth]: refs.minWidth,
|
7008
|
+
[vars$8.fontSize]: refs.fontSize,
|
7009
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
7010
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
7011
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
7012
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
7013
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
7014
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7015
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
7016
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
7017
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
7018
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
7019
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
7020
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
7021
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
7022
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
7020
7023
|
_fullWidth: {
|
7021
|
-
[vars$
|
7024
|
+
[vars$8.hostWidth]: refs.width,
|
7022
7025
|
},
|
7023
7026
|
};
|
7024
7027
|
|
7025
7028
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7026
7029
|
__proto__: null,
|
7027
7030
|
default: phoneInputBoxField,
|
7028
|
-
vars: vars$
|
7031
|
+
vars: vars$8
|
7029
7032
|
});
|
7030
7033
|
|
7031
|
-
const componentName$
|
7034
|
+
const componentName$a = getComponentName('new-password-internal');
|
7032
7035
|
|
7033
|
-
const componentName$
|
7036
|
+
const componentName$9 = getComponentName('new-password');
|
7034
7037
|
|
7035
7038
|
const customMixin$2 = (superclass) =>
|
7036
7039
|
class NewPasswordMixinClass extends superclass {
|
@@ -7040,16 +7043,16 @@ const customMixin$2 = (superclass) =>
|
|
7040
7043
|
const template = document.createElement('template');
|
7041
7044
|
|
7042
7045
|
template.innerHTML = `
|
7043
|
-
<${componentName$
|
7046
|
+
<${componentName$a}
|
7044
7047
|
name="new-password"
|
7045
7048
|
tabindex="-1"
|
7046
7049
|
slot="input"
|
7047
|
-
></${componentName$
|
7050
|
+
></${componentName$a}>
|
7048
7051
|
`;
|
7049
7052
|
|
7050
7053
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7051
7054
|
|
7052
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7055
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
7053
7056
|
|
7054
7057
|
forwardAttrs(this, this.inputElement, {
|
7055
7058
|
includeAttrs: [
|
@@ -7148,32 +7151,32 @@ const NewPasswordClass = compose(
|
|
7148
7151
|
},
|
7149
7152
|
`,
|
7150
7153
|
excludeAttrsSync: ['tabindex'],
|
7151
|
-
componentName: componentName$
|
7154
|
+
componentName: componentName$9,
|
7152
7155
|
})
|
7153
7156
|
);
|
7154
7157
|
|
7155
|
-
const vars$
|
7158
|
+
const vars$7 = NewPasswordClass.cssVarList;
|
7156
7159
|
|
7157
7160
|
const newPassword = {
|
7158
|
-
[vars$
|
7159
|
-
[vars$
|
7160
|
-
[vars$
|
7161
|
-
[vars$
|
7162
|
-
[vars$
|
7163
|
-
[vars$
|
7161
|
+
[vars$7.hostWidth]: refs.width,
|
7162
|
+
[vars$7.hostMinWidth]: refs.minWidth,
|
7163
|
+
[vars$7.fontSize]: refs.fontSize,
|
7164
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
7165
|
+
[vars$7.spaceBetweenInputs]: '1em',
|
7166
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
7164
7167
|
|
7165
7168
|
_required: {
|
7166
7169
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7167
7170
|
// That's why we fake the required indicator on each input.
|
7168
7171
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7169
|
-
[vars$
|
7172
|
+
[vars$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7170
7173
|
},
|
7171
7174
|
};
|
7172
7175
|
|
7173
7176
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7174
7177
|
__proto__: null,
|
7175
7178
|
default: newPassword,
|
7176
|
-
vars: vars$
|
7179
|
+
vars: vars$7
|
7177
7180
|
});
|
7178
7181
|
|
7179
7182
|
const getFileBase64 = (fileObj) => {
|
@@ -7188,7 +7191,7 @@ const getFilename = (fileObj) => {
|
|
7188
7191
|
return fileObj.name.replace(/^.*\\/, '');
|
7189
7192
|
};
|
7190
7193
|
|
7191
|
-
const componentName$
|
7194
|
+
const componentName$8 = getComponentName('upload-file');
|
7192
7195
|
|
7193
7196
|
const observedAttributes$1 = [
|
7194
7197
|
'title',
|
@@ -7203,7 +7206,7 @@ const observedAttributes$1 = [
|
|
7203
7206
|
'icon',
|
7204
7207
|
];
|
7205
7208
|
|
7206
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7209
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$8, baseSelector: ':host > div' });
|
7207
7210
|
|
7208
7211
|
class RawUploadFile extends BaseInputClass {
|
7209
7212
|
static get observedAttributes() {
|
@@ -7413,76 +7416,76 @@ const UploadFileClass = compose(
|
|
7413
7416
|
componentNameValidationMixin
|
7414
7417
|
)(RawUploadFile);
|
7415
7418
|
|
7416
|
-
const vars$
|
7419
|
+
const vars$6 = UploadFileClass.cssVarList;
|
7417
7420
|
|
7418
7421
|
const uploadFile = {
|
7419
|
-
[vars$
|
7420
|
-
[vars$
|
7422
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
7423
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
7421
7424
|
|
7422
|
-
[vars$
|
7425
|
+
[vars$6.iconSize]: '2em',
|
7423
7426
|
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7427
|
+
[vars$6.hostPadding]: '0.75em',
|
7428
|
+
[vars$6.gap]: '0.5em',
|
7426
7429
|
|
7427
|
-
[vars$
|
7428
|
-
[vars$
|
7429
|
-
[vars$
|
7430
|
+
[vars$6.fontSize]: '16px',
|
7431
|
+
[vars$6.titleFontWeight]: '500',
|
7432
|
+
[vars$6.lineHeight]: '1em',
|
7430
7433
|
|
7431
|
-
[vars$
|
7432
|
-
[vars$
|
7433
|
-
[vars$
|
7434
|
-
[vars$
|
7434
|
+
[vars$6.borderWidth]: refs.borderWidth,
|
7435
|
+
[vars$6.borderColor]: refs.borderColor,
|
7436
|
+
[vars$6.borderRadius]: refs.borderRadius,
|
7437
|
+
[vars$6.borderStyle]: 'dashed',
|
7435
7438
|
|
7436
7439
|
_required: {
|
7437
|
-
[vars$
|
7440
|
+
[vars$6.requiredIndicator]: refs.requiredIndicator,
|
7438
7441
|
},
|
7439
7442
|
|
7440
7443
|
size: {
|
7441
7444
|
xs: {
|
7442
|
-
[vars$
|
7443
|
-
[vars$
|
7444
|
-
[vars$
|
7445
|
-
[vars$
|
7446
|
-
[vars$
|
7445
|
+
[vars$6.hostHeight]: '196px',
|
7446
|
+
[vars$6.hostWidth]: '200px',
|
7447
|
+
[vars$6.titleFontSize]: '0.875em',
|
7448
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
7449
|
+
[vars$6.lineHeight]: '1.25em',
|
7447
7450
|
},
|
7448
7451
|
sm: {
|
7449
|
-
[vars$
|
7450
|
-
[vars$
|
7451
|
-
[vars$
|
7452
|
-
[vars$
|
7453
|
-
[vars$
|
7452
|
+
[vars$6.hostHeight]: '216px',
|
7453
|
+
[vars$6.hostWidth]: '230px',
|
7454
|
+
[vars$6.titleFontSize]: '1em',
|
7455
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
7456
|
+
[vars$6.lineHeight]: '1.25em',
|
7454
7457
|
},
|
7455
7458
|
md: {
|
7456
|
-
[vars$
|
7457
|
-
[vars$
|
7458
|
-
[vars$
|
7459
|
-
[vars$
|
7460
|
-
[vars$
|
7459
|
+
[vars$6.hostHeight]: '256px',
|
7460
|
+
[vars$6.hostWidth]: '312px',
|
7461
|
+
[vars$6.titleFontSize]: '1.125em',
|
7462
|
+
[vars$6.descriptionFontSize]: '1em',
|
7463
|
+
[vars$6.lineHeight]: '1.5em',
|
7461
7464
|
},
|
7462
7465
|
lg: {
|
7463
|
-
[vars$
|
7464
|
-
[vars$
|
7465
|
-
[vars$
|
7466
|
-
[vars$
|
7467
|
-
[vars$
|
7466
|
+
[vars$6.hostHeight]: '280px',
|
7467
|
+
[vars$6.hostWidth]: '336px',
|
7468
|
+
[vars$6.titleFontSize]: '1.125em',
|
7469
|
+
[vars$6.descriptionFontSize]: '1.125em',
|
7470
|
+
[vars$6.lineHeight]: '1.75em',
|
7468
7471
|
},
|
7469
7472
|
},
|
7470
7473
|
|
7471
7474
|
_fullWidth: {
|
7472
|
-
[vars$
|
7475
|
+
[vars$6.hostWidth]: refs.width,
|
7473
7476
|
},
|
7474
7477
|
};
|
7475
7478
|
|
7476
7479
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7477
7480
|
__proto__: null,
|
7478
7481
|
default: uploadFile,
|
7479
|
-
vars: vars$
|
7482
|
+
vars: vars$6
|
7480
7483
|
});
|
7481
7484
|
|
7482
|
-
const componentName$
|
7485
|
+
const componentName$7 = getComponentName('button-selection-group-item');
|
7483
7486
|
|
7484
7487
|
class RawSelectItem extends createBaseClass({
|
7485
|
-
componentName: componentName$
|
7488
|
+
componentName: componentName$7,
|
7486
7489
|
baseSelector: ':host > descope-button',
|
7487
7490
|
}) {
|
7488
7491
|
get size() {
|
@@ -7576,38 +7579,38 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7576
7579
|
componentNameValidationMixin
|
7577
7580
|
)(RawSelectItem);
|
7578
7581
|
|
7579
|
-
const globalRefs$
|
7582
|
+
const globalRefs$3 = getThemeRefs(globals);
|
7580
7583
|
|
7581
|
-
const vars$
|
7584
|
+
const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
|
7582
7585
|
|
7583
7586
|
const buttonSelectionGroupItem = {
|
7584
|
-
[vars$
|
7585
|
-
[vars$
|
7586
|
-
[vars$
|
7587
|
-
[vars$
|
7588
|
-
[vars$
|
7587
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
|
7588
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
|
7589
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.main,
|
7590
|
+
[vars$5.borderStyle]: 'solid',
|
7591
|
+
[vars$5.borderRadius]: globalRefs$3.radius.sm,
|
7589
7592
|
|
7590
7593
|
_hover: {
|
7591
|
-
[vars$
|
7594
|
+
[vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7592
7595
|
},
|
7593
7596
|
|
7594
7597
|
_selected: {
|
7595
|
-
[vars$
|
7596
|
-
[vars$
|
7597
|
-
[vars$
|
7598
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.contrast,
|
7599
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.contrast,
|
7600
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.light,
|
7598
7601
|
},
|
7599
7602
|
};
|
7600
7603
|
|
7601
7604
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7602
7605
|
__proto__: null,
|
7603
7606
|
default: buttonSelectionGroupItem,
|
7604
|
-
vars: vars$
|
7607
|
+
vars: vars$5
|
7605
7608
|
});
|
7606
7609
|
|
7607
|
-
const componentName$
|
7610
|
+
const componentName$6 = getComponentName('button-selection-group-internal');
|
7608
7611
|
|
7609
7612
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
7610
|
-
componentName: componentName$
|
7613
|
+
componentName: componentName$6,
|
7611
7614
|
baseSelector: 'slot',
|
7612
7615
|
}) {
|
7613
7616
|
constructor() {
|
@@ -7744,7 +7747,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7744
7747
|
}
|
7745
7748
|
}
|
7746
7749
|
|
7747
|
-
const componentName$
|
7750
|
+
const componentName$5 = getComponentName('button-selection-group');
|
7748
7751
|
|
7749
7752
|
const customMixin$1 = (superclass) =>
|
7750
7753
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -7819,18 +7822,18 @@ const customMixin$1 = (superclass) =>
|
|
7819
7822
|
const template = document.createElement('template');
|
7820
7823
|
|
7821
7824
|
template.innerHTML = `
|
7822
|
-
<${componentName$
|
7825
|
+
<${componentName$6}
|
7823
7826
|
name="button-selection-group"
|
7824
7827
|
slot="input"
|
7825
7828
|
tabindex="-1"
|
7826
7829
|
>
|
7827
7830
|
<slot></slot>
|
7828
|
-
</${componentName$
|
7831
|
+
</${componentName$6}>
|
7829
7832
|
`;
|
7830
7833
|
|
7831
7834
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7832
7835
|
|
7833
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7836
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
7834
7837
|
|
7835
7838
|
forwardAttrs(this, this.inputElement, {
|
7836
7839
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -7933,29 +7936,29 @@ const ButtonSelectionGroupClass = compose(
|
|
7933
7936
|
${resetInputCursor('vaadin-text-field')}
|
7934
7937
|
`,
|
7935
7938
|
excludeAttrsSync: ['tabindex'],
|
7936
|
-
componentName: componentName$
|
7939
|
+
componentName: componentName$5,
|
7937
7940
|
})
|
7938
7941
|
);
|
7939
7942
|
|
7940
|
-
const globalRefs$
|
7941
|
-
const vars$
|
7943
|
+
const globalRefs$2 = getThemeRefs(globals);
|
7944
|
+
const vars$4 = ButtonSelectionGroupClass.cssVarList;
|
7942
7945
|
|
7943
7946
|
const buttonSelectionGroup = {
|
7944
|
-
[vars$
|
7945
|
-
[vars$
|
7946
|
-
[vars$
|
7947
|
-
[vars$
|
7948
|
-
[vars$
|
7949
|
-
[vars$
|
7947
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
7948
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
7949
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
7950
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
7951
|
+
[vars$4.itemsSpacing]: globalRefs$2.spacing.sm,
|
7952
|
+
[vars$4.hostWidth]: refs.width,
|
7950
7953
|
};
|
7951
7954
|
|
7952
7955
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
7953
7956
|
__proto__: null,
|
7954
7957
|
default: buttonSelectionGroup,
|
7955
|
-
vars: vars$
|
7958
|
+
vars: vars$4
|
7956
7959
|
});
|
7957
7960
|
|
7958
|
-
const componentName$
|
7961
|
+
const componentName$4 = getComponentName('modal');
|
7959
7962
|
|
7960
7963
|
const customMixin = (superclass) =>
|
7961
7964
|
class ModalMixinClass extends superclass {
|
@@ -8051,7 +8054,7 @@ const ModalClass = compose(
|
|
8051
8054
|
wrappedEleName: 'vaadin-dialog',
|
8052
8055
|
style: () => ``,
|
8053
8056
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8054
|
-
componentName: componentName$
|
8057
|
+
componentName: componentName$4,
|
8055
8058
|
})
|
8056
8059
|
);
|
8057
8060
|
|
@@ -8062,14 +8065,14 @@ const modal = {
|
|
8062
8065
|
[compVars.overlayWidth]: '700px',
|
8063
8066
|
};
|
8064
8067
|
|
8065
|
-
const vars$
|
8068
|
+
const vars$3 = {
|
8066
8069
|
...compVars,
|
8067
8070
|
};
|
8068
8071
|
|
8069
8072
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8070
8073
|
__proto__: null,
|
8071
8074
|
default: modal,
|
8072
|
-
vars: vars$
|
8075
|
+
vars: vars$3
|
8073
8076
|
});
|
8074
8077
|
|
8075
8078
|
const isValidDataType = (data) => {
|
@@ -8082,7 +8085,7 @@ const isValidDataType = (data) => {
|
|
8082
8085
|
return isValid;
|
8083
8086
|
};
|
8084
8087
|
|
8085
|
-
const componentName$
|
8088
|
+
const componentName$3 = getComponentName('grid');
|
8086
8089
|
|
8087
8090
|
const GridMixin = (superclass) =>
|
8088
8091
|
class GridMixinClass extends superclass {
|
@@ -8206,9 +8209,16 @@ const GridMixin = (superclass) =>
|
|
8206
8209
|
const itemsIds = new Set(
|
8207
8210
|
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
8208
8211
|
);
|
8209
|
-
|
8212
|
+
|
8213
|
+
const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
8210
8214
|
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
8211
8215
|
);
|
8216
|
+
|
8217
|
+
// we want to update the selected items only if there is a reason,
|
8218
|
+
// to prevent redundant notifications
|
8219
|
+
if (this.grid.selectedItems.length !== newSelectedItems.length) {
|
8220
|
+
this.grid.selectedItems = newSelectedItems;
|
8221
|
+
}
|
8212
8222
|
}
|
8213
8223
|
}
|
8214
8224
|
}
|
@@ -8297,38 +8307,38 @@ const GridClass = compose(
|
|
8297
8307
|
}
|
8298
8308
|
`,
|
8299
8309
|
excludeAttrsSync: ['columns', 'tabindex'],
|
8300
|
-
componentName: componentName$
|
8310
|
+
componentName: componentName$3,
|
8301
8311
|
})
|
8302
8312
|
);
|
8303
8313
|
|
8304
|
-
const globalRefs = getThemeRefs(globals);
|
8305
|
-
const vars$
|
8314
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8315
|
+
const vars$2 = GridClass.cssVarList;
|
8306
8316
|
|
8307
8317
|
const grid = {
|
8308
|
-
[vars$
|
8309
|
-
[vars$
|
8310
|
-
[vars$
|
8318
|
+
[vars$2.hostWidth]: '100%',
|
8319
|
+
[vars$2.hostHeight]: '100%',
|
8320
|
+
[vars$2.hostMinHeight]: '400px',
|
8311
8321
|
|
8312
|
-
[vars$
|
8313
|
-
[vars$
|
8322
|
+
[vars$2.fontSize]: refs.fontSize,
|
8323
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
8314
8324
|
|
8315
|
-
[vars$
|
8316
|
-
[vars$
|
8317
|
-
[vars$
|
8325
|
+
[vars$2.sortIndicatorsColor]: globalRefs$1.colors.primary.main,
|
8326
|
+
[vars$2.activeSortIndicator]: globalRefs$1.colors.primary.main,
|
8327
|
+
[vars$2.resizeHandleColor]: globalRefs$1.colors.surface.main,
|
8318
8328
|
|
8319
|
-
[vars$
|
8320
|
-
[vars$
|
8321
|
-
[vars$
|
8322
|
-
[vars$
|
8329
|
+
[vars$2.inputBorderWidth]: refs.borderWidth,
|
8330
|
+
[vars$2.inputBorderStyle]: refs.borderStyle,
|
8331
|
+
[vars$2.inputBorderRadius]: refs.borderRadius,
|
8332
|
+
[vars$2.inputBorderColor]: 'transparent',
|
8323
8333
|
|
8324
|
-
[vars$
|
8334
|
+
[vars$2.separatorColor]: refs.borderColor,
|
8325
8335
|
|
8326
|
-
[vars$
|
8327
|
-
[vars$
|
8328
|
-
[vars$
|
8336
|
+
[vars$2.valueTextColor]: globalRefs$1.colors.surface.contrast,
|
8337
|
+
[vars$2.selectedBackgroundColor]: globalRefs$1.colors.primary.main,
|
8338
|
+
[vars$2.selectedTextColor]: globalRefs$1.colors.primary.contrast,
|
8329
8339
|
|
8330
8340
|
_bordered: {
|
8331
|
-
[vars$
|
8341
|
+
[vars$2.inputBorderColor]: refs.borderColor,
|
8332
8342
|
},
|
8333
8343
|
};
|
8334
8344
|
|
@@ -8336,6 +8346,129 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8336
8346
|
__proto__: null,
|
8337
8347
|
default: grid,
|
8338
8348
|
grid: grid,
|
8349
|
+
vars: vars$2
|
8350
|
+
});
|
8351
|
+
|
8352
|
+
const componentName$2 = getComponentName('notification-card');
|
8353
|
+
|
8354
|
+
const notificationCardMixin = (superclass) =>
|
8355
|
+
class NotificationCardMixinClass extends superclass {
|
8356
|
+
close() {
|
8357
|
+
// if animation is not applied to the element, the node will not be removed
|
8358
|
+
// from the DOM. We should avoid that. So, if in any case we allow
|
8359
|
+
// customizing the animation - we should check if animation is applied
|
8360
|
+
// and if it's not applied - remove the elemnt from the DOM and dispatch
|
8361
|
+
// `card-closed` event.
|
8362
|
+
this.baseElement.addEventListener('animationend', () => {
|
8363
|
+
this.remove();
|
8364
|
+
this.dispatchEvent(new Event('card-closed'));
|
8365
|
+
});
|
8366
|
+
|
8367
|
+
this.setAttribute('opened', 'false');
|
8368
|
+
}
|
8369
|
+
};
|
8370
|
+
|
8371
|
+
const NotificationCardClass = compose(
|
8372
|
+
createStyleMixin({
|
8373
|
+
mappings: {
|
8374
|
+
hostMinWidth: { selector: () => '::part(content)', property: 'min-width' },
|
8375
|
+
fontFamily: {},
|
8376
|
+
fontSize: {},
|
8377
|
+
backgroundColor: { selector: () => '::part(content)' },
|
8378
|
+
textColor: { property: 'color' },
|
8379
|
+
boxShadow: {},
|
8380
|
+
borderWidth: { selector: () => '::part(content)', property: 'border-width' },
|
8381
|
+
borderColor: { selector: () => '::part(content)', property: 'border-color' },
|
8382
|
+
borderStyle: { selector: () => '::part(content)', property: 'border-style' },
|
8383
|
+
borderRadius: [
|
8384
|
+
{ selector: () => '::part(content)', property: 'border-radius' },
|
8385
|
+
{ selector: () => '::part(overlay)', property: 'border-radius' },
|
8386
|
+
],
|
8387
|
+
verticalPadding: [
|
8388
|
+
{ selector: () => '::part(content)', property: 'padding-top' },
|
8389
|
+
{ selector: () => '::part(content)', property: 'padding-bottom' },
|
8390
|
+
],
|
8391
|
+
horizontalPadding: [
|
8392
|
+
{ selector: () => '::part(content)', property: 'padding-right' },
|
8393
|
+
{ selector: () => '::part(content)', property: 'padding-left' },
|
8394
|
+
],
|
8395
|
+
},
|
8396
|
+
}),
|
8397
|
+
notificationCardMixin
|
8398
|
+
)(
|
8399
|
+
createProxy({
|
8400
|
+
slots: [''],
|
8401
|
+
wrappedEleName: 'vaadin-notification-card',
|
8402
|
+
style: () => `
|
8403
|
+
vaadin-notification-card {
|
8404
|
+
box-shadow: none;
|
8405
|
+
}
|
8406
|
+
::part(overlay) {
|
8407
|
+
box-shadow: none;
|
8408
|
+
background: none;
|
8409
|
+
}
|
8410
|
+
`,
|
8411
|
+
excludeAttrsSync: ['tabindex'],
|
8412
|
+
componentName: componentName$2,
|
8413
|
+
})
|
8414
|
+
);
|
8415
|
+
|
8416
|
+
customElements.define(componentName$2, NotificationCardClass);
|
8417
|
+
|
8418
|
+
const globalRefs = getThemeRefs(globals);
|
8419
|
+
const vars$1 = NotificationCardClass.cssVarList;
|
8420
|
+
|
8421
|
+
const shadowColor = '#00000020';
|
8422
|
+
|
8423
|
+
const notification = {
|
8424
|
+
[vars$1.hostMinWidth]: '415px',
|
8425
|
+
[vars$1.fontFamily]: globalRefs.fonts.font1.family,
|
8426
|
+
[vars$1.fontSize]: globalRefs.typography.body1.size,
|
8427
|
+
[vars$1.backgroundColor]: globalRefs.colors.surface.main,
|
8428
|
+
[vars$1.textColor]: globalRefs.colors.surface.contrast,
|
8429
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
|
8430
|
+
[vars$1.verticalPadding]: '0.45em',
|
8431
|
+
[vars$1.horizontalPadding]: '1em',
|
8432
|
+
[vars$1.verticalMargin]: '1em',
|
8433
|
+
[vars$1.horizontalMargin]: '1em',
|
8434
|
+
[vars$1.borderRadius]: globalRefs.radius.md,
|
8435
|
+
[vars$1.contentSpacing]: '0.5em',
|
8436
|
+
|
8437
|
+
_bordered: {
|
8438
|
+
[vars$1.borderWidth]: globalRefs.border.sm,
|
8439
|
+
[vars$1.borderStyle]: 'solid',
|
8440
|
+
[vars$1.borderColor]: 'transparent',
|
8441
|
+
},
|
8442
|
+
|
8443
|
+
size: {
|
8444
|
+
xs: { [vars$1.fontSize]: '12px' },
|
8445
|
+
sm: { [vars$1.fontSize]: '14px' },
|
8446
|
+
md: { [vars$1.fontSize]: '16px' },
|
8447
|
+
lg: { [vars$1.fontSize]: '18px' },
|
8448
|
+
},
|
8449
|
+
|
8450
|
+
mode: {
|
8451
|
+
primary: {
|
8452
|
+
[vars$1.backgroundColor]: globalRefs.colors.primary.main,
|
8453
|
+
[vars$1.textColor]: globalRefs.colors.primary.contrast,
|
8454
|
+
[vars$1.borderColor]: globalRefs.colors.primary.light,
|
8455
|
+
},
|
8456
|
+
success: {
|
8457
|
+
[vars$1.backgroundColor]: globalRefs.colors.success.main,
|
8458
|
+
[vars$1.textColor]: globalRefs.colors.success.contrast,
|
8459
|
+
[vars$1.borderColor]: globalRefs.colors.success.light,
|
8460
|
+
},
|
8461
|
+
error: {
|
8462
|
+
[vars$1.backgroundColor]: globalRefs.colors.error.main,
|
8463
|
+
[vars$1.textColor]: globalRefs.colors.error.contrast,
|
8464
|
+
[vars$1.borderColor]: globalRefs.colors.error.light,
|
8465
|
+
},
|
8466
|
+
},
|
8467
|
+
};
|
8468
|
+
|
8469
|
+
var notificationCard = /*#__PURE__*/Object.freeze({
|
8470
|
+
__proto__: null,
|
8471
|
+
default: notification,
|
8339
8472
|
vars: vars$1
|
8340
8473
|
});
|
8341
8474
|
|
@@ -8368,6 +8501,7 @@ const components = {
|
|
8368
8501
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8369
8502
|
modal: modal$1,
|
8370
8503
|
grid: grid$1,
|
8504
|
+
notificationCard,
|
8371
8505
|
};
|
8372
8506
|
|
8373
8507
|
const theme = Object.keys(components).reduce(
|
@@ -8380,14 +8514,14 @@ const vars = Object.keys(components).reduce(
|
|
8380
8514
|
);
|
8381
8515
|
|
8382
8516
|
const defaultTheme = { globals, components: theme };
|
8383
|
-
const themeVars = { globals: vars$
|
8517
|
+
const themeVars = { globals: vars$u, components: vars };
|
8384
8518
|
|
8385
|
-
const componentName = getComponentName('recaptcha');
|
8519
|
+
const componentName$1 = getComponentName('recaptcha');
|
8386
8520
|
|
8387
8521
|
const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
|
8388
8522
|
|
8389
8523
|
const BaseClass = createBaseClass({
|
8390
|
-
componentName,
|
8524
|
+
componentName: componentName$1,
|
8391
8525
|
baseSelector: ':host > div',
|
8392
8526
|
});
|
8393
8527
|
class RawRecaptcha extends BaseClass {
|
@@ -8539,6 +8673,117 @@ class RawRecaptcha extends BaseClass {
|
|
8539
8673
|
|
8540
8674
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
8541
8675
|
|
8676
|
+
const componentName = getComponentName('notification');
|
8677
|
+
|
8678
|
+
const NotificationMixin = (superclass) =>
|
8679
|
+
class NotificationMixinClass extends superclass {
|
8680
|
+
#card;
|
8681
|
+
|
8682
|
+
constructor() {
|
8683
|
+
super();
|
8684
|
+
|
8685
|
+
const that = this;
|
8686
|
+
|
8687
|
+
Object.defineProperty(this.baseElement, '_container', {
|
8688
|
+
get() {
|
8689
|
+
if (!NotificationMixinClass._container) {
|
8690
|
+
NotificationMixinClass._container = document.createElement(
|
8691
|
+
'descope-notification-container'
|
8692
|
+
);
|
8693
|
+
|
8694
|
+
// we're adding the container to body to avoid Vaadin's container's `openChanged`
|
8695
|
+
// from breaking when trying to remove it directly from the body.
|
8696
|
+
document.body.appendChild(NotificationMixinClass._container);
|
8697
|
+
}
|
8698
|
+
|
8699
|
+
if (!NotificationMixinClass._container.isConnected) {
|
8700
|
+
// Then, we're adding the container to the parentNode, which is the desired location
|
8701
|
+
// for us on the DOM
|
8702
|
+
that.parentNode.appendChild(NotificationMixinClass._container);
|
8703
|
+
}
|
8704
|
+
|
8705
|
+
return NotificationMixinClass._container;
|
8706
|
+
},
|
8707
|
+
});
|
8708
|
+
|
8709
|
+
Object.defineProperty(this.baseElement, '_card', {
|
8710
|
+
get() {
|
8711
|
+
return that.#card;
|
8712
|
+
},
|
8713
|
+
});
|
8714
|
+
|
8715
|
+
// we want to replace the card with vaadin's notification card, so the notification removal process
|
8716
|
+
// will work properly.
|
8717
|
+
const origAnimatedRemoveNotificationCard = this.baseElement._animatedRemoveNotificationCard;
|
8718
|
+
this.baseElement._animatedRemoveNotificationCard = () => {
|
8719
|
+
this.#card = this.#card.shadowRoot.querySelector('vaadin-notification-card');
|
8720
|
+
origAnimatedRemoveNotificationCard.call(this.baseElement);
|
8721
|
+
};
|
8722
|
+
}
|
8723
|
+
|
8724
|
+
init() {
|
8725
|
+
super.init?.();
|
8726
|
+
|
8727
|
+
this.createCard();
|
8728
|
+
|
8729
|
+
forwardAttrs(this, this.#card);
|
8730
|
+
syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
|
8731
|
+
|
8732
|
+
this.baseElement.renderer = (cardRoot) => {
|
8733
|
+
Array.from(this.childNodes).forEach((child) => cardRoot.appendChild(child));
|
8734
|
+
};
|
8735
|
+
}
|
8736
|
+
|
8737
|
+
get isContainerEmpty() {
|
8738
|
+
return !this.baseElement._container.children.length;
|
8739
|
+
}
|
8740
|
+
|
8741
|
+
// eslint-disable-next-line class-methods-use-this
|
8742
|
+
removeContainer() {
|
8743
|
+
NotificationMixinClass._container.remove();
|
8744
|
+
}
|
8745
|
+
|
8746
|
+
removeNotification() {
|
8747
|
+
// remove descope-notification from the DOM
|
8748
|
+
this.remove();
|
8749
|
+
// if needed, remove descope-notification-container
|
8750
|
+
if (this.isContainerEmpty) this.removeContainer();
|
8751
|
+
}
|
8752
|
+
|
8753
|
+
createCard() {
|
8754
|
+
this.#card = document.createElement('descope-notification-card');
|
8755
|
+
this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
|
8756
|
+
}
|
8757
|
+
|
8758
|
+
// animatedRemoveNotificationCard() {
|
8759
|
+
// const vaadinCard = this.baseElement._card.shadowRoot.querySelector('vaadin-notification-card');
|
8760
|
+
// vaadinCard.setAttribute('closing', '');
|
8761
|
+
// const name = getComputedStyle(vaadinCard).getPropertyValue('animation-name');
|
8762
|
+
// if (name && name !== 'none') {
|
8763
|
+
// const listener = () => {
|
8764
|
+
// this._removeNotificationCard();
|
8765
|
+
// vaadinCard.removeEventListener('animationend', listener);
|
8766
|
+
// };
|
8767
|
+
// vaadinCard.addEventListener('animationend', listener);
|
8768
|
+
// } else {
|
8769
|
+
// this._removeNotificationCard();
|
8770
|
+
// }
|
8771
|
+
// }
|
8772
|
+
};
|
8773
|
+
|
8774
|
+
const NotificationClass = compose(
|
8775
|
+
draggableMixin,
|
8776
|
+
componentNameValidationMixin,
|
8777
|
+
hoverableMixin,
|
8778
|
+
NotificationMixin
|
8779
|
+
)(
|
8780
|
+
createProxy({
|
8781
|
+
wrappedEleName: 'vaadin-notification',
|
8782
|
+
excludeAttrsSync: ['tabindex'],
|
8783
|
+
componentName,
|
8784
|
+
})
|
8785
|
+
);
|
8786
|
+
|
8542
8787
|
exports.ButtonClass = ButtonClass;
|
8543
8788
|
exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
|
8544
8789
|
exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
|
@@ -8553,6 +8798,7 @@ exports.LoaderRadialClass = LoaderRadialClass;
|
|
8553
8798
|
exports.LogoClass = LogoClass;
|
8554
8799
|
exports.ModalClass = ModalClass;
|
8555
8800
|
exports.NewPasswordClass = NewPasswordClass;
|
8801
|
+
exports.NotificationClass = NotificationClass;
|
8556
8802
|
exports.NumberFieldClass = NumberFieldClass;
|
8557
8803
|
exports.PasscodeClass = PasscodeClass;
|
8558
8804
|
exports.PasswordClass = PasswordClass;
|