@descope/web-components-ui 1.0.291 → 1.0.292
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1102 -819
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1123 -793
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-policy-validation-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPasswordClass.js +30 -2
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +51 -3
- package/src/components/descope-new-password/index.js +1 -0
- package/src/components/descope-policy-validation/PolicyValidationClass.js +220 -0
- package/src/components/descope-policy-validation/helpers.js +2 -0
- package/src/components/descope-policy-validation/index.js +5 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/inputWrapper.js +3 -1
- package/src/theme/components/newPassword.js +5 -0
- package/src/theme/components/policyValidation.js +29 -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$D = 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$M = 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$m, 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$m, 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$M,
|
|
2682
2682
|
})
|
|
2683
2683
|
);
|
|
2684
2684
|
|
|
@@ -2715,31 +2715,31 @@ loadingIndicatorStyles = `
|
|
|
2715
2715
|
}
|
|
2716
2716
|
`;
|
|
2717
2717
|
|
|
2718
|
-
const globalRefs$
|
|
2718
|
+
const globalRefs$m = 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$m.colors.primary,
|
|
2723
|
+
secondary: globalRefs$m.colors.secondary,
|
|
2724
|
+
success: globalRefs$m.colors.success,
|
|
2725
|
+
error: globalRefs$m.colors.error,
|
|
2726
|
+
surface: globalRefs$m.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$M);
|
|
2730
2730
|
|
|
2731
2731
|
const button = {
|
|
2732
2732
|
...helperTheme$3,
|
|
2733
2733
|
|
|
2734
|
-
[compVars$5.fontFamily]: globalRefs$
|
|
2734
|
+
[compVars$5.fontFamily]: globalRefs$m.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$m.direction,
|
|
2740
2740
|
|
|
2741
|
-
[compVars$5.borderRadius]: globalRefs$
|
|
2742
|
-
[compVars$5.borderWidth]: globalRefs$
|
|
2741
|
+
[compVars$5.borderRadius]: globalRefs$m.radius.sm,
|
|
2742
|
+
[compVars$5.borderWidth]: globalRefs$m.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$m.colors.surface.light,
|
|
2786
|
+
[helperVars$3.dark]: globalRefs$m.colors.surface.dark,
|
|
2787
|
+
[helperVars$3.light]: globalRefs$m.colors.surface.light,
|
|
2788
|
+
[helperVars$3.contrast]: globalRefs$m.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$C = {
|
|
2837
2837
|
...compVars$5,
|
|
2838
2838
|
...helperVars$3,
|
|
2839
2839
|
};
|
|
@@ -2841,11 +2841,11 @@ const vars$B = {
|
|
|
2841
2841
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
2842
2842
|
__proto__: null,
|
|
2843
2843
|
default: button,
|
|
2844
|
-
vars: vars$
|
|
2844
|
+
vars: vars$C
|
|
2845
2845
|
});
|
|
2846
2846
|
|
|
2847
2847
|
const {
|
|
2848
|
-
host: host$
|
|
2848
|
+
host: host$l,
|
|
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$l],
|
|
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$l, property: 'width' },
|
|
2877
|
+
hostMinWidth: { ...host$l, property: 'min-width' },
|
|
2878
|
+
hostDirection: { ...host$l, 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$L = getComponentName('text-field');
|
|
3053
3053
|
|
|
3054
3054
|
const observedAttrs = ['type'];
|
|
3055
3055
|
|
|
@@ -3099,27 +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$L,
|
|
3103
3103
|
})
|
|
3104
3104
|
);
|
|
3105
3105
|
|
|
3106
|
-
const componentName$
|
|
3107
|
-
const globalRefs$
|
|
3106
|
+
const componentName$K = getComponentName('input-wrapper');
|
|
3107
|
+
const globalRefs$l = getThemeRefs(globals);
|
|
3108
3108
|
|
|
3109
|
-
const [theme$1, refs, vars$
|
|
3109
|
+
const [theme$1, refs, vars$B] = createHelperVars(
|
|
3110
3110
|
{
|
|
3111
|
-
labelTextColor: globalRefs$
|
|
3112
|
-
|
|
3113
|
-
|
|
3111
|
+
labelTextColor: globalRefs$l.colors.surface.dark,
|
|
3112
|
+
labelFontSize: globalRefs$l.typography.body2.size,
|
|
3113
|
+
valueTextColor: globalRefs$l.colors.surface.contrast,
|
|
3114
|
+
placeholderTextColor: globalRefs$l.colors.surface.dark,
|
|
3114
3115
|
requiredIndicator: "'*'",
|
|
3115
|
-
|
|
3116
|
-
|
|
3116
|
+
helperTextColor: globalRefs$l.colors.surface.dark,
|
|
3117
|
+
errorMessageTextColor: globalRefs$l.colors.error.main,
|
|
3118
|
+
successMessageTextColor: globalRefs$l.colors.success.main,
|
|
3117
3119
|
|
|
3118
|
-
borderWidth: globalRefs$
|
|
3119
|
-
borderRadius: globalRefs$
|
|
3120
|
+
borderWidth: globalRefs$l.border.xs,
|
|
3121
|
+
borderRadius: globalRefs$l.radius.xs,
|
|
3120
3122
|
borderColor: 'transparent',
|
|
3121
3123
|
|
|
3122
|
-
outlineWidth: globalRefs$
|
|
3124
|
+
outlineWidth: globalRefs$l.border.sm,
|
|
3123
3125
|
outlineStyle: 'solid',
|
|
3124
3126
|
outlineColor: 'transparent',
|
|
3125
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
|
|
@@ -3130,11 +3132,11 @@ const [theme$1, refs, vars$A] = createHelperVars(
|
|
|
3130
3132
|
horizontalPadding: '0.5em',
|
|
3131
3133
|
verticalPadding: '0.5em',
|
|
3132
3134
|
|
|
3133
|
-
backgroundColor: globalRefs$
|
|
3135
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
|
3134
3136
|
|
|
3135
|
-
fontFamily: globalRefs$
|
|
3137
|
+
fontFamily: globalRefs$l.fonts.font1.family,
|
|
3136
3138
|
|
|
3137
|
-
direction: globalRefs$
|
|
3139
|
+
direction: globalRefs$l.direction,
|
|
3138
3140
|
|
|
3139
3141
|
overlayOpacity: '0.3',
|
|
3140
3142
|
|
|
@@ -3150,69 +3152,69 @@ const [theme$1, refs, vars$A] = createHelperVars(
|
|
|
3150
3152
|
},
|
|
3151
3153
|
|
|
3152
3154
|
_focused: {
|
|
3153
|
-
outlineColor: globalRefs$
|
|
3155
|
+
outlineColor: globalRefs$l.colors.surface.light,
|
|
3154
3156
|
_invalid: {
|
|
3155
|
-
outlineColor: globalRefs$
|
|
3157
|
+
outlineColor: globalRefs$l.colors.error.main,
|
|
3156
3158
|
},
|
|
3157
3159
|
},
|
|
3158
3160
|
|
|
3159
3161
|
_bordered: {
|
|
3160
|
-
outlineWidth: globalRefs$
|
|
3161
|
-
borderColor: globalRefs$
|
|
3162
|
+
outlineWidth: globalRefs$l.border.xs,
|
|
3163
|
+
borderColor: globalRefs$l.colors.surface.light,
|
|
3162
3164
|
borderStyle: 'solid',
|
|
3163
3165
|
_invalid: {
|
|
3164
|
-
borderColor: globalRefs$
|
|
3166
|
+
borderColor: globalRefs$l.colors.error.main,
|
|
3165
3167
|
},
|
|
3166
3168
|
},
|
|
3167
3169
|
|
|
3168
3170
|
_disabled: {
|
|
3169
|
-
labelTextColor: globalRefs$
|
|
3170
|
-
borderColor: globalRefs$
|
|
3171
|
-
valueTextColor: globalRefs$
|
|
3172
|
-
placeholderTextColor: globalRefs$
|
|
3173
|
-
helperTextColor: globalRefs$
|
|
3174
|
-
backgroundColor: globalRefs$
|
|
3171
|
+
labelTextColor: globalRefs$l.colors.surface.light,
|
|
3172
|
+
borderColor: globalRefs$l.colors.surface.light,
|
|
3173
|
+
valueTextColor: globalRefs$l.colors.surface.light,
|
|
3174
|
+
placeholderTextColor: globalRefs$l.colors.surface.light,
|
|
3175
|
+
helperTextColor: globalRefs$l.colors.surface.light,
|
|
3176
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
|
3175
3177
|
},
|
|
3176
3178
|
},
|
|
3177
|
-
componentName$
|
|
3179
|
+
componentName$K
|
|
3178
3180
|
);
|
|
3179
3181
|
|
|
3180
3182
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3181
3183
|
__proto__: null,
|
|
3182
3184
|
default: theme$1,
|
|
3183
3185
|
refs: refs,
|
|
3184
|
-
vars: vars$
|
|
3186
|
+
vars: vars$B
|
|
3185
3187
|
});
|
|
3186
3188
|
|
|
3187
|
-
const vars$
|
|
3189
|
+
const vars$A = TextFieldClass.cssVarList;
|
|
3188
3190
|
|
|
3189
3191
|
const textField = {
|
|
3190
|
-
[vars$
|
|
3191
|
-
[vars$
|
|
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$
|
|
3192
|
+
[vars$A.hostWidth]: refs.width,
|
|
3193
|
+
[vars$A.hostMinWidth]: refs.minWidth,
|
|
3194
|
+
[vars$A.hostDirection]: refs.direction,
|
|
3195
|
+
[vars$A.fontSize]: refs.fontSize,
|
|
3196
|
+
[vars$A.fontFamily]: refs.fontFamily,
|
|
3197
|
+
[vars$A.labelTextColor]: refs.labelTextColor,
|
|
3198
|
+
[vars$A.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3199
|
+
[vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3200
|
+
[vars$A.inputValueTextColor]: refs.valueTextColor,
|
|
3201
|
+
[vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3202
|
+
[vars$A.inputBorderWidth]: refs.borderWidth,
|
|
3203
|
+
[vars$A.inputBorderStyle]: refs.borderStyle,
|
|
3204
|
+
[vars$A.inputBorderColor]: refs.borderColor,
|
|
3205
|
+
[vars$A.inputBorderRadius]: refs.borderRadius,
|
|
3206
|
+
[vars$A.inputOutlineWidth]: refs.outlineWidth,
|
|
3207
|
+
[vars$A.inputOutlineStyle]: refs.outlineStyle,
|
|
3208
|
+
[vars$A.inputOutlineColor]: refs.outlineColor,
|
|
3209
|
+
[vars$A.inputOutlineOffset]: refs.outlineOffset,
|
|
3210
|
+
[vars$A.inputBackgroundColor]: refs.backgroundColor,
|
|
3211
|
+
[vars$A.inputHeight]: refs.inputHeight,
|
|
3212
|
+
[vars$A.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3213
|
+
[vars$A.helperTextColor]: refs.helperTextColor,
|
|
3212
3214
|
textAlign: {
|
|
3213
|
-
right: { [vars$
|
|
3214
|
-
left: { [vars$
|
|
3215
|
-
center: { [vars$
|
|
3215
|
+
right: { [vars$A.inputTextAlign]: 'right' },
|
|
3216
|
+
left: { [vars$A.inputTextAlign]: 'left' },
|
|
3217
|
+
center: { [vars$A.inputTextAlign]: 'center' },
|
|
3216
3218
|
},
|
|
3217
3219
|
};
|
|
3218
3220
|
|
|
@@ -3220,7 +3222,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
|
3220
3222
|
__proto__: null,
|
|
3221
3223
|
default: textField,
|
|
3222
3224
|
textField: textField,
|
|
3223
|
-
vars: vars$
|
|
3225
|
+
vars: vars$A
|
|
3224
3226
|
});
|
|
3225
3227
|
|
|
3226
3228
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -3257,10 +3259,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
3257
3259
|
}
|
|
3258
3260
|
};
|
|
3259
3261
|
|
|
3260
|
-
const componentName$
|
|
3262
|
+
const componentName$J = getComponentName('password');
|
|
3261
3263
|
|
|
3262
3264
|
const {
|
|
3263
|
-
host: host$
|
|
3265
|
+
host: host$k,
|
|
3264
3266
|
inputField: inputField$5,
|
|
3265
3267
|
inputElement: inputElement$2,
|
|
3266
3268
|
inputElementPlaceholder,
|
|
@@ -3286,10 +3288,10 @@ const {
|
|
|
3286
3288
|
const PasswordClass = compose(
|
|
3287
3289
|
createStyleMixin({
|
|
3288
3290
|
mappings: {
|
|
3289
|
-
hostWidth: { ...host$
|
|
3290
|
-
hostMinWidth: { ...host$
|
|
3291
|
-
hostDirection: { ...host$
|
|
3292
|
-
fontSize: [{}, host$
|
|
3291
|
+
hostWidth: { ...host$k, property: 'width' },
|
|
3292
|
+
hostMinWidth: { ...host$k, property: 'min-width' },
|
|
3293
|
+
hostDirection: { ...host$k, property: 'direction' },
|
|
3294
|
+
fontSize: [{}, host$k],
|
|
3293
3295
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
|
3294
3296
|
inputHeight: { ...inputField$5, property: 'height' },
|
|
3295
3297
|
inputHorizontalPadding: [
|
|
@@ -3386,46 +3388,46 @@ const PasswordClass = compose(
|
|
|
3386
3388
|
}
|
|
3387
3389
|
`,
|
|
3388
3390
|
excludeAttrsSync: ['tabindex'],
|
|
3389
|
-
componentName: componentName$
|
|
3391
|
+
componentName: componentName$J,
|
|
3390
3392
|
})
|
|
3391
3393
|
);
|
|
3392
3394
|
|
|
3393
|
-
const globalRefs$
|
|
3394
|
-
const vars$
|
|
3395
|
+
const globalRefs$k = getThemeRefs(globals);
|
|
3396
|
+
const vars$z = PasswordClass.cssVarList;
|
|
3395
3397
|
|
|
3396
3398
|
const password = {
|
|
3397
|
-
[vars$
|
|
3398
|
-
[vars$
|
|
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$
|
|
3399
|
+
[vars$z.hostWidth]: refs.width,
|
|
3400
|
+
[vars$z.hostDirection]: refs.direction,
|
|
3401
|
+
[vars$z.fontSize]: refs.fontSize,
|
|
3402
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
|
3403
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
|
3404
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3405
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3406
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
|
3407
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
|
3408
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3409
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
|
3410
|
+
[vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3411
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
|
3412
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
|
3413
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
|
3414
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
|
3415
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
|
3416
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
|
3417
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
|
3418
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
|
3419
|
+
[vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
|
|
3420
|
+
[vars$z.revealButtonSize]: refs.toggleButtonSize,
|
|
3421
|
+
[vars$z.revealButtonColor]: refs.placeholderTextColor,
|
|
3420
3422
|
};
|
|
3421
3423
|
|
|
3422
3424
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
3423
3425
|
__proto__: null,
|
|
3424
3426
|
default: password,
|
|
3425
|
-
vars: vars$
|
|
3427
|
+
vars: vars$z
|
|
3426
3428
|
});
|
|
3427
3429
|
|
|
3428
|
-
const componentName$
|
|
3430
|
+
const componentName$I = getComponentName('number-field');
|
|
3429
3431
|
|
|
3430
3432
|
const NumberFieldClass = compose(
|
|
3431
3433
|
createStyleMixin({
|
|
@@ -3451,43 +3453,43 @@ const NumberFieldClass = compose(
|
|
|
3451
3453
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
3452
3454
|
`,
|
|
3453
3455
|
excludeAttrsSync: ['tabindex'],
|
|
3454
|
-
componentName: componentName$
|
|
3456
|
+
componentName: componentName$I,
|
|
3455
3457
|
})
|
|
3456
3458
|
);
|
|
3457
3459
|
|
|
3458
|
-
const vars$
|
|
3460
|
+
const vars$y = NumberFieldClass.cssVarList;
|
|
3459
3461
|
|
|
3460
3462
|
const numberField = {
|
|
3461
|
-
[vars$
|
|
3462
|
-
[vars$
|
|
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$
|
|
3463
|
+
[vars$y.hostWidth]: refs.width,
|
|
3464
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
|
3465
|
+
[vars$y.hostDirection]: refs.direction,
|
|
3466
|
+
[vars$y.fontSize]: refs.fontSize,
|
|
3467
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
|
3468
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
|
3469
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3470
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
|
3471
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3472
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
|
3473
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
|
3474
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
|
3475
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
|
3476
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
|
3477
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
|
3478
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
|
3479
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
|
3480
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
|
3481
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3482
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3483
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
|
3482
3484
|
};
|
|
3483
3485
|
|
|
3484
3486
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
3485
3487
|
__proto__: null,
|
|
3486
3488
|
default: numberField,
|
|
3487
|
-
vars: vars$
|
|
3489
|
+
vars: vars$y
|
|
3488
3490
|
});
|
|
3489
3491
|
|
|
3490
|
-
const componentName$
|
|
3492
|
+
const componentName$H = getComponentName('email-field');
|
|
3491
3493
|
|
|
3492
3494
|
const customMixin$7 = (superclass) =>
|
|
3493
3495
|
class EmailFieldMixinClass extends superclass {
|
|
@@ -3522,46 +3524,46 @@ const EmailFieldClass = compose(
|
|
|
3522
3524
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
3523
3525
|
`,
|
|
3524
3526
|
excludeAttrsSync: ['tabindex'],
|
|
3525
|
-
componentName: componentName$
|
|
3527
|
+
componentName: componentName$H,
|
|
3526
3528
|
})
|
|
3527
3529
|
);
|
|
3528
3530
|
|
|
3529
|
-
const vars$
|
|
3531
|
+
const vars$x = EmailFieldClass.cssVarList;
|
|
3530
3532
|
|
|
3531
3533
|
const emailField = {
|
|
3532
|
-
[vars$
|
|
3533
|
-
[vars$
|
|
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$
|
|
3534
|
+
[vars$x.hostWidth]: refs.width,
|
|
3535
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
|
3536
|
+
[vars$x.hostDirection]: refs.direction,
|
|
3537
|
+
[vars$x.fontSize]: refs.fontSize,
|
|
3538
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
|
3539
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
|
3540
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3541
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
|
3542
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3543
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3544
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
|
3545
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
|
3546
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
|
3547
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
|
3548
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
|
3549
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
|
3550
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
|
3551
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
|
3552
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
|
3553
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3554
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
|
3553
3555
|
};
|
|
3554
3556
|
|
|
3555
3557
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
3556
3558
|
__proto__: null,
|
|
3557
3559
|
default: emailField,
|
|
3558
|
-
vars: vars$
|
|
3560
|
+
vars: vars$x
|
|
3559
3561
|
});
|
|
3560
3562
|
|
|
3561
|
-
const componentName$
|
|
3563
|
+
const componentName$G = getComponentName('text-area');
|
|
3562
3564
|
|
|
3563
3565
|
const {
|
|
3564
|
-
host: host$
|
|
3566
|
+
host: host$j,
|
|
3565
3567
|
label: label$7,
|
|
3566
3568
|
placeholder: placeholder$2,
|
|
3567
3569
|
inputField: inputField$4,
|
|
@@ -3583,10 +3585,10 @@ const {
|
|
|
3583
3585
|
const TextAreaClass = compose(
|
|
3584
3586
|
createStyleMixin({
|
|
3585
3587
|
mappings: {
|
|
3586
|
-
hostWidth: { ...host$
|
|
3587
|
-
hostMinWidth: { ...host$
|
|
3588
|
-
hostDirection: { ...host$
|
|
3589
|
-
fontSize: [host$
|
|
3588
|
+
hostWidth: { ...host$j, property: 'width' },
|
|
3589
|
+
hostMinWidth: { ...host$j, property: 'min-width' },
|
|
3590
|
+
hostDirection: { ...host$j, property: 'direction' },
|
|
3591
|
+
fontSize: [host$j, textArea$2],
|
|
3590
3592
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
|
3591
3593
|
labelTextColor: [
|
|
3592
3594
|
{ ...label$7, property: 'color' },
|
|
@@ -3634,49 +3636,49 @@ const TextAreaClass = compose(
|
|
|
3634
3636
|
${resetInputCursor('vaadin-text-area')}
|
|
3635
3637
|
`,
|
|
3636
3638
|
excludeAttrsSync: ['tabindex'],
|
|
3637
|
-
componentName: componentName$
|
|
3639
|
+
componentName: componentName$G,
|
|
3638
3640
|
})
|
|
3639
3641
|
);
|
|
3640
3642
|
|
|
3641
|
-
const vars$
|
|
3643
|
+
const vars$w = TextAreaClass.cssVarList;
|
|
3642
3644
|
|
|
3643
3645
|
const textArea = {
|
|
3644
|
-
[vars$
|
|
3645
|
-
[vars$
|
|
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$
|
|
3646
|
+
[vars$w.hostWidth]: refs.width,
|
|
3647
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
|
3648
|
+
[vars$w.hostDirection]: refs.direction,
|
|
3649
|
+
[vars$w.fontSize]: refs.fontSize,
|
|
3650
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
|
3651
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
|
3652
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3653
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3654
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
|
3655
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
|
3656
|
+
[vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3657
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
|
3658
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
|
3659
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
|
3660
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
|
3661
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
|
3662
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
|
3663
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
|
3664
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
|
3665
|
+
[vars$w.inputResizeType]: 'vertical',
|
|
3666
|
+
[vars$w.inputMinHeight]: '5em',
|
|
3665
3667
|
textAlign: {
|
|
3666
|
-
right: { [vars$
|
|
3667
|
-
left: { [vars$
|
|
3668
|
-
center: { [vars$
|
|
3668
|
+
right: { [vars$w.inputTextAlign]: 'right' },
|
|
3669
|
+
left: { [vars$w.inputTextAlign]: 'left' },
|
|
3670
|
+
center: { [vars$w.inputTextAlign]: 'center' },
|
|
3669
3671
|
},
|
|
3670
3672
|
|
|
3671
3673
|
_readonly: {
|
|
3672
|
-
[vars$
|
|
3674
|
+
[vars$w.inputResizeType]: 'none',
|
|
3673
3675
|
},
|
|
3674
3676
|
};
|
|
3675
3677
|
|
|
3676
3678
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
3677
3679
|
__proto__: null,
|
|
3678
3680
|
default: textArea,
|
|
3679
|
-
vars: vars$
|
|
3681
|
+
vars: vars$w
|
|
3680
3682
|
});
|
|
3681
3683
|
|
|
3682
3684
|
const createBaseInputClass = (...args) =>
|
|
@@ -3687,9 +3689,9 @@ const createBaseInputClass = (...args) =>
|
|
|
3687
3689
|
inputEventsDispatchingMixin
|
|
3688
3690
|
)(createBaseClass(...args));
|
|
3689
3691
|
|
|
3690
|
-
const componentName$
|
|
3692
|
+
const componentName$F = getComponentName('boolean-field-internal');
|
|
3691
3693
|
|
|
3692
|
-
createBaseInputClass({ componentName: componentName$
|
|
3694
|
+
createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
|
|
3693
3695
|
|
|
3694
3696
|
const booleanFieldMixin = (superclass) =>
|
|
3695
3697
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -3698,14 +3700,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
3698
3700
|
|
|
3699
3701
|
const template = document.createElement('template');
|
|
3700
3702
|
template.innerHTML = `
|
|
3701
|
-
<${componentName$
|
|
3703
|
+
<${componentName$F}
|
|
3702
3704
|
tabindex="-1"
|
|
3703
3705
|
slot="input"
|
|
3704
|
-
></${componentName$
|
|
3706
|
+
></${componentName$F}>
|
|
3705
3707
|
`;
|
|
3706
3708
|
|
|
3707
3709
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3708
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3710
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$F);
|
|
3709
3711
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
3710
3712
|
|
|
3711
3713
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -3775,10 +3777,10 @@ descope-boolean-field-internal {
|
|
|
3775
3777
|
}
|
|
3776
3778
|
`;
|
|
3777
3779
|
|
|
3778
|
-
const componentName$
|
|
3780
|
+
const componentName$E = getComponentName('checkbox');
|
|
3779
3781
|
|
|
3780
3782
|
const {
|
|
3781
|
-
host: host$
|
|
3783
|
+
host: host$i,
|
|
3782
3784
|
component: component$1,
|
|
3783
3785
|
checkboxElement,
|
|
3784
3786
|
checkboxSurface,
|
|
@@ -3800,10 +3802,10 @@ const {
|
|
|
3800
3802
|
const CheckboxClass = compose(
|
|
3801
3803
|
createStyleMixin({
|
|
3802
3804
|
mappings: {
|
|
3803
|
-
hostWidth: { ...host$
|
|
3804
|
-
hostDirection: { ...host$
|
|
3805
|
+
hostWidth: { ...host$i, property: 'width' },
|
|
3806
|
+
hostDirection: { ...host$i, property: 'direction' },
|
|
3805
3807
|
|
|
3806
|
-
fontSize: [host$
|
|
3808
|
+
fontSize: [host$i, checkboxElement, checkboxLabel$1],
|
|
3807
3809
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
|
3808
3810
|
|
|
3809
3811
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
|
@@ -3881,54 +3883,54 @@ const CheckboxClass = compose(
|
|
|
3881
3883
|
}
|
|
3882
3884
|
`,
|
|
3883
3885
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
3884
|
-
componentName: componentName$
|
|
3886
|
+
componentName: componentName$E,
|
|
3885
3887
|
})
|
|
3886
3888
|
);
|
|
3887
3889
|
|
|
3888
|
-
const vars$
|
|
3890
|
+
const vars$v = CheckboxClass.cssVarList;
|
|
3889
3891
|
const checkboxSize = '1.35em';
|
|
3890
3892
|
|
|
3891
3893
|
const checkbox = {
|
|
3892
|
-
[vars$
|
|
3893
|
-
[vars$
|
|
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$
|
|
3894
|
+
[vars$v.hostWidth]: refs.width,
|
|
3895
|
+
[vars$v.hostDirection]: refs.direction,
|
|
3896
|
+
[vars$v.fontSize]: refs.fontSize,
|
|
3897
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
|
3898
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3899
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3900
|
+
[vars$v.labelFontWeight]: '400',
|
|
3901
|
+
[vars$v.labelLineHeight]: checkboxSize,
|
|
3902
|
+
[vars$v.labelSpacing]: '1em',
|
|
3903
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3904
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
|
3905
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
|
3906
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
|
3907
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
|
3908
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
|
3909
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
|
3910
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
|
3911
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
|
3912
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
|
3913
|
+
[vars$v.inputSize]: checkboxSize,
|
|
3912
3914
|
|
|
3913
3915
|
_checked: {
|
|
3914
|
-
[vars$
|
|
3916
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
|
3915
3917
|
},
|
|
3916
3918
|
|
|
3917
3919
|
_disabled: {
|
|
3918
|
-
[vars$
|
|
3920
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3919
3921
|
},
|
|
3920
3922
|
};
|
|
3921
3923
|
|
|
3922
3924
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
3923
3925
|
__proto__: null,
|
|
3924
3926
|
default: checkbox,
|
|
3925
|
-
vars: vars$
|
|
3927
|
+
vars: vars$v
|
|
3926
3928
|
});
|
|
3927
3929
|
|
|
3928
|
-
const componentName$
|
|
3930
|
+
const componentName$D = getComponentName('switch-toggle');
|
|
3929
3931
|
|
|
3930
3932
|
const {
|
|
3931
|
-
host: host$
|
|
3933
|
+
host: host$h,
|
|
3932
3934
|
component,
|
|
3933
3935
|
checkboxElement: track,
|
|
3934
3936
|
checkboxSurface: knob,
|
|
@@ -3950,8 +3952,8 @@ const {
|
|
|
3950
3952
|
const SwitchToggleClass = compose(
|
|
3951
3953
|
createStyleMixin({
|
|
3952
3954
|
mappings: {
|
|
3953
|
-
hostWidth: { ...host$
|
|
3954
|
-
hostDirection: { ...host$
|
|
3955
|
+
hostWidth: { ...host$h, property: 'width' },
|
|
3956
|
+
hostDirection: { ...host$h, property: 'direction' },
|
|
3955
3957
|
|
|
3956
3958
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
3957
3959
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
|
@@ -4057,82 +4059,82 @@ const SwitchToggleClass = compose(
|
|
|
4057
4059
|
}
|
|
4058
4060
|
`,
|
|
4059
4061
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
4060
|
-
componentName: componentName$
|
|
4062
|
+
componentName: componentName$D,
|
|
4061
4063
|
})
|
|
4062
4064
|
);
|
|
4063
4065
|
|
|
4064
4066
|
const knobMargin = '2px';
|
|
4065
4067
|
const checkboxHeight = '1.25em';
|
|
4066
4068
|
|
|
4067
|
-
const globalRefs$
|
|
4068
|
-
const vars$
|
|
4069
|
+
const globalRefs$j = getThemeRefs(globals);
|
|
4070
|
+
const vars$u = SwitchToggleClass.cssVarList;
|
|
4069
4071
|
|
|
4070
4072
|
const switchToggle = {
|
|
4071
|
-
[vars$
|
|
4072
|
-
[vars$
|
|
4073
|
-
[vars$
|
|
4074
|
-
[vars$
|
|
4075
|
-
|
|
4076
|
-
[vars$
|
|
4077
|
-
[vars$
|
|
4078
|
-
[vars$
|
|
4079
|
-
[vars$
|
|
4080
|
-
|
|
4081
|
-
[vars$
|
|
4082
|
-
[vars$
|
|
4083
|
-
[vars$
|
|
4084
|
-
[vars$
|
|
4085
|
-
[vars$
|
|
4086
|
-
[vars$
|
|
4087
|
-
[vars$
|
|
4088
|
-
|
|
4089
|
-
[vars$
|
|
4090
|
-
[vars$
|
|
4091
|
-
[vars$
|
|
4092
|
-
[vars$
|
|
4093
|
-
[vars$
|
|
4094
|
-
[vars$
|
|
4095
|
-
|
|
4096
|
-
[vars$
|
|
4097
|
-
[vars$
|
|
4098
|
-
[vars$
|
|
4099
|
-
[vars$
|
|
4100
|
-
[vars$
|
|
4101
|
-
[vars$
|
|
4073
|
+
[vars$u.hostWidth]: refs.width,
|
|
4074
|
+
[vars$u.hostDirection]: refs.direction,
|
|
4075
|
+
[vars$u.fontSize]: refs.fontSize,
|
|
4076
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
|
4077
|
+
|
|
4078
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
|
4079
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
|
4080
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
|
4081
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
|
4082
|
+
|
|
4083
|
+
[vars$u.trackBorderStyle]: refs.borderStyle,
|
|
4084
|
+
[vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
4085
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
|
4086
|
+
[vars$u.trackBackgroundColor]: refs.backgroundColor,
|
|
4087
|
+
[vars$u.trackBorderRadius]: globalRefs$j.radius.md,
|
|
4088
|
+
[vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
4089
|
+
[vars$u.trackHeight]: checkboxHeight,
|
|
4090
|
+
|
|
4091
|
+
[vars$u.knobSize]: `calc(1em - ${knobMargin})`,
|
|
4092
|
+
[vars$u.knobRadius]: '50%',
|
|
4093
|
+
[vars$u.knobTopOffset]: '1px',
|
|
4094
|
+
[vars$u.knobLeftOffset]: knobMargin,
|
|
4095
|
+
[vars$u.knobColor]: refs.labelTextColor,
|
|
4096
|
+
[vars$u.knobTransitionDuration]: '0.3s',
|
|
4097
|
+
|
|
4098
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
4099
|
+
[vars$u.labelFontWeight]: '400',
|
|
4100
|
+
[vars$u.labelLineHeight]: '1.35em',
|
|
4101
|
+
[vars$u.labelSpacing]: '1em',
|
|
4102
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4103
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4102
4104
|
|
|
4103
4105
|
_checked: {
|
|
4104
|
-
[vars$
|
|
4105
|
-
[vars$
|
|
4106
|
-
[vars$
|
|
4107
|
-
[vars$
|
|
4106
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
|
4107
|
+
[vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
|
|
4108
|
+
[vars$u.knobColor]: refs.valueTextColor,
|
|
4109
|
+
[vars$u.knobTextColor]: refs.valueTextColor,
|
|
4108
4110
|
},
|
|
4109
4111
|
|
|
4110
4112
|
_disabled: {
|
|
4111
|
-
[vars$
|
|
4112
|
-
[vars$
|
|
4113
|
-
[vars$
|
|
4114
|
-
[vars$
|
|
4113
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
|
4114
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
|
|
4115
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
|
4116
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
4115
4117
|
_checked: {
|
|
4116
|
-
[vars$
|
|
4117
|
-
[vars$
|
|
4118
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
|
4119
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
|
4118
4120
|
},
|
|
4119
4121
|
},
|
|
4120
4122
|
|
|
4121
4123
|
_invalid: {
|
|
4122
|
-
[vars$
|
|
4123
|
-
[vars$
|
|
4124
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
|
|
4125
|
+
[vars$u.knobColor]: globalRefs$j.colors.error.main,
|
|
4124
4126
|
},
|
|
4125
4127
|
};
|
|
4126
4128
|
|
|
4127
4129
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
4128
4130
|
__proto__: null,
|
|
4129
4131
|
default: switchToggle,
|
|
4130
|
-
vars: vars$
|
|
4132
|
+
vars: vars$u
|
|
4131
4133
|
});
|
|
4132
4134
|
|
|
4133
|
-
const componentName$
|
|
4135
|
+
const componentName$C = getComponentName('container');
|
|
4134
4136
|
|
|
4135
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
4137
|
+
class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
|
|
4136
4138
|
constructor() {
|
|
4137
4139
|
super();
|
|
4138
4140
|
|
|
@@ -4185,7 +4187,7 @@ const ContainerClass = compose(
|
|
|
4185
4187
|
componentNameValidationMixin
|
|
4186
4188
|
)(RawContainer);
|
|
4187
4189
|
|
|
4188
|
-
const globalRefs$
|
|
4190
|
+
const globalRefs$i = getThemeRefs(globals);
|
|
4189
4191
|
|
|
4190
4192
|
const compVars$4 = ContainerClass.cssVarList;
|
|
4191
4193
|
|
|
@@ -4207,7 +4209,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
4207
4209
|
horizontalAlignment,
|
|
4208
4210
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
4209
4211
|
},
|
|
4210
|
-
componentName$
|
|
4212
|
+
componentName$C
|
|
4211
4213
|
);
|
|
4212
4214
|
|
|
4213
4215
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
@@ -4217,10 +4219,10 @@ const container = {
|
|
|
4217
4219
|
|
|
4218
4220
|
[compVars$4.hostWidth]: '100%',
|
|
4219
4221
|
[compVars$4.boxShadow]: 'none',
|
|
4220
|
-
[compVars$4.backgroundColor]: globalRefs$
|
|
4221
|
-
[compVars$4.color]: globalRefs$
|
|
4222
|
+
[compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
|
|
4223
|
+
[compVars$4.color]: globalRefs$i.colors.surface.contrast,
|
|
4222
4224
|
[compVars$4.borderRadius]: '0px',
|
|
4223
|
-
[compVars$4.hostDirection]: globalRefs$
|
|
4225
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
|
4224
4226
|
|
|
4225
4227
|
verticalPadding: {
|
|
4226
4228
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
|
@@ -4266,34 +4268,34 @@ const container = {
|
|
|
4266
4268
|
|
|
4267
4269
|
shadow: {
|
|
4268
4270
|
sm: {
|
|
4269
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4271
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
|
|
4270
4272
|
},
|
|
4271
4273
|
md: {
|
|
4272
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4274
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
|
|
4273
4275
|
},
|
|
4274
4276
|
lg: {
|
|
4275
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4277
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
|
|
4276
4278
|
},
|
|
4277
4279
|
xl: {
|
|
4278
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4280
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
|
|
4279
4281
|
},
|
|
4280
4282
|
'2xl': {
|
|
4281
4283
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
4282
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4284
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
|
|
4283
4285
|
},
|
|
4284
4286
|
},
|
|
4285
4287
|
|
|
4286
4288
|
borderRadius: {
|
|
4287
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
|
4288
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
|
4289
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
|
4290
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
|
4291
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4292
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4289
|
+
sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
|
|
4290
|
+
md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
|
|
4291
|
+
lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
|
|
4292
|
+
xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
|
|
4293
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
|
|
4294
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
|
|
4293
4295
|
},
|
|
4294
4296
|
};
|
|
4295
4297
|
|
|
4296
|
-
const vars$
|
|
4298
|
+
const vars$t = {
|
|
4297
4299
|
...compVars$4,
|
|
4298
4300
|
...helperVars$2,
|
|
4299
4301
|
};
|
|
@@ -4301,7 +4303,7 @@ const vars$s = {
|
|
|
4301
4303
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
4302
4304
|
__proto__: null,
|
|
4303
4305
|
default: container,
|
|
4304
|
-
vars: vars$
|
|
4306
|
+
vars: vars$t
|
|
4305
4307
|
});
|
|
4306
4308
|
|
|
4307
4309
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -4354,71 +4356,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
4354
4356
|
return CssVarImageClass;
|
|
4355
4357
|
};
|
|
4356
4358
|
|
|
4357
|
-
const componentName$
|
|
4359
|
+
const componentName$B = getComponentName('logo');
|
|
4358
4360
|
|
|
4359
4361
|
const LogoClass = createCssVarImageClass({
|
|
4360
|
-
componentName: componentName$
|
|
4362
|
+
componentName: componentName$B,
|
|
4361
4363
|
varName: 'url',
|
|
4362
4364
|
fallbackVarName: 'fallbackUrl',
|
|
4363
4365
|
});
|
|
4364
4366
|
|
|
4365
|
-
const vars$
|
|
4367
|
+
const vars$s = LogoClass.cssVarList;
|
|
4366
4368
|
|
|
4367
4369
|
const logo$2 = {
|
|
4368
|
-
[vars$
|
|
4370
|
+
[vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
4369
4371
|
};
|
|
4370
4372
|
|
|
4371
4373
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
|
4372
4374
|
__proto__: null,
|
|
4373
4375
|
default: logo$2,
|
|
4374
|
-
vars: vars$
|
|
4376
|
+
vars: vars$s
|
|
4375
4377
|
});
|
|
4376
4378
|
|
|
4377
|
-
const componentName$
|
|
4379
|
+
const componentName$A = getComponentName('totp-image');
|
|
4378
4380
|
|
|
4379
4381
|
const TotpImageClass = createCssVarImageClass({
|
|
4380
|
-
componentName: componentName$
|
|
4382
|
+
componentName: componentName$A,
|
|
4381
4383
|
varName: 'url',
|
|
4382
4384
|
fallbackVarName: 'fallbackUrl',
|
|
4383
4385
|
});
|
|
4384
4386
|
|
|
4385
|
-
const vars$
|
|
4387
|
+
const vars$r = TotpImageClass.cssVarList;
|
|
4386
4388
|
|
|
4387
4389
|
const logo$1 = {
|
|
4388
|
-
[vars$
|
|
4390
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
4389
4391
|
};
|
|
4390
4392
|
|
|
4391
4393
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
4392
4394
|
__proto__: null,
|
|
4393
4395
|
default: logo$1,
|
|
4394
|
-
vars: vars$
|
|
4396
|
+
vars: vars$r
|
|
4395
4397
|
});
|
|
4396
4398
|
|
|
4397
|
-
const componentName$
|
|
4399
|
+
const componentName$z = getComponentName('notp-image');
|
|
4398
4400
|
|
|
4399
4401
|
const NotpImageClass = createCssVarImageClass({
|
|
4400
|
-
componentName: componentName$
|
|
4402
|
+
componentName: componentName$z,
|
|
4401
4403
|
varName: 'url',
|
|
4402
4404
|
fallbackVarName: 'fallbackUrl',
|
|
4403
4405
|
});
|
|
4404
4406
|
|
|
4405
|
-
const vars$
|
|
4407
|
+
const vars$q = NotpImageClass.cssVarList;
|
|
4406
4408
|
|
|
4407
4409
|
const logo = {
|
|
4408
|
-
[vars$
|
|
4410
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
|
4409
4411
|
};
|
|
4410
4412
|
|
|
4411
4413
|
var notpImage = /*#__PURE__*/Object.freeze({
|
|
4412
4414
|
__proto__: null,
|
|
4413
4415
|
default: logo,
|
|
4414
|
-
vars: vars$
|
|
4416
|
+
vars: vars$q
|
|
4415
4417
|
});
|
|
4416
4418
|
|
|
4417
4419
|
// eslint-disable-next-line max-classes-per-file
|
|
4418
4420
|
|
|
4419
|
-
const componentName$
|
|
4421
|
+
const componentName$y = getComponentName('text');
|
|
4420
4422
|
|
|
4421
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
4423
|
+
class RawText extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > slot' }) {
|
|
4422
4424
|
constructor() {
|
|
4423
4425
|
super();
|
|
4424
4426
|
|
|
@@ -4478,99 +4480,99 @@ const TextClass = compose(
|
|
|
4478
4480
|
customTextMixin
|
|
4479
4481
|
)(RawText);
|
|
4480
4482
|
|
|
4481
|
-
const globalRefs$
|
|
4482
|
-
const vars$
|
|
4483
|
+
const globalRefs$h = getThemeRefs(globals);
|
|
4484
|
+
const vars$p = TextClass.cssVarList;
|
|
4483
4485
|
|
|
4484
4486
|
const text$2 = {
|
|
4485
|
-
[vars$
|
|
4486
|
-
[vars$
|
|
4487
|
-
[vars$
|
|
4488
|
-
[vars$
|
|
4487
|
+
[vars$p.hostDirection]: globalRefs$h.direction,
|
|
4488
|
+
[vars$p.textLineHeight]: '1.35em',
|
|
4489
|
+
[vars$p.textAlign]: 'left',
|
|
4490
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
|
4489
4491
|
variant: {
|
|
4490
4492
|
h1: {
|
|
4491
|
-
[vars$
|
|
4492
|
-
[vars$
|
|
4493
|
-
[vars$
|
|
4493
|
+
[vars$p.fontSize]: globalRefs$h.typography.h1.size,
|
|
4494
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
|
|
4495
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h1.font,
|
|
4494
4496
|
},
|
|
4495
4497
|
h2: {
|
|
4496
|
-
[vars$
|
|
4497
|
-
[vars$
|
|
4498
|
-
[vars$
|
|
4498
|
+
[vars$p.fontSize]: globalRefs$h.typography.h2.size,
|
|
4499
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
|
|
4500
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h2.font,
|
|
4499
4501
|
},
|
|
4500
4502
|
h3: {
|
|
4501
|
-
[vars$
|
|
4502
|
-
[vars$
|
|
4503
|
-
[vars$
|
|
4503
|
+
[vars$p.fontSize]: globalRefs$h.typography.h3.size,
|
|
4504
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
|
|
4505
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h3.font,
|
|
4504
4506
|
},
|
|
4505
4507
|
subtitle1: {
|
|
4506
|
-
[vars$
|
|
4507
|
-
[vars$
|
|
4508
|
-
[vars$
|
|
4508
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
|
|
4509
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
|
|
4510
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
|
|
4509
4511
|
},
|
|
4510
4512
|
subtitle2: {
|
|
4511
|
-
[vars$
|
|
4512
|
-
[vars$
|
|
4513
|
-
[vars$
|
|
4513
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
|
|
4514
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
|
|
4515
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
|
|
4514
4516
|
},
|
|
4515
4517
|
body1: {
|
|
4516
|
-
[vars$
|
|
4517
|
-
[vars$
|
|
4518
|
-
[vars$
|
|
4518
|
+
[vars$p.fontSize]: globalRefs$h.typography.body1.size,
|
|
4519
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
|
|
4520
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body1.font,
|
|
4519
4521
|
},
|
|
4520
4522
|
body2: {
|
|
4521
|
-
[vars$
|
|
4522
|
-
[vars$
|
|
4523
|
-
[vars$
|
|
4523
|
+
[vars$p.fontSize]: globalRefs$h.typography.body2.size,
|
|
4524
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
|
|
4525
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body2.font,
|
|
4524
4526
|
},
|
|
4525
4527
|
},
|
|
4526
4528
|
|
|
4527
4529
|
mode: {
|
|
4528
4530
|
primary: {
|
|
4529
|
-
[vars$
|
|
4531
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.contrast,
|
|
4530
4532
|
},
|
|
4531
4533
|
secondary: {
|
|
4532
|
-
[vars$
|
|
4534
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
|
4533
4535
|
},
|
|
4534
4536
|
error: {
|
|
4535
|
-
[vars$
|
|
4537
|
+
[vars$p.textColor]: globalRefs$h.colors.error.main,
|
|
4536
4538
|
},
|
|
4537
4539
|
success: {
|
|
4538
|
-
[vars$
|
|
4540
|
+
[vars$p.textColor]: globalRefs$h.colors.success.main,
|
|
4539
4541
|
},
|
|
4540
4542
|
},
|
|
4541
4543
|
|
|
4542
4544
|
textAlign: {
|
|
4543
|
-
right: { [vars$
|
|
4544
|
-
left: { [vars$
|
|
4545
|
-
center: { [vars$
|
|
4545
|
+
right: { [vars$p.textAlign]: 'right' },
|
|
4546
|
+
left: { [vars$p.textAlign]: 'left' },
|
|
4547
|
+
center: { [vars$p.textAlign]: 'center' },
|
|
4546
4548
|
},
|
|
4547
4549
|
|
|
4548
4550
|
_fullWidth: {
|
|
4549
|
-
[vars$
|
|
4551
|
+
[vars$p.hostWidth]: '100%',
|
|
4550
4552
|
},
|
|
4551
4553
|
|
|
4552
4554
|
_italic: {
|
|
4553
|
-
[vars$
|
|
4555
|
+
[vars$p.fontStyle]: 'italic',
|
|
4554
4556
|
},
|
|
4555
4557
|
|
|
4556
4558
|
_uppercase: {
|
|
4557
|
-
[vars$
|
|
4559
|
+
[vars$p.textTransform]: 'uppercase',
|
|
4558
4560
|
},
|
|
4559
4561
|
|
|
4560
4562
|
_lowercase: {
|
|
4561
|
-
[vars$
|
|
4563
|
+
[vars$p.textTransform]: 'lowercase',
|
|
4562
4564
|
},
|
|
4563
4565
|
};
|
|
4564
4566
|
|
|
4565
4567
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
4566
4568
|
__proto__: null,
|
|
4567
4569
|
default: text$2,
|
|
4568
|
-
vars: vars$
|
|
4570
|
+
vars: vars$p
|
|
4569
4571
|
});
|
|
4570
4572
|
|
|
4571
|
-
const componentName$
|
|
4573
|
+
const componentName$x = getComponentName('link');
|
|
4572
4574
|
|
|
4573
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
4575
|
+
class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
|
|
4574
4576
|
constructor() {
|
|
4575
4577
|
super();
|
|
4576
4578
|
|
|
@@ -4616,12 +4618,12 @@ const selectors$2 = {
|
|
|
4616
4618
|
text: { selector: () => TextClass.componentName },
|
|
4617
4619
|
};
|
|
4618
4620
|
|
|
4619
|
-
const { anchor, text: text$1, host: host$
|
|
4621
|
+
const { anchor, text: text$1, host: host$g, wrapper: wrapper$1 } = selectors$2;
|
|
4620
4622
|
|
|
4621
4623
|
const LinkClass = compose(
|
|
4622
4624
|
createStyleMixin({
|
|
4623
4625
|
mappings: {
|
|
4624
|
-
hostWidth: { ...host$
|
|
4626
|
+
hostWidth: { ...host$g, property: 'width' },
|
|
4625
4627
|
hostDirection: { ...text$1, property: 'direction' },
|
|
4626
4628
|
textAlign: wrapper$1,
|
|
4627
4629
|
textColor: [
|
|
@@ -4635,37 +4637,37 @@ const LinkClass = compose(
|
|
|
4635
4637
|
componentNameValidationMixin
|
|
4636
4638
|
)(RawLink);
|
|
4637
4639
|
|
|
4638
|
-
const globalRefs$
|
|
4639
|
-
const vars$
|
|
4640
|
+
const globalRefs$g = getThemeRefs(globals);
|
|
4641
|
+
const vars$o = LinkClass.cssVarList;
|
|
4640
4642
|
|
|
4641
4643
|
const link = {
|
|
4642
|
-
[vars$
|
|
4643
|
-
[vars$
|
|
4644
|
+
[vars$o.hostDirection]: globalRefs$g.direction,
|
|
4645
|
+
[vars$o.cursor]: 'pointer',
|
|
4644
4646
|
|
|
4645
|
-
[vars$
|
|
4647
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
|
4646
4648
|
|
|
4647
4649
|
textAlign: {
|
|
4648
|
-
right: { [vars$
|
|
4649
|
-
left: { [vars$
|
|
4650
|
-
center: { [vars$
|
|
4650
|
+
right: { [vars$o.textAlign]: 'right' },
|
|
4651
|
+
left: { [vars$o.textAlign]: 'left' },
|
|
4652
|
+
center: { [vars$o.textAlign]: 'center' },
|
|
4651
4653
|
},
|
|
4652
4654
|
|
|
4653
4655
|
_fullWidth: {
|
|
4654
|
-
[vars$
|
|
4656
|
+
[vars$o.hostWidth]: '100%',
|
|
4655
4657
|
},
|
|
4656
4658
|
|
|
4657
4659
|
mode: {
|
|
4658
4660
|
primary: {
|
|
4659
|
-
[vars$
|
|
4661
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
|
4660
4662
|
},
|
|
4661
4663
|
secondary: {
|
|
4662
|
-
[vars$
|
|
4664
|
+
[vars$o.textColor]: globalRefs$g.colors.secondary.main,
|
|
4663
4665
|
},
|
|
4664
4666
|
error: {
|
|
4665
|
-
[vars$
|
|
4667
|
+
[vars$o.textColor]: globalRefs$g.colors.error.main,
|
|
4666
4668
|
},
|
|
4667
4669
|
success: {
|
|
4668
|
-
[vars$
|
|
4670
|
+
[vars$o.textColor]: globalRefs$g.colors.success.main,
|
|
4669
4671
|
},
|
|
4670
4672
|
},
|
|
4671
4673
|
};
|
|
@@ -4673,11 +4675,11 @@ const link = {
|
|
|
4673
4675
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
4674
4676
|
__proto__: null,
|
|
4675
4677
|
default: link,
|
|
4676
|
-
vars: vars$
|
|
4678
|
+
vars: vars$o
|
|
4677
4679
|
});
|
|
4678
4680
|
|
|
4679
|
-
const componentName$
|
|
4680
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
4681
|
+
const componentName$w = getComponentName('divider');
|
|
4682
|
+
class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
|
|
4681
4683
|
constructor() {
|
|
4682
4684
|
super();
|
|
4683
4685
|
|
|
@@ -4723,7 +4725,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$v, baseS
|
|
|
4723
4725
|
}
|
|
4724
4726
|
|
|
4725
4727
|
const textVars$3 = TextClass.cssVarList;
|
|
4726
|
-
const { host: host$
|
|
4728
|
+
const { host: host$f, before, after: after$1, text } = {
|
|
4727
4729
|
host: { selector: () => ':host' },
|
|
4728
4730
|
before: { selector: '::before' },
|
|
4729
4731
|
after: { selector: '::after' },
|
|
@@ -4733,8 +4735,8 @@ const { host: host$e, before, after: after$1, text } = {
|
|
|
4733
4735
|
const DividerClass = compose(
|
|
4734
4736
|
createStyleMixin({
|
|
4735
4737
|
mappings: {
|
|
4736
|
-
hostWidth: { ...host$
|
|
4737
|
-
hostPadding: { ...host$
|
|
4738
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
4739
|
+
hostPadding: { ...host$f, property: 'padding' },
|
|
4738
4740
|
hostDirection: { ...text, property: 'direction' },
|
|
4739
4741
|
|
|
4740
4742
|
minHeight: {},
|
|
@@ -4776,7 +4778,7 @@ const DividerClass = compose(
|
|
|
4776
4778
|
componentNameValidationMixin
|
|
4777
4779
|
)(RawDivider);
|
|
4778
4780
|
|
|
4779
|
-
const globalRefs$
|
|
4781
|
+
const globalRefs$f = getThemeRefs(globals);
|
|
4780
4782
|
const compVars$3 = DividerClass.cssVarList;
|
|
4781
4783
|
|
|
4782
4784
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -4784,18 +4786,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
4784
4786
|
thickness: '2px',
|
|
4785
4787
|
spacing: '10px',
|
|
4786
4788
|
},
|
|
4787
|
-
componentName$
|
|
4789
|
+
componentName$w
|
|
4788
4790
|
);
|
|
4789
4791
|
|
|
4790
4792
|
const divider = {
|
|
4791
4793
|
...helperTheme$1,
|
|
4792
4794
|
|
|
4793
|
-
[compVars$3.hostDirection]: globalRefs$
|
|
4795
|
+
[compVars$3.hostDirection]: globalRefs$f.direction,
|
|
4794
4796
|
[compVars$3.alignItems]: 'center',
|
|
4795
4797
|
[compVars$3.flexDirection]: 'row',
|
|
4796
4798
|
[compVars$3.alignSelf]: 'stretch',
|
|
4797
4799
|
[compVars$3.hostWidth]: '100%',
|
|
4798
|
-
[compVars$3.stripeColor]: globalRefs$
|
|
4800
|
+
[compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
|
|
4799
4801
|
[compVars$3.stripeColorOpacity]: '0.5',
|
|
4800
4802
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
4801
4803
|
[compVars$3.labelTextWidth]: 'fit-content',
|
|
@@ -4815,7 +4817,7 @@ const divider = {
|
|
|
4815
4817
|
},
|
|
4816
4818
|
};
|
|
4817
4819
|
|
|
4818
|
-
const vars$
|
|
4820
|
+
const vars$n = {
|
|
4819
4821
|
...compVars$3,
|
|
4820
4822
|
...helperVars$1,
|
|
4821
4823
|
};
|
|
@@ -4823,18 +4825,18 @@ const vars$m = {
|
|
|
4823
4825
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
4824
4826
|
__proto__: null,
|
|
4825
4827
|
default: divider,
|
|
4826
|
-
vars: vars$
|
|
4828
|
+
vars: vars$n
|
|
4827
4829
|
});
|
|
4828
4830
|
|
|
4829
4831
|
/* eslint-disable no-param-reassign */
|
|
4830
4832
|
|
|
4831
|
-
const componentName$
|
|
4833
|
+
const componentName$v = getComponentName('passcode-internal');
|
|
4832
4834
|
|
|
4833
|
-
createBaseInputClass({ componentName: componentName$
|
|
4835
|
+
createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
|
|
4834
4836
|
|
|
4835
|
-
const componentName$
|
|
4837
|
+
const componentName$u = getComponentName('loader-radial');
|
|
4836
4838
|
|
|
4837
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
4839
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
|
|
4838
4840
|
constructor() {
|
|
4839
4841
|
super();
|
|
4840
4842
|
|
|
@@ -4878,7 +4880,7 @@ const LoaderRadialClass = compose(
|
|
|
4878
4880
|
componentNameValidationMixin
|
|
4879
4881
|
)(RawLoaderRadial);
|
|
4880
4882
|
|
|
4881
|
-
const componentName$
|
|
4883
|
+
const componentName$t = getComponentName('passcode');
|
|
4882
4884
|
|
|
4883
4885
|
const observedAttributes$3 = ['digits'];
|
|
4884
4886
|
|
|
@@ -4897,17 +4899,17 @@ const customMixin$6 = (superclass) =>
|
|
|
4897
4899
|
const template = document.createElement('template');
|
|
4898
4900
|
|
|
4899
4901
|
template.innerHTML = `
|
|
4900
|
-
<${componentName$
|
|
4902
|
+
<${componentName$v}
|
|
4901
4903
|
bordered="true"
|
|
4902
4904
|
name="code"
|
|
4903
4905
|
tabindex="-1"
|
|
4904
4906
|
slot="input"
|
|
4905
|
-
><slot></slot></${componentName$
|
|
4907
|
+
><slot></slot></${componentName$v}>
|
|
4906
4908
|
`;
|
|
4907
4909
|
|
|
4908
4910
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
4909
4911
|
|
|
4910
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
4912
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$v);
|
|
4911
4913
|
|
|
4912
4914
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
|
4913
4915
|
}
|
|
@@ -4922,7 +4924,7 @@ const customMixin$6 = (superclass) =>
|
|
|
4922
4924
|
};
|
|
4923
4925
|
|
|
4924
4926
|
const {
|
|
4925
|
-
host: host$
|
|
4927
|
+
host: host$e,
|
|
4926
4928
|
digitField,
|
|
4927
4929
|
label: label$6,
|
|
4928
4930
|
requiredIndicator: requiredIndicator$6,
|
|
@@ -4945,10 +4947,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
|
4945
4947
|
const PasscodeClass = compose(
|
|
4946
4948
|
createStyleMixin({
|
|
4947
4949
|
mappings: {
|
|
4948
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
4950
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
|
|
4949
4951
|
hostWidth: { property: 'width' },
|
|
4950
|
-
hostDirection: { ...host$
|
|
4951
|
-
fontFamily: [host$
|
|
4952
|
+
hostDirection: { ...host$e, property: 'direction' },
|
|
4953
|
+
fontFamily: [host$e, { ...label$6 }],
|
|
4952
4954
|
labelTextColor: [
|
|
4953
4955
|
{ ...label$6, property: 'color' },
|
|
4954
4956
|
{ ...requiredIndicator$6, property: 'color' },
|
|
@@ -5054,56 +5056,56 @@ const PasscodeClass = compose(
|
|
|
5054
5056
|
${resetInputCursor('vaadin-text-field')}
|
|
5055
5057
|
`,
|
|
5056
5058
|
excludeAttrsSync: ['tabindex'],
|
|
5057
|
-
componentName: componentName$
|
|
5059
|
+
componentName: componentName$t,
|
|
5058
5060
|
})
|
|
5059
5061
|
);
|
|
5060
5062
|
|
|
5061
|
-
const vars$
|
|
5063
|
+
const vars$m = PasscodeClass.cssVarList;
|
|
5062
5064
|
|
|
5063
5065
|
const passcode = {
|
|
5064
|
-
[vars$
|
|
5065
|
-
[vars$
|
|
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$
|
|
5066
|
+
[vars$m.hostDirection]: refs.direction,
|
|
5067
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
|
5068
|
+
[vars$m.fontSize]: refs.fontSize,
|
|
5069
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
|
5070
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5071
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5072
|
+
[vars$m.digitValueTextColor]: refs.valueTextColor,
|
|
5073
|
+
[vars$m.digitPadding]: '0',
|
|
5074
|
+
[vars$m.digitTextAlign]: 'center',
|
|
5075
|
+
[vars$m.digitSpacing]: '4px',
|
|
5076
|
+
[vars$m.hostWidth]: refs.width,
|
|
5077
|
+
[vars$m.digitOutlineColor]: 'transparent',
|
|
5078
|
+
[vars$m.digitOutlineWidth]: refs.outlineWidth,
|
|
5079
|
+
[vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
5080
|
+
[vars$m.digitSize]: refs.inputHeight,
|
|
5079
5081
|
|
|
5080
5082
|
size: {
|
|
5081
|
-
xs: { [vars$
|
|
5082
|
-
sm: { [vars$
|
|
5083
|
-
md: { [vars$
|
|
5084
|
-
lg: { [vars$
|
|
5083
|
+
xs: { [vars$m.spinnerSize]: '15px' },
|
|
5084
|
+
sm: { [vars$m.spinnerSize]: '20px' },
|
|
5085
|
+
md: { [vars$m.spinnerSize]: '20px' },
|
|
5086
|
+
lg: { [vars$m.spinnerSize]: '20px' },
|
|
5085
5087
|
},
|
|
5086
5088
|
|
|
5087
5089
|
_hideCursor: {
|
|
5088
|
-
[vars$
|
|
5090
|
+
[vars$m.digitCaretTextColor]: 'transparent',
|
|
5089
5091
|
},
|
|
5090
5092
|
|
|
5091
5093
|
_loading: {
|
|
5092
|
-
[vars$
|
|
5094
|
+
[vars$m.overlayOpacity]: refs.overlayOpacity,
|
|
5093
5095
|
},
|
|
5094
5096
|
};
|
|
5095
5097
|
|
|
5096
5098
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
5097
5099
|
__proto__: null,
|
|
5098
5100
|
default: passcode,
|
|
5099
|
-
vars: vars$
|
|
5101
|
+
vars: vars$m
|
|
5100
5102
|
});
|
|
5101
5103
|
|
|
5102
|
-
const componentName$
|
|
5104
|
+
const componentName$s = getComponentName('loader-linear');
|
|
5103
5105
|
|
|
5104
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
5106
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
|
5105
5107
|
static get componentName() {
|
|
5106
|
-
return componentName$
|
|
5108
|
+
return componentName$s;
|
|
5107
5109
|
}
|
|
5108
5110
|
|
|
5109
5111
|
constructor() {
|
|
@@ -5139,18 +5141,18 @@ const selectors$1 = {
|
|
|
5139
5141
|
host: { selector: () => ':host' },
|
|
5140
5142
|
};
|
|
5141
5143
|
|
|
5142
|
-
const { after, host: host$
|
|
5144
|
+
const { after, host: host$d } = selectors$1;
|
|
5143
5145
|
|
|
5144
5146
|
const LoaderLinearClass = compose(
|
|
5145
5147
|
createStyleMixin({
|
|
5146
5148
|
mappings: {
|
|
5147
5149
|
hostDisplay: {},
|
|
5148
|
-
hostWidth: { ...host$
|
|
5150
|
+
hostWidth: { ...host$d, property: 'width' },
|
|
5149
5151
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
5150
5152
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
5151
5153
|
verticalPadding: [
|
|
5152
|
-
{ ...host$
|
|
5153
|
-
{ ...host$
|
|
5154
|
+
{ ...host$d, property: 'padding-top' },
|
|
5155
|
+
{ ...host$d, property: 'padding-bottom' },
|
|
5154
5156
|
],
|
|
5155
5157
|
barBackgroundColor: { property: 'background-color' },
|
|
5156
5158
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -5164,67 +5166,67 @@ const LoaderLinearClass = compose(
|
|
|
5164
5166
|
componentNameValidationMixin
|
|
5165
5167
|
)(RawLoaderLinear);
|
|
5166
5168
|
|
|
5167
|
-
const globalRefs$
|
|
5168
|
-
const vars$
|
|
5169
|
+
const globalRefs$e = getThemeRefs(globals);
|
|
5170
|
+
const vars$l = LoaderLinearClass.cssVarList;
|
|
5169
5171
|
|
|
5170
5172
|
const loaderLinear = {
|
|
5171
|
-
[vars$
|
|
5172
|
-
[vars$
|
|
5173
|
+
[vars$l.hostDisplay]: 'inline-block',
|
|
5174
|
+
[vars$l.hostWidth]: '100%',
|
|
5173
5175
|
|
|
5174
|
-
[vars$
|
|
5175
|
-
[vars$
|
|
5176
|
+
[vars$l.barColor]: globalRefs$e.colors.surface.contrast,
|
|
5177
|
+
[vars$l.barWidth]: '20%',
|
|
5176
5178
|
|
|
5177
|
-
[vars$
|
|
5178
|
-
[vars$
|
|
5179
|
+
[vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
|
|
5180
|
+
[vars$l.barBorderRadius]: '4px',
|
|
5179
5181
|
|
|
5180
|
-
[vars$
|
|
5181
|
-
[vars$
|
|
5182
|
-
[vars$
|
|
5183
|
-
[vars$
|
|
5182
|
+
[vars$l.animationDuration]: '2s',
|
|
5183
|
+
[vars$l.animationTimingFunction]: 'linear',
|
|
5184
|
+
[vars$l.animationIterationCount]: 'infinite',
|
|
5185
|
+
[vars$l.verticalPadding]: '0.25em',
|
|
5184
5186
|
|
|
5185
5187
|
size: {
|
|
5186
|
-
xs: { [vars$
|
|
5187
|
-
sm: { [vars$
|
|
5188
|
-
md: { [vars$
|
|
5189
|
-
lg: { [vars$
|
|
5188
|
+
xs: { [vars$l.barHeight]: '2px' },
|
|
5189
|
+
sm: { [vars$l.barHeight]: '4px' },
|
|
5190
|
+
md: { [vars$l.barHeight]: '6px' },
|
|
5191
|
+
lg: { [vars$l.barHeight]: '8px' },
|
|
5190
5192
|
},
|
|
5191
5193
|
|
|
5192
5194
|
mode: {
|
|
5193
5195
|
primary: {
|
|
5194
|
-
[vars$
|
|
5196
|
+
[vars$l.barColor]: globalRefs$e.colors.primary.main,
|
|
5195
5197
|
},
|
|
5196
5198
|
secondary: {
|
|
5197
|
-
[vars$
|
|
5199
|
+
[vars$l.barColor]: globalRefs$e.colors.secondary.main,
|
|
5198
5200
|
},
|
|
5199
5201
|
},
|
|
5200
5202
|
|
|
5201
5203
|
_hidden: {
|
|
5202
|
-
[vars$
|
|
5204
|
+
[vars$l.hostDisplay]: 'none',
|
|
5203
5205
|
},
|
|
5204
5206
|
};
|
|
5205
5207
|
|
|
5206
5208
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
5207
5209
|
__proto__: null,
|
|
5208
5210
|
default: loaderLinear,
|
|
5209
|
-
vars: vars$
|
|
5211
|
+
vars: vars$l
|
|
5210
5212
|
});
|
|
5211
5213
|
|
|
5212
|
-
const globalRefs$
|
|
5214
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
5213
5215
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
|
5214
5216
|
|
|
5215
5217
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
5216
5218
|
{
|
|
5217
|
-
spinnerColor: globalRefs$
|
|
5219
|
+
spinnerColor: globalRefs$d.colors.surface.contrast,
|
|
5218
5220
|
mode: {
|
|
5219
5221
|
primary: {
|
|
5220
|
-
spinnerColor: globalRefs$
|
|
5222
|
+
spinnerColor: globalRefs$d.colors.primary.main,
|
|
5221
5223
|
},
|
|
5222
5224
|
secondary: {
|
|
5223
|
-
spinnerColor: globalRefs$
|
|
5225
|
+
spinnerColor: globalRefs$d.colors.secondary.main,
|
|
5224
5226
|
},
|
|
5225
5227
|
},
|
|
5226
5228
|
},
|
|
5227
|
-
componentName$
|
|
5229
|
+
componentName$u
|
|
5228
5230
|
);
|
|
5229
5231
|
|
|
5230
5232
|
const loaderRadial = {
|
|
@@ -5253,7 +5255,7 @@ const loaderRadial = {
|
|
|
5253
5255
|
[compVars$2.hostDisplay]: 'none',
|
|
5254
5256
|
},
|
|
5255
5257
|
};
|
|
5256
|
-
const vars$
|
|
5258
|
+
const vars$k = {
|
|
5257
5259
|
...compVars$2,
|
|
5258
5260
|
...helperVars,
|
|
5259
5261
|
};
|
|
@@ -5261,10 +5263,10 @@ const vars$j = {
|
|
|
5261
5263
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
5262
5264
|
__proto__: null,
|
|
5263
5265
|
default: loaderRadial,
|
|
5264
|
-
vars: vars$
|
|
5266
|
+
vars: vars$k
|
|
5265
5267
|
});
|
|
5266
5268
|
|
|
5267
|
-
const componentName$
|
|
5269
|
+
const componentName$r = getComponentName('combo-box');
|
|
5268
5270
|
|
|
5269
5271
|
const ComboBoxMixin = (superclass) =>
|
|
5270
5272
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -5490,7 +5492,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
5490
5492
|
};
|
|
5491
5493
|
|
|
5492
5494
|
const {
|
|
5493
|
-
host: host$
|
|
5495
|
+
host: host$c,
|
|
5494
5496
|
inputField: inputField$3,
|
|
5495
5497
|
inputElement: inputElement$1,
|
|
5496
5498
|
placeholder: placeholder$1,
|
|
@@ -5516,10 +5518,10 @@ const {
|
|
|
5516
5518
|
const ComboBoxClass = compose(
|
|
5517
5519
|
createStyleMixin({
|
|
5518
5520
|
mappings: {
|
|
5519
|
-
hostWidth: { ...host$
|
|
5520
|
-
hostDirection: { ...host$
|
|
5521
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
5522
|
+
hostDirection: { ...host$c, property: 'direction' },
|
|
5521
5523
|
// we apply font-size also on the host so we can set its width with em
|
|
5522
|
-
fontSize: [{}, host$
|
|
5524
|
+
fontSize: [{}, host$c],
|
|
5523
5525
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
|
5524
5526
|
labelTextColor: [
|
|
5525
5527
|
{ ...label$5, property: 'color' },
|
|
@@ -5647,71 +5649,71 @@ const ComboBoxClass = compose(
|
|
|
5647
5649
|
// and reset items to an empty array, and opening the list box with no items
|
|
5648
5650
|
// to display.
|
|
5649
5651
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
|
5650
|
-
componentName: componentName$
|
|
5652
|
+
componentName: componentName$r,
|
|
5651
5653
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
5652
5654
|
})
|
|
5653
5655
|
);
|
|
5654
5656
|
|
|
5655
|
-
const globalRefs$
|
|
5656
|
-
const vars$
|
|
5657
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
5658
|
+
const vars$j = ComboBoxClass.cssVarList;
|
|
5657
5659
|
|
|
5658
5660
|
const comboBox = {
|
|
5659
|
-
[vars$
|
|
5660
|
-
[vars$
|
|
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$
|
|
5661
|
+
[vars$j.hostWidth]: refs.width,
|
|
5662
|
+
[vars$j.hostDirection]: refs.direction,
|
|
5663
|
+
[vars$j.fontSize]: refs.fontSize,
|
|
5664
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
|
5665
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
5666
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5667
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
|
5668
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
|
5669
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
|
5670
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
|
5671
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
|
5672
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
|
5673
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
|
5674
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
|
5675
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5676
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
|
5677
|
+
[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5678
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
|
5679
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
|
5680
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
|
5681
|
+
[vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
|
|
5682
|
+
[vars$j.inputDropdownButtonCursor]: 'pointer',
|
|
5683
|
+
[vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
5684
|
+
[vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
|
|
5685
|
+
[vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
|
|
5686
|
+
[vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
|
|
5685
5687
|
|
|
5686
5688
|
_readonly: {
|
|
5687
|
-
[vars$
|
|
5689
|
+
[vars$j.inputDropdownButtonCursor]: 'default',
|
|
5688
5690
|
},
|
|
5689
5691
|
|
|
5690
5692
|
// Overlay theme exposed via the component:
|
|
5691
|
-
[vars$
|
|
5692
|
-
[vars$
|
|
5693
|
-
[vars$
|
|
5694
|
-
[vars$
|
|
5695
|
-
[vars$
|
|
5696
|
-
[vars$
|
|
5693
|
+
[vars$j.overlayFontSize]: refs.fontSize,
|
|
5694
|
+
[vars$j.overlayFontFamily]: refs.fontFamily,
|
|
5695
|
+
[vars$j.overlayCursor]: 'pointer',
|
|
5696
|
+
[vars$j.overlayItemBoxShadow]: 'none',
|
|
5697
|
+
[vars$j.overlayBackground]: refs.backgroundColor,
|
|
5698
|
+
[vars$j.overlayTextColor]: refs.valueTextColor,
|
|
5697
5699
|
|
|
5698
5700
|
// Overlay direct theme:
|
|
5699
|
-
[vars$
|
|
5700
|
-
[vars$
|
|
5701
|
+
[vars$j.overlay.minHeight]: '400px',
|
|
5702
|
+
[vars$j.overlay.margin]: '0',
|
|
5701
5703
|
};
|
|
5702
5704
|
|
|
5703
5705
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
5704
5706
|
__proto__: null,
|
|
5705
5707
|
comboBox: comboBox,
|
|
5706
5708
|
default: comboBox,
|
|
5707
|
-
vars: vars$
|
|
5709
|
+
vars: vars$j
|
|
5708
5710
|
});
|
|
5709
5711
|
|
|
5710
5712
|
const observedAttributes$2 = ['src', 'alt'];
|
|
5711
5713
|
|
|
5712
|
-
const componentName$
|
|
5714
|
+
const componentName$q = getComponentName('image');
|
|
5713
5715
|
|
|
5714
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
5716
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$q, baseSelector: ':host > img' });
|
|
5715
5717
|
class RawImage extends BaseClass$1 {
|
|
5716
5718
|
static get observedAttributes() {
|
|
5717
5719
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -5751,14 +5753,14 @@ const ImageClass = compose(
|
|
|
5751
5753
|
draggableMixin
|
|
5752
5754
|
)(RawImage);
|
|
5753
5755
|
|
|
5754
|
-
const vars$
|
|
5756
|
+
const vars$i = ImageClass.cssVarList;
|
|
5755
5757
|
|
|
5756
5758
|
const image = {};
|
|
5757
5759
|
|
|
5758
5760
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
5759
5761
|
__proto__: null,
|
|
5760
5762
|
default: image,
|
|
5761
|
-
vars: vars$
|
|
5763
|
+
vars: vars$i
|
|
5762
5764
|
});
|
|
5763
5765
|
|
|
5764
5766
|
var CountryCodes = [
|
|
@@ -6977,14 +6979,14 @@ var CountryCodes = [
|
|
|
6977
6979
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
|
6978
6980
|
];
|
|
6979
6981
|
|
|
6980
|
-
const componentName$
|
|
6982
|
+
const componentName$p = getComponentName('phone-field-internal');
|
|
6981
6983
|
|
|
6982
|
-
createBaseInputClass({ componentName: componentName$
|
|
6984
|
+
createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
|
6983
6985
|
|
|
6984
6986
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
6985
6987
|
const comboVars = ComboBoxClass.cssVarList;
|
|
6986
6988
|
|
|
6987
|
-
const componentName$
|
|
6989
|
+
const componentName$o = getComponentName('phone-field');
|
|
6988
6990
|
|
|
6989
6991
|
const customMixin$5 = (superclass) =>
|
|
6990
6992
|
class PhoneFieldMixinClass extends superclass {
|
|
@@ -6998,15 +7000,15 @@ const customMixin$5 = (superclass) =>
|
|
|
6998
7000
|
const template = document.createElement('template');
|
|
6999
7001
|
|
|
7000
7002
|
template.innerHTML = `
|
|
7001
|
-
<${componentName$
|
|
7003
|
+
<${componentName$p}
|
|
7002
7004
|
tabindex="-1"
|
|
7003
7005
|
slot="input"
|
|
7004
|
-
></${componentName$
|
|
7006
|
+
></${componentName$p}>
|
|
7005
7007
|
`;
|
|
7006
7008
|
|
|
7007
7009
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7008
7010
|
|
|
7009
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7011
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
|
7010
7012
|
|
|
7011
7013
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7012
7014
|
includeAttrs: [
|
|
@@ -7026,7 +7028,7 @@ const customMixin$5 = (superclass) =>
|
|
|
7026
7028
|
};
|
|
7027
7029
|
|
|
7028
7030
|
const {
|
|
7029
|
-
host: host$
|
|
7031
|
+
host: host$b,
|
|
7030
7032
|
label: label$4,
|
|
7031
7033
|
requiredIndicator: requiredIndicator$4,
|
|
7032
7034
|
inputField: inputField$2,
|
|
@@ -7051,7 +7053,7 @@ const PhoneFieldClass = compose(
|
|
|
7051
7053
|
createStyleMixin({
|
|
7052
7054
|
mappings: {
|
|
7053
7055
|
fontSize: [
|
|
7054
|
-
host$
|
|
7056
|
+
host$b,
|
|
7055
7057
|
inputField$2,
|
|
7056
7058
|
{
|
|
7057
7059
|
selector: TextFieldClass.componentName,
|
|
@@ -7072,11 +7074,11 @@ const PhoneFieldClass = compose(
|
|
|
7072
7074
|
},
|
|
7073
7075
|
],
|
|
7074
7076
|
hostWidth: [
|
|
7075
|
-
{ ...host$
|
|
7077
|
+
{ ...host$b, property: 'width' },
|
|
7076
7078
|
{ ...phoneInput$1, property: 'width' },
|
|
7077
7079
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
7078
7080
|
],
|
|
7079
|
-
hostDirection: { ...host$
|
|
7081
|
+
hostDirection: { ...host$b, property: 'direction' },
|
|
7080
7082
|
|
|
7081
7083
|
inputBorderStyle: [
|
|
7082
7084
|
{ ...inputField$2, property: 'border-style' },
|
|
@@ -7202,33 +7204,33 @@ const PhoneFieldClass = compose(
|
|
|
7202
7204
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7203
7205
|
`,
|
|
7204
7206
|
excludeAttrsSync: ['tabindex'],
|
|
7205
|
-
componentName: componentName$
|
|
7207
|
+
componentName: componentName$o,
|
|
7206
7208
|
})
|
|
7207
7209
|
);
|
|
7208
7210
|
|
|
7209
|
-
const vars$
|
|
7211
|
+
const vars$h = PhoneFieldClass.cssVarList;
|
|
7210
7212
|
|
|
7211
7213
|
const phoneField = {
|
|
7212
|
-
[vars$
|
|
7213
|
-
[vars$
|
|
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$
|
|
7214
|
+
[vars$h.hostWidth]: refs.width,
|
|
7215
|
+
[vars$h.hostDirection]: refs.direction,
|
|
7216
|
+
[vars$h.fontSize]: refs.fontSize,
|
|
7217
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
|
7218
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
|
7219
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7220
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7221
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
|
7222
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7223
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
|
7224
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
|
7225
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
|
7226
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
|
7227
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
|
7228
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
|
7229
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
|
7230
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
|
7231
|
+
[vars$h.phoneInputWidth]: refs.minWidth,
|
|
7232
|
+
[vars$h.countryCodeInputWidth]: '5em',
|
|
7233
|
+
[vars$h.countryCodeDropdownWidth]: '20em',
|
|
7232
7234
|
|
|
7233
7235
|
// '@overlay': {
|
|
7234
7236
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -7238,16 +7240,16 @@ const phoneField = {
|
|
|
7238
7240
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
7239
7241
|
__proto__: null,
|
|
7240
7242
|
default: phoneField,
|
|
7241
|
-
vars: vars$
|
|
7243
|
+
vars: vars$h
|
|
7242
7244
|
});
|
|
7243
7245
|
|
|
7244
|
-
const componentName$
|
|
7246
|
+
const componentName$n = getComponentName('phone-field-internal-input-box');
|
|
7245
7247
|
|
|
7246
|
-
createBaseInputClass({ componentName: componentName$
|
|
7248
|
+
createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
|
7247
7249
|
|
|
7248
7250
|
const textVars = TextFieldClass.cssVarList;
|
|
7249
7251
|
|
|
7250
|
-
const componentName$
|
|
7252
|
+
const componentName$m = getComponentName('phone-input-box-field');
|
|
7251
7253
|
|
|
7252
7254
|
const customMixin$4 = (superclass) =>
|
|
7253
7255
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
@@ -7261,15 +7263,15 @@ const customMixin$4 = (superclass) =>
|
|
|
7261
7263
|
const template = document.createElement('template');
|
|
7262
7264
|
|
|
7263
7265
|
template.innerHTML = `
|
|
7264
|
-
<${componentName$
|
|
7266
|
+
<${componentName$n}
|
|
7265
7267
|
tabindex="-1"
|
|
7266
7268
|
slot="input"
|
|
7267
|
-
></${componentName$
|
|
7269
|
+
></${componentName$n}>
|
|
7268
7270
|
`;
|
|
7269
7271
|
|
|
7270
7272
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7271
7273
|
|
|
7272
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7274
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
|
7273
7275
|
|
|
7274
7276
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7275
7277
|
includeAttrs: [
|
|
@@ -7286,7 +7288,7 @@ const customMixin$4 = (superclass) =>
|
|
|
7286
7288
|
}
|
|
7287
7289
|
};
|
|
7288
7290
|
|
|
7289
|
-
const { host: host$
|
|
7291
|
+
const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
|
7290
7292
|
host: { selector: () => ':host' },
|
|
7291
7293
|
label: { selector: '::part(label)' },
|
|
7292
7294
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -7300,7 +7302,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7300
7302
|
createStyleMixin({
|
|
7301
7303
|
mappings: {
|
|
7302
7304
|
fontSize: [
|
|
7303
|
-
host$
|
|
7305
|
+
host$a,
|
|
7304
7306
|
inputField$1,
|
|
7305
7307
|
{
|
|
7306
7308
|
selector: TextFieldClass.componentName,
|
|
@@ -7308,9 +7310,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7308
7310
|
},
|
|
7309
7311
|
],
|
|
7310
7312
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
|
7311
|
-
hostWidth: { ...host$
|
|
7312
|
-
hostMinWidth: { ...host$
|
|
7313
|
-
hostDirection: { ...host$
|
|
7313
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
7314
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
|
7315
|
+
hostDirection: { ...host$a, property: 'direction' },
|
|
7314
7316
|
|
|
7315
7317
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
|
7316
7318
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
|
@@ -7402,46 +7404,269 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7402
7404
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7403
7405
|
`,
|
|
7404
7406
|
excludeAttrsSync: ['tabindex'],
|
|
7405
|
-
componentName: componentName$
|
|
7407
|
+
componentName: componentName$m,
|
|
7406
7408
|
})
|
|
7407
7409
|
);
|
|
7408
7410
|
|
|
7409
|
-
const vars$
|
|
7411
|
+
const vars$g = PhoneFieldInputBoxClass.cssVarList;
|
|
7410
7412
|
|
|
7411
7413
|
const phoneInputBoxField = {
|
|
7412
|
-
[vars$
|
|
7413
|
-
[vars$
|
|
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$
|
|
7414
|
+
[vars$g.hostWidth]: '16em',
|
|
7415
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
|
7416
|
+
[vars$g.hostDirection]: refs.direction,
|
|
7417
|
+
[vars$g.fontSize]: refs.fontSize,
|
|
7418
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
|
7419
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
7420
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7421
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7422
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
|
7423
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7424
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
|
7425
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
|
7426
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
|
7427
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
|
7428
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
|
7429
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
|
7430
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
|
7431
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
|
7430
7432
|
_fullWidth: {
|
|
7431
|
-
[vars$
|
|
7433
|
+
[vars$g.hostWidth]: refs.width,
|
|
7432
7434
|
},
|
|
7433
7435
|
};
|
|
7434
7436
|
|
|
7435
7437
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
7436
7438
|
__proto__: null,
|
|
7437
7439
|
default: phoneInputBoxField,
|
|
7438
|
-
vars: vars$
|
|
7440
|
+
vars: vars$g
|
|
7439
7441
|
});
|
|
7440
7442
|
|
|
7441
|
-
const componentName$
|
|
7443
|
+
const componentName$l = getComponentName('new-password-internal');
|
|
7444
|
+
|
|
7445
|
+
const interpolateString = (template, values) =>
|
|
7446
|
+
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
|
7447
|
+
|
|
7448
|
+
// eslint-disable-next-line max-classes-per-file
|
|
7449
|
+
|
|
7450
|
+
const componentName$k = getComponentName('policy-validation');
|
|
7451
|
+
|
|
7452
|
+
const overrideAttrs = ['data-password-policy-value-minlength'];
|
|
7453
|
+
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
|
7454
|
+
const policyAttrs = ['label', 'value', ...dataAttrs];
|
|
7455
|
+
|
|
7456
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
|
|
7457
|
+
#availablePolicies;
|
|
7458
|
+
|
|
7459
|
+
#activePolicies = [];
|
|
7460
|
+
|
|
7461
|
+
#overrides;
|
|
7462
|
+
|
|
7463
|
+
static get observedAttributes() {
|
|
7464
|
+
return policyAttrs;
|
|
7465
|
+
}
|
|
7466
|
+
|
|
7467
|
+
constructor() {
|
|
7468
|
+
super();
|
|
7469
|
+
|
|
7470
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
|
7471
|
+
<div>
|
|
7472
|
+
<div class="label"></div>
|
|
7473
|
+
<ul></ul>
|
|
7474
|
+
</div>
|
|
7475
|
+
<style>
|
|
7476
|
+
:host > div {
|
|
7477
|
+
width: 100%;
|
|
7478
|
+
display: flex;
|
|
7479
|
+
flex-direction: column;
|
|
7480
|
+
box-sizing: border-box;
|
|
7481
|
+
}
|
|
7482
|
+
.label {
|
|
7483
|
+
max-width: 100%;
|
|
7484
|
+
text-wrap: wrap;
|
|
7485
|
+
overflow-wrap: break-word;
|
|
7486
|
+
}
|
|
7487
|
+
.hide-label .label {
|
|
7488
|
+
display: none;
|
|
7489
|
+
}
|
|
7490
|
+
ul {
|
|
7491
|
+
display: flex;
|
|
7492
|
+
flex-direction: column;
|
|
7493
|
+
padding: 0;
|
|
7494
|
+
margin: 0;
|
|
7495
|
+
}
|
|
7496
|
+
ul, li {
|
|
7497
|
+
margin: 0;
|
|
7498
|
+
padding: 0;
|
|
7499
|
+
list-style: none;
|
|
7500
|
+
}
|
|
7501
|
+
li::before {
|
|
7502
|
+
display: inline-block;
|
|
7503
|
+
width: 1em;
|
|
7504
|
+
text-align: center;
|
|
7505
|
+
}
|
|
7506
|
+
</style>
|
|
7507
|
+
`;
|
|
7508
|
+
|
|
7509
|
+
this.panel = this.shadowRoot.querySelector(':host > div');
|
|
7510
|
+
this.label = this.shadowRoot.querySelector('.label');
|
|
7511
|
+
this.list = this.shadowRoot.querySelector('ul');
|
|
7512
|
+
}
|
|
7513
|
+
|
|
7514
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
7515
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
|
7516
|
+
if (oldValue !== newValue) {
|
|
7517
|
+
if (attrName === 'label') {
|
|
7518
|
+
this.updateLabel(newValue);
|
|
7519
|
+
}
|
|
7520
|
+
|
|
7521
|
+
// we're don't know the order in which the attributes are forwarded, so we're trying to render every time
|
|
7522
|
+
// once `data` and `active-policies` are populated, the render will be executed.
|
|
7523
|
+
// once the `overrides` object is updated, we want to re-render the panel.
|
|
7524
|
+
if (dataAttrs.includes(attrName)) {
|
|
7525
|
+
if (attrName === 'data') {
|
|
7526
|
+
try {
|
|
7527
|
+
this.availablePolicies = JSON.parse(newValue);
|
|
7528
|
+
} catch {
|
|
7529
|
+
// eslint-disable-next-line no-console
|
|
7530
|
+
console.error('Failed to set available policies');
|
|
7531
|
+
}
|
|
7532
|
+
}
|
|
7533
|
+
if (attrName === 'active-policies') {
|
|
7534
|
+
this.#activePolicies = (newValue || '').split(',');
|
|
7535
|
+
}
|
|
7536
|
+
|
|
7537
|
+
if (attrName === 'data-password-policy-value-minlength') {
|
|
7538
|
+
const ln = Number(newValue);
|
|
7539
|
+
if (!Number.isNaN(ln) && ln > 0) {
|
|
7540
|
+
this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
|
|
7541
|
+
}
|
|
7542
|
+
}
|
|
7543
|
+
}
|
|
7544
|
+
|
|
7545
|
+
this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
|
|
7546
|
+
}
|
|
7547
|
+
}
|
|
7548
|
+
|
|
7549
|
+
get availablePolicies() {
|
|
7550
|
+
return this.#availablePolicies || [];
|
|
7551
|
+
}
|
|
7552
|
+
|
|
7553
|
+
set availablePolicies(val) {
|
|
7554
|
+
this.#availablePolicies = val;
|
|
7555
|
+
}
|
|
7556
|
+
|
|
7557
|
+
get value() {
|
|
7558
|
+
return this.getAttribute('value') || '';
|
|
7559
|
+
}
|
|
7560
|
+
|
|
7561
|
+
validate() {
|
|
7562
|
+
let policies = this.#availablePolicies;
|
|
7563
|
+
|
|
7564
|
+
if (this.#overrides) {
|
|
7565
|
+
policies = this.#availablePolicies.map((policy) =>
|
|
7566
|
+
this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
|
|
7567
|
+
);
|
|
7568
|
+
}
|
|
7569
|
+
|
|
7570
|
+
return this.#activePolicies.reduce((results, id) => {
|
|
7571
|
+
const policy = policies.find((p) => p.id === id);
|
|
7572
|
+
|
|
7573
|
+
if (!policy) {
|
|
7574
|
+
return results;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
const { pattern, message, data } = policy;
|
|
7578
|
+
|
|
7579
|
+
if (!pattern || !message) {
|
|
7580
|
+
return results;
|
|
7581
|
+
}
|
|
7582
|
+
|
|
7583
|
+
const exp = new RegExp(interpolateString(pattern, data));
|
|
7584
|
+
|
|
7585
|
+
const validationResult = {
|
|
7586
|
+
valid: exp.test(this.value),
|
|
7587
|
+
message: interpolateString(message, data),
|
|
7588
|
+
id,
|
|
7589
|
+
};
|
|
7590
|
+
|
|
7591
|
+
results.push(validationResult);
|
|
7592
|
+
|
|
7593
|
+
return results;
|
|
7594
|
+
}, []);
|
|
7595
|
+
}
|
|
7596
|
+
|
|
7597
|
+
get isValid() {
|
|
7598
|
+
return !this.validate().some(({ valid }) => valid === false);
|
|
7599
|
+
}
|
|
7600
|
+
|
|
7601
|
+
getValidationItemTemplate({ valid, message }) {
|
|
7602
|
+
const status = !this.value ? 'none' : valid;
|
|
7603
|
+
return `
|
|
7604
|
+
<li class="item" data-valid="${status}">
|
|
7605
|
+
<span class="message">${message}</span>
|
|
7606
|
+
</li>
|
|
7607
|
+
`;
|
|
7608
|
+
}
|
|
7609
|
+
|
|
7610
|
+
renderItems(availablePolicies, activePolicies) {
|
|
7611
|
+
if (!availablePolicies || !activePolicies.length) {
|
|
7612
|
+
return;
|
|
7613
|
+
}
|
|
7614
|
+
|
|
7615
|
+
this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
|
|
7616
|
+
}
|
|
7617
|
+
|
|
7618
|
+
updateLabel(val) {
|
|
7619
|
+
if (!val) {
|
|
7620
|
+
this.classList.add('hide-label');
|
|
7621
|
+
this.label.innerHTML = '';
|
|
7622
|
+
} else {
|
|
7623
|
+
this.label.innerHTML = val;
|
|
7624
|
+
this.classList.remove('hide-label');
|
|
7625
|
+
}
|
|
7626
|
+
}
|
|
7627
|
+
}
|
|
7628
|
+
|
|
7629
|
+
const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
|
|
7630
|
+
host: { selector: () => ':host > div' },
|
|
7631
|
+
item: { selector: () => '.item' },
|
|
7632
|
+
symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
|
|
7633
|
+
symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
|
|
7634
|
+
symbolError: { selector: () => '.item[data-valid="false"]::before' },
|
|
7635
|
+
};
|
|
7636
|
+
|
|
7637
|
+
const PolicyValidationClass = compose(
|
|
7638
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
|
7639
|
+
createStyleMixin({
|
|
7640
|
+
mappings: {
|
|
7641
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
|
7642
|
+
fontSize: {},
|
|
7643
|
+
fontFamily: {},
|
|
7644
|
+
padding: {},
|
|
7645
|
+
borderWidth: { ...host$9, property: 'border-width' },
|
|
7646
|
+
borderStyle: { ...host$9, property: 'border-style' },
|
|
7647
|
+
borderColor: { ...host$9, property: 'border-color' },
|
|
7648
|
+
borderRadius: { ...host$9, property: 'border-radius' },
|
|
7649
|
+
backgroundColor: { ...host$9, property: 'background-color' },
|
|
7650
|
+
textColor: { property: 'color' },
|
|
7651
|
+
labelMargin: { ...host$9, property: 'gap' },
|
|
7652
|
+
itemsSpacing: { ...item, property: 'line-height' },
|
|
7653
|
+
itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
|
|
7654
|
+
itemSymbolErrorColor: { ...symbolError, property: 'color' },
|
|
7655
|
+
itemSymbolDefault: { ...symbolDefault, property: 'content' },
|
|
7656
|
+
itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
|
|
7657
|
+
itemSymbolError: { ...symbolError, property: 'content' },
|
|
7658
|
+
},
|
|
7659
|
+
}),
|
|
7660
|
+
draggableMixin,
|
|
7661
|
+
componentNameValidationMixin
|
|
7662
|
+
)(RawPolicyValidation);
|
|
7663
|
+
|
|
7664
|
+
customElements.define(componentName$k, PolicyValidationClass);
|
|
7442
7665
|
|
|
7443
7666
|
const componentName$j = getComponentName('new-password');
|
|
7444
7667
|
|
|
7668
|
+
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
|
7669
|
+
|
|
7445
7670
|
const customMixin$3 = (superclass) =>
|
|
7446
7671
|
class NewPasswordMixinClass extends superclass {
|
|
7447
7672
|
init() {
|
|
@@ -7450,16 +7675,16 @@ const customMixin$3 = (superclass) =>
|
|
|
7450
7675
|
const template = document.createElement('template');
|
|
7451
7676
|
|
|
7452
7677
|
template.innerHTML = `
|
|
7453
|
-
<${componentName$
|
|
7678
|
+
<${componentName$l}
|
|
7454
7679
|
name="new-password"
|
|
7455
7680
|
tabindex="-1"
|
|
7456
7681
|
slot="input"
|
|
7457
|
-
></${componentName$
|
|
7682
|
+
></${componentName$l}>
|
|
7458
7683
|
`;
|
|
7459
7684
|
|
|
7460
7685
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7461
7686
|
|
|
7462
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7687
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
|
7463
7688
|
|
|
7464
7689
|
forwardAttrs(this, this.inputElement, {
|
|
7465
7690
|
includeAttrs: [
|
|
@@ -7475,18 +7700,32 @@ const customMixin$3 = (superclass) =>
|
|
|
7475
7700
|
'invalid',
|
|
7476
7701
|
'readonly',
|
|
7477
7702
|
'draggable',
|
|
7703
|
+
'has-validation',
|
|
7704
|
+
'policy-label',
|
|
7705
|
+
'active-policies',
|
|
7706
|
+
'available-policies',
|
|
7707
|
+
'data-password-policy-value-minlength',
|
|
7478
7708
|
],
|
|
7479
7709
|
});
|
|
7480
7710
|
}
|
|
7481
7711
|
};
|
|
7482
7712
|
|
|
7483
|
-
const {
|
|
7713
|
+
const {
|
|
7714
|
+
host: host$8,
|
|
7715
|
+
label: label$2,
|
|
7716
|
+
internalInputsWrapper,
|
|
7717
|
+
errorMessage: errorMessage$3,
|
|
7718
|
+
helperText: helperText$2,
|
|
7719
|
+
passwordInput,
|
|
7720
|
+
policyPreview,
|
|
7721
|
+
} = {
|
|
7484
7722
|
host: { selector: () => ':host' },
|
|
7485
7723
|
label: { selector: '::part(label)' },
|
|
7486
7724
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
7487
7725
|
helperText: { selector: '::part(helper-text)' },
|
|
7488
7726
|
errorMessage: { selector: '::part(error-message)' },
|
|
7489
7727
|
passwordInput: { selector: 'descope-password' },
|
|
7728
|
+
policyPreview: { selector: 'descope-policy-validation' },
|
|
7490
7729
|
};
|
|
7491
7730
|
|
|
7492
7731
|
const NewPasswordClass = compose(
|
|
@@ -7510,6 +7749,11 @@ const NewPasswordClass = compose(
|
|
|
7510
7749
|
],
|
|
7511
7750
|
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
|
7512
7751
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
7752
|
+
policyPreviewBackgroundColor: {
|
|
7753
|
+
...policyPreview,
|
|
7754
|
+
property: policyPreviewVars.backgroundColor,
|
|
7755
|
+
},
|
|
7756
|
+
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
|
7513
7757
|
},
|
|
7514
7758
|
}),
|
|
7515
7759
|
draggableMixin,
|
|
@@ -7548,7 +7792,6 @@ const NewPasswordClass = compose(
|
|
|
7548
7792
|
-webkit-mask-image: none;
|
|
7549
7793
|
min-height: 0;
|
|
7550
7794
|
width: 100%;
|
|
7551
|
-
height: 100%;
|
|
7552
7795
|
padding: 0;
|
|
7553
7796
|
}
|
|
7554
7797
|
descope-new-password-internal > .wrapper {
|
|
@@ -7564,35 +7807,45 @@ const NewPasswordClass = compose(
|
|
|
7564
7807
|
descope-new-password-internal vaadin-password-field::before {
|
|
7565
7808
|
height: initial;
|
|
7566
7809
|
}
|
|
7810
|
+
descope-policy-validation {
|
|
7811
|
+
margin-top: 8px;
|
|
7812
|
+
display: flex;
|
|
7813
|
+
}
|
|
7814
|
+
descope-policy-validation.hidden {
|
|
7815
|
+
display: none;
|
|
7816
|
+
}
|
|
7567
7817
|
`,
|
|
7568
7818
|
excludeAttrsSync: ['tabindex'],
|
|
7569
7819
|
componentName: componentName$j,
|
|
7570
7820
|
})
|
|
7571
7821
|
);
|
|
7572
7822
|
|
|
7573
|
-
const
|
|
7823
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
7824
|
+
const vars$f = NewPasswordClass.cssVarList;
|
|
7574
7825
|
|
|
7575
7826
|
const newPassword = {
|
|
7576
|
-
[vars$
|
|
7577
|
-
[vars$
|
|
7578
|
-
[vars$
|
|
7579
|
-
[vars$
|
|
7580
|
-
[vars$
|
|
7581
|
-
[vars$
|
|
7582
|
-
[vars$
|
|
7827
|
+
[vars$f.hostWidth]: refs.width,
|
|
7828
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
|
7829
|
+
[vars$f.hostDirection]: refs.direction,
|
|
7830
|
+
[vars$f.fontSize]: refs.fontSize,
|
|
7831
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
|
7832
|
+
[vars$f.spaceBetweenInputs]: '1em',
|
|
7833
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7834
|
+
[vars$f.policyPreviewBackgroundColor]: 'none',
|
|
7835
|
+
[vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
|
|
7583
7836
|
|
|
7584
7837
|
_required: {
|
|
7585
7838
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
7586
7839
|
// That's why we fake the required indicator on each input.
|
|
7587
7840
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
7588
|
-
[vars$
|
|
7841
|
+
[vars$f.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
7589
7842
|
},
|
|
7590
7843
|
};
|
|
7591
7844
|
|
|
7592
7845
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
7593
7846
|
__proto__: null,
|
|
7594
7847
|
default: newPassword,
|
|
7595
|
-
vars: vars$
|
|
7848
|
+
vars: vars$f
|
|
7596
7849
|
});
|
|
7597
7850
|
|
|
7598
7851
|
const getFileBase64 = (fileObj) => {
|
|
@@ -7837,71 +8090,71 @@ const UploadFileClass = compose(
|
|
|
7837
8090
|
componentNameValidationMixin
|
|
7838
8091
|
)(RawUploadFile);
|
|
7839
8092
|
|
|
7840
|
-
const vars$
|
|
8093
|
+
const vars$e = UploadFileClass.cssVarList;
|
|
7841
8094
|
|
|
7842
8095
|
const uploadFile = {
|
|
7843
|
-
[vars$
|
|
7844
|
-
[vars$
|
|
7845
|
-
[vars$
|
|
8096
|
+
[vars$e.hostDirection]: refs.direction,
|
|
8097
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
|
8098
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
|
7846
8099
|
|
|
7847
|
-
[vars$
|
|
8100
|
+
[vars$e.iconSize]: '2em',
|
|
7848
8101
|
|
|
7849
|
-
[vars$
|
|
7850
|
-
[vars$
|
|
8102
|
+
[vars$e.hostPadding]: '0.75em',
|
|
8103
|
+
[vars$e.gap]: '0.5em',
|
|
7851
8104
|
|
|
7852
|
-
[vars$
|
|
7853
|
-
[vars$
|
|
7854
|
-
[vars$
|
|
8105
|
+
[vars$e.fontSize]: '16px',
|
|
8106
|
+
[vars$e.titleFontWeight]: '500',
|
|
8107
|
+
[vars$e.lineHeight]: '1em',
|
|
7855
8108
|
|
|
7856
|
-
[vars$
|
|
7857
|
-
[vars$
|
|
7858
|
-
[vars$
|
|
7859
|
-
[vars$
|
|
8109
|
+
[vars$e.borderWidth]: refs.borderWidth,
|
|
8110
|
+
[vars$e.borderColor]: refs.borderColor,
|
|
8111
|
+
[vars$e.borderRadius]: refs.borderRadius,
|
|
8112
|
+
[vars$e.borderStyle]: 'dashed',
|
|
7860
8113
|
|
|
7861
8114
|
_required: {
|
|
7862
|
-
[vars$
|
|
8115
|
+
[vars$e.requiredIndicator]: refs.requiredIndicator,
|
|
7863
8116
|
},
|
|
7864
8117
|
|
|
7865
8118
|
size: {
|
|
7866
8119
|
xs: {
|
|
7867
|
-
[vars$
|
|
7868
|
-
[vars$
|
|
7869
|
-
[vars$
|
|
7870
|
-
[vars$
|
|
7871
|
-
[vars$
|
|
8120
|
+
[vars$e.hostHeight]: '196px',
|
|
8121
|
+
[vars$e.hostWidth]: '200px',
|
|
8122
|
+
[vars$e.titleFontSize]: '0.875em',
|
|
8123
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
|
8124
|
+
[vars$e.lineHeight]: '1.25em',
|
|
7872
8125
|
},
|
|
7873
8126
|
sm: {
|
|
7874
|
-
[vars$
|
|
7875
|
-
[vars$
|
|
7876
|
-
[vars$
|
|
7877
|
-
[vars$
|
|
7878
|
-
[vars$
|
|
8127
|
+
[vars$e.hostHeight]: '216px',
|
|
8128
|
+
[vars$e.hostWidth]: '230px',
|
|
8129
|
+
[vars$e.titleFontSize]: '1em',
|
|
8130
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
|
8131
|
+
[vars$e.lineHeight]: '1.25em',
|
|
7879
8132
|
},
|
|
7880
8133
|
md: {
|
|
7881
|
-
[vars$
|
|
7882
|
-
[vars$
|
|
7883
|
-
[vars$
|
|
7884
|
-
[vars$
|
|
7885
|
-
[vars$
|
|
8134
|
+
[vars$e.hostHeight]: '256px',
|
|
8135
|
+
[vars$e.hostWidth]: '312px',
|
|
8136
|
+
[vars$e.titleFontSize]: '1.125em',
|
|
8137
|
+
[vars$e.descriptionFontSize]: '1em',
|
|
8138
|
+
[vars$e.lineHeight]: '1.5em',
|
|
7886
8139
|
},
|
|
7887
8140
|
lg: {
|
|
7888
|
-
[vars$
|
|
7889
|
-
[vars$
|
|
7890
|
-
[vars$
|
|
7891
|
-
[vars$
|
|
7892
|
-
[vars$
|
|
8141
|
+
[vars$e.hostHeight]: '280px',
|
|
8142
|
+
[vars$e.hostWidth]: '336px',
|
|
8143
|
+
[vars$e.titleFontSize]: '1.125em',
|
|
8144
|
+
[vars$e.descriptionFontSize]: '1.125em',
|
|
8145
|
+
[vars$e.lineHeight]: '1.75em',
|
|
7893
8146
|
},
|
|
7894
8147
|
},
|
|
7895
8148
|
|
|
7896
8149
|
_fullWidth: {
|
|
7897
|
-
[vars$
|
|
8150
|
+
[vars$e.hostWidth]: refs.width,
|
|
7898
8151
|
},
|
|
7899
8152
|
};
|
|
7900
8153
|
|
|
7901
8154
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7902
8155
|
__proto__: null,
|
|
7903
8156
|
default: uploadFile,
|
|
7904
|
-
vars: vars$
|
|
8157
|
+
vars: vars$e
|
|
7905
8158
|
});
|
|
7906
8159
|
|
|
7907
8160
|
const componentName$h = getComponentName('button-selection-group-item');
|
|
@@ -8014,39 +8267,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
|
8014
8267
|
componentNameValidationMixin
|
|
8015
8268
|
)(RawSelectItem);
|
|
8016
8269
|
|
|
8017
|
-
const globalRefs$
|
|
8270
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
8018
8271
|
|
|
8019
|
-
const vars$
|
|
8272
|
+
const vars$d = ButtonSelectionGroupItemClass.cssVarList;
|
|
8020
8273
|
|
|
8021
8274
|
const buttonSelectionGroupItem = {
|
|
8022
|
-
[vars$
|
|
8023
|
-
[vars$
|
|
8024
|
-
[vars$
|
|
8025
|
-
[vars$
|
|
8026
|
-
[vars$
|
|
8027
|
-
[vars$
|
|
8028
|
-
[vars$
|
|
8029
|
-
[vars$
|
|
8275
|
+
[vars$d.hostDirection]: 'inherit',
|
|
8276
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
|
|
8277
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
|
8278
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.light,
|
|
8279
|
+
[vars$d.borderStyle]: 'solid',
|
|
8280
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
|
8281
|
+
[vars$d.outlineColor]: 'transparent',
|
|
8282
|
+
[vars$d.borderWidth]: globalRefs$a.border.xs,
|
|
8030
8283
|
|
|
8031
8284
|
_hover: {
|
|
8032
|
-
[vars$
|
|
8285
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
|
|
8033
8286
|
},
|
|
8034
8287
|
|
|
8035
8288
|
_focused: {
|
|
8036
|
-
[vars$
|
|
8289
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.light,
|
|
8037
8290
|
},
|
|
8038
8291
|
|
|
8039
8292
|
_selected: {
|
|
8040
|
-
[vars$
|
|
8041
|
-
[vars$
|
|
8042
|
-
[vars$
|
|
8293
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
|
|
8294
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
|
|
8295
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
|
|
8043
8296
|
},
|
|
8044
8297
|
};
|
|
8045
8298
|
|
|
8046
8299
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8047
8300
|
__proto__: null,
|
|
8048
8301
|
default: buttonSelectionGroupItem,
|
|
8049
|
-
vars: vars$
|
|
8302
|
+
vars: vars$d
|
|
8050
8303
|
});
|
|
8051
8304
|
|
|
8052
8305
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
@@ -8430,7 +8683,7 @@ const ButtonSelectionGroupClass = compose(
|
|
|
8430
8683
|
})
|
|
8431
8684
|
);
|
|
8432
8685
|
|
|
8433
|
-
const globalRefs$
|
|
8686
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
8434
8687
|
|
|
8435
8688
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8436
8689
|
[vars.hostDirection]: refs.direction,
|
|
@@ -8438,20 +8691,20 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
|
8438
8691
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
8439
8692
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
8440
8693
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
8441
|
-
[vars.itemsSpacing]: globalRefs$
|
|
8694
|
+
[vars.itemsSpacing]: globalRefs$9.spacing.sm,
|
|
8442
8695
|
[vars.hostWidth]: refs.width,
|
|
8443
8696
|
});
|
|
8444
8697
|
|
|
8445
|
-
const vars$
|
|
8698
|
+
const vars$c = ButtonSelectionGroupClass.cssVarList;
|
|
8446
8699
|
|
|
8447
8700
|
const buttonSelectionGroup = {
|
|
8448
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8701
|
+
...createBaseButtonSelectionGroupMappings(vars$c),
|
|
8449
8702
|
};
|
|
8450
8703
|
|
|
8451
8704
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8452
8705
|
__proto__: null,
|
|
8453
8706
|
default: buttonSelectionGroup,
|
|
8454
|
-
vars: vars$
|
|
8707
|
+
vars: vars$c
|
|
8455
8708
|
});
|
|
8456
8709
|
|
|
8457
8710
|
const componentName$e = getComponentName('button-multi-selection-group-internal');
|
|
@@ -8610,16 +8863,16 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
|
8610
8863
|
})
|
|
8611
8864
|
);
|
|
8612
8865
|
|
|
8613
|
-
const vars$
|
|
8866
|
+
const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
|
|
8614
8867
|
|
|
8615
8868
|
const buttonMultiSelectionGroup = {
|
|
8616
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8869
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
|
8617
8870
|
};
|
|
8618
8871
|
|
|
8619
8872
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8620
8873
|
__proto__: null,
|
|
8621
8874
|
default: buttonMultiSelectionGroup,
|
|
8622
|
-
vars: vars$
|
|
8875
|
+
vars: vars$b
|
|
8623
8876
|
});
|
|
8624
8877
|
|
|
8625
8878
|
const componentName$c = getComponentName('modal');
|
|
@@ -8725,24 +8978,24 @@ const ModalClass = compose(
|
|
|
8725
8978
|
})
|
|
8726
8979
|
);
|
|
8727
8980
|
|
|
8728
|
-
const globalRefs$
|
|
8981
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
8729
8982
|
|
|
8730
8983
|
const compVars$1 = ModalClass.cssVarList;
|
|
8731
8984
|
|
|
8732
8985
|
const modal = {
|
|
8733
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
|
8734
|
-
[compVars$1.overlayShadow]: globalRefs$
|
|
8986
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
|
|
8987
|
+
[compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
|
|
8735
8988
|
[compVars$1.overlayWidth]: '540px',
|
|
8736
8989
|
};
|
|
8737
8990
|
|
|
8738
|
-
const vars$
|
|
8991
|
+
const vars$a = {
|
|
8739
8992
|
...compVars$1,
|
|
8740
8993
|
};
|
|
8741
8994
|
|
|
8742
8995
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
|
8743
8996
|
__proto__: null,
|
|
8744
8997
|
default: modal,
|
|
8745
|
-
vars: vars$
|
|
8998
|
+
vars: vars$a
|
|
8746
8999
|
});
|
|
8747
9000
|
|
|
8748
9001
|
const isValidDataType = (data) => {
|
|
@@ -8995,36 +9248,36 @@ const GridClass = compose(
|
|
|
8995
9248
|
})
|
|
8996
9249
|
);
|
|
8997
9250
|
|
|
8998
|
-
const globalRefs$
|
|
8999
|
-
const vars$
|
|
9251
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
9252
|
+
const vars$9 = GridClass.cssVarList;
|
|
9000
9253
|
|
|
9001
9254
|
const grid = {
|
|
9002
|
-
[vars$
|
|
9003
|
-
[vars$
|
|
9004
|
-
[vars$
|
|
9005
|
-
[vars$
|
|
9006
|
-
[vars$
|
|
9255
|
+
[vars$9.hostWidth]: '100%',
|
|
9256
|
+
[vars$9.hostHeight]: '100%',
|
|
9257
|
+
[vars$9.hostMinHeight]: '400px',
|
|
9258
|
+
[vars$9.fontWeight]: '400',
|
|
9259
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
|
9007
9260
|
|
|
9008
|
-
[vars$
|
|
9009
|
-
[vars$
|
|
9261
|
+
[vars$9.fontSize]: refs.fontSize,
|
|
9262
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
|
9010
9263
|
|
|
9011
|
-
[vars$
|
|
9012
|
-
[vars$
|
|
9013
|
-
[vars$
|
|
9264
|
+
[vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
|
|
9265
|
+
[vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
|
|
9266
|
+
[vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
|
|
9014
9267
|
|
|
9015
|
-
[vars$
|
|
9016
|
-
[vars$
|
|
9017
|
-
[vars$
|
|
9018
|
-
[vars$
|
|
9268
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
|
9269
|
+
[vars$9.borderStyle]: refs.borderStyle,
|
|
9270
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
|
9271
|
+
[vars$9.borderColor]: 'transparent',
|
|
9019
9272
|
|
|
9020
|
-
[vars$
|
|
9021
|
-
[vars$
|
|
9273
|
+
[vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
|
|
9274
|
+
[vars$9.separatorColor]: globalRefs$7.colors.surface.light,
|
|
9022
9275
|
|
|
9023
|
-
[vars$
|
|
9024
|
-
[vars$
|
|
9276
|
+
[vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
|
|
9277
|
+
[vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
|
|
9025
9278
|
|
|
9026
9279
|
_bordered: {
|
|
9027
|
-
[vars$
|
|
9280
|
+
[vars$9.borderColor]: refs.borderColor,
|
|
9028
9281
|
},
|
|
9029
9282
|
};
|
|
9030
9283
|
|
|
@@ -9032,7 +9285,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
|
9032
9285
|
__proto__: null,
|
|
9033
9286
|
default: grid,
|
|
9034
9287
|
grid: grid,
|
|
9035
|
-
vars: vars$
|
|
9288
|
+
vars: vars$9
|
|
9036
9289
|
});
|
|
9037
9290
|
|
|
9038
9291
|
const componentName$a = getComponentName('notification-card');
|
|
@@ -9147,50 +9400,50 @@ const NotificationCardClass = compose(
|
|
|
9147
9400
|
})
|
|
9148
9401
|
);
|
|
9149
9402
|
|
|
9150
|
-
const globalRefs$
|
|
9151
|
-
const vars$
|
|
9403
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
9404
|
+
const vars$8 = NotificationCardClass.cssVarList;
|
|
9152
9405
|
|
|
9153
9406
|
const shadowColor = '#00000020';
|
|
9154
9407
|
|
|
9155
9408
|
const notification = {
|
|
9156
|
-
[vars$
|
|
9157
|
-
[vars$
|
|
9158
|
-
[vars$
|
|
9159
|
-
[vars$
|
|
9160
|
-
[vars$
|
|
9161
|
-
[vars$
|
|
9162
|
-
[vars$
|
|
9163
|
-
[vars$
|
|
9164
|
-
[vars$
|
|
9409
|
+
[vars$8.hostMinWidth]: '415px',
|
|
9410
|
+
[vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
|
|
9411
|
+
[vars$8.fontSize]: globalRefs$6.typography.body1.size,
|
|
9412
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
|
9413
|
+
[vars$8.textColor]: globalRefs$6.colors.surface.contrast,
|
|
9414
|
+
[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
|
|
9415
|
+
[vars$8.verticalPadding]: '0.625em',
|
|
9416
|
+
[vars$8.horizontalPadding]: '1.5em',
|
|
9417
|
+
[vars$8.borderRadius]: globalRefs$6.radius.xs,
|
|
9165
9418
|
|
|
9166
9419
|
_bordered: {
|
|
9167
|
-
[vars$
|
|
9168
|
-
[vars$
|
|
9169
|
-
[vars$
|
|
9420
|
+
[vars$8.borderWidth]: globalRefs$6.border.sm,
|
|
9421
|
+
[vars$8.borderStyle]: 'solid',
|
|
9422
|
+
[vars$8.borderColor]: 'transparent',
|
|
9170
9423
|
},
|
|
9171
9424
|
|
|
9172
9425
|
size: {
|
|
9173
|
-
xs: { [vars$
|
|
9174
|
-
sm: { [vars$
|
|
9175
|
-
md: { [vars$
|
|
9176
|
-
lg: { [vars$
|
|
9426
|
+
xs: { [vars$8.fontSize]: '12px' },
|
|
9427
|
+
sm: { [vars$8.fontSize]: '14px' },
|
|
9428
|
+
md: { [vars$8.fontSize]: '16px' },
|
|
9429
|
+
lg: { [vars$8.fontSize]: '18px' },
|
|
9177
9430
|
},
|
|
9178
9431
|
|
|
9179
9432
|
mode: {
|
|
9180
9433
|
primary: {
|
|
9181
|
-
[vars$
|
|
9182
|
-
[vars$
|
|
9183
|
-
[vars$
|
|
9434
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
|
|
9435
|
+
[vars$8.textColor]: globalRefs$6.colors.primary.contrast,
|
|
9436
|
+
[vars$8.borderColor]: globalRefs$6.colors.primary.light,
|
|
9184
9437
|
},
|
|
9185
9438
|
success: {
|
|
9186
|
-
[vars$
|
|
9187
|
-
[vars$
|
|
9188
|
-
[vars$
|
|
9439
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.success.main,
|
|
9440
|
+
[vars$8.textColor]: globalRefs$6.colors.success.contrast,
|
|
9441
|
+
[vars$8.borderColor]: globalRefs$6.colors.success.light,
|
|
9189
9442
|
},
|
|
9190
9443
|
error: {
|
|
9191
|
-
[vars$
|
|
9192
|
-
[vars$
|
|
9193
|
-
[vars$
|
|
9444
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.error.main,
|
|
9445
|
+
[vars$8.textColor]: globalRefs$6.colors.error.contrast,
|
|
9446
|
+
[vars$8.borderColor]: globalRefs$6.colors.error.light,
|
|
9194
9447
|
},
|
|
9195
9448
|
},
|
|
9196
9449
|
};
|
|
@@ -9198,7 +9451,7 @@ const notification = {
|
|
|
9198
9451
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
|
9199
9452
|
__proto__: null,
|
|
9200
9453
|
default: notification,
|
|
9201
|
-
vars: vars$
|
|
9454
|
+
vars: vars$8
|
|
9202
9455
|
});
|
|
9203
9456
|
|
|
9204
9457
|
const componentName$9 = getComponentName('multi-select-combo-box');
|
|
@@ -9810,63 +10063,63 @@ const MultiSelectComboBoxClass = compose(
|
|
|
9810
10063
|
})
|
|
9811
10064
|
);
|
|
9812
10065
|
|
|
9813
|
-
const globalRefs$
|
|
9814
|
-
const vars$
|
|
10066
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
10067
|
+
const vars$7 = MultiSelectComboBoxClass.cssVarList;
|
|
9815
10068
|
|
|
9816
10069
|
const multiSelectComboBox = {
|
|
9817
|
-
[vars$
|
|
9818
|
-
[vars$
|
|
9819
|
-
[vars$
|
|
9820
|
-
[vars$
|
|
9821
|
-
[vars$
|
|
9822
|
-
[vars$
|
|
9823
|
-
[vars$
|
|
9824
|
-
[vars$
|
|
9825
|
-
[vars$
|
|
9826
|
-
[vars$
|
|
9827
|
-
[vars$
|
|
9828
|
-
[vars$
|
|
9829
|
-
[vars$
|
|
9830
|
-
[vars$
|
|
9831
|
-
[vars$
|
|
9832
|
-
[vars$
|
|
9833
|
-
[vars$
|
|
9834
|
-
[vars$
|
|
9835
|
-
[vars$
|
|
9836
|
-
[vars$
|
|
9837
|
-
[vars$
|
|
9838
|
-
[vars$
|
|
9839
|
-
[vars$
|
|
9840
|
-
[vars$
|
|
9841
|
-
[vars$
|
|
9842
|
-
[vars$
|
|
9843
|
-
[vars$
|
|
9844
|
-
[vars$
|
|
9845
|
-
[vars$
|
|
9846
|
-
[vars$
|
|
10070
|
+
[vars$7.hostWidth]: refs.width,
|
|
10071
|
+
[vars$7.hostDirection]: refs.direction,
|
|
10072
|
+
[vars$7.fontSize]: refs.fontSize,
|
|
10073
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
|
10074
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
|
10075
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
10076
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
|
10077
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
|
10078
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
|
10079
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
|
10080
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
|
10081
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
|
10082
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
|
10083
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
|
10084
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
|
10085
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
|
10086
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
10087
|
+
[vars$7.inputBackgroundColor]: refs.backgroundColor,
|
|
10088
|
+
[vars$7.inputHorizontalPadding]: refs.horizontalPadding,
|
|
10089
|
+
[vars$7.inputVerticalPadding]: refs.verticalPadding,
|
|
10090
|
+
[vars$7.inputHeight]: refs.inputHeight,
|
|
10091
|
+
[vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
|
|
10092
|
+
[vars$7.inputDropdownButtonCursor]: 'pointer',
|
|
10093
|
+
[vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
10094
|
+
[vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
|
|
10095
|
+
[vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
|
|
10096
|
+
[vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
|
|
10097
|
+
[vars$7.chipFontSize]: refs.chipFontSize,
|
|
10098
|
+
[vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
|
|
10099
|
+
[vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
|
|
9847
10100
|
|
|
9848
10101
|
_readonly: {
|
|
9849
|
-
[vars$
|
|
10102
|
+
[vars$7.inputDropdownButtonCursor]: 'default',
|
|
9850
10103
|
},
|
|
9851
10104
|
|
|
9852
10105
|
// Overlay theme exposed via the component:
|
|
9853
|
-
[vars$
|
|
9854
|
-
[vars$
|
|
9855
|
-
[vars$
|
|
9856
|
-
[vars$
|
|
9857
|
-
[vars$
|
|
9858
|
-
[vars$
|
|
10106
|
+
[vars$7.overlayFontSize]: refs.fontSize,
|
|
10107
|
+
[vars$7.overlayFontFamily]: refs.fontFamily,
|
|
10108
|
+
[vars$7.overlayCursor]: 'pointer',
|
|
10109
|
+
[vars$7.overlayItemBoxShadow]: 'none',
|
|
10110
|
+
[vars$7.overlayBackground]: refs.backgroundColor,
|
|
10111
|
+
[vars$7.overlayTextColor]: refs.valueTextColor,
|
|
9859
10112
|
|
|
9860
10113
|
// Overlay direct theme:
|
|
9861
|
-
[vars$
|
|
9862
|
-
[vars$
|
|
10114
|
+
[vars$7.overlay.minHeight]: '400px',
|
|
10115
|
+
[vars$7.overlay.margin]: '0',
|
|
9863
10116
|
};
|
|
9864
10117
|
|
|
9865
10118
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
|
9866
10119
|
__proto__: null,
|
|
9867
10120
|
default: multiSelectComboBox,
|
|
9868
10121
|
multiSelectComboBox: multiSelectComboBox,
|
|
9869
|
-
vars: vars$
|
|
10122
|
+
vars: vars$7
|
|
9870
10123
|
});
|
|
9871
10124
|
|
|
9872
10125
|
const componentName$8 = getComponentName('badge');
|
|
@@ -9922,66 +10175,66 @@ const BadgeClass = compose(
|
|
|
9922
10175
|
componentNameValidationMixin
|
|
9923
10176
|
)(RawBadge);
|
|
9924
10177
|
|
|
9925
|
-
const globalRefs$
|
|
9926
|
-
const vars$
|
|
10178
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
10179
|
+
const vars$6 = BadgeClass.cssVarList;
|
|
9927
10180
|
|
|
9928
10181
|
const badge$1 = {
|
|
9929
|
-
[vars$
|
|
9930
|
-
[vars$
|
|
10182
|
+
[vars$6.hostWidth]: 'fit-content',
|
|
10183
|
+
[vars$6.hostDirection]: globalRefs$4.direction,
|
|
9931
10184
|
|
|
9932
|
-
[vars$
|
|
10185
|
+
[vars$6.textAlign]: 'center',
|
|
9933
10186
|
|
|
9934
|
-
[vars$
|
|
9935
|
-
[vars$
|
|
10187
|
+
[vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
|
|
10188
|
+
[vars$6.fontWeight]: '400',
|
|
9936
10189
|
|
|
9937
|
-
[vars$
|
|
9938
|
-
[vars$
|
|
10190
|
+
[vars$6.verticalPadding]: '0.25em',
|
|
10191
|
+
[vars$6.horizontalPadding]: '0.5em',
|
|
9939
10192
|
|
|
9940
|
-
[vars$
|
|
9941
|
-
[vars$
|
|
9942
|
-
[vars$
|
|
9943
|
-
[vars$
|
|
10193
|
+
[vars$6.borderWidth]: globalRefs$4.border.xs,
|
|
10194
|
+
[vars$6.borderRadius]: globalRefs$4.radius.xs,
|
|
10195
|
+
[vars$6.borderColor]: 'transparent',
|
|
10196
|
+
[vars$6.borderStyle]: 'solid',
|
|
9944
10197
|
|
|
9945
10198
|
_fullWidth: {
|
|
9946
|
-
[vars$
|
|
10199
|
+
[vars$6.hostWidth]: '100%',
|
|
9947
10200
|
},
|
|
9948
10201
|
|
|
9949
10202
|
size: {
|
|
9950
|
-
xs: { [vars$
|
|
9951
|
-
sm: { [vars$
|
|
9952
|
-
md: { [vars$
|
|
9953
|
-
lg: { [vars$
|
|
10203
|
+
xs: { [vars$6.fontSize]: '12px' },
|
|
10204
|
+
sm: { [vars$6.fontSize]: '14px' },
|
|
10205
|
+
md: { [vars$6.fontSize]: '16px' },
|
|
10206
|
+
lg: { [vars$6.fontSize]: '18px' },
|
|
9954
10207
|
},
|
|
9955
10208
|
|
|
9956
10209
|
mode: {
|
|
9957
10210
|
default: {
|
|
9958
|
-
[vars$
|
|
10211
|
+
[vars$6.textColor]: globalRefs$4.colors.surface.dark,
|
|
9959
10212
|
_bordered: {
|
|
9960
|
-
[vars$
|
|
10213
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.light,
|
|
9961
10214
|
},
|
|
9962
10215
|
},
|
|
9963
10216
|
primary: {
|
|
9964
|
-
[vars$
|
|
10217
|
+
[vars$6.textColor]: globalRefs$4.colors.primary.main,
|
|
9965
10218
|
_bordered: {
|
|
9966
|
-
[vars$
|
|
10219
|
+
[vars$6.borderColor]: globalRefs$4.colors.primary.light,
|
|
9967
10220
|
},
|
|
9968
10221
|
},
|
|
9969
10222
|
secondary: {
|
|
9970
|
-
[vars$
|
|
10223
|
+
[vars$6.textColor]: globalRefs$4.colors.secondary.main,
|
|
9971
10224
|
_bordered: {
|
|
9972
|
-
[vars$
|
|
10225
|
+
[vars$6.borderColor]: globalRefs$4.colors.secondary.light,
|
|
9973
10226
|
},
|
|
9974
10227
|
},
|
|
9975
10228
|
error: {
|
|
9976
|
-
[vars$
|
|
10229
|
+
[vars$6.textColor]: globalRefs$4.colors.error.main,
|
|
9977
10230
|
_bordered: {
|
|
9978
|
-
[vars$
|
|
10231
|
+
[vars$6.borderColor]: globalRefs$4.colors.error.light,
|
|
9979
10232
|
},
|
|
9980
10233
|
},
|
|
9981
10234
|
success: {
|
|
9982
|
-
[vars$
|
|
10235
|
+
[vars$6.textColor]: globalRefs$4.colors.success.main,
|
|
9983
10236
|
_bordered: {
|
|
9984
|
-
[vars$
|
|
10237
|
+
[vars$6.borderColor]: globalRefs$4.colors.success.light,
|
|
9985
10238
|
},
|
|
9986
10239
|
},
|
|
9987
10240
|
},
|
|
@@ -9990,7 +10243,7 @@ const badge$1 = {
|
|
|
9990
10243
|
var badge$2 = /*#__PURE__*/Object.freeze({
|
|
9991
10244
|
__proto__: null,
|
|
9992
10245
|
default: badge$1,
|
|
9993
|
-
vars: vars$
|
|
10246
|
+
vars: vars$6
|
|
9994
10247
|
});
|
|
9995
10248
|
|
|
9996
10249
|
const componentName$7 = getComponentName('avatar');
|
|
@@ -10093,16 +10346,16 @@ const AvatarClass = compose(
|
|
|
10093
10346
|
componentNameValidationMixin
|
|
10094
10347
|
)(RawAvatar);
|
|
10095
10348
|
|
|
10096
|
-
const globalRefs$
|
|
10349
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
10097
10350
|
const compVars = AvatarClass.cssVarList;
|
|
10098
10351
|
|
|
10099
10352
|
const avatar = {
|
|
10100
|
-
[compVars.hostDirection]: globalRefs$
|
|
10101
|
-
[compVars.editableIconColor]: globalRefs$
|
|
10102
|
-
[compVars.editableBorderColor]: globalRefs$
|
|
10103
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
|
10104
|
-
[compVars.avatarTextColor]: globalRefs$
|
|
10105
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
|
10353
|
+
[compVars.hostDirection]: globalRefs$3.direction,
|
|
10354
|
+
[compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
|
|
10355
|
+
[compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
|
|
10356
|
+
[compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
|
|
10357
|
+
[compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
|
|
10358
|
+
[compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
|
|
10106
10359
|
|
|
10107
10360
|
_editable: {
|
|
10108
10361
|
[compVars.cursor]: 'pointer',
|
|
@@ -10128,14 +10381,14 @@ const avatar = {
|
|
|
10128
10381
|
},
|
|
10129
10382
|
};
|
|
10130
10383
|
|
|
10131
|
-
const vars$
|
|
10384
|
+
const vars$5 = {
|
|
10132
10385
|
...compVars,
|
|
10133
10386
|
};
|
|
10134
10387
|
|
|
10135
10388
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10136
10389
|
__proto__: null,
|
|
10137
10390
|
default: avatar,
|
|
10138
|
-
vars: vars$
|
|
10391
|
+
vars: vars$5
|
|
10139
10392
|
});
|
|
10140
10393
|
|
|
10141
10394
|
const componentName$6 = getComponentName('mappings-field-internal');
|
|
@@ -10311,34 +10564,34 @@ const MappingsFieldClass = compose(
|
|
|
10311
10564
|
})
|
|
10312
10565
|
);
|
|
10313
10566
|
|
|
10314
|
-
const globalRefs$
|
|
10567
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
10315
10568
|
|
|
10316
|
-
const vars$
|
|
10569
|
+
const vars$4 = MappingsFieldClass.cssVarList;
|
|
10317
10570
|
|
|
10318
10571
|
const mappingsField = {
|
|
10319
|
-
[vars$
|
|
10320
|
-
[vars$
|
|
10321
|
-
[vars$
|
|
10322
|
-
[vars$
|
|
10323
|
-
[vars$
|
|
10324
|
-
[vars$
|
|
10325
|
-
[vars$
|
|
10326
|
-
[vars$
|
|
10327
|
-
[vars$
|
|
10328
|
-
[vars$
|
|
10572
|
+
[vars$4.hostWidth]: refs.width,
|
|
10573
|
+
[vars$4.hostDirection]: refs.direction,
|
|
10574
|
+
[vars$4.fontSize]: refs.fontSize,
|
|
10575
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
|
10576
|
+
[vars$4.separatorFontSize]: '14px',
|
|
10577
|
+
[vars$4.labelsFontSize]: '14px',
|
|
10578
|
+
[vars$4.labelsLineHeight]: '1',
|
|
10579
|
+
[vars$4.labelsMarginBottom]: '6px',
|
|
10580
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
|
10581
|
+
[vars$4.itemMarginBottom]: '1em',
|
|
10329
10582
|
// To be positioned correctly, the min width has to match the text field min width
|
|
10330
|
-
[vars$
|
|
10583
|
+
[vars$4.valueLabelMinWidth]: refs.minWidth,
|
|
10331
10584
|
// To be positioned correctly, the min width has to match the combo box field min width
|
|
10332
|
-
[vars$
|
|
10333
|
-
[vars$
|
|
10334
|
-
[vars$
|
|
10585
|
+
[vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
|
|
10586
|
+
[vars$4.separatorWidth]: '70px',
|
|
10587
|
+
[vars$4.removeButtonWidth]: '60px',
|
|
10335
10588
|
};
|
|
10336
10589
|
|
|
10337
10590
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
|
10338
10591
|
__proto__: null,
|
|
10339
10592
|
default: mappingsField,
|
|
10340
10593
|
mappingsField: mappingsField,
|
|
10341
|
-
vars: vars$
|
|
10594
|
+
vars: vars$4
|
|
10342
10595
|
});
|
|
10343
10596
|
|
|
10344
10597
|
function deleteIcon() {
|
|
@@ -10568,25 +10821,25 @@ const UserAttributeClass = compose(
|
|
|
10568
10821
|
componentNameValidationMixin
|
|
10569
10822
|
)(RawUserAttribute);
|
|
10570
10823
|
|
|
10571
|
-
const globalRefs = getThemeRefs(globals);
|
|
10572
|
-
const vars$
|
|
10824
|
+
const globalRefs$1 = getThemeRefs(globals);
|
|
10825
|
+
const vars$3 = UserAttributeClass.cssVarList;
|
|
10573
10826
|
|
|
10574
10827
|
const userAttribute = {
|
|
10575
|
-
[vars$
|
|
10576
|
-
[vars$
|
|
10577
|
-
[vars$
|
|
10578
|
-
[vars$
|
|
10579
|
-
[vars$
|
|
10580
|
-
[vars$
|
|
10828
|
+
[vars$3.hostDirection]: globalRefs$1.direction,
|
|
10829
|
+
[vars$3.labelTextWidth]: '150px',
|
|
10830
|
+
[vars$3.valueTextWidth]: '200px',
|
|
10831
|
+
[vars$3.badgeMaxWidth]: '85px',
|
|
10832
|
+
[vars$3.itemsGap]: '16px',
|
|
10833
|
+
[vars$3.hostMinWidth]: '530px',
|
|
10581
10834
|
_fullWidth: {
|
|
10582
|
-
[vars$
|
|
10835
|
+
[vars$3.hostWidth]: '100%',
|
|
10583
10836
|
},
|
|
10584
10837
|
};
|
|
10585
10838
|
|
|
10586
10839
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
|
10587
10840
|
__proto__: null,
|
|
10588
10841
|
default: userAttribute,
|
|
10589
|
-
vars: vars$
|
|
10842
|
+
vars: vars$3
|
|
10590
10843
|
});
|
|
10591
10844
|
|
|
10592
10845
|
const componentName$3 = getComponentName('saml-group-mappings-internal');
|
|
@@ -10691,18 +10944,46 @@ const SamlGroupMappingsClass = compose(
|
|
|
10691
10944
|
})
|
|
10692
10945
|
);
|
|
10693
10946
|
|
|
10694
|
-
const vars$
|
|
10947
|
+
const vars$2 = SamlGroupMappingsClass.cssVarList;
|
|
10695
10948
|
|
|
10696
10949
|
const samlGroupMappings = {
|
|
10697
|
-
[vars$
|
|
10698
|
-
[vars$
|
|
10699
|
-
[vars$
|
|
10950
|
+
[vars$2.hostWidth]: refs.width,
|
|
10951
|
+
[vars$2.hostDirection]: refs.direction,
|
|
10952
|
+
[vars$2.groupNameInputMarginBottom]: '1em',
|
|
10700
10953
|
};
|
|
10701
10954
|
|
|
10702
10955
|
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
|
10703
10956
|
__proto__: null,
|
|
10704
10957
|
default: samlGroupMappings,
|
|
10705
10958
|
samlGroupMappings: samlGroupMappings,
|
|
10959
|
+
vars: vars$2
|
|
10960
|
+
});
|
|
10961
|
+
|
|
10962
|
+
const globalRefs = getThemeRefs(globals);
|
|
10963
|
+
const vars$1 = PolicyValidationClass.cssVarList;
|
|
10964
|
+
|
|
10965
|
+
const policyValidation = {
|
|
10966
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
|
10967
|
+
[vars$1.fontSize]: refs.labelFontSize,
|
|
10968
|
+
[vars$1.textColor]: refs.labelTextColor,
|
|
10969
|
+
[vars$1.borderWidth]: refs.borderWidth,
|
|
10970
|
+
[vars$1.borderStyle]: refs.borderStyle,
|
|
10971
|
+
[vars$1.borderColor]: refs.borderColor,
|
|
10972
|
+
[vars$1.borderRadius]: globalRefs.radius.sm,
|
|
10973
|
+
[vars$1.backgroundColor]: 'none',
|
|
10974
|
+
[vars$1.padding]: '0px',
|
|
10975
|
+
[vars$1.labelMargin]: globalRefs.spacing.sm,
|
|
10976
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.lg,
|
|
10977
|
+
[vars$1.itemSymbolDefault]: "'\\2022'", // "•"
|
|
10978
|
+
[vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
|
|
10979
|
+
[vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
|
|
10980
|
+
[vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
|
|
10981
|
+
[vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
|
|
10982
|
+
};
|
|
10983
|
+
|
|
10984
|
+
var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
|
10985
|
+
__proto__: null,
|
|
10986
|
+
default: policyValidation,
|
|
10706
10987
|
vars: vars$1
|
|
10707
10988
|
});
|
|
10708
10989
|
|
|
@@ -10744,6 +11025,7 @@ const components = {
|
|
|
10744
11025
|
mappingsField: mappingsField$1,
|
|
10745
11026
|
userAttribute: userAttribute$1,
|
|
10746
11027
|
samlGroupMappings: samlGroupMappings$1,
|
|
11028
|
+
policyValidation: policyValidation$1,
|
|
10747
11029
|
};
|
|
10748
11030
|
|
|
10749
11031
|
const theme = Object.keys(components).reduce(
|
|
@@ -10756,7 +11038,7 @@ const vars = Object.keys(components).reduce(
|
|
|
10756
11038
|
);
|
|
10757
11039
|
|
|
10758
11040
|
const defaultTheme = { globals, components: theme };
|
|
10759
|
-
const themeVars = { globals: vars$
|
|
11041
|
+
const themeVars = { globals: vars$D, components: vars };
|
|
10760
11042
|
|
|
10761
11043
|
const colors = {
|
|
10762
11044
|
surface: {
|
|
@@ -11085,6 +11367,7 @@ exports.PasscodeClass = PasscodeClass;
|
|
|
11085
11367
|
exports.PasswordClass = PasswordClass;
|
|
11086
11368
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
11087
11369
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
11370
|
+
exports.PolicyValidationClass = PolicyValidationClass;
|
|
11088
11371
|
exports.RecaptchaClass = RecaptchaClass;
|
|
11089
11372
|
exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
|
|
11090
11373
|
exports.SwitchToggleClass = SwitchToggleClass;
|