@descope/web-components-ui 1.0.289 → 1.0.290
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1144 -881
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1143 -879
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2106.js +1 -1
- package/dist/umd/7911.js +73 -0
- package/dist/umd/7911.js.LICENSE.txt +17 -0
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-badge-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/package.json +4 -2
- package/src/components/descope-avatar/AvatarClass.js +7 -5
- package/src/components/descope-badge/BadgeClass.js +3 -0
- package/src/components/descope-text/TextClass.js +1 -1
- package/src/components/descope-user-attribute/UserAttributeClass.js +228 -0
- package/src/components/descope-user-attribute/delete.svg +3 -0
- package/src/components/descope-user-attribute/edit.svg +3 -0
- package/src/components/descope-user-attribute/index.js +9 -0
- package/src/helpers/themeHelpers/componentsThemeManager.js +4 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/avatar.js +4 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/userAttribute.js +20 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -192,6 +192,10 @@ class ComponentsThemeManager {
|
|
|
192
192
|
this.#themes = themes;
|
|
193
193
|
this.#notify();
|
|
194
194
|
}
|
|
195
|
+
|
|
196
|
+
get hasThemes() {
|
|
197
|
+
return !!Object.keys(this.#themes).length;
|
|
198
|
+
}
|
|
195
199
|
}
|
|
196
200
|
|
|
197
201
|
const componentsThemeManager = new ComponentsThemeManager();
|
|
@@ -626,7 +630,7 @@ const globals = {
|
|
|
626
630
|
fonts,
|
|
627
631
|
direction,
|
|
628
632
|
};
|
|
629
|
-
const vars$
|
|
633
|
+
const vars$B = getThemeVars(globals);
|
|
630
634
|
|
|
631
635
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
|
632
636
|
|
|
@@ -2565,7 +2569,7 @@ const clickableMixin = (superclass) =>
|
|
|
2565
2569
|
}
|
|
2566
2570
|
};
|
|
2567
2571
|
|
|
2568
|
-
const componentName$
|
|
2572
|
+
const componentName$J = getComponentName('button');
|
|
2569
2573
|
|
|
2570
2574
|
const resetStyles = `
|
|
2571
2575
|
:host {
|
|
@@ -2603,7 +2607,7 @@ const iconStyles = `
|
|
|
2603
2607
|
|
|
2604
2608
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
2605
2609
|
|
|
2606
|
-
const { host: host$
|
|
2610
|
+
const { host: host$k, label: label$a } = {
|
|
2607
2611
|
host: { selector: () => ':host' },
|
|
2608
2612
|
label: { selector: '::part(label)' },
|
|
2609
2613
|
};
|
|
@@ -2615,7 +2619,7 @@ const ButtonClass = compose(
|
|
|
2615
2619
|
mappings: {
|
|
2616
2620
|
hostWidth: { property: 'width' },
|
|
2617
2621
|
hostHeight: { property: 'height' },
|
|
2618
|
-
hostDirection: { ...host$
|
|
2622
|
+
hostDirection: { ...host$k, property: 'direction' },
|
|
2619
2623
|
fontSize: {},
|
|
2620
2624
|
fontFamily: {},
|
|
2621
2625
|
|
|
@@ -2667,7 +2671,7 @@ const ButtonClass = compose(
|
|
|
2667
2671
|
}
|
|
2668
2672
|
`,
|
|
2669
2673
|
excludeAttrsSync: ['tabindex'],
|
|
2670
|
-
componentName: componentName$
|
|
2674
|
+
componentName: componentName$J,
|
|
2671
2675
|
})
|
|
2672
2676
|
);
|
|
2673
2677
|
|
|
@@ -2704,31 +2708,31 @@ loadingIndicatorStyles = `
|
|
|
2704
2708
|
}
|
|
2705
2709
|
`;
|
|
2706
2710
|
|
|
2707
|
-
const globalRefs$
|
|
2711
|
+
const globalRefs$k = getThemeRefs(globals);
|
|
2708
2712
|
const compVars$5 = ButtonClass.cssVarList;
|
|
2709
2713
|
|
|
2710
2714
|
const mode = {
|
|
2711
|
-
primary: globalRefs$
|
|
2712
|
-
secondary: globalRefs$
|
|
2713
|
-
success: globalRefs$
|
|
2714
|
-
error: globalRefs$
|
|
2715
|
-
surface: globalRefs$
|
|
2715
|
+
primary: globalRefs$k.colors.primary,
|
|
2716
|
+
secondary: globalRefs$k.colors.secondary,
|
|
2717
|
+
success: globalRefs$k.colors.success,
|
|
2718
|
+
error: globalRefs$k.colors.error,
|
|
2719
|
+
surface: globalRefs$k.colors.surface,
|
|
2716
2720
|
};
|
|
2717
2721
|
|
|
2718
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
2722
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$J);
|
|
2719
2723
|
|
|
2720
2724
|
const button = {
|
|
2721
2725
|
...helperTheme$3,
|
|
2722
2726
|
|
|
2723
|
-
[compVars$5.fontFamily]: globalRefs$
|
|
2727
|
+
[compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
|
|
2724
2728
|
|
|
2725
2729
|
[compVars$5.cursor]: 'pointer',
|
|
2726
2730
|
[compVars$5.hostHeight]: '3em',
|
|
2727
2731
|
[compVars$5.hostWidth]: 'auto',
|
|
2728
|
-
[compVars$5.hostDirection]: globalRefs$
|
|
2732
|
+
[compVars$5.hostDirection]: globalRefs$k.direction,
|
|
2729
2733
|
|
|
2730
|
-
[compVars$5.borderRadius]: globalRefs$
|
|
2731
|
-
[compVars$5.borderWidth]: globalRefs$
|
|
2734
|
+
[compVars$5.borderRadius]: globalRefs$k.radius.sm,
|
|
2735
|
+
[compVars$5.borderWidth]: globalRefs$k.border.xs,
|
|
2732
2736
|
[compVars$5.borderStyle]: 'solid',
|
|
2733
2737
|
[compVars$5.borderColor]: 'transparent',
|
|
2734
2738
|
|
|
@@ -2771,10 +2775,10 @@ const button = {
|
|
|
2771
2775
|
},
|
|
2772
2776
|
|
|
2773
2777
|
_disabled: {
|
|
2774
|
-
[helperVars$3.main]: globalRefs$
|
|
2775
|
-
[helperVars$3.dark]: globalRefs$
|
|
2776
|
-
[helperVars$3.light]: globalRefs$
|
|
2777
|
-
[helperVars$3.contrast]: globalRefs$
|
|
2778
|
+
[helperVars$3.main]: globalRefs$k.colors.surface.light,
|
|
2779
|
+
[helperVars$3.dark]: globalRefs$k.colors.surface.dark,
|
|
2780
|
+
[helperVars$3.light]: globalRefs$k.colors.surface.light,
|
|
2781
|
+
[helperVars$3.contrast]: globalRefs$k.colors.surface.main,
|
|
2778
2782
|
},
|
|
2779
2783
|
|
|
2780
2784
|
variant: {
|
|
@@ -2822,7 +2826,7 @@ const button = {
|
|
|
2822
2826
|
},
|
|
2823
2827
|
};
|
|
2824
2828
|
|
|
2825
|
-
const vars$
|
|
2829
|
+
const vars$A = {
|
|
2826
2830
|
...compVars$5,
|
|
2827
2831
|
...helperVars$3,
|
|
2828
2832
|
};
|
|
@@ -2830,11 +2834,11 @@ const vars$z = {
|
|
|
2830
2834
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
2831
2835
|
__proto__: null,
|
|
2832
2836
|
default: button,
|
|
2833
|
-
vars: vars$
|
|
2837
|
+
vars: vars$A
|
|
2834
2838
|
});
|
|
2835
2839
|
|
|
2836
2840
|
const {
|
|
2837
|
-
host: host$
|
|
2841
|
+
host: host$j,
|
|
2838
2842
|
label: label$9,
|
|
2839
2843
|
placeholder: placeholder$3,
|
|
2840
2844
|
requiredIndicator: requiredIndicator$b,
|
|
@@ -2859,12 +2863,12 @@ const {
|
|
|
2859
2863
|
|
|
2860
2864
|
var textFieldMappings = {
|
|
2861
2865
|
// we apply font-size also on the host so we can set its width with em
|
|
2862
|
-
fontSize: [{}, host$
|
|
2866
|
+
fontSize: [{}, host$j],
|
|
2863
2867
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
|
2864
2868
|
|
|
2865
|
-
hostWidth: { ...host$
|
|
2866
|
-
hostMinWidth: { ...host$
|
|
2867
|
-
hostDirection: { ...host$
|
|
2869
|
+
hostWidth: { ...host$j, property: 'width' },
|
|
2870
|
+
hostMinWidth: { ...host$j, property: 'min-width' },
|
|
2871
|
+
hostDirection: { ...host$j, property: 'direction' },
|
|
2868
2872
|
|
|
2869
2873
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
|
2870
2874
|
|
|
@@ -3038,7 +3042,7 @@ const resetInputLabelPosition = (name) => `
|
|
|
3038
3042
|
}
|
|
3039
3043
|
`;
|
|
3040
3044
|
|
|
3041
|
-
const componentName$
|
|
3045
|
+
const componentName$I = getComponentName('text-field');
|
|
3042
3046
|
|
|
3043
3047
|
const observedAttrs = ['type'];
|
|
3044
3048
|
|
|
@@ -3088,27 +3092,27 @@ const TextFieldClass = compose(
|
|
|
3088
3092
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
3089
3093
|
`,
|
|
3090
3094
|
excludeAttrsSync: ['tabindex'],
|
|
3091
|
-
componentName: componentName$
|
|
3095
|
+
componentName: componentName$I,
|
|
3092
3096
|
})
|
|
3093
3097
|
);
|
|
3094
3098
|
|
|
3095
|
-
const componentName$
|
|
3096
|
-
const globalRefs$
|
|
3099
|
+
const componentName$H = getComponentName('input-wrapper');
|
|
3100
|
+
const globalRefs$j = getThemeRefs(globals);
|
|
3097
3101
|
|
|
3098
|
-
const [theme$1, refs, vars$
|
|
3102
|
+
const [theme$1, refs, vars$z] = createHelperVars(
|
|
3099
3103
|
{
|
|
3100
|
-
labelTextColor: globalRefs$
|
|
3101
|
-
valueTextColor: globalRefs$
|
|
3102
|
-
placeholderTextColor: globalRefs$
|
|
3104
|
+
labelTextColor: globalRefs$j.colors.surface.dark,
|
|
3105
|
+
valueTextColor: globalRefs$j.colors.surface.contrast,
|
|
3106
|
+
placeholderTextColor: globalRefs$j.colors.surface.dark,
|
|
3103
3107
|
requiredIndicator: "'*'",
|
|
3104
|
-
errorMessageTextColor: globalRefs$
|
|
3105
|
-
helperTextColor: globalRefs$
|
|
3108
|
+
errorMessageTextColor: globalRefs$j.colors.error.main,
|
|
3109
|
+
helperTextColor: globalRefs$j.colors.surface.dark,
|
|
3106
3110
|
|
|
3107
|
-
borderWidth: globalRefs$
|
|
3108
|
-
borderRadius: globalRefs$
|
|
3111
|
+
borderWidth: globalRefs$j.border.xs,
|
|
3112
|
+
borderRadius: globalRefs$j.radius.xs,
|
|
3109
3113
|
borderColor: 'transparent',
|
|
3110
3114
|
|
|
3111
|
-
outlineWidth: globalRefs$
|
|
3115
|
+
outlineWidth: globalRefs$j.border.sm,
|
|
3112
3116
|
outlineStyle: 'solid',
|
|
3113
3117
|
outlineColor: 'transparent',
|
|
3114
3118
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
|
@@ -3119,11 +3123,11 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
|
3119
3123
|
horizontalPadding: '0.5em',
|
|
3120
3124
|
verticalPadding: '0.5em',
|
|
3121
3125
|
|
|
3122
|
-
backgroundColor: globalRefs$
|
|
3126
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
|
3123
3127
|
|
|
3124
|
-
fontFamily: globalRefs$
|
|
3128
|
+
fontFamily: globalRefs$j.fonts.font1.family,
|
|
3125
3129
|
|
|
3126
|
-
direction: globalRefs$
|
|
3130
|
+
direction: globalRefs$j.direction,
|
|
3127
3131
|
|
|
3128
3132
|
overlayOpacity: '0.3',
|
|
3129
3133
|
|
|
@@ -3139,69 +3143,69 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
|
3139
3143
|
},
|
|
3140
3144
|
|
|
3141
3145
|
_focused: {
|
|
3142
|
-
outlineColor: globalRefs$
|
|
3146
|
+
outlineColor: globalRefs$j.colors.surface.light,
|
|
3143
3147
|
_invalid: {
|
|
3144
|
-
outlineColor: globalRefs$
|
|
3148
|
+
outlineColor: globalRefs$j.colors.error.main,
|
|
3145
3149
|
},
|
|
3146
3150
|
},
|
|
3147
3151
|
|
|
3148
3152
|
_bordered: {
|
|
3149
|
-
outlineWidth: globalRefs$
|
|
3150
|
-
borderColor: globalRefs$
|
|
3153
|
+
outlineWidth: globalRefs$j.border.xs,
|
|
3154
|
+
borderColor: globalRefs$j.colors.surface.light,
|
|
3151
3155
|
borderStyle: 'solid',
|
|
3152
3156
|
_invalid: {
|
|
3153
|
-
borderColor: globalRefs$
|
|
3157
|
+
borderColor: globalRefs$j.colors.error.main,
|
|
3154
3158
|
},
|
|
3155
3159
|
},
|
|
3156
3160
|
|
|
3157
3161
|
_disabled: {
|
|
3158
|
-
labelTextColor: globalRefs$
|
|
3159
|
-
borderColor: globalRefs$
|
|
3160
|
-
valueTextColor: globalRefs$
|
|
3161
|
-
placeholderTextColor: globalRefs$
|
|
3162
|
-
helperTextColor: globalRefs$
|
|
3163
|
-
backgroundColor: globalRefs$
|
|
3162
|
+
labelTextColor: globalRefs$j.colors.surface.light,
|
|
3163
|
+
borderColor: globalRefs$j.colors.surface.light,
|
|
3164
|
+
valueTextColor: globalRefs$j.colors.surface.light,
|
|
3165
|
+
placeholderTextColor: globalRefs$j.colors.surface.light,
|
|
3166
|
+
helperTextColor: globalRefs$j.colors.surface.light,
|
|
3167
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
|
3164
3168
|
},
|
|
3165
3169
|
},
|
|
3166
|
-
componentName$
|
|
3170
|
+
componentName$H
|
|
3167
3171
|
);
|
|
3168
3172
|
|
|
3169
3173
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3170
3174
|
__proto__: null,
|
|
3171
3175
|
default: theme$1,
|
|
3172
3176
|
refs: refs,
|
|
3173
|
-
vars: vars$
|
|
3177
|
+
vars: vars$z
|
|
3174
3178
|
});
|
|
3175
3179
|
|
|
3176
|
-
const vars$
|
|
3180
|
+
const vars$y = TextFieldClass.cssVarList;
|
|
3177
3181
|
|
|
3178
3182
|
const textField = {
|
|
3179
|
-
[vars$
|
|
3180
|
-
[vars$
|
|
3181
|
-
[vars$
|
|
3182
|
-
[vars$
|
|
3183
|
-
[vars$
|
|
3184
|
-
[vars$
|
|
3185
|
-
[vars$
|
|
3186
|
-
[vars$
|
|
3187
|
-
[vars$
|
|
3188
|
-
[vars$
|
|
3189
|
-
[vars$
|
|
3190
|
-
[vars$
|
|
3191
|
-
[vars$
|
|
3192
|
-
[vars$
|
|
3193
|
-
[vars$
|
|
3194
|
-
[vars$
|
|
3195
|
-
[vars$
|
|
3196
|
-
[vars$
|
|
3197
|
-
[vars$
|
|
3198
|
-
[vars$
|
|
3199
|
-
[vars$
|
|
3200
|
-
[vars$
|
|
3183
|
+
[vars$y.hostWidth]: refs.width,
|
|
3184
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
|
3185
|
+
[vars$y.hostDirection]: refs.direction,
|
|
3186
|
+
[vars$y.fontSize]: refs.fontSize,
|
|
3187
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
|
3188
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
|
3189
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3190
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3191
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
|
3192
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3193
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
|
3194
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
|
3195
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
|
3196
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
|
3197
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
|
3198
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
|
3199
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
|
3200
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
|
3201
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
|
3202
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
|
3203
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3204
|
+
[vars$y.helperTextColor]: refs.helperTextColor,
|
|
3201
3205
|
textAlign: {
|
|
3202
|
-
right: { [vars$
|
|
3203
|
-
left: { [vars$
|
|
3204
|
-
center: { [vars$
|
|
3206
|
+
right: { [vars$y.inputTextAlign]: 'right' },
|
|
3207
|
+
left: { [vars$y.inputTextAlign]: 'left' },
|
|
3208
|
+
center: { [vars$y.inputTextAlign]: 'center' },
|
|
3205
3209
|
},
|
|
3206
3210
|
};
|
|
3207
3211
|
|
|
@@ -3209,7 +3213,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
|
3209
3213
|
__proto__: null,
|
|
3210
3214
|
default: textField,
|
|
3211
3215
|
textField: textField,
|
|
3212
|
-
vars: vars$
|
|
3216
|
+
vars: vars$y
|
|
3213
3217
|
});
|
|
3214
3218
|
|
|
3215
3219
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -3246,10 +3250,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
3246
3250
|
}
|
|
3247
3251
|
};
|
|
3248
3252
|
|
|
3249
|
-
const componentName$
|
|
3253
|
+
const componentName$G = getComponentName('password');
|
|
3250
3254
|
|
|
3251
3255
|
const {
|
|
3252
|
-
host: host$
|
|
3256
|
+
host: host$i,
|
|
3253
3257
|
inputField: inputField$5,
|
|
3254
3258
|
inputElement: inputElement$2,
|
|
3255
3259
|
inputElementPlaceholder,
|
|
@@ -3275,10 +3279,10 @@ const {
|
|
|
3275
3279
|
const PasswordClass = compose(
|
|
3276
3280
|
createStyleMixin({
|
|
3277
3281
|
mappings: {
|
|
3278
|
-
hostWidth: { ...host$
|
|
3279
|
-
hostMinWidth: { ...host$
|
|
3280
|
-
hostDirection: { ...host$
|
|
3281
|
-
fontSize: [{}, host$
|
|
3282
|
+
hostWidth: { ...host$i, property: 'width' },
|
|
3283
|
+
hostMinWidth: { ...host$i, property: 'min-width' },
|
|
3284
|
+
hostDirection: { ...host$i, property: 'direction' },
|
|
3285
|
+
fontSize: [{}, host$i],
|
|
3282
3286
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
|
3283
3287
|
inputHeight: { ...inputField$5, property: 'height' },
|
|
3284
3288
|
inputHorizontalPadding: [
|
|
@@ -3375,46 +3379,46 @@ const PasswordClass = compose(
|
|
|
3375
3379
|
}
|
|
3376
3380
|
`,
|
|
3377
3381
|
excludeAttrsSync: ['tabindex'],
|
|
3378
|
-
componentName: componentName$
|
|
3382
|
+
componentName: componentName$G,
|
|
3379
3383
|
})
|
|
3380
3384
|
);
|
|
3381
3385
|
|
|
3382
|
-
const globalRefs$
|
|
3383
|
-
const vars$
|
|
3386
|
+
const globalRefs$i = getThemeRefs(globals);
|
|
3387
|
+
const vars$x = PasswordClass.cssVarList;
|
|
3384
3388
|
|
|
3385
3389
|
const password = {
|
|
3386
|
-
[vars$
|
|
3387
|
-
[vars$
|
|
3388
|
-
[vars$
|
|
3389
|
-
[vars$
|
|
3390
|
-
[vars$
|
|
3391
|
-
[vars$
|
|
3392
|
-
[vars$
|
|
3393
|
-
[vars$
|
|
3394
|
-
[vars$
|
|
3395
|
-
[vars$
|
|
3396
|
-
[vars$
|
|
3397
|
-
[vars$
|
|
3398
|
-
[vars$
|
|
3399
|
-
[vars$
|
|
3400
|
-
[vars$
|
|
3401
|
-
[vars$
|
|
3402
|
-
[vars$
|
|
3403
|
-
[vars$
|
|
3404
|
-
[vars$
|
|
3405
|
-
[vars$
|
|
3406
|
-
[vars$
|
|
3407
|
-
[vars$
|
|
3408
|
-
[vars$
|
|
3390
|
+
[vars$x.hostWidth]: refs.width,
|
|
3391
|
+
[vars$x.hostDirection]: refs.direction,
|
|
3392
|
+
[vars$x.fontSize]: refs.fontSize,
|
|
3393
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
|
3394
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
|
3395
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3396
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3397
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
|
3398
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
|
3399
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3400
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
|
3401
|
+
[vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3402
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
|
3403
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
|
3404
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
|
3405
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
|
3406
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
|
3407
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
|
3408
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
|
3409
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
|
3410
|
+
[vars$x.revealButtonOffset]: globalRefs$i.spacing.md,
|
|
3411
|
+
[vars$x.revealButtonSize]: refs.toggleButtonSize,
|
|
3412
|
+
[vars$x.revealButtonColor]: refs.placeholderTextColor,
|
|
3409
3413
|
};
|
|
3410
3414
|
|
|
3411
3415
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
3412
3416
|
__proto__: null,
|
|
3413
3417
|
default: password,
|
|
3414
|
-
vars: vars$
|
|
3418
|
+
vars: vars$x
|
|
3415
3419
|
});
|
|
3416
3420
|
|
|
3417
|
-
const componentName$
|
|
3421
|
+
const componentName$F = getComponentName('number-field');
|
|
3418
3422
|
|
|
3419
3423
|
const NumberFieldClass = compose(
|
|
3420
3424
|
createStyleMixin({
|
|
@@ -3440,43 +3444,43 @@ const NumberFieldClass = compose(
|
|
|
3440
3444
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
3441
3445
|
`,
|
|
3442
3446
|
excludeAttrsSync: ['tabindex'],
|
|
3443
|
-
componentName: componentName$
|
|
3447
|
+
componentName: componentName$F,
|
|
3444
3448
|
})
|
|
3445
3449
|
);
|
|
3446
3450
|
|
|
3447
|
-
const vars$
|
|
3451
|
+
const vars$w = NumberFieldClass.cssVarList;
|
|
3448
3452
|
|
|
3449
3453
|
const numberField = {
|
|
3450
|
-
[vars$
|
|
3451
|
-
[vars$
|
|
3452
|
-
[vars$
|
|
3453
|
-
[vars$
|
|
3454
|
-
[vars$
|
|
3455
|
-
[vars$
|
|
3456
|
-
[vars$
|
|
3457
|
-
[vars$
|
|
3458
|
-
[vars$
|
|
3459
|
-
[vars$
|
|
3460
|
-
[vars$
|
|
3461
|
-
[vars$
|
|
3462
|
-
[vars$
|
|
3463
|
-
[vars$
|
|
3464
|
-
[vars$
|
|
3465
|
-
[vars$
|
|
3466
|
-
[vars$
|
|
3467
|
-
[vars$
|
|
3468
|
-
[vars$
|
|
3469
|
-
[vars$
|
|
3470
|
-
[vars$
|
|
3454
|
+
[vars$w.hostWidth]: refs.width,
|
|
3455
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
|
3456
|
+
[vars$w.hostDirection]: refs.direction,
|
|
3457
|
+
[vars$w.fontSize]: refs.fontSize,
|
|
3458
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
|
3459
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
|
3460
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3461
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
|
3462
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3463
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
|
3464
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
|
3465
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
|
3466
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
|
3467
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
|
3468
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
|
3469
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
|
3470
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
|
3471
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
|
3472
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3473
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3474
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
|
3471
3475
|
};
|
|
3472
3476
|
|
|
3473
3477
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
3474
3478
|
__proto__: null,
|
|
3475
3479
|
default: numberField,
|
|
3476
|
-
vars: vars$
|
|
3480
|
+
vars: vars$w
|
|
3477
3481
|
});
|
|
3478
3482
|
|
|
3479
|
-
const componentName$
|
|
3483
|
+
const componentName$E = getComponentName('email-field');
|
|
3480
3484
|
|
|
3481
3485
|
const customMixin$6 = (superclass) =>
|
|
3482
3486
|
class EmailFieldMixinClass extends superclass {
|
|
@@ -3511,46 +3515,46 @@ const EmailFieldClass = compose(
|
|
|
3511
3515
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
3512
3516
|
`,
|
|
3513
3517
|
excludeAttrsSync: ['tabindex'],
|
|
3514
|
-
componentName: componentName$
|
|
3518
|
+
componentName: componentName$E,
|
|
3515
3519
|
})
|
|
3516
3520
|
);
|
|
3517
3521
|
|
|
3518
|
-
const vars$
|
|
3522
|
+
const vars$v = EmailFieldClass.cssVarList;
|
|
3519
3523
|
|
|
3520
3524
|
const emailField = {
|
|
3521
|
-
[vars$
|
|
3522
|
-
[vars$
|
|
3523
|
-
[vars$
|
|
3524
|
-
[vars$
|
|
3525
|
-
[vars$
|
|
3526
|
-
[vars$
|
|
3527
|
-
[vars$
|
|
3528
|
-
[vars$
|
|
3529
|
-
[vars$
|
|
3530
|
-
[vars$
|
|
3531
|
-
[vars$
|
|
3532
|
-
[vars$
|
|
3533
|
-
[vars$
|
|
3534
|
-
[vars$
|
|
3535
|
-
[vars$
|
|
3536
|
-
[vars$
|
|
3537
|
-
[vars$
|
|
3538
|
-
[vars$
|
|
3539
|
-
[vars$
|
|
3540
|
-
[vars$
|
|
3541
|
-
[vars$
|
|
3525
|
+
[vars$v.hostWidth]: refs.width,
|
|
3526
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
|
3527
|
+
[vars$v.hostDirection]: refs.direction,
|
|
3528
|
+
[vars$v.fontSize]: refs.fontSize,
|
|
3529
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
|
3530
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3531
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3532
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
|
3533
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3534
|
+
[vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3535
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
|
3536
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
|
3537
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
|
3538
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
|
3539
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
|
3540
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
|
3541
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
|
3542
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
|
3543
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
|
3544
|
+
[vars$v.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3545
|
+
[vars$v.inputHeight]: refs.inputHeight,
|
|
3542
3546
|
};
|
|
3543
3547
|
|
|
3544
3548
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
3545
3549
|
__proto__: null,
|
|
3546
3550
|
default: emailField,
|
|
3547
|
-
vars: vars$
|
|
3551
|
+
vars: vars$v
|
|
3548
3552
|
});
|
|
3549
3553
|
|
|
3550
|
-
const componentName$
|
|
3554
|
+
const componentName$D = getComponentName('text-area');
|
|
3551
3555
|
|
|
3552
3556
|
const {
|
|
3553
|
-
host: host$
|
|
3557
|
+
host: host$h,
|
|
3554
3558
|
label: label$7,
|
|
3555
3559
|
placeholder: placeholder$2,
|
|
3556
3560
|
inputField: inputField$4,
|
|
@@ -3572,10 +3576,10 @@ const {
|
|
|
3572
3576
|
const TextAreaClass = compose(
|
|
3573
3577
|
createStyleMixin({
|
|
3574
3578
|
mappings: {
|
|
3575
|
-
hostWidth: { ...host$
|
|
3576
|
-
hostMinWidth: { ...host$
|
|
3577
|
-
hostDirection: { ...host$
|
|
3578
|
-
fontSize: [host$
|
|
3579
|
+
hostWidth: { ...host$h, property: 'width' },
|
|
3580
|
+
hostMinWidth: { ...host$h, property: 'min-width' },
|
|
3581
|
+
hostDirection: { ...host$h, property: 'direction' },
|
|
3582
|
+
fontSize: [host$h, textArea$2],
|
|
3579
3583
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
|
3580
3584
|
labelTextColor: [
|
|
3581
3585
|
{ ...label$7, property: 'color' },
|
|
@@ -3623,49 +3627,49 @@ const TextAreaClass = compose(
|
|
|
3623
3627
|
${resetInputCursor('vaadin-text-area')}
|
|
3624
3628
|
`,
|
|
3625
3629
|
excludeAttrsSync: ['tabindex'],
|
|
3626
|
-
componentName: componentName$
|
|
3630
|
+
componentName: componentName$D,
|
|
3627
3631
|
})
|
|
3628
3632
|
);
|
|
3629
3633
|
|
|
3630
|
-
const vars$
|
|
3634
|
+
const vars$u = TextAreaClass.cssVarList;
|
|
3631
3635
|
|
|
3632
3636
|
const textArea = {
|
|
3633
|
-
[vars$
|
|
3634
|
-
[vars$
|
|
3635
|
-
[vars$
|
|
3636
|
-
[vars$
|
|
3637
|
-
[vars$
|
|
3638
|
-
[vars$
|
|
3639
|
-
[vars$
|
|
3640
|
-
[vars$
|
|
3641
|
-
[vars$
|
|
3642
|
-
[vars$
|
|
3643
|
-
[vars$
|
|
3644
|
-
[vars$
|
|
3645
|
-
[vars$
|
|
3646
|
-
[vars$
|
|
3647
|
-
[vars$
|
|
3648
|
-
[vars$
|
|
3649
|
-
[vars$
|
|
3650
|
-
[vars$
|
|
3651
|
-
[vars$
|
|
3652
|
-
[vars$
|
|
3653
|
-
[vars$
|
|
3637
|
+
[vars$u.hostWidth]: refs.width,
|
|
3638
|
+
[vars$u.hostMinWidth]: refs.minWidth,
|
|
3639
|
+
[vars$u.hostDirection]: refs.direction,
|
|
3640
|
+
[vars$u.fontSize]: refs.fontSize,
|
|
3641
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
|
3642
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
3643
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3644
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3645
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
|
3646
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
|
3647
|
+
[vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3648
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
|
3649
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
|
3650
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
|
3651
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
|
3652
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
|
3653
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
|
3654
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
|
3655
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
|
3656
|
+
[vars$u.inputResizeType]: 'vertical',
|
|
3657
|
+
[vars$u.inputMinHeight]: '5em',
|
|
3654
3658
|
textAlign: {
|
|
3655
|
-
right: { [vars$
|
|
3656
|
-
left: { [vars$
|
|
3657
|
-
center: { [vars$
|
|
3659
|
+
right: { [vars$u.inputTextAlign]: 'right' },
|
|
3660
|
+
left: { [vars$u.inputTextAlign]: 'left' },
|
|
3661
|
+
center: { [vars$u.inputTextAlign]: 'center' },
|
|
3658
3662
|
},
|
|
3659
3663
|
|
|
3660
3664
|
_readonly: {
|
|
3661
|
-
[vars$
|
|
3665
|
+
[vars$u.inputResizeType]: 'none',
|
|
3662
3666
|
},
|
|
3663
3667
|
};
|
|
3664
3668
|
|
|
3665
3669
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
3666
3670
|
__proto__: null,
|
|
3667
3671
|
default: textArea,
|
|
3668
|
-
vars: vars$
|
|
3672
|
+
vars: vars$u
|
|
3669
3673
|
});
|
|
3670
3674
|
|
|
3671
3675
|
const createBaseInputClass = (...args) =>
|
|
@@ -3676,9 +3680,9 @@ const createBaseInputClass = (...args) =>
|
|
|
3676
3680
|
inputEventsDispatchingMixin
|
|
3677
3681
|
)(createBaseClass(...args));
|
|
3678
3682
|
|
|
3679
|
-
const componentName$
|
|
3683
|
+
const componentName$C = getComponentName('boolean-field-internal');
|
|
3680
3684
|
|
|
3681
|
-
createBaseInputClass({ componentName: componentName$
|
|
3685
|
+
createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
|
|
3682
3686
|
|
|
3683
3687
|
const booleanFieldMixin = (superclass) =>
|
|
3684
3688
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -3687,14 +3691,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
3687
3691
|
|
|
3688
3692
|
const template = document.createElement('template');
|
|
3689
3693
|
template.innerHTML = `
|
|
3690
|
-
<${componentName$
|
|
3694
|
+
<${componentName$C}
|
|
3691
3695
|
tabindex="-1"
|
|
3692
3696
|
slot="input"
|
|
3693
|
-
></${componentName$
|
|
3697
|
+
></${componentName$C}>
|
|
3694
3698
|
`;
|
|
3695
3699
|
|
|
3696
3700
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3697
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3701
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$C);
|
|
3698
3702
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
3699
3703
|
|
|
3700
3704
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -3764,10 +3768,10 @@ descope-boolean-field-internal {
|
|
|
3764
3768
|
}
|
|
3765
3769
|
`;
|
|
3766
3770
|
|
|
3767
|
-
const componentName$
|
|
3771
|
+
const componentName$B = getComponentName('checkbox');
|
|
3768
3772
|
|
|
3769
3773
|
const {
|
|
3770
|
-
host: host$
|
|
3774
|
+
host: host$g,
|
|
3771
3775
|
component: component$1,
|
|
3772
3776
|
checkboxElement,
|
|
3773
3777
|
checkboxSurface,
|
|
@@ -3789,10 +3793,10 @@ const {
|
|
|
3789
3793
|
const CheckboxClass = compose(
|
|
3790
3794
|
createStyleMixin({
|
|
3791
3795
|
mappings: {
|
|
3792
|
-
hostWidth: { ...host$
|
|
3793
|
-
hostDirection: { ...host$
|
|
3796
|
+
hostWidth: { ...host$g, property: 'width' },
|
|
3797
|
+
hostDirection: { ...host$g, property: 'direction' },
|
|
3794
3798
|
|
|
3795
|
-
fontSize: [host$
|
|
3799
|
+
fontSize: [host$g, checkboxElement, checkboxLabel$1],
|
|
3796
3800
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
|
3797
3801
|
|
|
3798
3802
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
|
@@ -3870,54 +3874,54 @@ const CheckboxClass = compose(
|
|
|
3870
3874
|
}
|
|
3871
3875
|
`,
|
|
3872
3876
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
3873
|
-
componentName: componentName$
|
|
3877
|
+
componentName: componentName$B,
|
|
3874
3878
|
})
|
|
3875
3879
|
);
|
|
3876
3880
|
|
|
3877
|
-
const vars$
|
|
3881
|
+
const vars$t = CheckboxClass.cssVarList;
|
|
3878
3882
|
const checkboxSize = '1.35em';
|
|
3879
3883
|
|
|
3880
3884
|
const checkbox = {
|
|
3881
|
-
[vars$
|
|
3882
|
-
[vars$
|
|
3883
|
-
[vars$
|
|
3884
|
-
[vars$
|
|
3885
|
-
[vars$
|
|
3886
|
-
[vars$
|
|
3887
|
-
[vars$
|
|
3888
|
-
[vars$
|
|
3889
|
-
[vars$
|
|
3890
|
-
[vars$
|
|
3891
|
-
[vars$
|
|
3892
|
-
[vars$
|
|
3893
|
-
[vars$
|
|
3894
|
-
[vars$
|
|
3895
|
-
[vars$
|
|
3896
|
-
[vars$
|
|
3897
|
-
[vars$
|
|
3898
|
-
[vars$
|
|
3899
|
-
[vars$
|
|
3900
|
-
[vars$
|
|
3885
|
+
[vars$t.hostWidth]: refs.width,
|
|
3886
|
+
[vars$t.hostDirection]: refs.direction,
|
|
3887
|
+
[vars$t.fontSize]: refs.fontSize,
|
|
3888
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
|
3889
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
3890
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3891
|
+
[vars$t.labelFontWeight]: '400',
|
|
3892
|
+
[vars$t.labelLineHeight]: checkboxSize,
|
|
3893
|
+
[vars$t.labelSpacing]: '1em',
|
|
3894
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3895
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
|
3896
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
|
3897
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
|
3898
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
|
3899
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
|
3900
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
|
3901
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
|
3902
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
|
3903
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
|
3904
|
+
[vars$t.inputSize]: checkboxSize,
|
|
3901
3905
|
|
|
3902
3906
|
_checked: {
|
|
3903
|
-
[vars$
|
|
3907
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
|
3904
3908
|
},
|
|
3905
3909
|
|
|
3906
3910
|
_disabled: {
|
|
3907
|
-
[vars$
|
|
3911
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
3908
3912
|
},
|
|
3909
3913
|
};
|
|
3910
3914
|
|
|
3911
3915
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
3912
3916
|
__proto__: null,
|
|
3913
3917
|
default: checkbox,
|
|
3914
|
-
vars: vars$
|
|
3918
|
+
vars: vars$t
|
|
3915
3919
|
});
|
|
3916
3920
|
|
|
3917
|
-
const componentName$
|
|
3921
|
+
const componentName$A = getComponentName('switch-toggle');
|
|
3918
3922
|
|
|
3919
3923
|
const {
|
|
3920
|
-
host: host$
|
|
3924
|
+
host: host$f,
|
|
3921
3925
|
component,
|
|
3922
3926
|
checkboxElement: track,
|
|
3923
3927
|
checkboxSurface: knob,
|
|
@@ -3939,8 +3943,8 @@ const {
|
|
|
3939
3943
|
const SwitchToggleClass = compose(
|
|
3940
3944
|
createStyleMixin({
|
|
3941
3945
|
mappings: {
|
|
3942
|
-
hostWidth: { ...host$
|
|
3943
|
-
hostDirection: { ...host$
|
|
3946
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
3947
|
+
hostDirection: { ...host$f, property: 'direction' },
|
|
3944
3948
|
|
|
3945
3949
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
3946
3950
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
|
@@ -4046,82 +4050,82 @@ const SwitchToggleClass = compose(
|
|
|
4046
4050
|
}
|
|
4047
4051
|
`,
|
|
4048
4052
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
4049
|
-
componentName: componentName$
|
|
4053
|
+
componentName: componentName$A,
|
|
4050
4054
|
})
|
|
4051
4055
|
);
|
|
4052
4056
|
|
|
4053
4057
|
const knobMargin = '2px';
|
|
4054
4058
|
const checkboxHeight = '1.25em';
|
|
4055
4059
|
|
|
4056
|
-
const globalRefs$
|
|
4057
|
-
const vars$
|
|
4060
|
+
const globalRefs$h = getThemeRefs(globals);
|
|
4061
|
+
const vars$s = SwitchToggleClass.cssVarList;
|
|
4058
4062
|
|
|
4059
4063
|
const switchToggle = {
|
|
4060
|
-
[vars$
|
|
4061
|
-
[vars$
|
|
4062
|
-
[vars$
|
|
4063
|
-
[vars$
|
|
4064
|
-
|
|
4065
|
-
[vars$
|
|
4066
|
-
[vars$
|
|
4067
|
-
[vars$
|
|
4068
|
-
[vars$
|
|
4069
|
-
|
|
4070
|
-
[vars$
|
|
4071
|
-
[vars$
|
|
4072
|
-
[vars$
|
|
4073
|
-
[vars$
|
|
4074
|
-
[vars$
|
|
4075
|
-
[vars$
|
|
4076
|
-
[vars$
|
|
4077
|
-
|
|
4078
|
-
[vars$
|
|
4079
|
-
[vars$
|
|
4080
|
-
[vars$
|
|
4081
|
-
[vars$
|
|
4082
|
-
[vars$
|
|
4083
|
-
[vars$
|
|
4084
|
-
|
|
4085
|
-
[vars$
|
|
4086
|
-
[vars$
|
|
4087
|
-
[vars$
|
|
4088
|
-
[vars$
|
|
4089
|
-
[vars$
|
|
4090
|
-
[vars$
|
|
4064
|
+
[vars$s.hostWidth]: refs.width,
|
|
4065
|
+
[vars$s.hostDirection]: refs.direction,
|
|
4066
|
+
[vars$s.fontSize]: refs.fontSize,
|
|
4067
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
|
4068
|
+
|
|
4069
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
|
4070
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
|
4071
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
|
4072
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
|
4073
|
+
|
|
4074
|
+
[vars$s.trackBorderStyle]: refs.borderStyle,
|
|
4075
|
+
[vars$s.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
4076
|
+
[vars$s.trackBorderColor]: refs.borderColor,
|
|
4077
|
+
[vars$s.trackBackgroundColor]: refs.backgroundColor,
|
|
4078
|
+
[vars$s.trackBorderRadius]: globalRefs$h.radius.md,
|
|
4079
|
+
[vars$s.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
4080
|
+
[vars$s.trackHeight]: checkboxHeight,
|
|
4081
|
+
|
|
4082
|
+
[vars$s.knobSize]: `calc(1em - ${knobMargin})`,
|
|
4083
|
+
[vars$s.knobRadius]: '50%',
|
|
4084
|
+
[vars$s.knobTopOffset]: '1px',
|
|
4085
|
+
[vars$s.knobLeftOffset]: knobMargin,
|
|
4086
|
+
[vars$s.knobColor]: refs.labelTextColor,
|
|
4087
|
+
[vars$s.knobTransitionDuration]: '0.3s',
|
|
4088
|
+
|
|
4089
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
|
4090
|
+
[vars$s.labelFontWeight]: '400',
|
|
4091
|
+
[vars$s.labelLineHeight]: '1.35em',
|
|
4092
|
+
[vars$s.labelSpacing]: '1em',
|
|
4093
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4094
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4091
4095
|
|
|
4092
4096
|
_checked: {
|
|
4093
|
-
[vars$
|
|
4094
|
-
[vars$
|
|
4095
|
-
[vars$
|
|
4096
|
-
[vars$
|
|
4097
|
+
[vars$s.trackBorderColor]: refs.borderColor,
|
|
4098
|
+
[vars$s.knobLeftOffset]: `calc(100% - var(${vars$s.knobSize}) - ${knobMargin})`,
|
|
4099
|
+
[vars$s.knobColor]: refs.valueTextColor,
|
|
4100
|
+
[vars$s.knobTextColor]: refs.valueTextColor,
|
|
4097
4101
|
},
|
|
4098
4102
|
|
|
4099
4103
|
_disabled: {
|
|
4100
|
-
[vars$
|
|
4101
|
-
[vars$
|
|
4102
|
-
[vars$
|
|
4103
|
-
[vars$
|
|
4104
|
+
[vars$s.knobColor]: globalRefs$h.colors.surface.light,
|
|
4105
|
+
[vars$s.trackBorderColor]: globalRefs$h.colors.surface.light,
|
|
4106
|
+
[vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4107
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
|
4104
4108
|
_checked: {
|
|
4105
|
-
[vars$
|
|
4106
|
-
[vars$
|
|
4109
|
+
[vars$s.knobColor]: globalRefs$h.colors.surface.light,
|
|
4110
|
+
[vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4107
4111
|
},
|
|
4108
4112
|
},
|
|
4109
4113
|
|
|
4110
4114
|
_invalid: {
|
|
4111
|
-
[vars$
|
|
4112
|
-
[vars$
|
|
4115
|
+
[vars$s.trackBorderColor]: globalRefs$h.colors.error.main,
|
|
4116
|
+
[vars$s.knobColor]: globalRefs$h.colors.error.main,
|
|
4113
4117
|
},
|
|
4114
4118
|
};
|
|
4115
4119
|
|
|
4116
4120
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
4117
4121
|
__proto__: null,
|
|
4118
4122
|
default: switchToggle,
|
|
4119
|
-
vars: vars$
|
|
4123
|
+
vars: vars$s
|
|
4120
4124
|
});
|
|
4121
4125
|
|
|
4122
|
-
const componentName$
|
|
4126
|
+
const componentName$z = getComponentName('container');
|
|
4123
4127
|
|
|
4124
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
4128
|
+
class RawContainer extends createBaseClass({ componentName: componentName$z, baseSelector: 'slot' }) {
|
|
4125
4129
|
constructor() {
|
|
4126
4130
|
super();
|
|
4127
4131
|
|
|
@@ -4174,7 +4178,7 @@ const ContainerClass = compose(
|
|
|
4174
4178
|
componentNameValidationMixin
|
|
4175
4179
|
)(RawContainer);
|
|
4176
4180
|
|
|
4177
|
-
const globalRefs$
|
|
4181
|
+
const globalRefs$g = getThemeRefs(globals);
|
|
4178
4182
|
|
|
4179
4183
|
const compVars$4 = ContainerClass.cssVarList;
|
|
4180
4184
|
|
|
@@ -4196,7 +4200,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
4196
4200
|
horizontalAlignment,
|
|
4197
4201
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
4198
4202
|
},
|
|
4199
|
-
componentName$
|
|
4203
|
+
componentName$z
|
|
4200
4204
|
);
|
|
4201
4205
|
|
|
4202
4206
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
@@ -4206,10 +4210,10 @@ const container = {
|
|
|
4206
4210
|
|
|
4207
4211
|
[compVars$4.hostWidth]: '100%',
|
|
4208
4212
|
[compVars$4.boxShadow]: 'none',
|
|
4209
|
-
[compVars$4.backgroundColor]: globalRefs$
|
|
4210
|
-
[compVars$4.color]: globalRefs$
|
|
4213
|
+
[compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
|
|
4214
|
+
[compVars$4.color]: globalRefs$g.colors.surface.contrast,
|
|
4211
4215
|
[compVars$4.borderRadius]: '0px',
|
|
4212
|
-
[compVars$4.hostDirection]: globalRefs$
|
|
4216
|
+
[compVars$4.hostDirection]: globalRefs$g.direction,
|
|
4213
4217
|
|
|
4214
4218
|
verticalPadding: {
|
|
4215
4219
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
|
@@ -4255,34 +4259,34 @@ const container = {
|
|
|
4255
4259
|
|
|
4256
4260
|
shadow: {
|
|
4257
4261
|
sm: {
|
|
4258
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4262
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
|
|
4259
4263
|
},
|
|
4260
4264
|
md: {
|
|
4261
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4265
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
|
|
4262
4266
|
},
|
|
4263
4267
|
lg: {
|
|
4264
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4268
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
|
|
4265
4269
|
},
|
|
4266
4270
|
xl: {
|
|
4267
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4271
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
|
|
4268
4272
|
},
|
|
4269
4273
|
'2xl': {
|
|
4270
4274
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
4271
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4275
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
|
|
4272
4276
|
},
|
|
4273
4277
|
},
|
|
4274
4278
|
|
|
4275
4279
|
borderRadius: {
|
|
4276
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
|
4277
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
|
4278
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
|
4279
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
|
4280
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4281
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4280
|
+
sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
|
|
4281
|
+
md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
|
|
4282
|
+
lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
|
|
4283
|
+
xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
|
|
4284
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
|
|
4285
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
|
|
4282
4286
|
},
|
|
4283
4287
|
};
|
|
4284
4288
|
|
|
4285
|
-
const vars$
|
|
4289
|
+
const vars$r = {
|
|
4286
4290
|
...compVars$4,
|
|
4287
4291
|
...helperVars$2,
|
|
4288
4292
|
};
|
|
@@ -4290,7 +4294,7 @@ const vars$q = {
|
|
|
4290
4294
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
4291
4295
|
__proto__: null,
|
|
4292
4296
|
default: container,
|
|
4293
|
-
vars: vars$
|
|
4297
|
+
vars: vars$r
|
|
4294
4298
|
});
|
|
4295
4299
|
|
|
4296
4300
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -4343,71 +4347,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
4343
4347
|
return CssVarImageClass;
|
|
4344
4348
|
};
|
|
4345
4349
|
|
|
4346
|
-
const componentName$
|
|
4350
|
+
const componentName$y = getComponentName('logo');
|
|
4347
4351
|
|
|
4348
4352
|
const LogoClass = createCssVarImageClass({
|
|
4349
|
-
componentName: componentName$
|
|
4353
|
+
componentName: componentName$y,
|
|
4350
4354
|
varName: 'url',
|
|
4351
4355
|
fallbackVarName: 'fallbackUrl',
|
|
4352
4356
|
});
|
|
4353
4357
|
|
|
4354
|
-
const vars$
|
|
4358
|
+
const vars$q = LogoClass.cssVarList;
|
|
4355
4359
|
|
|
4356
4360
|
const logo$2 = {
|
|
4357
|
-
[vars$
|
|
4361
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
4358
4362
|
};
|
|
4359
4363
|
|
|
4360
4364
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
|
4361
4365
|
__proto__: null,
|
|
4362
4366
|
default: logo$2,
|
|
4363
|
-
vars: vars$
|
|
4367
|
+
vars: vars$q
|
|
4364
4368
|
});
|
|
4365
4369
|
|
|
4366
|
-
const componentName$
|
|
4370
|
+
const componentName$x = getComponentName('totp-image');
|
|
4367
4371
|
|
|
4368
4372
|
const TotpImageClass = createCssVarImageClass({
|
|
4369
|
-
componentName: componentName$
|
|
4373
|
+
componentName: componentName$x,
|
|
4370
4374
|
varName: 'url',
|
|
4371
4375
|
fallbackVarName: 'fallbackUrl',
|
|
4372
4376
|
});
|
|
4373
4377
|
|
|
4374
|
-
const vars$
|
|
4378
|
+
const vars$p = TotpImageClass.cssVarList;
|
|
4375
4379
|
|
|
4376
4380
|
const logo$1 = {
|
|
4377
|
-
[vars$
|
|
4381
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
4378
4382
|
};
|
|
4379
4383
|
|
|
4380
4384
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
4381
4385
|
__proto__: null,
|
|
4382
4386
|
default: logo$1,
|
|
4383
|
-
vars: vars$
|
|
4387
|
+
vars: vars$p
|
|
4384
4388
|
});
|
|
4385
4389
|
|
|
4386
|
-
const componentName$
|
|
4390
|
+
const componentName$w = getComponentName('notp-image');
|
|
4387
4391
|
|
|
4388
4392
|
const NotpImageClass = createCssVarImageClass({
|
|
4389
|
-
componentName: componentName$
|
|
4393
|
+
componentName: componentName$w,
|
|
4390
4394
|
varName: 'url',
|
|
4391
4395
|
fallbackVarName: 'fallbackUrl',
|
|
4392
4396
|
});
|
|
4393
4397
|
|
|
4394
|
-
const vars$
|
|
4398
|
+
const vars$o = NotpImageClass.cssVarList;
|
|
4395
4399
|
|
|
4396
4400
|
const logo = {
|
|
4397
|
-
[vars$
|
|
4401
|
+
[vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
|
4398
4402
|
};
|
|
4399
4403
|
|
|
4400
4404
|
var notpImage = /*#__PURE__*/Object.freeze({
|
|
4401
4405
|
__proto__: null,
|
|
4402
4406
|
default: logo,
|
|
4403
|
-
vars: vars$
|
|
4407
|
+
vars: vars$o
|
|
4404
4408
|
});
|
|
4405
4409
|
|
|
4406
4410
|
// eslint-disable-next-line max-classes-per-file
|
|
4407
4411
|
|
|
4408
|
-
const componentName$
|
|
4412
|
+
const componentName$v = getComponentName('text');
|
|
4409
4413
|
|
|
4410
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
4414
|
+
class RawText extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > slot' }) {
|
|
4411
4415
|
constructor() {
|
|
4412
4416
|
super();
|
|
4413
4417
|
|
|
@@ -4421,7 +4425,7 @@ class RawText extends createBaseClass({ componentName: componentName$u, baseSele
|
|
|
4421
4425
|
display: inline-block;
|
|
4422
4426
|
}
|
|
4423
4427
|
</style>
|
|
4424
|
-
<slot></slot>
|
|
4428
|
+
<slot part="text-wrapper"></slot>
|
|
4425
4429
|
`;
|
|
4426
4430
|
}
|
|
4427
4431
|
}
|
|
@@ -4467,99 +4471,99 @@ const TextClass = compose(
|
|
|
4467
4471
|
customTextMixin
|
|
4468
4472
|
)(RawText);
|
|
4469
4473
|
|
|
4470
|
-
const globalRefs$
|
|
4471
|
-
const vars$
|
|
4474
|
+
const globalRefs$f = getThemeRefs(globals);
|
|
4475
|
+
const vars$n = TextClass.cssVarList;
|
|
4472
4476
|
|
|
4473
4477
|
const text$2 = {
|
|
4474
|
-
[vars$
|
|
4475
|
-
[vars$
|
|
4476
|
-
[vars$
|
|
4477
|
-
[vars$
|
|
4478
|
+
[vars$n.hostDirection]: globalRefs$f.direction,
|
|
4479
|
+
[vars$n.textLineHeight]: '1.35em',
|
|
4480
|
+
[vars$n.textAlign]: 'left',
|
|
4481
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.dark,
|
|
4478
4482
|
variant: {
|
|
4479
4483
|
h1: {
|
|
4480
|
-
[vars$
|
|
4481
|
-
[vars$
|
|
4482
|
-
[vars$
|
|
4484
|
+
[vars$n.fontSize]: globalRefs$f.typography.h1.size,
|
|
4485
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h1.weight,
|
|
4486
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h1.font,
|
|
4483
4487
|
},
|
|
4484
4488
|
h2: {
|
|
4485
|
-
[vars$
|
|
4486
|
-
[vars$
|
|
4487
|
-
[vars$
|
|
4489
|
+
[vars$n.fontSize]: globalRefs$f.typography.h2.size,
|
|
4490
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h2.weight,
|
|
4491
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h2.font,
|
|
4488
4492
|
},
|
|
4489
4493
|
h3: {
|
|
4490
|
-
[vars$
|
|
4491
|
-
[vars$
|
|
4492
|
-
[vars$
|
|
4494
|
+
[vars$n.fontSize]: globalRefs$f.typography.h3.size,
|
|
4495
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h3.weight,
|
|
4496
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h3.font,
|
|
4493
4497
|
},
|
|
4494
4498
|
subtitle1: {
|
|
4495
|
-
[vars$
|
|
4496
|
-
[vars$
|
|
4497
|
-
[vars$
|
|
4499
|
+
[vars$n.fontSize]: globalRefs$f.typography.subtitle1.size,
|
|
4500
|
+
[vars$n.fontWeight]: globalRefs$f.typography.subtitle1.weight,
|
|
4501
|
+
[vars$n.fontFamily]: globalRefs$f.typography.subtitle1.font,
|
|
4498
4502
|
},
|
|
4499
4503
|
subtitle2: {
|
|
4500
|
-
[vars$
|
|
4501
|
-
[vars$
|
|
4502
|
-
[vars$
|
|
4504
|
+
[vars$n.fontSize]: globalRefs$f.typography.subtitle2.size,
|
|
4505
|
+
[vars$n.fontWeight]: globalRefs$f.typography.subtitle2.weight,
|
|
4506
|
+
[vars$n.fontFamily]: globalRefs$f.typography.subtitle2.font,
|
|
4503
4507
|
},
|
|
4504
4508
|
body1: {
|
|
4505
|
-
[vars$
|
|
4506
|
-
[vars$
|
|
4507
|
-
[vars$
|
|
4509
|
+
[vars$n.fontSize]: globalRefs$f.typography.body1.size,
|
|
4510
|
+
[vars$n.fontWeight]: globalRefs$f.typography.body1.weight,
|
|
4511
|
+
[vars$n.fontFamily]: globalRefs$f.typography.body1.font,
|
|
4508
4512
|
},
|
|
4509
4513
|
body2: {
|
|
4510
|
-
[vars$
|
|
4511
|
-
[vars$
|
|
4512
|
-
[vars$
|
|
4514
|
+
[vars$n.fontSize]: globalRefs$f.typography.body2.size,
|
|
4515
|
+
[vars$n.fontWeight]: globalRefs$f.typography.body2.weight,
|
|
4516
|
+
[vars$n.fontFamily]: globalRefs$f.typography.body2.font,
|
|
4513
4517
|
},
|
|
4514
4518
|
},
|
|
4515
4519
|
|
|
4516
4520
|
mode: {
|
|
4517
4521
|
primary: {
|
|
4518
|
-
[vars$
|
|
4522
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.contrast,
|
|
4519
4523
|
},
|
|
4520
4524
|
secondary: {
|
|
4521
|
-
[vars$
|
|
4525
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.dark,
|
|
4522
4526
|
},
|
|
4523
4527
|
error: {
|
|
4524
|
-
[vars$
|
|
4528
|
+
[vars$n.textColor]: globalRefs$f.colors.error.main,
|
|
4525
4529
|
},
|
|
4526
4530
|
success: {
|
|
4527
|
-
[vars$
|
|
4531
|
+
[vars$n.textColor]: globalRefs$f.colors.success.main,
|
|
4528
4532
|
},
|
|
4529
4533
|
},
|
|
4530
4534
|
|
|
4531
4535
|
textAlign: {
|
|
4532
|
-
right: { [vars$
|
|
4533
|
-
left: { [vars$
|
|
4534
|
-
center: { [vars$
|
|
4536
|
+
right: { [vars$n.textAlign]: 'right' },
|
|
4537
|
+
left: { [vars$n.textAlign]: 'left' },
|
|
4538
|
+
center: { [vars$n.textAlign]: 'center' },
|
|
4535
4539
|
},
|
|
4536
4540
|
|
|
4537
4541
|
_fullWidth: {
|
|
4538
|
-
[vars$
|
|
4542
|
+
[vars$n.hostWidth]: '100%',
|
|
4539
4543
|
},
|
|
4540
4544
|
|
|
4541
4545
|
_italic: {
|
|
4542
|
-
[vars$
|
|
4546
|
+
[vars$n.fontStyle]: 'italic',
|
|
4543
4547
|
},
|
|
4544
4548
|
|
|
4545
4549
|
_uppercase: {
|
|
4546
|
-
[vars$
|
|
4550
|
+
[vars$n.textTransform]: 'uppercase',
|
|
4547
4551
|
},
|
|
4548
4552
|
|
|
4549
4553
|
_lowercase: {
|
|
4550
|
-
[vars$
|
|
4554
|
+
[vars$n.textTransform]: 'lowercase',
|
|
4551
4555
|
},
|
|
4552
4556
|
};
|
|
4553
4557
|
|
|
4554
4558
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
4555
4559
|
__proto__: null,
|
|
4556
4560
|
default: text$2,
|
|
4557
|
-
vars: vars$
|
|
4561
|
+
vars: vars$n
|
|
4558
4562
|
});
|
|
4559
4563
|
|
|
4560
|
-
const componentName$
|
|
4564
|
+
const componentName$u = getComponentName('link');
|
|
4561
4565
|
|
|
4562
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
4566
|
+
class RawLink extends createBaseClass({ componentName: componentName$u, baseSelector: ':host a' }) {
|
|
4563
4567
|
constructor() {
|
|
4564
4568
|
super();
|
|
4565
4569
|
|
|
@@ -4605,12 +4609,12 @@ const selectors$2 = {
|
|
|
4605
4609
|
text: { selector: () => TextClass.componentName },
|
|
4606
4610
|
};
|
|
4607
4611
|
|
|
4608
|
-
const { anchor, text: text$1, host: host$
|
|
4612
|
+
const { anchor, text: text$1, host: host$e, wrapper: wrapper$1 } = selectors$2;
|
|
4609
4613
|
|
|
4610
4614
|
const LinkClass = compose(
|
|
4611
4615
|
createStyleMixin({
|
|
4612
4616
|
mappings: {
|
|
4613
|
-
hostWidth: { ...host$
|
|
4617
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
4614
4618
|
hostDirection: { ...text$1, property: 'direction' },
|
|
4615
4619
|
textAlign: wrapper$1,
|
|
4616
4620
|
textColor: [
|
|
@@ -4624,37 +4628,37 @@ const LinkClass = compose(
|
|
|
4624
4628
|
componentNameValidationMixin
|
|
4625
4629
|
)(RawLink);
|
|
4626
4630
|
|
|
4627
|
-
const globalRefs$
|
|
4628
|
-
const vars$
|
|
4631
|
+
const globalRefs$e = getThemeRefs(globals);
|
|
4632
|
+
const vars$m = LinkClass.cssVarList;
|
|
4629
4633
|
|
|
4630
4634
|
const link = {
|
|
4631
|
-
[vars$
|
|
4632
|
-
[vars$
|
|
4635
|
+
[vars$m.hostDirection]: globalRefs$e.direction,
|
|
4636
|
+
[vars$m.cursor]: 'pointer',
|
|
4633
4637
|
|
|
4634
|
-
[vars$
|
|
4638
|
+
[vars$m.textColor]: globalRefs$e.colors.primary.main,
|
|
4635
4639
|
|
|
4636
4640
|
textAlign: {
|
|
4637
|
-
right: { [vars$
|
|
4638
|
-
left: { [vars$
|
|
4639
|
-
center: { [vars$
|
|
4641
|
+
right: { [vars$m.textAlign]: 'right' },
|
|
4642
|
+
left: { [vars$m.textAlign]: 'left' },
|
|
4643
|
+
center: { [vars$m.textAlign]: 'center' },
|
|
4640
4644
|
},
|
|
4641
4645
|
|
|
4642
4646
|
_fullWidth: {
|
|
4643
|
-
[vars$
|
|
4647
|
+
[vars$m.hostWidth]: '100%',
|
|
4644
4648
|
},
|
|
4645
4649
|
|
|
4646
4650
|
mode: {
|
|
4647
4651
|
primary: {
|
|
4648
|
-
[vars$
|
|
4652
|
+
[vars$m.textColor]: globalRefs$e.colors.primary.main,
|
|
4649
4653
|
},
|
|
4650
4654
|
secondary: {
|
|
4651
|
-
[vars$
|
|
4655
|
+
[vars$m.textColor]: globalRefs$e.colors.secondary.main,
|
|
4652
4656
|
},
|
|
4653
4657
|
error: {
|
|
4654
|
-
[vars$
|
|
4658
|
+
[vars$m.textColor]: globalRefs$e.colors.error.main,
|
|
4655
4659
|
},
|
|
4656
4660
|
success: {
|
|
4657
|
-
[vars$
|
|
4661
|
+
[vars$m.textColor]: globalRefs$e.colors.success.main,
|
|
4658
4662
|
},
|
|
4659
4663
|
},
|
|
4660
4664
|
};
|
|
@@ -4662,11 +4666,11 @@ const link = {
|
|
|
4662
4666
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
4663
4667
|
__proto__: null,
|
|
4664
4668
|
default: link,
|
|
4665
|
-
vars: vars$
|
|
4669
|
+
vars: vars$m
|
|
4666
4670
|
});
|
|
4667
4671
|
|
|
4668
|
-
const componentName$
|
|
4669
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
4672
|
+
const componentName$t = getComponentName('divider');
|
|
4673
|
+
class RawDivider extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
|
|
4670
4674
|
constructor() {
|
|
4671
4675
|
super();
|
|
4672
4676
|
|
|
@@ -4712,7 +4716,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$s, baseS
|
|
|
4712
4716
|
}
|
|
4713
4717
|
|
|
4714
4718
|
const textVars$3 = TextClass.cssVarList;
|
|
4715
|
-
const { host: host$
|
|
4719
|
+
const { host: host$d, before, after: after$1, text } = {
|
|
4716
4720
|
host: { selector: () => ':host' },
|
|
4717
4721
|
before: { selector: '::before' },
|
|
4718
4722
|
after: { selector: '::after' },
|
|
@@ -4722,8 +4726,8 @@ const { host: host$c, before, after: after$1, text } = {
|
|
|
4722
4726
|
const DividerClass = compose(
|
|
4723
4727
|
createStyleMixin({
|
|
4724
4728
|
mappings: {
|
|
4725
|
-
hostWidth: { ...host$
|
|
4726
|
-
hostPadding: { ...host$
|
|
4729
|
+
hostWidth: { ...host$d, property: 'width' },
|
|
4730
|
+
hostPadding: { ...host$d, property: 'padding' },
|
|
4727
4731
|
hostDirection: { ...text, property: 'direction' },
|
|
4728
4732
|
|
|
4729
4733
|
minHeight: {},
|
|
@@ -4765,7 +4769,7 @@ const DividerClass = compose(
|
|
|
4765
4769
|
componentNameValidationMixin
|
|
4766
4770
|
)(RawDivider);
|
|
4767
4771
|
|
|
4768
|
-
const globalRefs$
|
|
4772
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
4769
4773
|
const compVars$3 = DividerClass.cssVarList;
|
|
4770
4774
|
|
|
4771
4775
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -4773,18 +4777,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
4773
4777
|
thickness: '2px',
|
|
4774
4778
|
spacing: '10px',
|
|
4775
4779
|
},
|
|
4776
|
-
componentName$
|
|
4780
|
+
componentName$t
|
|
4777
4781
|
);
|
|
4778
4782
|
|
|
4779
4783
|
const divider = {
|
|
4780
4784
|
...helperTheme$1,
|
|
4781
4785
|
|
|
4782
|
-
[compVars$3.hostDirection]: globalRefs$
|
|
4786
|
+
[compVars$3.hostDirection]: globalRefs$d.direction,
|
|
4783
4787
|
[compVars$3.alignItems]: 'center',
|
|
4784
4788
|
[compVars$3.flexDirection]: 'row',
|
|
4785
4789
|
[compVars$3.alignSelf]: 'stretch',
|
|
4786
4790
|
[compVars$3.hostWidth]: '100%',
|
|
4787
|
-
[compVars$3.stripeColor]: globalRefs$
|
|
4791
|
+
[compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
|
|
4788
4792
|
[compVars$3.stripeColorOpacity]: '0.5',
|
|
4789
4793
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
4790
4794
|
[compVars$3.labelTextWidth]: 'fit-content',
|
|
@@ -4804,7 +4808,7 @@ const divider = {
|
|
|
4804
4808
|
},
|
|
4805
4809
|
};
|
|
4806
4810
|
|
|
4807
|
-
const vars$
|
|
4811
|
+
const vars$l = {
|
|
4808
4812
|
...compVars$3,
|
|
4809
4813
|
...helperVars$1,
|
|
4810
4814
|
};
|
|
@@ -4812,18 +4816,18 @@ const vars$k = {
|
|
|
4812
4816
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
4813
4817
|
__proto__: null,
|
|
4814
4818
|
default: divider,
|
|
4815
|
-
vars: vars$
|
|
4819
|
+
vars: vars$l
|
|
4816
4820
|
});
|
|
4817
4821
|
|
|
4818
4822
|
/* eslint-disable no-param-reassign */
|
|
4819
4823
|
|
|
4820
|
-
const componentName$
|
|
4824
|
+
const componentName$s = getComponentName('passcode-internal');
|
|
4821
4825
|
|
|
4822
|
-
createBaseInputClass({ componentName: componentName$
|
|
4826
|
+
createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
|
|
4823
4827
|
|
|
4824
|
-
const componentName$
|
|
4828
|
+
const componentName$r = getComponentName('loader-radial');
|
|
4825
4829
|
|
|
4826
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
4830
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
|
4827
4831
|
constructor() {
|
|
4828
4832
|
super();
|
|
4829
4833
|
|
|
@@ -4867,7 +4871,7 @@ const LoaderRadialClass = compose(
|
|
|
4867
4871
|
componentNameValidationMixin
|
|
4868
4872
|
)(RawLoaderRadial);
|
|
4869
4873
|
|
|
4870
|
-
const componentName$
|
|
4874
|
+
const componentName$q = getComponentName('passcode');
|
|
4871
4875
|
|
|
4872
4876
|
const observedAttributes$3 = ['digits'];
|
|
4873
4877
|
|
|
@@ -4886,17 +4890,17 @@ const customMixin$5 = (superclass) =>
|
|
|
4886
4890
|
const template = document.createElement('template');
|
|
4887
4891
|
|
|
4888
4892
|
template.innerHTML = `
|
|
4889
|
-
<${componentName$
|
|
4893
|
+
<${componentName$s}
|
|
4890
4894
|
bordered="true"
|
|
4891
4895
|
name="code"
|
|
4892
4896
|
tabindex="-1"
|
|
4893
4897
|
slot="input"
|
|
4894
|
-
><slot></slot></${componentName$
|
|
4898
|
+
><slot></slot></${componentName$s}>
|
|
4895
4899
|
`;
|
|
4896
4900
|
|
|
4897
4901
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
4898
4902
|
|
|
4899
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
4903
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
|
4900
4904
|
|
|
4901
4905
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
|
4902
4906
|
}
|
|
@@ -4911,7 +4915,7 @@ const customMixin$5 = (superclass) =>
|
|
|
4911
4915
|
};
|
|
4912
4916
|
|
|
4913
4917
|
const {
|
|
4914
|
-
host: host$
|
|
4918
|
+
host: host$c,
|
|
4915
4919
|
digitField,
|
|
4916
4920
|
label: label$6,
|
|
4917
4921
|
requiredIndicator: requiredIndicator$6,
|
|
@@ -4934,10 +4938,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
|
4934
4938
|
const PasscodeClass = compose(
|
|
4935
4939
|
createStyleMixin({
|
|
4936
4940
|
mappings: {
|
|
4937
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
4941
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$c],
|
|
4938
4942
|
hostWidth: { property: 'width' },
|
|
4939
|
-
hostDirection: { ...host$
|
|
4940
|
-
fontFamily: [host$
|
|
4943
|
+
hostDirection: { ...host$c, property: 'direction' },
|
|
4944
|
+
fontFamily: [host$c, { ...label$6 }],
|
|
4941
4945
|
labelTextColor: [
|
|
4942
4946
|
{ ...label$6, property: 'color' },
|
|
4943
4947
|
{ ...requiredIndicator$6, property: 'color' },
|
|
@@ -5043,56 +5047,56 @@ const PasscodeClass = compose(
|
|
|
5043
5047
|
${resetInputCursor('vaadin-text-field')}
|
|
5044
5048
|
`,
|
|
5045
5049
|
excludeAttrsSync: ['tabindex'],
|
|
5046
|
-
componentName: componentName$
|
|
5050
|
+
componentName: componentName$q,
|
|
5047
5051
|
})
|
|
5048
5052
|
);
|
|
5049
5053
|
|
|
5050
|
-
const vars$
|
|
5054
|
+
const vars$k = PasscodeClass.cssVarList;
|
|
5051
5055
|
|
|
5052
5056
|
const passcode = {
|
|
5053
|
-
[vars$
|
|
5054
|
-
[vars$
|
|
5055
|
-
[vars$
|
|
5056
|
-
[vars$
|
|
5057
|
-
[vars$
|
|
5058
|
-
[vars$
|
|
5059
|
-
[vars$
|
|
5060
|
-
[vars$
|
|
5061
|
-
[vars$
|
|
5062
|
-
[vars$
|
|
5063
|
-
[vars$
|
|
5064
|
-
[vars$
|
|
5065
|
-
[vars$
|
|
5066
|
-
[vars$
|
|
5067
|
-
[vars$
|
|
5057
|
+
[vars$k.hostDirection]: refs.direction,
|
|
5058
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
|
5059
|
+
[vars$k.fontSize]: refs.fontSize,
|
|
5060
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
|
5061
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5062
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5063
|
+
[vars$k.digitValueTextColor]: refs.valueTextColor,
|
|
5064
|
+
[vars$k.digitPadding]: '0',
|
|
5065
|
+
[vars$k.digitTextAlign]: 'center',
|
|
5066
|
+
[vars$k.digitSpacing]: '4px',
|
|
5067
|
+
[vars$k.hostWidth]: refs.width,
|
|
5068
|
+
[vars$k.digitOutlineColor]: 'transparent',
|
|
5069
|
+
[vars$k.digitOutlineWidth]: refs.outlineWidth,
|
|
5070
|
+
[vars$k.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
5071
|
+
[vars$k.digitSize]: refs.inputHeight,
|
|
5068
5072
|
|
|
5069
5073
|
size: {
|
|
5070
|
-
xs: { [vars$
|
|
5071
|
-
sm: { [vars$
|
|
5072
|
-
md: { [vars$
|
|
5073
|
-
lg: { [vars$
|
|
5074
|
+
xs: { [vars$k.spinnerSize]: '15px' },
|
|
5075
|
+
sm: { [vars$k.spinnerSize]: '20px' },
|
|
5076
|
+
md: { [vars$k.spinnerSize]: '20px' },
|
|
5077
|
+
lg: { [vars$k.spinnerSize]: '20px' },
|
|
5074
5078
|
},
|
|
5075
5079
|
|
|
5076
5080
|
_hideCursor: {
|
|
5077
|
-
[vars$
|
|
5081
|
+
[vars$k.digitCaretTextColor]: 'transparent',
|
|
5078
5082
|
},
|
|
5079
5083
|
|
|
5080
5084
|
_loading: {
|
|
5081
|
-
[vars$
|
|
5085
|
+
[vars$k.overlayOpacity]: refs.overlayOpacity,
|
|
5082
5086
|
},
|
|
5083
5087
|
};
|
|
5084
5088
|
|
|
5085
5089
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
5086
5090
|
__proto__: null,
|
|
5087
5091
|
default: passcode,
|
|
5088
|
-
vars: vars$
|
|
5092
|
+
vars: vars$k
|
|
5089
5093
|
});
|
|
5090
5094
|
|
|
5091
|
-
const componentName$
|
|
5095
|
+
const componentName$p = getComponentName('loader-linear');
|
|
5092
5096
|
|
|
5093
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
5097
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
|
5094
5098
|
static get componentName() {
|
|
5095
|
-
return componentName$
|
|
5099
|
+
return componentName$p;
|
|
5096
5100
|
}
|
|
5097
5101
|
|
|
5098
5102
|
constructor() {
|
|
@@ -5128,18 +5132,18 @@ const selectors$1 = {
|
|
|
5128
5132
|
host: { selector: () => ':host' },
|
|
5129
5133
|
};
|
|
5130
5134
|
|
|
5131
|
-
const { after, host: host$
|
|
5135
|
+
const { after, host: host$b } = selectors$1;
|
|
5132
5136
|
|
|
5133
5137
|
const LoaderLinearClass = compose(
|
|
5134
5138
|
createStyleMixin({
|
|
5135
5139
|
mappings: {
|
|
5136
5140
|
hostDisplay: {},
|
|
5137
|
-
hostWidth: { ...host$
|
|
5141
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
5138
5142
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
5139
5143
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
5140
5144
|
verticalPadding: [
|
|
5141
|
-
{ ...host$
|
|
5142
|
-
{ ...host$
|
|
5145
|
+
{ ...host$b, property: 'padding-top' },
|
|
5146
|
+
{ ...host$b, property: 'padding-bottom' },
|
|
5143
5147
|
],
|
|
5144
5148
|
barBackgroundColor: { property: 'background-color' },
|
|
5145
5149
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -5153,67 +5157,67 @@ const LoaderLinearClass = compose(
|
|
|
5153
5157
|
componentNameValidationMixin
|
|
5154
5158
|
)(RawLoaderLinear);
|
|
5155
5159
|
|
|
5156
|
-
const globalRefs$
|
|
5157
|
-
const vars$
|
|
5160
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
5161
|
+
const vars$j = LoaderLinearClass.cssVarList;
|
|
5158
5162
|
|
|
5159
5163
|
const loaderLinear = {
|
|
5160
|
-
[vars$
|
|
5161
|
-
[vars$
|
|
5164
|
+
[vars$j.hostDisplay]: 'inline-block',
|
|
5165
|
+
[vars$j.hostWidth]: '100%',
|
|
5162
5166
|
|
|
5163
|
-
[vars$
|
|
5164
|
-
[vars$
|
|
5167
|
+
[vars$j.barColor]: globalRefs$c.colors.surface.contrast,
|
|
5168
|
+
[vars$j.barWidth]: '20%',
|
|
5165
5169
|
|
|
5166
|
-
[vars$
|
|
5167
|
-
[vars$
|
|
5170
|
+
[vars$j.barBackgroundColor]: globalRefs$c.colors.surface.light,
|
|
5171
|
+
[vars$j.barBorderRadius]: '4px',
|
|
5168
5172
|
|
|
5169
|
-
[vars$
|
|
5170
|
-
[vars$
|
|
5171
|
-
[vars$
|
|
5172
|
-
[vars$
|
|
5173
|
+
[vars$j.animationDuration]: '2s',
|
|
5174
|
+
[vars$j.animationTimingFunction]: 'linear',
|
|
5175
|
+
[vars$j.animationIterationCount]: 'infinite',
|
|
5176
|
+
[vars$j.verticalPadding]: '0.25em',
|
|
5173
5177
|
|
|
5174
5178
|
size: {
|
|
5175
|
-
xs: { [vars$
|
|
5176
|
-
sm: { [vars$
|
|
5177
|
-
md: { [vars$
|
|
5178
|
-
lg: { [vars$
|
|
5179
|
+
xs: { [vars$j.barHeight]: '2px' },
|
|
5180
|
+
sm: { [vars$j.barHeight]: '4px' },
|
|
5181
|
+
md: { [vars$j.barHeight]: '6px' },
|
|
5182
|
+
lg: { [vars$j.barHeight]: '8px' },
|
|
5179
5183
|
},
|
|
5180
5184
|
|
|
5181
5185
|
mode: {
|
|
5182
5186
|
primary: {
|
|
5183
|
-
[vars$
|
|
5187
|
+
[vars$j.barColor]: globalRefs$c.colors.primary.main,
|
|
5184
5188
|
},
|
|
5185
5189
|
secondary: {
|
|
5186
|
-
[vars$
|
|
5190
|
+
[vars$j.barColor]: globalRefs$c.colors.secondary.main,
|
|
5187
5191
|
},
|
|
5188
5192
|
},
|
|
5189
5193
|
|
|
5190
5194
|
_hidden: {
|
|
5191
|
-
[vars$
|
|
5195
|
+
[vars$j.hostDisplay]: 'none',
|
|
5192
5196
|
},
|
|
5193
5197
|
};
|
|
5194
5198
|
|
|
5195
5199
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
5196
5200
|
__proto__: null,
|
|
5197
5201
|
default: loaderLinear,
|
|
5198
|
-
vars: vars$
|
|
5202
|
+
vars: vars$j
|
|
5199
5203
|
});
|
|
5200
5204
|
|
|
5201
|
-
const globalRefs$
|
|
5205
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
5202
5206
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
|
5203
5207
|
|
|
5204
5208
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
5205
5209
|
{
|
|
5206
|
-
spinnerColor: globalRefs$
|
|
5210
|
+
spinnerColor: globalRefs$b.colors.surface.contrast,
|
|
5207
5211
|
mode: {
|
|
5208
5212
|
primary: {
|
|
5209
|
-
spinnerColor: globalRefs$
|
|
5213
|
+
spinnerColor: globalRefs$b.colors.primary.main,
|
|
5210
5214
|
},
|
|
5211
5215
|
secondary: {
|
|
5212
|
-
spinnerColor: globalRefs$
|
|
5216
|
+
spinnerColor: globalRefs$b.colors.secondary.main,
|
|
5213
5217
|
},
|
|
5214
5218
|
},
|
|
5215
5219
|
},
|
|
5216
|
-
componentName$
|
|
5220
|
+
componentName$r
|
|
5217
5221
|
);
|
|
5218
5222
|
|
|
5219
5223
|
const loaderRadial = {
|
|
@@ -5242,7 +5246,7 @@ const loaderRadial = {
|
|
|
5242
5246
|
[compVars$2.hostDisplay]: 'none',
|
|
5243
5247
|
},
|
|
5244
5248
|
};
|
|
5245
|
-
const vars$
|
|
5249
|
+
const vars$i = {
|
|
5246
5250
|
...compVars$2,
|
|
5247
5251
|
...helperVars,
|
|
5248
5252
|
};
|
|
@@ -5250,10 +5254,10 @@ const vars$h = {
|
|
|
5250
5254
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
5251
5255
|
__proto__: null,
|
|
5252
5256
|
default: loaderRadial,
|
|
5253
|
-
vars: vars$
|
|
5257
|
+
vars: vars$i
|
|
5254
5258
|
});
|
|
5255
5259
|
|
|
5256
|
-
const componentName$
|
|
5260
|
+
const componentName$o = getComponentName('combo-box');
|
|
5257
5261
|
|
|
5258
5262
|
const ComboBoxMixin = (superclass) =>
|
|
5259
5263
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -5479,7 +5483,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
5479
5483
|
};
|
|
5480
5484
|
|
|
5481
5485
|
const {
|
|
5482
|
-
host: host$
|
|
5486
|
+
host: host$a,
|
|
5483
5487
|
inputField: inputField$3,
|
|
5484
5488
|
inputElement: inputElement$1,
|
|
5485
5489
|
placeholder: placeholder$1,
|
|
@@ -5505,10 +5509,10 @@ const {
|
|
|
5505
5509
|
const ComboBoxClass = compose(
|
|
5506
5510
|
createStyleMixin({
|
|
5507
5511
|
mappings: {
|
|
5508
|
-
hostWidth: { ...host$
|
|
5509
|
-
hostDirection: { ...host$
|
|
5512
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
5513
|
+
hostDirection: { ...host$a, property: 'direction' },
|
|
5510
5514
|
// we apply font-size also on the host so we can set its width with em
|
|
5511
|
-
fontSize: [{}, host$
|
|
5515
|
+
fontSize: [{}, host$a],
|
|
5512
5516
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
|
5513
5517
|
labelTextColor: [
|
|
5514
5518
|
{ ...label$5, property: 'color' },
|
|
@@ -5636,71 +5640,71 @@ const ComboBoxClass = compose(
|
|
|
5636
5640
|
// and reset items to an empty array, and opening the list box with no items
|
|
5637
5641
|
// to display.
|
|
5638
5642
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
|
5639
|
-
componentName: componentName$
|
|
5643
|
+
componentName: componentName$o,
|
|
5640
5644
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
5641
5645
|
})
|
|
5642
5646
|
);
|
|
5643
5647
|
|
|
5644
|
-
const globalRefs$
|
|
5645
|
-
const vars$
|
|
5648
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
5649
|
+
const vars$h = ComboBoxClass.cssVarList;
|
|
5646
5650
|
|
|
5647
5651
|
const comboBox = {
|
|
5648
|
-
[vars$
|
|
5649
|
-
[vars$
|
|
5650
|
-
[vars$
|
|
5651
|
-
[vars$
|
|
5652
|
-
[vars$
|
|
5653
|
-
[vars$
|
|
5654
|
-
[vars$
|
|
5655
|
-
[vars$
|
|
5656
|
-
[vars$
|
|
5657
|
-
[vars$
|
|
5658
|
-
[vars$
|
|
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$
|
|
5652
|
+
[vars$h.hostWidth]: refs.width,
|
|
5653
|
+
[vars$h.hostDirection]: refs.direction,
|
|
5654
|
+
[vars$h.fontSize]: refs.fontSize,
|
|
5655
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
|
5656
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
|
5657
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5658
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
|
5659
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
|
5660
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
|
5661
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
|
5662
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
|
5663
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
|
5664
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
|
5665
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
|
5666
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5667
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
|
5668
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5669
|
+
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
|
5670
|
+
[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
|
|
5671
|
+
[vars$h.inputHeight]: refs.inputHeight,
|
|
5672
|
+
[vars$h.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
|
|
5673
|
+
[vars$h.inputDropdownButtonCursor]: 'pointer',
|
|
5674
|
+
[vars$h.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
5675
|
+
[vars$h.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
|
|
5676
|
+
[vars$h.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
|
|
5677
|
+
[vars$h.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
|
|
5674
5678
|
|
|
5675
5679
|
_readonly: {
|
|
5676
|
-
[vars$
|
|
5680
|
+
[vars$h.inputDropdownButtonCursor]: 'default',
|
|
5677
5681
|
},
|
|
5678
5682
|
|
|
5679
5683
|
// Overlay theme exposed via the component:
|
|
5680
|
-
[vars$
|
|
5681
|
-
[vars$
|
|
5682
|
-
[vars$
|
|
5683
|
-
[vars$
|
|
5684
|
-
[vars$
|
|
5685
|
-
[vars$
|
|
5684
|
+
[vars$h.overlayFontSize]: refs.fontSize,
|
|
5685
|
+
[vars$h.overlayFontFamily]: refs.fontFamily,
|
|
5686
|
+
[vars$h.overlayCursor]: 'pointer',
|
|
5687
|
+
[vars$h.overlayItemBoxShadow]: 'none',
|
|
5688
|
+
[vars$h.overlayBackground]: refs.backgroundColor,
|
|
5689
|
+
[vars$h.overlayTextColor]: refs.valueTextColor,
|
|
5686
5690
|
|
|
5687
5691
|
// Overlay direct theme:
|
|
5688
|
-
[vars$
|
|
5689
|
-
[vars$
|
|
5692
|
+
[vars$h.overlay.minHeight]: '400px',
|
|
5693
|
+
[vars$h.overlay.margin]: '0',
|
|
5690
5694
|
};
|
|
5691
5695
|
|
|
5692
5696
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
5693
5697
|
__proto__: null,
|
|
5694
5698
|
comboBox: comboBox,
|
|
5695
5699
|
default: comboBox,
|
|
5696
|
-
vars: vars$
|
|
5700
|
+
vars: vars$h
|
|
5697
5701
|
});
|
|
5698
5702
|
|
|
5699
5703
|
const observedAttributes$2 = ['src', 'alt'];
|
|
5700
5704
|
|
|
5701
|
-
const componentName$
|
|
5705
|
+
const componentName$n = getComponentName('image');
|
|
5702
5706
|
|
|
5703
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
5707
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$n, baseSelector: ':host > img' });
|
|
5704
5708
|
class RawImage extends BaseClass$1 {
|
|
5705
5709
|
static get observedAttributes() {
|
|
5706
5710
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -5740,14 +5744,14 @@ const ImageClass = compose(
|
|
|
5740
5744
|
draggableMixin
|
|
5741
5745
|
)(RawImage);
|
|
5742
5746
|
|
|
5743
|
-
const vars$
|
|
5747
|
+
const vars$g = ImageClass.cssVarList;
|
|
5744
5748
|
|
|
5745
5749
|
const image = {};
|
|
5746
5750
|
|
|
5747
5751
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
5748
5752
|
__proto__: null,
|
|
5749
5753
|
default: image,
|
|
5750
|
-
vars: vars$
|
|
5754
|
+
vars: vars$g
|
|
5751
5755
|
});
|
|
5752
5756
|
|
|
5753
5757
|
var CountryCodes = [
|
|
@@ -6966,14 +6970,14 @@ var CountryCodes = [
|
|
|
6966
6970
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
|
6967
6971
|
];
|
|
6968
6972
|
|
|
6969
|
-
const componentName$
|
|
6973
|
+
const componentName$m = getComponentName('phone-field-internal');
|
|
6970
6974
|
|
|
6971
|
-
createBaseInputClass({ componentName: componentName$
|
|
6975
|
+
createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
|
6972
6976
|
|
|
6973
6977
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
6974
6978
|
const comboVars = ComboBoxClass.cssVarList;
|
|
6975
6979
|
|
|
6976
|
-
const componentName$
|
|
6980
|
+
const componentName$l = getComponentName('phone-field');
|
|
6977
6981
|
|
|
6978
6982
|
const customMixin$4 = (superclass) =>
|
|
6979
6983
|
class PhoneFieldMixinClass extends superclass {
|
|
@@ -6987,15 +6991,15 @@ const customMixin$4 = (superclass) =>
|
|
|
6987
6991
|
const template = document.createElement('template');
|
|
6988
6992
|
|
|
6989
6993
|
template.innerHTML = `
|
|
6990
|
-
<${componentName$
|
|
6994
|
+
<${componentName$m}
|
|
6991
6995
|
tabindex="-1"
|
|
6992
6996
|
slot="input"
|
|
6993
|
-
></${componentName$
|
|
6997
|
+
></${componentName$m}>
|
|
6994
6998
|
`;
|
|
6995
6999
|
|
|
6996
7000
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
6997
7001
|
|
|
6998
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7002
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
|
6999
7003
|
|
|
7000
7004
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7001
7005
|
includeAttrs: [
|
|
@@ -7015,7 +7019,7 @@ const customMixin$4 = (superclass) =>
|
|
|
7015
7019
|
};
|
|
7016
7020
|
|
|
7017
7021
|
const {
|
|
7018
|
-
host: host$
|
|
7022
|
+
host: host$9,
|
|
7019
7023
|
label: label$4,
|
|
7020
7024
|
requiredIndicator: requiredIndicator$4,
|
|
7021
7025
|
inputField: inputField$2,
|
|
@@ -7040,7 +7044,7 @@ const PhoneFieldClass = compose(
|
|
|
7040
7044
|
createStyleMixin({
|
|
7041
7045
|
mappings: {
|
|
7042
7046
|
fontSize: [
|
|
7043
|
-
host$
|
|
7047
|
+
host$9,
|
|
7044
7048
|
inputField$2,
|
|
7045
7049
|
{
|
|
7046
7050
|
selector: TextFieldClass.componentName,
|
|
@@ -7061,11 +7065,11 @@ const PhoneFieldClass = compose(
|
|
|
7061
7065
|
},
|
|
7062
7066
|
],
|
|
7063
7067
|
hostWidth: [
|
|
7064
|
-
{ ...host$
|
|
7068
|
+
{ ...host$9, property: 'width' },
|
|
7065
7069
|
{ ...phoneInput$1, property: 'width' },
|
|
7066
7070
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
7067
7071
|
],
|
|
7068
|
-
hostDirection: { ...host$
|
|
7072
|
+
hostDirection: { ...host$9, property: 'direction' },
|
|
7069
7073
|
|
|
7070
7074
|
inputBorderStyle: [
|
|
7071
7075
|
{ ...inputField$2, property: 'border-style' },
|
|
@@ -7191,33 +7195,33 @@ const PhoneFieldClass = compose(
|
|
|
7191
7195
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7192
7196
|
`,
|
|
7193
7197
|
excludeAttrsSync: ['tabindex'],
|
|
7194
|
-
componentName: componentName$
|
|
7198
|
+
componentName: componentName$l,
|
|
7195
7199
|
})
|
|
7196
7200
|
);
|
|
7197
7201
|
|
|
7198
|
-
const vars$
|
|
7202
|
+
const vars$f = PhoneFieldClass.cssVarList;
|
|
7199
7203
|
|
|
7200
7204
|
const phoneField = {
|
|
7201
|
-
[vars$
|
|
7202
|
-
[vars$
|
|
7203
|
-
[vars$
|
|
7204
|
-
[vars$
|
|
7205
|
-
[vars$
|
|
7206
|
-
[vars$
|
|
7207
|
-
[vars$
|
|
7208
|
-
[vars$
|
|
7209
|
-
[vars$
|
|
7210
|
-
[vars$
|
|
7211
|
-
[vars$
|
|
7212
|
-
[vars$
|
|
7213
|
-
[vars$
|
|
7214
|
-
[vars$
|
|
7215
|
-
[vars$
|
|
7216
|
-
[vars$
|
|
7217
|
-
[vars$
|
|
7218
|
-
[vars$
|
|
7219
|
-
[vars$
|
|
7220
|
-
[vars$
|
|
7205
|
+
[vars$f.hostWidth]: refs.width,
|
|
7206
|
+
[vars$f.hostDirection]: refs.direction,
|
|
7207
|
+
[vars$f.fontSize]: refs.fontSize,
|
|
7208
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
|
7209
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
|
7210
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7211
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7212
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
|
7213
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7214
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
|
7215
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
|
7216
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
|
7217
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
|
7218
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
|
7219
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
|
7220
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
|
7221
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
|
7222
|
+
[vars$f.phoneInputWidth]: refs.minWidth,
|
|
7223
|
+
[vars$f.countryCodeInputWidth]: '5em',
|
|
7224
|
+
[vars$f.countryCodeDropdownWidth]: '20em',
|
|
7221
7225
|
|
|
7222
7226
|
// '@overlay': {
|
|
7223
7227
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -7227,16 +7231,16 @@ const phoneField = {
|
|
|
7227
7231
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
7228
7232
|
__proto__: null,
|
|
7229
7233
|
default: phoneField,
|
|
7230
|
-
vars: vars$
|
|
7234
|
+
vars: vars$f
|
|
7231
7235
|
});
|
|
7232
7236
|
|
|
7233
|
-
const componentName$
|
|
7237
|
+
const componentName$k = getComponentName('phone-field-internal-input-box');
|
|
7234
7238
|
|
|
7235
|
-
createBaseInputClass({ componentName: componentName$
|
|
7239
|
+
createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
|
|
7236
7240
|
|
|
7237
7241
|
const textVars = TextFieldClass.cssVarList;
|
|
7238
7242
|
|
|
7239
|
-
const componentName$
|
|
7243
|
+
const componentName$j = getComponentName('phone-input-box-field');
|
|
7240
7244
|
|
|
7241
7245
|
const customMixin$3 = (superclass) =>
|
|
7242
7246
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
@@ -7250,15 +7254,15 @@ const customMixin$3 = (superclass) =>
|
|
|
7250
7254
|
const template = document.createElement('template');
|
|
7251
7255
|
|
|
7252
7256
|
template.innerHTML = `
|
|
7253
|
-
<${componentName$
|
|
7257
|
+
<${componentName$k}
|
|
7254
7258
|
tabindex="-1"
|
|
7255
7259
|
slot="input"
|
|
7256
|
-
></${componentName$
|
|
7260
|
+
></${componentName$k}>
|
|
7257
7261
|
`;
|
|
7258
7262
|
|
|
7259
7263
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7260
7264
|
|
|
7261
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7265
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
|
7262
7266
|
|
|
7263
7267
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7264
7268
|
includeAttrs: [
|
|
@@ -7275,7 +7279,7 @@ const customMixin$3 = (superclass) =>
|
|
|
7275
7279
|
}
|
|
7276
7280
|
};
|
|
7277
7281
|
|
|
7278
|
-
const { host: host$
|
|
7282
|
+
const { host: host$8, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
|
7279
7283
|
host: { selector: () => ':host' },
|
|
7280
7284
|
label: { selector: '::part(label)' },
|
|
7281
7285
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -7289,7 +7293,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7289
7293
|
createStyleMixin({
|
|
7290
7294
|
mappings: {
|
|
7291
7295
|
fontSize: [
|
|
7292
|
-
host$
|
|
7296
|
+
host$8,
|
|
7293
7297
|
inputField$1,
|
|
7294
7298
|
{
|
|
7295
7299
|
selector: TextFieldClass.componentName,
|
|
@@ -7297,9 +7301,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7297
7301
|
},
|
|
7298
7302
|
],
|
|
7299
7303
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
|
7300
|
-
hostWidth: { ...host$
|
|
7301
|
-
hostMinWidth: { ...host$
|
|
7302
|
-
hostDirection: { ...host$
|
|
7304
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
7305
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
|
7306
|
+
hostDirection: { ...host$8, property: 'direction' },
|
|
7303
7307
|
|
|
7304
7308
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
|
7305
7309
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
|
@@ -7391,45 +7395,45 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7391
7395
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7392
7396
|
`,
|
|
7393
7397
|
excludeAttrsSync: ['tabindex'],
|
|
7394
|
-
componentName: componentName$
|
|
7398
|
+
componentName: componentName$j,
|
|
7395
7399
|
})
|
|
7396
7400
|
);
|
|
7397
7401
|
|
|
7398
|
-
const vars$
|
|
7402
|
+
const vars$e = PhoneFieldInputBoxClass.cssVarList;
|
|
7399
7403
|
|
|
7400
7404
|
const phoneInputBoxField = {
|
|
7401
|
-
[vars$
|
|
7402
|
-
[vars$
|
|
7403
|
-
[vars$
|
|
7404
|
-
[vars$
|
|
7405
|
-
[vars$
|
|
7406
|
-
[vars$
|
|
7407
|
-
[vars$
|
|
7408
|
-
[vars$
|
|
7409
|
-
[vars$
|
|
7410
|
-
[vars$
|
|
7411
|
-
[vars$
|
|
7412
|
-
[vars$
|
|
7413
|
-
[vars$
|
|
7414
|
-
[vars$
|
|
7415
|
-
[vars$
|
|
7416
|
-
[vars$
|
|
7417
|
-
[vars$
|
|
7418
|
-
[vars$
|
|
7405
|
+
[vars$e.hostWidth]: '16em',
|
|
7406
|
+
[vars$e.hostMinWidth]: refs.minWidth,
|
|
7407
|
+
[vars$e.hostDirection]: refs.direction,
|
|
7408
|
+
[vars$e.fontSize]: refs.fontSize,
|
|
7409
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
|
7410
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
|
7411
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7412
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7413
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
|
7414
|
+
[vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7415
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
|
7416
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
|
7417
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
|
7418
|
+
[vars$e.inputBorderRadius]: refs.borderRadius,
|
|
7419
|
+
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
|
7420
|
+
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
|
7421
|
+
[vars$e.inputOutlineColor]: refs.outlineColor,
|
|
7422
|
+
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
|
7419
7423
|
_fullWidth: {
|
|
7420
|
-
[vars$
|
|
7424
|
+
[vars$e.hostWidth]: refs.width,
|
|
7421
7425
|
},
|
|
7422
7426
|
};
|
|
7423
7427
|
|
|
7424
7428
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
7425
7429
|
__proto__: null,
|
|
7426
7430
|
default: phoneInputBoxField,
|
|
7427
|
-
vars: vars$
|
|
7431
|
+
vars: vars$e
|
|
7428
7432
|
});
|
|
7429
7433
|
|
|
7430
|
-
const componentName$
|
|
7434
|
+
const componentName$i = getComponentName('new-password-internal');
|
|
7431
7435
|
|
|
7432
|
-
const componentName$
|
|
7436
|
+
const componentName$h = getComponentName('new-password');
|
|
7433
7437
|
|
|
7434
7438
|
const customMixin$2 = (superclass) =>
|
|
7435
7439
|
class NewPasswordMixinClass extends superclass {
|
|
@@ -7439,16 +7443,16 @@ const customMixin$2 = (superclass) =>
|
|
|
7439
7443
|
const template = document.createElement('template');
|
|
7440
7444
|
|
|
7441
7445
|
template.innerHTML = `
|
|
7442
|
-
<${componentName$
|
|
7446
|
+
<${componentName$i}
|
|
7443
7447
|
name="new-password"
|
|
7444
7448
|
tabindex="-1"
|
|
7445
7449
|
slot="input"
|
|
7446
|
-
></${componentName$
|
|
7450
|
+
></${componentName$i}>
|
|
7447
7451
|
`;
|
|
7448
7452
|
|
|
7449
7453
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7450
7454
|
|
|
7451
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7455
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
|
7452
7456
|
|
|
7453
7457
|
forwardAttrs(this, this.inputElement, {
|
|
7454
7458
|
includeAttrs: [
|
|
@@ -7469,7 +7473,7 @@ const customMixin$2 = (superclass) =>
|
|
|
7469
7473
|
}
|
|
7470
7474
|
};
|
|
7471
7475
|
|
|
7472
|
-
const { host: host$
|
|
7476
|
+
const { host: host$7, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
|
7473
7477
|
host: { selector: () => ':host' },
|
|
7474
7478
|
label: { selector: '::part(label)' },
|
|
7475
7479
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
@@ -7482,7 +7486,7 @@ const NewPasswordClass = compose(
|
|
|
7482
7486
|
createStyleMixin({
|
|
7483
7487
|
mappings: {
|
|
7484
7488
|
fontSize: [
|
|
7485
|
-
host$
|
|
7489
|
+
host$7,
|
|
7486
7490
|
{},
|
|
7487
7491
|
{
|
|
7488
7492
|
selector: PasswordClass.componentName,
|
|
@@ -7491,13 +7495,13 @@ const NewPasswordClass = compose(
|
|
|
7491
7495
|
],
|
|
7492
7496
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
|
7493
7497
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
7494
|
-
hostWidth: { ...host$
|
|
7495
|
-
hostMinWidth: { ...host$
|
|
7498
|
+
hostWidth: { ...host$7, property: 'width' },
|
|
7499
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
|
7496
7500
|
hostDirection: [
|
|
7497
|
-
{ ...host$
|
|
7501
|
+
{ ...host$7, property: 'direction' },
|
|
7498
7502
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
|
7499
7503
|
],
|
|
7500
|
-
inputsRequiredIndicator: { ...host$
|
|
7504
|
+
inputsRequiredIndicator: { ...host$7, property: 'content' },
|
|
7501
7505
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
7502
7506
|
},
|
|
7503
7507
|
}),
|
|
@@ -7555,33 +7559,33 @@ const NewPasswordClass = compose(
|
|
|
7555
7559
|
}
|
|
7556
7560
|
`,
|
|
7557
7561
|
excludeAttrsSync: ['tabindex'],
|
|
7558
|
-
componentName: componentName$
|
|
7562
|
+
componentName: componentName$h,
|
|
7559
7563
|
})
|
|
7560
7564
|
);
|
|
7561
7565
|
|
|
7562
|
-
const vars$
|
|
7566
|
+
const vars$d = NewPasswordClass.cssVarList;
|
|
7563
7567
|
|
|
7564
7568
|
const newPassword = {
|
|
7565
|
-
[vars$
|
|
7566
|
-
[vars$
|
|
7567
|
-
[vars$
|
|
7568
|
-
[vars$
|
|
7569
|
-
[vars$
|
|
7570
|
-
[vars$
|
|
7571
|
-
[vars$
|
|
7569
|
+
[vars$d.hostWidth]: refs.width,
|
|
7570
|
+
[vars$d.hostMinWidth]: refs.minWidth,
|
|
7571
|
+
[vars$d.hostDirection]: refs.direction,
|
|
7572
|
+
[vars$d.fontSize]: refs.fontSize,
|
|
7573
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
|
7574
|
+
[vars$d.spaceBetweenInputs]: '1em',
|
|
7575
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7572
7576
|
|
|
7573
7577
|
_required: {
|
|
7574
7578
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
7575
7579
|
// That's why we fake the required indicator on each input.
|
|
7576
7580
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
7577
|
-
[vars$
|
|
7581
|
+
[vars$d.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
7578
7582
|
},
|
|
7579
7583
|
};
|
|
7580
7584
|
|
|
7581
7585
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
7582
7586
|
__proto__: null,
|
|
7583
7587
|
default: newPassword,
|
|
7584
|
-
vars: vars$
|
|
7588
|
+
vars: vars$d
|
|
7585
7589
|
});
|
|
7586
7590
|
|
|
7587
7591
|
const getFileBase64 = (fileObj) => {
|
|
@@ -7596,7 +7600,7 @@ const getFilename = (fileObj) => {
|
|
|
7596
7600
|
return fileObj.name.replace(/^.*\\/, '');
|
|
7597
7601
|
};
|
|
7598
7602
|
|
|
7599
|
-
const componentName$
|
|
7603
|
+
const componentName$g = getComponentName('upload-file');
|
|
7600
7604
|
|
|
7601
7605
|
const observedAttributes$1 = [
|
|
7602
7606
|
'title',
|
|
@@ -7611,7 +7615,7 @@ const observedAttributes$1 = [
|
|
|
7611
7615
|
'icon',
|
|
7612
7616
|
];
|
|
7613
7617
|
|
|
7614
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
7618
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$g, baseSelector: ':host > div' });
|
|
7615
7619
|
|
|
7616
7620
|
class RawUploadFile extends BaseInputClass {
|
|
7617
7621
|
static get observedAttributes() {
|
|
@@ -7783,7 +7787,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
7783
7787
|
}
|
|
7784
7788
|
|
|
7785
7789
|
const buttonVars = ButtonClass.cssVarList;
|
|
7786
|
-
const { host: host$
|
|
7790
|
+
const { host: host$6, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
|
7787
7791
|
host: { selector: () => ':host' },
|
|
7788
7792
|
wrapper: { selector: () => ':host > div' },
|
|
7789
7793
|
icon: { selector: () => '::slotted(*)' },
|
|
@@ -7802,11 +7806,11 @@ const UploadFileClass = compose(
|
|
|
7802
7806
|
borderWidth: {},
|
|
7803
7807
|
borderStyle: {},
|
|
7804
7808
|
borderRadius: {},
|
|
7805
|
-
hostHeight: { ...host$
|
|
7806
|
-
hostWidth: { ...host$
|
|
7809
|
+
hostHeight: { ...host$6, property: 'height' },
|
|
7810
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
7807
7811
|
hostPadding: { property: 'padding' },
|
|
7808
7812
|
hostDirection: [
|
|
7809
|
-
{ ...host$
|
|
7813
|
+
{ ...host$6, property: 'direction' },
|
|
7810
7814
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
|
7811
7815
|
],
|
|
7812
7816
|
gap: { ...wrapper },
|
|
@@ -7826,77 +7830,77 @@ const UploadFileClass = compose(
|
|
|
7826
7830
|
componentNameValidationMixin
|
|
7827
7831
|
)(RawUploadFile);
|
|
7828
7832
|
|
|
7829
|
-
const vars$
|
|
7833
|
+
const vars$c = UploadFileClass.cssVarList;
|
|
7830
7834
|
|
|
7831
7835
|
const uploadFile = {
|
|
7832
|
-
[vars$
|
|
7833
|
-
[vars$
|
|
7834
|
-
[vars$
|
|
7836
|
+
[vars$c.hostDirection]: refs.direction,
|
|
7837
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
|
7838
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
|
7835
7839
|
|
|
7836
|
-
[vars$
|
|
7840
|
+
[vars$c.iconSize]: '2em',
|
|
7837
7841
|
|
|
7838
|
-
[vars$
|
|
7839
|
-
[vars$
|
|
7842
|
+
[vars$c.hostPadding]: '0.75em',
|
|
7843
|
+
[vars$c.gap]: '0.5em',
|
|
7840
7844
|
|
|
7841
|
-
[vars$
|
|
7842
|
-
[vars$
|
|
7843
|
-
[vars$
|
|
7845
|
+
[vars$c.fontSize]: '16px',
|
|
7846
|
+
[vars$c.titleFontWeight]: '500',
|
|
7847
|
+
[vars$c.lineHeight]: '1em',
|
|
7844
7848
|
|
|
7845
|
-
[vars$
|
|
7846
|
-
[vars$
|
|
7847
|
-
[vars$
|
|
7848
|
-
[vars$
|
|
7849
|
+
[vars$c.borderWidth]: refs.borderWidth,
|
|
7850
|
+
[vars$c.borderColor]: refs.borderColor,
|
|
7851
|
+
[vars$c.borderRadius]: refs.borderRadius,
|
|
7852
|
+
[vars$c.borderStyle]: 'dashed',
|
|
7849
7853
|
|
|
7850
7854
|
_required: {
|
|
7851
|
-
[vars$
|
|
7855
|
+
[vars$c.requiredIndicator]: refs.requiredIndicator,
|
|
7852
7856
|
},
|
|
7853
7857
|
|
|
7854
7858
|
size: {
|
|
7855
7859
|
xs: {
|
|
7856
|
-
[vars$
|
|
7857
|
-
[vars$
|
|
7858
|
-
[vars$
|
|
7859
|
-
[vars$
|
|
7860
|
-
[vars$
|
|
7860
|
+
[vars$c.hostHeight]: '196px',
|
|
7861
|
+
[vars$c.hostWidth]: '200px',
|
|
7862
|
+
[vars$c.titleFontSize]: '0.875em',
|
|
7863
|
+
[vars$c.descriptionFontSize]: '0.875em',
|
|
7864
|
+
[vars$c.lineHeight]: '1.25em',
|
|
7861
7865
|
},
|
|
7862
7866
|
sm: {
|
|
7863
|
-
[vars$
|
|
7864
|
-
[vars$
|
|
7865
|
-
[vars$
|
|
7866
|
-
[vars$
|
|
7867
|
-
[vars$
|
|
7867
|
+
[vars$c.hostHeight]: '216px',
|
|
7868
|
+
[vars$c.hostWidth]: '230px',
|
|
7869
|
+
[vars$c.titleFontSize]: '1em',
|
|
7870
|
+
[vars$c.descriptionFontSize]: '0.875em',
|
|
7871
|
+
[vars$c.lineHeight]: '1.25em',
|
|
7868
7872
|
},
|
|
7869
7873
|
md: {
|
|
7870
|
-
[vars$
|
|
7871
|
-
[vars$
|
|
7872
|
-
[vars$
|
|
7873
|
-
[vars$
|
|
7874
|
-
[vars$
|
|
7874
|
+
[vars$c.hostHeight]: '256px',
|
|
7875
|
+
[vars$c.hostWidth]: '312px',
|
|
7876
|
+
[vars$c.titleFontSize]: '1.125em',
|
|
7877
|
+
[vars$c.descriptionFontSize]: '1em',
|
|
7878
|
+
[vars$c.lineHeight]: '1.5em',
|
|
7875
7879
|
},
|
|
7876
7880
|
lg: {
|
|
7877
|
-
[vars$
|
|
7878
|
-
[vars$
|
|
7879
|
-
[vars$
|
|
7880
|
-
[vars$
|
|
7881
|
-
[vars$
|
|
7881
|
+
[vars$c.hostHeight]: '280px',
|
|
7882
|
+
[vars$c.hostWidth]: '336px',
|
|
7883
|
+
[vars$c.titleFontSize]: '1.125em',
|
|
7884
|
+
[vars$c.descriptionFontSize]: '1.125em',
|
|
7885
|
+
[vars$c.lineHeight]: '1.75em',
|
|
7882
7886
|
},
|
|
7883
7887
|
},
|
|
7884
7888
|
|
|
7885
7889
|
_fullWidth: {
|
|
7886
|
-
[vars$
|
|
7890
|
+
[vars$c.hostWidth]: refs.width,
|
|
7887
7891
|
},
|
|
7888
7892
|
};
|
|
7889
7893
|
|
|
7890
7894
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7891
7895
|
__proto__: null,
|
|
7892
7896
|
default: uploadFile,
|
|
7893
|
-
vars: vars$
|
|
7897
|
+
vars: vars$c
|
|
7894
7898
|
});
|
|
7895
7899
|
|
|
7896
|
-
const componentName$
|
|
7900
|
+
const componentName$f = getComponentName('button-selection-group-item');
|
|
7897
7901
|
|
|
7898
7902
|
class RawSelectItem extends createBaseClass({
|
|
7899
|
-
componentName: componentName$
|
|
7903
|
+
componentName: componentName$f,
|
|
7900
7904
|
baseSelector: ':host > descope-button',
|
|
7901
7905
|
}) {
|
|
7902
7906
|
get size() {
|
|
@@ -8003,39 +8007,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
|
8003
8007
|
componentNameValidationMixin
|
|
8004
8008
|
)(RawSelectItem);
|
|
8005
8009
|
|
|
8006
|
-
const globalRefs$
|
|
8010
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
8007
8011
|
|
|
8008
|
-
const vars$
|
|
8012
|
+
const vars$b = ButtonSelectionGroupItemClass.cssVarList;
|
|
8009
8013
|
|
|
8010
8014
|
const buttonSelectionGroupItem = {
|
|
8011
|
-
[vars$
|
|
8012
|
-
[vars$
|
|
8013
|
-
[vars$
|
|
8014
|
-
[vars$
|
|
8015
|
-
[vars$
|
|
8016
|
-
[vars$
|
|
8017
|
-
[vars$
|
|
8018
|
-
[vars$
|
|
8015
|
+
[vars$b.hostDirection]: 'inherit',
|
|
8016
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.main,
|
|
8017
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
|
8018
|
+
[vars$b.borderColor]: globalRefs$9.colors.surface.light,
|
|
8019
|
+
[vars$b.borderStyle]: 'solid',
|
|
8020
|
+
[vars$b.borderRadius]: globalRefs$9.radius.sm,
|
|
8021
|
+
[vars$b.outlineColor]: 'transparent',
|
|
8022
|
+
[vars$b.borderWidth]: globalRefs$9.border.xs,
|
|
8019
8023
|
|
|
8020
8024
|
_hover: {
|
|
8021
|
-
[vars$
|
|
8025
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.highlight,
|
|
8022
8026
|
},
|
|
8023
8027
|
|
|
8024
8028
|
_focused: {
|
|
8025
|
-
[vars$
|
|
8029
|
+
[vars$b.outlineColor]: globalRefs$9.colors.surface.light,
|
|
8026
8030
|
},
|
|
8027
8031
|
|
|
8028
8032
|
_selected: {
|
|
8029
|
-
[vars$
|
|
8030
|
-
[vars$
|
|
8031
|
-
[vars$
|
|
8033
|
+
[vars$b.borderColor]: globalRefs$9.colors.surface.contrast,
|
|
8034
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.contrast,
|
|
8035
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.surface.main,
|
|
8032
8036
|
},
|
|
8033
8037
|
};
|
|
8034
8038
|
|
|
8035
8039
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8036
8040
|
__proto__: null,
|
|
8037
8041
|
default: buttonSelectionGroupItem,
|
|
8038
|
-
vars: vars$
|
|
8042
|
+
vars: vars$b
|
|
8039
8043
|
});
|
|
8040
8044
|
|
|
8041
8045
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
@@ -8134,10 +8138,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
|
8134
8138
|
return BaseButtonSelectionGroupInternalClass;
|
|
8135
8139
|
};
|
|
8136
8140
|
|
|
8137
|
-
const componentName$
|
|
8141
|
+
const componentName$e = getComponentName('button-selection-group-internal');
|
|
8138
8142
|
|
|
8139
8143
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8140
|
-
componentName$
|
|
8144
|
+
componentName$e
|
|
8141
8145
|
) {
|
|
8142
8146
|
getSelectedNode() {
|
|
8143
8147
|
return this.items.find((item) => item.hasAttribute('selected'));
|
|
@@ -8293,7 +8297,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
|
8293
8297
|
}
|
|
8294
8298
|
};
|
|
8295
8299
|
|
|
8296
|
-
const { host: host$
|
|
8300
|
+
const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
|
8297
8301
|
host: { selector: () => ':host' },
|
|
8298
8302
|
label: { selector: '::part(label)' },
|
|
8299
8303
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -8302,9 +8306,9 @@ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
|
8302
8306
|
};
|
|
8303
8307
|
|
|
8304
8308
|
const buttonSelectionGroupMappings = {
|
|
8305
|
-
hostWidth: { ...host$
|
|
8306
|
-
hostDirection: { ...host$
|
|
8307
|
-
fontFamily: host$
|
|
8309
|
+
hostWidth: { ...host$5, property: 'width' },
|
|
8310
|
+
hostDirection: { ...host$5, property: 'direction' },
|
|
8311
|
+
fontFamily: host$5,
|
|
8308
8312
|
labelTextColor: [
|
|
8309
8313
|
{ ...label$1, property: 'color' },
|
|
8310
8314
|
{ ...requiredIndicator$1, property: 'color' },
|
|
@@ -8369,7 +8373,7 @@ const buttonSelectionGroupStyles = `
|
|
|
8369
8373
|
${resetInputCursor('vaadin-text-field')}
|
|
8370
8374
|
`;
|
|
8371
8375
|
|
|
8372
|
-
const componentName$
|
|
8376
|
+
const componentName$d = getComponentName('button-selection-group');
|
|
8373
8377
|
|
|
8374
8378
|
const buttonSelectionGroupMixin = (superclass) =>
|
|
8375
8379
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8378,19 +8382,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
|
8378
8382
|
const template = document.createElement('template');
|
|
8379
8383
|
|
|
8380
8384
|
template.innerHTML = `
|
|
8381
|
-
<${componentName$
|
|
8385
|
+
<${componentName$e}
|
|
8382
8386
|
name="button-selection-group"
|
|
8383
8387
|
slot="input"
|
|
8384
8388
|
tabindex="-1"
|
|
8385
8389
|
part="internal-component"
|
|
8386
8390
|
>
|
|
8387
8391
|
<slot></slot>
|
|
8388
|
-
</${componentName$
|
|
8392
|
+
</${componentName$e}>
|
|
8389
8393
|
`;
|
|
8390
8394
|
|
|
8391
8395
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8392
8396
|
|
|
8393
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8397
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
|
8394
8398
|
|
|
8395
8399
|
forwardAttrs(this, this.inputElement, {
|
|
8396
8400
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
|
@@ -8415,11 +8419,11 @@ const ButtonSelectionGroupClass = compose(
|
|
|
8415
8419
|
wrappedEleName: 'vaadin-text-field',
|
|
8416
8420
|
style: () => buttonSelectionGroupStyles,
|
|
8417
8421
|
excludeAttrsSync: ['tabindex'],
|
|
8418
|
-
componentName: componentName$
|
|
8422
|
+
componentName: componentName$d,
|
|
8419
8423
|
})
|
|
8420
8424
|
);
|
|
8421
8425
|
|
|
8422
|
-
const globalRefs$
|
|
8426
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
8423
8427
|
|
|
8424
8428
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8425
8429
|
[vars.hostDirection]: refs.direction,
|
|
@@ -8427,26 +8431,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
|
8427
8431
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
8428
8432
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
8429
8433
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
8430
|
-
[vars.itemsSpacing]: globalRefs$
|
|
8434
|
+
[vars.itemsSpacing]: globalRefs$8.spacing.sm,
|
|
8431
8435
|
[vars.hostWidth]: refs.width,
|
|
8432
8436
|
});
|
|
8433
8437
|
|
|
8434
|
-
const vars$
|
|
8438
|
+
const vars$a = ButtonSelectionGroupClass.cssVarList;
|
|
8435
8439
|
|
|
8436
8440
|
const buttonSelectionGroup = {
|
|
8437
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8441
|
+
...createBaseButtonSelectionGroupMappings(vars$a),
|
|
8438
8442
|
};
|
|
8439
8443
|
|
|
8440
8444
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8441
8445
|
__proto__: null,
|
|
8442
8446
|
default: buttonSelectionGroup,
|
|
8443
|
-
vars: vars$
|
|
8447
|
+
vars: vars$a
|
|
8444
8448
|
});
|
|
8445
8449
|
|
|
8446
|
-
const componentName$
|
|
8450
|
+
const componentName$c = getComponentName('button-multi-selection-group-internal');
|
|
8447
8451
|
|
|
8448
8452
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8449
|
-
componentName$
|
|
8453
|
+
componentName$c
|
|
8450
8454
|
) {
|
|
8451
8455
|
#getSelectedNodes() {
|
|
8452
8456
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
|
@@ -8549,7 +8553,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
|
8549
8553
|
}
|
|
8550
8554
|
}
|
|
8551
8555
|
|
|
8552
|
-
const componentName$
|
|
8556
|
+
const componentName$b = getComponentName('button-multi-selection-group');
|
|
8553
8557
|
|
|
8554
8558
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8555
8559
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8558,19 +8562,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
|
8558
8562
|
const template = document.createElement('template');
|
|
8559
8563
|
|
|
8560
8564
|
template.innerHTML = `
|
|
8561
|
-
<${componentName$
|
|
8565
|
+
<${componentName$c}
|
|
8562
8566
|
name="button-selection-group"
|
|
8563
8567
|
slot="input"
|
|
8564
8568
|
tabindex="-1"
|
|
8565
8569
|
part="internal-component"
|
|
8566
8570
|
>
|
|
8567
8571
|
<slot></slot>
|
|
8568
|
-
</${componentName$
|
|
8572
|
+
</${componentName$c}>
|
|
8569
8573
|
`;
|
|
8570
8574
|
|
|
8571
8575
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8572
8576
|
|
|
8573
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8577
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
|
8574
8578
|
|
|
8575
8579
|
forwardAttrs(this, this.inputElement, {
|
|
8576
8580
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
|
@@ -8595,23 +8599,23 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
|
8595
8599
|
wrappedEleName: 'vaadin-text-field',
|
|
8596
8600
|
style: () => buttonSelectionGroupStyles,
|
|
8597
8601
|
excludeAttrsSync: ['tabindex'],
|
|
8598
|
-
componentName: componentName$
|
|
8602
|
+
componentName: componentName$b,
|
|
8599
8603
|
})
|
|
8600
8604
|
);
|
|
8601
8605
|
|
|
8602
|
-
const vars$
|
|
8606
|
+
const vars$9 = ButtonMultiSelectionGroupClass.cssVarList;
|
|
8603
8607
|
|
|
8604
8608
|
const buttonMultiSelectionGroup = {
|
|
8605
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8609
|
+
...createBaseButtonSelectionGroupMappings(vars$9),
|
|
8606
8610
|
};
|
|
8607
8611
|
|
|
8608
8612
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8609
8613
|
__proto__: null,
|
|
8610
8614
|
default: buttonMultiSelectionGroup,
|
|
8611
|
-
vars: vars$
|
|
8615
|
+
vars: vars$9
|
|
8612
8616
|
});
|
|
8613
8617
|
|
|
8614
|
-
const componentName$
|
|
8618
|
+
const componentName$a = getComponentName('modal');
|
|
8615
8619
|
|
|
8616
8620
|
const customMixin$1 = (superclass) =>
|
|
8617
8621
|
class ModalMixinClass extends superclass {
|
|
@@ -8710,28 +8714,28 @@ const ModalClass = compose(
|
|
|
8710
8714
|
wrappedEleName: 'vaadin-dialog',
|
|
8711
8715
|
style: () => ``,
|
|
8712
8716
|
excludeAttrsSync: ['tabindex', 'opened'],
|
|
8713
|
-
componentName: componentName$
|
|
8717
|
+
componentName: componentName$a,
|
|
8714
8718
|
})
|
|
8715
8719
|
);
|
|
8716
8720
|
|
|
8717
|
-
const globalRefs$
|
|
8721
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
8718
8722
|
|
|
8719
8723
|
const compVars$1 = ModalClass.cssVarList;
|
|
8720
8724
|
|
|
8721
8725
|
const modal = {
|
|
8722
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
|
8723
|
-
[compVars$1.overlayShadow]: globalRefs$
|
|
8726
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
|
|
8727
|
+
[compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
|
|
8724
8728
|
[compVars$1.overlayWidth]: '540px',
|
|
8725
8729
|
};
|
|
8726
8730
|
|
|
8727
|
-
const vars$
|
|
8731
|
+
const vars$8 = {
|
|
8728
8732
|
...compVars$1,
|
|
8729
8733
|
};
|
|
8730
8734
|
|
|
8731
8735
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
|
8732
8736
|
__proto__: null,
|
|
8733
8737
|
default: modal,
|
|
8734
|
-
vars: vars$
|
|
8738
|
+
vars: vars$8
|
|
8735
8739
|
});
|
|
8736
8740
|
|
|
8737
8741
|
const isValidDataType = (data) => {
|
|
@@ -8744,7 +8748,7 @@ const isValidDataType = (data) => {
|
|
|
8744
8748
|
return isValid;
|
|
8745
8749
|
};
|
|
8746
8750
|
|
|
8747
|
-
const componentName$
|
|
8751
|
+
const componentName$9 = getComponentName('grid');
|
|
8748
8752
|
|
|
8749
8753
|
const GridMixin = (superclass) =>
|
|
8750
8754
|
class GridMixinClass extends superclass {
|
|
@@ -8904,7 +8908,7 @@ const GridMixin = (superclass) =>
|
|
|
8904
8908
|
};
|
|
8905
8909
|
|
|
8906
8910
|
const {
|
|
8907
|
-
host: host$
|
|
8911
|
+
host: host$4,
|
|
8908
8912
|
headerRow,
|
|
8909
8913
|
headerRowCell,
|
|
8910
8914
|
contentRow,
|
|
@@ -8939,15 +8943,15 @@ const GridClass = compose(
|
|
|
8939
8943
|
fontWeight: { ...contentRow },
|
|
8940
8944
|
valueTextColor: { ...contentRow, property: 'color' },
|
|
8941
8945
|
backgroundColor: [
|
|
8942
|
-
{ ...host$
|
|
8946
|
+
{ ...host$4, property: 'background-color' },
|
|
8943
8947
|
{ ...contentRow, property: 'background-color' },
|
|
8944
8948
|
],
|
|
8945
8949
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
|
8946
8950
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
|
8947
|
-
borderColor: { ...host$
|
|
8948
|
-
borderWidth: { ...host$
|
|
8949
|
-
borderStyle: { ...host$
|
|
8950
|
-
borderRadius: { ...host$
|
|
8951
|
+
borderColor: { ...host$4, property: 'border-color' },
|
|
8952
|
+
borderWidth: { ...host$4, property: 'border-width' },
|
|
8953
|
+
borderStyle: { ...host$4, property: 'border-style' },
|
|
8954
|
+
borderRadius: { ...host$4, property: 'border-radius' },
|
|
8951
8955
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
|
8952
8956
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
|
8953
8957
|
separatorColor: [
|
|
@@ -8980,40 +8984,40 @@ const GridClass = compose(
|
|
|
8980
8984
|
}
|
|
8981
8985
|
`,
|
|
8982
8986
|
excludeAttrsSync: ['columns', 'tabindex'],
|
|
8983
|
-
componentName: componentName$
|
|
8987
|
+
componentName: componentName$9,
|
|
8984
8988
|
})
|
|
8985
8989
|
);
|
|
8986
8990
|
|
|
8987
|
-
const globalRefs$
|
|
8988
|
-
const vars$
|
|
8991
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
8992
|
+
const vars$7 = GridClass.cssVarList;
|
|
8989
8993
|
|
|
8990
8994
|
const grid = {
|
|
8991
|
-
[vars$
|
|
8992
|
-
[vars$
|
|
8993
|
-
[vars$
|
|
8994
|
-
[vars$
|
|
8995
|
-
[vars$
|
|
8995
|
+
[vars$7.hostWidth]: '100%',
|
|
8996
|
+
[vars$7.hostHeight]: '100%',
|
|
8997
|
+
[vars$7.hostMinHeight]: '400px',
|
|
8998
|
+
[vars$7.fontWeight]: '400',
|
|
8999
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.main,
|
|
8996
9000
|
|
|
8997
|
-
[vars$
|
|
8998
|
-
[vars$
|
|
9001
|
+
[vars$7.fontSize]: refs.fontSize,
|
|
9002
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
|
8999
9003
|
|
|
9000
|
-
[vars$
|
|
9001
|
-
[vars$
|
|
9002
|
-
[vars$
|
|
9004
|
+
[vars$7.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
|
|
9005
|
+
[vars$7.activeSortIndicator]: globalRefs$6.colors.surface.dark,
|
|
9006
|
+
[vars$7.resizeHandleColor]: globalRefs$6.colors.surface.light,
|
|
9003
9007
|
|
|
9004
|
-
[vars$
|
|
9005
|
-
[vars$
|
|
9006
|
-
[vars$
|
|
9007
|
-
[vars$
|
|
9008
|
+
[vars$7.borderWidth]: refs.borderWidth,
|
|
9009
|
+
[vars$7.borderStyle]: refs.borderStyle,
|
|
9010
|
+
[vars$7.borderRadius]: refs.borderRadius,
|
|
9011
|
+
[vars$7.borderColor]: 'transparent',
|
|
9008
9012
|
|
|
9009
|
-
[vars$
|
|
9010
|
-
[vars$
|
|
9013
|
+
[vars$7.headerRowTextColor]: globalRefs$6.colors.surface.dark,
|
|
9014
|
+
[vars$7.separatorColor]: globalRefs$6.colors.surface.light,
|
|
9011
9015
|
|
|
9012
|
-
[vars$
|
|
9013
|
-
[vars$
|
|
9016
|
+
[vars$7.valueTextColor]: globalRefs$6.colors.surface.contrast,
|
|
9017
|
+
[vars$7.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
|
|
9014
9018
|
|
|
9015
9019
|
_bordered: {
|
|
9016
|
-
[vars$
|
|
9020
|
+
[vars$7.borderColor]: refs.borderColor,
|
|
9017
9021
|
},
|
|
9018
9022
|
};
|
|
9019
9023
|
|
|
@@ -9021,10 +9025,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
|
9021
9025
|
__proto__: null,
|
|
9022
9026
|
default: grid,
|
|
9023
9027
|
grid: grid,
|
|
9024
|
-
vars: vars$
|
|
9028
|
+
vars: vars$7
|
|
9025
9029
|
});
|
|
9026
9030
|
|
|
9027
|
-
const componentName$
|
|
9031
|
+
const componentName$8 = getComponentName('notification-card');
|
|
9028
9032
|
|
|
9029
9033
|
const notificationCardMixin = (superclass) =>
|
|
9030
9034
|
class NotificationCardMixinClass extends superclass {
|
|
@@ -9132,54 +9136,54 @@ const NotificationCardClass = compose(
|
|
|
9132
9136
|
}
|
|
9133
9137
|
`,
|
|
9134
9138
|
excludeAttrsSync: ['tabindex'],
|
|
9135
|
-
componentName: componentName$
|
|
9139
|
+
componentName: componentName$8,
|
|
9136
9140
|
})
|
|
9137
9141
|
);
|
|
9138
9142
|
|
|
9139
|
-
const globalRefs$
|
|
9140
|
-
const vars$
|
|
9143
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
9144
|
+
const vars$6 = NotificationCardClass.cssVarList;
|
|
9141
9145
|
|
|
9142
9146
|
const shadowColor = '#00000020';
|
|
9143
9147
|
|
|
9144
9148
|
const notification = {
|
|
9145
|
-
[vars$
|
|
9146
|
-
[vars$
|
|
9147
|
-
[vars$
|
|
9148
|
-
[vars$
|
|
9149
|
-
[vars$
|
|
9150
|
-
[vars$
|
|
9151
|
-
[vars$
|
|
9152
|
-
[vars$
|
|
9153
|
-
[vars$
|
|
9149
|
+
[vars$6.hostMinWidth]: '415px',
|
|
9150
|
+
[vars$6.fontFamily]: globalRefs$5.fonts.font1.family,
|
|
9151
|
+
[vars$6.fontSize]: globalRefs$5.typography.body1.size,
|
|
9152
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
|
|
9153
|
+
[vars$6.textColor]: globalRefs$5.colors.surface.contrast,
|
|
9154
|
+
[vars$6.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
|
|
9155
|
+
[vars$6.verticalPadding]: '0.625em',
|
|
9156
|
+
[vars$6.horizontalPadding]: '1.5em',
|
|
9157
|
+
[vars$6.borderRadius]: globalRefs$5.radius.xs,
|
|
9154
9158
|
|
|
9155
9159
|
_bordered: {
|
|
9156
|
-
[vars$
|
|
9157
|
-
[vars$
|
|
9158
|
-
[vars$
|
|
9160
|
+
[vars$6.borderWidth]: globalRefs$5.border.sm,
|
|
9161
|
+
[vars$6.borderStyle]: 'solid',
|
|
9162
|
+
[vars$6.borderColor]: 'transparent',
|
|
9159
9163
|
},
|
|
9160
9164
|
|
|
9161
9165
|
size: {
|
|
9162
|
-
xs: { [vars$
|
|
9163
|
-
sm: { [vars$
|
|
9164
|
-
md: { [vars$
|
|
9165
|
-
lg: { [vars$
|
|
9166
|
+
xs: { [vars$6.fontSize]: '12px' },
|
|
9167
|
+
sm: { [vars$6.fontSize]: '14px' },
|
|
9168
|
+
md: { [vars$6.fontSize]: '16px' },
|
|
9169
|
+
lg: { [vars$6.fontSize]: '18px' },
|
|
9166
9170
|
},
|
|
9167
9171
|
|
|
9168
9172
|
mode: {
|
|
9169
9173
|
primary: {
|
|
9170
|
-
[vars$
|
|
9171
|
-
[vars$
|
|
9172
|
-
[vars$
|
|
9174
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.primary.main,
|
|
9175
|
+
[vars$6.textColor]: globalRefs$5.colors.primary.contrast,
|
|
9176
|
+
[vars$6.borderColor]: globalRefs$5.colors.primary.light,
|
|
9173
9177
|
},
|
|
9174
9178
|
success: {
|
|
9175
|
-
[vars$
|
|
9176
|
-
[vars$
|
|
9177
|
-
[vars$
|
|
9179
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.success.main,
|
|
9180
|
+
[vars$6.textColor]: globalRefs$5.colors.success.contrast,
|
|
9181
|
+
[vars$6.borderColor]: globalRefs$5.colors.success.light,
|
|
9178
9182
|
},
|
|
9179
9183
|
error: {
|
|
9180
|
-
[vars$
|
|
9181
|
-
[vars$
|
|
9182
|
-
[vars$
|
|
9184
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.error.main,
|
|
9185
|
+
[vars$6.textColor]: globalRefs$5.colors.error.contrast,
|
|
9186
|
+
[vars$6.borderColor]: globalRefs$5.colors.error.light,
|
|
9183
9187
|
},
|
|
9184
9188
|
},
|
|
9185
9189
|
};
|
|
@@ -9187,10 +9191,10 @@ const notification = {
|
|
|
9187
9191
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
|
9188
9192
|
__proto__: null,
|
|
9189
9193
|
default: notification,
|
|
9190
|
-
vars: vars$
|
|
9194
|
+
vars: vars$6
|
|
9191
9195
|
});
|
|
9192
9196
|
|
|
9193
|
-
const componentName$
|
|
9197
|
+
const componentName$7 = getComponentName('multi-select-combo-box');
|
|
9194
9198
|
|
|
9195
9199
|
const multiSelectComboBoxMixin = (superclass) =>
|
|
9196
9200
|
class MultiSelectComboBoxMixinClass extends superclass {
|
|
@@ -9578,7 +9582,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
|
9578
9582
|
};
|
|
9579
9583
|
|
|
9580
9584
|
const {
|
|
9581
|
-
host: host$
|
|
9585
|
+
host: host$3,
|
|
9582
9586
|
inputField,
|
|
9583
9587
|
inputElement,
|
|
9584
9588
|
placeholder,
|
|
@@ -9616,10 +9620,10 @@ const {
|
|
|
9616
9620
|
const MultiSelectComboBoxClass = compose(
|
|
9617
9621
|
createStyleMixin({
|
|
9618
9622
|
mappings: {
|
|
9619
|
-
hostWidth: { ...host$
|
|
9620
|
-
hostDirection: { ...host$
|
|
9623
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
9624
|
+
hostDirection: { ...host$3, property: 'direction' },
|
|
9621
9625
|
// we apply font-size also on the host so we can set its width with em
|
|
9622
|
-
fontSize: [{}, host$
|
|
9626
|
+
fontSize: [{}, host$3],
|
|
9623
9627
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
|
9624
9628
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
|
9625
9629
|
labelTextColor: [
|
|
@@ -9794,73 +9798,73 @@ const MultiSelectComboBoxClass = compose(
|
|
|
9794
9798
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
|
9795
9799
|
// tries to override it, causing us to lose the user set placeholder.
|
|
9796
9800
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
|
9797
|
-
componentName: componentName$
|
|
9801
|
+
componentName: componentName$7,
|
|
9798
9802
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
|
9799
9803
|
})
|
|
9800
9804
|
);
|
|
9801
9805
|
|
|
9802
|
-
const globalRefs$
|
|
9803
|
-
const vars$
|
|
9806
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
9807
|
+
const vars$5 = MultiSelectComboBoxClass.cssVarList;
|
|
9804
9808
|
|
|
9805
9809
|
const multiSelectComboBox = {
|
|
9806
|
-
[vars$
|
|
9807
|
-
[vars$
|
|
9808
|
-
[vars$
|
|
9809
|
-
[vars$
|
|
9810
|
-
[vars$
|
|
9811
|
-
[vars$
|
|
9812
|
-
[vars$
|
|
9813
|
-
[vars$
|
|
9814
|
-
[vars$
|
|
9815
|
-
[vars$
|
|
9816
|
-
[vars$
|
|
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$
|
|
9810
|
+
[vars$5.hostWidth]: refs.width,
|
|
9811
|
+
[vars$5.hostDirection]: refs.direction,
|
|
9812
|
+
[vars$5.fontSize]: refs.fontSize,
|
|
9813
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
|
9814
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
|
9815
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
9816
|
+
[vars$5.inputBorderColor]: refs.borderColor,
|
|
9817
|
+
[vars$5.inputBorderWidth]: refs.borderWidth,
|
|
9818
|
+
[vars$5.inputBorderStyle]: refs.borderStyle,
|
|
9819
|
+
[vars$5.inputBorderRadius]: refs.borderRadius,
|
|
9820
|
+
[vars$5.inputOutlineColor]: refs.outlineColor,
|
|
9821
|
+
[vars$5.inputOutlineOffset]: refs.outlineOffset,
|
|
9822
|
+
[vars$5.inputOutlineWidth]: refs.outlineWidth,
|
|
9823
|
+
[vars$5.inputOutlineStyle]: refs.outlineStyle,
|
|
9824
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
|
9825
|
+
[vars$5.inputValueTextColor]: refs.valueTextColor,
|
|
9826
|
+
[vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
9827
|
+
[vars$5.inputBackgroundColor]: refs.backgroundColor,
|
|
9828
|
+
[vars$5.inputHorizontalPadding]: refs.horizontalPadding,
|
|
9829
|
+
[vars$5.inputVerticalPadding]: refs.verticalPadding,
|
|
9830
|
+
[vars$5.inputHeight]: refs.inputHeight,
|
|
9831
|
+
[vars$5.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
|
|
9832
|
+
[vars$5.inputDropdownButtonCursor]: 'pointer',
|
|
9833
|
+
[vars$5.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
9834
|
+
[vars$5.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
|
9835
|
+
[vars$5.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
|
|
9836
|
+
[vars$5.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
|
|
9837
|
+
[vars$5.chipFontSize]: refs.chipFontSize,
|
|
9838
|
+
[vars$5.chipTextColor]: globalRefs$4.colors.surface.contrast,
|
|
9839
|
+
[vars$5.chipBackgroundColor]: globalRefs$4.colors.surface.light,
|
|
9836
9840
|
|
|
9837
9841
|
_readonly: {
|
|
9838
|
-
[vars$
|
|
9842
|
+
[vars$5.inputDropdownButtonCursor]: 'default',
|
|
9839
9843
|
},
|
|
9840
9844
|
|
|
9841
9845
|
// Overlay theme exposed via the component:
|
|
9842
|
-
[vars$
|
|
9843
|
-
[vars$
|
|
9844
|
-
[vars$
|
|
9845
|
-
[vars$
|
|
9846
|
-
[vars$
|
|
9847
|
-
[vars$
|
|
9846
|
+
[vars$5.overlayFontSize]: refs.fontSize,
|
|
9847
|
+
[vars$5.overlayFontFamily]: refs.fontFamily,
|
|
9848
|
+
[vars$5.overlayCursor]: 'pointer',
|
|
9849
|
+
[vars$5.overlayItemBoxShadow]: 'none',
|
|
9850
|
+
[vars$5.overlayBackground]: refs.backgroundColor,
|
|
9851
|
+
[vars$5.overlayTextColor]: refs.valueTextColor,
|
|
9848
9852
|
|
|
9849
9853
|
// Overlay direct theme:
|
|
9850
|
-
[vars$
|
|
9851
|
-
[vars$
|
|
9854
|
+
[vars$5.overlay.minHeight]: '400px',
|
|
9855
|
+
[vars$5.overlay.margin]: '0',
|
|
9852
9856
|
};
|
|
9853
9857
|
|
|
9854
9858
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
|
9855
9859
|
__proto__: null,
|
|
9856
9860
|
default: multiSelectComboBox,
|
|
9857
9861
|
multiSelectComboBox: multiSelectComboBox,
|
|
9858
|
-
vars: vars$
|
|
9862
|
+
vars: vars$5
|
|
9859
9863
|
});
|
|
9860
9864
|
|
|
9861
|
-
const componentName$
|
|
9865
|
+
const componentName$6 = getComponentName('badge');
|
|
9862
9866
|
|
|
9863
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
|
9867
|
+
class RawBadge extends createBaseClass({ componentName: componentName$6, baseSelector: ':host > div' }) {
|
|
9864
9868
|
constructor() {
|
|
9865
9869
|
super();
|
|
9866
9870
|
|
|
@@ -9871,6 +9875,9 @@ class RawBadge extends createBaseClass({ componentName: componentName$5, baseSel
|
|
|
9871
9875
|
}
|
|
9872
9876
|
:host > div {
|
|
9873
9877
|
width: 100%;
|
|
9878
|
+
text-overflow: ellipsis;
|
|
9879
|
+
overflow: hidden;
|
|
9880
|
+
white-space: nowrap;
|
|
9874
9881
|
}
|
|
9875
9882
|
</style>
|
|
9876
9883
|
<div>
|
|
@@ -9908,79 +9915,79 @@ const BadgeClass = compose(
|
|
|
9908
9915
|
componentNameValidationMixin
|
|
9909
9916
|
)(RawBadge);
|
|
9910
9917
|
|
|
9911
|
-
const globalRefs$
|
|
9912
|
-
const vars$
|
|
9918
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
9919
|
+
const vars$4 = BadgeClass.cssVarList;
|
|
9913
9920
|
|
|
9914
|
-
const badge = {
|
|
9915
|
-
[vars$
|
|
9916
|
-
[vars$
|
|
9921
|
+
const badge$1 = {
|
|
9922
|
+
[vars$4.hostWidth]: 'fit-content',
|
|
9923
|
+
[vars$4.hostDirection]: globalRefs$3.direction,
|
|
9917
9924
|
|
|
9918
|
-
[vars$
|
|
9925
|
+
[vars$4.textAlign]: 'center',
|
|
9919
9926
|
|
|
9920
|
-
[vars$
|
|
9921
|
-
[vars$
|
|
9927
|
+
[vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
|
|
9928
|
+
[vars$4.fontWeight]: '400',
|
|
9922
9929
|
|
|
9923
|
-
[vars$
|
|
9924
|
-
[vars$
|
|
9930
|
+
[vars$4.verticalPadding]: '0.25em',
|
|
9931
|
+
[vars$4.horizontalPadding]: '0.5em',
|
|
9925
9932
|
|
|
9926
|
-
[vars$
|
|
9927
|
-
[vars$
|
|
9928
|
-
[vars$
|
|
9929
|
-
[vars$
|
|
9933
|
+
[vars$4.borderWidth]: globalRefs$3.border.xs,
|
|
9934
|
+
[vars$4.borderRadius]: globalRefs$3.radius.xs,
|
|
9935
|
+
[vars$4.borderColor]: 'transparent',
|
|
9936
|
+
[vars$4.borderStyle]: 'solid',
|
|
9930
9937
|
|
|
9931
9938
|
_fullWidth: {
|
|
9932
|
-
[vars$
|
|
9939
|
+
[vars$4.hostWidth]: '100%',
|
|
9933
9940
|
},
|
|
9934
9941
|
|
|
9935
9942
|
size: {
|
|
9936
|
-
xs: { [vars$
|
|
9937
|
-
sm: { [vars$
|
|
9938
|
-
md: { [vars$
|
|
9939
|
-
lg: { [vars$
|
|
9943
|
+
xs: { [vars$4.fontSize]: '12px' },
|
|
9944
|
+
sm: { [vars$4.fontSize]: '14px' },
|
|
9945
|
+
md: { [vars$4.fontSize]: '16px' },
|
|
9946
|
+
lg: { [vars$4.fontSize]: '18px' },
|
|
9940
9947
|
},
|
|
9941
9948
|
|
|
9942
9949
|
mode: {
|
|
9943
9950
|
default: {
|
|
9944
|
-
[vars$
|
|
9951
|
+
[vars$4.textColor]: globalRefs$3.colors.surface.dark,
|
|
9945
9952
|
_bordered: {
|
|
9946
|
-
[vars$
|
|
9953
|
+
[vars$4.borderColor]: globalRefs$3.colors.surface.light,
|
|
9947
9954
|
},
|
|
9948
9955
|
},
|
|
9949
9956
|
primary: {
|
|
9950
|
-
[vars$
|
|
9957
|
+
[vars$4.textColor]: globalRefs$3.colors.primary.main,
|
|
9951
9958
|
_bordered: {
|
|
9952
|
-
[vars$
|
|
9959
|
+
[vars$4.borderColor]: globalRefs$3.colors.primary.light,
|
|
9953
9960
|
},
|
|
9954
9961
|
},
|
|
9955
9962
|
secondary: {
|
|
9956
|
-
[vars$
|
|
9963
|
+
[vars$4.textColor]: globalRefs$3.colors.secondary.main,
|
|
9957
9964
|
_bordered: {
|
|
9958
|
-
[vars$
|
|
9965
|
+
[vars$4.borderColor]: globalRefs$3.colors.secondary.light,
|
|
9959
9966
|
},
|
|
9960
9967
|
},
|
|
9961
9968
|
error: {
|
|
9962
|
-
[vars$
|
|
9969
|
+
[vars$4.textColor]: globalRefs$3.colors.error.main,
|
|
9963
9970
|
_bordered: {
|
|
9964
|
-
[vars$
|
|
9971
|
+
[vars$4.borderColor]: globalRefs$3.colors.error.light,
|
|
9965
9972
|
},
|
|
9966
9973
|
},
|
|
9967
9974
|
success: {
|
|
9968
|
-
[vars$
|
|
9975
|
+
[vars$4.textColor]: globalRefs$3.colors.success.main,
|
|
9969
9976
|
_bordered: {
|
|
9970
|
-
[vars$
|
|
9977
|
+
[vars$4.borderColor]: globalRefs$3.colors.success.light,
|
|
9971
9978
|
},
|
|
9972
9979
|
},
|
|
9973
9980
|
},
|
|
9974
9981
|
};
|
|
9975
9982
|
|
|
9976
|
-
var badge$
|
|
9983
|
+
var badge$2 = /*#__PURE__*/Object.freeze({
|
|
9977
9984
|
__proto__: null,
|
|
9978
|
-
default: badge,
|
|
9979
|
-
vars: vars$
|
|
9985
|
+
default: badge$1,
|
|
9986
|
+
vars: vars$4
|
|
9980
9987
|
});
|
|
9981
9988
|
|
|
9982
|
-
const componentName$
|
|
9983
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
|
9989
|
+
const componentName$5 = getComponentName('avatar');
|
|
9990
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > .wrapper' }) {
|
|
9984
9991
|
constructor() {
|
|
9985
9992
|
super();
|
|
9986
9993
|
|
|
@@ -9990,7 +9997,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
9990
9997
|
display: inline-flex;
|
|
9991
9998
|
}
|
|
9992
9999
|
|
|
9993
|
-
.
|
|
10000
|
+
.editableBadge {
|
|
9994
10001
|
border: 1px solid;
|
|
9995
10002
|
border-radius: 100%;
|
|
9996
10003
|
height: fit-content;
|
|
@@ -10026,7 +10033,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10026
10033
|
|
|
10027
10034
|
<div class="wrapper">
|
|
10028
10035
|
<vaadin-avatar></vaadin-avatar>
|
|
10029
|
-
<div class="
|
|
10036
|
+
<div class="editableBadge">
|
|
10030
10037
|
<vaadin-icon icon="vaadin:pencil"></vaadin-icon>
|
|
10031
10038
|
</div>
|
|
10032
10039
|
</div>
|
|
@@ -10035,10 +10042,11 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10035
10042
|
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
|
10036
10043
|
|
|
10037
10044
|
forwardAttrs(this, this.avatarComponent, {
|
|
10038
|
-
includeAttrs: ['name', 'img'],
|
|
10045
|
+
includeAttrs: ['display-name', 'img'],
|
|
10046
|
+
mapAttrs: { 'display-name': 'name' },
|
|
10039
10047
|
});
|
|
10040
10048
|
|
|
10041
|
-
const editableIcon = this.shadowRoot.querySelector('.
|
|
10049
|
+
const editableIcon = this.shadowRoot.querySelector('.editableBadge');
|
|
10042
10050
|
|
|
10043
10051
|
observeAttributes(
|
|
10044
10052
|
this,
|
|
@@ -10054,18 +10062,19 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10054
10062
|
}
|
|
10055
10063
|
}
|
|
10056
10064
|
|
|
10057
|
-
const { host: host$
|
|
10065
|
+
const { host: host$2, editableBadge, avatar: avatar$2 } = {
|
|
10058
10066
|
host: { selector: () => ':host' },
|
|
10059
|
-
editableBadge: { selector: '> .
|
|
10067
|
+
editableBadge: { selector: '> .editableBadge' },
|
|
10060
10068
|
avatar: { selector: 'vaadin-avatar' },
|
|
10061
10069
|
};
|
|
10062
10070
|
|
|
10063
10071
|
const AvatarClass = compose(
|
|
10064
10072
|
createStyleMixin({
|
|
10065
10073
|
mappings: {
|
|
10066
|
-
hostWidth: { ...host$
|
|
10067
|
-
hostHeight: { ...host$
|
|
10068
|
-
|
|
10074
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
10075
|
+
hostHeight: { ...host$2, property: 'height' },
|
|
10076
|
+
cursor: [avatar$2, host$2],
|
|
10077
|
+
hostDirection: { ...host$2, property: 'direction' },
|
|
10069
10078
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
|
10070
10079
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
|
10071
10080
|
editableIconColor: { ...editableBadge, property: 'color' },
|
|
@@ -10077,16 +10086,20 @@ const AvatarClass = compose(
|
|
|
10077
10086
|
componentNameValidationMixin
|
|
10078
10087
|
)(RawAvatar);
|
|
10079
10088
|
|
|
10080
|
-
const globalRefs$
|
|
10089
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
10081
10090
|
const compVars = AvatarClass.cssVarList;
|
|
10082
10091
|
|
|
10083
10092
|
const avatar = {
|
|
10084
|
-
[compVars.hostDirection]: globalRefs$
|
|
10085
|
-
[compVars.editableIconColor]: globalRefs$
|
|
10086
|
-
[compVars.editableBorderColor]: globalRefs$
|
|
10087
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
|
10088
|
-
[compVars.avatarTextColor]: globalRefs$
|
|
10089
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
|
10093
|
+
[compVars.hostDirection]: globalRefs$2.direction,
|
|
10094
|
+
[compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
|
|
10095
|
+
[compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
|
|
10096
|
+
[compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
|
|
10097
|
+
[compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
|
|
10098
|
+
[compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
|
|
10099
|
+
|
|
10100
|
+
_editable: {
|
|
10101
|
+
[compVars.cursor]: 'pointer',
|
|
10102
|
+
},
|
|
10090
10103
|
|
|
10091
10104
|
size: {
|
|
10092
10105
|
xs: {
|
|
@@ -10108,21 +10121,21 @@ const avatar = {
|
|
|
10108
10121
|
},
|
|
10109
10122
|
};
|
|
10110
10123
|
|
|
10111
|
-
const vars$
|
|
10124
|
+
const vars$3 = {
|
|
10112
10125
|
...compVars,
|
|
10113
10126
|
};
|
|
10114
10127
|
|
|
10115
10128
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10116
10129
|
__proto__: null,
|
|
10117
10130
|
default: avatar,
|
|
10118
|
-
vars: vars$
|
|
10131
|
+
vars: vars$3
|
|
10119
10132
|
});
|
|
10120
10133
|
|
|
10121
|
-
const componentName$
|
|
10134
|
+
const componentName$4 = getComponentName('mappings-field-internal');
|
|
10122
10135
|
|
|
10123
|
-
createBaseInputClass({ componentName: componentName$
|
|
10136
|
+
createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
|
|
10124
10137
|
|
|
10125
|
-
const componentName$
|
|
10138
|
+
const componentName$3 = getComponentName('mappings-field');
|
|
10126
10139
|
|
|
10127
10140
|
const customMixin = (superclass) =>
|
|
10128
10141
|
class MappingsFieldMixinClass extends superclass {
|
|
@@ -10151,14 +10164,14 @@ const customMixin = (superclass) =>
|
|
|
10151
10164
|
const template = document.createElement('template');
|
|
10152
10165
|
|
|
10153
10166
|
template.innerHTML = `
|
|
10154
|
-
<${componentName$
|
|
10167
|
+
<${componentName$4}
|
|
10155
10168
|
tabindex="-1"
|
|
10156
|
-
></${componentName$
|
|
10169
|
+
></${componentName$4}>
|
|
10157
10170
|
`;
|
|
10158
10171
|
|
|
10159
10172
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10160
10173
|
|
|
10161
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
10174
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$4);
|
|
10162
10175
|
|
|
10163
10176
|
forwardAttrs(this, this.inputElement, {
|
|
10164
10177
|
includeAttrs: [
|
|
@@ -10181,7 +10194,7 @@ const customMixin = (superclass) =>
|
|
|
10181
10194
|
};
|
|
10182
10195
|
|
|
10183
10196
|
const {
|
|
10184
|
-
host,
|
|
10197
|
+
host: host$1,
|
|
10185
10198
|
helperText,
|
|
10186
10199
|
errorMessage,
|
|
10187
10200
|
mappingItem,
|
|
@@ -10205,10 +10218,10 @@ const {
|
|
|
10205
10218
|
const MappingsFieldClass = compose(
|
|
10206
10219
|
createStyleMixin({
|
|
10207
10220
|
mappings: {
|
|
10208
|
-
hostWidth: { ...host, property: 'width' },
|
|
10209
|
-
hostDirection: { ...host, property: 'direction' },
|
|
10221
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
10222
|
+
hostDirection: { ...host$1, property: 'direction' },
|
|
10210
10223
|
// we apply font-size also on the host so we can set its width with em
|
|
10211
|
-
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
|
10224
|
+
fontSize: [{}, host$1, { ...separator, property: 'margin-top' }],
|
|
10212
10225
|
fontFamily: [helperText, errorMessage, labels],
|
|
10213
10226
|
separatorFontSize: { ...separator, property: 'font-size' },
|
|
10214
10227
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
|
@@ -10274,35 +10287,283 @@ const MappingsFieldClass = compose(
|
|
|
10274
10287
|
'options',
|
|
10275
10288
|
'error-message',
|
|
10276
10289
|
],
|
|
10277
|
-
componentName: componentName$
|
|
10290
|
+
componentName: componentName$3,
|
|
10278
10291
|
})
|
|
10279
10292
|
);
|
|
10280
10293
|
|
|
10281
|
-
const globalRefs = getThemeRefs(globals);
|
|
10294
|
+
const globalRefs$1 = getThemeRefs(globals);
|
|
10282
10295
|
|
|
10283
|
-
const vars$
|
|
10296
|
+
const vars$2 = MappingsFieldClass.cssVarList;
|
|
10284
10297
|
|
|
10285
10298
|
const mappingsField = {
|
|
10286
|
-
[vars$
|
|
10287
|
-
[vars$
|
|
10288
|
-
[vars$
|
|
10289
|
-
[vars$
|
|
10290
|
-
[vars$
|
|
10291
|
-
[vars$
|
|
10292
|
-
[vars$
|
|
10299
|
+
[vars$2.hostWidth]: refs.width,
|
|
10300
|
+
[vars$2.hostDirection]: refs.direction,
|
|
10301
|
+
[vars$2.fontSize]: refs.fontSize,
|
|
10302
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
|
10303
|
+
[vars$2.separatorFontSize]: '14px',
|
|
10304
|
+
[vars$2.labelTextColor]: refs.labelTextColor,
|
|
10305
|
+
[vars$2.itemMarginBottom]: '1em',
|
|
10293
10306
|
// To be positioned correctly, the min width has to match the text field min width
|
|
10294
|
-
[vars$
|
|
10307
|
+
[vars$2.valueLabelMinWidth]: refs.minWidth,
|
|
10295
10308
|
// To be positioned correctly, the min width has to match the combo box field min width
|
|
10296
|
-
[vars$
|
|
10297
|
-
[vars$
|
|
10298
|
-
[vars$
|
|
10299
|
-
[vars$
|
|
10309
|
+
[vars$2.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
|
|
10310
|
+
[vars$2.labelsMarginBottom]: `calc(${globalRefs$1.typography.body2.size} / 2)`,
|
|
10311
|
+
[vars$2.separatorWidth]: '70px',
|
|
10312
|
+
[vars$2.removeButtonWidth]: '60px',
|
|
10300
10313
|
};
|
|
10301
10314
|
|
|
10302
10315
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
|
10303
10316
|
__proto__: null,
|
|
10304
10317
|
default: mappingsField,
|
|
10305
10318
|
mappingsField: mappingsField,
|
|
10319
|
+
vars: vars$2
|
|
10320
|
+
});
|
|
10321
|
+
|
|
10322
|
+
function deleteIcon() {
|
|
10323
|
+
return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
|
10324
|
+
}
|
|
10325
|
+
|
|
10326
|
+
function editIcon() {
|
|
10327
|
+
return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
|
10328
|
+
}
|
|
10329
|
+
|
|
10330
|
+
const componentName$2 = getComponentName('user-attribute');
|
|
10331
|
+
class RawUserAttribute extends createBaseClass({
|
|
10332
|
+
componentName: componentName$2,
|
|
10333
|
+
baseSelector: ':host > .root',
|
|
10334
|
+
}) {
|
|
10335
|
+
constructor() {
|
|
10336
|
+
super();
|
|
10337
|
+
|
|
10338
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
|
10339
|
+
<style>
|
|
10340
|
+
:host {
|
|
10341
|
+
display: inline-flex;
|
|
10342
|
+
}
|
|
10343
|
+
|
|
10344
|
+
vaadin-icon {
|
|
10345
|
+
color: currentcolor;
|
|
10346
|
+
}
|
|
10347
|
+
|
|
10348
|
+
.root {
|
|
10349
|
+
display: flex;
|
|
10350
|
+
width: 100%;
|
|
10351
|
+
height: 100%;
|
|
10352
|
+
align-items: center;
|
|
10353
|
+
}
|
|
10354
|
+
|
|
10355
|
+
.btn-wrapper {
|
|
10356
|
+
display: flex;
|
|
10357
|
+
justify-content: space-between;
|
|
10358
|
+
align-items: center;
|
|
10359
|
+
flex-grow: 0;
|
|
10360
|
+
}
|
|
10361
|
+
|
|
10362
|
+
.text-wrapper {
|
|
10363
|
+
display: flex;
|
|
10364
|
+
align-items: center;
|
|
10365
|
+
flex-grow: 1;
|
|
10366
|
+
}
|
|
10367
|
+
|
|
10368
|
+
descope-text::part(text-wrapper) {
|
|
10369
|
+
text-overflow: ellipsis;
|
|
10370
|
+
overflow: hidden;
|
|
10371
|
+
white-space: nowrap;
|
|
10372
|
+
width: initial;
|
|
10373
|
+
}
|
|
10374
|
+
|
|
10375
|
+
descope-text {
|
|
10376
|
+
display: inline-flex;
|
|
10377
|
+
}
|
|
10378
|
+
|
|
10379
|
+
descope-badge {
|
|
10380
|
+
margin-inline-end: 10px;
|
|
10381
|
+
}
|
|
10382
|
+
|
|
10383
|
+
descope-text[data-id="label-text"].required:after {
|
|
10384
|
+
content: '*';
|
|
10385
|
+
color: var(${TextClass.cssVarList.textColor});
|
|
10386
|
+
}
|
|
10387
|
+
</style>
|
|
10388
|
+
|
|
10389
|
+
|
|
10390
|
+
<div class="root">
|
|
10391
|
+
<div class="text-wrapper">
|
|
10392
|
+
<descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
|
|
10393
|
+
<descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
|
|
10394
|
+
</div>
|
|
10395
|
+
|
|
10396
|
+
<div class="btn-wrapper">
|
|
10397
|
+
<descope-badge mode="default" bordered="true" size="xs"></descope-badge>
|
|
10398
|
+
<descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
|
|
10399
|
+
<vaadin-icon src=${editIcon}></vaadin-icon>
|
|
10400
|
+
</descope-button>
|
|
10401
|
+
<descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
|
|
10402
|
+
<vaadin-icon src=${deleteIcon}></vaadin-icon>
|
|
10403
|
+
</descope-button>
|
|
10404
|
+
</div
|
|
10405
|
+
</div>
|
|
10406
|
+
`;
|
|
10407
|
+
|
|
10408
|
+
this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
|
|
10409
|
+
this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
|
|
10410
|
+
this.badge = this.shadowRoot.querySelector('descope-badge');
|
|
10411
|
+
this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
|
|
10412
|
+
this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
|
|
10413
|
+
}
|
|
10414
|
+
|
|
10415
|
+
onLabelChange() {
|
|
10416
|
+
this.labelText.innerText = this.label;
|
|
10417
|
+
this.labelText.setAttribute('title', this.label);
|
|
10418
|
+
}
|
|
10419
|
+
|
|
10420
|
+
onValueOrPlaceholderChange() {
|
|
10421
|
+
const text = this.value || this.placeholder;
|
|
10422
|
+
const mode = this.value ? 'primary' : 'secondary';
|
|
10423
|
+
|
|
10424
|
+
this.valueText.innerText = text;
|
|
10425
|
+
this.valueText.setAttribute('title', text);
|
|
10426
|
+
this.valueText.setAttribute('mode', mode);
|
|
10427
|
+
}
|
|
10428
|
+
|
|
10429
|
+
onBadgeLabelChange() {
|
|
10430
|
+
if (!this.badgeLabel) {
|
|
10431
|
+
this.badge.style.display = 'none';
|
|
10432
|
+
} else {
|
|
10433
|
+
this.badge.innerText = this.badgeLabel;
|
|
10434
|
+
this.badge.style.display = '';
|
|
10435
|
+
}
|
|
10436
|
+
}
|
|
10437
|
+
|
|
10438
|
+
onBadgeTooltipTextChange() {
|
|
10439
|
+
this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
|
|
10440
|
+
}
|
|
10441
|
+
|
|
10442
|
+
onIsRequiredChange() {
|
|
10443
|
+
this.labelText.classList.toggle('required', this.isRequired);
|
|
10444
|
+
}
|
|
10445
|
+
|
|
10446
|
+
get label() {
|
|
10447
|
+
return this.getAttribute('label') || '';
|
|
10448
|
+
}
|
|
10449
|
+
|
|
10450
|
+
get value() {
|
|
10451
|
+
return this.getAttribute('value') || '';
|
|
10452
|
+
}
|
|
10453
|
+
|
|
10454
|
+
get placeholder() {
|
|
10455
|
+
return this.getAttribute('placeholder') || '';
|
|
10456
|
+
}
|
|
10457
|
+
|
|
10458
|
+
get isRequired() {
|
|
10459
|
+
return this.getAttribute('required') === 'true';
|
|
10460
|
+
}
|
|
10461
|
+
|
|
10462
|
+
get badgeLabel() {
|
|
10463
|
+
return this.getAttribute('badge-label') || '';
|
|
10464
|
+
}
|
|
10465
|
+
|
|
10466
|
+
get badgeTooltipText() {
|
|
10467
|
+
return this.getAttribute('badge-tooltip-text') || '';
|
|
10468
|
+
}
|
|
10469
|
+
|
|
10470
|
+
init() {
|
|
10471
|
+
this.onLabelChange();
|
|
10472
|
+
this.onValueOrPlaceholderChange();
|
|
10473
|
+
this.onIsRequiredChange();
|
|
10474
|
+
this.onBadgeLabelChange();
|
|
10475
|
+
this.onBadgeTooltipTextChange();
|
|
10476
|
+
|
|
10477
|
+
this.deleteButton.addEventListener('click', () =>
|
|
10478
|
+
this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
|
|
10479
|
+
);
|
|
10480
|
+
|
|
10481
|
+
this.editButton.addEventListener('click', () =>
|
|
10482
|
+
this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
|
|
10483
|
+
);
|
|
10484
|
+
}
|
|
10485
|
+
|
|
10486
|
+
static get observedAttributes() {
|
|
10487
|
+
return [
|
|
10488
|
+
'label',
|
|
10489
|
+
'value',
|
|
10490
|
+
'placeholder',
|
|
10491
|
+
'required',
|
|
10492
|
+
'badge-label',
|
|
10493
|
+
'badge-tooltip-text',
|
|
10494
|
+
].concat(super.observedAttributes);
|
|
10495
|
+
}
|
|
10496
|
+
|
|
10497
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
10498
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
|
10499
|
+
|
|
10500
|
+
if (oldValue === newValue) {
|
|
10501
|
+
return;
|
|
10502
|
+
}
|
|
10503
|
+
|
|
10504
|
+
if (name === 'label') {
|
|
10505
|
+
this.onLabelChange();
|
|
10506
|
+
} else if (name === 'value' || name === 'placeholder') {
|
|
10507
|
+
this.onValueOrPlaceholderChange();
|
|
10508
|
+
} else if (name === 'required') {
|
|
10509
|
+
this.onIsRequiredChange();
|
|
10510
|
+
} else if (name === 'badge-label') {
|
|
10511
|
+
this.onBadgeLabelChange();
|
|
10512
|
+
} else if (name === 'badge-tooltip-text') {
|
|
10513
|
+
this.onBadgeTooltipTextChange();
|
|
10514
|
+
}
|
|
10515
|
+
}
|
|
10516
|
+
}
|
|
10517
|
+
|
|
10518
|
+
const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10519
|
+
host: { selector: () => ':host' },
|
|
10520
|
+
textFields: { selector: 'descope-text' },
|
|
10521
|
+
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
|
10522
|
+
labelText: { selector: 'descope-text[data-id="label-text"]' },
|
|
10523
|
+
buttons: { selector: 'descope-button' },
|
|
10524
|
+
badge: { selector: 'descope-badge' },
|
|
10525
|
+
textWrapper: { selector: ' .text-wrapper' },
|
|
10526
|
+
};
|
|
10527
|
+
|
|
10528
|
+
const UserAttributeClass = compose(
|
|
10529
|
+
createStyleMixin({
|
|
10530
|
+
mappings: {
|
|
10531
|
+
hostWidth: { ...host, property: 'width' },
|
|
10532
|
+
hostMinWidth: { ...host, property: 'min-width' },
|
|
10533
|
+
hostDirection: [
|
|
10534
|
+
{ ...host, property: 'direction' },
|
|
10535
|
+
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
|
10536
|
+
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
|
10537
|
+
{ ...badge, property: BadgeClass.cssVarList.hostDirection },
|
|
10538
|
+
],
|
|
10539
|
+
labelTextWidth: { ...labelText, property: 'width' },
|
|
10540
|
+
valueTextWidth: { ...valueText, property: 'width' },
|
|
10541
|
+
badgeMaxWidth: { ...badge, property: 'max-width' },
|
|
10542
|
+
itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
|
|
10543
|
+
},
|
|
10544
|
+
}),
|
|
10545
|
+
draggableMixin,
|
|
10546
|
+
componentNameValidationMixin
|
|
10547
|
+
)(RawUserAttribute);
|
|
10548
|
+
|
|
10549
|
+
const globalRefs = getThemeRefs(globals);
|
|
10550
|
+
const vars$1 = UserAttributeClass.cssVarList;
|
|
10551
|
+
|
|
10552
|
+
const userAttribute = {
|
|
10553
|
+
[vars$1.hostDirection]: globalRefs.direction,
|
|
10554
|
+
[vars$1.labelTextWidth]: '150px',
|
|
10555
|
+
[vars$1.valueTextWidth]: '200px',
|
|
10556
|
+
[vars$1.badgeMaxWidth]: '85px',
|
|
10557
|
+
[vars$1.itemsGap]: '16px',
|
|
10558
|
+
[vars$1.hostMinWidth]: '530px',
|
|
10559
|
+
_fullWidth: {
|
|
10560
|
+
[vars$1.hostWidth]: '100%',
|
|
10561
|
+
},
|
|
10562
|
+
};
|
|
10563
|
+
|
|
10564
|
+
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
|
10565
|
+
__proto__: null,
|
|
10566
|
+
default: userAttribute,
|
|
10306
10567
|
vars: vars$1
|
|
10307
10568
|
});
|
|
10308
10569
|
|
|
@@ -10339,9 +10600,10 @@ const components = {
|
|
|
10339
10600
|
grid: grid$1,
|
|
10340
10601
|
notificationCard,
|
|
10341
10602
|
multiSelectComboBox: multiSelectComboBox$1,
|
|
10342
|
-
badge: badge$
|
|
10603
|
+
badge: badge$2,
|
|
10343
10604
|
avatar: avatar$1,
|
|
10344
10605
|
mappingsField: mappingsField$1,
|
|
10606
|
+
userAttribute: userAttribute$1,
|
|
10345
10607
|
};
|
|
10346
10608
|
|
|
10347
10609
|
const theme = Object.keys(components).reduce(
|
|
@@ -10354,7 +10616,7 @@ const vars = Object.keys(components).reduce(
|
|
|
10354
10616
|
);
|
|
10355
10617
|
|
|
10356
10618
|
const defaultTheme = { globals, components: theme };
|
|
10357
|
-
const themeVars = { globals: vars$
|
|
10619
|
+
const themeVars = { globals: vars$B, components: vars };
|
|
10358
10620
|
|
|
10359
10621
|
const colors = {
|
|
10360
10622
|
surface: {
|
|
@@ -10690,6 +10952,7 @@ exports.TextClass = TextClass;
|
|
|
10690
10952
|
exports.TextFieldClass = TextFieldClass;
|
|
10691
10953
|
exports.TotpImageClass = TotpImageClass;
|
|
10692
10954
|
exports.UploadFileClass = UploadFileClass;
|
|
10955
|
+
exports.UserAttributeClass = UserAttributeClass;
|
|
10693
10956
|
exports.componentsThemeManager = componentsThemeManager;
|
|
10694
10957
|
exports.createComponentsTheme = createComponentsTheme;
|
|
10695
10958
|
exports.createHelperVars = createHelperVars;
|