@descope/web-components-ui 1.0.227 → 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 +868 -602
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +763 -593
- 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/4803.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/boolean-fields-descope-boolean-field-internal-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-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/boolean-fields/booleanFieldMixin.js +9 -1
- package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js +16 -0
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +4 -0
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +8 -0
- 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,18 +3398,26 @@ 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, {
|
3409
|
-
includeAttrs: [
|
3412
|
+
includeAttrs: [
|
3413
|
+
'required',
|
3414
|
+
'full-width',
|
3415
|
+
'size',
|
3416
|
+
'label',
|
3417
|
+
'invalid',
|
3418
|
+
'disabled',
|
3419
|
+
'readonly',
|
3420
|
+
],
|
3410
3421
|
});
|
3411
3422
|
|
3412
3423
|
forwardProps(this.inputElement, this, ['checked']);
|
@@ -3464,7 +3475,7 @@ descope-boolean-field-internal {
|
|
3464
3475
|
}
|
3465
3476
|
`;
|
3466
3477
|
|
3467
|
-
const componentName$
|
3478
|
+
const componentName$s = getComponentName('checkbox');
|
3468
3479
|
|
3469
3480
|
const {
|
3470
3481
|
host: host$c,
|
@@ -3559,52 +3570,56 @@ const CheckboxClass = compose(
|
|
3559
3570
|
top: 0;
|
3560
3571
|
left: 0;
|
3561
3572
|
}
|
3573
|
+
|
3574
|
+
vaadin-text-field::part(input-field)::after {
|
3575
|
+
content: none;
|
3576
|
+
}
|
3562
3577
|
`,
|
3563
3578
|
excludeAttrsSync: ['label', 'tabindex'],
|
3564
|
-
componentName: componentName$
|
3579
|
+
componentName: componentName$s,
|
3565
3580
|
})
|
3566
3581
|
);
|
3567
3582
|
|
3568
|
-
const vars$
|
3583
|
+
const vars$m = CheckboxClass.cssVarList;
|
3569
3584
|
const checkboxSize = '1.35em';
|
3570
3585
|
|
3571
3586
|
const checkbox = {
|
3572
|
-
[vars$
|
3573
|
-
[vars$
|
3574
|
-
[vars$
|
3575
|
-
[vars$
|
3576
|
-
[vars$
|
3577
|
-
[vars$
|
3578
|
-
[vars$
|
3579
|
-
[vars$
|
3580
|
-
[vars$
|
3581
|
-
[vars$
|
3582
|
-
[vars$
|
3583
|
-
[vars$
|
3584
|
-
[vars$
|
3585
|
-
[vars$
|
3586
|
-
[vars$
|
3587
|
-
[vars$
|
3588
|
-
[vars$
|
3589
|
-
[vars$
|
3590
|
-
[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,
|
3591
3606
|
|
3592
3607
|
_checked: {
|
3593
|
-
[vars$
|
3608
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
3594
3609
|
},
|
3595
3610
|
|
3596
3611
|
_disabled: {
|
3597
|
-
[vars$
|
3612
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
3598
3613
|
},
|
3599
3614
|
};
|
3600
3615
|
|
3601
3616
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3602
3617
|
__proto__: null,
|
3603
3618
|
default: checkbox,
|
3604
|
-
vars: vars$
|
3619
|
+
vars: vars$m
|
3605
3620
|
});
|
3606
3621
|
|
3607
|
-
const componentName$
|
3622
|
+
const componentName$r = getComponentName('switch-toggle');
|
3608
3623
|
|
3609
3624
|
const {
|
3610
3625
|
host: host$b,
|
@@ -3687,6 +3702,14 @@ const SwitchToggleClass = compose(
|
|
3687
3702
|
max-width: 100%;
|
3688
3703
|
}
|
3689
3704
|
|
3705
|
+
vaadin-text-field {
|
3706
|
+
width: 100%;
|
3707
|
+
}
|
3708
|
+
|
3709
|
+
vaadin-text-field::part(input-field)::after {
|
3710
|
+
content: none;
|
3711
|
+
}
|
3712
|
+
|
3690
3713
|
descope-boolean-field-internal {
|
3691
3714
|
padding: 0;
|
3692
3715
|
width: 100%;
|
@@ -3723,82 +3746,82 @@ const SwitchToggleClass = compose(
|
|
3723
3746
|
}
|
3724
3747
|
`,
|
3725
3748
|
excludeAttrsSync: ['label', 'tabindex'],
|
3726
|
-
componentName: componentName$
|
3749
|
+
componentName: componentName$r,
|
3727
3750
|
})
|
3728
3751
|
);
|
3729
3752
|
|
3730
3753
|
const knobMargin = '2px';
|
3731
3754
|
const checkboxHeight = '1.25em';
|
3732
3755
|
|
3733
|
-
const globalRefs$
|
3734
|
-
const vars$
|
3756
|
+
const globalRefs$b = getThemeRefs(globals);
|
3757
|
+
const vars$l = SwitchToggleClass.cssVarList;
|
3735
3758
|
|
3736
3759
|
const switchToggle = {
|
3737
|
-
[vars$
|
3738
|
-
[vars$
|
3739
|
-
[vars$
|
3740
|
-
|
3741
|
-
[vars$
|
3742
|
-
[vars$
|
3743
|
-
[vars$
|
3744
|
-
[vars$
|
3745
|
-
|
3746
|
-
[vars$
|
3747
|
-
[vars$
|
3748
|
-
[vars$
|
3749
|
-
[vars$
|
3750
|
-
[vars$
|
3751
|
-
[vars$
|
3752
|
-
[vars$
|
3753
|
-
|
3754
|
-
[vars$
|
3755
|
-
[vars$
|
3756
|
-
[vars$
|
3757
|
-
[vars$
|
3758
|
-
[vars$
|
3759
|
-
[vars$
|
3760
|
-
|
3761
|
-
[vars$
|
3762
|
-
[vars$
|
3763
|
-
[vars$
|
3764
|
-
[vars$
|
3765
|
-
[vars$
|
3766
|
-
[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,
|
3767
3790
|
|
3768
3791
|
_checked: {
|
3769
|
-
[vars$
|
3770
|
-
[vars$
|
3771
|
-
[vars$
|
3772
|
-
[vars$
|
3773
|
-
[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,
|
3774
3797
|
},
|
3775
3798
|
|
3776
3799
|
_disabled: {
|
3777
|
-
[vars$
|
3778
|
-
[vars$
|
3779
|
-
[vars$
|
3780
|
-
[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,
|
3781
3804
|
_checked: {
|
3782
|
-
[vars$
|
3783
|
-
[vars$
|
3805
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
3806
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
3784
3807
|
},
|
3785
3808
|
},
|
3786
3809
|
|
3787
3810
|
_invalid: {
|
3788
|
-
[vars$
|
3789
|
-
[vars$
|
3811
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
|
3812
|
+
[vars$l.knobColor]: globalRefs$b.colors.error.main,
|
3790
3813
|
},
|
3791
3814
|
};
|
3792
3815
|
|
3793
3816
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
3794
3817
|
__proto__: null,
|
3795
3818
|
default: switchToggle,
|
3796
|
-
vars: vars$
|
3819
|
+
vars: vars$l
|
3797
3820
|
});
|
3798
3821
|
|
3799
|
-
const componentName$
|
3822
|
+
const componentName$q = getComponentName('container');
|
3800
3823
|
|
3801
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3824
|
+
class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
|
3802
3825
|
constructor() {
|
3803
3826
|
super();
|
3804
3827
|
|
@@ -3850,7 +3873,7 @@ const ContainerClass = compose(
|
|
3850
3873
|
componentNameValidationMixin
|
3851
3874
|
)(RawContainer);
|
3852
3875
|
|
3853
|
-
const globalRefs$
|
3876
|
+
const globalRefs$a = getThemeRefs(globals);
|
3854
3877
|
|
3855
3878
|
const compVars$3 = ContainerClass.cssVarList;
|
3856
3879
|
|
@@ -3872,18 +3895,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
3872
3895
|
horizontalAlignment,
|
3873
3896
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
3874
3897
|
},
|
3875
|
-
componentName$
|
3898
|
+
componentName$q
|
3876
3899
|
);
|
3877
3900
|
|
3878
|
-
const { shadowColor } = helperRefs$2;
|
3901
|
+
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
3879
3902
|
|
3880
3903
|
const container = {
|
3881
3904
|
...helperTheme$2,
|
3882
3905
|
|
3883
3906
|
[compVars$3.hostWidth]: '100%',
|
3884
3907
|
[compVars$3.boxShadow]: 'none',
|
3885
|
-
[compVars$3.backgroundColor]: globalRefs$
|
3886
|
-
[compVars$3.color]: globalRefs$
|
3908
|
+
[compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
|
3909
|
+
[compVars$3.color]: globalRefs$a.colors.surface.contrast,
|
3887
3910
|
[compVars$3.borderRadius]: '0px',
|
3888
3911
|
|
3889
3912
|
verticalPadding: {
|
@@ -3930,34 +3953,34 @@ const container = {
|
|
3930
3953
|
|
3931
3954
|
shadow: {
|
3932
3955
|
sm: {
|
3933
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3956
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
|
3934
3957
|
},
|
3935
3958
|
md: {
|
3936
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3959
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
|
3937
3960
|
},
|
3938
3961
|
lg: {
|
3939
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3962
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
|
3940
3963
|
},
|
3941
3964
|
xl: {
|
3942
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3965
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
|
3943
3966
|
},
|
3944
3967
|
'2xl': {
|
3945
3968
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
3946
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
3969
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
|
3947
3970
|
},
|
3948
3971
|
},
|
3949
3972
|
|
3950
3973
|
borderRadius: {
|
3951
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
3952
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
3953
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
3954
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
3955
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
3956
|
-
'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'] },
|
3957
3980
|
},
|
3958
3981
|
};
|
3959
3982
|
|
3960
|
-
const vars$
|
3983
|
+
const vars$k = {
|
3961
3984
|
...compVars$3,
|
3962
3985
|
...helperVars$2,
|
3963
3986
|
};
|
@@ -3965,7 +3988,7 @@ const vars$j = {
|
|
3965
3988
|
var container$1 = /*#__PURE__*/Object.freeze({
|
3966
3989
|
__proto__: null,
|
3967
3990
|
default: container,
|
3968
|
-
vars: vars$
|
3991
|
+
vars: vars$k
|
3969
3992
|
});
|
3970
3993
|
|
3971
3994
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4018,51 +4041,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4018
4041
|
return CssVarImageClass;
|
4019
4042
|
};
|
4020
4043
|
|
4021
|
-
const componentName$
|
4044
|
+
const componentName$p = getComponentName('logo');
|
4022
4045
|
|
4023
4046
|
const LogoClass = createCssVarImageClass({
|
4024
|
-
componentName: componentName$
|
4047
|
+
componentName: componentName$p,
|
4025
4048
|
varName: 'url',
|
4026
4049
|
fallbackVarName: 'fallbackUrl',
|
4027
4050
|
});
|
4028
4051
|
|
4029
|
-
const vars$
|
4052
|
+
const vars$j = LogoClass.cssVarList;
|
4030
4053
|
|
4031
4054
|
const logo$1 = {
|
4032
|
-
[vars$
|
4055
|
+
[vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4033
4056
|
};
|
4034
4057
|
|
4035
4058
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
4036
4059
|
__proto__: null,
|
4037
4060
|
default: logo$1,
|
4038
|
-
vars: vars$
|
4061
|
+
vars: vars$j
|
4039
4062
|
});
|
4040
4063
|
|
4041
|
-
const componentName$
|
4064
|
+
const componentName$o = getComponentName('totp-image');
|
4042
4065
|
|
4043
4066
|
const TotpImageClass = createCssVarImageClass({
|
4044
|
-
componentName: componentName$
|
4067
|
+
componentName: componentName$o,
|
4045
4068
|
varName: 'url',
|
4046
4069
|
fallbackVarName: 'fallbackUrl',
|
4047
4070
|
});
|
4048
4071
|
|
4049
|
-
const vars$
|
4072
|
+
const vars$i = TotpImageClass.cssVarList;
|
4050
4073
|
|
4051
4074
|
const logo = {
|
4052
|
-
[vars$
|
4075
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4053
4076
|
};
|
4054
4077
|
|
4055
4078
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4056
4079
|
__proto__: null,
|
4057
4080
|
default: logo,
|
4058
|
-
vars: vars$
|
4081
|
+
vars: vars$i
|
4059
4082
|
});
|
4060
4083
|
|
4061
4084
|
// eslint-disable-next-line max-classes-per-file
|
4062
4085
|
|
4063
|
-
const componentName$
|
4086
|
+
const componentName$n = getComponentName('text');
|
4064
4087
|
|
4065
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4088
|
+
class RawText extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
|
4066
4089
|
constructor() {
|
4067
4090
|
super();
|
4068
4091
|
|
@@ -4121,98 +4144,98 @@ const TextClass = compose(
|
|
4121
4144
|
customTextMixin
|
4122
4145
|
)(RawText);
|
4123
4146
|
|
4124
|
-
const globalRefs$
|
4125
|
-
const vars$
|
4147
|
+
const globalRefs$9 = getThemeRefs(globals);
|
4148
|
+
const vars$h = TextClass.cssVarList;
|
4126
4149
|
|
4127
4150
|
const text$2 = {
|
4128
|
-
[vars$
|
4129
|
-
[vars$
|
4130
|
-
[vars$
|
4151
|
+
[vars$h.textLineHeight]: '1.35em',
|
4152
|
+
[vars$h.textAlign]: 'left',
|
4153
|
+
[vars$h.textColor]: globalRefs$9.colors.surface.dark,
|
4131
4154
|
variant: {
|
4132
4155
|
h1: {
|
4133
|
-
[vars$
|
4134
|
-
[vars$
|
4135
|
-
[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,
|
4136
4159
|
},
|
4137
4160
|
h2: {
|
4138
|
-
[vars$
|
4139
|
-
[vars$
|
4140
|
-
[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,
|
4141
4164
|
},
|
4142
4165
|
h3: {
|
4143
|
-
[vars$
|
4144
|
-
[vars$
|
4145
|
-
[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,
|
4146
4169
|
},
|
4147
4170
|
subtitle1: {
|
4148
|
-
[vars$
|
4149
|
-
[vars$
|
4150
|
-
[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,
|
4151
4174
|
},
|
4152
4175
|
subtitle2: {
|
4153
|
-
[vars$
|
4154
|
-
[vars$
|
4155
|
-
[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,
|
4156
4179
|
},
|
4157
4180
|
body1: {
|
4158
|
-
[vars$
|
4159
|
-
[vars$
|
4160
|
-
[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,
|
4161
4184
|
},
|
4162
4185
|
body2: {
|
4163
|
-
[vars$
|
4164
|
-
[vars$
|
4165
|
-
[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,
|
4166
4189
|
},
|
4167
4190
|
},
|
4168
4191
|
|
4169
4192
|
mode: {
|
4170
4193
|
primary: {
|
4171
|
-
[vars$
|
4194
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
4172
4195
|
},
|
4173
4196
|
secondary: {
|
4174
|
-
[vars$
|
4197
|
+
[vars$h.textColor]: globalRefs$9.colors.secondary.main,
|
4175
4198
|
},
|
4176
4199
|
error: {
|
4177
|
-
[vars$
|
4200
|
+
[vars$h.textColor]: globalRefs$9.colors.error.main,
|
4178
4201
|
},
|
4179
4202
|
success: {
|
4180
|
-
[vars$
|
4203
|
+
[vars$h.textColor]: globalRefs$9.colors.success.main,
|
4181
4204
|
},
|
4182
4205
|
},
|
4183
4206
|
|
4184
4207
|
textAlign: {
|
4185
|
-
right: { [vars$
|
4186
|
-
left: { [vars$
|
4187
|
-
center: { [vars$
|
4208
|
+
right: { [vars$h.textAlign]: 'right' },
|
4209
|
+
left: { [vars$h.textAlign]: 'left' },
|
4210
|
+
center: { [vars$h.textAlign]: 'center' },
|
4188
4211
|
},
|
4189
4212
|
|
4190
4213
|
_fullWidth: {
|
4191
|
-
[vars$
|
4214
|
+
[vars$h.hostWidth]: '100%',
|
4192
4215
|
},
|
4193
4216
|
|
4194
4217
|
_italic: {
|
4195
|
-
[vars$
|
4218
|
+
[vars$h.fontStyle]: 'italic',
|
4196
4219
|
},
|
4197
4220
|
|
4198
4221
|
_uppercase: {
|
4199
|
-
[vars$
|
4222
|
+
[vars$h.textTransform]: 'uppercase',
|
4200
4223
|
},
|
4201
4224
|
|
4202
4225
|
_lowercase: {
|
4203
|
-
[vars$
|
4226
|
+
[vars$h.textTransform]: 'lowercase',
|
4204
4227
|
},
|
4205
4228
|
};
|
4206
4229
|
|
4207
4230
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4208
4231
|
__proto__: null,
|
4209
4232
|
default: text$2,
|
4210
|
-
vars: vars$
|
4233
|
+
vars: vars$h
|
4211
4234
|
});
|
4212
4235
|
|
4213
|
-
const componentName$
|
4236
|
+
const componentName$m = getComponentName('link');
|
4214
4237
|
|
4215
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4238
|
+
class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
|
4216
4239
|
constructor() {
|
4217
4240
|
super();
|
4218
4241
|
|
@@ -4276,36 +4299,36 @@ const LinkClass = compose(
|
|
4276
4299
|
componentNameValidationMixin
|
4277
4300
|
)(RawLink);
|
4278
4301
|
|
4279
|
-
const globalRefs$
|
4280
|
-
const vars$
|
4302
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4303
|
+
const vars$g = LinkClass.cssVarList;
|
4281
4304
|
|
4282
4305
|
const link = {
|
4283
|
-
[vars$
|
4306
|
+
[vars$g.cursor]: 'pointer',
|
4284
4307
|
|
4285
|
-
[vars$
|
4308
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
4286
4309
|
|
4287
4310
|
textAlign: {
|
4288
|
-
right: { [vars$
|
4289
|
-
left: { [vars$
|
4290
|
-
center: { [vars$
|
4311
|
+
right: { [vars$g.textAlign]: 'right' },
|
4312
|
+
left: { [vars$g.textAlign]: 'left' },
|
4313
|
+
center: { [vars$g.textAlign]: 'center' },
|
4291
4314
|
},
|
4292
4315
|
|
4293
4316
|
_fullWidth: {
|
4294
|
-
[vars$
|
4317
|
+
[vars$g.hostWidth]: '100%',
|
4295
4318
|
},
|
4296
4319
|
|
4297
4320
|
mode: {
|
4298
4321
|
primary: {
|
4299
|
-
[vars$
|
4322
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
4300
4323
|
},
|
4301
4324
|
secondary: {
|
4302
|
-
[vars$
|
4325
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
4303
4326
|
},
|
4304
4327
|
error: {
|
4305
|
-
[vars$
|
4328
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
4306
4329
|
},
|
4307
4330
|
success: {
|
4308
|
-
[vars$
|
4331
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
4309
4332
|
},
|
4310
4333
|
},
|
4311
4334
|
};
|
@@ -4313,11 +4336,11 @@ const link = {
|
|
4313
4336
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4314
4337
|
__proto__: null,
|
4315
4338
|
default: link,
|
4316
|
-
vars: vars$
|
4339
|
+
vars: vars$g
|
4317
4340
|
});
|
4318
4341
|
|
4319
|
-
const componentName$
|
4320
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4342
|
+
const componentName$l = getComponentName('divider');
|
4343
|
+
class RawDivider extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
4321
4344
|
constructor() {
|
4322
4345
|
super();
|
4323
4346
|
|
@@ -4413,7 +4436,7 @@ const DividerClass = compose(
|
|
4413
4436
|
componentNameValidationMixin
|
4414
4437
|
)(RawDivider);
|
4415
4438
|
|
4416
|
-
const globalRefs$
|
4439
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4417
4440
|
const compVars$2 = DividerClass.cssVarList;
|
4418
4441
|
|
4419
4442
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -4421,7 +4444,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
4421
4444
|
thickness: '2px',
|
4422
4445
|
spacing: '10px',
|
4423
4446
|
},
|
4424
|
-
componentName$
|
4447
|
+
componentName$l
|
4425
4448
|
);
|
4426
4449
|
|
4427
4450
|
const divider = {
|
@@ -4431,7 +4454,7 @@ const divider = {
|
|
4431
4454
|
[compVars$2.flexDirection]: 'row',
|
4432
4455
|
[compVars$2.alignSelf]: 'stretch',
|
4433
4456
|
[compVars$2.hostWidth]: '100%',
|
4434
|
-
[compVars$2.stripeColor]: globalRefs$
|
4457
|
+
[compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
|
4435
4458
|
[compVars$2.stripeColorOpacity]: '0.5',
|
4436
4459
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4437
4460
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -4450,7 +4473,7 @@ const divider = {
|
|
4450
4473
|
},
|
4451
4474
|
};
|
4452
4475
|
|
4453
|
-
const vars$
|
4476
|
+
const vars$f = {
|
4454
4477
|
...compVars$2,
|
4455
4478
|
...helperVars$1,
|
4456
4479
|
};
|
@@ -4458,16 +4481,16 @@ const vars$e = {
|
|
4458
4481
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4459
4482
|
__proto__: null,
|
4460
4483
|
default: divider,
|
4461
|
-
vars: vars$
|
4484
|
+
vars: vars$f
|
4462
4485
|
});
|
4463
4486
|
|
4464
4487
|
/* eslint-disable no-param-reassign */
|
4465
4488
|
|
4466
|
-
const componentName$
|
4489
|
+
const componentName$k = getComponentName('passcode-internal');
|
4467
4490
|
|
4468
|
-
createBaseInputClass({ componentName: componentName$
|
4491
|
+
createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
|
4469
4492
|
|
4470
|
-
const componentName$
|
4493
|
+
const componentName$j = getComponentName('passcode');
|
4471
4494
|
|
4472
4495
|
const observedAttributes$3 = ['digits'];
|
4473
4496
|
|
@@ -4486,17 +4509,17 @@ const customMixin$5 = (superclass) =>
|
|
4486
4509
|
const template = document.createElement('template');
|
4487
4510
|
|
4488
4511
|
template.innerHTML = `
|
4489
|
-
<${componentName$
|
4512
|
+
<${componentName$k}
|
4490
4513
|
bordered="true"
|
4491
4514
|
name="code"
|
4492
4515
|
tabindex="-1"
|
4493
4516
|
slot="input"
|
4494
|
-
><slot></slot></${componentName$
|
4517
|
+
><slot></slot></${componentName$k}>
|
4495
4518
|
`;
|
4496
4519
|
|
4497
4520
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4498
4521
|
|
4499
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4522
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
4500
4523
|
|
4501
4524
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
4502
4525
|
}
|
@@ -4634,44 +4657,44 @@ const PasscodeClass = compose(
|
|
4634
4657
|
${resetInputCursor('vaadin-text-field')}
|
4635
4658
|
`,
|
4636
4659
|
excludeAttrsSync: ['tabindex'],
|
4637
|
-
componentName: componentName$
|
4660
|
+
componentName: componentName$j,
|
4638
4661
|
})
|
4639
4662
|
);
|
4640
4663
|
|
4641
|
-
const vars$
|
4664
|
+
const vars$e = PasscodeClass.cssVarList;
|
4642
4665
|
|
4643
4666
|
const passcode = {
|
4644
|
-
[vars$
|
4645
|
-
[vars$
|
4646
|
-
[vars$
|
4647
|
-
[vars$
|
4648
|
-
[vars$
|
4649
|
-
[vars$
|
4650
|
-
[vars$
|
4651
|
-
[vars$
|
4652
|
-
[vars$
|
4653
|
-
[vars$
|
4654
|
-
[vars$
|
4655
|
-
[vars$
|
4656
|
-
[vars$
|
4657
|
-
[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,
|
4658
4681
|
|
4659
4682
|
_hideCursor: {
|
4660
|
-
[vars$
|
4683
|
+
[vars$e.digitCaretTextColor]: 'transparent',
|
4661
4684
|
},
|
4662
4685
|
};
|
4663
4686
|
|
4664
4687
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
4665
4688
|
__proto__: null,
|
4666
4689
|
default: passcode,
|
4667
|
-
vars: vars$
|
4690
|
+
vars: vars$e
|
4668
4691
|
});
|
4669
4692
|
|
4670
|
-
const componentName$
|
4693
|
+
const componentName$i = getComponentName('loader-linear');
|
4671
4694
|
|
4672
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4695
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
|
4673
4696
|
static get componentName() {
|
4674
|
-
return componentName$
|
4697
|
+
return componentName$i;
|
4675
4698
|
}
|
4676
4699
|
|
4677
4700
|
constructor() {
|
@@ -4732,54 +4755,54 @@ const LoaderLinearClass = compose(
|
|
4732
4755
|
componentNameValidationMixin
|
4733
4756
|
)(RawLoaderLinear);
|
4734
4757
|
|
4735
|
-
const globalRefs$
|
4736
|
-
const vars$
|
4758
|
+
const globalRefs$6 = getThemeRefs(globals);
|
4759
|
+
const vars$d = LoaderLinearClass.cssVarList;
|
4737
4760
|
|
4738
4761
|
const loaderLinear = {
|
4739
|
-
[vars$
|
4740
|
-
[vars$
|
4762
|
+
[vars$d.hostDisplay]: 'inline-block',
|
4763
|
+
[vars$d.hostWidth]: '100%',
|
4741
4764
|
|
4742
|
-
[vars$
|
4743
|
-
[vars$
|
4765
|
+
[vars$d.barColor]: globalRefs$6.colors.surface.contrast,
|
4766
|
+
[vars$d.barWidth]: '20%',
|
4744
4767
|
|
4745
|
-
[vars$
|
4746
|
-
[vars$
|
4768
|
+
[vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
|
4769
|
+
[vars$d.barBorderRadius]: '4px',
|
4747
4770
|
|
4748
|
-
[vars$
|
4749
|
-
[vars$
|
4750
|
-
[vars$
|
4751
|
-
[vars$
|
4771
|
+
[vars$d.animationDuration]: '2s',
|
4772
|
+
[vars$d.animationTimingFunction]: 'linear',
|
4773
|
+
[vars$d.animationIterationCount]: 'infinite',
|
4774
|
+
[vars$d.verticalPadding]: '0.25em',
|
4752
4775
|
|
4753
4776
|
size: {
|
4754
|
-
xs: { [vars$
|
4755
|
-
sm: { [vars$
|
4756
|
-
md: { [vars$
|
4757
|
-
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' },
|
4758
4781
|
},
|
4759
4782
|
|
4760
4783
|
mode: {
|
4761
4784
|
primary: {
|
4762
|
-
[vars$
|
4785
|
+
[vars$d.barColor]: globalRefs$6.colors.primary.main,
|
4763
4786
|
},
|
4764
4787
|
secondary: {
|
4765
|
-
[vars$
|
4788
|
+
[vars$d.barColor]: globalRefs$6.colors.secondary.main,
|
4766
4789
|
},
|
4767
4790
|
},
|
4768
4791
|
|
4769
4792
|
_hidden: {
|
4770
|
-
[vars$
|
4793
|
+
[vars$d.hostDisplay]: 'none',
|
4771
4794
|
},
|
4772
4795
|
};
|
4773
4796
|
|
4774
4797
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
4775
4798
|
__proto__: null,
|
4776
4799
|
default: loaderLinear,
|
4777
|
-
vars: vars$
|
4800
|
+
vars: vars$d
|
4778
4801
|
});
|
4779
4802
|
|
4780
|
-
const componentName$
|
4803
|
+
const componentName$h = getComponentName('loader-radial');
|
4781
4804
|
|
4782
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4805
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
4783
4806
|
constructor() {
|
4784
4807
|
super();
|
4785
4808
|
|
@@ -4823,22 +4846,22 @@ const LoaderRadialClass = compose(
|
|
4823
4846
|
componentNameValidationMixin
|
4824
4847
|
)(RawLoaderRadial);
|
4825
4848
|
|
4826
|
-
const globalRefs$
|
4849
|
+
const globalRefs$5 = getThemeRefs(globals);
|
4827
4850
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
4828
4851
|
|
4829
4852
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
4830
4853
|
{
|
4831
|
-
spinnerColor: globalRefs$
|
4854
|
+
spinnerColor: globalRefs$5.colors.surface.contrast,
|
4832
4855
|
mode: {
|
4833
4856
|
primary: {
|
4834
|
-
spinnerColor: globalRefs$
|
4857
|
+
spinnerColor: globalRefs$5.colors.primary.main,
|
4835
4858
|
},
|
4836
4859
|
secondary: {
|
4837
|
-
spinnerColor: globalRefs$
|
4860
|
+
spinnerColor: globalRefs$5.colors.secondary.main,
|
4838
4861
|
},
|
4839
4862
|
},
|
4840
4863
|
},
|
4841
|
-
componentName$
|
4864
|
+
componentName$h
|
4842
4865
|
);
|
4843
4866
|
|
4844
4867
|
const loaderRadial = {
|
@@ -4867,7 +4890,7 @@ const loaderRadial = {
|
|
4867
4890
|
[compVars$1.hostDisplay]: 'none',
|
4868
4891
|
},
|
4869
4892
|
};
|
4870
|
-
const vars$
|
4893
|
+
const vars$c = {
|
4871
4894
|
...compVars$1,
|
4872
4895
|
...helperVars,
|
4873
4896
|
};
|
@@ -4875,10 +4898,10 @@ const vars$b = {
|
|
4875
4898
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
4876
4899
|
__proto__: null,
|
4877
4900
|
default: loaderRadial,
|
4878
|
-
vars: vars$
|
4901
|
+
vars: vars$c
|
4879
4902
|
});
|
4880
4903
|
|
4881
|
-
const componentName$
|
4904
|
+
const componentName$g = getComponentName('combo-box');
|
4882
4905
|
|
4883
4906
|
const ComboBoxMixin = (superclass) =>
|
4884
4907
|
class ComboBoxMixinClass extends superclass {
|
@@ -5229,66 +5252,66 @@ const ComboBoxClass = compose(
|
|
5229
5252
|
// and reset items to an empty array, and opening the list box with no items
|
5230
5253
|
// to display.
|
5231
5254
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5232
|
-
componentName: componentName$
|
5255
|
+
componentName: componentName$g,
|
5233
5256
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5234
5257
|
})
|
5235
5258
|
);
|
5236
5259
|
|
5237
|
-
const globalRefs$
|
5238
|
-
const vars$
|
5260
|
+
const globalRefs$4 = getThemeRefs(globals);
|
5261
|
+
const vars$b = ComboBoxClass.cssVarList;
|
5239
5262
|
|
5240
5263
|
const comboBox = {
|
5241
|
-
[vars$
|
5242
|
-
[vars$
|
5243
|
-
[vars$
|
5244
|
-
[vars$
|
5245
|
-
[vars$
|
5246
|
-
[vars$
|
5247
|
-
[vars$
|
5248
|
-
[vars$
|
5249
|
-
[vars$
|
5250
|
-
[vars$
|
5251
|
-
[vars$
|
5252
|
-
[vars$
|
5253
|
-
[vars$
|
5254
|
-
[vars$
|
5255
|
-
[vars$
|
5256
|
-
[vars$
|
5257
|
-
[vars$
|
5258
|
-
[vars$
|
5259
|
-
[vars$
|
5260
|
-
[vars$
|
5261
|
-
[vars$
|
5262
|
-
[vars$
|
5263
|
-
[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,
|
5264
5287
|
|
5265
5288
|
_readonly: {
|
5266
|
-
[vars$
|
5289
|
+
[vars$b.inputDropdownButtonCursor]: 'default',
|
5267
5290
|
},
|
5268
5291
|
|
5269
5292
|
// Overlay theme exposed via the component:
|
5270
|
-
[vars$
|
5271
|
-
[vars$
|
5272
|
-
[vars$
|
5273
|
-
[vars$
|
5293
|
+
[vars$b.overlayFontSize]: refs.fontSize,
|
5294
|
+
[vars$b.overlayFontFamily]: refs.fontFamily,
|
5295
|
+
[vars$b.overlayCursor]: 'pointer',
|
5296
|
+
[vars$b.overlayItemBoxShadow]: 'none',
|
5274
5297
|
|
5275
5298
|
// Overlay direct theme:
|
5276
|
-
[vars$
|
5277
|
-
[vars$
|
5299
|
+
[vars$b.overlay.minHeight]: '400px',
|
5300
|
+
[vars$b.overlay.margin]: '0',
|
5278
5301
|
};
|
5279
5302
|
|
5280
5303
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5281
5304
|
__proto__: null,
|
5282
5305
|
comboBox: comboBox,
|
5283
5306
|
default: comboBox,
|
5284
|
-
vars: vars$
|
5307
|
+
vars: vars$b
|
5285
5308
|
});
|
5286
5309
|
|
5287
5310
|
const observedAttributes$2 = ['src', 'alt'];
|
5288
5311
|
|
5289
|
-
const componentName$
|
5312
|
+
const componentName$f = getComponentName('image');
|
5290
5313
|
|
5291
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5314
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$f, baseSelector: ':host > img' });
|
5292
5315
|
class RawImage extends BaseClass$1 {
|
5293
5316
|
static get observedAttributes() {
|
5294
5317
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5328,14 +5351,14 @@ const ImageClass = compose(
|
|
5328
5351
|
draggableMixin
|
5329
5352
|
)(RawImage);
|
5330
5353
|
|
5331
|
-
const vars$
|
5354
|
+
const vars$a = ImageClass.cssVarList;
|
5332
5355
|
|
5333
5356
|
const image = {};
|
5334
5357
|
|
5335
5358
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5336
5359
|
__proto__: null,
|
5337
5360
|
default: image,
|
5338
|
-
vars: vars$
|
5361
|
+
vars: vars$a
|
5339
5362
|
});
|
5340
5363
|
|
5341
5364
|
var CountryCodes = [
|
@@ -6551,14 +6574,14 @@ var CountryCodes = [
|
|
6551
6574
|
},
|
6552
6575
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
6553
6576
|
|
6554
|
-
const componentName$
|
6577
|
+
const componentName$e = getComponentName('phone-field-internal');
|
6555
6578
|
|
6556
|
-
createBaseInputClass({ componentName: componentName$
|
6579
|
+
createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
|
6557
6580
|
|
6558
6581
|
const textVars$1 = TextFieldClass.cssVarList;
|
6559
6582
|
const comboVars = ComboBoxClass.cssVarList;
|
6560
6583
|
|
6561
|
-
const componentName$
|
6584
|
+
const componentName$d = getComponentName('phone-field');
|
6562
6585
|
|
6563
6586
|
const customMixin$4 = (superclass) =>
|
6564
6587
|
class PhoneFieldMixinClass extends superclass {
|
@@ -6572,15 +6595,15 @@ const customMixin$4 = (superclass) =>
|
|
6572
6595
|
const template = document.createElement('template');
|
6573
6596
|
|
6574
6597
|
template.innerHTML = `
|
6575
|
-
<${componentName$
|
6598
|
+
<${componentName$e}
|
6576
6599
|
tabindex="-1"
|
6577
6600
|
slot="input"
|
6578
|
-
></${componentName$
|
6601
|
+
></${componentName$e}>
|
6579
6602
|
`;
|
6580
6603
|
|
6581
6604
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6582
6605
|
|
6583
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6606
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
6584
6607
|
|
6585
6608
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6586
6609
|
includeAttrs: [
|
@@ -6775,32 +6798,32 @@ const PhoneFieldClass = compose(
|
|
6775
6798
|
}
|
6776
6799
|
`,
|
6777
6800
|
excludeAttrsSync: ['tabindex'],
|
6778
|
-
componentName: componentName$
|
6801
|
+
componentName: componentName$d,
|
6779
6802
|
})
|
6780
6803
|
);
|
6781
6804
|
|
6782
|
-
const vars$
|
6805
|
+
const vars$9 = PhoneFieldClass.cssVarList;
|
6783
6806
|
|
6784
6807
|
const phoneField = {
|
6785
|
-
[vars$
|
6786
|
-
[vars$
|
6787
|
-
[vars$
|
6788
|
-
[vars$
|
6789
|
-
[vars$
|
6790
|
-
[vars$
|
6791
|
-
[vars$
|
6792
|
-
[vars$
|
6793
|
-
[vars$
|
6794
|
-
[vars$
|
6795
|
-
[vars$
|
6796
|
-
[vars$
|
6797
|
-
[vars$
|
6798
|
-
[vars$
|
6799
|
-
[vars$
|
6800
|
-
[vars$
|
6801
|
-
[vars$
|
6802
|
-
[vars$
|
6803
|
-
[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',
|
6804
6827
|
|
6805
6828
|
// '@overlay': {
|
6806
6829
|
// overlayItemBackgroundColor: 'red'
|
@@ -6810,16 +6833,16 @@ const phoneField = {
|
|
6810
6833
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
6811
6834
|
__proto__: null,
|
6812
6835
|
default: phoneField,
|
6813
|
-
vars: vars$
|
6836
|
+
vars: vars$9
|
6814
6837
|
});
|
6815
6838
|
|
6816
|
-
const componentName$
|
6839
|
+
const componentName$c = getComponentName('phone-field-internal-input-box');
|
6817
6840
|
|
6818
|
-
createBaseInputClass({ componentName: componentName$
|
6841
|
+
createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
|
6819
6842
|
|
6820
6843
|
const textVars = TextFieldClass.cssVarList;
|
6821
6844
|
|
6822
|
-
const componentName$
|
6845
|
+
const componentName$b = getComponentName('phone-input-box-field');
|
6823
6846
|
|
6824
6847
|
const customMixin$3 = (superclass) =>
|
6825
6848
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -6833,15 +6856,15 @@ const customMixin$3 = (superclass) =>
|
|
6833
6856
|
const template = document.createElement('template');
|
6834
6857
|
|
6835
6858
|
template.innerHTML = `
|
6836
|
-
<${componentName$
|
6859
|
+
<${componentName$c}
|
6837
6860
|
tabindex="-1"
|
6838
6861
|
slot="input"
|
6839
|
-
></${componentName$
|
6862
|
+
></${componentName$c}>
|
6840
6863
|
`;
|
6841
6864
|
|
6842
6865
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6843
6866
|
|
6844
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6867
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
6845
6868
|
|
6846
6869
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6847
6870
|
includeAttrs: [
|
@@ -6973,44 +6996,44 @@ const PhoneFieldInputBoxClass = compose(
|
|
6973
6996
|
}
|
6974
6997
|
`,
|
6975
6998
|
excludeAttrsSync: ['tabindex'],
|
6976
|
-
componentName: componentName$
|
6999
|
+
componentName: componentName$b,
|
6977
7000
|
})
|
6978
7001
|
);
|
6979
7002
|
|
6980
|
-
const vars$
|
7003
|
+
const vars$8 = PhoneFieldInputBoxClass.cssVarList;
|
6981
7004
|
|
6982
7005
|
const phoneInputBoxField = {
|
6983
|
-
[vars$
|
6984
|
-
[vars$
|
6985
|
-
[vars$
|
6986
|
-
[vars$
|
6987
|
-
[vars$
|
6988
|
-
[vars$
|
6989
|
-
[vars$
|
6990
|
-
[vars$
|
6991
|
-
[vars$
|
6992
|
-
[vars$
|
6993
|
-
[vars$
|
6994
|
-
[vars$
|
6995
|
-
[vars$
|
6996
|
-
[vars$
|
6997
|
-
[vars$
|
6998
|
-
[vars$
|
6999
|
-
[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,
|
7000
7023
|
_fullWidth: {
|
7001
|
-
[vars$
|
7024
|
+
[vars$8.hostWidth]: refs.width,
|
7002
7025
|
},
|
7003
7026
|
};
|
7004
7027
|
|
7005
7028
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7006
7029
|
__proto__: null,
|
7007
7030
|
default: phoneInputBoxField,
|
7008
|
-
vars: vars$
|
7031
|
+
vars: vars$8
|
7009
7032
|
});
|
7010
7033
|
|
7011
|
-
const componentName$
|
7034
|
+
const componentName$a = getComponentName('new-password-internal');
|
7012
7035
|
|
7013
|
-
const componentName$
|
7036
|
+
const componentName$9 = getComponentName('new-password');
|
7014
7037
|
|
7015
7038
|
const customMixin$2 = (superclass) =>
|
7016
7039
|
class NewPasswordMixinClass extends superclass {
|
@@ -7020,16 +7043,16 @@ const customMixin$2 = (superclass) =>
|
|
7020
7043
|
const template = document.createElement('template');
|
7021
7044
|
|
7022
7045
|
template.innerHTML = `
|
7023
|
-
<${componentName$
|
7046
|
+
<${componentName$a}
|
7024
7047
|
name="new-password"
|
7025
7048
|
tabindex="-1"
|
7026
7049
|
slot="input"
|
7027
|
-
></${componentName$
|
7050
|
+
></${componentName$a}>
|
7028
7051
|
`;
|
7029
7052
|
|
7030
7053
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7031
7054
|
|
7032
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7055
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
7033
7056
|
|
7034
7057
|
forwardAttrs(this, this.inputElement, {
|
7035
7058
|
includeAttrs: [
|
@@ -7128,32 +7151,32 @@ const NewPasswordClass = compose(
|
|
7128
7151
|
},
|
7129
7152
|
`,
|
7130
7153
|
excludeAttrsSync: ['tabindex'],
|
7131
|
-
componentName: componentName$
|
7154
|
+
componentName: componentName$9,
|
7132
7155
|
})
|
7133
7156
|
);
|
7134
7157
|
|
7135
|
-
const vars$
|
7158
|
+
const vars$7 = NewPasswordClass.cssVarList;
|
7136
7159
|
|
7137
7160
|
const newPassword = {
|
7138
|
-
[vars$
|
7139
|
-
[vars$
|
7140
|
-
[vars$
|
7141
|
-
[vars$
|
7142
|
-
[vars$
|
7143
|
-
[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,
|
7144
7167
|
|
7145
7168
|
_required: {
|
7146
7169
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7147
7170
|
// That's why we fake the required indicator on each input.
|
7148
7171
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7149
|
-
[vars$
|
7172
|
+
[vars$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7150
7173
|
},
|
7151
7174
|
};
|
7152
7175
|
|
7153
7176
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7154
7177
|
__proto__: null,
|
7155
7178
|
default: newPassword,
|
7156
|
-
vars: vars$
|
7179
|
+
vars: vars$7
|
7157
7180
|
});
|
7158
7181
|
|
7159
7182
|
const getFileBase64 = (fileObj) => {
|
@@ -7168,7 +7191,7 @@ const getFilename = (fileObj) => {
|
|
7168
7191
|
return fileObj.name.replace(/^.*\\/, '');
|
7169
7192
|
};
|
7170
7193
|
|
7171
|
-
const componentName$
|
7194
|
+
const componentName$8 = getComponentName('upload-file');
|
7172
7195
|
|
7173
7196
|
const observedAttributes$1 = [
|
7174
7197
|
'title',
|
@@ -7183,7 +7206,7 @@ const observedAttributes$1 = [
|
|
7183
7206
|
'icon',
|
7184
7207
|
];
|
7185
7208
|
|
7186
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7209
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$8, baseSelector: ':host > div' });
|
7187
7210
|
|
7188
7211
|
class RawUploadFile extends BaseInputClass {
|
7189
7212
|
static get observedAttributes() {
|
@@ -7393,76 +7416,76 @@ const UploadFileClass = compose(
|
|
7393
7416
|
componentNameValidationMixin
|
7394
7417
|
)(RawUploadFile);
|
7395
7418
|
|
7396
|
-
const vars$
|
7419
|
+
const vars$6 = UploadFileClass.cssVarList;
|
7397
7420
|
|
7398
7421
|
const uploadFile = {
|
7399
|
-
[vars$
|
7400
|
-
[vars$
|
7422
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
7423
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
7401
7424
|
|
7402
|
-
[vars$
|
7425
|
+
[vars$6.iconSize]: '2em',
|
7403
7426
|
|
7404
|
-
[vars$
|
7405
|
-
[vars$
|
7427
|
+
[vars$6.hostPadding]: '0.75em',
|
7428
|
+
[vars$6.gap]: '0.5em',
|
7406
7429
|
|
7407
|
-
[vars$
|
7408
|
-
[vars$
|
7409
|
-
[vars$
|
7430
|
+
[vars$6.fontSize]: '16px',
|
7431
|
+
[vars$6.titleFontWeight]: '500',
|
7432
|
+
[vars$6.lineHeight]: '1em',
|
7410
7433
|
|
7411
|
-
[vars$
|
7412
|
-
[vars$
|
7413
|
-
[vars$
|
7414
|
-
[vars$
|
7434
|
+
[vars$6.borderWidth]: refs.borderWidth,
|
7435
|
+
[vars$6.borderColor]: refs.borderColor,
|
7436
|
+
[vars$6.borderRadius]: refs.borderRadius,
|
7437
|
+
[vars$6.borderStyle]: 'dashed',
|
7415
7438
|
|
7416
7439
|
_required: {
|
7417
|
-
[vars$
|
7440
|
+
[vars$6.requiredIndicator]: refs.requiredIndicator,
|
7418
7441
|
},
|
7419
7442
|
|
7420
7443
|
size: {
|
7421
7444
|
xs: {
|
7422
|
-
[vars$
|
7423
|
-
[vars$
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7426
|
-
[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',
|
7427
7450
|
},
|
7428
7451
|
sm: {
|
7429
|
-
[vars$
|
7430
|
-
[vars$
|
7431
|
-
[vars$
|
7432
|
-
[vars$
|
7433
|
-
[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',
|
7434
7457
|
},
|
7435
7458
|
md: {
|
7436
|
-
[vars$
|
7437
|
-
[vars$
|
7438
|
-
[vars$
|
7439
|
-
[vars$
|
7440
|
-
[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',
|
7441
7464
|
},
|
7442
7465
|
lg: {
|
7443
|
-
[vars$
|
7444
|
-
[vars$
|
7445
|
-
[vars$
|
7446
|
-
[vars$
|
7447
|
-
[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',
|
7448
7471
|
},
|
7449
7472
|
},
|
7450
7473
|
|
7451
7474
|
_fullWidth: {
|
7452
|
-
[vars$
|
7475
|
+
[vars$6.hostWidth]: refs.width,
|
7453
7476
|
},
|
7454
7477
|
};
|
7455
7478
|
|
7456
7479
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7457
7480
|
__proto__: null,
|
7458
7481
|
default: uploadFile,
|
7459
|
-
vars: vars$
|
7482
|
+
vars: vars$6
|
7460
7483
|
});
|
7461
7484
|
|
7462
|
-
const componentName$
|
7485
|
+
const componentName$7 = getComponentName('button-selection-group-item');
|
7463
7486
|
|
7464
7487
|
class RawSelectItem extends createBaseClass({
|
7465
|
-
componentName: componentName$
|
7488
|
+
componentName: componentName$7,
|
7466
7489
|
baseSelector: ':host > descope-button',
|
7467
7490
|
}) {
|
7468
7491
|
get size() {
|
@@ -7556,38 +7579,38 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7556
7579
|
componentNameValidationMixin
|
7557
7580
|
)(RawSelectItem);
|
7558
7581
|
|
7559
|
-
const globalRefs$
|
7582
|
+
const globalRefs$3 = getThemeRefs(globals);
|
7560
7583
|
|
7561
|
-
const vars$
|
7584
|
+
const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
|
7562
7585
|
|
7563
7586
|
const buttonSelectionGroupItem = {
|
7564
|
-
[vars$
|
7565
|
-
[vars$
|
7566
|
-
[vars$
|
7567
|
-
[vars$
|
7568
|
-
[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,
|
7569
7592
|
|
7570
7593
|
_hover: {
|
7571
|
-
[vars$
|
7594
|
+
[vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7572
7595
|
},
|
7573
7596
|
|
7574
7597
|
_selected: {
|
7575
|
-
[vars$
|
7576
|
-
[vars$
|
7577
|
-
[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,
|
7578
7601
|
},
|
7579
7602
|
};
|
7580
7603
|
|
7581
7604
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7582
7605
|
__proto__: null,
|
7583
7606
|
default: buttonSelectionGroupItem,
|
7584
|
-
vars: vars$
|
7607
|
+
vars: vars$5
|
7585
7608
|
});
|
7586
7609
|
|
7587
|
-
const componentName$
|
7610
|
+
const componentName$6 = getComponentName('button-selection-group-internal');
|
7588
7611
|
|
7589
7612
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
7590
|
-
componentName: componentName$
|
7613
|
+
componentName: componentName$6,
|
7591
7614
|
baseSelector: 'slot',
|
7592
7615
|
}) {
|
7593
7616
|
constructor() {
|
@@ -7724,7 +7747,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7724
7747
|
}
|
7725
7748
|
}
|
7726
7749
|
|
7727
|
-
const componentName$
|
7750
|
+
const componentName$5 = getComponentName('button-selection-group');
|
7728
7751
|
|
7729
7752
|
const customMixin$1 = (superclass) =>
|
7730
7753
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -7799,18 +7822,18 @@ const customMixin$1 = (superclass) =>
|
|
7799
7822
|
const template = document.createElement('template');
|
7800
7823
|
|
7801
7824
|
template.innerHTML = `
|
7802
|
-
<${componentName$
|
7825
|
+
<${componentName$6}
|
7803
7826
|
name="button-selection-group"
|
7804
7827
|
slot="input"
|
7805
7828
|
tabindex="-1"
|
7806
7829
|
>
|
7807
7830
|
<slot></slot>
|
7808
|
-
</${componentName$
|
7831
|
+
</${componentName$6}>
|
7809
7832
|
`;
|
7810
7833
|
|
7811
7834
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7812
7835
|
|
7813
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7836
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
7814
7837
|
|
7815
7838
|
forwardAttrs(this, this.inputElement, {
|
7816
7839
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -7913,29 +7936,29 @@ const ButtonSelectionGroupClass = compose(
|
|
7913
7936
|
${resetInputCursor('vaadin-text-field')}
|
7914
7937
|
`,
|
7915
7938
|
excludeAttrsSync: ['tabindex'],
|
7916
|
-
componentName: componentName$
|
7939
|
+
componentName: componentName$5,
|
7917
7940
|
})
|
7918
7941
|
);
|
7919
7942
|
|
7920
|
-
const globalRefs$
|
7921
|
-
const vars$
|
7943
|
+
const globalRefs$2 = getThemeRefs(globals);
|
7944
|
+
const vars$4 = ButtonSelectionGroupClass.cssVarList;
|
7922
7945
|
|
7923
7946
|
const buttonSelectionGroup = {
|
7924
|
-
[vars$
|
7925
|
-
[vars$
|
7926
|
-
[vars$
|
7927
|
-
[vars$
|
7928
|
-
[vars$
|
7929
|
-
[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,
|
7930
7953
|
};
|
7931
7954
|
|
7932
7955
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
7933
7956
|
__proto__: null,
|
7934
7957
|
default: buttonSelectionGroup,
|
7935
|
-
vars: vars$
|
7958
|
+
vars: vars$4
|
7936
7959
|
});
|
7937
7960
|
|
7938
|
-
const componentName$
|
7961
|
+
const componentName$4 = getComponentName('modal');
|
7939
7962
|
|
7940
7963
|
const customMixin = (superclass) =>
|
7941
7964
|
class ModalMixinClass extends superclass {
|
@@ -8031,7 +8054,7 @@ const ModalClass = compose(
|
|
8031
8054
|
wrappedEleName: 'vaadin-dialog',
|
8032
8055
|
style: () => ``,
|
8033
8056
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8034
|
-
componentName: componentName$
|
8057
|
+
componentName: componentName$4,
|
8035
8058
|
})
|
8036
8059
|
);
|
8037
8060
|
|
@@ -8042,14 +8065,14 @@ const modal = {
|
|
8042
8065
|
[compVars.overlayWidth]: '700px',
|
8043
8066
|
};
|
8044
8067
|
|
8045
|
-
const vars$
|
8068
|
+
const vars$3 = {
|
8046
8069
|
...compVars,
|
8047
8070
|
};
|
8048
8071
|
|
8049
8072
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8050
8073
|
__proto__: null,
|
8051
8074
|
default: modal,
|
8052
|
-
vars: vars$
|
8075
|
+
vars: vars$3
|
8053
8076
|
});
|
8054
8077
|
|
8055
8078
|
const isValidDataType = (data) => {
|
@@ -8062,7 +8085,7 @@ const isValidDataType = (data) => {
|
|
8062
8085
|
return isValid;
|
8063
8086
|
};
|
8064
8087
|
|
8065
|
-
const componentName$
|
8088
|
+
const componentName$3 = getComponentName('grid');
|
8066
8089
|
|
8067
8090
|
const GridMixin = (superclass) =>
|
8068
8091
|
class GridMixinClass extends superclass {
|
@@ -8186,9 +8209,16 @@ const GridMixin = (superclass) =>
|
|
8186
8209
|
const itemsIds = new Set(
|
8187
8210
|
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
8188
8211
|
);
|
8189
|
-
|
8212
|
+
|
8213
|
+
const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
8190
8214
|
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
8191
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
|
+
}
|
8192
8222
|
}
|
8193
8223
|
}
|
8194
8224
|
}
|
@@ -8277,38 +8307,38 @@ const GridClass = compose(
|
|
8277
8307
|
}
|
8278
8308
|
`,
|
8279
8309
|
excludeAttrsSync: ['columns', 'tabindex'],
|
8280
|
-
componentName: componentName$
|
8310
|
+
componentName: componentName$3,
|
8281
8311
|
})
|
8282
8312
|
);
|
8283
8313
|
|
8284
|
-
const globalRefs = getThemeRefs(globals);
|
8285
|
-
const vars$
|
8314
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8315
|
+
const vars$2 = GridClass.cssVarList;
|
8286
8316
|
|
8287
8317
|
const grid = {
|
8288
|
-
[vars$
|
8289
|
-
[vars$
|
8290
|
-
[vars$
|
8318
|
+
[vars$2.hostWidth]: '100%',
|
8319
|
+
[vars$2.hostHeight]: '100%',
|
8320
|
+
[vars$2.hostMinHeight]: '400px',
|
8291
8321
|
|
8292
|
-
[vars$
|
8293
|
-
[vars$
|
8322
|
+
[vars$2.fontSize]: refs.fontSize,
|
8323
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
8294
8324
|
|
8295
|
-
[vars$
|
8296
|
-
[vars$
|
8297
|
-
[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,
|
8298
8328
|
|
8299
|
-
[vars$
|
8300
|
-
[vars$
|
8301
|
-
[vars$
|
8302
|
-
[vars$
|
8329
|
+
[vars$2.inputBorderWidth]: refs.borderWidth,
|
8330
|
+
[vars$2.inputBorderStyle]: refs.borderStyle,
|
8331
|
+
[vars$2.inputBorderRadius]: refs.borderRadius,
|
8332
|
+
[vars$2.inputBorderColor]: 'transparent',
|
8303
8333
|
|
8304
|
-
[vars$
|
8334
|
+
[vars$2.separatorColor]: refs.borderColor,
|
8305
8335
|
|
8306
|
-
[vars$
|
8307
|
-
[vars$
|
8308
|
-
[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,
|
8309
8339
|
|
8310
8340
|
_bordered: {
|
8311
|
-
[vars$
|
8341
|
+
[vars$2.inputBorderColor]: refs.borderColor,
|
8312
8342
|
},
|
8313
8343
|
};
|
8314
8344
|
|
@@ -8316,6 +8346,129 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8316
8346
|
__proto__: null,
|
8317
8347
|
default: grid,
|
8318
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,
|
8319
8472
|
vars: vars$1
|
8320
8473
|
});
|
8321
8474
|
|
@@ -8348,6 +8501,7 @@ const components = {
|
|
8348
8501
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8349
8502
|
modal: modal$1,
|
8350
8503
|
grid: grid$1,
|
8504
|
+
notificationCard,
|
8351
8505
|
};
|
8352
8506
|
|
8353
8507
|
const theme = Object.keys(components).reduce(
|
@@ -8360,14 +8514,14 @@ const vars = Object.keys(components).reduce(
|
|
8360
8514
|
);
|
8361
8515
|
|
8362
8516
|
const defaultTheme = { globals, components: theme };
|
8363
|
-
const themeVars = { globals: vars$
|
8517
|
+
const themeVars = { globals: vars$u, components: vars };
|
8364
8518
|
|
8365
|
-
const componentName = getComponentName('recaptcha');
|
8519
|
+
const componentName$1 = getComponentName('recaptcha');
|
8366
8520
|
|
8367
8521
|
const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
|
8368
8522
|
|
8369
8523
|
const BaseClass = createBaseClass({
|
8370
|
-
componentName,
|
8524
|
+
componentName: componentName$1,
|
8371
8525
|
baseSelector: ':host > div',
|
8372
8526
|
});
|
8373
8527
|
class RawRecaptcha extends BaseClass {
|
@@ -8519,6 +8673,117 @@ class RawRecaptcha extends BaseClass {
|
|
8519
8673
|
|
8520
8674
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
8521
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
|
+
|
8522
8787
|
exports.ButtonClass = ButtonClass;
|
8523
8788
|
exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
|
8524
8789
|
exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
|
@@ -8533,6 +8798,7 @@ exports.LoaderRadialClass = LoaderRadialClass;
|
|
8533
8798
|
exports.LogoClass = LogoClass;
|
8534
8799
|
exports.ModalClass = ModalClass;
|
8535
8800
|
exports.NewPasswordClass = NewPasswordClass;
|
8801
|
+
exports.NotificationClass = NotificationClass;
|
8536
8802
|
exports.NumberFieldClass = NumberFieldClass;
|
8537
8803
|
exports.PasscodeClass = PasscodeClass;
|
8538
8804
|
exports.PasswordClass = PasswordClass;
|