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