@descope/web-components-ui 1.0.290 → 1.0.292
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1336 -912
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +1565 -967
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-policy-validation-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPasswordClass.js +30 -2
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +51 -3
- package/src/components/descope-new-password/index.js +1 -0
- package/src/components/descope-policy-validation/PolicyValidationClass.js +220 -0
- package/src/components/descope-policy-validation/helpers.js +2 -0
- package/src/components/descope-policy-validation/index.js +5 -0
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +14 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +2 -2
- package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js +110 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/SamlGroupMappingsInternal.js +136 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js +3 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/index.js +10 -0
- package/src/index.cjs.js +2 -0
- package/src/index.d.ts +2 -0
- package/src/index.js +2 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/inputWrapper.js +3 -1
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/newPassword.js +5 -0
- package/src/theme/components/policyValidation.js +29 -0
- package/src/theme/components/samlGroupMappings.js +13 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -630,7 +630,7 @@ const globals = {
|
|
|
630
630
|
fonts,
|
|
631
631
|
direction,
|
|
632
632
|
};
|
|
633
|
-
const vars$
|
|
633
|
+
const vars$D = getThemeVars(globals);
|
|
634
634
|
|
|
635
635
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
|
636
636
|
|
|
@@ -2193,6 +2193,7 @@ const proxyInputMixin =
|
|
|
2193
2193
|
// allows us to set the event that should trigger validation
|
|
2194
2194
|
// it can be either a string or an array of strings (for multiple events)
|
|
2195
2195
|
inputEvent = 'input',
|
|
2196
|
+
triggerValidationEvents = [],
|
|
2196
2197
|
// Proxies all validations from the parent component to the input element
|
|
2197
2198
|
proxyParentValidation = false,
|
|
2198
2199
|
}) =>
|
|
@@ -2281,6 +2282,12 @@ const proxyInputMixin =
|
|
|
2281
2282
|
}
|
|
2282
2283
|
};
|
|
2283
2284
|
|
|
2285
|
+
triggerValidationEvents.forEach((e) => {
|
|
2286
|
+
this.baseElement?.addEventListener(e, () => {
|
|
2287
|
+
this.inputElement?.setCustomValidity('');
|
|
2288
|
+
});
|
|
2289
|
+
});
|
|
2290
|
+
|
|
2284
2291
|
// on some cases the base element is not ready so the inputElement is empty
|
|
2285
2292
|
// we are deferring this section to make sure the base element is ready
|
|
2286
2293
|
setTimeout(() => {
|
|
@@ -2569,7 +2576,7 @@ const clickableMixin = (superclass) =>
|
|
|
2569
2576
|
}
|
|
2570
2577
|
};
|
|
2571
2578
|
|
|
2572
|
-
const componentName$
|
|
2579
|
+
const componentName$M = getComponentName('button');
|
|
2573
2580
|
|
|
2574
2581
|
const resetStyles = `
|
|
2575
2582
|
:host {
|
|
@@ -2607,7 +2614,7 @@ const iconStyles = `
|
|
|
2607
2614
|
|
|
2608
2615
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
2609
2616
|
|
|
2610
|
-
const { host: host$
|
|
2617
|
+
const { host: host$m, label: label$a } = {
|
|
2611
2618
|
host: { selector: () => ':host' },
|
|
2612
2619
|
label: { selector: '::part(label)' },
|
|
2613
2620
|
};
|
|
@@ -2619,7 +2626,7 @@ const ButtonClass = compose(
|
|
|
2619
2626
|
mappings: {
|
|
2620
2627
|
hostWidth: { property: 'width' },
|
|
2621
2628
|
hostHeight: { property: 'height' },
|
|
2622
|
-
hostDirection: { ...host$
|
|
2629
|
+
hostDirection: { ...host$m, property: 'direction' },
|
|
2623
2630
|
fontSize: {},
|
|
2624
2631
|
fontFamily: {},
|
|
2625
2632
|
|
|
@@ -2671,7 +2678,7 @@ const ButtonClass = compose(
|
|
|
2671
2678
|
}
|
|
2672
2679
|
`,
|
|
2673
2680
|
excludeAttrsSync: ['tabindex'],
|
|
2674
|
-
componentName: componentName$
|
|
2681
|
+
componentName: componentName$M,
|
|
2675
2682
|
})
|
|
2676
2683
|
);
|
|
2677
2684
|
|
|
@@ -2708,31 +2715,31 @@ loadingIndicatorStyles = `
|
|
|
2708
2715
|
}
|
|
2709
2716
|
`;
|
|
2710
2717
|
|
|
2711
|
-
const globalRefs$
|
|
2718
|
+
const globalRefs$m = getThemeRefs(globals);
|
|
2712
2719
|
const compVars$5 = ButtonClass.cssVarList;
|
|
2713
2720
|
|
|
2714
2721
|
const mode = {
|
|
2715
|
-
primary: globalRefs$
|
|
2716
|
-
secondary: globalRefs$
|
|
2717
|
-
success: globalRefs$
|
|
2718
|
-
error: globalRefs$
|
|
2719
|
-
surface: globalRefs$
|
|
2722
|
+
primary: globalRefs$m.colors.primary,
|
|
2723
|
+
secondary: globalRefs$m.colors.secondary,
|
|
2724
|
+
success: globalRefs$m.colors.success,
|
|
2725
|
+
error: globalRefs$m.colors.error,
|
|
2726
|
+
surface: globalRefs$m.colors.surface,
|
|
2720
2727
|
};
|
|
2721
2728
|
|
|
2722
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
2729
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$M);
|
|
2723
2730
|
|
|
2724
2731
|
const button = {
|
|
2725
2732
|
...helperTheme$3,
|
|
2726
2733
|
|
|
2727
|
-
[compVars$5.fontFamily]: globalRefs$
|
|
2734
|
+
[compVars$5.fontFamily]: globalRefs$m.fonts.font1.family,
|
|
2728
2735
|
|
|
2729
2736
|
[compVars$5.cursor]: 'pointer',
|
|
2730
2737
|
[compVars$5.hostHeight]: '3em',
|
|
2731
2738
|
[compVars$5.hostWidth]: 'auto',
|
|
2732
|
-
[compVars$5.hostDirection]: globalRefs$
|
|
2739
|
+
[compVars$5.hostDirection]: globalRefs$m.direction,
|
|
2733
2740
|
|
|
2734
|
-
[compVars$5.borderRadius]: globalRefs$
|
|
2735
|
-
[compVars$5.borderWidth]: globalRefs$
|
|
2741
|
+
[compVars$5.borderRadius]: globalRefs$m.radius.sm,
|
|
2742
|
+
[compVars$5.borderWidth]: globalRefs$m.border.xs,
|
|
2736
2743
|
[compVars$5.borderStyle]: 'solid',
|
|
2737
2744
|
[compVars$5.borderColor]: 'transparent',
|
|
2738
2745
|
|
|
@@ -2775,10 +2782,10 @@ const button = {
|
|
|
2775
2782
|
},
|
|
2776
2783
|
|
|
2777
2784
|
_disabled: {
|
|
2778
|
-
[helperVars$3.main]: globalRefs$
|
|
2779
|
-
[helperVars$3.dark]: globalRefs$
|
|
2780
|
-
[helperVars$3.light]: globalRefs$
|
|
2781
|
-
[helperVars$3.contrast]: globalRefs$
|
|
2785
|
+
[helperVars$3.main]: globalRefs$m.colors.surface.light,
|
|
2786
|
+
[helperVars$3.dark]: globalRefs$m.colors.surface.dark,
|
|
2787
|
+
[helperVars$3.light]: globalRefs$m.colors.surface.light,
|
|
2788
|
+
[helperVars$3.contrast]: globalRefs$m.colors.surface.main,
|
|
2782
2789
|
},
|
|
2783
2790
|
|
|
2784
2791
|
variant: {
|
|
@@ -2826,7 +2833,7 @@ const button = {
|
|
|
2826
2833
|
},
|
|
2827
2834
|
};
|
|
2828
2835
|
|
|
2829
|
-
const vars$
|
|
2836
|
+
const vars$C = {
|
|
2830
2837
|
...compVars$5,
|
|
2831
2838
|
...helperVars$3,
|
|
2832
2839
|
};
|
|
@@ -2834,11 +2841,11 @@ const vars$A = {
|
|
|
2834
2841
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
2835
2842
|
__proto__: null,
|
|
2836
2843
|
default: button,
|
|
2837
|
-
vars: vars$
|
|
2844
|
+
vars: vars$C
|
|
2838
2845
|
});
|
|
2839
2846
|
|
|
2840
2847
|
const {
|
|
2841
|
-
host: host$
|
|
2848
|
+
host: host$l,
|
|
2842
2849
|
label: label$9,
|
|
2843
2850
|
placeholder: placeholder$3,
|
|
2844
2851
|
requiredIndicator: requiredIndicator$b,
|
|
@@ -2863,12 +2870,12 @@ const {
|
|
|
2863
2870
|
|
|
2864
2871
|
var textFieldMappings = {
|
|
2865
2872
|
// we apply font-size also on the host so we can set its width with em
|
|
2866
|
-
fontSize: [{}, host$
|
|
2873
|
+
fontSize: [{}, host$l],
|
|
2867
2874
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
|
2868
2875
|
|
|
2869
|
-
hostWidth: { ...host$
|
|
2870
|
-
hostMinWidth: { ...host$
|
|
2871
|
-
hostDirection: { ...host$
|
|
2876
|
+
hostWidth: { ...host$l, property: 'width' },
|
|
2877
|
+
hostMinWidth: { ...host$l, property: 'min-width' },
|
|
2878
|
+
hostDirection: { ...host$l, property: 'direction' },
|
|
2872
2879
|
|
|
2873
2880
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
|
2874
2881
|
|
|
@@ -3042,11 +3049,11 @@ const resetInputLabelPosition = (name) => `
|
|
|
3042
3049
|
}
|
|
3043
3050
|
`;
|
|
3044
3051
|
|
|
3045
|
-
const componentName$
|
|
3052
|
+
const componentName$L = getComponentName('text-field');
|
|
3046
3053
|
|
|
3047
3054
|
const observedAttrs = ['type'];
|
|
3048
3055
|
|
|
3049
|
-
const customMixin$
|
|
3056
|
+
const customMixin$8 = (superclass) =>
|
|
3050
3057
|
class TextFieldClass extends superclass {
|
|
3051
3058
|
static get observedAttributes() {
|
|
3052
3059
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -3073,7 +3080,7 @@ const TextFieldClass = compose(
|
|
|
3073
3080
|
draggableMixin,
|
|
3074
3081
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3075
3082
|
componentNameValidationMixin,
|
|
3076
|
-
customMixin$
|
|
3083
|
+
customMixin$8
|
|
3077
3084
|
)(
|
|
3078
3085
|
createProxy({
|
|
3079
3086
|
slots: ['prefix', 'suffix'],
|
|
@@ -3092,27 +3099,29 @@ const TextFieldClass = compose(
|
|
|
3092
3099
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
3093
3100
|
`,
|
|
3094
3101
|
excludeAttrsSync: ['tabindex'],
|
|
3095
|
-
componentName: componentName$
|
|
3102
|
+
componentName: componentName$L,
|
|
3096
3103
|
})
|
|
3097
3104
|
);
|
|
3098
3105
|
|
|
3099
|
-
const componentName$
|
|
3100
|
-
const globalRefs$
|
|
3106
|
+
const componentName$K = getComponentName('input-wrapper');
|
|
3107
|
+
const globalRefs$l = getThemeRefs(globals);
|
|
3101
3108
|
|
|
3102
|
-
const [theme$1, refs, vars$
|
|
3109
|
+
const [theme$1, refs, vars$B] = createHelperVars(
|
|
3103
3110
|
{
|
|
3104
|
-
labelTextColor: globalRefs$
|
|
3105
|
-
|
|
3106
|
-
|
|
3111
|
+
labelTextColor: globalRefs$l.colors.surface.dark,
|
|
3112
|
+
labelFontSize: globalRefs$l.typography.body2.size,
|
|
3113
|
+
valueTextColor: globalRefs$l.colors.surface.contrast,
|
|
3114
|
+
placeholderTextColor: globalRefs$l.colors.surface.dark,
|
|
3107
3115
|
requiredIndicator: "'*'",
|
|
3108
|
-
|
|
3109
|
-
|
|
3116
|
+
helperTextColor: globalRefs$l.colors.surface.dark,
|
|
3117
|
+
errorMessageTextColor: globalRefs$l.colors.error.main,
|
|
3118
|
+
successMessageTextColor: globalRefs$l.colors.success.main,
|
|
3110
3119
|
|
|
3111
|
-
borderWidth: globalRefs$
|
|
3112
|
-
borderRadius: globalRefs$
|
|
3120
|
+
borderWidth: globalRefs$l.border.xs,
|
|
3121
|
+
borderRadius: globalRefs$l.radius.xs,
|
|
3113
3122
|
borderColor: 'transparent',
|
|
3114
3123
|
|
|
3115
|
-
outlineWidth: globalRefs$
|
|
3124
|
+
outlineWidth: globalRefs$l.border.sm,
|
|
3116
3125
|
outlineStyle: 'solid',
|
|
3117
3126
|
outlineColor: 'transparent',
|
|
3118
3127
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
|
@@ -3123,11 +3132,11 @@ const [theme$1, refs, vars$z] = createHelperVars(
|
|
|
3123
3132
|
horizontalPadding: '0.5em',
|
|
3124
3133
|
verticalPadding: '0.5em',
|
|
3125
3134
|
|
|
3126
|
-
backgroundColor: globalRefs$
|
|
3135
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
|
3127
3136
|
|
|
3128
|
-
fontFamily: globalRefs$
|
|
3137
|
+
fontFamily: globalRefs$l.fonts.font1.family,
|
|
3129
3138
|
|
|
3130
|
-
direction: globalRefs$
|
|
3139
|
+
direction: globalRefs$l.direction,
|
|
3131
3140
|
|
|
3132
3141
|
overlayOpacity: '0.3',
|
|
3133
3142
|
|
|
@@ -3143,69 +3152,69 @@ const [theme$1, refs, vars$z] = createHelperVars(
|
|
|
3143
3152
|
},
|
|
3144
3153
|
|
|
3145
3154
|
_focused: {
|
|
3146
|
-
outlineColor: globalRefs$
|
|
3155
|
+
outlineColor: globalRefs$l.colors.surface.light,
|
|
3147
3156
|
_invalid: {
|
|
3148
|
-
outlineColor: globalRefs$
|
|
3157
|
+
outlineColor: globalRefs$l.colors.error.main,
|
|
3149
3158
|
},
|
|
3150
3159
|
},
|
|
3151
3160
|
|
|
3152
3161
|
_bordered: {
|
|
3153
|
-
outlineWidth: globalRefs$
|
|
3154
|
-
borderColor: globalRefs$
|
|
3162
|
+
outlineWidth: globalRefs$l.border.xs,
|
|
3163
|
+
borderColor: globalRefs$l.colors.surface.light,
|
|
3155
3164
|
borderStyle: 'solid',
|
|
3156
3165
|
_invalid: {
|
|
3157
|
-
borderColor: globalRefs$
|
|
3166
|
+
borderColor: globalRefs$l.colors.error.main,
|
|
3158
3167
|
},
|
|
3159
3168
|
},
|
|
3160
3169
|
|
|
3161
3170
|
_disabled: {
|
|
3162
|
-
labelTextColor: globalRefs$
|
|
3163
|
-
borderColor: globalRefs$
|
|
3164
|
-
valueTextColor: globalRefs$
|
|
3165
|
-
placeholderTextColor: globalRefs$
|
|
3166
|
-
helperTextColor: globalRefs$
|
|
3167
|
-
backgroundColor: globalRefs$
|
|
3171
|
+
labelTextColor: globalRefs$l.colors.surface.light,
|
|
3172
|
+
borderColor: globalRefs$l.colors.surface.light,
|
|
3173
|
+
valueTextColor: globalRefs$l.colors.surface.light,
|
|
3174
|
+
placeholderTextColor: globalRefs$l.colors.surface.light,
|
|
3175
|
+
helperTextColor: globalRefs$l.colors.surface.light,
|
|
3176
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
|
3168
3177
|
},
|
|
3169
3178
|
},
|
|
3170
|
-
componentName$
|
|
3179
|
+
componentName$K
|
|
3171
3180
|
);
|
|
3172
3181
|
|
|
3173
3182
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3174
3183
|
__proto__: null,
|
|
3175
3184
|
default: theme$1,
|
|
3176
3185
|
refs: refs,
|
|
3177
|
-
vars: vars$
|
|
3186
|
+
vars: vars$B
|
|
3178
3187
|
});
|
|
3179
3188
|
|
|
3180
|
-
const vars$
|
|
3189
|
+
const vars$A = TextFieldClass.cssVarList;
|
|
3181
3190
|
|
|
3182
3191
|
const textField = {
|
|
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$
|
|
3201
|
-
[vars$
|
|
3202
|
-
[vars$
|
|
3203
|
-
[vars$
|
|
3204
|
-
[vars$
|
|
3192
|
+
[vars$A.hostWidth]: refs.width,
|
|
3193
|
+
[vars$A.hostMinWidth]: refs.minWidth,
|
|
3194
|
+
[vars$A.hostDirection]: refs.direction,
|
|
3195
|
+
[vars$A.fontSize]: refs.fontSize,
|
|
3196
|
+
[vars$A.fontFamily]: refs.fontFamily,
|
|
3197
|
+
[vars$A.labelTextColor]: refs.labelTextColor,
|
|
3198
|
+
[vars$A.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3199
|
+
[vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3200
|
+
[vars$A.inputValueTextColor]: refs.valueTextColor,
|
|
3201
|
+
[vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3202
|
+
[vars$A.inputBorderWidth]: refs.borderWidth,
|
|
3203
|
+
[vars$A.inputBorderStyle]: refs.borderStyle,
|
|
3204
|
+
[vars$A.inputBorderColor]: refs.borderColor,
|
|
3205
|
+
[vars$A.inputBorderRadius]: refs.borderRadius,
|
|
3206
|
+
[vars$A.inputOutlineWidth]: refs.outlineWidth,
|
|
3207
|
+
[vars$A.inputOutlineStyle]: refs.outlineStyle,
|
|
3208
|
+
[vars$A.inputOutlineColor]: refs.outlineColor,
|
|
3209
|
+
[vars$A.inputOutlineOffset]: refs.outlineOffset,
|
|
3210
|
+
[vars$A.inputBackgroundColor]: refs.backgroundColor,
|
|
3211
|
+
[vars$A.inputHeight]: refs.inputHeight,
|
|
3212
|
+
[vars$A.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3213
|
+
[vars$A.helperTextColor]: refs.helperTextColor,
|
|
3205
3214
|
textAlign: {
|
|
3206
|
-
right: { [vars$
|
|
3207
|
-
left: { [vars$
|
|
3208
|
-
center: { [vars$
|
|
3215
|
+
right: { [vars$A.inputTextAlign]: 'right' },
|
|
3216
|
+
left: { [vars$A.inputTextAlign]: 'left' },
|
|
3217
|
+
center: { [vars$A.inputTextAlign]: 'center' },
|
|
3209
3218
|
},
|
|
3210
3219
|
};
|
|
3211
3220
|
|
|
@@ -3213,7 +3222,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
|
3213
3222
|
__proto__: null,
|
|
3214
3223
|
default: textField,
|
|
3215
3224
|
textField: textField,
|
|
3216
|
-
vars: vars$
|
|
3225
|
+
vars: vars$A
|
|
3217
3226
|
});
|
|
3218
3227
|
|
|
3219
3228
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -3250,10 +3259,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
3250
3259
|
}
|
|
3251
3260
|
};
|
|
3252
3261
|
|
|
3253
|
-
const componentName$
|
|
3262
|
+
const componentName$J = getComponentName('password');
|
|
3254
3263
|
|
|
3255
3264
|
const {
|
|
3256
|
-
host: host$
|
|
3265
|
+
host: host$k,
|
|
3257
3266
|
inputField: inputField$5,
|
|
3258
3267
|
inputElement: inputElement$2,
|
|
3259
3268
|
inputElementPlaceholder,
|
|
@@ -3279,10 +3288,10 @@ const {
|
|
|
3279
3288
|
const PasswordClass = compose(
|
|
3280
3289
|
createStyleMixin({
|
|
3281
3290
|
mappings: {
|
|
3282
|
-
hostWidth: { ...host$
|
|
3283
|
-
hostMinWidth: { ...host$
|
|
3284
|
-
hostDirection: { ...host$
|
|
3285
|
-
fontSize: [{}, host$
|
|
3291
|
+
hostWidth: { ...host$k, property: 'width' },
|
|
3292
|
+
hostMinWidth: { ...host$k, property: 'min-width' },
|
|
3293
|
+
hostDirection: { ...host$k, property: 'direction' },
|
|
3294
|
+
fontSize: [{}, host$k],
|
|
3286
3295
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
|
3287
3296
|
inputHeight: { ...inputField$5, property: 'height' },
|
|
3288
3297
|
inputHorizontalPadding: [
|
|
@@ -3379,46 +3388,46 @@ const PasswordClass = compose(
|
|
|
3379
3388
|
}
|
|
3380
3389
|
`,
|
|
3381
3390
|
excludeAttrsSync: ['tabindex'],
|
|
3382
|
-
componentName: componentName$
|
|
3391
|
+
componentName: componentName$J,
|
|
3383
3392
|
})
|
|
3384
3393
|
);
|
|
3385
3394
|
|
|
3386
|
-
const globalRefs$
|
|
3387
|
-
const vars$
|
|
3395
|
+
const globalRefs$k = getThemeRefs(globals);
|
|
3396
|
+
const vars$z = PasswordClass.cssVarList;
|
|
3388
3397
|
|
|
3389
3398
|
const password = {
|
|
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$
|
|
3409
|
-
[vars$
|
|
3410
|
-
[vars$
|
|
3411
|
-
[vars$
|
|
3412
|
-
[vars$
|
|
3399
|
+
[vars$z.hostWidth]: refs.width,
|
|
3400
|
+
[vars$z.hostDirection]: refs.direction,
|
|
3401
|
+
[vars$z.fontSize]: refs.fontSize,
|
|
3402
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
|
3403
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
|
3404
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3405
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3406
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
|
3407
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
|
3408
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3409
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
|
3410
|
+
[vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3411
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
|
3412
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
|
3413
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
|
3414
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
|
3415
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
|
3416
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
|
3417
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
|
3418
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
|
3419
|
+
[vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
|
|
3420
|
+
[vars$z.revealButtonSize]: refs.toggleButtonSize,
|
|
3421
|
+
[vars$z.revealButtonColor]: refs.placeholderTextColor,
|
|
3413
3422
|
};
|
|
3414
3423
|
|
|
3415
3424
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
3416
3425
|
__proto__: null,
|
|
3417
3426
|
default: password,
|
|
3418
|
-
vars: vars$
|
|
3427
|
+
vars: vars$z
|
|
3419
3428
|
});
|
|
3420
3429
|
|
|
3421
|
-
const componentName$
|
|
3430
|
+
const componentName$I = getComponentName('number-field');
|
|
3422
3431
|
|
|
3423
3432
|
const NumberFieldClass = compose(
|
|
3424
3433
|
createStyleMixin({
|
|
@@ -3444,45 +3453,45 @@ const NumberFieldClass = compose(
|
|
|
3444
3453
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
3445
3454
|
`,
|
|
3446
3455
|
excludeAttrsSync: ['tabindex'],
|
|
3447
|
-
componentName: componentName$
|
|
3456
|
+
componentName: componentName$I,
|
|
3448
3457
|
})
|
|
3449
3458
|
);
|
|
3450
3459
|
|
|
3451
|
-
const vars$
|
|
3460
|
+
const vars$y = NumberFieldClass.cssVarList;
|
|
3452
3461
|
|
|
3453
3462
|
const numberField = {
|
|
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$
|
|
3471
|
-
[vars$
|
|
3472
|
-
[vars$
|
|
3473
|
-
[vars$
|
|
3474
|
-
[vars$
|
|
3463
|
+
[vars$y.hostWidth]: refs.width,
|
|
3464
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
|
3465
|
+
[vars$y.hostDirection]: refs.direction,
|
|
3466
|
+
[vars$y.fontSize]: refs.fontSize,
|
|
3467
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
|
3468
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
|
3469
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3470
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
|
3471
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3472
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
|
3473
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
|
3474
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
|
3475
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
|
3476
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
|
3477
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
|
3478
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
|
3479
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
|
3480
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
|
3481
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3482
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3483
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
|
3475
3484
|
};
|
|
3476
3485
|
|
|
3477
3486
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
3478
3487
|
__proto__: null,
|
|
3479
3488
|
default: numberField,
|
|
3480
|
-
vars: vars$
|
|
3489
|
+
vars: vars$y
|
|
3481
3490
|
});
|
|
3482
3491
|
|
|
3483
|
-
const componentName$
|
|
3492
|
+
const componentName$H = getComponentName('email-field');
|
|
3484
3493
|
|
|
3485
|
-
const customMixin$
|
|
3494
|
+
const customMixin$7 = (superclass) =>
|
|
3486
3495
|
class EmailFieldMixinClass extends superclass {
|
|
3487
3496
|
init() {
|
|
3488
3497
|
super.init?.();
|
|
@@ -3496,7 +3505,7 @@ const EmailFieldClass = compose(
|
|
|
3496
3505
|
draggableMixin,
|
|
3497
3506
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3498
3507
|
componentNameValidationMixin,
|
|
3499
|
-
customMixin$
|
|
3508
|
+
customMixin$7
|
|
3500
3509
|
)(
|
|
3501
3510
|
createProxy({
|
|
3502
3511
|
slots: ['', 'suffix'],
|
|
@@ -3515,46 +3524,46 @@ const EmailFieldClass = compose(
|
|
|
3515
3524
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
3516
3525
|
`,
|
|
3517
3526
|
excludeAttrsSync: ['tabindex'],
|
|
3518
|
-
componentName: componentName$
|
|
3527
|
+
componentName: componentName$H,
|
|
3519
3528
|
})
|
|
3520
3529
|
);
|
|
3521
3530
|
|
|
3522
|
-
const vars$
|
|
3531
|
+
const vars$x = EmailFieldClass.cssVarList;
|
|
3523
3532
|
|
|
3524
3533
|
const emailField = {
|
|
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$
|
|
3542
|
-
[vars$
|
|
3543
|
-
[vars$
|
|
3544
|
-
[vars$
|
|
3545
|
-
[vars$
|
|
3534
|
+
[vars$x.hostWidth]: refs.width,
|
|
3535
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
|
3536
|
+
[vars$x.hostDirection]: refs.direction,
|
|
3537
|
+
[vars$x.fontSize]: refs.fontSize,
|
|
3538
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
|
3539
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
|
3540
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3541
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
|
3542
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3543
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3544
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
|
3545
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
|
3546
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
|
3547
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
|
3548
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
|
3549
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
|
3550
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
|
3551
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
|
3552
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
|
3553
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3554
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
|
3546
3555
|
};
|
|
3547
3556
|
|
|
3548
3557
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
3549
3558
|
__proto__: null,
|
|
3550
3559
|
default: emailField,
|
|
3551
|
-
vars: vars$
|
|
3560
|
+
vars: vars$x
|
|
3552
3561
|
});
|
|
3553
3562
|
|
|
3554
|
-
const componentName$
|
|
3563
|
+
const componentName$G = getComponentName('text-area');
|
|
3555
3564
|
|
|
3556
3565
|
const {
|
|
3557
|
-
host: host$
|
|
3566
|
+
host: host$j,
|
|
3558
3567
|
label: label$7,
|
|
3559
3568
|
placeholder: placeholder$2,
|
|
3560
3569
|
inputField: inputField$4,
|
|
@@ -3576,10 +3585,10 @@ const {
|
|
|
3576
3585
|
const TextAreaClass = compose(
|
|
3577
3586
|
createStyleMixin({
|
|
3578
3587
|
mappings: {
|
|
3579
|
-
hostWidth: { ...host$
|
|
3580
|
-
hostMinWidth: { ...host$
|
|
3581
|
-
hostDirection: { ...host$
|
|
3582
|
-
fontSize: [host$
|
|
3588
|
+
hostWidth: { ...host$j, property: 'width' },
|
|
3589
|
+
hostMinWidth: { ...host$j, property: 'min-width' },
|
|
3590
|
+
hostDirection: { ...host$j, property: 'direction' },
|
|
3591
|
+
fontSize: [host$j, textArea$2],
|
|
3583
3592
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
|
3584
3593
|
labelTextColor: [
|
|
3585
3594
|
{ ...label$7, property: 'color' },
|
|
@@ -3627,49 +3636,49 @@ const TextAreaClass = compose(
|
|
|
3627
3636
|
${resetInputCursor('vaadin-text-area')}
|
|
3628
3637
|
`,
|
|
3629
3638
|
excludeAttrsSync: ['tabindex'],
|
|
3630
|
-
componentName: componentName$
|
|
3639
|
+
componentName: componentName$G,
|
|
3631
3640
|
})
|
|
3632
3641
|
);
|
|
3633
3642
|
|
|
3634
|
-
const vars$
|
|
3643
|
+
const vars$w = TextAreaClass.cssVarList;
|
|
3635
3644
|
|
|
3636
3645
|
const textArea = {
|
|
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$
|
|
3654
|
-
[vars$
|
|
3655
|
-
[vars$
|
|
3656
|
-
[vars$
|
|
3657
|
-
[vars$
|
|
3646
|
+
[vars$w.hostWidth]: refs.width,
|
|
3647
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
|
3648
|
+
[vars$w.hostDirection]: refs.direction,
|
|
3649
|
+
[vars$w.fontSize]: refs.fontSize,
|
|
3650
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
|
3651
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
|
3652
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3653
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3654
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
|
3655
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
|
3656
|
+
[vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3657
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
|
3658
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
|
3659
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
|
3660
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
|
3661
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
|
3662
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
|
3663
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
|
3664
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
|
3665
|
+
[vars$w.inputResizeType]: 'vertical',
|
|
3666
|
+
[vars$w.inputMinHeight]: '5em',
|
|
3658
3667
|
textAlign: {
|
|
3659
|
-
right: { [vars$
|
|
3660
|
-
left: { [vars$
|
|
3661
|
-
center: { [vars$
|
|
3668
|
+
right: { [vars$w.inputTextAlign]: 'right' },
|
|
3669
|
+
left: { [vars$w.inputTextAlign]: 'left' },
|
|
3670
|
+
center: { [vars$w.inputTextAlign]: 'center' },
|
|
3662
3671
|
},
|
|
3663
3672
|
|
|
3664
3673
|
_readonly: {
|
|
3665
|
-
[vars$
|
|
3674
|
+
[vars$w.inputResizeType]: 'none',
|
|
3666
3675
|
},
|
|
3667
3676
|
};
|
|
3668
3677
|
|
|
3669
3678
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
3670
3679
|
__proto__: null,
|
|
3671
3680
|
default: textArea,
|
|
3672
|
-
vars: vars$
|
|
3681
|
+
vars: vars$w
|
|
3673
3682
|
});
|
|
3674
3683
|
|
|
3675
3684
|
const createBaseInputClass = (...args) =>
|
|
@@ -3680,9 +3689,9 @@ const createBaseInputClass = (...args) =>
|
|
|
3680
3689
|
inputEventsDispatchingMixin
|
|
3681
3690
|
)(createBaseClass(...args));
|
|
3682
3691
|
|
|
3683
|
-
const componentName$
|
|
3692
|
+
const componentName$F = getComponentName('boolean-field-internal');
|
|
3684
3693
|
|
|
3685
|
-
createBaseInputClass({ componentName: componentName$
|
|
3694
|
+
createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
|
|
3686
3695
|
|
|
3687
3696
|
const booleanFieldMixin = (superclass) =>
|
|
3688
3697
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -3691,14 +3700,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
3691
3700
|
|
|
3692
3701
|
const template = document.createElement('template');
|
|
3693
3702
|
template.innerHTML = `
|
|
3694
|
-
<${componentName$
|
|
3703
|
+
<${componentName$F}
|
|
3695
3704
|
tabindex="-1"
|
|
3696
3705
|
slot="input"
|
|
3697
|
-
></${componentName$
|
|
3706
|
+
></${componentName$F}>
|
|
3698
3707
|
`;
|
|
3699
3708
|
|
|
3700
3709
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3701
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3710
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$F);
|
|
3702
3711
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
3703
3712
|
|
|
3704
3713
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -3768,10 +3777,10 @@ descope-boolean-field-internal {
|
|
|
3768
3777
|
}
|
|
3769
3778
|
`;
|
|
3770
3779
|
|
|
3771
|
-
const componentName$
|
|
3780
|
+
const componentName$E = getComponentName('checkbox');
|
|
3772
3781
|
|
|
3773
3782
|
const {
|
|
3774
|
-
host: host$
|
|
3783
|
+
host: host$i,
|
|
3775
3784
|
component: component$1,
|
|
3776
3785
|
checkboxElement,
|
|
3777
3786
|
checkboxSurface,
|
|
@@ -3793,10 +3802,10 @@ const {
|
|
|
3793
3802
|
const CheckboxClass = compose(
|
|
3794
3803
|
createStyleMixin({
|
|
3795
3804
|
mappings: {
|
|
3796
|
-
hostWidth: { ...host$
|
|
3797
|
-
hostDirection: { ...host$
|
|
3805
|
+
hostWidth: { ...host$i, property: 'width' },
|
|
3806
|
+
hostDirection: { ...host$i, property: 'direction' },
|
|
3798
3807
|
|
|
3799
|
-
fontSize: [host$
|
|
3808
|
+
fontSize: [host$i, checkboxElement, checkboxLabel$1],
|
|
3800
3809
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
|
3801
3810
|
|
|
3802
3811
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
|
@@ -3874,54 +3883,54 @@ const CheckboxClass = compose(
|
|
|
3874
3883
|
}
|
|
3875
3884
|
`,
|
|
3876
3885
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
3877
|
-
componentName: componentName$
|
|
3886
|
+
componentName: componentName$E,
|
|
3878
3887
|
})
|
|
3879
3888
|
);
|
|
3880
3889
|
|
|
3881
|
-
const vars$
|
|
3890
|
+
const vars$v = CheckboxClass.cssVarList;
|
|
3882
3891
|
const checkboxSize = '1.35em';
|
|
3883
3892
|
|
|
3884
3893
|
const checkbox = {
|
|
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$
|
|
3901
|
-
[vars$
|
|
3902
|
-
[vars$
|
|
3903
|
-
[vars$
|
|
3904
|
-
[vars$
|
|
3894
|
+
[vars$v.hostWidth]: refs.width,
|
|
3895
|
+
[vars$v.hostDirection]: refs.direction,
|
|
3896
|
+
[vars$v.fontSize]: refs.fontSize,
|
|
3897
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
|
3898
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3899
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3900
|
+
[vars$v.labelFontWeight]: '400',
|
|
3901
|
+
[vars$v.labelLineHeight]: checkboxSize,
|
|
3902
|
+
[vars$v.labelSpacing]: '1em',
|
|
3903
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3904
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
|
3905
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
|
3906
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
|
3907
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
|
3908
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
|
3909
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
|
3910
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
|
3911
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
|
3912
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
|
3913
|
+
[vars$v.inputSize]: checkboxSize,
|
|
3905
3914
|
|
|
3906
3915
|
_checked: {
|
|
3907
|
-
[vars$
|
|
3916
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
|
3908
3917
|
},
|
|
3909
3918
|
|
|
3910
3919
|
_disabled: {
|
|
3911
|
-
[vars$
|
|
3920
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3912
3921
|
},
|
|
3913
3922
|
};
|
|
3914
3923
|
|
|
3915
3924
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
3916
3925
|
__proto__: null,
|
|
3917
3926
|
default: checkbox,
|
|
3918
|
-
vars: vars$
|
|
3927
|
+
vars: vars$v
|
|
3919
3928
|
});
|
|
3920
3929
|
|
|
3921
|
-
const componentName$
|
|
3930
|
+
const componentName$D = getComponentName('switch-toggle');
|
|
3922
3931
|
|
|
3923
3932
|
const {
|
|
3924
|
-
host: host$
|
|
3933
|
+
host: host$h,
|
|
3925
3934
|
component,
|
|
3926
3935
|
checkboxElement: track,
|
|
3927
3936
|
checkboxSurface: knob,
|
|
@@ -3943,8 +3952,8 @@ const {
|
|
|
3943
3952
|
const SwitchToggleClass = compose(
|
|
3944
3953
|
createStyleMixin({
|
|
3945
3954
|
mappings: {
|
|
3946
|
-
hostWidth: { ...host$
|
|
3947
|
-
hostDirection: { ...host$
|
|
3955
|
+
hostWidth: { ...host$h, property: 'width' },
|
|
3956
|
+
hostDirection: { ...host$h, property: 'direction' },
|
|
3948
3957
|
|
|
3949
3958
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
3950
3959
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
|
@@ -4050,82 +4059,82 @@ const SwitchToggleClass = compose(
|
|
|
4050
4059
|
}
|
|
4051
4060
|
`,
|
|
4052
4061
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
4053
|
-
componentName: componentName$
|
|
4062
|
+
componentName: componentName$D,
|
|
4054
4063
|
})
|
|
4055
4064
|
);
|
|
4056
4065
|
|
|
4057
4066
|
const knobMargin = '2px';
|
|
4058
4067
|
const checkboxHeight = '1.25em';
|
|
4059
4068
|
|
|
4060
|
-
const globalRefs$
|
|
4061
|
-
const vars$
|
|
4069
|
+
const globalRefs$j = getThemeRefs(globals);
|
|
4070
|
+
const vars$u = SwitchToggleClass.cssVarList;
|
|
4062
4071
|
|
|
4063
4072
|
const switchToggle = {
|
|
4064
|
-
[vars$
|
|
4065
|
-
[vars$
|
|
4066
|
-
[vars$
|
|
4067
|
-
[vars$
|
|
4068
|
-
|
|
4069
|
-
[vars$
|
|
4070
|
-
[vars$
|
|
4071
|
-
[vars$
|
|
4072
|
-
[vars$
|
|
4073
|
-
|
|
4074
|
-
[vars$
|
|
4075
|
-
[vars$
|
|
4076
|
-
[vars$
|
|
4077
|
-
[vars$
|
|
4078
|
-
[vars$
|
|
4079
|
-
[vars$
|
|
4080
|
-
[vars$
|
|
4081
|
-
|
|
4082
|
-
[vars$
|
|
4083
|
-
[vars$
|
|
4084
|
-
[vars$
|
|
4085
|
-
[vars$
|
|
4086
|
-
[vars$
|
|
4087
|
-
[vars$
|
|
4088
|
-
|
|
4089
|
-
[vars$
|
|
4090
|
-
[vars$
|
|
4091
|
-
[vars$
|
|
4092
|
-
[vars$
|
|
4093
|
-
[vars$
|
|
4094
|
-
[vars$
|
|
4073
|
+
[vars$u.hostWidth]: refs.width,
|
|
4074
|
+
[vars$u.hostDirection]: refs.direction,
|
|
4075
|
+
[vars$u.fontSize]: refs.fontSize,
|
|
4076
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
|
4077
|
+
|
|
4078
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
|
4079
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
|
4080
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
|
4081
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
|
4082
|
+
|
|
4083
|
+
[vars$u.trackBorderStyle]: refs.borderStyle,
|
|
4084
|
+
[vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
4085
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
|
4086
|
+
[vars$u.trackBackgroundColor]: refs.backgroundColor,
|
|
4087
|
+
[vars$u.trackBorderRadius]: globalRefs$j.radius.md,
|
|
4088
|
+
[vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
4089
|
+
[vars$u.trackHeight]: checkboxHeight,
|
|
4090
|
+
|
|
4091
|
+
[vars$u.knobSize]: `calc(1em - ${knobMargin})`,
|
|
4092
|
+
[vars$u.knobRadius]: '50%',
|
|
4093
|
+
[vars$u.knobTopOffset]: '1px',
|
|
4094
|
+
[vars$u.knobLeftOffset]: knobMargin,
|
|
4095
|
+
[vars$u.knobColor]: refs.labelTextColor,
|
|
4096
|
+
[vars$u.knobTransitionDuration]: '0.3s',
|
|
4097
|
+
|
|
4098
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
4099
|
+
[vars$u.labelFontWeight]: '400',
|
|
4100
|
+
[vars$u.labelLineHeight]: '1.35em',
|
|
4101
|
+
[vars$u.labelSpacing]: '1em',
|
|
4102
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4103
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4095
4104
|
|
|
4096
4105
|
_checked: {
|
|
4097
|
-
[vars$
|
|
4098
|
-
[vars$
|
|
4099
|
-
[vars$
|
|
4100
|
-
[vars$
|
|
4106
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
|
4107
|
+
[vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
|
|
4108
|
+
[vars$u.knobColor]: refs.valueTextColor,
|
|
4109
|
+
[vars$u.knobTextColor]: refs.valueTextColor,
|
|
4101
4110
|
},
|
|
4102
4111
|
|
|
4103
4112
|
_disabled: {
|
|
4104
|
-
[vars$
|
|
4105
|
-
[vars$
|
|
4106
|
-
[vars$
|
|
4107
|
-
[vars$
|
|
4113
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
|
4114
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
|
|
4115
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
|
4116
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
4108
4117
|
_checked: {
|
|
4109
|
-
[vars$
|
|
4110
|
-
[vars$
|
|
4118
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
|
4119
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
|
4111
4120
|
},
|
|
4112
4121
|
},
|
|
4113
4122
|
|
|
4114
4123
|
_invalid: {
|
|
4115
|
-
[vars$
|
|
4116
|
-
[vars$
|
|
4124
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
|
|
4125
|
+
[vars$u.knobColor]: globalRefs$j.colors.error.main,
|
|
4117
4126
|
},
|
|
4118
4127
|
};
|
|
4119
4128
|
|
|
4120
4129
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
4121
4130
|
__proto__: null,
|
|
4122
4131
|
default: switchToggle,
|
|
4123
|
-
vars: vars$
|
|
4132
|
+
vars: vars$u
|
|
4124
4133
|
});
|
|
4125
4134
|
|
|
4126
|
-
const componentName$
|
|
4135
|
+
const componentName$C = getComponentName('container');
|
|
4127
4136
|
|
|
4128
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
4137
|
+
class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
|
|
4129
4138
|
constructor() {
|
|
4130
4139
|
super();
|
|
4131
4140
|
|
|
@@ -4178,7 +4187,7 @@ const ContainerClass = compose(
|
|
|
4178
4187
|
componentNameValidationMixin
|
|
4179
4188
|
)(RawContainer);
|
|
4180
4189
|
|
|
4181
|
-
const globalRefs$
|
|
4190
|
+
const globalRefs$i = getThemeRefs(globals);
|
|
4182
4191
|
|
|
4183
4192
|
const compVars$4 = ContainerClass.cssVarList;
|
|
4184
4193
|
|
|
@@ -4200,7 +4209,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
4200
4209
|
horizontalAlignment,
|
|
4201
4210
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
4202
4211
|
},
|
|
4203
|
-
componentName$
|
|
4212
|
+
componentName$C
|
|
4204
4213
|
);
|
|
4205
4214
|
|
|
4206
4215
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
@@ -4210,10 +4219,10 @@ const container = {
|
|
|
4210
4219
|
|
|
4211
4220
|
[compVars$4.hostWidth]: '100%',
|
|
4212
4221
|
[compVars$4.boxShadow]: 'none',
|
|
4213
|
-
[compVars$4.backgroundColor]: globalRefs$
|
|
4214
|
-
[compVars$4.color]: globalRefs$
|
|
4222
|
+
[compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
|
|
4223
|
+
[compVars$4.color]: globalRefs$i.colors.surface.contrast,
|
|
4215
4224
|
[compVars$4.borderRadius]: '0px',
|
|
4216
|
-
[compVars$4.hostDirection]: globalRefs$
|
|
4225
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
|
4217
4226
|
|
|
4218
4227
|
verticalPadding: {
|
|
4219
4228
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
|
@@ -4259,34 +4268,34 @@ const container = {
|
|
|
4259
4268
|
|
|
4260
4269
|
shadow: {
|
|
4261
4270
|
sm: {
|
|
4262
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4271
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
|
|
4263
4272
|
},
|
|
4264
4273
|
md: {
|
|
4265
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4274
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
|
|
4266
4275
|
},
|
|
4267
4276
|
lg: {
|
|
4268
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4277
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
|
|
4269
4278
|
},
|
|
4270
4279
|
xl: {
|
|
4271
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4280
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
|
|
4272
4281
|
},
|
|
4273
4282
|
'2xl': {
|
|
4274
4283
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
4275
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4284
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
|
|
4276
4285
|
},
|
|
4277
4286
|
},
|
|
4278
4287
|
|
|
4279
4288
|
borderRadius: {
|
|
4280
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
|
4281
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
|
4282
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
|
4283
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
|
4284
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4285
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4289
|
+
sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
|
|
4290
|
+
md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
|
|
4291
|
+
lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
|
|
4292
|
+
xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
|
|
4293
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
|
|
4294
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
|
|
4286
4295
|
},
|
|
4287
4296
|
};
|
|
4288
4297
|
|
|
4289
|
-
const vars$
|
|
4298
|
+
const vars$t = {
|
|
4290
4299
|
...compVars$4,
|
|
4291
4300
|
...helperVars$2,
|
|
4292
4301
|
};
|
|
@@ -4294,7 +4303,7 @@ const vars$r = {
|
|
|
4294
4303
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
4295
4304
|
__proto__: null,
|
|
4296
4305
|
default: container,
|
|
4297
|
-
vars: vars$
|
|
4306
|
+
vars: vars$t
|
|
4298
4307
|
});
|
|
4299
4308
|
|
|
4300
4309
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -4347,71 +4356,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
4347
4356
|
return CssVarImageClass;
|
|
4348
4357
|
};
|
|
4349
4358
|
|
|
4350
|
-
const componentName$
|
|
4359
|
+
const componentName$B = getComponentName('logo');
|
|
4351
4360
|
|
|
4352
4361
|
const LogoClass = createCssVarImageClass({
|
|
4353
|
-
componentName: componentName$
|
|
4362
|
+
componentName: componentName$B,
|
|
4354
4363
|
varName: 'url',
|
|
4355
4364
|
fallbackVarName: 'fallbackUrl',
|
|
4356
4365
|
});
|
|
4357
4366
|
|
|
4358
|
-
const vars$
|
|
4367
|
+
const vars$s = LogoClass.cssVarList;
|
|
4359
4368
|
|
|
4360
4369
|
const logo$2 = {
|
|
4361
|
-
[vars$
|
|
4370
|
+
[vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
4362
4371
|
};
|
|
4363
4372
|
|
|
4364
4373
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
|
4365
4374
|
__proto__: null,
|
|
4366
4375
|
default: logo$2,
|
|
4367
|
-
vars: vars$
|
|
4376
|
+
vars: vars$s
|
|
4368
4377
|
});
|
|
4369
4378
|
|
|
4370
|
-
const componentName$
|
|
4379
|
+
const componentName$A = getComponentName('totp-image');
|
|
4371
4380
|
|
|
4372
4381
|
const TotpImageClass = createCssVarImageClass({
|
|
4373
|
-
componentName: componentName$
|
|
4382
|
+
componentName: componentName$A,
|
|
4374
4383
|
varName: 'url',
|
|
4375
4384
|
fallbackVarName: 'fallbackUrl',
|
|
4376
4385
|
});
|
|
4377
4386
|
|
|
4378
|
-
const vars$
|
|
4387
|
+
const vars$r = TotpImageClass.cssVarList;
|
|
4379
4388
|
|
|
4380
4389
|
const logo$1 = {
|
|
4381
|
-
[vars$
|
|
4390
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
4382
4391
|
};
|
|
4383
4392
|
|
|
4384
4393
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
4385
4394
|
__proto__: null,
|
|
4386
4395
|
default: logo$1,
|
|
4387
|
-
vars: vars$
|
|
4396
|
+
vars: vars$r
|
|
4388
4397
|
});
|
|
4389
4398
|
|
|
4390
|
-
const componentName$
|
|
4399
|
+
const componentName$z = getComponentName('notp-image');
|
|
4391
4400
|
|
|
4392
4401
|
const NotpImageClass = createCssVarImageClass({
|
|
4393
|
-
componentName: componentName$
|
|
4402
|
+
componentName: componentName$z,
|
|
4394
4403
|
varName: 'url',
|
|
4395
4404
|
fallbackVarName: 'fallbackUrl',
|
|
4396
4405
|
});
|
|
4397
4406
|
|
|
4398
|
-
const vars$
|
|
4407
|
+
const vars$q = NotpImageClass.cssVarList;
|
|
4399
4408
|
|
|
4400
4409
|
const logo = {
|
|
4401
|
-
[vars$
|
|
4410
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
|
4402
4411
|
};
|
|
4403
4412
|
|
|
4404
4413
|
var notpImage = /*#__PURE__*/Object.freeze({
|
|
4405
4414
|
__proto__: null,
|
|
4406
4415
|
default: logo,
|
|
4407
|
-
vars: vars$
|
|
4416
|
+
vars: vars$q
|
|
4408
4417
|
});
|
|
4409
4418
|
|
|
4410
4419
|
// eslint-disable-next-line max-classes-per-file
|
|
4411
4420
|
|
|
4412
|
-
const componentName$
|
|
4421
|
+
const componentName$y = getComponentName('text');
|
|
4413
4422
|
|
|
4414
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
4423
|
+
class RawText extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > slot' }) {
|
|
4415
4424
|
constructor() {
|
|
4416
4425
|
super();
|
|
4417
4426
|
|
|
@@ -4471,99 +4480,99 @@ const TextClass = compose(
|
|
|
4471
4480
|
customTextMixin
|
|
4472
4481
|
)(RawText);
|
|
4473
4482
|
|
|
4474
|
-
const globalRefs$
|
|
4475
|
-
const vars$
|
|
4483
|
+
const globalRefs$h = getThemeRefs(globals);
|
|
4484
|
+
const vars$p = TextClass.cssVarList;
|
|
4476
4485
|
|
|
4477
4486
|
const text$2 = {
|
|
4478
|
-
[vars$
|
|
4479
|
-
[vars$
|
|
4480
|
-
[vars$
|
|
4481
|
-
[vars$
|
|
4487
|
+
[vars$p.hostDirection]: globalRefs$h.direction,
|
|
4488
|
+
[vars$p.textLineHeight]: '1.35em',
|
|
4489
|
+
[vars$p.textAlign]: 'left',
|
|
4490
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
|
4482
4491
|
variant: {
|
|
4483
4492
|
h1: {
|
|
4484
|
-
[vars$
|
|
4485
|
-
[vars$
|
|
4486
|
-
[vars$
|
|
4493
|
+
[vars$p.fontSize]: globalRefs$h.typography.h1.size,
|
|
4494
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
|
|
4495
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h1.font,
|
|
4487
4496
|
},
|
|
4488
4497
|
h2: {
|
|
4489
|
-
[vars$
|
|
4490
|
-
[vars$
|
|
4491
|
-
[vars$
|
|
4498
|
+
[vars$p.fontSize]: globalRefs$h.typography.h2.size,
|
|
4499
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
|
|
4500
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h2.font,
|
|
4492
4501
|
},
|
|
4493
4502
|
h3: {
|
|
4494
|
-
[vars$
|
|
4495
|
-
[vars$
|
|
4496
|
-
[vars$
|
|
4503
|
+
[vars$p.fontSize]: globalRefs$h.typography.h3.size,
|
|
4504
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
|
|
4505
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h3.font,
|
|
4497
4506
|
},
|
|
4498
4507
|
subtitle1: {
|
|
4499
|
-
[vars$
|
|
4500
|
-
[vars$
|
|
4501
|
-
[vars$
|
|
4508
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
|
|
4509
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
|
|
4510
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
|
|
4502
4511
|
},
|
|
4503
4512
|
subtitle2: {
|
|
4504
|
-
[vars$
|
|
4505
|
-
[vars$
|
|
4506
|
-
[vars$
|
|
4513
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
|
|
4514
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
|
|
4515
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
|
|
4507
4516
|
},
|
|
4508
4517
|
body1: {
|
|
4509
|
-
[vars$
|
|
4510
|
-
[vars$
|
|
4511
|
-
[vars$
|
|
4518
|
+
[vars$p.fontSize]: globalRefs$h.typography.body1.size,
|
|
4519
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
|
|
4520
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body1.font,
|
|
4512
4521
|
},
|
|
4513
4522
|
body2: {
|
|
4514
|
-
[vars$
|
|
4515
|
-
[vars$
|
|
4516
|
-
[vars$
|
|
4523
|
+
[vars$p.fontSize]: globalRefs$h.typography.body2.size,
|
|
4524
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
|
|
4525
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body2.font,
|
|
4517
4526
|
},
|
|
4518
4527
|
},
|
|
4519
4528
|
|
|
4520
4529
|
mode: {
|
|
4521
4530
|
primary: {
|
|
4522
|
-
[vars$
|
|
4531
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.contrast,
|
|
4523
4532
|
},
|
|
4524
4533
|
secondary: {
|
|
4525
|
-
[vars$
|
|
4534
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
|
4526
4535
|
},
|
|
4527
4536
|
error: {
|
|
4528
|
-
[vars$
|
|
4537
|
+
[vars$p.textColor]: globalRefs$h.colors.error.main,
|
|
4529
4538
|
},
|
|
4530
4539
|
success: {
|
|
4531
|
-
[vars$
|
|
4540
|
+
[vars$p.textColor]: globalRefs$h.colors.success.main,
|
|
4532
4541
|
},
|
|
4533
4542
|
},
|
|
4534
4543
|
|
|
4535
4544
|
textAlign: {
|
|
4536
|
-
right: { [vars$
|
|
4537
|
-
left: { [vars$
|
|
4538
|
-
center: { [vars$
|
|
4545
|
+
right: { [vars$p.textAlign]: 'right' },
|
|
4546
|
+
left: { [vars$p.textAlign]: 'left' },
|
|
4547
|
+
center: { [vars$p.textAlign]: 'center' },
|
|
4539
4548
|
},
|
|
4540
4549
|
|
|
4541
4550
|
_fullWidth: {
|
|
4542
|
-
[vars$
|
|
4551
|
+
[vars$p.hostWidth]: '100%',
|
|
4543
4552
|
},
|
|
4544
4553
|
|
|
4545
4554
|
_italic: {
|
|
4546
|
-
[vars$
|
|
4555
|
+
[vars$p.fontStyle]: 'italic',
|
|
4547
4556
|
},
|
|
4548
4557
|
|
|
4549
4558
|
_uppercase: {
|
|
4550
|
-
[vars$
|
|
4559
|
+
[vars$p.textTransform]: 'uppercase',
|
|
4551
4560
|
},
|
|
4552
4561
|
|
|
4553
4562
|
_lowercase: {
|
|
4554
|
-
[vars$
|
|
4563
|
+
[vars$p.textTransform]: 'lowercase',
|
|
4555
4564
|
},
|
|
4556
4565
|
};
|
|
4557
4566
|
|
|
4558
4567
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
4559
4568
|
__proto__: null,
|
|
4560
4569
|
default: text$2,
|
|
4561
|
-
vars: vars$
|
|
4570
|
+
vars: vars$p
|
|
4562
4571
|
});
|
|
4563
4572
|
|
|
4564
|
-
const componentName$
|
|
4573
|
+
const componentName$x = getComponentName('link');
|
|
4565
4574
|
|
|
4566
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
4575
|
+
class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
|
|
4567
4576
|
constructor() {
|
|
4568
4577
|
super();
|
|
4569
4578
|
|
|
@@ -4609,12 +4618,12 @@ const selectors$2 = {
|
|
|
4609
4618
|
text: { selector: () => TextClass.componentName },
|
|
4610
4619
|
};
|
|
4611
4620
|
|
|
4612
|
-
const { anchor, text: text$1, host: host$
|
|
4621
|
+
const { anchor, text: text$1, host: host$g, wrapper: wrapper$1 } = selectors$2;
|
|
4613
4622
|
|
|
4614
4623
|
const LinkClass = compose(
|
|
4615
4624
|
createStyleMixin({
|
|
4616
4625
|
mappings: {
|
|
4617
|
-
hostWidth: { ...host$
|
|
4626
|
+
hostWidth: { ...host$g, property: 'width' },
|
|
4618
4627
|
hostDirection: { ...text$1, property: 'direction' },
|
|
4619
4628
|
textAlign: wrapper$1,
|
|
4620
4629
|
textColor: [
|
|
@@ -4628,37 +4637,37 @@ const LinkClass = compose(
|
|
|
4628
4637
|
componentNameValidationMixin
|
|
4629
4638
|
)(RawLink);
|
|
4630
4639
|
|
|
4631
|
-
const globalRefs$
|
|
4632
|
-
const vars$
|
|
4640
|
+
const globalRefs$g = getThemeRefs(globals);
|
|
4641
|
+
const vars$o = LinkClass.cssVarList;
|
|
4633
4642
|
|
|
4634
4643
|
const link = {
|
|
4635
|
-
[vars$
|
|
4636
|
-
[vars$
|
|
4644
|
+
[vars$o.hostDirection]: globalRefs$g.direction,
|
|
4645
|
+
[vars$o.cursor]: 'pointer',
|
|
4637
4646
|
|
|
4638
|
-
[vars$
|
|
4647
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
|
4639
4648
|
|
|
4640
4649
|
textAlign: {
|
|
4641
|
-
right: { [vars$
|
|
4642
|
-
left: { [vars$
|
|
4643
|
-
center: { [vars$
|
|
4650
|
+
right: { [vars$o.textAlign]: 'right' },
|
|
4651
|
+
left: { [vars$o.textAlign]: 'left' },
|
|
4652
|
+
center: { [vars$o.textAlign]: 'center' },
|
|
4644
4653
|
},
|
|
4645
4654
|
|
|
4646
4655
|
_fullWidth: {
|
|
4647
|
-
[vars$
|
|
4656
|
+
[vars$o.hostWidth]: '100%',
|
|
4648
4657
|
},
|
|
4649
4658
|
|
|
4650
4659
|
mode: {
|
|
4651
4660
|
primary: {
|
|
4652
|
-
[vars$
|
|
4661
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
|
4653
4662
|
},
|
|
4654
4663
|
secondary: {
|
|
4655
|
-
[vars$
|
|
4664
|
+
[vars$o.textColor]: globalRefs$g.colors.secondary.main,
|
|
4656
4665
|
},
|
|
4657
4666
|
error: {
|
|
4658
|
-
[vars$
|
|
4667
|
+
[vars$o.textColor]: globalRefs$g.colors.error.main,
|
|
4659
4668
|
},
|
|
4660
4669
|
success: {
|
|
4661
|
-
[vars$
|
|
4670
|
+
[vars$o.textColor]: globalRefs$g.colors.success.main,
|
|
4662
4671
|
},
|
|
4663
4672
|
},
|
|
4664
4673
|
};
|
|
@@ -4666,11 +4675,11 @@ const link = {
|
|
|
4666
4675
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
4667
4676
|
__proto__: null,
|
|
4668
4677
|
default: link,
|
|
4669
|
-
vars: vars$
|
|
4678
|
+
vars: vars$o
|
|
4670
4679
|
});
|
|
4671
4680
|
|
|
4672
|
-
const componentName$
|
|
4673
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
4681
|
+
const componentName$w = getComponentName('divider');
|
|
4682
|
+
class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
|
|
4674
4683
|
constructor() {
|
|
4675
4684
|
super();
|
|
4676
4685
|
|
|
@@ -4716,7 +4725,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$t, baseS
|
|
|
4716
4725
|
}
|
|
4717
4726
|
|
|
4718
4727
|
const textVars$3 = TextClass.cssVarList;
|
|
4719
|
-
const { host: host$
|
|
4728
|
+
const { host: host$f, before, after: after$1, text } = {
|
|
4720
4729
|
host: { selector: () => ':host' },
|
|
4721
4730
|
before: { selector: '::before' },
|
|
4722
4731
|
after: { selector: '::after' },
|
|
@@ -4726,8 +4735,8 @@ const { host: host$d, before, after: after$1, text } = {
|
|
|
4726
4735
|
const DividerClass = compose(
|
|
4727
4736
|
createStyleMixin({
|
|
4728
4737
|
mappings: {
|
|
4729
|
-
hostWidth: { ...host$
|
|
4730
|
-
hostPadding: { ...host$
|
|
4738
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
4739
|
+
hostPadding: { ...host$f, property: 'padding' },
|
|
4731
4740
|
hostDirection: { ...text, property: 'direction' },
|
|
4732
4741
|
|
|
4733
4742
|
minHeight: {},
|
|
@@ -4769,7 +4778,7 @@ const DividerClass = compose(
|
|
|
4769
4778
|
componentNameValidationMixin
|
|
4770
4779
|
)(RawDivider);
|
|
4771
4780
|
|
|
4772
|
-
const globalRefs$
|
|
4781
|
+
const globalRefs$f = getThemeRefs(globals);
|
|
4773
4782
|
const compVars$3 = DividerClass.cssVarList;
|
|
4774
4783
|
|
|
4775
4784
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -4777,18 +4786,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
4777
4786
|
thickness: '2px',
|
|
4778
4787
|
spacing: '10px',
|
|
4779
4788
|
},
|
|
4780
|
-
componentName$
|
|
4789
|
+
componentName$w
|
|
4781
4790
|
);
|
|
4782
4791
|
|
|
4783
4792
|
const divider = {
|
|
4784
4793
|
...helperTheme$1,
|
|
4785
4794
|
|
|
4786
|
-
[compVars$3.hostDirection]: globalRefs$
|
|
4795
|
+
[compVars$3.hostDirection]: globalRefs$f.direction,
|
|
4787
4796
|
[compVars$3.alignItems]: 'center',
|
|
4788
4797
|
[compVars$3.flexDirection]: 'row',
|
|
4789
4798
|
[compVars$3.alignSelf]: 'stretch',
|
|
4790
4799
|
[compVars$3.hostWidth]: '100%',
|
|
4791
|
-
[compVars$3.stripeColor]: globalRefs$
|
|
4800
|
+
[compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
|
|
4792
4801
|
[compVars$3.stripeColorOpacity]: '0.5',
|
|
4793
4802
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
4794
4803
|
[compVars$3.labelTextWidth]: 'fit-content',
|
|
@@ -4808,7 +4817,7 @@ const divider = {
|
|
|
4808
4817
|
},
|
|
4809
4818
|
};
|
|
4810
4819
|
|
|
4811
|
-
const vars$
|
|
4820
|
+
const vars$n = {
|
|
4812
4821
|
...compVars$3,
|
|
4813
4822
|
...helperVars$1,
|
|
4814
4823
|
};
|
|
@@ -4816,18 +4825,18 @@ const vars$l = {
|
|
|
4816
4825
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
4817
4826
|
__proto__: null,
|
|
4818
4827
|
default: divider,
|
|
4819
|
-
vars: vars$
|
|
4828
|
+
vars: vars$n
|
|
4820
4829
|
});
|
|
4821
4830
|
|
|
4822
4831
|
/* eslint-disable no-param-reassign */
|
|
4823
4832
|
|
|
4824
|
-
const componentName$
|
|
4833
|
+
const componentName$v = getComponentName('passcode-internal');
|
|
4825
4834
|
|
|
4826
|
-
createBaseInputClass({ componentName: componentName$
|
|
4835
|
+
createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
|
|
4827
4836
|
|
|
4828
|
-
const componentName$
|
|
4837
|
+
const componentName$u = getComponentName('loader-radial');
|
|
4829
4838
|
|
|
4830
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
4839
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
|
|
4831
4840
|
constructor() {
|
|
4832
4841
|
super();
|
|
4833
4842
|
|
|
@@ -4871,11 +4880,11 @@ const LoaderRadialClass = compose(
|
|
|
4871
4880
|
componentNameValidationMixin
|
|
4872
4881
|
)(RawLoaderRadial);
|
|
4873
4882
|
|
|
4874
|
-
const componentName$
|
|
4883
|
+
const componentName$t = getComponentName('passcode');
|
|
4875
4884
|
|
|
4876
4885
|
const observedAttributes$3 = ['digits'];
|
|
4877
4886
|
|
|
4878
|
-
const customMixin$
|
|
4887
|
+
const customMixin$6 = (superclass) =>
|
|
4879
4888
|
class PasscodeMixinClass extends superclass {
|
|
4880
4889
|
static get observedAttributes() {
|
|
4881
4890
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -4890,17 +4899,17 @@ const customMixin$5 = (superclass) =>
|
|
|
4890
4899
|
const template = document.createElement('template');
|
|
4891
4900
|
|
|
4892
4901
|
template.innerHTML = `
|
|
4893
|
-
<${componentName$
|
|
4902
|
+
<${componentName$v}
|
|
4894
4903
|
bordered="true"
|
|
4895
4904
|
name="code"
|
|
4896
4905
|
tabindex="-1"
|
|
4897
4906
|
slot="input"
|
|
4898
|
-
><slot></slot></${componentName$
|
|
4907
|
+
><slot></slot></${componentName$v}>
|
|
4899
4908
|
`;
|
|
4900
4909
|
|
|
4901
4910
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
4902
4911
|
|
|
4903
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
4912
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$v);
|
|
4904
4913
|
|
|
4905
4914
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
|
4906
4915
|
}
|
|
@@ -4915,7 +4924,7 @@ const customMixin$5 = (superclass) =>
|
|
|
4915
4924
|
};
|
|
4916
4925
|
|
|
4917
4926
|
const {
|
|
4918
|
-
host: host$
|
|
4927
|
+
host: host$e,
|
|
4919
4928
|
digitField,
|
|
4920
4929
|
label: label$6,
|
|
4921
4930
|
requiredIndicator: requiredIndicator$6,
|
|
@@ -4938,10 +4947,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
|
4938
4947
|
const PasscodeClass = compose(
|
|
4939
4948
|
createStyleMixin({
|
|
4940
4949
|
mappings: {
|
|
4941
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
4950
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
|
|
4942
4951
|
hostWidth: { property: 'width' },
|
|
4943
|
-
hostDirection: { ...host$
|
|
4944
|
-
fontFamily: [host$
|
|
4952
|
+
hostDirection: { ...host$e, property: 'direction' },
|
|
4953
|
+
fontFamily: [host$e, { ...label$6 }],
|
|
4945
4954
|
labelTextColor: [
|
|
4946
4955
|
{ ...label$6, property: 'color' },
|
|
4947
4956
|
{ ...requiredIndicator$6, property: 'color' },
|
|
@@ -4971,7 +4980,7 @@ const PasscodeClass = compose(
|
|
|
4971
4980
|
draggableMixin,
|
|
4972
4981
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
4973
4982
|
componentNameValidationMixin,
|
|
4974
|
-
customMixin$
|
|
4983
|
+
customMixin$6
|
|
4975
4984
|
)(
|
|
4976
4985
|
createProxy({
|
|
4977
4986
|
slots: [],
|
|
@@ -5047,56 +5056,56 @@ const PasscodeClass = compose(
|
|
|
5047
5056
|
${resetInputCursor('vaadin-text-field')}
|
|
5048
5057
|
`,
|
|
5049
5058
|
excludeAttrsSync: ['tabindex'],
|
|
5050
|
-
componentName: componentName$
|
|
5059
|
+
componentName: componentName$t,
|
|
5051
5060
|
})
|
|
5052
5061
|
);
|
|
5053
5062
|
|
|
5054
|
-
const vars$
|
|
5063
|
+
const vars$m = PasscodeClass.cssVarList;
|
|
5055
5064
|
|
|
5056
5065
|
const passcode = {
|
|
5057
|
-
[vars$
|
|
5058
|
-
[vars$
|
|
5059
|
-
[vars$
|
|
5060
|
-
[vars$
|
|
5061
|
-
[vars$
|
|
5062
|
-
[vars$
|
|
5063
|
-
[vars$
|
|
5064
|
-
[vars$
|
|
5065
|
-
[vars$
|
|
5066
|
-
[vars$
|
|
5067
|
-
[vars$
|
|
5068
|
-
[vars$
|
|
5069
|
-
[vars$
|
|
5070
|
-
[vars$
|
|
5071
|
-
[vars$
|
|
5066
|
+
[vars$m.hostDirection]: refs.direction,
|
|
5067
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
|
5068
|
+
[vars$m.fontSize]: refs.fontSize,
|
|
5069
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
|
5070
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5071
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5072
|
+
[vars$m.digitValueTextColor]: refs.valueTextColor,
|
|
5073
|
+
[vars$m.digitPadding]: '0',
|
|
5074
|
+
[vars$m.digitTextAlign]: 'center',
|
|
5075
|
+
[vars$m.digitSpacing]: '4px',
|
|
5076
|
+
[vars$m.hostWidth]: refs.width,
|
|
5077
|
+
[vars$m.digitOutlineColor]: 'transparent',
|
|
5078
|
+
[vars$m.digitOutlineWidth]: refs.outlineWidth,
|
|
5079
|
+
[vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
5080
|
+
[vars$m.digitSize]: refs.inputHeight,
|
|
5072
5081
|
|
|
5073
5082
|
size: {
|
|
5074
|
-
xs: { [vars$
|
|
5075
|
-
sm: { [vars$
|
|
5076
|
-
md: { [vars$
|
|
5077
|
-
lg: { [vars$
|
|
5083
|
+
xs: { [vars$m.spinnerSize]: '15px' },
|
|
5084
|
+
sm: { [vars$m.spinnerSize]: '20px' },
|
|
5085
|
+
md: { [vars$m.spinnerSize]: '20px' },
|
|
5086
|
+
lg: { [vars$m.spinnerSize]: '20px' },
|
|
5078
5087
|
},
|
|
5079
5088
|
|
|
5080
5089
|
_hideCursor: {
|
|
5081
|
-
[vars$
|
|
5090
|
+
[vars$m.digitCaretTextColor]: 'transparent',
|
|
5082
5091
|
},
|
|
5083
5092
|
|
|
5084
5093
|
_loading: {
|
|
5085
|
-
[vars$
|
|
5094
|
+
[vars$m.overlayOpacity]: refs.overlayOpacity,
|
|
5086
5095
|
},
|
|
5087
5096
|
};
|
|
5088
5097
|
|
|
5089
5098
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
5090
5099
|
__proto__: null,
|
|
5091
5100
|
default: passcode,
|
|
5092
|
-
vars: vars$
|
|
5101
|
+
vars: vars$m
|
|
5093
5102
|
});
|
|
5094
5103
|
|
|
5095
|
-
const componentName$
|
|
5104
|
+
const componentName$s = getComponentName('loader-linear');
|
|
5096
5105
|
|
|
5097
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
5106
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
|
5098
5107
|
static get componentName() {
|
|
5099
|
-
return componentName$
|
|
5108
|
+
return componentName$s;
|
|
5100
5109
|
}
|
|
5101
5110
|
|
|
5102
5111
|
constructor() {
|
|
@@ -5132,18 +5141,18 @@ const selectors$1 = {
|
|
|
5132
5141
|
host: { selector: () => ':host' },
|
|
5133
5142
|
};
|
|
5134
5143
|
|
|
5135
|
-
const { after, host: host$
|
|
5144
|
+
const { after, host: host$d } = selectors$1;
|
|
5136
5145
|
|
|
5137
5146
|
const LoaderLinearClass = compose(
|
|
5138
5147
|
createStyleMixin({
|
|
5139
5148
|
mappings: {
|
|
5140
5149
|
hostDisplay: {},
|
|
5141
|
-
hostWidth: { ...host$
|
|
5150
|
+
hostWidth: { ...host$d, property: 'width' },
|
|
5142
5151
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
5143
5152
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
5144
5153
|
verticalPadding: [
|
|
5145
|
-
{ ...host$
|
|
5146
|
-
{ ...host$
|
|
5154
|
+
{ ...host$d, property: 'padding-top' },
|
|
5155
|
+
{ ...host$d, property: 'padding-bottom' },
|
|
5147
5156
|
],
|
|
5148
5157
|
barBackgroundColor: { property: 'background-color' },
|
|
5149
5158
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -5157,67 +5166,67 @@ const LoaderLinearClass = compose(
|
|
|
5157
5166
|
componentNameValidationMixin
|
|
5158
5167
|
)(RawLoaderLinear);
|
|
5159
5168
|
|
|
5160
|
-
const globalRefs$
|
|
5161
|
-
const vars$
|
|
5169
|
+
const globalRefs$e = getThemeRefs(globals);
|
|
5170
|
+
const vars$l = LoaderLinearClass.cssVarList;
|
|
5162
5171
|
|
|
5163
5172
|
const loaderLinear = {
|
|
5164
|
-
[vars$
|
|
5165
|
-
[vars$
|
|
5173
|
+
[vars$l.hostDisplay]: 'inline-block',
|
|
5174
|
+
[vars$l.hostWidth]: '100%',
|
|
5166
5175
|
|
|
5167
|
-
[vars$
|
|
5168
|
-
[vars$
|
|
5176
|
+
[vars$l.barColor]: globalRefs$e.colors.surface.contrast,
|
|
5177
|
+
[vars$l.barWidth]: '20%',
|
|
5169
5178
|
|
|
5170
|
-
[vars$
|
|
5171
|
-
[vars$
|
|
5179
|
+
[vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
|
|
5180
|
+
[vars$l.barBorderRadius]: '4px',
|
|
5172
5181
|
|
|
5173
|
-
[vars$
|
|
5174
|
-
[vars$
|
|
5175
|
-
[vars$
|
|
5176
|
-
[vars$
|
|
5182
|
+
[vars$l.animationDuration]: '2s',
|
|
5183
|
+
[vars$l.animationTimingFunction]: 'linear',
|
|
5184
|
+
[vars$l.animationIterationCount]: 'infinite',
|
|
5185
|
+
[vars$l.verticalPadding]: '0.25em',
|
|
5177
5186
|
|
|
5178
5187
|
size: {
|
|
5179
|
-
xs: { [vars$
|
|
5180
|
-
sm: { [vars$
|
|
5181
|
-
md: { [vars$
|
|
5182
|
-
lg: { [vars$
|
|
5188
|
+
xs: { [vars$l.barHeight]: '2px' },
|
|
5189
|
+
sm: { [vars$l.barHeight]: '4px' },
|
|
5190
|
+
md: { [vars$l.barHeight]: '6px' },
|
|
5191
|
+
lg: { [vars$l.barHeight]: '8px' },
|
|
5183
5192
|
},
|
|
5184
5193
|
|
|
5185
5194
|
mode: {
|
|
5186
5195
|
primary: {
|
|
5187
|
-
[vars$
|
|
5196
|
+
[vars$l.barColor]: globalRefs$e.colors.primary.main,
|
|
5188
5197
|
},
|
|
5189
5198
|
secondary: {
|
|
5190
|
-
[vars$
|
|
5199
|
+
[vars$l.barColor]: globalRefs$e.colors.secondary.main,
|
|
5191
5200
|
},
|
|
5192
5201
|
},
|
|
5193
5202
|
|
|
5194
5203
|
_hidden: {
|
|
5195
|
-
[vars$
|
|
5204
|
+
[vars$l.hostDisplay]: 'none',
|
|
5196
5205
|
},
|
|
5197
5206
|
};
|
|
5198
5207
|
|
|
5199
5208
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
5200
5209
|
__proto__: null,
|
|
5201
5210
|
default: loaderLinear,
|
|
5202
|
-
vars: vars$
|
|
5211
|
+
vars: vars$l
|
|
5203
5212
|
});
|
|
5204
5213
|
|
|
5205
|
-
const globalRefs$
|
|
5214
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
5206
5215
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
|
5207
5216
|
|
|
5208
5217
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
5209
5218
|
{
|
|
5210
|
-
spinnerColor: globalRefs$
|
|
5219
|
+
spinnerColor: globalRefs$d.colors.surface.contrast,
|
|
5211
5220
|
mode: {
|
|
5212
5221
|
primary: {
|
|
5213
|
-
spinnerColor: globalRefs$
|
|
5222
|
+
spinnerColor: globalRefs$d.colors.primary.main,
|
|
5214
5223
|
},
|
|
5215
5224
|
secondary: {
|
|
5216
|
-
spinnerColor: globalRefs$
|
|
5225
|
+
spinnerColor: globalRefs$d.colors.secondary.main,
|
|
5217
5226
|
},
|
|
5218
5227
|
},
|
|
5219
5228
|
},
|
|
5220
|
-
componentName$
|
|
5229
|
+
componentName$u
|
|
5221
5230
|
);
|
|
5222
5231
|
|
|
5223
5232
|
const loaderRadial = {
|
|
@@ -5246,7 +5255,7 @@ const loaderRadial = {
|
|
|
5246
5255
|
[compVars$2.hostDisplay]: 'none',
|
|
5247
5256
|
},
|
|
5248
5257
|
};
|
|
5249
|
-
const vars$
|
|
5258
|
+
const vars$k = {
|
|
5250
5259
|
...compVars$2,
|
|
5251
5260
|
...helperVars,
|
|
5252
5261
|
};
|
|
@@ -5254,10 +5263,10 @@ const vars$i = {
|
|
|
5254
5263
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
5255
5264
|
__proto__: null,
|
|
5256
5265
|
default: loaderRadial,
|
|
5257
|
-
vars: vars$
|
|
5266
|
+
vars: vars$k
|
|
5258
5267
|
});
|
|
5259
5268
|
|
|
5260
|
-
const componentName$
|
|
5269
|
+
const componentName$r = getComponentName('combo-box');
|
|
5261
5270
|
|
|
5262
5271
|
const ComboBoxMixin = (superclass) =>
|
|
5263
5272
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -5483,7 +5492,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
5483
5492
|
};
|
|
5484
5493
|
|
|
5485
5494
|
const {
|
|
5486
|
-
host: host$
|
|
5495
|
+
host: host$c,
|
|
5487
5496
|
inputField: inputField$3,
|
|
5488
5497
|
inputElement: inputElement$1,
|
|
5489
5498
|
placeholder: placeholder$1,
|
|
@@ -5509,10 +5518,10 @@ const {
|
|
|
5509
5518
|
const ComboBoxClass = compose(
|
|
5510
5519
|
createStyleMixin({
|
|
5511
5520
|
mappings: {
|
|
5512
|
-
hostWidth: { ...host$
|
|
5513
|
-
hostDirection: { ...host$
|
|
5521
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
5522
|
+
hostDirection: { ...host$c, property: 'direction' },
|
|
5514
5523
|
// we apply font-size also on the host so we can set its width with em
|
|
5515
|
-
fontSize: [{}, host$
|
|
5524
|
+
fontSize: [{}, host$c],
|
|
5516
5525
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
|
5517
5526
|
labelTextColor: [
|
|
5518
5527
|
{ ...label$5, property: 'color' },
|
|
@@ -5640,71 +5649,71 @@ const ComboBoxClass = compose(
|
|
|
5640
5649
|
// and reset items to an empty array, and opening the list box with no items
|
|
5641
5650
|
// to display.
|
|
5642
5651
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
|
5643
|
-
componentName: componentName$
|
|
5652
|
+
componentName: componentName$r,
|
|
5644
5653
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
5645
5654
|
})
|
|
5646
5655
|
);
|
|
5647
5656
|
|
|
5648
|
-
const globalRefs$
|
|
5649
|
-
const vars$
|
|
5657
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
5658
|
+
const vars$j = ComboBoxClass.cssVarList;
|
|
5650
5659
|
|
|
5651
5660
|
const comboBox = {
|
|
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$
|
|
5674
|
-
[vars$
|
|
5675
|
-
[vars$
|
|
5676
|
-
[vars$
|
|
5677
|
-
[vars$
|
|
5661
|
+
[vars$j.hostWidth]: refs.width,
|
|
5662
|
+
[vars$j.hostDirection]: refs.direction,
|
|
5663
|
+
[vars$j.fontSize]: refs.fontSize,
|
|
5664
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
|
5665
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
5666
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5667
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
|
5668
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
|
5669
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
|
5670
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
|
5671
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
|
5672
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
|
5673
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
|
5674
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
|
5675
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5676
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
|
5677
|
+
[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5678
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
|
5679
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
|
5680
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
|
5681
|
+
[vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
|
|
5682
|
+
[vars$j.inputDropdownButtonCursor]: 'pointer',
|
|
5683
|
+
[vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
5684
|
+
[vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
|
|
5685
|
+
[vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
|
|
5686
|
+
[vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
|
|
5678
5687
|
|
|
5679
5688
|
_readonly: {
|
|
5680
|
-
[vars$
|
|
5689
|
+
[vars$j.inputDropdownButtonCursor]: 'default',
|
|
5681
5690
|
},
|
|
5682
5691
|
|
|
5683
5692
|
// Overlay theme exposed via the component:
|
|
5684
|
-
[vars$
|
|
5685
|
-
[vars$
|
|
5686
|
-
[vars$
|
|
5687
|
-
[vars$
|
|
5688
|
-
[vars$
|
|
5689
|
-
[vars$
|
|
5693
|
+
[vars$j.overlayFontSize]: refs.fontSize,
|
|
5694
|
+
[vars$j.overlayFontFamily]: refs.fontFamily,
|
|
5695
|
+
[vars$j.overlayCursor]: 'pointer',
|
|
5696
|
+
[vars$j.overlayItemBoxShadow]: 'none',
|
|
5697
|
+
[vars$j.overlayBackground]: refs.backgroundColor,
|
|
5698
|
+
[vars$j.overlayTextColor]: refs.valueTextColor,
|
|
5690
5699
|
|
|
5691
5700
|
// Overlay direct theme:
|
|
5692
|
-
[vars$
|
|
5693
|
-
[vars$
|
|
5701
|
+
[vars$j.overlay.minHeight]: '400px',
|
|
5702
|
+
[vars$j.overlay.margin]: '0',
|
|
5694
5703
|
};
|
|
5695
5704
|
|
|
5696
5705
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
5697
5706
|
__proto__: null,
|
|
5698
5707
|
comboBox: comboBox,
|
|
5699
5708
|
default: comboBox,
|
|
5700
|
-
vars: vars$
|
|
5709
|
+
vars: vars$j
|
|
5701
5710
|
});
|
|
5702
5711
|
|
|
5703
5712
|
const observedAttributes$2 = ['src', 'alt'];
|
|
5704
5713
|
|
|
5705
|
-
const componentName$
|
|
5714
|
+
const componentName$q = getComponentName('image');
|
|
5706
5715
|
|
|
5707
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
5716
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$q, baseSelector: ':host > img' });
|
|
5708
5717
|
class RawImage extends BaseClass$1 {
|
|
5709
5718
|
static get observedAttributes() {
|
|
5710
5719
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -5744,14 +5753,14 @@ const ImageClass = compose(
|
|
|
5744
5753
|
draggableMixin
|
|
5745
5754
|
)(RawImage);
|
|
5746
5755
|
|
|
5747
|
-
const vars$
|
|
5756
|
+
const vars$i = ImageClass.cssVarList;
|
|
5748
5757
|
|
|
5749
5758
|
const image = {};
|
|
5750
5759
|
|
|
5751
5760
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
5752
5761
|
__proto__: null,
|
|
5753
5762
|
default: image,
|
|
5754
|
-
vars: vars$
|
|
5763
|
+
vars: vars$i
|
|
5755
5764
|
});
|
|
5756
5765
|
|
|
5757
5766
|
var CountryCodes = [
|
|
@@ -6970,16 +6979,16 @@ var CountryCodes = [
|
|
|
6970
6979
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
|
6971
6980
|
];
|
|
6972
6981
|
|
|
6973
|
-
const componentName$
|
|
6982
|
+
const componentName$p = getComponentName('phone-field-internal');
|
|
6974
6983
|
|
|
6975
|
-
createBaseInputClass({ componentName: componentName$
|
|
6984
|
+
createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
|
6976
6985
|
|
|
6977
6986
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
6978
6987
|
const comboVars = ComboBoxClass.cssVarList;
|
|
6979
6988
|
|
|
6980
|
-
const componentName$
|
|
6989
|
+
const componentName$o = getComponentName('phone-field');
|
|
6981
6990
|
|
|
6982
|
-
const customMixin$
|
|
6991
|
+
const customMixin$5 = (superclass) =>
|
|
6983
6992
|
class PhoneFieldMixinClass extends superclass {
|
|
6984
6993
|
static get CountryCodes() {
|
|
6985
6994
|
return CountryCodes;
|
|
@@ -6991,15 +7000,15 @@ const customMixin$4 = (superclass) =>
|
|
|
6991
7000
|
const template = document.createElement('template');
|
|
6992
7001
|
|
|
6993
7002
|
template.innerHTML = `
|
|
6994
|
-
<${componentName$
|
|
7003
|
+
<${componentName$p}
|
|
6995
7004
|
tabindex="-1"
|
|
6996
7005
|
slot="input"
|
|
6997
|
-
></${componentName$
|
|
7006
|
+
></${componentName$p}>
|
|
6998
7007
|
`;
|
|
6999
7008
|
|
|
7000
7009
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7001
7010
|
|
|
7002
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7011
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
|
7003
7012
|
|
|
7004
7013
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7005
7014
|
includeAttrs: [
|
|
@@ -7019,7 +7028,7 @@ const customMixin$4 = (superclass) =>
|
|
|
7019
7028
|
};
|
|
7020
7029
|
|
|
7021
7030
|
const {
|
|
7022
|
-
host: host$
|
|
7031
|
+
host: host$b,
|
|
7023
7032
|
label: label$4,
|
|
7024
7033
|
requiredIndicator: requiredIndicator$4,
|
|
7025
7034
|
inputField: inputField$2,
|
|
@@ -7044,7 +7053,7 @@ const PhoneFieldClass = compose(
|
|
|
7044
7053
|
createStyleMixin({
|
|
7045
7054
|
mappings: {
|
|
7046
7055
|
fontSize: [
|
|
7047
|
-
host$
|
|
7056
|
+
host$b,
|
|
7048
7057
|
inputField$2,
|
|
7049
7058
|
{
|
|
7050
7059
|
selector: TextFieldClass.componentName,
|
|
@@ -7065,11 +7074,11 @@ const PhoneFieldClass = compose(
|
|
|
7065
7074
|
},
|
|
7066
7075
|
],
|
|
7067
7076
|
hostWidth: [
|
|
7068
|
-
{ ...host$
|
|
7077
|
+
{ ...host$b, property: 'width' },
|
|
7069
7078
|
{ ...phoneInput$1, property: 'width' },
|
|
7070
7079
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
7071
7080
|
],
|
|
7072
|
-
hostDirection: { ...host$
|
|
7081
|
+
hostDirection: { ...host$b, property: 'direction' },
|
|
7073
7082
|
|
|
7074
7083
|
inputBorderStyle: [
|
|
7075
7084
|
{ ...inputField$2, property: 'border-style' },
|
|
@@ -7119,7 +7128,7 @@ const PhoneFieldClass = compose(
|
|
|
7119
7128
|
}),
|
|
7120
7129
|
draggableMixin,
|
|
7121
7130
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7122
|
-
customMixin$
|
|
7131
|
+
customMixin$5
|
|
7123
7132
|
)(
|
|
7124
7133
|
createProxy({
|
|
7125
7134
|
slots: [],
|
|
@@ -7195,33 +7204,33 @@ const PhoneFieldClass = compose(
|
|
|
7195
7204
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7196
7205
|
`,
|
|
7197
7206
|
excludeAttrsSync: ['tabindex'],
|
|
7198
|
-
componentName: componentName$
|
|
7207
|
+
componentName: componentName$o,
|
|
7199
7208
|
})
|
|
7200
7209
|
);
|
|
7201
7210
|
|
|
7202
|
-
const vars$
|
|
7211
|
+
const vars$h = PhoneFieldClass.cssVarList;
|
|
7203
7212
|
|
|
7204
7213
|
const phoneField = {
|
|
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$
|
|
7221
|
-
[vars$
|
|
7222
|
-
[vars$
|
|
7223
|
-
[vars$
|
|
7224
|
-
[vars$
|
|
7214
|
+
[vars$h.hostWidth]: refs.width,
|
|
7215
|
+
[vars$h.hostDirection]: refs.direction,
|
|
7216
|
+
[vars$h.fontSize]: refs.fontSize,
|
|
7217
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
|
7218
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
|
7219
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7220
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7221
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
|
7222
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7223
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
|
7224
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
|
7225
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
|
7226
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
|
7227
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
|
7228
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
|
7229
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
|
7230
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
|
7231
|
+
[vars$h.phoneInputWidth]: refs.minWidth,
|
|
7232
|
+
[vars$h.countryCodeInputWidth]: '5em',
|
|
7233
|
+
[vars$h.countryCodeDropdownWidth]: '20em',
|
|
7225
7234
|
|
|
7226
7235
|
// '@overlay': {
|
|
7227
7236
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -7231,18 +7240,18 @@ const phoneField = {
|
|
|
7231
7240
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
7232
7241
|
__proto__: null,
|
|
7233
7242
|
default: phoneField,
|
|
7234
|
-
vars: vars$
|
|
7243
|
+
vars: vars$h
|
|
7235
7244
|
});
|
|
7236
7245
|
|
|
7237
|
-
const componentName$
|
|
7246
|
+
const componentName$n = getComponentName('phone-field-internal-input-box');
|
|
7238
7247
|
|
|
7239
|
-
createBaseInputClass({ componentName: componentName$
|
|
7248
|
+
createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
|
7240
7249
|
|
|
7241
7250
|
const textVars = TextFieldClass.cssVarList;
|
|
7242
7251
|
|
|
7243
|
-
const componentName$
|
|
7252
|
+
const componentName$m = getComponentName('phone-input-box-field');
|
|
7244
7253
|
|
|
7245
|
-
const customMixin$
|
|
7254
|
+
const customMixin$4 = (superclass) =>
|
|
7246
7255
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
7247
7256
|
static get CountryCodes() {
|
|
7248
7257
|
return CountryCodes;
|
|
@@ -7254,15 +7263,15 @@ const customMixin$3 = (superclass) =>
|
|
|
7254
7263
|
const template = document.createElement('template');
|
|
7255
7264
|
|
|
7256
7265
|
template.innerHTML = `
|
|
7257
|
-
<${componentName$
|
|
7266
|
+
<${componentName$n}
|
|
7258
7267
|
tabindex="-1"
|
|
7259
7268
|
slot="input"
|
|
7260
|
-
></${componentName$
|
|
7269
|
+
></${componentName$n}>
|
|
7261
7270
|
`;
|
|
7262
7271
|
|
|
7263
7272
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7264
7273
|
|
|
7265
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7274
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
|
7266
7275
|
|
|
7267
7276
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7268
7277
|
includeAttrs: [
|
|
@@ -7279,7 +7288,7 @@ const customMixin$3 = (superclass) =>
|
|
|
7279
7288
|
}
|
|
7280
7289
|
};
|
|
7281
7290
|
|
|
7282
|
-
const { host: host$
|
|
7291
|
+
const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
|
7283
7292
|
host: { selector: () => ':host' },
|
|
7284
7293
|
label: { selector: '::part(label)' },
|
|
7285
7294
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -7293,7 +7302,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7293
7302
|
createStyleMixin({
|
|
7294
7303
|
mappings: {
|
|
7295
7304
|
fontSize: [
|
|
7296
|
-
host$
|
|
7305
|
+
host$a,
|
|
7297
7306
|
inputField$1,
|
|
7298
7307
|
{
|
|
7299
7308
|
selector: TextFieldClass.componentName,
|
|
@@ -7301,9 +7310,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7301
7310
|
},
|
|
7302
7311
|
],
|
|
7303
7312
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
|
7304
|
-
hostWidth: { ...host$
|
|
7305
|
-
hostMinWidth: { ...host$
|
|
7306
|
-
hostDirection: { ...host$
|
|
7313
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
7314
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
|
7315
|
+
hostDirection: { ...host$a, property: 'direction' },
|
|
7307
7316
|
|
|
7308
7317
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
|
7309
7318
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
|
@@ -7329,7 +7338,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7329
7338
|
}),
|
|
7330
7339
|
draggableMixin,
|
|
7331
7340
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7332
|
-
customMixin$
|
|
7341
|
+
customMixin$4
|
|
7333
7342
|
)(
|
|
7334
7343
|
createProxy({
|
|
7335
7344
|
slots: [],
|
|
@@ -7395,47 +7404,270 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7395
7404
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7396
7405
|
`,
|
|
7397
7406
|
excludeAttrsSync: ['tabindex'],
|
|
7398
|
-
componentName: componentName$
|
|
7407
|
+
componentName: componentName$m,
|
|
7399
7408
|
})
|
|
7400
7409
|
);
|
|
7401
7410
|
|
|
7402
|
-
const vars$
|
|
7411
|
+
const vars$g = PhoneFieldInputBoxClass.cssVarList;
|
|
7412
|
+
|
|
7413
|
+
const phoneInputBoxField = {
|
|
7414
|
+
[vars$g.hostWidth]: '16em',
|
|
7415
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
|
7416
|
+
[vars$g.hostDirection]: refs.direction,
|
|
7417
|
+
[vars$g.fontSize]: refs.fontSize,
|
|
7418
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
|
7419
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
7420
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7421
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7422
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
|
7423
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7424
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
|
7425
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
|
7426
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
|
7427
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
|
7428
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
|
7429
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
|
7430
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
|
7431
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
|
7432
|
+
_fullWidth: {
|
|
7433
|
+
[vars$g.hostWidth]: refs.width,
|
|
7434
|
+
},
|
|
7435
|
+
};
|
|
7436
|
+
|
|
7437
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
7438
|
+
__proto__: null,
|
|
7439
|
+
default: phoneInputBoxField,
|
|
7440
|
+
vars: vars$g
|
|
7441
|
+
});
|
|
7442
|
+
|
|
7443
|
+
const componentName$l = getComponentName('new-password-internal');
|
|
7444
|
+
|
|
7445
|
+
const interpolateString = (template, values) =>
|
|
7446
|
+
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
|
7447
|
+
|
|
7448
|
+
// eslint-disable-next-line max-classes-per-file
|
|
7449
|
+
|
|
7450
|
+
const componentName$k = getComponentName('policy-validation');
|
|
7451
|
+
|
|
7452
|
+
const overrideAttrs = ['data-password-policy-value-minlength'];
|
|
7453
|
+
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
|
7454
|
+
const policyAttrs = ['label', 'value', ...dataAttrs];
|
|
7455
|
+
|
|
7456
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
|
|
7457
|
+
#availablePolicies;
|
|
7458
|
+
|
|
7459
|
+
#activePolicies = [];
|
|
7460
|
+
|
|
7461
|
+
#overrides;
|
|
7462
|
+
|
|
7463
|
+
static get observedAttributes() {
|
|
7464
|
+
return policyAttrs;
|
|
7465
|
+
}
|
|
7466
|
+
|
|
7467
|
+
constructor() {
|
|
7468
|
+
super();
|
|
7469
|
+
|
|
7470
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
|
7471
|
+
<div>
|
|
7472
|
+
<div class="label"></div>
|
|
7473
|
+
<ul></ul>
|
|
7474
|
+
</div>
|
|
7475
|
+
<style>
|
|
7476
|
+
:host > div {
|
|
7477
|
+
width: 100%;
|
|
7478
|
+
display: flex;
|
|
7479
|
+
flex-direction: column;
|
|
7480
|
+
box-sizing: border-box;
|
|
7481
|
+
}
|
|
7482
|
+
.label {
|
|
7483
|
+
max-width: 100%;
|
|
7484
|
+
text-wrap: wrap;
|
|
7485
|
+
overflow-wrap: break-word;
|
|
7486
|
+
}
|
|
7487
|
+
.hide-label .label {
|
|
7488
|
+
display: none;
|
|
7489
|
+
}
|
|
7490
|
+
ul {
|
|
7491
|
+
display: flex;
|
|
7492
|
+
flex-direction: column;
|
|
7493
|
+
padding: 0;
|
|
7494
|
+
margin: 0;
|
|
7495
|
+
}
|
|
7496
|
+
ul, li {
|
|
7497
|
+
margin: 0;
|
|
7498
|
+
padding: 0;
|
|
7499
|
+
list-style: none;
|
|
7500
|
+
}
|
|
7501
|
+
li::before {
|
|
7502
|
+
display: inline-block;
|
|
7503
|
+
width: 1em;
|
|
7504
|
+
text-align: center;
|
|
7505
|
+
}
|
|
7506
|
+
</style>
|
|
7507
|
+
`;
|
|
7508
|
+
|
|
7509
|
+
this.panel = this.shadowRoot.querySelector(':host > div');
|
|
7510
|
+
this.label = this.shadowRoot.querySelector('.label');
|
|
7511
|
+
this.list = this.shadowRoot.querySelector('ul');
|
|
7512
|
+
}
|
|
7513
|
+
|
|
7514
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
7515
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
|
7516
|
+
if (oldValue !== newValue) {
|
|
7517
|
+
if (attrName === 'label') {
|
|
7518
|
+
this.updateLabel(newValue);
|
|
7519
|
+
}
|
|
7520
|
+
|
|
7521
|
+
// we're don't know the order in which the attributes are forwarded, so we're trying to render every time
|
|
7522
|
+
// once `data` and `active-policies` are populated, the render will be executed.
|
|
7523
|
+
// once the `overrides` object is updated, we want to re-render the panel.
|
|
7524
|
+
if (dataAttrs.includes(attrName)) {
|
|
7525
|
+
if (attrName === 'data') {
|
|
7526
|
+
try {
|
|
7527
|
+
this.availablePolicies = JSON.parse(newValue);
|
|
7528
|
+
} catch {
|
|
7529
|
+
// eslint-disable-next-line no-console
|
|
7530
|
+
console.error('Failed to set available policies');
|
|
7531
|
+
}
|
|
7532
|
+
}
|
|
7533
|
+
if (attrName === 'active-policies') {
|
|
7534
|
+
this.#activePolicies = (newValue || '').split(',');
|
|
7535
|
+
}
|
|
7536
|
+
|
|
7537
|
+
if (attrName === 'data-password-policy-value-minlength') {
|
|
7538
|
+
const ln = Number(newValue);
|
|
7539
|
+
if (!Number.isNaN(ln) && ln > 0) {
|
|
7540
|
+
this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
|
|
7541
|
+
}
|
|
7542
|
+
}
|
|
7543
|
+
}
|
|
7544
|
+
|
|
7545
|
+
this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
|
|
7546
|
+
}
|
|
7547
|
+
}
|
|
7548
|
+
|
|
7549
|
+
get availablePolicies() {
|
|
7550
|
+
return this.#availablePolicies || [];
|
|
7551
|
+
}
|
|
7552
|
+
|
|
7553
|
+
set availablePolicies(val) {
|
|
7554
|
+
this.#availablePolicies = val;
|
|
7555
|
+
}
|
|
7556
|
+
|
|
7557
|
+
get value() {
|
|
7558
|
+
return this.getAttribute('value') || '';
|
|
7559
|
+
}
|
|
7560
|
+
|
|
7561
|
+
validate() {
|
|
7562
|
+
let policies = this.#availablePolicies;
|
|
7563
|
+
|
|
7564
|
+
if (this.#overrides) {
|
|
7565
|
+
policies = this.#availablePolicies.map((policy) =>
|
|
7566
|
+
this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
|
|
7567
|
+
);
|
|
7568
|
+
}
|
|
7569
|
+
|
|
7570
|
+
return this.#activePolicies.reduce((results, id) => {
|
|
7571
|
+
const policy = policies.find((p) => p.id === id);
|
|
7572
|
+
|
|
7573
|
+
if (!policy) {
|
|
7574
|
+
return results;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
const { pattern, message, data } = policy;
|
|
7578
|
+
|
|
7579
|
+
if (!pattern || !message) {
|
|
7580
|
+
return results;
|
|
7581
|
+
}
|
|
7582
|
+
|
|
7583
|
+
const exp = new RegExp(interpolateString(pattern, data));
|
|
7584
|
+
|
|
7585
|
+
const validationResult = {
|
|
7586
|
+
valid: exp.test(this.value),
|
|
7587
|
+
message: interpolateString(message, data),
|
|
7588
|
+
id,
|
|
7589
|
+
};
|
|
7590
|
+
|
|
7591
|
+
results.push(validationResult);
|
|
7592
|
+
|
|
7593
|
+
return results;
|
|
7594
|
+
}, []);
|
|
7595
|
+
}
|
|
7596
|
+
|
|
7597
|
+
get isValid() {
|
|
7598
|
+
return !this.validate().some(({ valid }) => valid === false);
|
|
7599
|
+
}
|
|
7600
|
+
|
|
7601
|
+
getValidationItemTemplate({ valid, message }) {
|
|
7602
|
+
const status = !this.value ? 'none' : valid;
|
|
7603
|
+
return `
|
|
7604
|
+
<li class="item" data-valid="${status}">
|
|
7605
|
+
<span class="message">${message}</span>
|
|
7606
|
+
</li>
|
|
7607
|
+
`;
|
|
7608
|
+
}
|
|
7609
|
+
|
|
7610
|
+
renderItems(availablePolicies, activePolicies) {
|
|
7611
|
+
if (!availablePolicies || !activePolicies.length) {
|
|
7612
|
+
return;
|
|
7613
|
+
}
|
|
7614
|
+
|
|
7615
|
+
this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
|
|
7616
|
+
}
|
|
7403
7617
|
|
|
7404
|
-
|
|
7405
|
-
|
|
7406
|
-
|
|
7407
|
-
|
|
7408
|
-
|
|
7409
|
-
|
|
7410
|
-
|
|
7411
|
-
|
|
7412
|
-
|
|
7413
|
-
|
|
7414
|
-
|
|
7415
|
-
|
|
7416
|
-
|
|
7417
|
-
|
|
7418
|
-
[
|
|
7419
|
-
[
|
|
7420
|
-
[
|
|
7421
|
-
[vars$e.inputOutlineColor]: refs.outlineColor,
|
|
7422
|
-
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
|
7423
|
-
_fullWidth: {
|
|
7424
|
-
[vars$e.hostWidth]: refs.width,
|
|
7425
|
-
},
|
|
7618
|
+
updateLabel(val) {
|
|
7619
|
+
if (!val) {
|
|
7620
|
+
this.classList.add('hide-label');
|
|
7621
|
+
this.label.innerHTML = '';
|
|
7622
|
+
} else {
|
|
7623
|
+
this.label.innerHTML = val;
|
|
7624
|
+
this.classList.remove('hide-label');
|
|
7625
|
+
}
|
|
7626
|
+
}
|
|
7627
|
+
}
|
|
7628
|
+
|
|
7629
|
+
const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
|
|
7630
|
+
host: { selector: () => ':host > div' },
|
|
7631
|
+
item: { selector: () => '.item' },
|
|
7632
|
+
symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
|
|
7633
|
+
symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
|
|
7634
|
+
symbolError: { selector: () => '.item[data-valid="false"]::before' },
|
|
7426
7635
|
};
|
|
7427
7636
|
|
|
7428
|
-
|
|
7429
|
-
|
|
7430
|
-
|
|
7431
|
-
|
|
7432
|
-
}
|
|
7637
|
+
const PolicyValidationClass = compose(
|
|
7638
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
|
7639
|
+
createStyleMixin({
|
|
7640
|
+
mappings: {
|
|
7641
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
|
7642
|
+
fontSize: {},
|
|
7643
|
+
fontFamily: {},
|
|
7644
|
+
padding: {},
|
|
7645
|
+
borderWidth: { ...host$9, property: 'border-width' },
|
|
7646
|
+
borderStyle: { ...host$9, property: 'border-style' },
|
|
7647
|
+
borderColor: { ...host$9, property: 'border-color' },
|
|
7648
|
+
borderRadius: { ...host$9, property: 'border-radius' },
|
|
7649
|
+
backgroundColor: { ...host$9, property: 'background-color' },
|
|
7650
|
+
textColor: { property: 'color' },
|
|
7651
|
+
labelMargin: { ...host$9, property: 'gap' },
|
|
7652
|
+
itemsSpacing: { ...item, property: 'line-height' },
|
|
7653
|
+
itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
|
|
7654
|
+
itemSymbolErrorColor: { ...symbolError, property: 'color' },
|
|
7655
|
+
itemSymbolDefault: { ...symbolDefault, property: 'content' },
|
|
7656
|
+
itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
|
|
7657
|
+
itemSymbolError: { ...symbolError, property: 'content' },
|
|
7658
|
+
},
|
|
7659
|
+
}),
|
|
7660
|
+
draggableMixin,
|
|
7661
|
+
componentNameValidationMixin
|
|
7662
|
+
)(RawPolicyValidation);
|
|
7433
7663
|
|
|
7434
|
-
|
|
7664
|
+
customElements.define(componentName$k, PolicyValidationClass);
|
|
7435
7665
|
|
|
7436
|
-
const componentName$
|
|
7666
|
+
const componentName$j = getComponentName('new-password');
|
|
7437
7667
|
|
|
7438
|
-
const
|
|
7668
|
+
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
|
7669
|
+
|
|
7670
|
+
const customMixin$3 = (superclass) =>
|
|
7439
7671
|
class NewPasswordMixinClass extends superclass {
|
|
7440
7672
|
init() {
|
|
7441
7673
|
super.init?.();
|
|
@@ -7443,16 +7675,16 @@ const customMixin$2 = (superclass) =>
|
|
|
7443
7675
|
const template = document.createElement('template');
|
|
7444
7676
|
|
|
7445
7677
|
template.innerHTML = `
|
|
7446
|
-
<${componentName$
|
|
7678
|
+
<${componentName$l}
|
|
7447
7679
|
name="new-password"
|
|
7448
7680
|
tabindex="-1"
|
|
7449
7681
|
slot="input"
|
|
7450
|
-
></${componentName$
|
|
7682
|
+
></${componentName$l}>
|
|
7451
7683
|
`;
|
|
7452
7684
|
|
|
7453
7685
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7454
7686
|
|
|
7455
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7687
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
|
7456
7688
|
|
|
7457
7689
|
forwardAttrs(this, this.inputElement, {
|
|
7458
7690
|
includeAttrs: [
|
|
@@ -7468,25 +7700,39 @@ const customMixin$2 = (superclass) =>
|
|
|
7468
7700
|
'invalid',
|
|
7469
7701
|
'readonly',
|
|
7470
7702
|
'draggable',
|
|
7703
|
+
'has-validation',
|
|
7704
|
+
'policy-label',
|
|
7705
|
+
'active-policies',
|
|
7706
|
+
'available-policies',
|
|
7707
|
+
'data-password-policy-value-minlength',
|
|
7471
7708
|
],
|
|
7472
7709
|
});
|
|
7473
7710
|
}
|
|
7474
7711
|
};
|
|
7475
7712
|
|
|
7476
|
-
const {
|
|
7713
|
+
const {
|
|
7714
|
+
host: host$8,
|
|
7715
|
+
label: label$2,
|
|
7716
|
+
internalInputsWrapper,
|
|
7717
|
+
errorMessage: errorMessage$3,
|
|
7718
|
+
helperText: helperText$2,
|
|
7719
|
+
passwordInput,
|
|
7720
|
+
policyPreview,
|
|
7721
|
+
} = {
|
|
7477
7722
|
host: { selector: () => ':host' },
|
|
7478
7723
|
label: { selector: '::part(label)' },
|
|
7479
7724
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
7480
7725
|
helperText: { selector: '::part(helper-text)' },
|
|
7481
7726
|
errorMessage: { selector: '::part(error-message)' },
|
|
7482
7727
|
passwordInput: { selector: 'descope-password' },
|
|
7728
|
+
policyPreview: { selector: 'descope-policy-validation' },
|
|
7483
7729
|
};
|
|
7484
7730
|
|
|
7485
7731
|
const NewPasswordClass = compose(
|
|
7486
7732
|
createStyleMixin({
|
|
7487
7733
|
mappings: {
|
|
7488
7734
|
fontSize: [
|
|
7489
|
-
host$
|
|
7735
|
+
host$8,
|
|
7490
7736
|
{},
|
|
7491
7737
|
{
|
|
7492
7738
|
selector: PasswordClass.componentName,
|
|
@@ -7495,19 +7741,24 @@ const NewPasswordClass = compose(
|
|
|
7495
7741
|
],
|
|
7496
7742
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
|
7497
7743
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
7498
|
-
hostWidth: { ...host$
|
|
7499
|
-
hostMinWidth: { ...host$
|
|
7744
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
7745
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
|
7500
7746
|
hostDirection: [
|
|
7501
|
-
{ ...host$
|
|
7747
|
+
{ ...host$8, property: 'direction' },
|
|
7502
7748
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
|
7503
7749
|
],
|
|
7504
|
-
inputsRequiredIndicator: { ...host$
|
|
7750
|
+
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
|
7505
7751
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
7752
|
+
policyPreviewBackgroundColor: {
|
|
7753
|
+
...policyPreview,
|
|
7754
|
+
property: policyPreviewVars.backgroundColor,
|
|
7755
|
+
},
|
|
7756
|
+
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
|
7506
7757
|
},
|
|
7507
7758
|
}),
|
|
7508
7759
|
draggableMixin,
|
|
7509
7760
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7510
|
-
customMixin$
|
|
7761
|
+
customMixin$3
|
|
7511
7762
|
)(
|
|
7512
7763
|
createProxy({
|
|
7513
7764
|
slots: [],
|
|
@@ -7541,7 +7792,6 @@ const NewPasswordClass = compose(
|
|
|
7541
7792
|
-webkit-mask-image: none;
|
|
7542
7793
|
min-height: 0;
|
|
7543
7794
|
width: 100%;
|
|
7544
|
-
height: 100%;
|
|
7545
7795
|
padding: 0;
|
|
7546
7796
|
}
|
|
7547
7797
|
descope-new-password-internal > .wrapper {
|
|
@@ -7557,35 +7807,45 @@ const NewPasswordClass = compose(
|
|
|
7557
7807
|
descope-new-password-internal vaadin-password-field::before {
|
|
7558
7808
|
height: initial;
|
|
7559
7809
|
}
|
|
7810
|
+
descope-policy-validation {
|
|
7811
|
+
margin-top: 8px;
|
|
7812
|
+
display: flex;
|
|
7813
|
+
}
|
|
7814
|
+
descope-policy-validation.hidden {
|
|
7815
|
+
display: none;
|
|
7816
|
+
}
|
|
7560
7817
|
`,
|
|
7561
7818
|
excludeAttrsSync: ['tabindex'],
|
|
7562
|
-
componentName: componentName$
|
|
7819
|
+
componentName: componentName$j,
|
|
7563
7820
|
})
|
|
7564
7821
|
);
|
|
7565
7822
|
|
|
7566
|
-
const
|
|
7823
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
7824
|
+
const vars$f = NewPasswordClass.cssVarList;
|
|
7567
7825
|
|
|
7568
7826
|
const newPassword = {
|
|
7569
|
-
[vars$
|
|
7570
|
-
[vars$
|
|
7571
|
-
[vars$
|
|
7572
|
-
[vars$
|
|
7573
|
-
[vars$
|
|
7574
|
-
[vars$
|
|
7575
|
-
[vars$
|
|
7827
|
+
[vars$f.hostWidth]: refs.width,
|
|
7828
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
|
7829
|
+
[vars$f.hostDirection]: refs.direction,
|
|
7830
|
+
[vars$f.fontSize]: refs.fontSize,
|
|
7831
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
|
7832
|
+
[vars$f.spaceBetweenInputs]: '1em',
|
|
7833
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7834
|
+
[vars$f.policyPreviewBackgroundColor]: 'none',
|
|
7835
|
+
[vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
|
|
7576
7836
|
|
|
7577
7837
|
_required: {
|
|
7578
7838
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
7579
7839
|
// That's why we fake the required indicator on each input.
|
|
7580
7840
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
7581
|
-
[vars$
|
|
7841
|
+
[vars$f.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
7582
7842
|
},
|
|
7583
7843
|
};
|
|
7584
7844
|
|
|
7585
7845
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
7586
7846
|
__proto__: null,
|
|
7587
7847
|
default: newPassword,
|
|
7588
|
-
vars: vars$
|
|
7848
|
+
vars: vars$f
|
|
7589
7849
|
});
|
|
7590
7850
|
|
|
7591
7851
|
const getFileBase64 = (fileObj) => {
|
|
@@ -7600,7 +7860,7 @@ const getFilename = (fileObj) => {
|
|
|
7600
7860
|
return fileObj.name.replace(/^.*\\/, '');
|
|
7601
7861
|
};
|
|
7602
7862
|
|
|
7603
|
-
const componentName$
|
|
7863
|
+
const componentName$i = getComponentName('upload-file');
|
|
7604
7864
|
|
|
7605
7865
|
const observedAttributes$1 = [
|
|
7606
7866
|
'title',
|
|
@@ -7615,7 +7875,7 @@ const observedAttributes$1 = [
|
|
|
7615
7875
|
'icon',
|
|
7616
7876
|
];
|
|
7617
7877
|
|
|
7618
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
7878
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
|
|
7619
7879
|
|
|
7620
7880
|
class RawUploadFile extends BaseInputClass {
|
|
7621
7881
|
static get observedAttributes() {
|
|
@@ -7787,7 +8047,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
7787
8047
|
}
|
|
7788
8048
|
|
|
7789
8049
|
const buttonVars = ButtonClass.cssVarList;
|
|
7790
|
-
const { host: host$
|
|
8050
|
+
const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
|
7791
8051
|
host: { selector: () => ':host' },
|
|
7792
8052
|
wrapper: { selector: () => ':host > div' },
|
|
7793
8053
|
icon: { selector: () => '::slotted(*)' },
|
|
@@ -7806,11 +8066,11 @@ const UploadFileClass = compose(
|
|
|
7806
8066
|
borderWidth: {},
|
|
7807
8067
|
borderStyle: {},
|
|
7808
8068
|
borderRadius: {},
|
|
7809
|
-
hostHeight: { ...host$
|
|
7810
|
-
hostWidth: { ...host$
|
|
8069
|
+
hostHeight: { ...host$7, property: 'height' },
|
|
8070
|
+
hostWidth: { ...host$7, property: 'width' },
|
|
7811
8071
|
hostPadding: { property: 'padding' },
|
|
7812
8072
|
hostDirection: [
|
|
7813
|
-
{ ...host$
|
|
8073
|
+
{ ...host$7, property: 'direction' },
|
|
7814
8074
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
|
7815
8075
|
],
|
|
7816
8076
|
gap: { ...wrapper },
|
|
@@ -7830,77 +8090,77 @@ const UploadFileClass = compose(
|
|
|
7830
8090
|
componentNameValidationMixin
|
|
7831
8091
|
)(RawUploadFile);
|
|
7832
8092
|
|
|
7833
|
-
const vars$
|
|
8093
|
+
const vars$e = UploadFileClass.cssVarList;
|
|
7834
8094
|
|
|
7835
8095
|
const uploadFile = {
|
|
7836
|
-
[vars$
|
|
7837
|
-
[vars$
|
|
7838
|
-
[vars$
|
|
8096
|
+
[vars$e.hostDirection]: refs.direction,
|
|
8097
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
|
8098
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
|
7839
8099
|
|
|
7840
|
-
[vars$
|
|
8100
|
+
[vars$e.iconSize]: '2em',
|
|
7841
8101
|
|
|
7842
|
-
[vars$
|
|
7843
|
-
[vars$
|
|
8102
|
+
[vars$e.hostPadding]: '0.75em',
|
|
8103
|
+
[vars$e.gap]: '0.5em',
|
|
7844
8104
|
|
|
7845
|
-
[vars$
|
|
7846
|
-
[vars$
|
|
7847
|
-
[vars$
|
|
8105
|
+
[vars$e.fontSize]: '16px',
|
|
8106
|
+
[vars$e.titleFontWeight]: '500',
|
|
8107
|
+
[vars$e.lineHeight]: '1em',
|
|
7848
8108
|
|
|
7849
|
-
[vars$
|
|
7850
|
-
[vars$
|
|
7851
|
-
[vars$
|
|
7852
|
-
[vars$
|
|
8109
|
+
[vars$e.borderWidth]: refs.borderWidth,
|
|
8110
|
+
[vars$e.borderColor]: refs.borderColor,
|
|
8111
|
+
[vars$e.borderRadius]: refs.borderRadius,
|
|
8112
|
+
[vars$e.borderStyle]: 'dashed',
|
|
7853
8113
|
|
|
7854
8114
|
_required: {
|
|
7855
|
-
[vars$
|
|
8115
|
+
[vars$e.requiredIndicator]: refs.requiredIndicator,
|
|
7856
8116
|
},
|
|
7857
8117
|
|
|
7858
8118
|
size: {
|
|
7859
8119
|
xs: {
|
|
7860
|
-
[vars$
|
|
7861
|
-
[vars$
|
|
7862
|
-
[vars$
|
|
7863
|
-
[vars$
|
|
7864
|
-
[vars$
|
|
8120
|
+
[vars$e.hostHeight]: '196px',
|
|
8121
|
+
[vars$e.hostWidth]: '200px',
|
|
8122
|
+
[vars$e.titleFontSize]: '0.875em',
|
|
8123
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
|
8124
|
+
[vars$e.lineHeight]: '1.25em',
|
|
7865
8125
|
},
|
|
7866
8126
|
sm: {
|
|
7867
|
-
[vars$
|
|
7868
|
-
[vars$
|
|
7869
|
-
[vars$
|
|
7870
|
-
[vars$
|
|
7871
|
-
[vars$
|
|
8127
|
+
[vars$e.hostHeight]: '216px',
|
|
8128
|
+
[vars$e.hostWidth]: '230px',
|
|
8129
|
+
[vars$e.titleFontSize]: '1em',
|
|
8130
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
|
8131
|
+
[vars$e.lineHeight]: '1.25em',
|
|
7872
8132
|
},
|
|
7873
8133
|
md: {
|
|
7874
|
-
[vars$
|
|
7875
|
-
[vars$
|
|
7876
|
-
[vars$
|
|
7877
|
-
[vars$
|
|
7878
|
-
[vars$
|
|
8134
|
+
[vars$e.hostHeight]: '256px',
|
|
8135
|
+
[vars$e.hostWidth]: '312px',
|
|
8136
|
+
[vars$e.titleFontSize]: '1.125em',
|
|
8137
|
+
[vars$e.descriptionFontSize]: '1em',
|
|
8138
|
+
[vars$e.lineHeight]: '1.5em',
|
|
7879
8139
|
},
|
|
7880
8140
|
lg: {
|
|
7881
|
-
[vars$
|
|
7882
|
-
[vars$
|
|
7883
|
-
[vars$
|
|
7884
|
-
[vars$
|
|
7885
|
-
[vars$
|
|
8141
|
+
[vars$e.hostHeight]: '280px',
|
|
8142
|
+
[vars$e.hostWidth]: '336px',
|
|
8143
|
+
[vars$e.titleFontSize]: '1.125em',
|
|
8144
|
+
[vars$e.descriptionFontSize]: '1.125em',
|
|
8145
|
+
[vars$e.lineHeight]: '1.75em',
|
|
7886
8146
|
},
|
|
7887
8147
|
},
|
|
7888
8148
|
|
|
7889
8149
|
_fullWidth: {
|
|
7890
|
-
[vars$
|
|
8150
|
+
[vars$e.hostWidth]: refs.width,
|
|
7891
8151
|
},
|
|
7892
8152
|
};
|
|
7893
8153
|
|
|
7894
8154
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7895
8155
|
__proto__: null,
|
|
7896
8156
|
default: uploadFile,
|
|
7897
|
-
vars: vars$
|
|
8157
|
+
vars: vars$e
|
|
7898
8158
|
});
|
|
7899
8159
|
|
|
7900
|
-
const componentName$
|
|
8160
|
+
const componentName$h = getComponentName('button-selection-group-item');
|
|
7901
8161
|
|
|
7902
8162
|
class RawSelectItem extends createBaseClass({
|
|
7903
|
-
componentName: componentName$
|
|
8163
|
+
componentName: componentName$h,
|
|
7904
8164
|
baseSelector: ':host > descope-button',
|
|
7905
8165
|
}) {
|
|
7906
8166
|
get size() {
|
|
@@ -8007,39 +8267,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
|
8007
8267
|
componentNameValidationMixin
|
|
8008
8268
|
)(RawSelectItem);
|
|
8009
8269
|
|
|
8010
|
-
const globalRefs$
|
|
8270
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
8011
8271
|
|
|
8012
|
-
const vars$
|
|
8272
|
+
const vars$d = ButtonSelectionGroupItemClass.cssVarList;
|
|
8013
8273
|
|
|
8014
8274
|
const buttonSelectionGroupItem = {
|
|
8015
|
-
[vars$
|
|
8016
|
-
[vars$
|
|
8017
|
-
[vars$
|
|
8018
|
-
[vars$
|
|
8019
|
-
[vars$
|
|
8020
|
-
[vars$
|
|
8021
|
-
[vars$
|
|
8022
|
-
[vars$
|
|
8275
|
+
[vars$d.hostDirection]: 'inherit',
|
|
8276
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
|
|
8277
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
|
8278
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.light,
|
|
8279
|
+
[vars$d.borderStyle]: 'solid',
|
|
8280
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
|
8281
|
+
[vars$d.outlineColor]: 'transparent',
|
|
8282
|
+
[vars$d.borderWidth]: globalRefs$a.border.xs,
|
|
8023
8283
|
|
|
8024
8284
|
_hover: {
|
|
8025
|
-
[vars$
|
|
8285
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
|
|
8026
8286
|
},
|
|
8027
8287
|
|
|
8028
8288
|
_focused: {
|
|
8029
|
-
[vars$
|
|
8289
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.light,
|
|
8030
8290
|
},
|
|
8031
8291
|
|
|
8032
8292
|
_selected: {
|
|
8033
|
-
[vars$
|
|
8034
|
-
[vars$
|
|
8035
|
-
[vars$
|
|
8293
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
|
|
8294
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
|
|
8295
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
|
|
8036
8296
|
},
|
|
8037
8297
|
};
|
|
8038
8298
|
|
|
8039
8299
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8040
8300
|
__proto__: null,
|
|
8041
8301
|
default: buttonSelectionGroupItem,
|
|
8042
|
-
vars: vars$
|
|
8302
|
+
vars: vars$d
|
|
8043
8303
|
});
|
|
8044
8304
|
|
|
8045
8305
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
@@ -8138,10 +8398,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
|
8138
8398
|
return BaseButtonSelectionGroupInternalClass;
|
|
8139
8399
|
};
|
|
8140
8400
|
|
|
8141
|
-
const componentName$
|
|
8401
|
+
const componentName$g = getComponentName('button-selection-group-internal');
|
|
8142
8402
|
|
|
8143
8403
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8144
|
-
componentName$
|
|
8404
|
+
componentName$g
|
|
8145
8405
|
) {
|
|
8146
8406
|
getSelectedNode() {
|
|
8147
8407
|
return this.items.find((item) => item.hasAttribute('selected'));
|
|
@@ -8297,7 +8557,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
|
8297
8557
|
}
|
|
8298
8558
|
};
|
|
8299
8559
|
|
|
8300
|
-
const { host: host$
|
|
8560
|
+
const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
|
8301
8561
|
host: { selector: () => ':host' },
|
|
8302
8562
|
label: { selector: '::part(label)' },
|
|
8303
8563
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -8306,9 +8566,9 @@ const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
|
8306
8566
|
};
|
|
8307
8567
|
|
|
8308
8568
|
const buttonSelectionGroupMappings = {
|
|
8309
|
-
hostWidth: { ...host$
|
|
8310
|
-
hostDirection: { ...host$
|
|
8311
|
-
fontFamily: host$
|
|
8569
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
8570
|
+
hostDirection: { ...host$6, property: 'direction' },
|
|
8571
|
+
fontFamily: host$6,
|
|
8312
8572
|
labelTextColor: [
|
|
8313
8573
|
{ ...label$1, property: 'color' },
|
|
8314
8574
|
{ ...requiredIndicator$1, property: 'color' },
|
|
@@ -8373,7 +8633,7 @@ const buttonSelectionGroupStyles = `
|
|
|
8373
8633
|
${resetInputCursor('vaadin-text-field')}
|
|
8374
8634
|
`;
|
|
8375
8635
|
|
|
8376
|
-
const componentName$
|
|
8636
|
+
const componentName$f = getComponentName('button-selection-group');
|
|
8377
8637
|
|
|
8378
8638
|
const buttonSelectionGroupMixin = (superclass) =>
|
|
8379
8639
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8382,19 +8642,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
|
8382
8642
|
const template = document.createElement('template');
|
|
8383
8643
|
|
|
8384
8644
|
template.innerHTML = `
|
|
8385
|
-
<${componentName$
|
|
8645
|
+
<${componentName$g}
|
|
8386
8646
|
name="button-selection-group"
|
|
8387
8647
|
slot="input"
|
|
8388
8648
|
tabindex="-1"
|
|
8389
8649
|
part="internal-component"
|
|
8390
8650
|
>
|
|
8391
8651
|
<slot></slot>
|
|
8392
|
-
</${componentName$
|
|
8652
|
+
</${componentName$g}>
|
|
8393
8653
|
`;
|
|
8394
8654
|
|
|
8395
8655
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8396
8656
|
|
|
8397
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8657
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
|
8398
8658
|
|
|
8399
8659
|
forwardAttrs(this, this.inputElement, {
|
|
8400
8660
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
|
@@ -8419,11 +8679,11 @@ const ButtonSelectionGroupClass = compose(
|
|
|
8419
8679
|
wrappedEleName: 'vaadin-text-field',
|
|
8420
8680
|
style: () => buttonSelectionGroupStyles,
|
|
8421
8681
|
excludeAttrsSync: ['tabindex'],
|
|
8422
|
-
componentName: componentName$
|
|
8682
|
+
componentName: componentName$f,
|
|
8423
8683
|
})
|
|
8424
8684
|
);
|
|
8425
8685
|
|
|
8426
|
-
const globalRefs$
|
|
8686
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
8427
8687
|
|
|
8428
8688
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8429
8689
|
[vars.hostDirection]: refs.direction,
|
|
@@ -8431,26 +8691,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
|
8431
8691
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
8432
8692
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
8433
8693
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
8434
|
-
[vars.itemsSpacing]: globalRefs$
|
|
8694
|
+
[vars.itemsSpacing]: globalRefs$9.spacing.sm,
|
|
8435
8695
|
[vars.hostWidth]: refs.width,
|
|
8436
8696
|
});
|
|
8437
8697
|
|
|
8438
|
-
const vars$
|
|
8698
|
+
const vars$c = ButtonSelectionGroupClass.cssVarList;
|
|
8439
8699
|
|
|
8440
8700
|
const buttonSelectionGroup = {
|
|
8441
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8701
|
+
...createBaseButtonSelectionGroupMappings(vars$c),
|
|
8442
8702
|
};
|
|
8443
8703
|
|
|
8444
8704
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8445
8705
|
__proto__: null,
|
|
8446
8706
|
default: buttonSelectionGroup,
|
|
8447
|
-
vars: vars$
|
|
8707
|
+
vars: vars$c
|
|
8448
8708
|
});
|
|
8449
8709
|
|
|
8450
|
-
const componentName$
|
|
8710
|
+
const componentName$e = getComponentName('button-multi-selection-group-internal');
|
|
8451
8711
|
|
|
8452
8712
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8453
|
-
componentName$
|
|
8713
|
+
componentName$e
|
|
8454
8714
|
) {
|
|
8455
8715
|
#getSelectedNodes() {
|
|
8456
8716
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
|
@@ -8553,7 +8813,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
|
8553
8813
|
}
|
|
8554
8814
|
}
|
|
8555
8815
|
|
|
8556
|
-
const componentName$
|
|
8816
|
+
const componentName$d = getComponentName('button-multi-selection-group');
|
|
8557
8817
|
|
|
8558
8818
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8559
8819
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8562,19 +8822,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
|
8562
8822
|
const template = document.createElement('template');
|
|
8563
8823
|
|
|
8564
8824
|
template.innerHTML = `
|
|
8565
|
-
<${componentName$
|
|
8825
|
+
<${componentName$e}
|
|
8566
8826
|
name="button-selection-group"
|
|
8567
8827
|
slot="input"
|
|
8568
8828
|
tabindex="-1"
|
|
8569
8829
|
part="internal-component"
|
|
8570
8830
|
>
|
|
8571
8831
|
<slot></slot>
|
|
8572
|
-
</${componentName$
|
|
8832
|
+
</${componentName$e}>
|
|
8573
8833
|
`;
|
|
8574
8834
|
|
|
8575
8835
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8576
8836
|
|
|
8577
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8837
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
|
8578
8838
|
|
|
8579
8839
|
forwardAttrs(this, this.inputElement, {
|
|
8580
8840
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
|
@@ -8599,25 +8859,25 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
|
8599
8859
|
wrappedEleName: 'vaadin-text-field',
|
|
8600
8860
|
style: () => buttonSelectionGroupStyles,
|
|
8601
8861
|
excludeAttrsSync: ['tabindex'],
|
|
8602
|
-
componentName: componentName$
|
|
8862
|
+
componentName: componentName$d,
|
|
8603
8863
|
})
|
|
8604
8864
|
);
|
|
8605
8865
|
|
|
8606
|
-
const vars$
|
|
8866
|
+
const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
|
|
8607
8867
|
|
|
8608
8868
|
const buttonMultiSelectionGroup = {
|
|
8609
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8869
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
|
8610
8870
|
};
|
|
8611
8871
|
|
|
8612
8872
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8613
8873
|
__proto__: null,
|
|
8614
8874
|
default: buttonMultiSelectionGroup,
|
|
8615
|
-
vars: vars$
|
|
8875
|
+
vars: vars$b
|
|
8616
8876
|
});
|
|
8617
8877
|
|
|
8618
|
-
const componentName$
|
|
8878
|
+
const componentName$c = getComponentName('modal');
|
|
8619
8879
|
|
|
8620
|
-
const customMixin$
|
|
8880
|
+
const customMixin$2 = (superclass) =>
|
|
8621
8881
|
class ModalMixinClass extends superclass {
|
|
8622
8882
|
get opened() {
|
|
8623
8883
|
return this.getAttribute('opened') === 'true';
|
|
@@ -8707,35 +8967,35 @@ const ModalClass = compose(
|
|
|
8707
8967
|
}),
|
|
8708
8968
|
draggableMixin,
|
|
8709
8969
|
componentNameValidationMixin,
|
|
8710
|
-
customMixin$
|
|
8970
|
+
customMixin$2
|
|
8711
8971
|
)(
|
|
8712
8972
|
createProxy({
|
|
8713
8973
|
slots: [''],
|
|
8714
8974
|
wrappedEleName: 'vaadin-dialog',
|
|
8715
8975
|
style: () => ``,
|
|
8716
8976
|
excludeAttrsSync: ['tabindex', 'opened'],
|
|
8717
|
-
componentName: componentName$
|
|
8977
|
+
componentName: componentName$c,
|
|
8718
8978
|
})
|
|
8719
8979
|
);
|
|
8720
8980
|
|
|
8721
|
-
const globalRefs$
|
|
8981
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
8722
8982
|
|
|
8723
8983
|
const compVars$1 = ModalClass.cssVarList;
|
|
8724
8984
|
|
|
8725
8985
|
const modal = {
|
|
8726
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
|
8727
|
-
[compVars$1.overlayShadow]: globalRefs$
|
|
8986
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
|
|
8987
|
+
[compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
|
|
8728
8988
|
[compVars$1.overlayWidth]: '540px',
|
|
8729
8989
|
};
|
|
8730
8990
|
|
|
8731
|
-
const vars$
|
|
8991
|
+
const vars$a = {
|
|
8732
8992
|
...compVars$1,
|
|
8733
8993
|
};
|
|
8734
8994
|
|
|
8735
8995
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
|
8736
8996
|
__proto__: null,
|
|
8737
8997
|
default: modal,
|
|
8738
|
-
vars: vars$
|
|
8998
|
+
vars: vars$a
|
|
8739
8999
|
});
|
|
8740
9000
|
|
|
8741
9001
|
const isValidDataType = (data) => {
|
|
@@ -8748,7 +9008,7 @@ const isValidDataType = (data) => {
|
|
|
8748
9008
|
return isValid;
|
|
8749
9009
|
};
|
|
8750
9010
|
|
|
8751
|
-
const componentName$
|
|
9011
|
+
const componentName$b = getComponentName('grid');
|
|
8752
9012
|
|
|
8753
9013
|
const GridMixin = (superclass) =>
|
|
8754
9014
|
class GridMixinClass extends superclass {
|
|
@@ -8908,7 +9168,7 @@ const GridMixin = (superclass) =>
|
|
|
8908
9168
|
};
|
|
8909
9169
|
|
|
8910
9170
|
const {
|
|
8911
|
-
host: host$
|
|
9171
|
+
host: host$5,
|
|
8912
9172
|
headerRow,
|
|
8913
9173
|
headerRowCell,
|
|
8914
9174
|
contentRow,
|
|
@@ -8943,15 +9203,15 @@ const GridClass = compose(
|
|
|
8943
9203
|
fontWeight: { ...contentRow },
|
|
8944
9204
|
valueTextColor: { ...contentRow, property: 'color' },
|
|
8945
9205
|
backgroundColor: [
|
|
8946
|
-
{ ...host$
|
|
9206
|
+
{ ...host$5, property: 'background-color' },
|
|
8947
9207
|
{ ...contentRow, property: 'background-color' },
|
|
8948
9208
|
],
|
|
8949
9209
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
|
8950
9210
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
|
8951
|
-
borderColor: { ...host$
|
|
8952
|
-
borderWidth: { ...host$
|
|
8953
|
-
borderStyle: { ...host$
|
|
8954
|
-
borderRadius: { ...host$
|
|
9211
|
+
borderColor: { ...host$5, property: 'border-color' },
|
|
9212
|
+
borderWidth: { ...host$5, property: 'border-width' },
|
|
9213
|
+
borderStyle: { ...host$5, property: 'border-style' },
|
|
9214
|
+
borderRadius: { ...host$5, property: 'border-radius' },
|
|
8955
9215
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
|
8956
9216
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
|
8957
9217
|
separatorColor: [
|
|
@@ -8984,40 +9244,40 @@ const GridClass = compose(
|
|
|
8984
9244
|
}
|
|
8985
9245
|
`,
|
|
8986
9246
|
excludeAttrsSync: ['columns', 'tabindex'],
|
|
8987
|
-
componentName: componentName$
|
|
9247
|
+
componentName: componentName$b,
|
|
8988
9248
|
})
|
|
8989
9249
|
);
|
|
8990
9250
|
|
|
8991
|
-
const globalRefs$
|
|
8992
|
-
const vars$
|
|
9251
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
9252
|
+
const vars$9 = GridClass.cssVarList;
|
|
8993
9253
|
|
|
8994
9254
|
const grid = {
|
|
8995
|
-
[vars$
|
|
8996
|
-
[vars$
|
|
8997
|
-
[vars$
|
|
8998
|
-
[vars$
|
|
8999
|
-
[vars$
|
|
9255
|
+
[vars$9.hostWidth]: '100%',
|
|
9256
|
+
[vars$9.hostHeight]: '100%',
|
|
9257
|
+
[vars$9.hostMinHeight]: '400px',
|
|
9258
|
+
[vars$9.fontWeight]: '400',
|
|
9259
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
|
9000
9260
|
|
|
9001
|
-
[vars$
|
|
9002
|
-
[vars$
|
|
9261
|
+
[vars$9.fontSize]: refs.fontSize,
|
|
9262
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
|
9003
9263
|
|
|
9004
|
-
[vars$
|
|
9005
|
-
[vars$
|
|
9006
|
-
[vars$
|
|
9264
|
+
[vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
|
|
9265
|
+
[vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
|
|
9266
|
+
[vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
|
|
9007
9267
|
|
|
9008
|
-
[vars$
|
|
9009
|
-
[vars$
|
|
9010
|
-
[vars$
|
|
9011
|
-
[vars$
|
|
9268
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
|
9269
|
+
[vars$9.borderStyle]: refs.borderStyle,
|
|
9270
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
|
9271
|
+
[vars$9.borderColor]: 'transparent',
|
|
9012
9272
|
|
|
9013
|
-
[vars$
|
|
9014
|
-
[vars$
|
|
9273
|
+
[vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
|
|
9274
|
+
[vars$9.separatorColor]: globalRefs$7.colors.surface.light,
|
|
9015
9275
|
|
|
9016
|
-
[vars$
|
|
9017
|
-
[vars$
|
|
9276
|
+
[vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
|
|
9277
|
+
[vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
|
|
9018
9278
|
|
|
9019
9279
|
_bordered: {
|
|
9020
|
-
[vars$
|
|
9280
|
+
[vars$9.borderColor]: refs.borderColor,
|
|
9021
9281
|
},
|
|
9022
9282
|
};
|
|
9023
9283
|
|
|
@@ -9025,10 +9285,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
|
9025
9285
|
__proto__: null,
|
|
9026
9286
|
default: grid,
|
|
9027
9287
|
grid: grid,
|
|
9028
|
-
vars: vars$
|
|
9288
|
+
vars: vars$9
|
|
9029
9289
|
});
|
|
9030
9290
|
|
|
9031
|
-
const componentName$
|
|
9291
|
+
const componentName$a = getComponentName('notification-card');
|
|
9032
9292
|
|
|
9033
9293
|
const notificationCardMixin = (superclass) =>
|
|
9034
9294
|
class NotificationCardMixinClass extends superclass {
|
|
@@ -9136,54 +9396,54 @@ const NotificationCardClass = compose(
|
|
|
9136
9396
|
}
|
|
9137
9397
|
`,
|
|
9138
9398
|
excludeAttrsSync: ['tabindex'],
|
|
9139
|
-
componentName: componentName$
|
|
9399
|
+
componentName: componentName$a,
|
|
9140
9400
|
})
|
|
9141
9401
|
);
|
|
9142
9402
|
|
|
9143
|
-
const globalRefs$
|
|
9144
|
-
const vars$
|
|
9403
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
9404
|
+
const vars$8 = NotificationCardClass.cssVarList;
|
|
9145
9405
|
|
|
9146
9406
|
const shadowColor = '#00000020';
|
|
9147
9407
|
|
|
9148
9408
|
const notification = {
|
|
9149
|
-
[vars$
|
|
9150
|
-
[vars$
|
|
9151
|
-
[vars$
|
|
9152
|
-
[vars$
|
|
9153
|
-
[vars$
|
|
9154
|
-
[vars$
|
|
9155
|
-
[vars$
|
|
9156
|
-
[vars$
|
|
9157
|
-
[vars$
|
|
9409
|
+
[vars$8.hostMinWidth]: '415px',
|
|
9410
|
+
[vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
|
|
9411
|
+
[vars$8.fontSize]: globalRefs$6.typography.body1.size,
|
|
9412
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
|
9413
|
+
[vars$8.textColor]: globalRefs$6.colors.surface.contrast,
|
|
9414
|
+
[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
|
|
9415
|
+
[vars$8.verticalPadding]: '0.625em',
|
|
9416
|
+
[vars$8.horizontalPadding]: '1.5em',
|
|
9417
|
+
[vars$8.borderRadius]: globalRefs$6.radius.xs,
|
|
9158
9418
|
|
|
9159
9419
|
_bordered: {
|
|
9160
|
-
[vars$
|
|
9161
|
-
[vars$
|
|
9162
|
-
[vars$
|
|
9420
|
+
[vars$8.borderWidth]: globalRefs$6.border.sm,
|
|
9421
|
+
[vars$8.borderStyle]: 'solid',
|
|
9422
|
+
[vars$8.borderColor]: 'transparent',
|
|
9163
9423
|
},
|
|
9164
9424
|
|
|
9165
9425
|
size: {
|
|
9166
|
-
xs: { [vars$
|
|
9167
|
-
sm: { [vars$
|
|
9168
|
-
md: { [vars$
|
|
9169
|
-
lg: { [vars$
|
|
9426
|
+
xs: { [vars$8.fontSize]: '12px' },
|
|
9427
|
+
sm: { [vars$8.fontSize]: '14px' },
|
|
9428
|
+
md: { [vars$8.fontSize]: '16px' },
|
|
9429
|
+
lg: { [vars$8.fontSize]: '18px' },
|
|
9170
9430
|
},
|
|
9171
9431
|
|
|
9172
9432
|
mode: {
|
|
9173
9433
|
primary: {
|
|
9174
|
-
[vars$
|
|
9175
|
-
[vars$
|
|
9176
|
-
[vars$
|
|
9434
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
|
|
9435
|
+
[vars$8.textColor]: globalRefs$6.colors.primary.contrast,
|
|
9436
|
+
[vars$8.borderColor]: globalRefs$6.colors.primary.light,
|
|
9177
9437
|
},
|
|
9178
9438
|
success: {
|
|
9179
|
-
[vars$
|
|
9180
|
-
[vars$
|
|
9181
|
-
[vars$
|
|
9439
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.success.main,
|
|
9440
|
+
[vars$8.textColor]: globalRefs$6.colors.success.contrast,
|
|
9441
|
+
[vars$8.borderColor]: globalRefs$6.colors.success.light,
|
|
9182
9442
|
},
|
|
9183
9443
|
error: {
|
|
9184
|
-
[vars$
|
|
9185
|
-
[vars$
|
|
9186
|
-
[vars$
|
|
9444
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.error.main,
|
|
9445
|
+
[vars$8.textColor]: globalRefs$6.colors.error.contrast,
|
|
9446
|
+
[vars$8.borderColor]: globalRefs$6.colors.error.light,
|
|
9187
9447
|
},
|
|
9188
9448
|
},
|
|
9189
9449
|
};
|
|
@@ -9191,10 +9451,10 @@ const notification = {
|
|
|
9191
9451
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
|
9192
9452
|
__proto__: null,
|
|
9193
9453
|
default: notification,
|
|
9194
|
-
vars: vars$
|
|
9454
|
+
vars: vars$8
|
|
9195
9455
|
});
|
|
9196
9456
|
|
|
9197
|
-
const componentName$
|
|
9457
|
+
const componentName$9 = getComponentName('multi-select-combo-box');
|
|
9198
9458
|
|
|
9199
9459
|
const multiSelectComboBoxMixin = (superclass) =>
|
|
9200
9460
|
class MultiSelectComboBoxMixinClass extends superclass {
|
|
@@ -9582,7 +9842,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
|
9582
9842
|
};
|
|
9583
9843
|
|
|
9584
9844
|
const {
|
|
9585
|
-
host: host$
|
|
9845
|
+
host: host$4,
|
|
9586
9846
|
inputField,
|
|
9587
9847
|
inputElement,
|
|
9588
9848
|
placeholder,
|
|
@@ -9620,10 +9880,10 @@ const {
|
|
|
9620
9880
|
const MultiSelectComboBoxClass = compose(
|
|
9621
9881
|
createStyleMixin({
|
|
9622
9882
|
mappings: {
|
|
9623
|
-
hostWidth: { ...host$
|
|
9624
|
-
hostDirection: { ...host$
|
|
9883
|
+
hostWidth: { ...host$4, property: 'width' },
|
|
9884
|
+
hostDirection: { ...host$4, property: 'direction' },
|
|
9625
9885
|
// we apply font-size also on the host so we can set its width with em
|
|
9626
|
-
fontSize: [{}, host$
|
|
9886
|
+
fontSize: [{}, host$4],
|
|
9627
9887
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
|
9628
9888
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
|
9629
9889
|
labelTextColor: [
|
|
@@ -9798,73 +10058,73 @@ const MultiSelectComboBoxClass = compose(
|
|
|
9798
10058
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
|
9799
10059
|
// tries to override it, causing us to lose the user set placeholder.
|
|
9800
10060
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
|
9801
|
-
componentName: componentName$
|
|
10061
|
+
componentName: componentName$9,
|
|
9802
10062
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
|
9803
10063
|
})
|
|
9804
10064
|
);
|
|
9805
10065
|
|
|
9806
|
-
const globalRefs$
|
|
9807
|
-
const vars$
|
|
10066
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
10067
|
+
const vars$7 = MultiSelectComboBoxClass.cssVarList;
|
|
9808
10068
|
|
|
9809
10069
|
const multiSelectComboBox = {
|
|
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$
|
|
9836
|
-
[vars$
|
|
9837
|
-
[vars$
|
|
9838
|
-
[vars$
|
|
9839
|
-
[vars$
|
|
10070
|
+
[vars$7.hostWidth]: refs.width,
|
|
10071
|
+
[vars$7.hostDirection]: refs.direction,
|
|
10072
|
+
[vars$7.fontSize]: refs.fontSize,
|
|
10073
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
|
10074
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
|
10075
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
10076
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
|
10077
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
|
10078
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
|
10079
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
|
10080
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
|
10081
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
|
10082
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
|
10083
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
|
10084
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
|
10085
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
|
10086
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
10087
|
+
[vars$7.inputBackgroundColor]: refs.backgroundColor,
|
|
10088
|
+
[vars$7.inputHorizontalPadding]: refs.horizontalPadding,
|
|
10089
|
+
[vars$7.inputVerticalPadding]: refs.verticalPadding,
|
|
10090
|
+
[vars$7.inputHeight]: refs.inputHeight,
|
|
10091
|
+
[vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
|
|
10092
|
+
[vars$7.inputDropdownButtonCursor]: 'pointer',
|
|
10093
|
+
[vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
10094
|
+
[vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
|
|
10095
|
+
[vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
|
|
10096
|
+
[vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
|
|
10097
|
+
[vars$7.chipFontSize]: refs.chipFontSize,
|
|
10098
|
+
[vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
|
|
10099
|
+
[vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
|
|
9840
10100
|
|
|
9841
10101
|
_readonly: {
|
|
9842
|
-
[vars$
|
|
10102
|
+
[vars$7.inputDropdownButtonCursor]: 'default',
|
|
9843
10103
|
},
|
|
9844
10104
|
|
|
9845
10105
|
// Overlay theme exposed via the component:
|
|
9846
|
-
[vars$
|
|
9847
|
-
[vars$
|
|
9848
|
-
[vars$
|
|
9849
|
-
[vars$
|
|
9850
|
-
[vars$
|
|
9851
|
-
[vars$
|
|
10106
|
+
[vars$7.overlayFontSize]: refs.fontSize,
|
|
10107
|
+
[vars$7.overlayFontFamily]: refs.fontFamily,
|
|
10108
|
+
[vars$7.overlayCursor]: 'pointer',
|
|
10109
|
+
[vars$7.overlayItemBoxShadow]: 'none',
|
|
10110
|
+
[vars$7.overlayBackground]: refs.backgroundColor,
|
|
10111
|
+
[vars$7.overlayTextColor]: refs.valueTextColor,
|
|
9852
10112
|
|
|
9853
10113
|
// Overlay direct theme:
|
|
9854
|
-
[vars$
|
|
9855
|
-
[vars$
|
|
10114
|
+
[vars$7.overlay.minHeight]: '400px',
|
|
10115
|
+
[vars$7.overlay.margin]: '0',
|
|
9856
10116
|
};
|
|
9857
10117
|
|
|
9858
10118
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
|
9859
10119
|
__proto__: null,
|
|
9860
10120
|
default: multiSelectComboBox,
|
|
9861
10121
|
multiSelectComboBox: multiSelectComboBox,
|
|
9862
|
-
vars: vars$
|
|
10122
|
+
vars: vars$7
|
|
9863
10123
|
});
|
|
9864
10124
|
|
|
9865
|
-
const componentName$
|
|
10125
|
+
const componentName$8 = getComponentName('badge');
|
|
9866
10126
|
|
|
9867
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
|
10127
|
+
class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
|
|
9868
10128
|
constructor() {
|
|
9869
10129
|
super();
|
|
9870
10130
|
|
|
@@ -9915,66 +10175,66 @@ const BadgeClass = compose(
|
|
|
9915
10175
|
componentNameValidationMixin
|
|
9916
10176
|
)(RawBadge);
|
|
9917
10177
|
|
|
9918
|
-
const globalRefs$
|
|
9919
|
-
const vars$
|
|
10178
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
10179
|
+
const vars$6 = BadgeClass.cssVarList;
|
|
9920
10180
|
|
|
9921
10181
|
const badge$1 = {
|
|
9922
|
-
[vars$
|
|
9923
|
-
[vars$
|
|
10182
|
+
[vars$6.hostWidth]: 'fit-content',
|
|
10183
|
+
[vars$6.hostDirection]: globalRefs$4.direction,
|
|
9924
10184
|
|
|
9925
|
-
[vars$
|
|
10185
|
+
[vars$6.textAlign]: 'center',
|
|
9926
10186
|
|
|
9927
|
-
[vars$
|
|
9928
|
-
[vars$
|
|
10187
|
+
[vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
|
|
10188
|
+
[vars$6.fontWeight]: '400',
|
|
9929
10189
|
|
|
9930
|
-
[vars$
|
|
9931
|
-
[vars$
|
|
10190
|
+
[vars$6.verticalPadding]: '0.25em',
|
|
10191
|
+
[vars$6.horizontalPadding]: '0.5em',
|
|
9932
10192
|
|
|
9933
|
-
[vars$
|
|
9934
|
-
[vars$
|
|
9935
|
-
[vars$
|
|
9936
|
-
[vars$
|
|
10193
|
+
[vars$6.borderWidth]: globalRefs$4.border.xs,
|
|
10194
|
+
[vars$6.borderRadius]: globalRefs$4.radius.xs,
|
|
10195
|
+
[vars$6.borderColor]: 'transparent',
|
|
10196
|
+
[vars$6.borderStyle]: 'solid',
|
|
9937
10197
|
|
|
9938
10198
|
_fullWidth: {
|
|
9939
|
-
[vars$
|
|
10199
|
+
[vars$6.hostWidth]: '100%',
|
|
9940
10200
|
},
|
|
9941
10201
|
|
|
9942
10202
|
size: {
|
|
9943
|
-
xs: { [vars$
|
|
9944
|
-
sm: { [vars$
|
|
9945
|
-
md: { [vars$
|
|
9946
|
-
lg: { [vars$
|
|
10203
|
+
xs: { [vars$6.fontSize]: '12px' },
|
|
10204
|
+
sm: { [vars$6.fontSize]: '14px' },
|
|
10205
|
+
md: { [vars$6.fontSize]: '16px' },
|
|
10206
|
+
lg: { [vars$6.fontSize]: '18px' },
|
|
9947
10207
|
},
|
|
9948
10208
|
|
|
9949
10209
|
mode: {
|
|
9950
10210
|
default: {
|
|
9951
|
-
[vars$
|
|
10211
|
+
[vars$6.textColor]: globalRefs$4.colors.surface.dark,
|
|
9952
10212
|
_bordered: {
|
|
9953
|
-
[vars$
|
|
10213
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.light,
|
|
9954
10214
|
},
|
|
9955
10215
|
},
|
|
9956
10216
|
primary: {
|
|
9957
|
-
[vars$
|
|
10217
|
+
[vars$6.textColor]: globalRefs$4.colors.primary.main,
|
|
9958
10218
|
_bordered: {
|
|
9959
|
-
[vars$
|
|
10219
|
+
[vars$6.borderColor]: globalRefs$4.colors.primary.light,
|
|
9960
10220
|
},
|
|
9961
10221
|
},
|
|
9962
10222
|
secondary: {
|
|
9963
|
-
[vars$
|
|
10223
|
+
[vars$6.textColor]: globalRefs$4.colors.secondary.main,
|
|
9964
10224
|
_bordered: {
|
|
9965
|
-
[vars$
|
|
10225
|
+
[vars$6.borderColor]: globalRefs$4.colors.secondary.light,
|
|
9966
10226
|
},
|
|
9967
10227
|
},
|
|
9968
10228
|
error: {
|
|
9969
|
-
[vars$
|
|
10229
|
+
[vars$6.textColor]: globalRefs$4.colors.error.main,
|
|
9970
10230
|
_bordered: {
|
|
9971
|
-
[vars$
|
|
10231
|
+
[vars$6.borderColor]: globalRefs$4.colors.error.light,
|
|
9972
10232
|
},
|
|
9973
10233
|
},
|
|
9974
10234
|
success: {
|
|
9975
|
-
[vars$
|
|
10235
|
+
[vars$6.textColor]: globalRefs$4.colors.success.main,
|
|
9976
10236
|
_bordered: {
|
|
9977
|
-
[vars$
|
|
10237
|
+
[vars$6.borderColor]: globalRefs$4.colors.success.light,
|
|
9978
10238
|
},
|
|
9979
10239
|
},
|
|
9980
10240
|
},
|
|
@@ -9983,11 +10243,11 @@ const badge$1 = {
|
|
|
9983
10243
|
var badge$2 = /*#__PURE__*/Object.freeze({
|
|
9984
10244
|
__proto__: null,
|
|
9985
10245
|
default: badge$1,
|
|
9986
|
-
vars: vars$
|
|
10246
|
+
vars: vars$6
|
|
9987
10247
|
});
|
|
9988
10248
|
|
|
9989
|
-
const componentName$
|
|
9990
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
|
10249
|
+
const componentName$7 = getComponentName('avatar');
|
|
10250
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
|
|
9991
10251
|
constructor() {
|
|
9992
10252
|
super();
|
|
9993
10253
|
|
|
@@ -10062,7 +10322,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSe
|
|
|
10062
10322
|
}
|
|
10063
10323
|
}
|
|
10064
10324
|
|
|
10065
|
-
const { host: host$
|
|
10325
|
+
const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
|
10066
10326
|
host: { selector: () => ':host' },
|
|
10067
10327
|
editableBadge: { selector: '> .editableBadge' },
|
|
10068
10328
|
avatar: { selector: 'vaadin-avatar' },
|
|
@@ -10071,10 +10331,10 @@ const { host: host$2, editableBadge, avatar: avatar$2 } = {
|
|
|
10071
10331
|
const AvatarClass = compose(
|
|
10072
10332
|
createStyleMixin({
|
|
10073
10333
|
mappings: {
|
|
10074
|
-
hostWidth: { ...host$
|
|
10075
|
-
hostHeight: { ...host$
|
|
10076
|
-
cursor: [avatar$2, host$
|
|
10077
|
-
hostDirection: { ...host$
|
|
10334
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
10335
|
+
hostHeight: { ...host$3, property: 'height' },
|
|
10336
|
+
cursor: [avatar$2, host$3],
|
|
10337
|
+
hostDirection: { ...host$3, property: 'direction' },
|
|
10078
10338
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
|
10079
10339
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
|
10080
10340
|
editableIconColor: { ...editableBadge, property: 'color' },
|
|
@@ -10086,16 +10346,16 @@ const AvatarClass = compose(
|
|
|
10086
10346
|
componentNameValidationMixin
|
|
10087
10347
|
)(RawAvatar);
|
|
10088
10348
|
|
|
10089
|
-
const globalRefs$
|
|
10349
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
10090
10350
|
const compVars = AvatarClass.cssVarList;
|
|
10091
10351
|
|
|
10092
10352
|
const avatar = {
|
|
10093
|
-
[compVars.hostDirection]: globalRefs$
|
|
10094
|
-
[compVars.editableIconColor]: globalRefs$
|
|
10095
|
-
[compVars.editableBorderColor]: globalRefs$
|
|
10096
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
|
10097
|
-
[compVars.avatarTextColor]: globalRefs$
|
|
10098
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
|
10353
|
+
[compVars.hostDirection]: globalRefs$3.direction,
|
|
10354
|
+
[compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
|
|
10355
|
+
[compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
|
|
10356
|
+
[compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
|
|
10357
|
+
[compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
|
|
10358
|
+
[compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
|
|
10099
10359
|
|
|
10100
10360
|
_editable: {
|
|
10101
10361
|
[compVars.cursor]: 'pointer',
|
|
@@ -10121,23 +10381,23 @@ const avatar = {
|
|
|
10121
10381
|
},
|
|
10122
10382
|
};
|
|
10123
10383
|
|
|
10124
|
-
const vars$
|
|
10384
|
+
const vars$5 = {
|
|
10125
10385
|
...compVars,
|
|
10126
10386
|
};
|
|
10127
10387
|
|
|
10128
10388
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10129
10389
|
__proto__: null,
|
|
10130
10390
|
default: avatar,
|
|
10131
|
-
vars: vars$
|
|
10391
|
+
vars: vars$5
|
|
10132
10392
|
});
|
|
10133
10393
|
|
|
10134
|
-
const componentName$
|
|
10394
|
+
const componentName$6 = getComponentName('mappings-field-internal');
|
|
10135
10395
|
|
|
10136
|
-
createBaseInputClass({ componentName: componentName$
|
|
10396
|
+
createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
|
10137
10397
|
|
|
10138
|
-
const componentName$
|
|
10398
|
+
const componentName$5 = getComponentName('mappings-field');
|
|
10139
10399
|
|
|
10140
|
-
const customMixin = (superclass) =>
|
|
10400
|
+
const customMixin$1 = (superclass) =>
|
|
10141
10401
|
class MappingsFieldMixinClass extends superclass {
|
|
10142
10402
|
get defaultValues() {
|
|
10143
10403
|
const defaultValuesAttr = this.getAttribute('default-values');
|
|
@@ -10164,14 +10424,14 @@ const customMixin = (superclass) =>
|
|
|
10164
10424
|
const template = document.createElement('template');
|
|
10165
10425
|
|
|
10166
10426
|
template.innerHTML = `
|
|
10167
|
-
<${componentName$
|
|
10427
|
+
<${componentName$6}
|
|
10168
10428
|
tabindex="-1"
|
|
10169
|
-
></${componentName$
|
|
10429
|
+
></${componentName$6}>
|
|
10170
10430
|
`;
|
|
10171
10431
|
|
|
10172
10432
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10173
10433
|
|
|
10174
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
10434
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
|
10175
10435
|
|
|
10176
10436
|
forwardAttrs(this, this.inputElement, {
|
|
10177
10437
|
includeAttrs: [
|
|
@@ -10189,16 +10449,21 @@ const customMixin = (superclass) =>
|
|
|
10189
10449
|
],
|
|
10190
10450
|
});
|
|
10191
10451
|
|
|
10452
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
|
10453
|
+
// we want to reflect the change in the parent component
|
|
10454
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10455
|
+
|
|
10192
10456
|
this.setDefaultValues();
|
|
10193
10457
|
}
|
|
10194
10458
|
};
|
|
10195
10459
|
|
|
10196
10460
|
const {
|
|
10197
|
-
host: host$
|
|
10461
|
+
host: host$2,
|
|
10198
10462
|
helperText,
|
|
10199
10463
|
errorMessage,
|
|
10200
10464
|
mappingItem,
|
|
10201
10465
|
labels,
|
|
10466
|
+
labelsText,
|
|
10202
10467
|
valueLabel,
|
|
10203
10468
|
attrLabel,
|
|
10204
10469
|
separator,
|
|
@@ -10209,6 +10474,9 @@ const {
|
|
|
10209
10474
|
errorMessage: { selector: '::part(error-message)' },
|
|
10210
10475
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
|
10211
10476
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
|
10477
|
+
labelsText: {
|
|
10478
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
|
10479
|
+
},
|
|
10212
10480
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
|
10213
10481
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
|
10214
10482
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
|
@@ -10218,12 +10486,17 @@ const {
|
|
|
10218
10486
|
const MappingsFieldClass = compose(
|
|
10219
10487
|
createStyleMixin({
|
|
10220
10488
|
mappings: {
|
|
10221
|
-
hostWidth: { ...host$
|
|
10222
|
-
hostDirection: { ...host$
|
|
10489
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
10490
|
+
hostDirection: { ...host$2, property: 'direction' },
|
|
10223
10491
|
// we apply font-size also on the host so we can set its width with em
|
|
10224
|
-
fontSize: [{}, host$
|
|
10492
|
+
fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
|
|
10225
10493
|
fontFamily: [helperText, errorMessage, labels],
|
|
10226
10494
|
separatorFontSize: { ...separator, property: 'font-size' },
|
|
10495
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
|
10496
|
+
labelsLineHeight: [
|
|
10497
|
+
{ ...labelsText, property: 'line-height' },
|
|
10498
|
+
{ ...labels, property: 'line-height' },
|
|
10499
|
+
],
|
|
10227
10500
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
|
10228
10501
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
|
10229
10502
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
|
@@ -10240,7 +10513,7 @@ const MappingsFieldClass = compose(
|
|
|
10240
10513
|
proxyParentValidation: true,
|
|
10241
10514
|
}),
|
|
10242
10515
|
componentNameValidationMixin,
|
|
10243
|
-
customMixin
|
|
10516
|
+
customMixin$1
|
|
10244
10517
|
)(
|
|
10245
10518
|
createProxy({
|
|
10246
10519
|
slots: [],
|
|
@@ -10287,36 +10560,38 @@ const MappingsFieldClass = compose(
|
|
|
10287
10560
|
'options',
|
|
10288
10561
|
'error-message',
|
|
10289
10562
|
],
|
|
10290
|
-
componentName: componentName$
|
|
10563
|
+
componentName: componentName$5,
|
|
10291
10564
|
})
|
|
10292
10565
|
);
|
|
10293
10566
|
|
|
10294
|
-
const globalRefs$
|
|
10567
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
10295
10568
|
|
|
10296
|
-
const vars$
|
|
10569
|
+
const vars$4 = MappingsFieldClass.cssVarList;
|
|
10297
10570
|
|
|
10298
10571
|
const mappingsField = {
|
|
10299
|
-
[vars$
|
|
10300
|
-
[vars$
|
|
10301
|
-
[vars$
|
|
10302
|
-
[vars$
|
|
10303
|
-
[vars$
|
|
10304
|
-
[vars$
|
|
10305
|
-
[vars$
|
|
10572
|
+
[vars$4.hostWidth]: refs.width,
|
|
10573
|
+
[vars$4.hostDirection]: refs.direction,
|
|
10574
|
+
[vars$4.fontSize]: refs.fontSize,
|
|
10575
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
|
10576
|
+
[vars$4.separatorFontSize]: '14px',
|
|
10577
|
+
[vars$4.labelsFontSize]: '14px',
|
|
10578
|
+
[vars$4.labelsLineHeight]: '1',
|
|
10579
|
+
[vars$4.labelsMarginBottom]: '6px',
|
|
10580
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
|
10581
|
+
[vars$4.itemMarginBottom]: '1em',
|
|
10306
10582
|
// To be positioned correctly, the min width has to match the text field min width
|
|
10307
|
-
[vars$
|
|
10583
|
+
[vars$4.valueLabelMinWidth]: refs.minWidth,
|
|
10308
10584
|
// To be positioned correctly, the min width has to match the combo box field min width
|
|
10309
|
-
[vars$
|
|
10310
|
-
[vars$
|
|
10311
|
-
[vars$
|
|
10312
|
-
[vars$2.removeButtonWidth]: '60px',
|
|
10585
|
+
[vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
|
|
10586
|
+
[vars$4.separatorWidth]: '70px',
|
|
10587
|
+
[vars$4.removeButtonWidth]: '60px',
|
|
10313
10588
|
};
|
|
10314
10589
|
|
|
10315
10590
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
|
10316
10591
|
__proto__: null,
|
|
10317
10592
|
default: mappingsField,
|
|
10318
10593
|
mappingsField: mappingsField,
|
|
10319
|
-
vars: vars$
|
|
10594
|
+
vars: vars$4
|
|
10320
10595
|
});
|
|
10321
10596
|
|
|
10322
10597
|
function deleteIcon() {
|
|
@@ -10327,9 +10602,9 @@ function editIcon() {
|
|
|
10327
10602
|
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
10603
|
}
|
|
10329
10604
|
|
|
10330
|
-
const componentName$
|
|
10605
|
+
const componentName$4 = getComponentName('user-attribute');
|
|
10331
10606
|
class RawUserAttribute extends createBaseClass({
|
|
10332
|
-
componentName: componentName$
|
|
10607
|
+
componentName: componentName$4,
|
|
10333
10608
|
baseSelector: ':host > .root',
|
|
10334
10609
|
}) {
|
|
10335
10610
|
constructor() {
|
|
@@ -10515,7 +10790,7 @@ class RawUserAttribute extends createBaseClass({
|
|
|
10515
10790
|
}
|
|
10516
10791
|
}
|
|
10517
10792
|
|
|
10518
|
-
const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10793
|
+
const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10519
10794
|
host: { selector: () => ':host' },
|
|
10520
10795
|
textFields: { selector: 'descope-text' },
|
|
10521
10796
|
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
|
@@ -10528,10 +10803,10 @@ const { host, textFields, buttons, badge, labelText, valueText, textWrapper } =
|
|
|
10528
10803
|
const UserAttributeClass = compose(
|
|
10529
10804
|
createStyleMixin({
|
|
10530
10805
|
mappings: {
|
|
10531
|
-
hostWidth: { ...host, property: 'width' },
|
|
10532
|
-
hostMinWidth: { ...host, property: 'min-width' },
|
|
10806
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
10807
|
+
hostMinWidth: { ...host$1, property: 'min-width' },
|
|
10533
10808
|
hostDirection: [
|
|
10534
|
-
{ ...host, property: 'direction' },
|
|
10809
|
+
{ ...host$1, property: 'direction' },
|
|
10535
10810
|
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
|
10536
10811
|
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
|
10537
10812
|
{ ...badge, property: BadgeClass.cssVarList.hostDirection },
|
|
@@ -10546,24 +10821,169 @@ const UserAttributeClass = compose(
|
|
|
10546
10821
|
componentNameValidationMixin
|
|
10547
10822
|
)(RawUserAttribute);
|
|
10548
10823
|
|
|
10549
|
-
const globalRefs = getThemeRefs(globals);
|
|
10550
|
-
const vars$
|
|
10824
|
+
const globalRefs$1 = getThemeRefs(globals);
|
|
10825
|
+
const vars$3 = UserAttributeClass.cssVarList;
|
|
10551
10826
|
|
|
10552
10827
|
const userAttribute = {
|
|
10553
|
-
[vars$
|
|
10554
|
-
[vars$
|
|
10555
|
-
[vars$
|
|
10556
|
-
[vars$
|
|
10557
|
-
[vars$
|
|
10558
|
-
[vars$
|
|
10828
|
+
[vars$3.hostDirection]: globalRefs$1.direction,
|
|
10829
|
+
[vars$3.labelTextWidth]: '150px',
|
|
10830
|
+
[vars$3.valueTextWidth]: '200px',
|
|
10831
|
+
[vars$3.badgeMaxWidth]: '85px',
|
|
10832
|
+
[vars$3.itemsGap]: '16px',
|
|
10833
|
+
[vars$3.hostMinWidth]: '530px',
|
|
10559
10834
|
_fullWidth: {
|
|
10560
|
-
[vars$
|
|
10835
|
+
[vars$3.hostWidth]: '100%',
|
|
10561
10836
|
},
|
|
10562
10837
|
};
|
|
10563
10838
|
|
|
10564
10839
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
|
10565
10840
|
__proto__: null,
|
|
10566
10841
|
default: userAttribute,
|
|
10842
|
+
vars: vars$3
|
|
10843
|
+
});
|
|
10844
|
+
|
|
10845
|
+
const componentName$3 = getComponentName('saml-group-mappings-internal');
|
|
10846
|
+
|
|
10847
|
+
createBaseInputClass({ componentName: componentName$3, baseSelector: '' });
|
|
10848
|
+
|
|
10849
|
+
const componentName$2 = getComponentName('saml-group-mappings');
|
|
10850
|
+
|
|
10851
|
+
const customMixin = (superclass) =>
|
|
10852
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
|
10853
|
+
init() {
|
|
10854
|
+
super.init?.();
|
|
10855
|
+
|
|
10856
|
+
const template = document.createElement('template');
|
|
10857
|
+
|
|
10858
|
+
template.innerHTML = `
|
|
10859
|
+
<${componentName$3}
|
|
10860
|
+
tabindex="-1"
|
|
10861
|
+
></${componentName$3}>
|
|
10862
|
+
`;
|
|
10863
|
+
|
|
10864
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10865
|
+
|
|
10866
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
|
10867
|
+
|
|
10868
|
+
forwardAttrs(this, this.inputElement, {
|
|
10869
|
+
includeAttrs: [
|
|
10870
|
+
'size',
|
|
10871
|
+
'full-width',
|
|
10872
|
+
'label-group',
|
|
10873
|
+
'label-value',
|
|
10874
|
+
'label-attr',
|
|
10875
|
+
'button-label',
|
|
10876
|
+
'separator',
|
|
10877
|
+
'options',
|
|
10878
|
+
'readonly',
|
|
10879
|
+
'disabled',
|
|
10880
|
+
],
|
|
10881
|
+
});
|
|
10882
|
+
|
|
10883
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10884
|
+
}
|
|
10885
|
+
};
|
|
10886
|
+
|
|
10887
|
+
const { host, groupInput } = {
|
|
10888
|
+
host: { selector: () => ':host' },
|
|
10889
|
+
groupInput: { selector: 'descope-text-field' },
|
|
10890
|
+
};
|
|
10891
|
+
|
|
10892
|
+
const SamlGroupMappingsClass = compose(
|
|
10893
|
+
createStyleMixin({
|
|
10894
|
+
mappings: {
|
|
10895
|
+
hostWidth: { ...host, property: 'width' },
|
|
10896
|
+
hostDirection: { ...host, property: 'direction' },
|
|
10897
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
|
10898
|
+
},
|
|
10899
|
+
}),
|
|
10900
|
+
draggableMixin,
|
|
10901
|
+
composedProxyInputMixin({
|
|
10902
|
+
proxyProps: ['value', 'selectionStart'],
|
|
10903
|
+
inputEvent: 'input',
|
|
10904
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
|
10905
|
+
proxyParentValidation: true,
|
|
10906
|
+
}),
|
|
10907
|
+
componentNameValidationMixin,
|
|
10908
|
+
customMixin
|
|
10909
|
+
)(
|
|
10910
|
+
createProxy({
|
|
10911
|
+
slots: [],
|
|
10912
|
+
wrappedEleName: 'vaadin-custom-field',
|
|
10913
|
+
style: () => `
|
|
10914
|
+
:host {
|
|
10915
|
+
display: inline-flex;
|
|
10916
|
+
max-width: 100%;
|
|
10917
|
+
direction: ltr;
|
|
10918
|
+
}
|
|
10919
|
+
|
|
10920
|
+
vaadin-custom-field {
|
|
10921
|
+
line-height: unset;
|
|
10922
|
+
width: 100%;
|
|
10923
|
+
}
|
|
10924
|
+
|
|
10925
|
+
descope-text-field {
|
|
10926
|
+
width: auto;
|
|
10927
|
+
}
|
|
10928
|
+
|
|
10929
|
+
descope-mappings-field {
|
|
10930
|
+
display: block;
|
|
10931
|
+
}
|
|
10932
|
+
`,
|
|
10933
|
+
excludeAttrsSync: [
|
|
10934
|
+
'tabindex',
|
|
10935
|
+
'label-group',
|
|
10936
|
+
'label-value',
|
|
10937
|
+
'label-attr',
|
|
10938
|
+
'button-label',
|
|
10939
|
+
'separator',
|
|
10940
|
+
'options',
|
|
10941
|
+
'error-message',
|
|
10942
|
+
],
|
|
10943
|
+
componentName: componentName$2,
|
|
10944
|
+
})
|
|
10945
|
+
);
|
|
10946
|
+
|
|
10947
|
+
const vars$2 = SamlGroupMappingsClass.cssVarList;
|
|
10948
|
+
|
|
10949
|
+
const samlGroupMappings = {
|
|
10950
|
+
[vars$2.hostWidth]: refs.width,
|
|
10951
|
+
[vars$2.hostDirection]: refs.direction,
|
|
10952
|
+
[vars$2.groupNameInputMarginBottom]: '1em',
|
|
10953
|
+
};
|
|
10954
|
+
|
|
10955
|
+
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
|
10956
|
+
__proto__: null,
|
|
10957
|
+
default: samlGroupMappings,
|
|
10958
|
+
samlGroupMappings: samlGroupMappings,
|
|
10959
|
+
vars: vars$2
|
|
10960
|
+
});
|
|
10961
|
+
|
|
10962
|
+
const globalRefs = getThemeRefs(globals);
|
|
10963
|
+
const vars$1 = PolicyValidationClass.cssVarList;
|
|
10964
|
+
|
|
10965
|
+
const policyValidation = {
|
|
10966
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
|
10967
|
+
[vars$1.fontSize]: refs.labelFontSize,
|
|
10968
|
+
[vars$1.textColor]: refs.labelTextColor,
|
|
10969
|
+
[vars$1.borderWidth]: refs.borderWidth,
|
|
10970
|
+
[vars$1.borderStyle]: refs.borderStyle,
|
|
10971
|
+
[vars$1.borderColor]: refs.borderColor,
|
|
10972
|
+
[vars$1.borderRadius]: globalRefs.radius.sm,
|
|
10973
|
+
[vars$1.backgroundColor]: 'none',
|
|
10974
|
+
[vars$1.padding]: '0px',
|
|
10975
|
+
[vars$1.labelMargin]: globalRefs.spacing.sm,
|
|
10976
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.lg,
|
|
10977
|
+
[vars$1.itemSymbolDefault]: "'\\2022'", // "•"
|
|
10978
|
+
[vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
|
|
10979
|
+
[vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
|
|
10980
|
+
[vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
|
|
10981
|
+
[vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
|
|
10982
|
+
};
|
|
10983
|
+
|
|
10984
|
+
var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
|
10985
|
+
__proto__: null,
|
|
10986
|
+
default: policyValidation,
|
|
10567
10987
|
vars: vars$1
|
|
10568
10988
|
});
|
|
10569
10989
|
|
|
@@ -10604,6 +11024,8 @@ const components = {
|
|
|
10604
11024
|
avatar: avatar$1,
|
|
10605
11025
|
mappingsField: mappingsField$1,
|
|
10606
11026
|
userAttribute: userAttribute$1,
|
|
11027
|
+
samlGroupMappings: samlGroupMappings$1,
|
|
11028
|
+
policyValidation: policyValidation$1,
|
|
10607
11029
|
};
|
|
10608
11030
|
|
|
10609
11031
|
const theme = Object.keys(components).reduce(
|
|
@@ -10616,7 +11038,7 @@ const vars = Object.keys(components).reduce(
|
|
|
10616
11038
|
);
|
|
10617
11039
|
|
|
10618
11040
|
const defaultTheme = { globals, components: theme };
|
|
10619
|
-
const themeVars = { globals: vars$
|
|
11041
|
+
const themeVars = { globals: vars$D, components: vars };
|
|
10620
11042
|
|
|
10621
11043
|
const colors = {
|
|
10622
11044
|
surface: {
|
|
@@ -10945,7 +11367,9 @@ exports.PasscodeClass = PasscodeClass;
|
|
|
10945
11367
|
exports.PasswordClass = PasswordClass;
|
|
10946
11368
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
10947
11369
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
11370
|
+
exports.PolicyValidationClass = PolicyValidationClass;
|
|
10948
11371
|
exports.RecaptchaClass = RecaptchaClass;
|
|
11372
|
+
exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
|
|
10949
11373
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
10950
11374
|
exports.TextAreaClass = TextAreaClass;
|
|
10951
11375
|
exports.TextClass = TextClass;
|