@descope/web-components-ui 1.0.294 → 1.0.295
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1145 -919
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1139 -912
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1735.js +73 -0
- package/dist/umd/1735.js.LICENSE.txt +17 -0
- package/dist/umd/2106.js +1 -1
- package/dist/umd/7911.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -1
- package/dist/umd/descope-user-auth-method-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +21 -2
- package/src/components/descope-user-attribute/UserAttributeClass.js +13 -0
- package/src/components/descope-user-auth-method/UserAuthMethodClass.js +201 -0
- package/src/components/descope-user-auth-method/green-v.svg +3 -0
- package/src/components/descope-user-auth-method/index.js +9 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/userAuthMethod.js +19 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -630,7 +630,7 @@ const globals = {
|
|
630
630
|
fonts,
|
631
631
|
direction,
|
632
632
|
};
|
633
|
-
const vars$
|
633
|
+
const vars$E = getThemeVars(globals);
|
634
634
|
|
635
635
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
636
636
|
|
@@ -2576,7 +2576,7 @@ const clickableMixin = (superclass) =>
|
|
2576
2576
|
}
|
2577
2577
|
};
|
2578
2578
|
|
2579
|
-
const componentName$
|
2579
|
+
const componentName$N = getComponentName('button');
|
2580
2580
|
|
2581
2581
|
const resetStyles = `
|
2582
2582
|
:host {
|
@@ -2614,7 +2614,7 @@ const iconStyles = `
|
|
2614
2614
|
|
2615
2615
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
2616
2616
|
|
2617
|
-
const { host: host$
|
2617
|
+
const { host: host$n, label: label$a } = {
|
2618
2618
|
host: { selector: () => ':host' },
|
2619
2619
|
label: { selector: '::part(label)' },
|
2620
2620
|
};
|
@@ -2626,7 +2626,7 @@ const ButtonClass = compose(
|
|
2626
2626
|
mappings: {
|
2627
2627
|
hostWidth: { property: 'width' },
|
2628
2628
|
hostHeight: { property: 'height' },
|
2629
|
-
hostDirection: { ...host$
|
2629
|
+
hostDirection: { ...host$n, property: 'direction' },
|
2630
2630
|
fontSize: {},
|
2631
2631
|
fontFamily: {},
|
2632
2632
|
|
@@ -2678,7 +2678,7 @@ const ButtonClass = compose(
|
|
2678
2678
|
}
|
2679
2679
|
`,
|
2680
2680
|
excludeAttrsSync: ['tabindex'],
|
2681
|
-
componentName: componentName$
|
2681
|
+
componentName: componentName$N,
|
2682
2682
|
})
|
2683
2683
|
);
|
2684
2684
|
|
@@ -2715,31 +2715,31 @@ loadingIndicatorStyles = `
|
|
2715
2715
|
}
|
2716
2716
|
`;
|
2717
2717
|
|
2718
|
-
const globalRefs$
|
2718
|
+
const globalRefs$n = getThemeRefs(globals);
|
2719
2719
|
const compVars$5 = ButtonClass.cssVarList;
|
2720
2720
|
|
2721
2721
|
const mode = {
|
2722
|
-
primary: globalRefs$
|
2723
|
-
secondary: globalRefs$
|
2724
|
-
success: globalRefs$
|
2725
|
-
error: globalRefs$
|
2726
|
-
surface: globalRefs$
|
2722
|
+
primary: globalRefs$n.colors.primary,
|
2723
|
+
secondary: globalRefs$n.colors.secondary,
|
2724
|
+
success: globalRefs$n.colors.success,
|
2725
|
+
error: globalRefs$n.colors.error,
|
2726
|
+
surface: globalRefs$n.colors.surface,
|
2727
2727
|
};
|
2728
2728
|
|
2729
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2729
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
|
2730
2730
|
|
2731
2731
|
const button = {
|
2732
2732
|
...helperTheme$3,
|
2733
2733
|
|
2734
|
-
[compVars$5.fontFamily]: globalRefs$
|
2734
|
+
[compVars$5.fontFamily]: globalRefs$n.fonts.font1.family,
|
2735
2735
|
|
2736
2736
|
[compVars$5.cursor]: 'pointer',
|
2737
2737
|
[compVars$5.hostHeight]: '3em',
|
2738
2738
|
[compVars$5.hostWidth]: 'auto',
|
2739
|
-
[compVars$5.hostDirection]: globalRefs$
|
2739
|
+
[compVars$5.hostDirection]: globalRefs$n.direction,
|
2740
2740
|
|
2741
|
-
[compVars$5.borderRadius]: globalRefs$
|
2742
|
-
[compVars$5.borderWidth]: globalRefs$
|
2741
|
+
[compVars$5.borderRadius]: globalRefs$n.radius.sm,
|
2742
|
+
[compVars$5.borderWidth]: globalRefs$n.border.xs,
|
2743
2743
|
[compVars$5.borderStyle]: 'solid',
|
2744
2744
|
[compVars$5.borderColor]: 'transparent',
|
2745
2745
|
|
@@ -2782,10 +2782,10 @@ const button = {
|
|
2782
2782
|
},
|
2783
2783
|
|
2784
2784
|
_disabled: {
|
2785
|
-
[helperVars$3.main]: globalRefs$
|
2786
|
-
[helperVars$3.dark]: globalRefs$
|
2787
|
-
[helperVars$3.light]: globalRefs$
|
2788
|
-
[helperVars$3.contrast]: globalRefs$
|
2785
|
+
[helperVars$3.main]: globalRefs$n.colors.surface.light,
|
2786
|
+
[helperVars$3.dark]: globalRefs$n.colors.surface.dark,
|
2787
|
+
[helperVars$3.light]: globalRefs$n.colors.surface.light,
|
2788
|
+
[helperVars$3.contrast]: globalRefs$n.colors.surface.main,
|
2789
2789
|
},
|
2790
2790
|
|
2791
2791
|
variant: {
|
@@ -2833,7 +2833,7 @@ const button = {
|
|
2833
2833
|
},
|
2834
2834
|
};
|
2835
2835
|
|
2836
|
-
const vars$
|
2836
|
+
const vars$D = {
|
2837
2837
|
...compVars$5,
|
2838
2838
|
...helperVars$3,
|
2839
2839
|
};
|
@@ -2841,11 +2841,11 @@ const vars$C = {
|
|
2841
2841
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2842
2842
|
__proto__: null,
|
2843
2843
|
default: button,
|
2844
|
-
vars: vars$
|
2844
|
+
vars: vars$D
|
2845
2845
|
});
|
2846
2846
|
|
2847
2847
|
const {
|
2848
|
-
host: host$
|
2848
|
+
host: host$m,
|
2849
2849
|
label: label$9,
|
2850
2850
|
placeholder: placeholder$3,
|
2851
2851
|
requiredIndicator: requiredIndicator$b,
|
@@ -2870,12 +2870,12 @@ const {
|
|
2870
2870
|
|
2871
2871
|
var textFieldMappings = {
|
2872
2872
|
// we apply font-size also on the host so we can set its width with em
|
2873
|
-
fontSize: [{}, host$
|
2873
|
+
fontSize: [{}, host$m],
|
2874
2874
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
2875
2875
|
|
2876
|
-
hostWidth: { ...host$
|
2877
|
-
hostMinWidth: { ...host$
|
2878
|
-
hostDirection: { ...host$
|
2876
|
+
hostWidth: { ...host$m, property: 'width' },
|
2877
|
+
hostMinWidth: { ...host$m, property: 'min-width' },
|
2878
|
+
hostDirection: { ...host$m, property: 'direction' },
|
2879
2879
|
|
2880
2880
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2881
2881
|
|
@@ -3049,7 +3049,7 @@ const resetInputLabelPosition = (name) => `
|
|
3049
3049
|
}
|
3050
3050
|
`;
|
3051
3051
|
|
3052
|
-
const componentName$
|
3052
|
+
const componentName$M = getComponentName('text-field');
|
3053
3053
|
|
3054
3054
|
const observedAttrs = ['type'];
|
3055
3055
|
|
@@ -3099,29 +3099,29 @@ const TextFieldClass = compose(
|
|
3099
3099
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3100
3100
|
`,
|
3101
3101
|
excludeAttrsSync: ['tabindex'],
|
3102
|
-
componentName: componentName$
|
3102
|
+
componentName: componentName$M,
|
3103
3103
|
})
|
3104
3104
|
);
|
3105
3105
|
|
3106
|
-
const componentName$
|
3107
|
-
const globalRefs$
|
3106
|
+
const componentName$L = getComponentName('input-wrapper');
|
3107
|
+
const globalRefs$m = getThemeRefs(globals);
|
3108
3108
|
|
3109
|
-
const [theme$1, refs, vars$
|
3109
|
+
const [theme$1, refs, vars$C] = createHelperVars(
|
3110
3110
|
{
|
3111
|
-
labelTextColor: globalRefs$
|
3111
|
+
labelTextColor: globalRefs$m.colors.surface.dark,
|
3112
3112
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
3113
|
-
valueTextColor: globalRefs$
|
3114
|
-
placeholderTextColor: globalRefs$
|
3113
|
+
valueTextColor: globalRefs$m.colors.surface.contrast,
|
3114
|
+
placeholderTextColor: globalRefs$m.colors.surface.dark,
|
3115
3115
|
requiredIndicator: "'*'",
|
3116
|
-
helperTextColor: globalRefs$
|
3117
|
-
errorMessageTextColor: globalRefs$
|
3118
|
-
successMessageTextColor: globalRefs$
|
3116
|
+
helperTextColor: globalRefs$m.colors.surface.dark,
|
3117
|
+
errorMessageTextColor: globalRefs$m.colors.error.main,
|
3118
|
+
successMessageTextColor: globalRefs$m.colors.success.main,
|
3119
3119
|
|
3120
|
-
borderWidth: globalRefs$
|
3121
|
-
borderRadius: globalRefs$
|
3120
|
+
borderWidth: globalRefs$m.border.xs,
|
3121
|
+
borderRadius: globalRefs$m.radius.xs,
|
3122
3122
|
borderColor: 'transparent',
|
3123
3123
|
|
3124
|
-
outlineWidth: globalRefs$
|
3124
|
+
outlineWidth: globalRefs$m.border.sm,
|
3125
3125
|
outlineStyle: 'solid',
|
3126
3126
|
outlineColor: 'transparent',
|
3127
3127
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -3132,11 +3132,11 @@ const [theme$1, refs, vars$B] = createHelperVars(
|
|
3132
3132
|
horizontalPadding: '0.5em',
|
3133
3133
|
verticalPadding: '0.5em',
|
3134
3134
|
|
3135
|
-
backgroundColor: globalRefs$
|
3135
|
+
backgroundColor: globalRefs$m.colors.surface.main,
|
3136
3136
|
|
3137
|
-
fontFamily: globalRefs$
|
3137
|
+
fontFamily: globalRefs$m.fonts.font1.family,
|
3138
3138
|
|
3139
|
-
direction: globalRefs$
|
3139
|
+
direction: globalRefs$m.direction,
|
3140
3140
|
|
3141
3141
|
overlayOpacity: '0.3',
|
3142
3142
|
|
@@ -3152,77 +3152,77 @@ const [theme$1, refs, vars$B] = createHelperVars(
|
|
3152
3152
|
},
|
3153
3153
|
|
3154
3154
|
_focused: {
|
3155
|
-
outlineColor: globalRefs$
|
3155
|
+
outlineColor: globalRefs$m.colors.surface.light,
|
3156
3156
|
_invalid: {
|
3157
|
-
outlineColor: globalRefs$
|
3157
|
+
outlineColor: globalRefs$m.colors.error.main,
|
3158
3158
|
},
|
3159
3159
|
},
|
3160
3160
|
|
3161
3161
|
_bordered: {
|
3162
|
-
outlineWidth: globalRefs$
|
3163
|
-
borderColor: globalRefs$
|
3162
|
+
outlineWidth: globalRefs$m.border.xs,
|
3163
|
+
borderColor: globalRefs$m.colors.surface.light,
|
3164
3164
|
borderStyle: 'solid',
|
3165
3165
|
_invalid: {
|
3166
|
-
borderColor: globalRefs$
|
3166
|
+
borderColor: globalRefs$m.colors.error.main,
|
3167
3167
|
},
|
3168
3168
|
},
|
3169
3169
|
|
3170
3170
|
_disabled: {
|
3171
|
-
labelTextColor: globalRefs$
|
3172
|
-
borderColor: globalRefs$
|
3173
|
-
valueTextColor: globalRefs$
|
3174
|
-
placeholderTextColor: globalRefs$
|
3175
|
-
helperTextColor: globalRefs$
|
3176
|
-
backgroundColor: globalRefs$
|
3171
|
+
labelTextColor: globalRefs$m.colors.surface.light,
|
3172
|
+
borderColor: globalRefs$m.colors.surface.light,
|
3173
|
+
valueTextColor: globalRefs$m.colors.surface.light,
|
3174
|
+
placeholderTextColor: globalRefs$m.colors.surface.light,
|
3175
|
+
helperTextColor: globalRefs$m.colors.surface.light,
|
3176
|
+
backgroundColor: globalRefs$m.colors.surface.main,
|
3177
3177
|
},
|
3178
3178
|
},
|
3179
|
-
componentName$
|
3179
|
+
componentName$L
|
3180
3180
|
);
|
3181
3181
|
|
3182
3182
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
3183
3183
|
__proto__: null,
|
3184
3184
|
default: theme$1,
|
3185
3185
|
refs: refs,
|
3186
|
-
vars: vars$
|
3186
|
+
vars: vars$C
|
3187
3187
|
});
|
3188
3188
|
|
3189
|
-
const vars$
|
3190
|
-
|
3191
|
-
const textField = {
|
3192
|
-
[vars$
|
3193
|
-
[vars$
|
3194
|
-
[vars$
|
3195
|
-
[vars$
|
3196
|
-
[vars$
|
3197
|
-
[vars$
|
3198
|
-
[vars$
|
3199
|
-
[vars$
|
3200
|
-
[vars$
|
3201
|
-
[vars$
|
3202
|
-
[vars$
|
3203
|
-
[vars$
|
3204
|
-
[vars$
|
3205
|
-
[vars$
|
3206
|
-
[vars$
|
3207
|
-
[vars$
|
3208
|
-
[vars$
|
3209
|
-
[vars$
|
3210
|
-
[vars$
|
3211
|
-
[vars$
|
3212
|
-
[vars$
|
3213
|
-
[vars$
|
3189
|
+
const vars$B = TextFieldClass.cssVarList;
|
3190
|
+
|
3191
|
+
const textField$1 = {
|
3192
|
+
[vars$B.hostWidth]: refs.width,
|
3193
|
+
[vars$B.hostMinWidth]: refs.minWidth,
|
3194
|
+
[vars$B.hostDirection]: refs.direction,
|
3195
|
+
[vars$B.fontSize]: refs.fontSize,
|
3196
|
+
[vars$B.fontFamily]: refs.fontFamily,
|
3197
|
+
[vars$B.labelTextColor]: refs.labelTextColor,
|
3198
|
+
[vars$B.labelRequiredIndicator]: refs.requiredIndicator,
|
3199
|
+
[vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
|
3200
|
+
[vars$B.inputValueTextColor]: refs.valueTextColor,
|
3201
|
+
[vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
|
3202
|
+
[vars$B.inputBorderWidth]: refs.borderWidth,
|
3203
|
+
[vars$B.inputBorderStyle]: refs.borderStyle,
|
3204
|
+
[vars$B.inputBorderColor]: refs.borderColor,
|
3205
|
+
[vars$B.inputBorderRadius]: refs.borderRadius,
|
3206
|
+
[vars$B.inputOutlineWidth]: refs.outlineWidth,
|
3207
|
+
[vars$B.inputOutlineStyle]: refs.outlineStyle,
|
3208
|
+
[vars$B.inputOutlineColor]: refs.outlineColor,
|
3209
|
+
[vars$B.inputOutlineOffset]: refs.outlineOffset,
|
3210
|
+
[vars$B.inputBackgroundColor]: refs.backgroundColor,
|
3211
|
+
[vars$B.inputHeight]: refs.inputHeight,
|
3212
|
+
[vars$B.inputHorizontalPadding]: refs.horizontalPadding,
|
3213
|
+
[vars$B.helperTextColor]: refs.helperTextColor,
|
3214
3214
|
textAlign: {
|
3215
|
-
right: { [vars$
|
3216
|
-
left: { [vars$
|
3217
|
-
center: { [vars$
|
3215
|
+
right: { [vars$B.inputTextAlign]: 'right' },
|
3216
|
+
left: { [vars$B.inputTextAlign]: 'left' },
|
3217
|
+
center: { [vars$B.inputTextAlign]: 'center' },
|
3218
3218
|
},
|
3219
3219
|
};
|
3220
3220
|
|
3221
|
-
var textField$
|
3221
|
+
var textField$2 = /*#__PURE__*/Object.freeze({
|
3222
3222
|
__proto__: null,
|
3223
|
-
default: textField,
|
3224
|
-
textField: textField,
|
3225
|
-
vars: vars$
|
3223
|
+
default: textField$1,
|
3224
|
+
textField: textField$1,
|
3225
|
+
vars: vars$B
|
3226
3226
|
});
|
3227
3227
|
|
3228
3228
|
const passwordDraggableMixin = (superclass) =>
|
@@ -3259,10 +3259,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3259
3259
|
}
|
3260
3260
|
};
|
3261
3261
|
|
3262
|
-
const componentName$
|
3262
|
+
const componentName$K = getComponentName('password');
|
3263
3263
|
|
3264
3264
|
const {
|
3265
|
-
host: host$
|
3265
|
+
host: host$l,
|
3266
3266
|
inputField: inputField$5,
|
3267
3267
|
inputElement: inputElement$2,
|
3268
3268
|
inputElementPlaceholder,
|
@@ -3288,10 +3288,10 @@ const {
|
|
3288
3288
|
const PasswordClass = compose(
|
3289
3289
|
createStyleMixin({
|
3290
3290
|
mappings: {
|
3291
|
-
hostWidth: { ...host$
|
3292
|
-
hostMinWidth: { ...host$
|
3293
|
-
hostDirection: { ...host$
|
3294
|
-
fontSize: [{}, host$
|
3291
|
+
hostWidth: { ...host$l, property: 'width' },
|
3292
|
+
hostMinWidth: { ...host$l, property: 'min-width' },
|
3293
|
+
hostDirection: { ...host$l, property: 'direction' },
|
3294
|
+
fontSize: [{}, host$l],
|
3295
3295
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
3296
3296
|
inputHeight: { ...inputField$5, property: 'height' },
|
3297
3297
|
inputHorizontalPadding: [
|
@@ -3388,46 +3388,46 @@ const PasswordClass = compose(
|
|
3388
3388
|
}
|
3389
3389
|
`,
|
3390
3390
|
excludeAttrsSync: ['tabindex'],
|
3391
|
-
componentName: componentName$
|
3391
|
+
componentName: componentName$K,
|
3392
3392
|
})
|
3393
3393
|
);
|
3394
3394
|
|
3395
|
-
const globalRefs$
|
3396
|
-
const vars$
|
3395
|
+
const globalRefs$l = getThemeRefs(globals);
|
3396
|
+
const vars$A = PasswordClass.cssVarList;
|
3397
3397
|
|
3398
3398
|
const password = {
|
3399
|
-
[vars$
|
3400
|
-
[vars$
|
3401
|
-
[vars$
|
3402
|
-
[vars$
|
3403
|
-
[vars$
|
3404
|
-
[vars$
|
3405
|
-
[vars$
|
3406
|
-
[vars$
|
3407
|
-
[vars$
|
3408
|
-
[vars$
|
3409
|
-
[vars$
|
3410
|
-
[vars$
|
3411
|
-
[vars$
|
3412
|
-
[vars$
|
3413
|
-
[vars$
|
3414
|
-
[vars$
|
3415
|
-
[vars$
|
3416
|
-
[vars$
|
3417
|
-
[vars$
|
3418
|
-
[vars$
|
3419
|
-
[vars$
|
3420
|
-
[vars$
|
3421
|
-
[vars$
|
3399
|
+
[vars$A.hostWidth]: refs.width,
|
3400
|
+
[vars$A.hostDirection]: refs.direction,
|
3401
|
+
[vars$A.fontSize]: refs.fontSize,
|
3402
|
+
[vars$A.fontFamily]: refs.fontFamily,
|
3403
|
+
[vars$A.labelTextColor]: refs.labelTextColor,
|
3404
|
+
[vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
|
3405
|
+
[vars$A.inputHorizontalPadding]: refs.horizontalPadding,
|
3406
|
+
[vars$A.inputHeight]: refs.inputHeight,
|
3407
|
+
[vars$A.inputBackgroundColor]: refs.backgroundColor,
|
3408
|
+
[vars$A.labelRequiredIndicator]: refs.requiredIndicator,
|
3409
|
+
[vars$A.inputValueTextColor]: refs.valueTextColor,
|
3410
|
+
[vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3411
|
+
[vars$A.inputBorderWidth]: refs.borderWidth,
|
3412
|
+
[vars$A.inputBorderStyle]: refs.borderStyle,
|
3413
|
+
[vars$A.inputBorderColor]: refs.borderColor,
|
3414
|
+
[vars$A.inputBorderRadius]: refs.borderRadius,
|
3415
|
+
[vars$A.inputOutlineWidth]: refs.outlineWidth,
|
3416
|
+
[vars$A.inputOutlineStyle]: refs.outlineStyle,
|
3417
|
+
[vars$A.inputOutlineColor]: refs.outlineColor,
|
3418
|
+
[vars$A.inputOutlineOffset]: refs.outlineOffset,
|
3419
|
+
[vars$A.revealButtonOffset]: globalRefs$l.spacing.md,
|
3420
|
+
[vars$A.revealButtonSize]: refs.toggleButtonSize,
|
3421
|
+
[vars$A.revealButtonColor]: refs.placeholderTextColor,
|
3422
3422
|
};
|
3423
3423
|
|
3424
3424
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3425
3425
|
__proto__: null,
|
3426
3426
|
default: password,
|
3427
|
-
vars: vars$
|
3427
|
+
vars: vars$A
|
3428
3428
|
});
|
3429
3429
|
|
3430
|
-
const componentName$
|
3430
|
+
const componentName$J = getComponentName('number-field');
|
3431
3431
|
|
3432
3432
|
const NumberFieldClass = compose(
|
3433
3433
|
createStyleMixin({
|
@@ -3453,43 +3453,43 @@ const NumberFieldClass = compose(
|
|
3453
3453
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3454
3454
|
`,
|
3455
3455
|
excludeAttrsSync: ['tabindex'],
|
3456
|
-
componentName: componentName$
|
3456
|
+
componentName: componentName$J,
|
3457
3457
|
})
|
3458
3458
|
);
|
3459
3459
|
|
3460
|
-
const vars$
|
3460
|
+
const vars$z = NumberFieldClass.cssVarList;
|
3461
3461
|
|
3462
3462
|
const numberField = {
|
3463
|
-
[vars$
|
3464
|
-
[vars$
|
3465
|
-
[vars$
|
3466
|
-
[vars$
|
3467
|
-
[vars$
|
3468
|
-
[vars$
|
3469
|
-
[vars$
|
3470
|
-
[vars$
|
3471
|
-
[vars$
|
3472
|
-
[vars$
|
3473
|
-
[vars$
|
3474
|
-
[vars$
|
3475
|
-
[vars$
|
3476
|
-
[vars$
|
3477
|
-
[vars$
|
3478
|
-
[vars$
|
3479
|
-
[vars$
|
3480
|
-
[vars$
|
3481
|
-
[vars$
|
3482
|
-
[vars$
|
3483
|
-
[vars$
|
3463
|
+
[vars$z.hostWidth]: refs.width,
|
3464
|
+
[vars$z.hostMinWidth]: refs.minWidth,
|
3465
|
+
[vars$z.hostDirection]: refs.direction,
|
3466
|
+
[vars$z.fontSize]: refs.fontSize,
|
3467
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
3468
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
3469
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
3470
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
3471
|
+
[vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
|
3472
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
3473
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
3474
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
3475
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
3476
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
3477
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
3478
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
3479
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
3480
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
3481
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
3482
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
3483
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
3484
3484
|
};
|
3485
3485
|
|
3486
3486
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3487
3487
|
__proto__: null,
|
3488
3488
|
default: numberField,
|
3489
|
-
vars: vars$
|
3489
|
+
vars: vars$z
|
3490
3490
|
});
|
3491
3491
|
|
3492
|
-
const componentName$
|
3492
|
+
const componentName$I = getComponentName('email-field');
|
3493
3493
|
|
3494
3494
|
const customMixin$7 = (superclass) =>
|
3495
3495
|
class EmailFieldMixinClass extends superclass {
|
@@ -3524,46 +3524,46 @@ const EmailFieldClass = compose(
|
|
3524
3524
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3525
3525
|
`,
|
3526
3526
|
excludeAttrsSync: ['tabindex'],
|
3527
|
-
componentName: componentName$
|
3527
|
+
componentName: componentName$I,
|
3528
3528
|
})
|
3529
3529
|
);
|
3530
3530
|
|
3531
|
-
const vars$
|
3531
|
+
const vars$y = EmailFieldClass.cssVarList;
|
3532
3532
|
|
3533
3533
|
const emailField = {
|
3534
|
-
[vars$
|
3535
|
-
[vars$
|
3536
|
-
[vars$
|
3537
|
-
[vars$
|
3538
|
-
[vars$
|
3539
|
-
[vars$
|
3540
|
-
[vars$
|
3541
|
-
[vars$
|
3542
|
-
[vars$
|
3543
|
-
[vars$
|
3544
|
-
[vars$
|
3545
|
-
[vars$
|
3546
|
-
[vars$
|
3547
|
-
[vars$
|
3548
|
-
[vars$
|
3549
|
-
[vars$
|
3550
|
-
[vars$
|
3551
|
-
[vars$
|
3552
|
-
[vars$
|
3553
|
-
[vars$
|
3554
|
-
[vars$
|
3534
|
+
[vars$y.hostWidth]: refs.width,
|
3535
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
3536
|
+
[vars$y.hostDirection]: refs.direction,
|
3537
|
+
[vars$y.fontSize]: refs.fontSize,
|
3538
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
3539
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
3540
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
3541
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
3542
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
3543
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
3544
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
3545
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
3546
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
3547
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
3548
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
3549
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
3550
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
3551
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
3552
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
3553
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
3554
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
3555
3555
|
};
|
3556
3556
|
|
3557
3557
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3558
3558
|
__proto__: null,
|
3559
3559
|
default: emailField,
|
3560
|
-
vars: vars$
|
3560
|
+
vars: vars$y
|
3561
3561
|
});
|
3562
3562
|
|
3563
|
-
const componentName$
|
3563
|
+
const componentName$H = getComponentName('text-area');
|
3564
3564
|
|
3565
3565
|
const {
|
3566
|
-
host: host$
|
3566
|
+
host: host$k,
|
3567
3567
|
label: label$7,
|
3568
3568
|
placeholder: placeholder$2,
|
3569
3569
|
inputField: inputField$4,
|
@@ -3585,10 +3585,10 @@ const {
|
|
3585
3585
|
const TextAreaClass = compose(
|
3586
3586
|
createStyleMixin({
|
3587
3587
|
mappings: {
|
3588
|
-
hostWidth: { ...host$
|
3589
|
-
hostMinWidth: { ...host$
|
3590
|
-
hostDirection: { ...host$
|
3591
|
-
fontSize: [host$
|
3588
|
+
hostWidth: { ...host$k, property: 'width' },
|
3589
|
+
hostMinWidth: { ...host$k, property: 'min-width' },
|
3590
|
+
hostDirection: { ...host$k, property: 'direction' },
|
3591
|
+
fontSize: [host$k, textArea$2],
|
3592
3592
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
3593
3593
|
labelTextColor: [
|
3594
3594
|
{ ...label$7, property: 'color' },
|
@@ -3636,49 +3636,49 @@ const TextAreaClass = compose(
|
|
3636
3636
|
${resetInputCursor('vaadin-text-area')}
|
3637
3637
|
`,
|
3638
3638
|
excludeAttrsSync: ['tabindex'],
|
3639
|
-
componentName: componentName$
|
3639
|
+
componentName: componentName$H,
|
3640
3640
|
})
|
3641
3641
|
);
|
3642
3642
|
|
3643
|
-
const vars$
|
3643
|
+
const vars$x = TextAreaClass.cssVarList;
|
3644
3644
|
|
3645
3645
|
const textArea = {
|
3646
|
-
[vars$
|
3647
|
-
[vars$
|
3648
|
-
[vars$
|
3649
|
-
[vars$
|
3650
|
-
[vars$
|
3651
|
-
[vars$
|
3652
|
-
[vars$
|
3653
|
-
[vars$
|
3654
|
-
[vars$
|
3655
|
-
[vars$
|
3656
|
-
[vars$
|
3657
|
-
[vars$
|
3658
|
-
[vars$
|
3659
|
-
[vars$
|
3660
|
-
[vars$
|
3661
|
-
[vars$
|
3662
|
-
[vars$
|
3663
|
-
[vars$
|
3664
|
-
[vars$
|
3665
|
-
[vars$
|
3666
|
-
[vars$
|
3646
|
+
[vars$x.hostWidth]: refs.width,
|
3647
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
3648
|
+
[vars$x.hostDirection]: refs.direction,
|
3649
|
+
[vars$x.fontSize]: refs.fontSize,
|
3650
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
3651
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
3652
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
3653
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
3654
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
3655
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
3656
|
+
[vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3657
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
3658
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
3659
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
3660
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
3661
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
3662
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
3663
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
3664
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
3665
|
+
[vars$x.inputResizeType]: 'vertical',
|
3666
|
+
[vars$x.inputMinHeight]: '5em',
|
3667
3667
|
textAlign: {
|
3668
|
-
right: { [vars$
|
3669
|
-
left: { [vars$
|
3670
|
-
center: { [vars$
|
3668
|
+
right: { [vars$x.inputTextAlign]: 'right' },
|
3669
|
+
left: { [vars$x.inputTextAlign]: 'left' },
|
3670
|
+
center: { [vars$x.inputTextAlign]: 'center' },
|
3671
3671
|
},
|
3672
3672
|
|
3673
3673
|
_readonly: {
|
3674
|
-
[vars$
|
3674
|
+
[vars$x.inputResizeType]: 'none',
|
3675
3675
|
},
|
3676
3676
|
};
|
3677
3677
|
|
3678
3678
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3679
3679
|
__proto__: null,
|
3680
3680
|
default: textArea,
|
3681
|
-
vars: vars$
|
3681
|
+
vars: vars$x
|
3682
3682
|
});
|
3683
3683
|
|
3684
3684
|
const createBaseInputClass = (...args) =>
|
@@ -3689,9 +3689,9 @@ const createBaseInputClass = (...args) =>
|
|
3689
3689
|
inputEventsDispatchingMixin
|
3690
3690
|
)(createBaseClass(...args));
|
3691
3691
|
|
3692
|
-
const componentName$
|
3692
|
+
const componentName$G = getComponentName('boolean-field-internal');
|
3693
3693
|
|
3694
|
-
createBaseInputClass({ componentName: componentName$
|
3694
|
+
createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
|
3695
3695
|
|
3696
3696
|
const booleanFieldMixin = (superclass) =>
|
3697
3697
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3700,14 +3700,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3700
3700
|
|
3701
3701
|
const template = document.createElement('template');
|
3702
3702
|
template.innerHTML = `
|
3703
|
-
<${componentName$
|
3703
|
+
<${componentName$G}
|
3704
3704
|
tabindex="-1"
|
3705
3705
|
slot="input"
|
3706
|
-
></${componentName$
|
3706
|
+
></${componentName$G}>
|
3707
3707
|
`;
|
3708
3708
|
|
3709
3709
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3710
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3710
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$G);
|
3711
3711
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3712
3712
|
|
3713
3713
|
forwardAttrs(this, this.inputElement, {
|
@@ -3777,10 +3777,10 @@ descope-boolean-field-internal {
|
|
3777
3777
|
}
|
3778
3778
|
`;
|
3779
3779
|
|
3780
|
-
const componentName$
|
3780
|
+
const componentName$F = getComponentName('checkbox');
|
3781
3781
|
|
3782
3782
|
const {
|
3783
|
-
host: host$
|
3783
|
+
host: host$j,
|
3784
3784
|
component: component$1,
|
3785
3785
|
checkboxElement,
|
3786
3786
|
checkboxSurface,
|
@@ -3802,10 +3802,10 @@ const {
|
|
3802
3802
|
const CheckboxClass = compose(
|
3803
3803
|
createStyleMixin({
|
3804
3804
|
mappings: {
|
3805
|
-
hostWidth: { ...host$
|
3806
|
-
hostDirection: { ...host$
|
3805
|
+
hostWidth: { ...host$j, property: 'width' },
|
3806
|
+
hostDirection: { ...host$j, property: 'direction' },
|
3807
3807
|
|
3808
|
-
fontSize: [host$
|
3808
|
+
fontSize: [host$j, checkboxElement, checkboxLabel$1],
|
3809
3809
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
3810
3810
|
|
3811
3811
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -3883,54 +3883,54 @@ const CheckboxClass = compose(
|
|
3883
3883
|
}
|
3884
3884
|
`,
|
3885
3885
|
excludeAttrsSync: ['label', 'tabindex'],
|
3886
|
-
componentName: componentName$
|
3886
|
+
componentName: componentName$F,
|
3887
3887
|
})
|
3888
3888
|
);
|
3889
3889
|
|
3890
|
-
const vars$
|
3890
|
+
const vars$w = CheckboxClass.cssVarList;
|
3891
3891
|
const checkboxSize = '1.35em';
|
3892
3892
|
|
3893
3893
|
const checkbox = {
|
3894
|
-
[vars$
|
3895
|
-
[vars$
|
3896
|
-
[vars$
|
3897
|
-
[vars$
|
3898
|
-
[vars$
|
3899
|
-
[vars$
|
3900
|
-
[vars$
|
3901
|
-
[vars$
|
3902
|
-
[vars$
|
3903
|
-
[vars$
|
3904
|
-
[vars$
|
3905
|
-
[vars$
|
3906
|
-
[vars$
|
3907
|
-
[vars$
|
3908
|
-
[vars$
|
3909
|
-
[vars$
|
3910
|
-
[vars$
|
3911
|
-
[vars$
|
3912
|
-
[vars$
|
3913
|
-
[vars$
|
3894
|
+
[vars$w.hostWidth]: refs.width,
|
3895
|
+
[vars$w.hostDirection]: refs.direction,
|
3896
|
+
[vars$w.fontSize]: refs.fontSize,
|
3897
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
3898
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
3899
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
3900
|
+
[vars$w.labelFontWeight]: '400',
|
3901
|
+
[vars$w.labelLineHeight]: checkboxSize,
|
3902
|
+
[vars$w.labelSpacing]: '1em',
|
3903
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
3904
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
3905
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
3906
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
3907
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
3908
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
3909
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
3910
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
3911
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
3912
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
3913
|
+
[vars$w.inputSize]: checkboxSize,
|
3914
3914
|
|
3915
3915
|
_checked: {
|
3916
|
-
[vars$
|
3916
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
3917
3917
|
},
|
3918
3918
|
|
3919
3919
|
_disabled: {
|
3920
|
-
[vars$
|
3920
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
3921
3921
|
},
|
3922
3922
|
};
|
3923
3923
|
|
3924
3924
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3925
3925
|
__proto__: null,
|
3926
3926
|
default: checkbox,
|
3927
|
-
vars: vars$
|
3927
|
+
vars: vars$w
|
3928
3928
|
});
|
3929
3929
|
|
3930
|
-
const componentName$
|
3930
|
+
const componentName$E = getComponentName('switch-toggle');
|
3931
3931
|
|
3932
3932
|
const {
|
3933
|
-
host: host$
|
3933
|
+
host: host$i,
|
3934
3934
|
component,
|
3935
3935
|
checkboxElement: track,
|
3936
3936
|
checkboxSurface: knob,
|
@@ -3952,8 +3952,8 @@ const {
|
|
3952
3952
|
const SwitchToggleClass = compose(
|
3953
3953
|
createStyleMixin({
|
3954
3954
|
mappings: {
|
3955
|
-
hostWidth: { ...host$
|
3956
|
-
hostDirection: { ...host$
|
3955
|
+
hostWidth: { ...host$i, property: 'width' },
|
3956
|
+
hostDirection: { ...host$i, property: 'direction' },
|
3957
3957
|
|
3958
3958
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
3959
3959
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
@@ -4059,82 +4059,82 @@ const SwitchToggleClass = compose(
|
|
4059
4059
|
}
|
4060
4060
|
`,
|
4061
4061
|
excludeAttrsSync: ['label', 'tabindex'],
|
4062
|
-
componentName: componentName$
|
4062
|
+
componentName: componentName$E,
|
4063
4063
|
})
|
4064
4064
|
);
|
4065
4065
|
|
4066
4066
|
const knobMargin = '2px';
|
4067
4067
|
const checkboxHeight = '1.25em';
|
4068
4068
|
|
4069
|
-
const globalRefs$
|
4070
|
-
const vars$
|
4069
|
+
const globalRefs$k = getThemeRefs(globals);
|
4070
|
+
const vars$v = SwitchToggleClass.cssVarList;
|
4071
4071
|
|
4072
4072
|
const switchToggle = {
|
4073
|
-
[vars$
|
4074
|
-
[vars$
|
4075
|
-
[vars$
|
4076
|
-
[vars$
|
4077
|
-
|
4078
|
-
[vars$
|
4079
|
-
[vars$
|
4080
|
-
[vars$
|
4081
|
-
[vars$
|
4082
|
-
|
4083
|
-
[vars$
|
4084
|
-
[vars$
|
4085
|
-
[vars$
|
4086
|
-
[vars$
|
4087
|
-
[vars$
|
4088
|
-
[vars$
|
4089
|
-
[vars$
|
4090
|
-
|
4091
|
-
[vars$
|
4092
|
-
[vars$
|
4093
|
-
[vars$
|
4094
|
-
[vars$
|
4095
|
-
[vars$
|
4096
|
-
[vars$
|
4097
|
-
|
4098
|
-
[vars$
|
4099
|
-
[vars$
|
4100
|
-
[vars$
|
4101
|
-
[vars$
|
4102
|
-
[vars$
|
4103
|
-
[vars$
|
4073
|
+
[vars$v.hostWidth]: refs.width,
|
4074
|
+
[vars$v.hostDirection]: refs.direction,
|
4075
|
+
[vars$v.fontSize]: refs.fontSize,
|
4076
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
4077
|
+
|
4078
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
4079
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
4080
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
4081
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
4082
|
+
|
4083
|
+
[vars$v.trackBorderStyle]: refs.borderStyle,
|
4084
|
+
[vars$v.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
4085
|
+
[vars$v.trackBorderColor]: refs.borderColor,
|
4086
|
+
[vars$v.trackBackgroundColor]: refs.backgroundColor,
|
4087
|
+
[vars$v.trackBorderRadius]: globalRefs$k.radius.md,
|
4088
|
+
[vars$v.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
4089
|
+
[vars$v.trackHeight]: checkboxHeight,
|
4090
|
+
|
4091
|
+
[vars$v.knobSize]: `calc(1em - ${knobMargin})`,
|
4092
|
+
[vars$v.knobRadius]: '50%',
|
4093
|
+
[vars$v.knobTopOffset]: '1px',
|
4094
|
+
[vars$v.knobLeftOffset]: knobMargin,
|
4095
|
+
[vars$v.knobColor]: refs.labelTextColor,
|
4096
|
+
[vars$v.knobTransitionDuration]: '0.3s',
|
4097
|
+
|
4098
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
4099
|
+
[vars$v.labelFontWeight]: '400',
|
4100
|
+
[vars$v.labelLineHeight]: '1.35em',
|
4101
|
+
[vars$v.labelSpacing]: '1em',
|
4102
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
4103
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
4104
4104
|
|
4105
4105
|
_checked: {
|
4106
|
-
[vars$
|
4107
|
-
[vars$
|
4108
|
-
[vars$
|
4109
|
-
[vars$
|
4106
|
+
[vars$v.trackBorderColor]: refs.borderColor,
|
4107
|
+
[vars$v.knobLeftOffset]: `calc(100% - var(${vars$v.knobSize}) - ${knobMargin})`,
|
4108
|
+
[vars$v.knobColor]: refs.valueTextColor,
|
4109
|
+
[vars$v.knobTextColor]: refs.valueTextColor,
|
4110
4110
|
},
|
4111
4111
|
|
4112
4112
|
_disabled: {
|
4113
|
-
[vars$
|
4114
|
-
[vars$
|
4115
|
-
[vars$
|
4116
|
-
[vars$
|
4113
|
+
[vars$v.knobColor]: globalRefs$k.colors.surface.light,
|
4114
|
+
[vars$v.trackBorderColor]: globalRefs$k.colors.surface.light,
|
4115
|
+
[vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
|
4116
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
4117
4117
|
_checked: {
|
4118
|
-
[vars$
|
4119
|
-
[vars$
|
4118
|
+
[vars$v.knobColor]: globalRefs$k.colors.surface.light,
|
4119
|
+
[vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
|
4120
4120
|
},
|
4121
4121
|
},
|
4122
4122
|
|
4123
4123
|
_invalid: {
|
4124
|
-
[vars$
|
4125
|
-
[vars$
|
4124
|
+
[vars$v.trackBorderColor]: globalRefs$k.colors.error.main,
|
4125
|
+
[vars$v.knobColor]: globalRefs$k.colors.error.main,
|
4126
4126
|
},
|
4127
4127
|
};
|
4128
4128
|
|
4129
4129
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
4130
4130
|
__proto__: null,
|
4131
4131
|
default: switchToggle,
|
4132
|
-
vars: vars$
|
4132
|
+
vars: vars$v
|
4133
4133
|
});
|
4134
4134
|
|
4135
|
-
const componentName$
|
4135
|
+
const componentName$D = getComponentName('container');
|
4136
4136
|
|
4137
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
4137
|
+
class RawContainer extends createBaseClass({ componentName: componentName$D, baseSelector: 'slot' }) {
|
4138
4138
|
constructor() {
|
4139
4139
|
super();
|
4140
4140
|
|
@@ -4187,7 +4187,7 @@ const ContainerClass = compose(
|
|
4187
4187
|
componentNameValidationMixin
|
4188
4188
|
)(RawContainer);
|
4189
4189
|
|
4190
|
-
const globalRefs$
|
4190
|
+
const globalRefs$j = getThemeRefs(globals);
|
4191
4191
|
|
4192
4192
|
const compVars$4 = ContainerClass.cssVarList;
|
4193
4193
|
|
@@ -4209,7 +4209,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
4209
4209
|
horizontalAlignment,
|
4210
4210
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
4211
4211
|
},
|
4212
|
-
componentName$
|
4212
|
+
componentName$D
|
4213
4213
|
);
|
4214
4214
|
|
4215
4215
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -4219,10 +4219,10 @@ const container = {
|
|
4219
4219
|
|
4220
4220
|
[compVars$4.hostWidth]: '100%',
|
4221
4221
|
[compVars$4.boxShadow]: 'none',
|
4222
|
-
[compVars$4.backgroundColor]: globalRefs$
|
4223
|
-
[compVars$4.color]: globalRefs$
|
4222
|
+
[compVars$4.backgroundColor]: globalRefs$j.colors.surface.main,
|
4223
|
+
[compVars$4.color]: globalRefs$j.colors.surface.contrast,
|
4224
4224
|
[compVars$4.borderRadius]: '0px',
|
4225
|
-
[compVars$4.hostDirection]: globalRefs$
|
4225
|
+
[compVars$4.hostDirection]: globalRefs$j.direction,
|
4226
4226
|
|
4227
4227
|
verticalPadding: {
|
4228
4228
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
@@ -4268,34 +4268,34 @@ const container = {
|
|
4268
4268
|
|
4269
4269
|
shadow: {
|
4270
4270
|
sm: {
|
4271
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
4271
|
+
[compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.sm} ${shadowColor$1}`,
|
4272
4272
|
},
|
4273
4273
|
md: {
|
4274
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
4274
|
+
[compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.md} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.md} ${shadowColor$1}`,
|
4275
4275
|
},
|
4276
4276
|
lg: {
|
4277
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
4277
|
+
[compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.lg} ${shadowColor$1}`,
|
4278
4278
|
},
|
4279
4279
|
xl: {
|
4280
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
4280
|
+
[compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.xl} ${shadowColor$1}`,
|
4281
4281
|
},
|
4282
4282
|
'2xl': {
|
4283
4283
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
4284
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
4284
|
+
[compVars$4.boxShadow]: `${globalRefs$j.shadow.wide['2xl']} ${shadowColor$1}`,
|
4285
4285
|
},
|
4286
4286
|
},
|
4287
4287
|
|
4288
4288
|
borderRadius: {
|
4289
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
4290
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
4291
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
4292
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
4293
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
4294
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
4289
|
+
sm: { [compVars$4.borderRadius]: globalRefs$j.radius.sm },
|
4290
|
+
md: { [compVars$4.borderRadius]: globalRefs$j.radius.md },
|
4291
|
+
lg: { [compVars$4.borderRadius]: globalRefs$j.radius.lg },
|
4292
|
+
xl: { [compVars$4.borderRadius]: globalRefs$j.radius.xl },
|
4293
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$j.radius['2xl'] },
|
4294
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$j.radius['3xl'] },
|
4295
4295
|
},
|
4296
4296
|
};
|
4297
4297
|
|
4298
|
-
const vars$
|
4298
|
+
const vars$u = {
|
4299
4299
|
...compVars$4,
|
4300
4300
|
...helperVars$2,
|
4301
4301
|
};
|
@@ -4303,7 +4303,7 @@ const vars$t = {
|
|
4303
4303
|
var container$1 = /*#__PURE__*/Object.freeze({
|
4304
4304
|
__proto__: null,
|
4305
4305
|
default: container,
|
4306
|
-
vars: vars$
|
4306
|
+
vars: vars$u
|
4307
4307
|
});
|
4308
4308
|
|
4309
4309
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4356,71 +4356,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4356
4356
|
return CssVarImageClass;
|
4357
4357
|
};
|
4358
4358
|
|
4359
|
-
const componentName$
|
4359
|
+
const componentName$C = getComponentName('logo');
|
4360
4360
|
|
4361
4361
|
const LogoClass = createCssVarImageClass({
|
4362
|
-
componentName: componentName$
|
4362
|
+
componentName: componentName$C,
|
4363
4363
|
varName: 'url',
|
4364
4364
|
fallbackVarName: 'fallbackUrl',
|
4365
4365
|
});
|
4366
4366
|
|
4367
|
-
const vars$
|
4367
|
+
const vars$t = LogoClass.cssVarList;
|
4368
4368
|
|
4369
4369
|
const logo$2 = {
|
4370
|
-
[vars$
|
4370
|
+
[vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4371
4371
|
};
|
4372
4372
|
|
4373
4373
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
4374
4374
|
__proto__: null,
|
4375
4375
|
default: logo$2,
|
4376
|
-
vars: vars$
|
4376
|
+
vars: vars$t
|
4377
4377
|
});
|
4378
4378
|
|
4379
|
-
const componentName$
|
4379
|
+
const componentName$B = getComponentName('totp-image');
|
4380
4380
|
|
4381
4381
|
const TotpImageClass = createCssVarImageClass({
|
4382
|
-
componentName: componentName$
|
4382
|
+
componentName: componentName$B,
|
4383
4383
|
varName: 'url',
|
4384
4384
|
fallbackVarName: 'fallbackUrl',
|
4385
4385
|
});
|
4386
4386
|
|
4387
|
-
const vars$
|
4387
|
+
const vars$s = TotpImageClass.cssVarList;
|
4388
4388
|
|
4389
4389
|
const logo$1 = {
|
4390
|
-
[vars$
|
4390
|
+
[vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4391
4391
|
};
|
4392
4392
|
|
4393
4393
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4394
4394
|
__proto__: null,
|
4395
4395
|
default: logo$1,
|
4396
|
-
vars: vars$
|
4396
|
+
vars: vars$s
|
4397
4397
|
});
|
4398
4398
|
|
4399
|
-
const componentName$
|
4399
|
+
const componentName$A = getComponentName('notp-image');
|
4400
4400
|
|
4401
4401
|
const NotpImageClass = createCssVarImageClass({
|
4402
|
-
componentName: componentName$
|
4402
|
+
componentName: componentName$A,
|
4403
4403
|
varName: 'url',
|
4404
4404
|
fallbackVarName: 'fallbackUrl',
|
4405
4405
|
});
|
4406
4406
|
|
4407
|
-
const vars$
|
4407
|
+
const vars$r = NotpImageClass.cssVarList;
|
4408
4408
|
|
4409
4409
|
const logo = {
|
4410
|
-
[vars$
|
4410
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
4411
4411
|
};
|
4412
4412
|
|
4413
4413
|
var notpImage = /*#__PURE__*/Object.freeze({
|
4414
4414
|
__proto__: null,
|
4415
4415
|
default: logo,
|
4416
|
-
vars: vars$
|
4416
|
+
vars: vars$r
|
4417
4417
|
});
|
4418
4418
|
|
4419
4419
|
// eslint-disable-next-line max-classes-per-file
|
4420
4420
|
|
4421
|
-
const componentName$
|
4421
|
+
const componentName$z = getComponentName('text');
|
4422
4422
|
|
4423
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4423
|
+
class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
|
4424
4424
|
constructor() {
|
4425
4425
|
super();
|
4426
4426
|
|
@@ -4480,99 +4480,99 @@ const TextClass = compose(
|
|
4480
4480
|
customTextMixin
|
4481
4481
|
)(RawText);
|
4482
4482
|
|
4483
|
-
const globalRefs$
|
4484
|
-
const vars$
|
4483
|
+
const globalRefs$i = getThemeRefs(globals);
|
4484
|
+
const vars$q = TextClass.cssVarList;
|
4485
4485
|
|
4486
4486
|
const text$2 = {
|
4487
|
-
[vars$
|
4488
|
-
[vars$
|
4489
|
-
[vars$
|
4490
|
-
[vars$
|
4487
|
+
[vars$q.hostDirection]: globalRefs$i.direction,
|
4488
|
+
[vars$q.textLineHeight]: '1.35em',
|
4489
|
+
[vars$q.textAlign]: 'left',
|
4490
|
+
[vars$q.textColor]: globalRefs$i.colors.surface.dark,
|
4491
4491
|
variant: {
|
4492
4492
|
h1: {
|
4493
|
-
[vars$
|
4494
|
-
[vars$
|
4495
|
-
[vars$
|
4493
|
+
[vars$q.fontSize]: globalRefs$i.typography.h1.size,
|
4494
|
+
[vars$q.fontWeight]: globalRefs$i.typography.h1.weight,
|
4495
|
+
[vars$q.fontFamily]: globalRefs$i.typography.h1.font,
|
4496
4496
|
},
|
4497
4497
|
h2: {
|
4498
|
-
[vars$
|
4499
|
-
[vars$
|
4500
|
-
[vars$
|
4498
|
+
[vars$q.fontSize]: globalRefs$i.typography.h2.size,
|
4499
|
+
[vars$q.fontWeight]: globalRefs$i.typography.h2.weight,
|
4500
|
+
[vars$q.fontFamily]: globalRefs$i.typography.h2.font,
|
4501
4501
|
},
|
4502
4502
|
h3: {
|
4503
|
-
[vars$
|
4504
|
-
[vars$
|
4505
|
-
[vars$
|
4503
|
+
[vars$q.fontSize]: globalRefs$i.typography.h3.size,
|
4504
|
+
[vars$q.fontWeight]: globalRefs$i.typography.h3.weight,
|
4505
|
+
[vars$q.fontFamily]: globalRefs$i.typography.h3.font,
|
4506
4506
|
},
|
4507
4507
|
subtitle1: {
|
4508
|
-
[vars$
|
4509
|
-
[vars$
|
4510
|
-
[vars$
|
4508
|
+
[vars$q.fontSize]: globalRefs$i.typography.subtitle1.size,
|
4509
|
+
[vars$q.fontWeight]: globalRefs$i.typography.subtitle1.weight,
|
4510
|
+
[vars$q.fontFamily]: globalRefs$i.typography.subtitle1.font,
|
4511
4511
|
},
|
4512
4512
|
subtitle2: {
|
4513
|
-
[vars$
|
4514
|
-
[vars$
|
4515
|
-
[vars$
|
4513
|
+
[vars$q.fontSize]: globalRefs$i.typography.subtitle2.size,
|
4514
|
+
[vars$q.fontWeight]: globalRefs$i.typography.subtitle2.weight,
|
4515
|
+
[vars$q.fontFamily]: globalRefs$i.typography.subtitle2.font,
|
4516
4516
|
},
|
4517
4517
|
body1: {
|
4518
|
-
[vars$
|
4519
|
-
[vars$
|
4520
|
-
[vars$
|
4518
|
+
[vars$q.fontSize]: globalRefs$i.typography.body1.size,
|
4519
|
+
[vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
|
4520
|
+
[vars$q.fontFamily]: globalRefs$i.typography.body1.font,
|
4521
4521
|
},
|
4522
4522
|
body2: {
|
4523
|
-
[vars$
|
4524
|
-
[vars$
|
4525
|
-
[vars$
|
4523
|
+
[vars$q.fontSize]: globalRefs$i.typography.body2.size,
|
4524
|
+
[vars$q.fontWeight]: globalRefs$i.typography.body2.weight,
|
4525
|
+
[vars$q.fontFamily]: globalRefs$i.typography.body2.font,
|
4526
4526
|
},
|
4527
4527
|
},
|
4528
4528
|
|
4529
4529
|
mode: {
|
4530
4530
|
primary: {
|
4531
|
-
[vars$
|
4531
|
+
[vars$q.textColor]: globalRefs$i.colors.surface.contrast,
|
4532
4532
|
},
|
4533
4533
|
secondary: {
|
4534
|
-
[vars$
|
4534
|
+
[vars$q.textColor]: globalRefs$i.colors.surface.dark,
|
4535
4535
|
},
|
4536
4536
|
error: {
|
4537
|
-
[vars$
|
4537
|
+
[vars$q.textColor]: globalRefs$i.colors.error.main,
|
4538
4538
|
},
|
4539
4539
|
success: {
|
4540
|
-
[vars$
|
4540
|
+
[vars$q.textColor]: globalRefs$i.colors.success.main,
|
4541
4541
|
},
|
4542
4542
|
},
|
4543
4543
|
|
4544
4544
|
textAlign: {
|
4545
|
-
right: { [vars$
|
4546
|
-
left: { [vars$
|
4547
|
-
center: { [vars$
|
4545
|
+
right: { [vars$q.textAlign]: 'right' },
|
4546
|
+
left: { [vars$q.textAlign]: 'left' },
|
4547
|
+
center: { [vars$q.textAlign]: 'center' },
|
4548
4548
|
},
|
4549
4549
|
|
4550
4550
|
_fullWidth: {
|
4551
|
-
[vars$
|
4551
|
+
[vars$q.hostWidth]: '100%',
|
4552
4552
|
},
|
4553
4553
|
|
4554
4554
|
_italic: {
|
4555
|
-
[vars$
|
4555
|
+
[vars$q.fontStyle]: 'italic',
|
4556
4556
|
},
|
4557
4557
|
|
4558
4558
|
_uppercase: {
|
4559
|
-
[vars$
|
4559
|
+
[vars$q.textTransform]: 'uppercase',
|
4560
4560
|
},
|
4561
4561
|
|
4562
4562
|
_lowercase: {
|
4563
|
-
[vars$
|
4563
|
+
[vars$q.textTransform]: 'lowercase',
|
4564
4564
|
},
|
4565
4565
|
};
|
4566
4566
|
|
4567
4567
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4568
4568
|
__proto__: null,
|
4569
4569
|
default: text$2,
|
4570
|
-
vars: vars$
|
4570
|
+
vars: vars$q
|
4571
4571
|
});
|
4572
4572
|
|
4573
|
-
const componentName$
|
4573
|
+
const componentName$y = getComponentName('link');
|
4574
4574
|
|
4575
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4575
|
+
class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
|
4576
4576
|
constructor() {
|
4577
4577
|
super();
|
4578
4578
|
|
@@ -4618,12 +4618,12 @@ const selectors$2 = {
|
|
4618
4618
|
text: { selector: () => TextClass.componentName },
|
4619
4619
|
};
|
4620
4620
|
|
4621
|
-
const { anchor, text: text$1, host: host$
|
4621
|
+
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
|
4622
4622
|
|
4623
4623
|
const LinkClass = compose(
|
4624
4624
|
createStyleMixin({
|
4625
4625
|
mappings: {
|
4626
|
-
hostWidth: { ...host$
|
4626
|
+
hostWidth: { ...host$h, property: 'width' },
|
4627
4627
|
hostDirection: { ...text$1, property: 'direction' },
|
4628
4628
|
textAlign: wrapper$1,
|
4629
4629
|
textColor: [
|
@@ -4637,37 +4637,37 @@ const LinkClass = compose(
|
|
4637
4637
|
componentNameValidationMixin
|
4638
4638
|
)(RawLink);
|
4639
4639
|
|
4640
|
-
const globalRefs$
|
4641
|
-
const vars$
|
4640
|
+
const globalRefs$h = getThemeRefs(globals);
|
4641
|
+
const vars$p = LinkClass.cssVarList;
|
4642
4642
|
|
4643
4643
|
const link = {
|
4644
|
-
[vars$
|
4645
|
-
[vars$
|
4644
|
+
[vars$p.hostDirection]: globalRefs$h.direction,
|
4645
|
+
[vars$p.cursor]: 'pointer',
|
4646
4646
|
|
4647
|
-
[vars$
|
4647
|
+
[vars$p.textColor]: globalRefs$h.colors.primary.main,
|
4648
4648
|
|
4649
4649
|
textAlign: {
|
4650
|
-
right: { [vars$
|
4651
|
-
left: { [vars$
|
4652
|
-
center: { [vars$
|
4650
|
+
right: { [vars$p.textAlign]: 'right' },
|
4651
|
+
left: { [vars$p.textAlign]: 'left' },
|
4652
|
+
center: { [vars$p.textAlign]: 'center' },
|
4653
4653
|
},
|
4654
4654
|
|
4655
4655
|
_fullWidth: {
|
4656
|
-
[vars$
|
4656
|
+
[vars$p.hostWidth]: '100%',
|
4657
4657
|
},
|
4658
4658
|
|
4659
4659
|
mode: {
|
4660
4660
|
primary: {
|
4661
|
-
[vars$
|
4661
|
+
[vars$p.textColor]: globalRefs$h.colors.primary.main,
|
4662
4662
|
},
|
4663
4663
|
secondary: {
|
4664
|
-
[vars$
|
4664
|
+
[vars$p.textColor]: globalRefs$h.colors.secondary.main,
|
4665
4665
|
},
|
4666
4666
|
error: {
|
4667
|
-
[vars$
|
4667
|
+
[vars$p.textColor]: globalRefs$h.colors.error.main,
|
4668
4668
|
},
|
4669
4669
|
success: {
|
4670
|
-
[vars$
|
4670
|
+
[vars$p.textColor]: globalRefs$h.colors.success.main,
|
4671
4671
|
},
|
4672
4672
|
},
|
4673
4673
|
};
|
@@ -4675,11 +4675,11 @@ const link = {
|
|
4675
4675
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4676
4676
|
__proto__: null,
|
4677
4677
|
default: link,
|
4678
|
-
vars: vars$
|
4678
|
+
vars: vars$p
|
4679
4679
|
});
|
4680
4680
|
|
4681
|
-
const componentName$
|
4682
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4681
|
+
const componentName$x = getComponentName('divider');
|
4682
|
+
class RawDivider extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
|
4683
4683
|
constructor() {
|
4684
4684
|
super();
|
4685
4685
|
|
@@ -4725,7 +4725,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$w, baseS
|
|
4725
4725
|
}
|
4726
4726
|
|
4727
4727
|
const textVars$3 = TextClass.cssVarList;
|
4728
|
-
const { host: host$
|
4728
|
+
const { host: host$g, before, after: after$1, text } = {
|
4729
4729
|
host: { selector: () => ':host' },
|
4730
4730
|
before: { selector: '::before' },
|
4731
4731
|
after: { selector: '::after' },
|
@@ -4735,8 +4735,8 @@ const { host: host$f, before, after: after$1, text } = {
|
|
4735
4735
|
const DividerClass = compose(
|
4736
4736
|
createStyleMixin({
|
4737
4737
|
mappings: {
|
4738
|
-
hostWidth: { ...host$
|
4739
|
-
hostPadding: { ...host$
|
4738
|
+
hostWidth: { ...host$g, property: 'width' },
|
4739
|
+
hostPadding: { ...host$g, property: 'padding' },
|
4740
4740
|
hostDirection: { ...text, property: 'direction' },
|
4741
4741
|
|
4742
4742
|
minHeight: {},
|
@@ -4778,7 +4778,7 @@ const DividerClass = compose(
|
|
4778
4778
|
componentNameValidationMixin
|
4779
4779
|
)(RawDivider);
|
4780
4780
|
|
4781
|
-
const globalRefs$
|
4781
|
+
const globalRefs$g = getThemeRefs(globals);
|
4782
4782
|
const compVars$3 = DividerClass.cssVarList;
|
4783
4783
|
|
4784
4784
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -4786,18 +4786,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
4786
4786
|
thickness: '2px',
|
4787
4787
|
spacing: '10px',
|
4788
4788
|
},
|
4789
|
-
componentName$
|
4789
|
+
componentName$x
|
4790
4790
|
);
|
4791
4791
|
|
4792
4792
|
const divider = {
|
4793
4793
|
...helperTheme$1,
|
4794
4794
|
|
4795
|
-
[compVars$3.hostDirection]: globalRefs$
|
4795
|
+
[compVars$3.hostDirection]: globalRefs$g.direction,
|
4796
4796
|
[compVars$3.alignItems]: 'center',
|
4797
4797
|
[compVars$3.flexDirection]: 'row',
|
4798
4798
|
[compVars$3.alignSelf]: 'stretch',
|
4799
4799
|
[compVars$3.hostWidth]: '100%',
|
4800
|
-
[compVars$3.stripeColor]: globalRefs$
|
4800
|
+
[compVars$3.stripeColor]: globalRefs$g.colors.surface.light,
|
4801
4801
|
[compVars$3.stripeColorOpacity]: '0.5',
|
4802
4802
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4803
4803
|
[compVars$3.labelTextWidth]: 'fit-content',
|
@@ -4817,7 +4817,7 @@ const divider = {
|
|
4817
4817
|
},
|
4818
4818
|
};
|
4819
4819
|
|
4820
|
-
const vars$
|
4820
|
+
const vars$o = {
|
4821
4821
|
...compVars$3,
|
4822
4822
|
...helperVars$1,
|
4823
4823
|
};
|
@@ -4825,18 +4825,18 @@ const vars$n = {
|
|
4825
4825
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4826
4826
|
__proto__: null,
|
4827
4827
|
default: divider,
|
4828
|
-
vars: vars$
|
4828
|
+
vars: vars$o
|
4829
4829
|
});
|
4830
4830
|
|
4831
4831
|
/* eslint-disable no-param-reassign */
|
4832
4832
|
|
4833
|
-
const componentName$
|
4833
|
+
const componentName$w = getComponentName('passcode-internal');
|
4834
4834
|
|
4835
|
-
createBaseInputClass({ componentName: componentName$
|
4835
|
+
createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
|
4836
4836
|
|
4837
|
-
const componentName$
|
4837
|
+
const componentName$v = getComponentName('loader-radial');
|
4838
4838
|
|
4839
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4839
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
4840
4840
|
constructor() {
|
4841
4841
|
super();
|
4842
4842
|
|
@@ -4880,7 +4880,7 @@ const LoaderRadialClass = compose(
|
|
4880
4880
|
componentNameValidationMixin
|
4881
4881
|
)(RawLoaderRadial);
|
4882
4882
|
|
4883
|
-
const componentName$
|
4883
|
+
const componentName$u = getComponentName('passcode');
|
4884
4884
|
|
4885
4885
|
const observedAttributes$3 = ['digits'];
|
4886
4886
|
|
@@ -4899,17 +4899,17 @@ const customMixin$6 = (superclass) =>
|
|
4899
4899
|
const template = document.createElement('template');
|
4900
4900
|
|
4901
4901
|
template.innerHTML = `
|
4902
|
-
<${componentName$
|
4902
|
+
<${componentName$w}
|
4903
4903
|
bordered="true"
|
4904
4904
|
name="code"
|
4905
4905
|
tabindex="-1"
|
4906
4906
|
slot="input"
|
4907
|
-
><slot></slot></${componentName$
|
4907
|
+
><slot></slot></${componentName$w}>
|
4908
4908
|
`;
|
4909
4909
|
|
4910
4910
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4911
4911
|
|
4912
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4912
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$w);
|
4913
4913
|
|
4914
4914
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
4915
4915
|
}
|
@@ -4924,7 +4924,7 @@ const customMixin$6 = (superclass) =>
|
|
4924
4924
|
};
|
4925
4925
|
|
4926
4926
|
const {
|
4927
|
-
host: host$
|
4927
|
+
host: host$f,
|
4928
4928
|
digitField,
|
4929
4929
|
label: label$6,
|
4930
4930
|
requiredIndicator: requiredIndicator$6,
|
@@ -4947,10 +4947,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
4947
4947
|
const PasscodeClass = compose(
|
4948
4948
|
createStyleMixin({
|
4949
4949
|
mappings: {
|
4950
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
4950
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$f],
|
4951
4951
|
hostWidth: { property: 'width' },
|
4952
|
-
hostDirection: { ...host$
|
4953
|
-
fontFamily: [host$
|
4952
|
+
hostDirection: { ...host$f, property: 'direction' },
|
4953
|
+
fontFamily: [host$f, { ...label$6 }],
|
4954
4954
|
labelTextColor: [
|
4955
4955
|
{ ...label$6, property: 'color' },
|
4956
4956
|
{ ...requiredIndicator$6, property: 'color' },
|
@@ -5056,56 +5056,56 @@ const PasscodeClass = compose(
|
|
5056
5056
|
${resetInputCursor('vaadin-text-field')}
|
5057
5057
|
`,
|
5058
5058
|
excludeAttrsSync: ['tabindex'],
|
5059
|
-
componentName: componentName$
|
5059
|
+
componentName: componentName$u,
|
5060
5060
|
})
|
5061
5061
|
);
|
5062
5062
|
|
5063
|
-
const vars$
|
5063
|
+
const vars$n = PasscodeClass.cssVarList;
|
5064
5064
|
|
5065
5065
|
const passcode = {
|
5066
|
-
[vars$
|
5067
|
-
[vars$
|
5068
|
-
[vars$
|
5069
|
-
[vars$
|
5070
|
-
[vars$
|
5071
|
-
[vars$
|
5072
|
-
[vars$
|
5073
|
-
[vars$
|
5074
|
-
[vars$
|
5075
|
-
[vars$
|
5076
|
-
[vars$
|
5077
|
-
[vars$
|
5078
|
-
[vars$
|
5079
|
-
[vars$
|
5080
|
-
[vars$
|
5066
|
+
[vars$n.hostDirection]: refs.direction,
|
5067
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
5068
|
+
[vars$n.fontSize]: refs.fontSize,
|
5069
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
5070
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
5071
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
5072
|
+
[vars$n.digitValueTextColor]: refs.valueTextColor,
|
5073
|
+
[vars$n.digitPadding]: '0',
|
5074
|
+
[vars$n.digitTextAlign]: 'center',
|
5075
|
+
[vars$n.digitSpacing]: '4px',
|
5076
|
+
[vars$n.hostWidth]: refs.width,
|
5077
|
+
[vars$n.digitOutlineColor]: 'transparent',
|
5078
|
+
[vars$n.digitOutlineWidth]: refs.outlineWidth,
|
5079
|
+
[vars$n.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
5080
|
+
[vars$n.digitSize]: refs.inputHeight,
|
5081
5081
|
|
5082
5082
|
size: {
|
5083
|
-
xs: { [vars$
|
5084
|
-
sm: { [vars$
|
5085
|
-
md: { [vars$
|
5086
|
-
lg: { [vars$
|
5083
|
+
xs: { [vars$n.spinnerSize]: '15px' },
|
5084
|
+
sm: { [vars$n.spinnerSize]: '20px' },
|
5085
|
+
md: { [vars$n.spinnerSize]: '20px' },
|
5086
|
+
lg: { [vars$n.spinnerSize]: '20px' },
|
5087
5087
|
},
|
5088
5088
|
|
5089
5089
|
_hideCursor: {
|
5090
|
-
[vars$
|
5090
|
+
[vars$n.digitCaretTextColor]: 'transparent',
|
5091
5091
|
},
|
5092
5092
|
|
5093
5093
|
_loading: {
|
5094
|
-
[vars$
|
5094
|
+
[vars$n.overlayOpacity]: refs.overlayOpacity,
|
5095
5095
|
},
|
5096
5096
|
};
|
5097
5097
|
|
5098
5098
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
5099
5099
|
__proto__: null,
|
5100
5100
|
default: passcode,
|
5101
|
-
vars: vars$
|
5101
|
+
vars: vars$n
|
5102
5102
|
});
|
5103
5103
|
|
5104
|
-
const componentName$
|
5104
|
+
const componentName$t = getComponentName('loader-linear');
|
5105
5105
|
|
5106
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
5106
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
|
5107
5107
|
static get componentName() {
|
5108
|
-
return componentName$
|
5108
|
+
return componentName$t;
|
5109
5109
|
}
|
5110
5110
|
|
5111
5111
|
constructor() {
|
@@ -5141,18 +5141,18 @@ const selectors$1 = {
|
|
5141
5141
|
host: { selector: () => ':host' },
|
5142
5142
|
};
|
5143
5143
|
|
5144
|
-
const { after, host: host$
|
5144
|
+
const { after, host: host$e } = selectors$1;
|
5145
5145
|
|
5146
5146
|
const LoaderLinearClass = compose(
|
5147
5147
|
createStyleMixin({
|
5148
5148
|
mappings: {
|
5149
5149
|
hostDisplay: {},
|
5150
|
-
hostWidth: { ...host$
|
5150
|
+
hostWidth: { ...host$e, property: 'width' },
|
5151
5151
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
5152
5152
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
5153
5153
|
verticalPadding: [
|
5154
|
-
{ ...host$
|
5155
|
-
{ ...host$
|
5154
|
+
{ ...host$e, property: 'padding-top' },
|
5155
|
+
{ ...host$e, property: 'padding-bottom' },
|
5156
5156
|
],
|
5157
5157
|
barBackgroundColor: { property: 'background-color' },
|
5158
5158
|
barColor: { ...after, property: 'background-color' },
|
@@ -5166,67 +5166,67 @@ const LoaderLinearClass = compose(
|
|
5166
5166
|
componentNameValidationMixin
|
5167
5167
|
)(RawLoaderLinear);
|
5168
5168
|
|
5169
|
-
const globalRefs$
|
5170
|
-
const vars$
|
5169
|
+
const globalRefs$f = getThemeRefs(globals);
|
5170
|
+
const vars$m = LoaderLinearClass.cssVarList;
|
5171
5171
|
|
5172
5172
|
const loaderLinear = {
|
5173
|
-
[vars$
|
5174
|
-
[vars$
|
5173
|
+
[vars$m.hostDisplay]: 'inline-block',
|
5174
|
+
[vars$m.hostWidth]: '100%',
|
5175
5175
|
|
5176
|
-
[vars$
|
5177
|
-
[vars$
|
5176
|
+
[vars$m.barColor]: globalRefs$f.colors.surface.contrast,
|
5177
|
+
[vars$m.barWidth]: '20%',
|
5178
5178
|
|
5179
|
-
[vars$
|
5180
|
-
[vars$
|
5179
|
+
[vars$m.barBackgroundColor]: globalRefs$f.colors.surface.light,
|
5180
|
+
[vars$m.barBorderRadius]: '4px',
|
5181
5181
|
|
5182
|
-
[vars$
|
5183
|
-
[vars$
|
5184
|
-
[vars$
|
5185
|
-
[vars$
|
5182
|
+
[vars$m.animationDuration]: '2s',
|
5183
|
+
[vars$m.animationTimingFunction]: 'linear',
|
5184
|
+
[vars$m.animationIterationCount]: 'infinite',
|
5185
|
+
[vars$m.verticalPadding]: '0.25em',
|
5186
5186
|
|
5187
5187
|
size: {
|
5188
|
-
xs: { [vars$
|
5189
|
-
sm: { [vars$
|
5190
|
-
md: { [vars$
|
5191
|
-
lg: { [vars$
|
5188
|
+
xs: { [vars$m.barHeight]: '2px' },
|
5189
|
+
sm: { [vars$m.barHeight]: '4px' },
|
5190
|
+
md: { [vars$m.barHeight]: '6px' },
|
5191
|
+
lg: { [vars$m.barHeight]: '8px' },
|
5192
5192
|
},
|
5193
5193
|
|
5194
5194
|
mode: {
|
5195
5195
|
primary: {
|
5196
|
-
[vars$
|
5196
|
+
[vars$m.barColor]: globalRefs$f.colors.primary.main,
|
5197
5197
|
},
|
5198
5198
|
secondary: {
|
5199
|
-
[vars$
|
5199
|
+
[vars$m.barColor]: globalRefs$f.colors.secondary.main,
|
5200
5200
|
},
|
5201
5201
|
},
|
5202
5202
|
|
5203
5203
|
_hidden: {
|
5204
|
-
[vars$
|
5204
|
+
[vars$m.hostDisplay]: 'none',
|
5205
5205
|
},
|
5206
5206
|
};
|
5207
5207
|
|
5208
5208
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
5209
5209
|
__proto__: null,
|
5210
5210
|
default: loaderLinear,
|
5211
|
-
vars: vars$
|
5211
|
+
vars: vars$m
|
5212
5212
|
});
|
5213
5213
|
|
5214
|
-
const globalRefs$
|
5214
|
+
const globalRefs$e = getThemeRefs(globals);
|
5215
5215
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
5216
5216
|
|
5217
5217
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
5218
5218
|
{
|
5219
|
-
spinnerColor: globalRefs$
|
5219
|
+
spinnerColor: globalRefs$e.colors.surface.contrast,
|
5220
5220
|
mode: {
|
5221
5221
|
primary: {
|
5222
|
-
spinnerColor: globalRefs$
|
5222
|
+
spinnerColor: globalRefs$e.colors.primary.main,
|
5223
5223
|
},
|
5224
5224
|
secondary: {
|
5225
|
-
spinnerColor: globalRefs$
|
5225
|
+
spinnerColor: globalRefs$e.colors.secondary.main,
|
5226
5226
|
},
|
5227
5227
|
},
|
5228
5228
|
},
|
5229
|
-
componentName$
|
5229
|
+
componentName$v
|
5230
5230
|
);
|
5231
5231
|
|
5232
5232
|
const loaderRadial = {
|
@@ -5255,7 +5255,7 @@ const loaderRadial = {
|
|
5255
5255
|
[compVars$2.hostDisplay]: 'none',
|
5256
5256
|
},
|
5257
5257
|
};
|
5258
|
-
const vars$
|
5258
|
+
const vars$l = {
|
5259
5259
|
...compVars$2,
|
5260
5260
|
...helperVars,
|
5261
5261
|
};
|
@@ -5263,10 +5263,10 @@ const vars$k = {
|
|
5263
5263
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
5264
5264
|
__proto__: null,
|
5265
5265
|
default: loaderRadial,
|
5266
|
-
vars: vars$
|
5266
|
+
vars: vars$l
|
5267
5267
|
});
|
5268
5268
|
|
5269
|
-
const componentName$
|
5269
|
+
const componentName$s = getComponentName('combo-box');
|
5270
5270
|
|
5271
5271
|
const ComboBoxMixin = (superclass) =>
|
5272
5272
|
class ComboBoxMixinClass extends superclass {
|
@@ -5492,7 +5492,7 @@ const ComboBoxMixin = (superclass) =>
|
|
5492
5492
|
};
|
5493
5493
|
|
5494
5494
|
const {
|
5495
|
-
host: host$
|
5495
|
+
host: host$d,
|
5496
5496
|
inputField: inputField$3,
|
5497
5497
|
inputElement: inputElement$1,
|
5498
5498
|
placeholder: placeholder$1,
|
@@ -5518,10 +5518,10 @@ const {
|
|
5518
5518
|
const ComboBoxClass = compose(
|
5519
5519
|
createStyleMixin({
|
5520
5520
|
mappings: {
|
5521
|
-
hostWidth: { ...host$
|
5522
|
-
hostDirection: { ...host$
|
5521
|
+
hostWidth: { ...host$d, property: 'width' },
|
5522
|
+
hostDirection: { ...host$d, property: 'direction' },
|
5523
5523
|
// we apply font-size also on the host so we can set its width with em
|
5524
|
-
fontSize: [{}, host$
|
5524
|
+
fontSize: [{}, host$d],
|
5525
5525
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
5526
5526
|
labelTextColor: [
|
5527
5527
|
{ ...label$5, property: 'color' },
|
@@ -5649,71 +5649,71 @@ const ComboBoxClass = compose(
|
|
5649
5649
|
// and reset items to an empty array, and opening the list box with no items
|
5650
5650
|
// to display.
|
5651
5651
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5652
|
-
componentName: componentName$
|
5652
|
+
componentName: componentName$s,
|
5653
5653
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5654
5654
|
})
|
5655
5655
|
);
|
5656
5656
|
|
5657
|
-
const globalRefs$
|
5658
|
-
const vars$
|
5657
|
+
const globalRefs$d = getThemeRefs(globals);
|
5658
|
+
const vars$k = ComboBoxClass.cssVarList;
|
5659
5659
|
|
5660
5660
|
const comboBox = {
|
5661
|
-
[vars$
|
5662
|
-
[vars$
|
5663
|
-
[vars$
|
5664
|
-
[vars$
|
5665
|
-
[vars$
|
5666
|
-
[vars$
|
5667
|
-
[vars$
|
5668
|
-
[vars$
|
5669
|
-
[vars$
|
5670
|
-
[vars$
|
5671
|
-
[vars$
|
5672
|
-
[vars$
|
5673
|
-
[vars$
|
5674
|
-
[vars$
|
5675
|
-
[vars$
|
5676
|
-
[vars$
|
5677
|
-
[vars$
|
5678
|
-
[vars$
|
5679
|
-
[vars$
|
5680
|
-
[vars$
|
5681
|
-
[vars$
|
5682
|
-
[vars$
|
5683
|
-
[vars$
|
5684
|
-
[vars$
|
5685
|
-
[vars$
|
5686
|
-
[vars$
|
5661
|
+
[vars$k.hostWidth]: refs.width,
|
5662
|
+
[vars$k.hostDirection]: refs.direction,
|
5663
|
+
[vars$k.fontSize]: refs.fontSize,
|
5664
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
5665
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
5666
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
5667
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
5668
|
+
[vars$k.inputBorderWidth]: refs.borderWidth,
|
5669
|
+
[vars$k.inputBorderStyle]: refs.borderStyle,
|
5670
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
5671
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
5672
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
5673
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
5674
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
5675
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
5676
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
5677
|
+
[vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5678
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
5679
|
+
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
5680
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
5681
|
+
[vars$k.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
|
5682
|
+
[vars$k.inputDropdownButtonCursor]: 'pointer',
|
5683
|
+
[vars$k.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5684
|
+
[vars$k.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
|
5685
|
+
[vars$k.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
|
5686
|
+
[vars$k.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
|
5687
5687
|
|
5688
5688
|
_readonly: {
|
5689
|
-
[vars$
|
5689
|
+
[vars$k.inputDropdownButtonCursor]: 'default',
|
5690
5690
|
},
|
5691
5691
|
|
5692
5692
|
// Overlay theme exposed via the component:
|
5693
|
-
[vars$
|
5694
|
-
[vars$
|
5695
|
-
[vars$
|
5696
|
-
[vars$
|
5697
|
-
[vars$
|
5698
|
-
[vars$
|
5693
|
+
[vars$k.overlayFontSize]: refs.fontSize,
|
5694
|
+
[vars$k.overlayFontFamily]: refs.fontFamily,
|
5695
|
+
[vars$k.overlayCursor]: 'pointer',
|
5696
|
+
[vars$k.overlayItemBoxShadow]: 'none',
|
5697
|
+
[vars$k.overlayBackground]: refs.backgroundColor,
|
5698
|
+
[vars$k.overlayTextColor]: refs.valueTextColor,
|
5699
5699
|
|
5700
5700
|
// Overlay direct theme:
|
5701
|
-
[vars$
|
5702
|
-
[vars$
|
5701
|
+
[vars$k.overlay.minHeight]: '400px',
|
5702
|
+
[vars$k.overlay.margin]: '0',
|
5703
5703
|
};
|
5704
5704
|
|
5705
5705
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5706
5706
|
__proto__: null,
|
5707
5707
|
comboBox: comboBox,
|
5708
5708
|
default: comboBox,
|
5709
|
-
vars: vars$
|
5709
|
+
vars: vars$k
|
5710
5710
|
});
|
5711
5711
|
|
5712
5712
|
const observedAttributes$2 = ['src', 'alt'];
|
5713
5713
|
|
5714
|
-
const componentName$
|
5714
|
+
const componentName$r = getComponentName('image');
|
5715
5715
|
|
5716
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5716
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
|
5717
5717
|
class RawImage extends BaseClass$1 {
|
5718
5718
|
static get observedAttributes() {
|
5719
5719
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5753,14 +5753,14 @@ const ImageClass = compose(
|
|
5753
5753
|
draggableMixin
|
5754
5754
|
)(RawImage);
|
5755
5755
|
|
5756
|
-
const vars$
|
5756
|
+
const vars$j = ImageClass.cssVarList;
|
5757
5757
|
|
5758
5758
|
const image = {};
|
5759
5759
|
|
5760
5760
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5761
5761
|
__proto__: null,
|
5762
5762
|
default: image,
|
5763
|
-
vars: vars$
|
5763
|
+
vars: vars$j
|
5764
5764
|
});
|
5765
5765
|
|
5766
5766
|
var CountryCodes = [
|
@@ -6979,14 +6979,14 @@ var CountryCodes = [
|
|
6979
6979
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
6980
6980
|
];
|
6981
6981
|
|
6982
|
-
const componentName$
|
6982
|
+
const componentName$q = getComponentName('phone-field-internal');
|
6983
6983
|
|
6984
|
-
createBaseInputClass({ componentName: componentName$
|
6984
|
+
createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
|
6985
6985
|
|
6986
6986
|
const textVars$1 = TextFieldClass.cssVarList;
|
6987
6987
|
const comboVars = ComboBoxClass.cssVarList;
|
6988
6988
|
|
6989
|
-
const componentName$
|
6989
|
+
const componentName$p = getComponentName('phone-field');
|
6990
6990
|
|
6991
6991
|
const customMixin$5 = (superclass) =>
|
6992
6992
|
class PhoneFieldMixinClass extends superclass {
|
@@ -7000,15 +7000,15 @@ const customMixin$5 = (superclass) =>
|
|
7000
7000
|
const template = document.createElement('template');
|
7001
7001
|
|
7002
7002
|
template.innerHTML = `
|
7003
|
-
<${componentName$
|
7003
|
+
<${componentName$q}
|
7004
7004
|
tabindex="-1"
|
7005
7005
|
slot="input"
|
7006
|
-
></${componentName$
|
7006
|
+
></${componentName$q}>
|
7007
7007
|
`;
|
7008
7008
|
|
7009
7009
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7010
7010
|
|
7011
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7011
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$q);
|
7012
7012
|
|
7013
7013
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
7014
7014
|
includeAttrs: [
|
@@ -7028,7 +7028,7 @@ const customMixin$5 = (superclass) =>
|
|
7028
7028
|
};
|
7029
7029
|
|
7030
7030
|
const {
|
7031
|
-
host: host$
|
7031
|
+
host: host$c,
|
7032
7032
|
label: label$4,
|
7033
7033
|
requiredIndicator: requiredIndicator$4,
|
7034
7034
|
inputField: inputField$2,
|
@@ -7053,7 +7053,7 @@ const PhoneFieldClass = compose(
|
|
7053
7053
|
createStyleMixin({
|
7054
7054
|
mappings: {
|
7055
7055
|
fontSize: [
|
7056
|
-
host$
|
7056
|
+
host$c,
|
7057
7057
|
inputField$2,
|
7058
7058
|
{
|
7059
7059
|
selector: TextFieldClass.componentName,
|
@@ -7074,11 +7074,11 @@ const PhoneFieldClass = compose(
|
|
7074
7074
|
},
|
7075
7075
|
],
|
7076
7076
|
hostWidth: [
|
7077
|
-
{ ...host$
|
7077
|
+
{ ...host$c, property: 'width' },
|
7078
7078
|
{ ...phoneInput$1, property: 'width' },
|
7079
7079
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
7080
7080
|
],
|
7081
|
-
hostDirection: { ...host$
|
7081
|
+
hostDirection: { ...host$c, property: 'direction' },
|
7082
7082
|
|
7083
7083
|
inputBorderStyle: [
|
7084
7084
|
{ ...inputField$2, property: 'border-style' },
|
@@ -7204,33 +7204,33 @@ const PhoneFieldClass = compose(
|
|
7204
7204
|
${resetInputLabelPosition('vaadin-text-field')}
|
7205
7205
|
`,
|
7206
7206
|
excludeAttrsSync: ['tabindex'],
|
7207
|
-
componentName: componentName$
|
7207
|
+
componentName: componentName$p,
|
7208
7208
|
})
|
7209
7209
|
);
|
7210
7210
|
|
7211
|
-
const vars$
|
7211
|
+
const vars$i = PhoneFieldClass.cssVarList;
|
7212
7212
|
|
7213
7213
|
const phoneField = {
|
7214
|
-
[vars$
|
7215
|
-
[vars$
|
7216
|
-
[vars$
|
7217
|
-
[vars$
|
7218
|
-
[vars$
|
7219
|
-
[vars$
|
7220
|
-
[vars$
|
7221
|
-
[vars$
|
7222
|
-
[vars$
|
7223
|
-
[vars$
|
7224
|
-
[vars$
|
7225
|
-
[vars$
|
7226
|
-
[vars$
|
7227
|
-
[vars$
|
7228
|
-
[vars$
|
7229
|
-
[vars$
|
7230
|
-
[vars$
|
7231
|
-
[vars$
|
7232
|
-
[vars$
|
7233
|
-
[vars$
|
7214
|
+
[vars$i.hostWidth]: refs.width,
|
7215
|
+
[vars$i.hostDirection]: refs.direction,
|
7216
|
+
[vars$i.fontSize]: refs.fontSize,
|
7217
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
7218
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
7219
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
7220
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
7221
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
7222
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7223
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
7224
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
7225
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
7226
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
7227
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
7228
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
7229
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
7230
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
7231
|
+
[vars$i.phoneInputWidth]: refs.minWidth,
|
7232
|
+
[vars$i.countryCodeInputWidth]: '5em',
|
7233
|
+
[vars$i.countryCodeDropdownWidth]: '20em',
|
7234
7234
|
|
7235
7235
|
// '@overlay': {
|
7236
7236
|
// overlayItemBackgroundColor: 'red'
|
@@ -7240,16 +7240,16 @@ const phoneField = {
|
|
7240
7240
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7241
7241
|
__proto__: null,
|
7242
7242
|
default: phoneField,
|
7243
|
-
vars: vars$
|
7243
|
+
vars: vars$i
|
7244
7244
|
});
|
7245
7245
|
|
7246
|
-
const componentName$
|
7246
|
+
const componentName$o = getComponentName('phone-field-internal-input-box');
|
7247
7247
|
|
7248
|
-
createBaseInputClass({ componentName: componentName$
|
7248
|
+
createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
7249
7249
|
|
7250
7250
|
const textVars = TextFieldClass.cssVarList;
|
7251
7251
|
|
7252
|
-
const componentName$
|
7252
|
+
const componentName$n = getComponentName('phone-input-box-field');
|
7253
7253
|
|
7254
7254
|
const customMixin$4 = (superclass) =>
|
7255
7255
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -7263,15 +7263,15 @@ const customMixin$4 = (superclass) =>
|
|
7263
7263
|
const template = document.createElement('template');
|
7264
7264
|
|
7265
7265
|
template.innerHTML = `
|
7266
|
-
<${componentName$
|
7266
|
+
<${componentName$o}
|
7267
7267
|
tabindex="-1"
|
7268
7268
|
slot="input"
|
7269
|
-
></${componentName$
|
7269
|
+
></${componentName$o}>
|
7270
7270
|
`;
|
7271
7271
|
|
7272
7272
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7273
7273
|
|
7274
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7274
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
7275
7275
|
|
7276
7276
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
7277
7277
|
includeAttrs: [
|
@@ -7288,7 +7288,7 @@ const customMixin$4 = (superclass) =>
|
|
7288
7288
|
}
|
7289
7289
|
};
|
7290
7290
|
|
7291
|
-
const { host: host$
|
7291
|
+
const { host: host$b, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
7292
7292
|
host: { selector: () => ':host' },
|
7293
7293
|
label: { selector: '::part(label)' },
|
7294
7294
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -7302,7 +7302,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
7302
7302
|
createStyleMixin({
|
7303
7303
|
mappings: {
|
7304
7304
|
fontSize: [
|
7305
|
-
host$
|
7305
|
+
host$b,
|
7306
7306
|
inputField$1,
|
7307
7307
|
{
|
7308
7308
|
selector: TextFieldClass.componentName,
|
@@ -7310,9 +7310,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
7310
7310
|
},
|
7311
7311
|
],
|
7312
7312
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
7313
|
-
hostWidth: { ...host$
|
7314
|
-
hostMinWidth: { ...host$
|
7315
|
-
hostDirection: { ...host$
|
7313
|
+
hostWidth: { ...host$b, property: 'width' },
|
7314
|
+
hostMinWidth: { ...host$b, property: 'min-width' },
|
7315
|
+
hostDirection: { ...host$b, property: 'direction' },
|
7316
7316
|
|
7317
7317
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
7318
7318
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -7404,56 +7404,56 @@ const PhoneFieldInputBoxClass = compose(
|
|
7404
7404
|
${resetInputLabelPosition('vaadin-text-field')}
|
7405
7405
|
`,
|
7406
7406
|
excludeAttrsSync: ['tabindex'],
|
7407
|
-
componentName: componentName$
|
7407
|
+
componentName: componentName$n,
|
7408
7408
|
})
|
7409
7409
|
);
|
7410
7410
|
|
7411
|
-
const vars$
|
7411
|
+
const vars$h = PhoneFieldInputBoxClass.cssVarList;
|
7412
7412
|
|
7413
7413
|
const phoneInputBoxField = {
|
7414
|
-
[vars$
|
7415
|
-
[vars$
|
7416
|
-
[vars$
|
7417
|
-
[vars$
|
7418
|
-
[vars$
|
7419
|
-
[vars$
|
7420
|
-
[vars$
|
7421
|
-
[vars$
|
7422
|
-
[vars$
|
7423
|
-
[vars$
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7426
|
-
[vars$
|
7427
|
-
[vars$
|
7428
|
-
[vars$
|
7429
|
-
[vars$
|
7430
|
-
[vars$
|
7431
|
-
[vars$
|
7414
|
+
[vars$h.hostWidth]: '16em',
|
7415
|
+
[vars$h.hostMinWidth]: refs.minWidth,
|
7416
|
+
[vars$h.hostDirection]: refs.direction,
|
7417
|
+
[vars$h.fontSize]: refs.fontSize,
|
7418
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
7419
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
7420
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
7421
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
7422
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
7423
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7424
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
7425
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
7426
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
7427
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
7428
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
7429
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
7430
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
7431
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
7432
7432
|
_fullWidth: {
|
7433
|
-
[vars$
|
7433
|
+
[vars$h.hostWidth]: refs.width,
|
7434
7434
|
},
|
7435
7435
|
};
|
7436
7436
|
|
7437
7437
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7438
7438
|
__proto__: null,
|
7439
7439
|
default: phoneInputBoxField,
|
7440
|
-
vars: vars$
|
7440
|
+
vars: vars$h
|
7441
7441
|
});
|
7442
7442
|
|
7443
|
-
const componentName$
|
7443
|
+
const componentName$m = getComponentName('new-password-internal');
|
7444
7444
|
|
7445
7445
|
const interpolateString = (template, values) =>
|
7446
7446
|
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
7447
7447
|
|
7448
7448
|
// eslint-disable-next-line max-classes-per-file
|
7449
7449
|
|
7450
|
-
const componentName$
|
7450
|
+
const componentName$l = getComponentName('policy-validation');
|
7451
7451
|
|
7452
7452
|
const overrideAttrs = ['data-password-policy-value-minlength'];
|
7453
7453
|
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
7454
7454
|
const policyAttrs = ['label', 'value', ...dataAttrs];
|
7455
7455
|
|
7456
|
-
class RawPolicyValidation extends createBaseClass({ componentName: componentName$
|
7456
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
7457
7457
|
#availablePolicies;
|
7458
7458
|
|
7459
7459
|
#activePolicies = [];
|
@@ -7626,7 +7626,7 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
|
|
7626
7626
|
}
|
7627
7627
|
}
|
7628
7628
|
|
7629
|
-
const { host: host$
|
7629
|
+
const { host: host$a, item, symbolDefault, symbolSuccess, symbolError } = {
|
7630
7630
|
host: { selector: () => ':host > div' },
|
7631
7631
|
item: { selector: () => '.item' },
|
7632
7632
|
symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
|
@@ -7642,13 +7642,13 @@ const PolicyValidationClass = compose(
|
|
7642
7642
|
fontSize: {},
|
7643
7643
|
fontFamily: {},
|
7644
7644
|
padding: {},
|
7645
|
-
borderWidth: { ...host$
|
7646
|
-
borderStyle: { ...host$
|
7647
|
-
borderColor: { ...host$
|
7648
|
-
borderRadius: { ...host$
|
7649
|
-
backgroundColor: { ...host$
|
7645
|
+
borderWidth: { ...host$a, property: 'border-width' },
|
7646
|
+
borderStyle: { ...host$a, property: 'border-style' },
|
7647
|
+
borderColor: { ...host$a, property: 'border-color' },
|
7648
|
+
borderRadius: { ...host$a, property: 'border-radius' },
|
7649
|
+
backgroundColor: { ...host$a, property: 'background-color' },
|
7650
7650
|
textColor: { property: 'color' },
|
7651
|
-
labelMargin: { ...host$
|
7651
|
+
labelMargin: { ...host$a, property: 'gap' },
|
7652
7652
|
itemsSpacing: { ...item, property: 'line-height' },
|
7653
7653
|
itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
|
7654
7654
|
itemSymbolErrorColor: { ...symbolError, property: 'color' },
|
@@ -7661,7 +7661,7 @@ const PolicyValidationClass = compose(
|
|
7661
7661
|
componentNameValidationMixin
|
7662
7662
|
)(RawPolicyValidation);
|
7663
7663
|
|
7664
|
-
const componentName$
|
7664
|
+
const componentName$k = getComponentName('new-password');
|
7665
7665
|
|
7666
7666
|
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
7667
7667
|
|
@@ -7673,16 +7673,16 @@ const customMixin$3 = (superclass) =>
|
|
7673
7673
|
const template = document.createElement('template');
|
7674
7674
|
|
7675
7675
|
template.innerHTML = `
|
7676
|
-
<${componentName$
|
7676
|
+
<${componentName$m}
|
7677
7677
|
name="new-password"
|
7678
7678
|
tabindex="-1"
|
7679
7679
|
slot="input"
|
7680
|
-
></${componentName$
|
7680
|
+
></${componentName$m}>
|
7681
7681
|
`;
|
7682
7682
|
|
7683
7683
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7684
7684
|
|
7685
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7685
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
7686
7686
|
|
7687
7687
|
forwardAttrs(this, this.inputElement, {
|
7688
7688
|
includeAttrs: [
|
@@ -7709,7 +7709,7 @@ const customMixin$3 = (superclass) =>
|
|
7709
7709
|
};
|
7710
7710
|
|
7711
7711
|
const {
|
7712
|
-
host: host$
|
7712
|
+
host: host$9,
|
7713
7713
|
label: label$2,
|
7714
7714
|
internalInputsWrapper,
|
7715
7715
|
errorMessage: errorMessage$3,
|
@@ -7730,7 +7730,7 @@ const NewPasswordClass = compose(
|
|
7730
7730
|
createStyleMixin({
|
7731
7731
|
mappings: {
|
7732
7732
|
fontSize: [
|
7733
|
-
host$
|
7733
|
+
host$9,
|
7734
7734
|
{},
|
7735
7735
|
{
|
7736
7736
|
selector: PasswordClass.componentName,
|
@@ -7739,13 +7739,13 @@ const NewPasswordClass = compose(
|
|
7739
7739
|
],
|
7740
7740
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
7741
7741
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
7742
|
-
hostWidth: { ...host$
|
7743
|
-
hostMinWidth: { ...host$
|
7742
|
+
hostWidth: { ...host$9, property: 'width' },
|
7743
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
7744
7744
|
hostDirection: [
|
7745
|
-
{ ...host$
|
7745
|
+
{ ...host$9, property: 'direction' },
|
7746
7746
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
7747
7747
|
],
|
7748
|
-
inputsRequiredIndicator: { ...host$
|
7748
|
+
inputsRequiredIndicator: { ...host$9, property: 'content' },
|
7749
7749
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
7750
7750
|
policyPreviewBackgroundColor: {
|
7751
7751
|
...policyPreview,
|
@@ -7814,36 +7814,36 @@ const NewPasswordClass = compose(
|
|
7814
7814
|
}
|
7815
7815
|
`,
|
7816
7816
|
excludeAttrsSync: ['tabindex'],
|
7817
|
-
componentName: componentName$
|
7817
|
+
componentName: componentName$k,
|
7818
7818
|
})
|
7819
7819
|
);
|
7820
7820
|
|
7821
|
-
const globalRefs$
|
7822
|
-
const vars$
|
7821
|
+
const globalRefs$c = getThemeRefs(globals);
|
7822
|
+
const vars$g = NewPasswordClass.cssVarList;
|
7823
7823
|
|
7824
7824
|
const newPassword = {
|
7825
|
-
[vars$
|
7826
|
-
[vars$
|
7827
|
-
[vars$
|
7828
|
-
[vars$
|
7829
|
-
[vars$
|
7830
|
-
[vars$
|
7831
|
-
[vars$
|
7832
|
-
[vars$
|
7833
|
-
[vars$
|
7825
|
+
[vars$g.hostWidth]: refs.width,
|
7826
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
7827
|
+
[vars$g.hostDirection]: refs.direction,
|
7828
|
+
[vars$g.fontSize]: refs.fontSize,
|
7829
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
7830
|
+
[vars$g.spaceBetweenInputs]: '1em',
|
7831
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
7832
|
+
[vars$g.policyPreviewBackgroundColor]: 'none',
|
7833
|
+
[vars$g.policyPreviewPadding]: globalRefs$c.spacing.lg,
|
7834
7834
|
|
7835
7835
|
_required: {
|
7836
7836
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7837
7837
|
// That's why we fake the required indicator on each input.
|
7838
7838
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7839
|
-
[vars$
|
7839
|
+
[vars$g.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7840
7840
|
},
|
7841
7841
|
};
|
7842
7842
|
|
7843
7843
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7844
7844
|
__proto__: null,
|
7845
7845
|
default: newPassword,
|
7846
|
-
vars: vars$
|
7846
|
+
vars: vars$g
|
7847
7847
|
});
|
7848
7848
|
|
7849
7849
|
const getFileBase64 = (fileObj) => {
|
@@ -7858,7 +7858,7 @@ const getFilename = (fileObj) => {
|
|
7858
7858
|
return fileObj.name.replace(/^.*\\/, '');
|
7859
7859
|
};
|
7860
7860
|
|
7861
|
-
const componentName$
|
7861
|
+
const componentName$j = getComponentName('upload-file');
|
7862
7862
|
|
7863
7863
|
const observedAttributes$1 = [
|
7864
7864
|
'title',
|
@@ -7873,7 +7873,7 @@ const observedAttributes$1 = [
|
|
7873
7873
|
'icon',
|
7874
7874
|
];
|
7875
7875
|
|
7876
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7876
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$j, baseSelector: ':host > div' });
|
7877
7877
|
|
7878
7878
|
class RawUploadFile extends BaseInputClass {
|
7879
7879
|
static get observedAttributes() {
|
@@ -8045,7 +8045,7 @@ class RawUploadFile extends BaseInputClass {
|
|
8045
8045
|
}
|
8046
8046
|
|
8047
8047
|
const buttonVars = ButtonClass.cssVarList;
|
8048
|
-
const { host: host$
|
8048
|
+
const { host: host$8, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
8049
8049
|
host: { selector: () => ':host' },
|
8050
8050
|
wrapper: { selector: () => ':host > div' },
|
8051
8051
|
icon: { selector: () => '::slotted(*)' },
|
@@ -8064,11 +8064,11 @@ const UploadFileClass = compose(
|
|
8064
8064
|
borderWidth: {},
|
8065
8065
|
borderStyle: {},
|
8066
8066
|
borderRadius: {},
|
8067
|
-
hostHeight: { ...host$
|
8068
|
-
hostWidth: { ...host$
|
8067
|
+
hostHeight: { ...host$8, property: 'height' },
|
8068
|
+
hostWidth: { ...host$8, property: 'width' },
|
8069
8069
|
hostPadding: { property: 'padding' },
|
8070
8070
|
hostDirection: [
|
8071
|
-
{ ...host$
|
8071
|
+
{ ...host$8, property: 'direction' },
|
8072
8072
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
8073
8073
|
],
|
8074
8074
|
gap: { ...wrapper },
|
@@ -8088,77 +8088,77 @@ const UploadFileClass = compose(
|
|
8088
8088
|
componentNameValidationMixin
|
8089
8089
|
)(RawUploadFile);
|
8090
8090
|
|
8091
|
-
const vars$
|
8091
|
+
const vars$f = UploadFileClass.cssVarList;
|
8092
8092
|
|
8093
8093
|
const uploadFile = {
|
8094
|
-
[vars$
|
8095
|
-
[vars$
|
8096
|
-
[vars$
|
8094
|
+
[vars$f.hostDirection]: refs.direction,
|
8095
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
8096
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
8097
8097
|
|
8098
|
-
[vars$
|
8098
|
+
[vars$f.iconSize]: '2em',
|
8099
8099
|
|
8100
|
-
[vars$
|
8101
|
-
[vars$
|
8100
|
+
[vars$f.hostPadding]: '0.75em',
|
8101
|
+
[vars$f.gap]: '0.5em',
|
8102
8102
|
|
8103
|
-
[vars$
|
8104
|
-
[vars$
|
8105
|
-
[vars$
|
8103
|
+
[vars$f.fontSize]: '16px',
|
8104
|
+
[vars$f.titleFontWeight]: '500',
|
8105
|
+
[vars$f.lineHeight]: '1em',
|
8106
8106
|
|
8107
|
-
[vars$
|
8108
|
-
[vars$
|
8109
|
-
[vars$
|
8110
|
-
[vars$
|
8107
|
+
[vars$f.borderWidth]: refs.borderWidth,
|
8108
|
+
[vars$f.borderColor]: refs.borderColor,
|
8109
|
+
[vars$f.borderRadius]: refs.borderRadius,
|
8110
|
+
[vars$f.borderStyle]: 'dashed',
|
8111
8111
|
|
8112
8112
|
_required: {
|
8113
|
-
[vars$
|
8113
|
+
[vars$f.requiredIndicator]: refs.requiredIndicator,
|
8114
8114
|
},
|
8115
8115
|
|
8116
8116
|
size: {
|
8117
8117
|
xs: {
|
8118
|
-
[vars$
|
8119
|
-
[vars$
|
8120
|
-
[vars$
|
8121
|
-
[vars$
|
8122
|
-
[vars$
|
8118
|
+
[vars$f.hostHeight]: '196px',
|
8119
|
+
[vars$f.hostWidth]: '200px',
|
8120
|
+
[vars$f.titleFontSize]: '0.875em',
|
8121
|
+
[vars$f.descriptionFontSize]: '0.875em',
|
8122
|
+
[vars$f.lineHeight]: '1.25em',
|
8123
8123
|
},
|
8124
8124
|
sm: {
|
8125
|
-
[vars$
|
8126
|
-
[vars$
|
8127
|
-
[vars$
|
8128
|
-
[vars$
|
8129
|
-
[vars$
|
8125
|
+
[vars$f.hostHeight]: '216px',
|
8126
|
+
[vars$f.hostWidth]: '230px',
|
8127
|
+
[vars$f.titleFontSize]: '1em',
|
8128
|
+
[vars$f.descriptionFontSize]: '0.875em',
|
8129
|
+
[vars$f.lineHeight]: '1.25em',
|
8130
8130
|
},
|
8131
8131
|
md: {
|
8132
|
-
[vars$
|
8133
|
-
[vars$
|
8134
|
-
[vars$
|
8135
|
-
[vars$
|
8136
|
-
[vars$
|
8132
|
+
[vars$f.hostHeight]: '256px',
|
8133
|
+
[vars$f.hostWidth]: '312px',
|
8134
|
+
[vars$f.titleFontSize]: '1.125em',
|
8135
|
+
[vars$f.descriptionFontSize]: '1em',
|
8136
|
+
[vars$f.lineHeight]: '1.5em',
|
8137
8137
|
},
|
8138
8138
|
lg: {
|
8139
|
-
[vars$
|
8140
|
-
[vars$
|
8141
|
-
[vars$
|
8142
|
-
[vars$
|
8143
|
-
[vars$
|
8139
|
+
[vars$f.hostHeight]: '280px',
|
8140
|
+
[vars$f.hostWidth]: '336px',
|
8141
|
+
[vars$f.titleFontSize]: '1.125em',
|
8142
|
+
[vars$f.descriptionFontSize]: '1.125em',
|
8143
|
+
[vars$f.lineHeight]: '1.75em',
|
8144
8144
|
},
|
8145
8145
|
},
|
8146
8146
|
|
8147
8147
|
_fullWidth: {
|
8148
|
-
[vars$
|
8148
|
+
[vars$f.hostWidth]: refs.width,
|
8149
8149
|
},
|
8150
8150
|
};
|
8151
8151
|
|
8152
8152
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8153
8153
|
__proto__: null,
|
8154
8154
|
default: uploadFile,
|
8155
|
-
vars: vars$
|
8155
|
+
vars: vars$f
|
8156
8156
|
});
|
8157
8157
|
|
8158
|
-
const componentName$
|
8158
|
+
const componentName$i = getComponentName('button-selection-group-item');
|
8159
8159
|
|
8160
8160
|
class RawSelectItem extends createBaseClass({
|
8161
|
-
componentName: componentName$
|
8161
|
+
componentName: componentName$i,
|
8162
8162
|
baseSelector: ':host > descope-button',
|
8163
8163
|
}) {
|
8164
8164
|
get size() {
|
@@ -8265,39 +8265,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
8265
8265
|
componentNameValidationMixin
|
8266
8266
|
)(RawSelectItem);
|
8267
8267
|
|
8268
|
-
const globalRefs$
|
8268
|
+
const globalRefs$b = getThemeRefs(globals);
|
8269
8269
|
|
8270
|
-
const vars$
|
8270
|
+
const vars$e = ButtonSelectionGroupItemClass.cssVarList;
|
8271
8271
|
|
8272
8272
|
const buttonSelectionGroupItem = {
|
8273
|
-
[vars$
|
8274
|
-
[vars$
|
8275
|
-
[vars$
|
8276
|
-
[vars$
|
8277
|
-
[vars$
|
8278
|
-
[vars$
|
8279
|
-
[vars$
|
8280
|
-
[vars$
|
8273
|
+
[vars$e.hostDirection]: 'inherit',
|
8274
|
+
[vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
|
8275
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
|
8276
|
+
[vars$e.borderColor]: globalRefs$b.colors.surface.light,
|
8277
|
+
[vars$e.borderStyle]: 'solid',
|
8278
|
+
[vars$e.borderRadius]: globalRefs$b.radius.sm,
|
8279
|
+
[vars$e.outlineColor]: 'transparent',
|
8280
|
+
[vars$e.borderWidth]: globalRefs$b.border.xs,
|
8281
8281
|
|
8282
8282
|
_hover: {
|
8283
|
-
[vars$
|
8283
|
+
[vars$e.backgroundColor]: globalRefs$b.colors.surface.highlight,
|
8284
8284
|
},
|
8285
8285
|
|
8286
8286
|
_focused: {
|
8287
|
-
[vars$
|
8287
|
+
[vars$e.outlineColor]: globalRefs$b.colors.surface.light,
|
8288
8288
|
},
|
8289
8289
|
|
8290
8290
|
_selected: {
|
8291
|
-
[vars$
|
8292
|
-
[vars$
|
8293
|
-
[vars$
|
8291
|
+
[vars$e.borderColor]: globalRefs$b.colors.surface.contrast,
|
8292
|
+
[vars$e.backgroundColor]: globalRefs$b.colors.surface.contrast,
|
8293
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.surface.main,
|
8294
8294
|
},
|
8295
8295
|
};
|
8296
8296
|
|
8297
8297
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8298
8298
|
__proto__: null,
|
8299
8299
|
default: buttonSelectionGroupItem,
|
8300
|
-
vars: vars$
|
8300
|
+
vars: vars$e
|
8301
8301
|
});
|
8302
8302
|
|
8303
8303
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
@@ -8396,10 +8396,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
8396
8396
|
return BaseButtonSelectionGroupInternalClass;
|
8397
8397
|
};
|
8398
8398
|
|
8399
|
-
const componentName$
|
8399
|
+
const componentName$h = getComponentName('button-selection-group-internal');
|
8400
8400
|
|
8401
8401
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8402
|
-
componentName$
|
8402
|
+
componentName$h
|
8403
8403
|
) {
|
8404
8404
|
getSelectedNode() {
|
8405
8405
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -8555,7 +8555,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
8555
8555
|
}
|
8556
8556
|
};
|
8557
8557
|
|
8558
|
-
const { host: host$
|
8558
|
+
const { host: host$7, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
8559
8559
|
host: { selector: () => ':host' },
|
8560
8560
|
label: { selector: '::part(label)' },
|
8561
8561
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -8564,9 +8564,9 @@ const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
8564
8564
|
};
|
8565
8565
|
|
8566
8566
|
const buttonSelectionGroupMappings = {
|
8567
|
-
hostWidth: { ...host$
|
8568
|
-
hostDirection: { ...host$
|
8569
|
-
fontFamily: host$
|
8567
|
+
hostWidth: { ...host$7, property: 'width' },
|
8568
|
+
hostDirection: { ...host$7, property: 'direction' },
|
8569
|
+
fontFamily: host$7,
|
8570
8570
|
labelTextColor: [
|
8571
8571
|
{ ...label$1, property: 'color' },
|
8572
8572
|
{ ...requiredIndicator$1, property: 'color' },
|
@@ -8631,7 +8631,7 @@ const buttonSelectionGroupStyles = `
|
|
8631
8631
|
${resetInputCursor('vaadin-text-field')}
|
8632
8632
|
`;
|
8633
8633
|
|
8634
|
-
const componentName$
|
8634
|
+
const componentName$g = getComponentName('button-selection-group');
|
8635
8635
|
|
8636
8636
|
const buttonSelectionGroupMixin = (superclass) =>
|
8637
8637
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -8640,19 +8640,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
8640
8640
|
const template = document.createElement('template');
|
8641
8641
|
|
8642
8642
|
template.innerHTML = `
|
8643
|
-
<${componentName$
|
8643
|
+
<${componentName$h}
|
8644
8644
|
name="button-selection-group"
|
8645
8645
|
slot="input"
|
8646
8646
|
tabindex="-1"
|
8647
8647
|
part="internal-component"
|
8648
8648
|
>
|
8649
8649
|
<slot></slot>
|
8650
|
-
</${componentName$
|
8650
|
+
</${componentName$h}>
|
8651
8651
|
`;
|
8652
8652
|
|
8653
8653
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8654
8654
|
|
8655
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8655
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
8656
8656
|
|
8657
8657
|
forwardAttrs(this, this.inputElement, {
|
8658
8658
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -8677,11 +8677,11 @@ const ButtonSelectionGroupClass = compose(
|
|
8677
8677
|
wrappedEleName: 'vaadin-text-field',
|
8678
8678
|
style: () => buttonSelectionGroupStyles,
|
8679
8679
|
excludeAttrsSync: ['tabindex'],
|
8680
|
-
componentName: componentName$
|
8680
|
+
componentName: componentName$g,
|
8681
8681
|
})
|
8682
8682
|
);
|
8683
8683
|
|
8684
|
-
const globalRefs$
|
8684
|
+
const globalRefs$a = getThemeRefs(globals);
|
8685
8685
|
|
8686
8686
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
8687
8687
|
[vars.hostDirection]: refs.direction,
|
@@ -8689,26 +8689,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8689
8689
|
[vars.labelTextColor]: refs.labelTextColor,
|
8690
8690
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
8691
8691
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
8692
|
-
[vars.itemsSpacing]: globalRefs$
|
8692
|
+
[vars.itemsSpacing]: globalRefs$a.spacing.sm,
|
8693
8693
|
[vars.hostWidth]: refs.width,
|
8694
8694
|
});
|
8695
8695
|
|
8696
|
-
const vars$
|
8696
|
+
const vars$d = ButtonSelectionGroupClass.cssVarList;
|
8697
8697
|
|
8698
8698
|
const buttonSelectionGroup = {
|
8699
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
8699
|
+
...createBaseButtonSelectionGroupMappings(vars$d),
|
8700
8700
|
};
|
8701
8701
|
|
8702
8702
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8703
8703
|
__proto__: null,
|
8704
8704
|
default: buttonSelectionGroup,
|
8705
|
-
vars: vars$
|
8705
|
+
vars: vars$d
|
8706
8706
|
});
|
8707
8707
|
|
8708
|
-
const componentName$
|
8708
|
+
const componentName$f = getComponentName('button-multi-selection-group-internal');
|
8709
8709
|
|
8710
8710
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8711
|
-
componentName$
|
8711
|
+
componentName$f
|
8712
8712
|
) {
|
8713
8713
|
#getSelectedNodes() {
|
8714
8714
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -8811,7 +8811,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
8811
8811
|
}
|
8812
8812
|
}
|
8813
8813
|
|
8814
|
-
const componentName$
|
8814
|
+
const componentName$e = getComponentName('button-multi-selection-group');
|
8815
8815
|
|
8816
8816
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
8817
8817
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -8820,19 +8820,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8820
8820
|
const template = document.createElement('template');
|
8821
8821
|
|
8822
8822
|
template.innerHTML = `
|
8823
|
-
<${componentName$
|
8823
|
+
<${componentName$f}
|
8824
8824
|
name="button-selection-group"
|
8825
8825
|
slot="input"
|
8826
8826
|
tabindex="-1"
|
8827
8827
|
part="internal-component"
|
8828
8828
|
>
|
8829
8829
|
<slot></slot>
|
8830
|
-
</${componentName$
|
8830
|
+
</${componentName$f}>
|
8831
8831
|
`;
|
8832
8832
|
|
8833
8833
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8834
8834
|
|
8835
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8835
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$f);
|
8836
8836
|
|
8837
8837
|
forwardAttrs(this, this.inputElement, {
|
8838
8838
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -8857,23 +8857,23 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
8857
8857
|
wrappedEleName: 'vaadin-text-field',
|
8858
8858
|
style: () => buttonSelectionGroupStyles,
|
8859
8859
|
excludeAttrsSync: ['tabindex'],
|
8860
|
-
componentName: componentName$
|
8860
|
+
componentName: componentName$e,
|
8861
8861
|
})
|
8862
8862
|
);
|
8863
8863
|
|
8864
|
-
const vars$
|
8864
|
+
const vars$c = ButtonMultiSelectionGroupClass.cssVarList;
|
8865
8865
|
|
8866
8866
|
const buttonMultiSelectionGroup = {
|
8867
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
8867
|
+
...createBaseButtonSelectionGroupMappings(vars$c),
|
8868
8868
|
};
|
8869
8869
|
|
8870
8870
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8871
8871
|
__proto__: null,
|
8872
8872
|
default: buttonMultiSelectionGroup,
|
8873
|
-
vars: vars$
|
8873
|
+
vars: vars$c
|
8874
8874
|
});
|
8875
8875
|
|
8876
|
-
const componentName$
|
8876
|
+
const componentName$d = getComponentName('modal');
|
8877
8877
|
|
8878
8878
|
const customMixin$2 = (superclass) =>
|
8879
8879
|
class ModalMixinClass extends superclass {
|
@@ -8972,28 +8972,28 @@ const ModalClass = compose(
|
|
8972
8972
|
wrappedEleName: 'vaadin-dialog',
|
8973
8973
|
style: () => ``,
|
8974
8974
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8975
|
-
componentName: componentName$
|
8975
|
+
componentName: componentName$d,
|
8976
8976
|
})
|
8977
8977
|
);
|
8978
8978
|
|
8979
|
-
const globalRefs$
|
8979
|
+
const globalRefs$9 = getThemeRefs(globals);
|
8980
8980
|
|
8981
8981
|
const compVars$1 = ModalClass.cssVarList;
|
8982
8982
|
|
8983
8983
|
const modal = {
|
8984
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
8985
|
-
[compVars$1.overlayShadow]: globalRefs$
|
8984
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$9.colors.surface.main,
|
8985
|
+
[compVars$1.overlayShadow]: globalRefs$9.shadow.wide['2xl'],
|
8986
8986
|
[compVars$1.overlayWidth]: '540px',
|
8987
8987
|
};
|
8988
8988
|
|
8989
|
-
const vars$
|
8989
|
+
const vars$b = {
|
8990
8990
|
...compVars$1,
|
8991
8991
|
};
|
8992
8992
|
|
8993
8993
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8994
8994
|
__proto__: null,
|
8995
8995
|
default: modal,
|
8996
|
-
vars: vars$
|
8996
|
+
vars: vars$b
|
8997
8997
|
});
|
8998
8998
|
|
8999
8999
|
const isValidDataType = (data) => {
|
@@ -9006,7 +9006,7 @@ const isValidDataType = (data) => {
|
|
9006
9006
|
return isValid;
|
9007
9007
|
};
|
9008
9008
|
|
9009
|
-
const componentName$
|
9009
|
+
const componentName$c = getComponentName('grid');
|
9010
9010
|
|
9011
9011
|
const GridMixin = (superclass) =>
|
9012
9012
|
class GridMixinClass extends superclass {
|
@@ -9166,7 +9166,7 @@ const GridMixin = (superclass) =>
|
|
9166
9166
|
};
|
9167
9167
|
|
9168
9168
|
const {
|
9169
|
-
host: host$
|
9169
|
+
host: host$6,
|
9170
9170
|
headerRow,
|
9171
9171
|
headerRowCell,
|
9172
9172
|
contentRow,
|
@@ -9201,15 +9201,15 @@ const GridClass = compose(
|
|
9201
9201
|
fontWeight: { ...contentRow },
|
9202
9202
|
valueTextColor: { ...contentRow, property: 'color' },
|
9203
9203
|
backgroundColor: [
|
9204
|
-
{ ...host$
|
9204
|
+
{ ...host$6, property: 'background-color' },
|
9205
9205
|
{ ...contentRow, property: 'background-color' },
|
9206
9206
|
],
|
9207
9207
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
9208
9208
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
9209
|
-
borderColor: { ...host$
|
9210
|
-
borderWidth: { ...host$
|
9211
|
-
borderStyle: { ...host$
|
9212
|
-
borderRadius: { ...host$
|
9209
|
+
borderColor: { ...host$6, property: 'border-color' },
|
9210
|
+
borderWidth: { ...host$6, property: 'border-width' },
|
9211
|
+
borderStyle: { ...host$6, property: 'border-style' },
|
9212
|
+
borderRadius: { ...host$6, property: 'border-radius' },
|
9213
9213
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
9214
9214
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
9215
9215
|
separatorColor: [
|
@@ -9242,40 +9242,40 @@ const GridClass = compose(
|
|
9242
9242
|
}
|
9243
9243
|
`,
|
9244
9244
|
excludeAttrsSync: ['columns', 'tabindex'],
|
9245
|
-
componentName: componentName$
|
9245
|
+
componentName: componentName$c,
|
9246
9246
|
})
|
9247
9247
|
);
|
9248
9248
|
|
9249
|
-
const globalRefs$
|
9250
|
-
const vars$
|
9249
|
+
const globalRefs$8 = getThemeRefs(globals);
|
9250
|
+
const vars$a = GridClass.cssVarList;
|
9251
9251
|
|
9252
9252
|
const grid = {
|
9253
|
-
[vars$
|
9254
|
-
[vars$
|
9255
|
-
[vars$
|
9256
|
-
[vars$
|
9257
|
-
[vars$
|
9253
|
+
[vars$a.hostWidth]: '100%',
|
9254
|
+
[vars$a.hostHeight]: '100%',
|
9255
|
+
[vars$a.hostMinHeight]: '400px',
|
9256
|
+
[vars$a.fontWeight]: '400',
|
9257
|
+
[vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
|
9258
9258
|
|
9259
|
-
[vars$
|
9260
|
-
[vars$
|
9259
|
+
[vars$a.fontSize]: refs.fontSize,
|
9260
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
9261
9261
|
|
9262
|
-
[vars$
|
9263
|
-
[vars$
|
9264
|
-
[vars$
|
9262
|
+
[vars$a.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
|
9263
|
+
[vars$a.activeSortIndicator]: globalRefs$8.colors.surface.dark,
|
9264
|
+
[vars$a.resizeHandleColor]: globalRefs$8.colors.surface.light,
|
9265
9265
|
|
9266
|
-
[vars$
|
9267
|
-
[vars$
|
9268
|
-
[vars$
|
9269
|
-
[vars$
|
9266
|
+
[vars$a.borderWidth]: refs.borderWidth,
|
9267
|
+
[vars$a.borderStyle]: refs.borderStyle,
|
9268
|
+
[vars$a.borderRadius]: refs.borderRadius,
|
9269
|
+
[vars$a.borderColor]: 'transparent',
|
9270
9270
|
|
9271
|
-
[vars$
|
9272
|
-
[vars$
|
9271
|
+
[vars$a.headerRowTextColor]: globalRefs$8.colors.surface.dark,
|
9272
|
+
[vars$a.separatorColor]: globalRefs$8.colors.surface.light,
|
9273
9273
|
|
9274
|
-
[vars$
|
9275
|
-
[vars$
|
9274
|
+
[vars$a.valueTextColor]: globalRefs$8.colors.surface.contrast,
|
9275
|
+
[vars$a.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
|
9276
9276
|
|
9277
9277
|
_bordered: {
|
9278
|
-
[vars$
|
9278
|
+
[vars$a.borderColor]: refs.borderColor,
|
9279
9279
|
},
|
9280
9280
|
};
|
9281
9281
|
|
@@ -9283,10 +9283,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
9283
9283
|
__proto__: null,
|
9284
9284
|
default: grid,
|
9285
9285
|
grid: grid,
|
9286
|
-
vars: vars$
|
9286
|
+
vars: vars$a
|
9287
9287
|
});
|
9288
9288
|
|
9289
|
-
const componentName$
|
9289
|
+
const componentName$b = getComponentName('notification-card');
|
9290
9290
|
|
9291
9291
|
const notificationCardMixin = (superclass) =>
|
9292
9292
|
class NotificationCardMixinClass extends superclass {
|
@@ -9394,54 +9394,54 @@ const NotificationCardClass = compose(
|
|
9394
9394
|
}
|
9395
9395
|
`,
|
9396
9396
|
excludeAttrsSync: ['tabindex'],
|
9397
|
-
componentName: componentName$
|
9397
|
+
componentName: componentName$b,
|
9398
9398
|
})
|
9399
9399
|
);
|
9400
9400
|
|
9401
|
-
const globalRefs$
|
9402
|
-
const vars$
|
9401
|
+
const globalRefs$7 = getThemeRefs(globals);
|
9402
|
+
const vars$9 = NotificationCardClass.cssVarList;
|
9403
9403
|
|
9404
9404
|
const shadowColor = '#00000020';
|
9405
9405
|
|
9406
9406
|
const notification = {
|
9407
|
-
[vars$
|
9408
|
-
[vars$
|
9409
|
-
[vars$
|
9410
|
-
[vars$
|
9411
|
-
[vars$
|
9412
|
-
[vars$
|
9413
|
-
[vars$
|
9414
|
-
[vars$
|
9415
|
-
[vars$
|
9407
|
+
[vars$9.hostMinWidth]: '415px',
|
9408
|
+
[vars$9.fontFamily]: globalRefs$7.fonts.font1.family,
|
9409
|
+
[vars$9.fontSize]: globalRefs$7.typography.body1.size,
|
9410
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
9411
|
+
[vars$9.textColor]: globalRefs$7.colors.surface.contrast,
|
9412
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
|
9413
|
+
[vars$9.verticalPadding]: '0.625em',
|
9414
|
+
[vars$9.horizontalPadding]: '1.5em',
|
9415
|
+
[vars$9.borderRadius]: globalRefs$7.radius.xs,
|
9416
9416
|
|
9417
9417
|
_bordered: {
|
9418
|
-
[vars$
|
9419
|
-
[vars$
|
9420
|
-
[vars$
|
9418
|
+
[vars$9.borderWidth]: globalRefs$7.border.sm,
|
9419
|
+
[vars$9.borderStyle]: 'solid',
|
9420
|
+
[vars$9.borderColor]: 'transparent',
|
9421
9421
|
},
|
9422
9422
|
|
9423
9423
|
size: {
|
9424
|
-
xs: { [vars$
|
9425
|
-
sm: { [vars$
|
9426
|
-
md: { [vars$
|
9427
|
-
lg: { [vars$
|
9424
|
+
xs: { [vars$9.fontSize]: '12px' },
|
9425
|
+
sm: { [vars$9.fontSize]: '14px' },
|
9426
|
+
md: { [vars$9.fontSize]: '16px' },
|
9427
|
+
lg: { [vars$9.fontSize]: '18px' },
|
9428
9428
|
},
|
9429
9429
|
|
9430
9430
|
mode: {
|
9431
9431
|
primary: {
|
9432
|
-
[vars$
|
9433
|
-
[vars$
|
9434
|
-
[vars$
|
9432
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.primary.main,
|
9433
|
+
[vars$9.textColor]: globalRefs$7.colors.primary.contrast,
|
9434
|
+
[vars$9.borderColor]: globalRefs$7.colors.primary.light,
|
9435
9435
|
},
|
9436
9436
|
success: {
|
9437
|
-
[vars$
|
9438
|
-
[vars$
|
9439
|
-
[vars$
|
9437
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.success.main,
|
9438
|
+
[vars$9.textColor]: globalRefs$7.colors.success.contrast,
|
9439
|
+
[vars$9.borderColor]: globalRefs$7.colors.success.light,
|
9440
9440
|
},
|
9441
9441
|
error: {
|
9442
|
-
[vars$
|
9443
|
-
[vars$
|
9444
|
-
[vars$
|
9442
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.error.main,
|
9443
|
+
[vars$9.textColor]: globalRefs$7.colors.error.contrast,
|
9444
|
+
[vars$9.borderColor]: globalRefs$7.colors.error.light,
|
9445
9445
|
},
|
9446
9446
|
},
|
9447
9447
|
};
|
@@ -9449,10 +9449,10 @@ const notification = {
|
|
9449
9449
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
9450
9450
|
__proto__: null,
|
9451
9451
|
default: notification,
|
9452
|
-
vars: vars$
|
9452
|
+
vars: vars$9
|
9453
9453
|
});
|
9454
9454
|
|
9455
|
-
const componentName$
|
9455
|
+
const componentName$a = getComponentName('multi-select-combo-box');
|
9456
9456
|
|
9457
9457
|
const multiSelectComboBoxMixin = (superclass) =>
|
9458
9458
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -9840,7 +9840,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
9840
9840
|
};
|
9841
9841
|
|
9842
9842
|
const {
|
9843
|
-
host: host$
|
9843
|
+
host: host$5,
|
9844
9844
|
inputField,
|
9845
9845
|
inputElement,
|
9846
9846
|
placeholder,
|
@@ -9878,10 +9878,10 @@ const {
|
|
9878
9878
|
const MultiSelectComboBoxClass = compose(
|
9879
9879
|
createStyleMixin({
|
9880
9880
|
mappings: {
|
9881
|
-
hostWidth: { ...host$
|
9882
|
-
hostDirection: { ...host$
|
9881
|
+
hostWidth: { ...host$5, property: 'width' },
|
9882
|
+
hostDirection: { ...host$5, property: 'direction' },
|
9883
9883
|
// we apply font-size also on the host so we can set its width with em
|
9884
|
-
fontSize: [{}, host$
|
9884
|
+
fontSize: [{}, host$5],
|
9885
9885
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
9886
9886
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
9887
9887
|
labelTextColor: [
|
@@ -10056,73 +10056,73 @@ const MultiSelectComboBoxClass = compose(
|
|
10056
10056
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
10057
10057
|
// tries to override it, causing us to lose the user set placeholder.
|
10058
10058
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
10059
|
-
componentName: componentName$
|
10059
|
+
componentName: componentName$a,
|
10060
10060
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
10061
10061
|
})
|
10062
10062
|
);
|
10063
10063
|
|
10064
|
-
const globalRefs$
|
10065
|
-
const vars$
|
10064
|
+
const globalRefs$6 = getThemeRefs(globals);
|
10065
|
+
const vars$8 = MultiSelectComboBoxClass.cssVarList;
|
10066
10066
|
|
10067
10067
|
const multiSelectComboBox = {
|
10068
|
-
[vars$
|
10069
|
-
[vars$
|
10070
|
-
[vars$
|
10071
|
-
[vars$
|
10072
|
-
[vars$
|
10073
|
-
[vars$
|
10074
|
-
[vars$
|
10075
|
-
[vars$
|
10076
|
-
[vars$
|
10077
|
-
[vars$
|
10078
|
-
[vars$
|
10079
|
-
[vars$
|
10080
|
-
[vars$
|
10081
|
-
[vars$
|
10082
|
-
[vars$
|
10083
|
-
[vars$
|
10084
|
-
[vars$
|
10085
|
-
[vars$
|
10086
|
-
[vars$
|
10087
|
-
[vars$
|
10088
|
-
[vars$
|
10089
|
-
[vars$
|
10090
|
-
[vars$
|
10091
|
-
[vars$
|
10092
|
-
[vars$
|
10093
|
-
[vars$
|
10094
|
-
[vars$
|
10095
|
-
[vars$
|
10096
|
-
[vars$
|
10097
|
-
[vars$
|
10068
|
+
[vars$8.hostWidth]: refs.width,
|
10069
|
+
[vars$8.hostDirection]: refs.direction,
|
10070
|
+
[vars$8.fontSize]: refs.fontSize,
|
10071
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
10072
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
10073
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
10074
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
10075
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
10076
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
10077
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
10078
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
10079
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
10080
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
10081
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
10082
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
10083
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
10084
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10085
|
+
[vars$8.inputBackgroundColor]: refs.backgroundColor,
|
10086
|
+
[vars$8.inputHorizontalPadding]: refs.horizontalPadding,
|
10087
|
+
[vars$8.inputVerticalPadding]: refs.verticalPadding,
|
10088
|
+
[vars$8.inputHeight]: refs.inputHeight,
|
10089
|
+
[vars$8.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
|
10090
|
+
[vars$8.inputDropdownButtonCursor]: 'pointer',
|
10091
|
+
[vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
|
10092
|
+
[vars$8.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
|
10093
|
+
[vars$8.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
|
10094
|
+
[vars$8.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
|
10095
|
+
[vars$8.chipFontSize]: refs.chipFontSize,
|
10096
|
+
[vars$8.chipTextColor]: globalRefs$6.colors.surface.contrast,
|
10097
|
+
[vars$8.chipBackgroundColor]: globalRefs$6.colors.surface.light,
|
10098
10098
|
|
10099
10099
|
_readonly: {
|
10100
|
-
[vars$
|
10100
|
+
[vars$8.inputDropdownButtonCursor]: 'default',
|
10101
10101
|
},
|
10102
10102
|
|
10103
10103
|
// Overlay theme exposed via the component:
|
10104
|
-
[vars$
|
10105
|
-
[vars$
|
10106
|
-
[vars$
|
10107
|
-
[vars$
|
10108
|
-
[vars$
|
10109
|
-
[vars$
|
10104
|
+
[vars$8.overlayFontSize]: refs.fontSize,
|
10105
|
+
[vars$8.overlayFontFamily]: refs.fontFamily,
|
10106
|
+
[vars$8.overlayCursor]: 'pointer',
|
10107
|
+
[vars$8.overlayItemBoxShadow]: 'none',
|
10108
|
+
[vars$8.overlayBackground]: refs.backgroundColor,
|
10109
|
+
[vars$8.overlayTextColor]: refs.valueTextColor,
|
10110
10110
|
|
10111
10111
|
// Overlay direct theme:
|
10112
|
-
[vars$
|
10113
|
-
[vars$
|
10112
|
+
[vars$8.overlay.minHeight]: '400px',
|
10113
|
+
[vars$8.overlay.margin]: '0',
|
10114
10114
|
};
|
10115
10115
|
|
10116
10116
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
10117
10117
|
__proto__: null,
|
10118
10118
|
default: multiSelectComboBox,
|
10119
10119
|
multiSelectComboBox: multiSelectComboBox,
|
10120
|
-
vars: vars$
|
10120
|
+
vars: vars$8
|
10121
10121
|
});
|
10122
10122
|
|
10123
|
-
const componentName$
|
10123
|
+
const componentName$9 = getComponentName('badge');
|
10124
10124
|
|
10125
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
10125
|
+
class RawBadge extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
|
10126
10126
|
constructor() {
|
10127
10127
|
super();
|
10128
10128
|
|
@@ -10173,79 +10173,79 @@ const BadgeClass = compose(
|
|
10173
10173
|
componentNameValidationMixin
|
10174
10174
|
)(RawBadge);
|
10175
10175
|
|
10176
|
-
const globalRefs$
|
10177
|
-
const vars$
|
10176
|
+
const globalRefs$5 = getThemeRefs(globals);
|
10177
|
+
const vars$7 = BadgeClass.cssVarList;
|
10178
10178
|
|
10179
|
-
const badge$
|
10180
|
-
[vars$
|
10181
|
-
[vars$
|
10179
|
+
const badge$2 = {
|
10180
|
+
[vars$7.hostWidth]: 'fit-content',
|
10181
|
+
[vars$7.hostDirection]: globalRefs$5.direction,
|
10182
10182
|
|
10183
|
-
[vars$
|
10183
|
+
[vars$7.textAlign]: 'center',
|
10184
10184
|
|
10185
|
-
[vars$
|
10186
|
-
[vars$
|
10185
|
+
[vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
|
10186
|
+
[vars$7.fontWeight]: '400',
|
10187
10187
|
|
10188
|
-
[vars$
|
10189
|
-
[vars$
|
10188
|
+
[vars$7.verticalPadding]: '0.25em',
|
10189
|
+
[vars$7.horizontalPadding]: '0.5em',
|
10190
10190
|
|
10191
|
-
[vars$
|
10192
|
-
[vars$
|
10193
|
-
[vars$
|
10194
|
-
[vars$
|
10191
|
+
[vars$7.borderWidth]: globalRefs$5.border.xs,
|
10192
|
+
[vars$7.borderRadius]: globalRefs$5.radius.xs,
|
10193
|
+
[vars$7.borderColor]: 'transparent',
|
10194
|
+
[vars$7.borderStyle]: 'solid',
|
10195
10195
|
|
10196
10196
|
_fullWidth: {
|
10197
|
-
[vars$
|
10197
|
+
[vars$7.hostWidth]: '100%',
|
10198
10198
|
},
|
10199
10199
|
|
10200
10200
|
size: {
|
10201
|
-
xs: { [vars$
|
10202
|
-
sm: { [vars$
|
10203
|
-
md: { [vars$
|
10204
|
-
lg: { [vars$
|
10201
|
+
xs: { [vars$7.fontSize]: '12px' },
|
10202
|
+
sm: { [vars$7.fontSize]: '14px' },
|
10203
|
+
md: { [vars$7.fontSize]: '16px' },
|
10204
|
+
lg: { [vars$7.fontSize]: '18px' },
|
10205
10205
|
},
|
10206
10206
|
|
10207
10207
|
mode: {
|
10208
10208
|
default: {
|
10209
|
-
[vars$
|
10209
|
+
[vars$7.textColor]: globalRefs$5.colors.surface.dark,
|
10210
10210
|
_bordered: {
|
10211
|
-
[vars$
|
10211
|
+
[vars$7.borderColor]: globalRefs$5.colors.surface.light,
|
10212
10212
|
},
|
10213
10213
|
},
|
10214
10214
|
primary: {
|
10215
|
-
[vars$
|
10215
|
+
[vars$7.textColor]: globalRefs$5.colors.primary.main,
|
10216
10216
|
_bordered: {
|
10217
|
-
[vars$
|
10217
|
+
[vars$7.borderColor]: globalRefs$5.colors.primary.light,
|
10218
10218
|
},
|
10219
10219
|
},
|
10220
10220
|
secondary: {
|
10221
|
-
[vars$
|
10221
|
+
[vars$7.textColor]: globalRefs$5.colors.secondary.main,
|
10222
10222
|
_bordered: {
|
10223
|
-
[vars$
|
10223
|
+
[vars$7.borderColor]: globalRefs$5.colors.secondary.light,
|
10224
10224
|
},
|
10225
10225
|
},
|
10226
10226
|
error: {
|
10227
|
-
[vars$
|
10227
|
+
[vars$7.textColor]: globalRefs$5.colors.error.main,
|
10228
10228
|
_bordered: {
|
10229
|
-
[vars$
|
10229
|
+
[vars$7.borderColor]: globalRefs$5.colors.error.light,
|
10230
10230
|
},
|
10231
10231
|
},
|
10232
10232
|
success: {
|
10233
|
-
[vars$
|
10233
|
+
[vars$7.textColor]: globalRefs$5.colors.success.main,
|
10234
10234
|
_bordered: {
|
10235
|
-
[vars$
|
10235
|
+
[vars$7.borderColor]: globalRefs$5.colors.success.light,
|
10236
10236
|
},
|
10237
10237
|
},
|
10238
10238
|
},
|
10239
10239
|
};
|
10240
10240
|
|
10241
|
-
var badge$
|
10241
|
+
var badge$3 = /*#__PURE__*/Object.freeze({
|
10242
10242
|
__proto__: null,
|
10243
|
-
default: badge$
|
10244
|
-
vars: vars$
|
10243
|
+
default: badge$2,
|
10244
|
+
vars: vars$7
|
10245
10245
|
});
|
10246
10246
|
|
10247
|
-
const componentName$
|
10248
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
10247
|
+
const componentName$8 = getComponentName('avatar');
|
10248
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > .wrapper' }) {
|
10249
10249
|
constructor() {
|
10250
10250
|
super();
|
10251
10251
|
|
@@ -10320,7 +10320,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSe
|
|
10320
10320
|
}
|
10321
10321
|
}
|
10322
10322
|
|
10323
|
-
const { host: host$
|
10323
|
+
const { host: host$4, editableBadge, avatar: avatar$2 } = {
|
10324
10324
|
host: { selector: () => ':host' },
|
10325
10325
|
editableBadge: { selector: '> .editableBadge' },
|
10326
10326
|
avatar: { selector: 'vaadin-avatar' },
|
@@ -10329,10 +10329,10 @@ const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
|
10329
10329
|
const AvatarClass = compose(
|
10330
10330
|
createStyleMixin({
|
10331
10331
|
mappings: {
|
10332
|
-
hostWidth: { ...host$
|
10333
|
-
hostHeight: { ...host$
|
10334
|
-
cursor: [avatar$2, host$
|
10335
|
-
hostDirection: { ...host$
|
10332
|
+
hostWidth: { ...host$4, property: 'width' },
|
10333
|
+
hostHeight: { ...host$4, property: 'height' },
|
10334
|
+
cursor: [avatar$2, host$4],
|
10335
|
+
hostDirection: { ...host$4, property: 'direction' },
|
10336
10336
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
10337
10337
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
10338
10338
|
editableIconColor: { ...editableBadge, property: 'color' },
|
@@ -10344,16 +10344,16 @@ const AvatarClass = compose(
|
|
10344
10344
|
componentNameValidationMixin
|
10345
10345
|
)(RawAvatar);
|
10346
10346
|
|
10347
|
-
const globalRefs$
|
10347
|
+
const globalRefs$4 = getThemeRefs(globals);
|
10348
10348
|
const compVars = AvatarClass.cssVarList;
|
10349
10349
|
|
10350
10350
|
const avatar = {
|
10351
|
-
[compVars.hostDirection]: globalRefs$
|
10352
|
-
[compVars.editableIconColor]: globalRefs$
|
10353
|
-
[compVars.editableBorderColor]: globalRefs$
|
10354
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
10355
|
-
[compVars.avatarTextColor]: globalRefs$
|
10356
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
10351
|
+
[compVars.hostDirection]: globalRefs$4.direction,
|
10352
|
+
[compVars.editableIconColor]: globalRefs$4.colors.surface.dark,
|
10353
|
+
[compVars.editableBorderColor]: globalRefs$4.colors.surface.dark,
|
10354
|
+
[compVars.editableBackgroundColor]: globalRefs$4.colors.surface.main,
|
10355
|
+
[compVars.avatarTextColor]: globalRefs$4.colors.surface.main,
|
10356
|
+
[compVars.avatarBackgroundColor]: globalRefs$4.colors.surface.dark,
|
10357
10357
|
|
10358
10358
|
_editable: {
|
10359
10359
|
[compVars.cursor]: 'pointer',
|
@@ -10379,21 +10379,21 @@ const avatar = {
|
|
10379
10379
|
},
|
10380
10380
|
};
|
10381
10381
|
|
10382
|
-
const vars$
|
10382
|
+
const vars$6 = {
|
10383
10383
|
...compVars,
|
10384
10384
|
};
|
10385
10385
|
|
10386
10386
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
10387
10387
|
__proto__: null,
|
10388
10388
|
default: avatar,
|
10389
|
-
vars: vars$
|
10389
|
+
vars: vars$6
|
10390
10390
|
});
|
10391
10391
|
|
10392
|
-
const componentName$
|
10392
|
+
const componentName$7 = getComponentName('mappings-field-internal');
|
10393
10393
|
|
10394
|
-
createBaseInputClass({ componentName: componentName$
|
10394
|
+
createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
10395
10395
|
|
10396
|
-
const componentName$
|
10396
|
+
const componentName$6 = getComponentName('mappings-field');
|
10397
10397
|
|
10398
10398
|
const customMixin$1 = (superclass) =>
|
10399
10399
|
class MappingsFieldMixinClass extends superclass {
|
@@ -10422,14 +10422,14 @@ const customMixin$1 = (superclass) =>
|
|
10422
10422
|
const template = document.createElement('template');
|
10423
10423
|
|
10424
10424
|
template.innerHTML = `
|
10425
|
-
<${componentName$
|
10425
|
+
<${componentName$7}
|
10426
10426
|
tabindex="-1"
|
10427
|
-
></${componentName$
|
10427
|
+
></${componentName$7}>
|
10428
10428
|
`;
|
10429
10429
|
|
10430
10430
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
10431
10431
|
|
10432
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
10432
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$7);
|
10433
10433
|
|
10434
10434
|
forwardAttrs(this, this.inputElement, {
|
10435
10435
|
includeAttrs: [
|
@@ -10456,7 +10456,7 @@ const customMixin$1 = (superclass) =>
|
|
10456
10456
|
};
|
10457
10457
|
|
10458
10458
|
const {
|
10459
|
-
host: host$
|
10459
|
+
host: host$3,
|
10460
10460
|
helperText,
|
10461
10461
|
errorMessage,
|
10462
10462
|
mappingItem,
|
@@ -10484,10 +10484,10 @@ const {
|
|
10484
10484
|
const MappingsFieldClass = compose(
|
10485
10485
|
createStyleMixin({
|
10486
10486
|
mappings: {
|
10487
|
-
hostWidth: { ...host$
|
10488
|
-
hostDirection: { ...host$
|
10487
|
+
hostWidth: { ...host$3, property: 'width' },
|
10488
|
+
hostDirection: { ...host$3, property: 'direction' },
|
10489
10489
|
// we apply font-size also on the host so we can set its width with em
|
10490
|
-
fontSize: [{}, host$
|
10490
|
+
fontSize: [{}, host$3, { ...separator, property: 'margin-top' }],
|
10491
10491
|
fontFamily: [helperText, errorMessage, labels],
|
10492
10492
|
separatorFontSize: { ...separator, property: 'font-size' },
|
10493
10493
|
labelsFontSize: { ...labelsText, property: 'font-size' },
|
@@ -10558,51 +10558,47 @@ const MappingsFieldClass = compose(
|
|
10558
10558
|
'options',
|
10559
10559
|
'error-message',
|
10560
10560
|
],
|
10561
|
-
componentName: componentName$
|
10561
|
+
componentName: componentName$6,
|
10562
10562
|
})
|
10563
10563
|
);
|
10564
10564
|
|
10565
|
-
const globalRefs$
|
10565
|
+
const globalRefs$3 = getThemeRefs(globals);
|
10566
10566
|
|
10567
|
-
const vars$
|
10567
|
+
const vars$5 = MappingsFieldClass.cssVarList;
|
10568
10568
|
|
10569
10569
|
const mappingsField = {
|
10570
|
-
[vars$
|
10571
|
-
[vars$
|
10572
|
-
[vars$
|
10573
|
-
[vars$
|
10574
|
-
[vars$
|
10575
|
-
[vars$
|
10576
|
-
[vars$
|
10577
|
-
[vars$
|
10578
|
-
[vars$
|
10579
|
-
[vars$
|
10570
|
+
[vars$5.hostWidth]: refs.width,
|
10571
|
+
[vars$5.hostDirection]: refs.direction,
|
10572
|
+
[vars$5.fontSize]: refs.fontSize,
|
10573
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
10574
|
+
[vars$5.separatorFontSize]: '14px',
|
10575
|
+
[vars$5.labelsFontSize]: '14px',
|
10576
|
+
[vars$5.labelsLineHeight]: '1',
|
10577
|
+
[vars$5.labelsMarginBottom]: '6px',
|
10578
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
10579
|
+
[vars$5.itemMarginBottom]: '1em',
|
10580
10580
|
// To be positioned correctly, the min width has to match the text field min width
|
10581
|
-
[vars$
|
10581
|
+
[vars$5.valueLabelMinWidth]: refs.minWidth,
|
10582
10582
|
// To be positioned correctly, the min width has to match the combo box field min width
|
10583
|
-
[vars$
|
10584
|
-
[vars$
|
10585
|
-
[vars$
|
10583
|
+
[vars$5.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
|
10584
|
+
[vars$5.separatorWidth]: '70px',
|
10585
|
+
[vars$5.removeButtonWidth]: '60px',
|
10586
10586
|
};
|
10587
10587
|
|
10588
10588
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
10589
10589
|
__proto__: null,
|
10590
10590
|
default: mappingsField,
|
10591
10591
|
mappingsField: mappingsField,
|
10592
|
-
vars: vars$
|
10592
|
+
vars: vars$5
|
10593
10593
|
});
|
10594
10594
|
|
10595
|
-
|
10596
|
-
return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
10597
|
-
}
|
10595
|
+
var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
|
10598
10596
|
|
10599
|
-
|
10600
|
-
return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
10601
|
-
}
|
10597
|
+
var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
|
10602
10598
|
|
10603
|
-
const componentName$
|
10599
|
+
const componentName$5 = getComponentName('user-attribute');
|
10604
10600
|
class RawUserAttribute extends createBaseClass({
|
10605
|
-
componentName: componentName$
|
10601
|
+
componentName: componentName$5,
|
10606
10602
|
baseSelector: ':host > .root',
|
10607
10603
|
}) {
|
10608
10604
|
constructor() {
|
@@ -10653,6 +10649,10 @@ class RawUserAttribute extends createBaseClass({
|
|
10653
10649
|
margin-inline-end: 10px;
|
10654
10650
|
}
|
10655
10651
|
|
10652
|
+
.hidden {
|
10653
|
+
visibility: hidden;
|
10654
|
+
}
|
10655
|
+
|
10656
10656
|
descope-text[data-id="label-text"].required:after {
|
10657
10657
|
content: '*';
|
10658
10658
|
color: var(${TextClass.cssVarList.textColor});
|
@@ -10746,6 +10746,7 @@ class RawUserAttribute extends createBaseClass({
|
|
10746
10746
|
this.onIsRequiredChange();
|
10747
10747
|
this.onBadgeLabelChange();
|
10748
10748
|
this.onBadgeTooltipTextChange();
|
10749
|
+
this.handleDeleteButtonVisibility();
|
10749
10750
|
|
10750
10751
|
this.deleteButton.addEventListener('click', () =>
|
10751
10752
|
this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
|
@@ -10767,6 +10768,10 @@ class RawUserAttribute extends createBaseClass({
|
|
10767
10768
|
].concat(super.observedAttributes);
|
10768
10769
|
}
|
10769
10770
|
|
10771
|
+
handleDeleteButtonVisibility() {
|
10772
|
+
this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
|
10773
|
+
}
|
10774
|
+
|
10770
10775
|
attributeChangedCallback(name, oldValue, newValue) {
|
10771
10776
|
super.attributeChangedCallback?.(name, oldValue, newValue);
|
10772
10777
|
|
@@ -10785,10 +10790,14 @@ class RawUserAttribute extends createBaseClass({
|
|
10785
10790
|
} else if (name === 'badge-tooltip-text') {
|
10786
10791
|
this.onBadgeTooltipTextChange();
|
10787
10792
|
}
|
10793
|
+
|
10794
|
+
if (name === 'value' || name === 'required') {
|
10795
|
+
this.handleDeleteButtonVisibility();
|
10796
|
+
}
|
10788
10797
|
}
|
10789
10798
|
}
|
10790
10799
|
|
10791
|
-
const { host: host$
|
10800
|
+
const { host: host$2, textFields, buttons: buttons$1, badge: badge$1, labelText, valueText, textWrapper: textWrapper$1 } = {
|
10792
10801
|
host: { selector: () => ':host' },
|
10793
10802
|
textFields: { selector: 'descope-text' },
|
10794
10803
|
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
@@ -10799,44 +10808,259 @@ const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrap
|
|
10799
10808
|
};
|
10800
10809
|
|
10801
10810
|
const UserAttributeClass = compose(
|
10811
|
+
createStyleMixin({
|
10812
|
+
mappings: {
|
10813
|
+
hostWidth: { ...host$2, property: 'width' },
|
10814
|
+
hostMinWidth: { ...host$2, property: 'min-width' },
|
10815
|
+
hostDirection: [
|
10816
|
+
{ ...host$2, property: 'direction' },
|
10817
|
+
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
10818
|
+
{ ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
|
10819
|
+
{ ...badge$1, property: BadgeClass.cssVarList.hostDirection },
|
10820
|
+
],
|
10821
|
+
labelTextWidth: { ...labelText, property: 'width' },
|
10822
|
+
valueTextWidth: { ...valueText, property: 'width' },
|
10823
|
+
badgeMaxWidth: { ...badge$1, property: 'max-width' },
|
10824
|
+
itemsGap: [{ property: 'gap' }, { ...textWrapper$1, property: 'gap' }],
|
10825
|
+
},
|
10826
|
+
}),
|
10827
|
+
draggableMixin,
|
10828
|
+
componentNameValidationMixin
|
10829
|
+
)(RawUserAttribute);
|
10830
|
+
|
10831
|
+
const globalRefs$2 = getThemeRefs(globals);
|
10832
|
+
const vars$4 = UserAttributeClass.cssVarList;
|
10833
|
+
|
10834
|
+
const userAttribute = {
|
10835
|
+
[vars$4.hostDirection]: globalRefs$2.direction,
|
10836
|
+
[vars$4.labelTextWidth]: '150px',
|
10837
|
+
[vars$4.valueTextWidth]: '200px',
|
10838
|
+
[vars$4.badgeMaxWidth]: '85px',
|
10839
|
+
[vars$4.itemsGap]: '16px',
|
10840
|
+
[vars$4.hostMinWidth]: '530px',
|
10841
|
+
_fullWidth: {
|
10842
|
+
[vars$4.hostWidth]: '100%',
|
10843
|
+
},
|
10844
|
+
};
|
10845
|
+
|
10846
|
+
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
10847
|
+
__proto__: null,
|
10848
|
+
default: userAttribute,
|
10849
|
+
vars: vars$4
|
10850
|
+
});
|
10851
|
+
|
10852
|
+
var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
|
10853
|
+
|
10854
|
+
const componentName$4 = getComponentName('user-auth-method');
|
10855
|
+
class RawUserAuthMethod extends createBaseClass({
|
10856
|
+
componentName: componentName$4,
|
10857
|
+
baseSelector: ':host > .root',
|
10858
|
+
}) {
|
10859
|
+
constructor() {
|
10860
|
+
super();
|
10861
|
+
|
10862
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
10863
|
+
<style>
|
10864
|
+
:host {
|
10865
|
+
display: inline-flex;
|
10866
|
+
}
|
10867
|
+
|
10868
|
+
vaadin-icon {
|
10869
|
+
color: currentcolor;
|
10870
|
+
}
|
10871
|
+
|
10872
|
+
.root {
|
10873
|
+
display: flex;
|
10874
|
+
width: 100%;
|
10875
|
+
height: 100%;
|
10876
|
+
align-items: center;
|
10877
|
+
}
|
10878
|
+
|
10879
|
+
.btn-wrapper {
|
10880
|
+
display: flex;
|
10881
|
+
justify-content: space-between;
|
10882
|
+
align-items: center;
|
10883
|
+
flex-grow: 0;
|
10884
|
+
}
|
10885
|
+
|
10886
|
+
.text-wrapper {
|
10887
|
+
display: flex;
|
10888
|
+
align-items: center;
|
10889
|
+
flex-grow: 1;
|
10890
|
+
}
|
10891
|
+
|
10892
|
+
descope-text::part(text-wrapper) {
|
10893
|
+
text-overflow: ellipsis;
|
10894
|
+
overflow: hidden;
|
10895
|
+
white-space: nowrap;
|
10896
|
+
width: initial;
|
10897
|
+
}
|
10898
|
+
|
10899
|
+
descope-text {
|
10900
|
+
display: inline-flex;
|
10901
|
+
}
|
10902
|
+
|
10903
|
+
.fulfilled-indicator {
|
10904
|
+
width: 1em;
|
10905
|
+
height: 1em;
|
10906
|
+
display: flex;
|
10907
|
+
align-items: center;
|
10908
|
+
padding-inline-end: 1em;
|
10909
|
+
}
|
10910
|
+
|
10911
|
+
.hidden {
|
10912
|
+
display: none;
|
10913
|
+
}
|
10914
|
+
|
10915
|
+
.hidden-btn {
|
10916
|
+
width: 0;
|
10917
|
+
}
|
10918
|
+
|
10919
|
+
slot[name="method-icon"]{
|
10920
|
+
display: inline-flex;
|
10921
|
+
align-items: center;
|
10922
|
+
}
|
10923
|
+
</style>
|
10924
|
+
|
10925
|
+
|
10926
|
+
<div class="root">
|
10927
|
+
<div class="text-wrapper">
|
10928
|
+
<slot name="method-icon"></slot>
|
10929
|
+
<descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
|
10930
|
+
</div>
|
10931
|
+
|
10932
|
+
<div class="btn-wrapper">
|
10933
|
+
<descope-button size="sm" variant="link" mode="primary">
|
10934
|
+
<slot name="button-icon"></slot>
|
10935
|
+
</descope-button>
|
10936
|
+
<div class="fulfilled-indicator">
|
10937
|
+
<vaadin-icon src=${greenVIcon}></vaadin-icon>
|
10938
|
+
</div>
|
10939
|
+
<descope-button class="hidden-btn"size="sm" variant="link" mode="primary"></descope-button>
|
10940
|
+
</div>
|
10941
|
+
</div>
|
10942
|
+
`;
|
10943
|
+
|
10944
|
+
this.button = this.shadowRoot.querySelector('descope-button');
|
10945
|
+
this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
|
10946
|
+
this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
|
10947
|
+
}
|
10948
|
+
|
10949
|
+
onLabelChange() {
|
10950
|
+
this.labelText.innerText = this.label;
|
10951
|
+
this.labelText.setAttribute('title', this.label);
|
10952
|
+
}
|
10953
|
+
|
10954
|
+
onButtonLabelChange() {
|
10955
|
+
let textSpanEle = this.button.querySelector('span');
|
10956
|
+
|
10957
|
+
if (this.buttonLabel) {
|
10958
|
+
if (!textSpanEle) {
|
10959
|
+
textSpanEle = document.createElement('span');
|
10960
|
+
this.button.appendChild(textSpanEle);
|
10961
|
+
}
|
10962
|
+
textSpanEle.innerText = this.buttonLabel;
|
10963
|
+
} else if (textSpanEle) {
|
10964
|
+
this.button.removeChild(textSpanEle);
|
10965
|
+
}
|
10966
|
+
}
|
10967
|
+
|
10968
|
+
onFulfilledChange() {
|
10969
|
+
this.button.classList.toggle('hidden', this.isFulfilled);
|
10970
|
+
this.fulfilledIndicator.classList.toggle('hidden', !this.isFulfilled);
|
10971
|
+
}
|
10972
|
+
|
10973
|
+
get label() {
|
10974
|
+
return this.getAttribute('label') || '';
|
10975
|
+
}
|
10976
|
+
|
10977
|
+
get buttonLabel() {
|
10978
|
+
return this.getAttribute('button-label') || '';
|
10979
|
+
}
|
10980
|
+
|
10981
|
+
get isFulfilled() {
|
10982
|
+
return this.getAttribute('fulfilled') === 'true';
|
10983
|
+
}
|
10984
|
+
|
10985
|
+
init() {
|
10986
|
+
this.onLabelChange();
|
10987
|
+
this.onButtonLabelChange();
|
10988
|
+
this.onFulfilledChange();
|
10989
|
+
|
10990
|
+
this.button.addEventListener('click', () =>
|
10991
|
+
this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))
|
10992
|
+
);
|
10993
|
+
}
|
10994
|
+
|
10995
|
+
static get observedAttributes() {
|
10996
|
+
return ['label', 'fulfilled'].concat(super.observedAttributes);
|
10997
|
+
}
|
10998
|
+
|
10999
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
11000
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
11001
|
+
if (oldValue === newValue) {
|
11002
|
+
return;
|
11003
|
+
}
|
11004
|
+
|
11005
|
+
if (name === 'label') {
|
11006
|
+
this.onLabelChange();
|
11007
|
+
} else if (name === 'fulfilled') {
|
11008
|
+
this.onFulfilledChange();
|
11009
|
+
} else if (name === 'button-label') {
|
11010
|
+
this.onButtonLabelChange();
|
11011
|
+
}
|
11012
|
+
}
|
11013
|
+
}
|
11014
|
+
|
11015
|
+
const { host: host$1, textField, buttons, badge, textWrapper, methodIconSlot } = {
|
11016
|
+
host: { selector: () => ':host' },
|
11017
|
+
textField: { selector: 'descope-text' },
|
11018
|
+
buttons: { selector: 'descope-button' },
|
11019
|
+
badge: { selector: 'descope-badge' },
|
11020
|
+
textWrapper: { selector: ' .text-wrapper' },
|
11021
|
+
methodIconSlot: { selector: 'slot[name="method-icon"]' },
|
11022
|
+
};
|
11023
|
+
|
11024
|
+
const UserAuthMethodClass = compose(
|
10802
11025
|
createStyleMixin({
|
10803
11026
|
mappings: {
|
10804
11027
|
hostWidth: { ...host$1, property: 'width' },
|
10805
11028
|
hostMinWidth: { ...host$1, property: 'min-width' },
|
10806
11029
|
hostDirection: [
|
10807
11030
|
{ ...host$1, property: 'direction' },
|
10808
|
-
{ ...
|
11031
|
+
{ ...textField, property: TextClass.cssVarList.hostDirection },
|
10809
11032
|
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
10810
11033
|
{ ...badge, property: BadgeClass.cssVarList.hostDirection },
|
10811
11034
|
],
|
10812
|
-
labelTextWidth: { ...
|
10813
|
-
valueTextWidth: { ...valueText, property: 'width' },
|
10814
|
-
badgeMaxWidth: { ...badge, property: 'max-width' },
|
11035
|
+
labelTextWidth: { ...textField, property: 'width' },
|
10815
11036
|
itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
|
11037
|
+
iconSize: [
|
11038
|
+
{ ...methodIconSlot, property: 'width' },
|
11039
|
+
{ ...methodIconSlot, property: 'height' },
|
11040
|
+
],
|
10816
11041
|
},
|
10817
11042
|
}),
|
10818
11043
|
draggableMixin,
|
10819
11044
|
componentNameValidationMixin
|
10820
|
-
)(
|
11045
|
+
)(RawUserAuthMethod);
|
10821
11046
|
|
10822
11047
|
const globalRefs$1 = getThemeRefs(globals);
|
10823
|
-
const vars$3 =
|
11048
|
+
const vars$3 = UserAuthMethodClass.cssVarList;
|
10824
11049
|
|
10825
|
-
const
|
11050
|
+
const userAuthMethod = {
|
10826
11051
|
[vars$3.hostDirection]: globalRefs$1.direction,
|
10827
|
-
[vars$3.labelTextWidth]: '
|
10828
|
-
[vars$3.valueTextWidth]: '200px',
|
10829
|
-
[vars$3.badgeMaxWidth]: '85px',
|
11052
|
+
[vars$3.labelTextWidth]: '200px',
|
10830
11053
|
[vars$3.itemsGap]: '16px',
|
10831
11054
|
[vars$3.hostMinWidth]: '530px',
|
11055
|
+
[vars$3.iconSize]: '24px',
|
10832
11056
|
_fullWidth: {
|
10833
11057
|
[vars$3.hostWidth]: '100%',
|
10834
11058
|
},
|
10835
11059
|
};
|
10836
11060
|
|
10837
|
-
var
|
11061
|
+
var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
|
10838
11062
|
__proto__: null,
|
10839
|
-
default:
|
11063
|
+
default: userAuthMethod,
|
10840
11064
|
vars: vars$3
|
10841
11065
|
});
|
10842
11066
|
|
@@ -10987,7 +11211,7 @@ var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
|
10987
11211
|
|
10988
11212
|
const components = {
|
10989
11213
|
button: button$1,
|
10990
|
-
textField: textField$
|
11214
|
+
textField: textField$2,
|
10991
11215
|
password: password$1,
|
10992
11216
|
numberField: numberField$1,
|
10993
11217
|
emailField: emailField$1,
|
@@ -11018,10 +11242,11 @@ const components = {
|
|
11018
11242
|
grid: grid$1,
|
11019
11243
|
notificationCard,
|
11020
11244
|
multiSelectComboBox: multiSelectComboBox$1,
|
11021
|
-
badge: badge$
|
11245
|
+
badge: badge$3,
|
11022
11246
|
avatar: avatar$1,
|
11023
11247
|
mappingsField: mappingsField$1,
|
11024
11248
|
userAttribute: userAttribute$1,
|
11249
|
+
userAuthMethod: userAuthMethod$1,
|
11025
11250
|
samlGroupMappings: samlGroupMappings$1,
|
11026
11251
|
policyValidation: policyValidation$1,
|
11027
11252
|
};
|
@@ -11036,7 +11261,7 @@ const vars = Object.keys(components).reduce(
|
|
11036
11261
|
);
|
11037
11262
|
|
11038
11263
|
const defaultTheme = { globals, components: theme };
|
11039
|
-
const themeVars = { globals: vars$
|
11264
|
+
const themeVars = { globals: vars$E, components: vars };
|
11040
11265
|
|
11041
11266
|
const colors = {
|
11042
11267
|
surface: {
|
@@ -11375,6 +11600,7 @@ exports.TextFieldClass = TextFieldClass;
|
|
11375
11600
|
exports.TotpImageClass = TotpImageClass;
|
11376
11601
|
exports.UploadFileClass = UploadFileClass;
|
11377
11602
|
exports.UserAttributeClass = UserAttributeClass;
|
11603
|
+
exports.UserAuthMethodClass = UserAuthMethodClass;
|
11378
11604
|
exports.componentsThemeManager = componentsThemeManager;
|
11379
11605
|
exports.createComponentsTheme = createComponentsTheme;
|
11380
11606
|
exports.createHelperVars = createHelperVars;
|