@descope/web-components-ui 1.0.289 → 1.0.291
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1301 -897
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1600 -1068
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/2106.js +1 -1
- package/dist/umd/7911.js +73 -0
- package/dist/umd/7911.js.LICENSE.txt +17 -0
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-badge-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-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 +4 -2
- package/src/components/descope-avatar/AvatarClass.js +7 -5
- package/src/components/descope-badge/BadgeClass.js +3 -0
- package/src/components/descope-text/TextClass.js +1 -1
- package/src/components/descope-user-attribute/UserAttributeClass.js +228 -0
- package/src/components/descope-user-attribute/delete.svg +3 -0
- package/src/components/descope-user-attribute/edit.svg +3 -0
- package/src/components/descope-user-attribute/index.js +9 -0
- package/src/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/helpers/themeHelpers/componentsThemeManager.js +4 -0
- package/src/index.cjs.js +2 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +2 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/avatar.js +4 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/samlGroupMappings.js +13 -0
- package/src/theme/components/userAttribute.js +20 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -192,6 +192,10 @@ class ComponentsThemeManager {
|
|
|
192
192
|
this.#themes = themes;
|
|
193
193
|
this.#notify();
|
|
194
194
|
}
|
|
195
|
+
|
|
196
|
+
get hasThemes() {
|
|
197
|
+
return !!Object.keys(this.#themes).length;
|
|
198
|
+
}
|
|
195
199
|
}
|
|
196
200
|
|
|
197
201
|
const componentsThemeManager = new ComponentsThemeManager();
|
|
@@ -626,7 +630,7 @@ const globals = {
|
|
|
626
630
|
fonts,
|
|
627
631
|
direction,
|
|
628
632
|
};
|
|
629
|
-
const vars$
|
|
633
|
+
const vars$C = getThemeVars(globals);
|
|
630
634
|
|
|
631
635
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
|
632
636
|
|
|
@@ -2189,6 +2193,7 @@ const proxyInputMixin =
|
|
|
2189
2193
|
// allows us to set the event that should trigger validation
|
|
2190
2194
|
// it can be either a string or an array of strings (for multiple events)
|
|
2191
2195
|
inputEvent = 'input',
|
|
2196
|
+
triggerValidationEvents = [],
|
|
2192
2197
|
// Proxies all validations from the parent component to the input element
|
|
2193
2198
|
proxyParentValidation = false,
|
|
2194
2199
|
}) =>
|
|
@@ -2277,6 +2282,12 @@ const proxyInputMixin =
|
|
|
2277
2282
|
}
|
|
2278
2283
|
};
|
|
2279
2284
|
|
|
2285
|
+
triggerValidationEvents.forEach((e) => {
|
|
2286
|
+
this.baseElement?.addEventListener(e, () => {
|
|
2287
|
+
this.inputElement?.setCustomValidity('');
|
|
2288
|
+
});
|
|
2289
|
+
});
|
|
2290
|
+
|
|
2280
2291
|
// on some cases the base element is not ready so the inputElement is empty
|
|
2281
2292
|
// we are deferring this section to make sure the base element is ready
|
|
2282
2293
|
setTimeout(() => {
|
|
@@ -2565,7 +2576,7 @@ const clickableMixin = (superclass) =>
|
|
|
2565
2576
|
}
|
|
2566
2577
|
};
|
|
2567
2578
|
|
|
2568
|
-
const componentName$
|
|
2579
|
+
const componentName$L = getComponentName('button');
|
|
2569
2580
|
|
|
2570
2581
|
const resetStyles = `
|
|
2571
2582
|
:host {
|
|
@@ -2603,7 +2614,7 @@ const iconStyles = `
|
|
|
2603
2614
|
|
|
2604
2615
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
2605
2616
|
|
|
2606
|
-
const { host: host$
|
|
2617
|
+
const { host: host$l, label: label$a } = {
|
|
2607
2618
|
host: { selector: () => ':host' },
|
|
2608
2619
|
label: { selector: '::part(label)' },
|
|
2609
2620
|
};
|
|
@@ -2615,7 +2626,7 @@ const ButtonClass = compose(
|
|
|
2615
2626
|
mappings: {
|
|
2616
2627
|
hostWidth: { property: 'width' },
|
|
2617
2628
|
hostHeight: { property: 'height' },
|
|
2618
|
-
hostDirection: { ...host$
|
|
2629
|
+
hostDirection: { ...host$l, property: 'direction' },
|
|
2619
2630
|
fontSize: {},
|
|
2620
2631
|
fontFamily: {},
|
|
2621
2632
|
|
|
@@ -2667,7 +2678,7 @@ const ButtonClass = compose(
|
|
|
2667
2678
|
}
|
|
2668
2679
|
`,
|
|
2669
2680
|
excludeAttrsSync: ['tabindex'],
|
|
2670
|
-
componentName: componentName$
|
|
2681
|
+
componentName: componentName$L,
|
|
2671
2682
|
})
|
|
2672
2683
|
);
|
|
2673
2684
|
|
|
@@ -2704,31 +2715,31 @@ loadingIndicatorStyles = `
|
|
|
2704
2715
|
}
|
|
2705
2716
|
`;
|
|
2706
2717
|
|
|
2707
|
-
const globalRefs$
|
|
2718
|
+
const globalRefs$k = getThemeRefs(globals);
|
|
2708
2719
|
const compVars$5 = ButtonClass.cssVarList;
|
|
2709
2720
|
|
|
2710
2721
|
const mode = {
|
|
2711
|
-
primary: globalRefs$
|
|
2712
|
-
secondary: globalRefs$
|
|
2713
|
-
success: globalRefs$
|
|
2714
|
-
error: globalRefs$
|
|
2715
|
-
surface: globalRefs$
|
|
2722
|
+
primary: globalRefs$k.colors.primary,
|
|
2723
|
+
secondary: globalRefs$k.colors.secondary,
|
|
2724
|
+
success: globalRefs$k.colors.success,
|
|
2725
|
+
error: globalRefs$k.colors.error,
|
|
2726
|
+
surface: globalRefs$k.colors.surface,
|
|
2716
2727
|
};
|
|
2717
2728
|
|
|
2718
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
2729
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
|
|
2719
2730
|
|
|
2720
2731
|
const button = {
|
|
2721
2732
|
...helperTheme$3,
|
|
2722
2733
|
|
|
2723
|
-
[compVars$5.fontFamily]: globalRefs$
|
|
2734
|
+
[compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
|
|
2724
2735
|
|
|
2725
2736
|
[compVars$5.cursor]: 'pointer',
|
|
2726
2737
|
[compVars$5.hostHeight]: '3em',
|
|
2727
2738
|
[compVars$5.hostWidth]: 'auto',
|
|
2728
|
-
[compVars$5.hostDirection]: globalRefs$
|
|
2739
|
+
[compVars$5.hostDirection]: globalRefs$k.direction,
|
|
2729
2740
|
|
|
2730
|
-
[compVars$5.borderRadius]: globalRefs$
|
|
2731
|
-
[compVars$5.borderWidth]: globalRefs$
|
|
2741
|
+
[compVars$5.borderRadius]: globalRefs$k.radius.sm,
|
|
2742
|
+
[compVars$5.borderWidth]: globalRefs$k.border.xs,
|
|
2732
2743
|
[compVars$5.borderStyle]: 'solid',
|
|
2733
2744
|
[compVars$5.borderColor]: 'transparent',
|
|
2734
2745
|
|
|
@@ -2771,10 +2782,10 @@ const button = {
|
|
|
2771
2782
|
},
|
|
2772
2783
|
|
|
2773
2784
|
_disabled: {
|
|
2774
|
-
[helperVars$3.main]: globalRefs$
|
|
2775
|
-
[helperVars$3.dark]: globalRefs$
|
|
2776
|
-
[helperVars$3.light]: globalRefs$
|
|
2777
|
-
[helperVars$3.contrast]: globalRefs$
|
|
2785
|
+
[helperVars$3.main]: globalRefs$k.colors.surface.light,
|
|
2786
|
+
[helperVars$3.dark]: globalRefs$k.colors.surface.dark,
|
|
2787
|
+
[helperVars$3.light]: globalRefs$k.colors.surface.light,
|
|
2788
|
+
[helperVars$3.contrast]: globalRefs$k.colors.surface.main,
|
|
2778
2789
|
},
|
|
2779
2790
|
|
|
2780
2791
|
variant: {
|
|
@@ -2822,7 +2833,7 @@ const button = {
|
|
|
2822
2833
|
},
|
|
2823
2834
|
};
|
|
2824
2835
|
|
|
2825
|
-
const vars$
|
|
2836
|
+
const vars$B = {
|
|
2826
2837
|
...compVars$5,
|
|
2827
2838
|
...helperVars$3,
|
|
2828
2839
|
};
|
|
@@ -2830,11 +2841,11 @@ const vars$z = {
|
|
|
2830
2841
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
2831
2842
|
__proto__: null,
|
|
2832
2843
|
default: button,
|
|
2833
|
-
vars: vars$
|
|
2844
|
+
vars: vars$B
|
|
2834
2845
|
});
|
|
2835
2846
|
|
|
2836
2847
|
const {
|
|
2837
|
-
host: host$
|
|
2848
|
+
host: host$k,
|
|
2838
2849
|
label: label$9,
|
|
2839
2850
|
placeholder: placeholder$3,
|
|
2840
2851
|
requiredIndicator: requiredIndicator$b,
|
|
@@ -2859,12 +2870,12 @@ const {
|
|
|
2859
2870
|
|
|
2860
2871
|
var textFieldMappings = {
|
|
2861
2872
|
// we apply font-size also on the host so we can set its width with em
|
|
2862
|
-
fontSize: [{}, host$
|
|
2873
|
+
fontSize: [{}, host$k],
|
|
2863
2874
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
|
2864
2875
|
|
|
2865
|
-
hostWidth: { ...host$
|
|
2866
|
-
hostMinWidth: { ...host$
|
|
2867
|
-
hostDirection: { ...host$
|
|
2876
|
+
hostWidth: { ...host$k, property: 'width' },
|
|
2877
|
+
hostMinWidth: { ...host$k, property: 'min-width' },
|
|
2878
|
+
hostDirection: { ...host$k, property: 'direction' },
|
|
2868
2879
|
|
|
2869
2880
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
|
2870
2881
|
|
|
@@ -3038,11 +3049,11 @@ const resetInputLabelPosition = (name) => `
|
|
|
3038
3049
|
}
|
|
3039
3050
|
`;
|
|
3040
3051
|
|
|
3041
|
-
const componentName$
|
|
3052
|
+
const componentName$K = getComponentName('text-field');
|
|
3042
3053
|
|
|
3043
3054
|
const observedAttrs = ['type'];
|
|
3044
3055
|
|
|
3045
|
-
const customMixin$
|
|
3056
|
+
const customMixin$8 = (superclass) =>
|
|
3046
3057
|
class TextFieldClass extends superclass {
|
|
3047
3058
|
static get observedAttributes() {
|
|
3048
3059
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -3069,7 +3080,7 @@ const TextFieldClass = compose(
|
|
|
3069
3080
|
draggableMixin,
|
|
3070
3081
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3071
3082
|
componentNameValidationMixin,
|
|
3072
|
-
customMixin$
|
|
3083
|
+
customMixin$8
|
|
3073
3084
|
)(
|
|
3074
3085
|
createProxy({
|
|
3075
3086
|
slots: ['prefix', 'suffix'],
|
|
@@ -3088,27 +3099,27 @@ const TextFieldClass = compose(
|
|
|
3088
3099
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
3089
3100
|
`,
|
|
3090
3101
|
excludeAttrsSync: ['tabindex'],
|
|
3091
|
-
componentName: componentName$
|
|
3102
|
+
componentName: componentName$K,
|
|
3092
3103
|
})
|
|
3093
3104
|
);
|
|
3094
3105
|
|
|
3095
|
-
const componentName$
|
|
3096
|
-
const globalRefs$
|
|
3106
|
+
const componentName$J = getComponentName('input-wrapper');
|
|
3107
|
+
const globalRefs$j = getThemeRefs(globals);
|
|
3097
3108
|
|
|
3098
|
-
const [theme$1, refs, vars$
|
|
3109
|
+
const [theme$1, refs, vars$A] = createHelperVars(
|
|
3099
3110
|
{
|
|
3100
|
-
labelTextColor: globalRefs$
|
|
3101
|
-
valueTextColor: globalRefs$
|
|
3102
|
-
placeholderTextColor: globalRefs$
|
|
3111
|
+
labelTextColor: globalRefs$j.colors.surface.dark,
|
|
3112
|
+
valueTextColor: globalRefs$j.colors.surface.contrast,
|
|
3113
|
+
placeholderTextColor: globalRefs$j.colors.surface.dark,
|
|
3103
3114
|
requiredIndicator: "'*'",
|
|
3104
|
-
errorMessageTextColor: globalRefs$
|
|
3105
|
-
helperTextColor: globalRefs$
|
|
3115
|
+
errorMessageTextColor: globalRefs$j.colors.error.main,
|
|
3116
|
+
helperTextColor: globalRefs$j.colors.surface.dark,
|
|
3106
3117
|
|
|
3107
|
-
borderWidth: globalRefs$
|
|
3108
|
-
borderRadius: globalRefs$
|
|
3118
|
+
borderWidth: globalRefs$j.border.xs,
|
|
3119
|
+
borderRadius: globalRefs$j.radius.xs,
|
|
3109
3120
|
borderColor: 'transparent',
|
|
3110
3121
|
|
|
3111
|
-
outlineWidth: globalRefs$
|
|
3122
|
+
outlineWidth: globalRefs$j.border.sm,
|
|
3112
3123
|
outlineStyle: 'solid',
|
|
3113
3124
|
outlineColor: 'transparent',
|
|
3114
3125
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
|
@@ -3119,11 +3130,11 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
|
3119
3130
|
horizontalPadding: '0.5em',
|
|
3120
3131
|
verticalPadding: '0.5em',
|
|
3121
3132
|
|
|
3122
|
-
backgroundColor: globalRefs$
|
|
3133
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
|
3123
3134
|
|
|
3124
|
-
fontFamily: globalRefs$
|
|
3135
|
+
fontFamily: globalRefs$j.fonts.font1.family,
|
|
3125
3136
|
|
|
3126
|
-
direction: globalRefs$
|
|
3137
|
+
direction: globalRefs$j.direction,
|
|
3127
3138
|
|
|
3128
3139
|
overlayOpacity: '0.3',
|
|
3129
3140
|
|
|
@@ -3139,69 +3150,69 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
|
3139
3150
|
},
|
|
3140
3151
|
|
|
3141
3152
|
_focused: {
|
|
3142
|
-
outlineColor: globalRefs$
|
|
3153
|
+
outlineColor: globalRefs$j.colors.surface.light,
|
|
3143
3154
|
_invalid: {
|
|
3144
|
-
outlineColor: globalRefs$
|
|
3155
|
+
outlineColor: globalRefs$j.colors.error.main,
|
|
3145
3156
|
},
|
|
3146
3157
|
},
|
|
3147
3158
|
|
|
3148
3159
|
_bordered: {
|
|
3149
|
-
outlineWidth: globalRefs$
|
|
3150
|
-
borderColor: globalRefs$
|
|
3160
|
+
outlineWidth: globalRefs$j.border.xs,
|
|
3161
|
+
borderColor: globalRefs$j.colors.surface.light,
|
|
3151
3162
|
borderStyle: 'solid',
|
|
3152
3163
|
_invalid: {
|
|
3153
|
-
borderColor: globalRefs$
|
|
3164
|
+
borderColor: globalRefs$j.colors.error.main,
|
|
3154
3165
|
},
|
|
3155
3166
|
},
|
|
3156
3167
|
|
|
3157
3168
|
_disabled: {
|
|
3158
|
-
labelTextColor: globalRefs$
|
|
3159
|
-
borderColor: globalRefs$
|
|
3160
|
-
valueTextColor: globalRefs$
|
|
3161
|
-
placeholderTextColor: globalRefs$
|
|
3162
|
-
helperTextColor: globalRefs$
|
|
3163
|
-
backgroundColor: globalRefs$
|
|
3169
|
+
labelTextColor: globalRefs$j.colors.surface.light,
|
|
3170
|
+
borderColor: globalRefs$j.colors.surface.light,
|
|
3171
|
+
valueTextColor: globalRefs$j.colors.surface.light,
|
|
3172
|
+
placeholderTextColor: globalRefs$j.colors.surface.light,
|
|
3173
|
+
helperTextColor: globalRefs$j.colors.surface.light,
|
|
3174
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
|
3164
3175
|
},
|
|
3165
3176
|
},
|
|
3166
|
-
componentName$
|
|
3177
|
+
componentName$J
|
|
3167
3178
|
);
|
|
3168
3179
|
|
|
3169
3180
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3170
3181
|
__proto__: null,
|
|
3171
3182
|
default: theme$1,
|
|
3172
3183
|
refs: refs,
|
|
3173
|
-
vars: vars$
|
|
3184
|
+
vars: vars$A
|
|
3174
3185
|
});
|
|
3175
3186
|
|
|
3176
|
-
const vars$
|
|
3187
|
+
const vars$z = TextFieldClass.cssVarList;
|
|
3177
3188
|
|
|
3178
3189
|
const textField = {
|
|
3179
|
-
[vars$
|
|
3180
|
-
[vars$
|
|
3181
|
-
[vars$
|
|
3182
|
-
[vars$
|
|
3183
|
-
[vars$
|
|
3184
|
-
[vars$
|
|
3185
|
-
[vars$
|
|
3186
|
-
[vars$
|
|
3187
|
-
[vars$
|
|
3188
|
-
[vars$
|
|
3189
|
-
[vars$
|
|
3190
|
-
[vars$
|
|
3191
|
-
[vars$
|
|
3192
|
-
[vars$
|
|
3193
|
-
[vars$
|
|
3194
|
-
[vars$
|
|
3195
|
-
[vars$
|
|
3196
|
-
[vars$
|
|
3197
|
-
[vars$
|
|
3198
|
-
[vars$
|
|
3199
|
-
[vars$
|
|
3200
|
-
[vars$
|
|
3190
|
+
[vars$z.hostWidth]: refs.width,
|
|
3191
|
+
[vars$z.hostMinWidth]: refs.minWidth,
|
|
3192
|
+
[vars$z.hostDirection]: refs.direction,
|
|
3193
|
+
[vars$z.fontSize]: refs.fontSize,
|
|
3194
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
|
3195
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
|
3196
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3197
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3198
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
|
3199
|
+
[vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3200
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
|
3201
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
|
3202
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
|
3203
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
|
3204
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
|
3205
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
|
3206
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
|
3207
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
|
3208
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
|
3209
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
|
3210
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3211
|
+
[vars$z.helperTextColor]: refs.helperTextColor,
|
|
3201
3212
|
textAlign: {
|
|
3202
|
-
right: { [vars$
|
|
3203
|
-
left: { [vars$
|
|
3204
|
-
center: { [vars$
|
|
3213
|
+
right: { [vars$z.inputTextAlign]: 'right' },
|
|
3214
|
+
left: { [vars$z.inputTextAlign]: 'left' },
|
|
3215
|
+
center: { [vars$z.inputTextAlign]: 'center' },
|
|
3205
3216
|
},
|
|
3206
3217
|
};
|
|
3207
3218
|
|
|
@@ -3209,7 +3220,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
|
3209
3220
|
__proto__: null,
|
|
3210
3221
|
default: textField,
|
|
3211
3222
|
textField: textField,
|
|
3212
|
-
vars: vars$
|
|
3223
|
+
vars: vars$z
|
|
3213
3224
|
});
|
|
3214
3225
|
|
|
3215
3226
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -3246,10 +3257,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
3246
3257
|
}
|
|
3247
3258
|
};
|
|
3248
3259
|
|
|
3249
|
-
const componentName$
|
|
3260
|
+
const componentName$I = getComponentName('password');
|
|
3250
3261
|
|
|
3251
3262
|
const {
|
|
3252
|
-
host: host$
|
|
3263
|
+
host: host$j,
|
|
3253
3264
|
inputField: inputField$5,
|
|
3254
3265
|
inputElement: inputElement$2,
|
|
3255
3266
|
inputElementPlaceholder,
|
|
@@ -3275,10 +3286,10 @@ const {
|
|
|
3275
3286
|
const PasswordClass = compose(
|
|
3276
3287
|
createStyleMixin({
|
|
3277
3288
|
mappings: {
|
|
3278
|
-
hostWidth: { ...host$
|
|
3279
|
-
hostMinWidth: { ...host$
|
|
3280
|
-
hostDirection: { ...host$
|
|
3281
|
-
fontSize: [{}, host$
|
|
3289
|
+
hostWidth: { ...host$j, property: 'width' },
|
|
3290
|
+
hostMinWidth: { ...host$j, property: 'min-width' },
|
|
3291
|
+
hostDirection: { ...host$j, property: 'direction' },
|
|
3292
|
+
fontSize: [{}, host$j],
|
|
3282
3293
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
|
3283
3294
|
inputHeight: { ...inputField$5, property: 'height' },
|
|
3284
3295
|
inputHorizontalPadding: [
|
|
@@ -3375,46 +3386,46 @@ const PasswordClass = compose(
|
|
|
3375
3386
|
}
|
|
3376
3387
|
`,
|
|
3377
3388
|
excludeAttrsSync: ['tabindex'],
|
|
3378
|
-
componentName: componentName$
|
|
3389
|
+
componentName: componentName$I,
|
|
3379
3390
|
})
|
|
3380
3391
|
);
|
|
3381
3392
|
|
|
3382
|
-
const globalRefs$
|
|
3383
|
-
const vars$
|
|
3393
|
+
const globalRefs$i = getThemeRefs(globals);
|
|
3394
|
+
const vars$y = PasswordClass.cssVarList;
|
|
3384
3395
|
|
|
3385
3396
|
const password = {
|
|
3386
|
-
[vars$
|
|
3387
|
-
[vars$
|
|
3388
|
-
[vars$
|
|
3389
|
-
[vars$
|
|
3390
|
-
[vars$
|
|
3391
|
-
[vars$
|
|
3392
|
-
[vars$
|
|
3393
|
-
[vars$
|
|
3394
|
-
[vars$
|
|
3395
|
-
[vars$
|
|
3396
|
-
[vars$
|
|
3397
|
-
[vars$
|
|
3398
|
-
[vars$
|
|
3399
|
-
[vars$
|
|
3400
|
-
[vars$
|
|
3401
|
-
[vars$
|
|
3402
|
-
[vars$
|
|
3403
|
-
[vars$
|
|
3404
|
-
[vars$
|
|
3405
|
-
[vars$
|
|
3406
|
-
[vars$
|
|
3407
|
-
[vars$
|
|
3408
|
-
[vars$
|
|
3397
|
+
[vars$y.hostWidth]: refs.width,
|
|
3398
|
+
[vars$y.hostDirection]: refs.direction,
|
|
3399
|
+
[vars$y.fontSize]: refs.fontSize,
|
|
3400
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
|
3401
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
|
3402
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3403
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3404
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
|
3405
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
|
3406
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3407
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
|
3408
|
+
[vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3409
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
|
3410
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
|
3411
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
|
3412
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
|
3413
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
|
3414
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
|
3415
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
|
3416
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
|
3417
|
+
[vars$y.revealButtonOffset]: globalRefs$i.spacing.md,
|
|
3418
|
+
[vars$y.revealButtonSize]: refs.toggleButtonSize,
|
|
3419
|
+
[vars$y.revealButtonColor]: refs.placeholderTextColor,
|
|
3409
3420
|
};
|
|
3410
3421
|
|
|
3411
3422
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
3412
3423
|
__proto__: null,
|
|
3413
3424
|
default: password,
|
|
3414
|
-
vars: vars$
|
|
3425
|
+
vars: vars$y
|
|
3415
3426
|
});
|
|
3416
3427
|
|
|
3417
|
-
const componentName$
|
|
3428
|
+
const componentName$H = getComponentName('number-field');
|
|
3418
3429
|
|
|
3419
3430
|
const NumberFieldClass = compose(
|
|
3420
3431
|
createStyleMixin({
|
|
@@ -3440,45 +3451,45 @@ const NumberFieldClass = compose(
|
|
|
3440
3451
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
3441
3452
|
`,
|
|
3442
3453
|
excludeAttrsSync: ['tabindex'],
|
|
3443
|
-
componentName: componentName$
|
|
3454
|
+
componentName: componentName$H,
|
|
3444
3455
|
})
|
|
3445
3456
|
);
|
|
3446
3457
|
|
|
3447
|
-
const vars$
|
|
3458
|
+
const vars$x = NumberFieldClass.cssVarList;
|
|
3448
3459
|
|
|
3449
3460
|
const numberField = {
|
|
3450
|
-
[vars$
|
|
3451
|
-
[vars$
|
|
3452
|
-
[vars$
|
|
3453
|
-
[vars$
|
|
3454
|
-
[vars$
|
|
3455
|
-
[vars$
|
|
3456
|
-
[vars$
|
|
3457
|
-
[vars$
|
|
3458
|
-
[vars$
|
|
3459
|
-
[vars$
|
|
3460
|
-
[vars$
|
|
3461
|
-
[vars$
|
|
3462
|
-
[vars$
|
|
3463
|
-
[vars$
|
|
3464
|
-
[vars$
|
|
3465
|
-
[vars$
|
|
3466
|
-
[vars$
|
|
3467
|
-
[vars$
|
|
3468
|
-
[vars$
|
|
3469
|
-
[vars$
|
|
3470
|
-
[vars$
|
|
3461
|
+
[vars$x.hostWidth]: refs.width,
|
|
3462
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
|
3463
|
+
[vars$x.hostDirection]: refs.direction,
|
|
3464
|
+
[vars$x.fontSize]: refs.fontSize,
|
|
3465
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
|
3466
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
|
3467
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3468
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
|
3469
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3470
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
|
3471
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
|
3472
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
|
3473
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
|
3474
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
|
3475
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
|
3476
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
|
3477
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
|
3478
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
|
3479
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3480
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3481
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
|
3471
3482
|
};
|
|
3472
3483
|
|
|
3473
3484
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
3474
3485
|
__proto__: null,
|
|
3475
3486
|
default: numberField,
|
|
3476
|
-
vars: vars$
|
|
3487
|
+
vars: vars$x
|
|
3477
3488
|
});
|
|
3478
3489
|
|
|
3479
|
-
const componentName$
|
|
3490
|
+
const componentName$G = getComponentName('email-field');
|
|
3480
3491
|
|
|
3481
|
-
const customMixin$
|
|
3492
|
+
const customMixin$7 = (superclass) =>
|
|
3482
3493
|
class EmailFieldMixinClass extends superclass {
|
|
3483
3494
|
init() {
|
|
3484
3495
|
super.init?.();
|
|
@@ -3492,7 +3503,7 @@ const EmailFieldClass = compose(
|
|
|
3492
3503
|
draggableMixin,
|
|
3493
3504
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3494
3505
|
componentNameValidationMixin,
|
|
3495
|
-
customMixin$
|
|
3506
|
+
customMixin$7
|
|
3496
3507
|
)(
|
|
3497
3508
|
createProxy({
|
|
3498
3509
|
slots: ['', 'suffix'],
|
|
@@ -3511,46 +3522,46 @@ const EmailFieldClass = compose(
|
|
|
3511
3522
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
3512
3523
|
`,
|
|
3513
3524
|
excludeAttrsSync: ['tabindex'],
|
|
3514
|
-
componentName: componentName$
|
|
3525
|
+
componentName: componentName$G,
|
|
3515
3526
|
})
|
|
3516
3527
|
);
|
|
3517
3528
|
|
|
3518
|
-
const vars$
|
|
3529
|
+
const vars$w = EmailFieldClass.cssVarList;
|
|
3519
3530
|
|
|
3520
3531
|
const emailField = {
|
|
3521
|
-
[vars$
|
|
3522
|
-
[vars$
|
|
3523
|
-
[vars$
|
|
3524
|
-
[vars$
|
|
3525
|
-
[vars$
|
|
3526
|
-
[vars$
|
|
3527
|
-
[vars$
|
|
3528
|
-
[vars$
|
|
3529
|
-
[vars$
|
|
3530
|
-
[vars$
|
|
3531
|
-
[vars$
|
|
3532
|
-
[vars$
|
|
3533
|
-
[vars$
|
|
3534
|
-
[vars$
|
|
3535
|
-
[vars$
|
|
3536
|
-
[vars$
|
|
3537
|
-
[vars$
|
|
3538
|
-
[vars$
|
|
3539
|
-
[vars$
|
|
3540
|
-
[vars$
|
|
3541
|
-
[vars$
|
|
3532
|
+
[vars$w.hostWidth]: refs.width,
|
|
3533
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
|
3534
|
+
[vars$w.hostDirection]: refs.direction,
|
|
3535
|
+
[vars$w.fontSize]: refs.fontSize,
|
|
3536
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
|
3537
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
|
3538
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3539
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
|
3540
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3541
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3542
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
|
3543
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
|
3544
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
|
3545
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
|
3546
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
|
3547
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
|
3548
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
|
3549
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
|
3550
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
|
3551
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3552
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
|
3542
3553
|
};
|
|
3543
3554
|
|
|
3544
3555
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
3545
3556
|
__proto__: null,
|
|
3546
3557
|
default: emailField,
|
|
3547
|
-
vars: vars$
|
|
3558
|
+
vars: vars$w
|
|
3548
3559
|
});
|
|
3549
3560
|
|
|
3550
|
-
const componentName$
|
|
3561
|
+
const componentName$F = getComponentName('text-area');
|
|
3551
3562
|
|
|
3552
3563
|
const {
|
|
3553
|
-
host: host$
|
|
3564
|
+
host: host$i,
|
|
3554
3565
|
label: label$7,
|
|
3555
3566
|
placeholder: placeholder$2,
|
|
3556
3567
|
inputField: inputField$4,
|
|
@@ -3572,10 +3583,10 @@ const {
|
|
|
3572
3583
|
const TextAreaClass = compose(
|
|
3573
3584
|
createStyleMixin({
|
|
3574
3585
|
mappings: {
|
|
3575
|
-
hostWidth: { ...host$
|
|
3576
|
-
hostMinWidth: { ...host$
|
|
3577
|
-
hostDirection: { ...host$
|
|
3578
|
-
fontSize: [host$
|
|
3586
|
+
hostWidth: { ...host$i, property: 'width' },
|
|
3587
|
+
hostMinWidth: { ...host$i, property: 'min-width' },
|
|
3588
|
+
hostDirection: { ...host$i, property: 'direction' },
|
|
3589
|
+
fontSize: [host$i, textArea$2],
|
|
3579
3590
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
|
3580
3591
|
labelTextColor: [
|
|
3581
3592
|
{ ...label$7, property: 'color' },
|
|
@@ -3623,49 +3634,49 @@ const TextAreaClass = compose(
|
|
|
3623
3634
|
${resetInputCursor('vaadin-text-area')}
|
|
3624
3635
|
`,
|
|
3625
3636
|
excludeAttrsSync: ['tabindex'],
|
|
3626
|
-
componentName: componentName$
|
|
3637
|
+
componentName: componentName$F,
|
|
3627
3638
|
})
|
|
3628
3639
|
);
|
|
3629
3640
|
|
|
3630
|
-
const vars$
|
|
3641
|
+
const vars$v = TextAreaClass.cssVarList;
|
|
3631
3642
|
|
|
3632
3643
|
const textArea = {
|
|
3633
|
-
[vars$
|
|
3634
|
-
[vars$
|
|
3635
|
-
[vars$
|
|
3636
|
-
[vars$
|
|
3637
|
-
[vars$
|
|
3638
|
-
[vars$
|
|
3639
|
-
[vars$
|
|
3640
|
-
[vars$
|
|
3641
|
-
[vars$
|
|
3642
|
-
[vars$
|
|
3643
|
-
[vars$
|
|
3644
|
-
[vars$
|
|
3645
|
-
[vars$
|
|
3646
|
-
[vars$
|
|
3647
|
-
[vars$
|
|
3648
|
-
[vars$
|
|
3649
|
-
[vars$
|
|
3650
|
-
[vars$
|
|
3651
|
-
[vars$
|
|
3652
|
-
[vars$
|
|
3653
|
-
[vars$
|
|
3644
|
+
[vars$v.hostWidth]: refs.width,
|
|
3645
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
|
3646
|
+
[vars$v.hostDirection]: refs.direction,
|
|
3647
|
+
[vars$v.fontSize]: refs.fontSize,
|
|
3648
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
|
3649
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3650
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3651
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3652
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
|
3653
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
|
3654
|
+
[vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3655
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
|
3656
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
|
3657
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
|
3658
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
|
3659
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
|
3660
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
|
3661
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
|
3662
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
|
3663
|
+
[vars$v.inputResizeType]: 'vertical',
|
|
3664
|
+
[vars$v.inputMinHeight]: '5em',
|
|
3654
3665
|
textAlign: {
|
|
3655
|
-
right: { [vars$
|
|
3656
|
-
left: { [vars$
|
|
3657
|
-
center: { [vars$
|
|
3666
|
+
right: { [vars$v.inputTextAlign]: 'right' },
|
|
3667
|
+
left: { [vars$v.inputTextAlign]: 'left' },
|
|
3668
|
+
center: { [vars$v.inputTextAlign]: 'center' },
|
|
3658
3669
|
},
|
|
3659
3670
|
|
|
3660
3671
|
_readonly: {
|
|
3661
|
-
[vars$
|
|
3672
|
+
[vars$v.inputResizeType]: 'none',
|
|
3662
3673
|
},
|
|
3663
3674
|
};
|
|
3664
3675
|
|
|
3665
3676
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
3666
3677
|
__proto__: null,
|
|
3667
3678
|
default: textArea,
|
|
3668
|
-
vars: vars$
|
|
3679
|
+
vars: vars$v
|
|
3669
3680
|
});
|
|
3670
3681
|
|
|
3671
3682
|
const createBaseInputClass = (...args) =>
|
|
@@ -3676,9 +3687,9 @@ const createBaseInputClass = (...args) =>
|
|
|
3676
3687
|
inputEventsDispatchingMixin
|
|
3677
3688
|
)(createBaseClass(...args));
|
|
3678
3689
|
|
|
3679
|
-
const componentName$
|
|
3690
|
+
const componentName$E = getComponentName('boolean-field-internal');
|
|
3680
3691
|
|
|
3681
|
-
createBaseInputClass({ componentName: componentName$
|
|
3692
|
+
createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
|
|
3682
3693
|
|
|
3683
3694
|
const booleanFieldMixin = (superclass) =>
|
|
3684
3695
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -3687,14 +3698,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
3687
3698
|
|
|
3688
3699
|
const template = document.createElement('template');
|
|
3689
3700
|
template.innerHTML = `
|
|
3690
|
-
<${componentName$
|
|
3701
|
+
<${componentName$E}
|
|
3691
3702
|
tabindex="-1"
|
|
3692
3703
|
slot="input"
|
|
3693
|
-
></${componentName$
|
|
3704
|
+
></${componentName$E}>
|
|
3694
3705
|
`;
|
|
3695
3706
|
|
|
3696
3707
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3697
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3708
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$E);
|
|
3698
3709
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
3699
3710
|
|
|
3700
3711
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -3764,10 +3775,10 @@ descope-boolean-field-internal {
|
|
|
3764
3775
|
}
|
|
3765
3776
|
`;
|
|
3766
3777
|
|
|
3767
|
-
const componentName$
|
|
3778
|
+
const componentName$D = getComponentName('checkbox');
|
|
3768
3779
|
|
|
3769
3780
|
const {
|
|
3770
|
-
host: host$
|
|
3781
|
+
host: host$h,
|
|
3771
3782
|
component: component$1,
|
|
3772
3783
|
checkboxElement,
|
|
3773
3784
|
checkboxSurface,
|
|
@@ -3789,10 +3800,10 @@ const {
|
|
|
3789
3800
|
const CheckboxClass = compose(
|
|
3790
3801
|
createStyleMixin({
|
|
3791
3802
|
mappings: {
|
|
3792
|
-
hostWidth: { ...host$
|
|
3793
|
-
hostDirection: { ...host$
|
|
3803
|
+
hostWidth: { ...host$h, property: 'width' },
|
|
3804
|
+
hostDirection: { ...host$h, property: 'direction' },
|
|
3794
3805
|
|
|
3795
|
-
fontSize: [host$
|
|
3806
|
+
fontSize: [host$h, checkboxElement, checkboxLabel$1],
|
|
3796
3807
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
|
3797
3808
|
|
|
3798
3809
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
|
@@ -3870,54 +3881,54 @@ const CheckboxClass = compose(
|
|
|
3870
3881
|
}
|
|
3871
3882
|
`,
|
|
3872
3883
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
3873
|
-
componentName: componentName$
|
|
3884
|
+
componentName: componentName$D,
|
|
3874
3885
|
})
|
|
3875
3886
|
);
|
|
3876
3887
|
|
|
3877
|
-
const vars$
|
|
3888
|
+
const vars$u = CheckboxClass.cssVarList;
|
|
3878
3889
|
const checkboxSize = '1.35em';
|
|
3879
3890
|
|
|
3880
3891
|
const checkbox = {
|
|
3881
|
-
[vars$
|
|
3882
|
-
[vars$
|
|
3883
|
-
[vars$
|
|
3884
|
-
[vars$
|
|
3885
|
-
[vars$
|
|
3886
|
-
[vars$
|
|
3887
|
-
[vars$
|
|
3888
|
-
[vars$
|
|
3889
|
-
[vars$
|
|
3890
|
-
[vars$
|
|
3891
|
-
[vars$
|
|
3892
|
-
[vars$
|
|
3893
|
-
[vars$
|
|
3894
|
-
[vars$
|
|
3895
|
-
[vars$
|
|
3896
|
-
[vars$
|
|
3897
|
-
[vars$
|
|
3898
|
-
[vars$
|
|
3899
|
-
[vars$
|
|
3900
|
-
[vars$
|
|
3892
|
+
[vars$u.hostWidth]: refs.width,
|
|
3893
|
+
[vars$u.hostDirection]: refs.direction,
|
|
3894
|
+
[vars$u.fontSize]: refs.fontSize,
|
|
3895
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
|
3896
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
3897
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3898
|
+
[vars$u.labelFontWeight]: '400',
|
|
3899
|
+
[vars$u.labelLineHeight]: checkboxSize,
|
|
3900
|
+
[vars$u.labelSpacing]: '1em',
|
|
3901
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3902
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
|
3903
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
|
3904
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
|
3905
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
|
3906
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
|
3907
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
|
3908
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
|
3909
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
|
3910
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
|
3911
|
+
[vars$u.inputSize]: checkboxSize,
|
|
3901
3912
|
|
|
3902
3913
|
_checked: {
|
|
3903
|
-
[vars$
|
|
3914
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
|
3904
3915
|
},
|
|
3905
3916
|
|
|
3906
3917
|
_disabled: {
|
|
3907
|
-
[vars$
|
|
3918
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
3908
3919
|
},
|
|
3909
3920
|
};
|
|
3910
3921
|
|
|
3911
3922
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
3912
3923
|
__proto__: null,
|
|
3913
3924
|
default: checkbox,
|
|
3914
|
-
vars: vars$
|
|
3925
|
+
vars: vars$u
|
|
3915
3926
|
});
|
|
3916
3927
|
|
|
3917
|
-
const componentName$
|
|
3928
|
+
const componentName$C = getComponentName('switch-toggle');
|
|
3918
3929
|
|
|
3919
3930
|
const {
|
|
3920
|
-
host: host$
|
|
3931
|
+
host: host$g,
|
|
3921
3932
|
component,
|
|
3922
3933
|
checkboxElement: track,
|
|
3923
3934
|
checkboxSurface: knob,
|
|
@@ -3939,8 +3950,8 @@ const {
|
|
|
3939
3950
|
const SwitchToggleClass = compose(
|
|
3940
3951
|
createStyleMixin({
|
|
3941
3952
|
mappings: {
|
|
3942
|
-
hostWidth: { ...host$
|
|
3943
|
-
hostDirection: { ...host$
|
|
3953
|
+
hostWidth: { ...host$g, property: 'width' },
|
|
3954
|
+
hostDirection: { ...host$g, property: 'direction' },
|
|
3944
3955
|
|
|
3945
3956
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
3946
3957
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
|
@@ -4046,82 +4057,82 @@ const SwitchToggleClass = compose(
|
|
|
4046
4057
|
}
|
|
4047
4058
|
`,
|
|
4048
4059
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
4049
|
-
componentName: componentName$
|
|
4060
|
+
componentName: componentName$C,
|
|
4050
4061
|
})
|
|
4051
4062
|
);
|
|
4052
4063
|
|
|
4053
4064
|
const knobMargin = '2px';
|
|
4054
4065
|
const checkboxHeight = '1.25em';
|
|
4055
4066
|
|
|
4056
|
-
const globalRefs$
|
|
4057
|
-
const vars$
|
|
4067
|
+
const globalRefs$h = getThemeRefs(globals);
|
|
4068
|
+
const vars$t = SwitchToggleClass.cssVarList;
|
|
4058
4069
|
|
|
4059
4070
|
const switchToggle = {
|
|
4060
|
-
[vars$
|
|
4061
|
-
[vars$
|
|
4062
|
-
[vars$
|
|
4063
|
-
[vars$
|
|
4064
|
-
|
|
4065
|
-
[vars$
|
|
4066
|
-
[vars$
|
|
4067
|
-
[vars$
|
|
4068
|
-
[vars$
|
|
4069
|
-
|
|
4070
|
-
[vars$
|
|
4071
|
-
[vars$
|
|
4072
|
-
[vars$
|
|
4073
|
-
[vars$
|
|
4074
|
-
[vars$
|
|
4075
|
-
[vars$
|
|
4076
|
-
[vars$
|
|
4077
|
-
|
|
4078
|
-
[vars$
|
|
4079
|
-
[vars$
|
|
4080
|
-
[vars$
|
|
4081
|
-
[vars$
|
|
4082
|
-
[vars$
|
|
4083
|
-
[vars$
|
|
4084
|
-
|
|
4085
|
-
[vars$
|
|
4086
|
-
[vars$
|
|
4087
|
-
[vars$
|
|
4088
|
-
[vars$
|
|
4089
|
-
[vars$
|
|
4090
|
-
[vars$
|
|
4071
|
+
[vars$t.hostWidth]: refs.width,
|
|
4072
|
+
[vars$t.hostDirection]: refs.direction,
|
|
4073
|
+
[vars$t.fontSize]: refs.fontSize,
|
|
4074
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
|
4075
|
+
|
|
4076
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
|
4077
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
|
4078
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
|
4079
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
|
4080
|
+
|
|
4081
|
+
[vars$t.trackBorderStyle]: refs.borderStyle,
|
|
4082
|
+
[vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
4083
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
|
4084
|
+
[vars$t.trackBackgroundColor]: refs.backgroundColor,
|
|
4085
|
+
[vars$t.trackBorderRadius]: globalRefs$h.radius.md,
|
|
4086
|
+
[vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
4087
|
+
[vars$t.trackHeight]: checkboxHeight,
|
|
4088
|
+
|
|
4089
|
+
[vars$t.knobSize]: `calc(1em - ${knobMargin})`,
|
|
4090
|
+
[vars$t.knobRadius]: '50%',
|
|
4091
|
+
[vars$t.knobTopOffset]: '1px',
|
|
4092
|
+
[vars$t.knobLeftOffset]: knobMargin,
|
|
4093
|
+
[vars$t.knobColor]: refs.labelTextColor,
|
|
4094
|
+
[vars$t.knobTransitionDuration]: '0.3s',
|
|
4095
|
+
|
|
4096
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
4097
|
+
[vars$t.labelFontWeight]: '400',
|
|
4098
|
+
[vars$t.labelLineHeight]: '1.35em',
|
|
4099
|
+
[vars$t.labelSpacing]: '1em',
|
|
4100
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4101
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4091
4102
|
|
|
4092
4103
|
_checked: {
|
|
4093
|
-
[vars$
|
|
4094
|
-
[vars$
|
|
4095
|
-
[vars$
|
|
4096
|
-
[vars$
|
|
4104
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
|
4105
|
+
[vars$t.knobLeftOffset]: `calc(100% - var(${vars$t.knobSize}) - ${knobMargin})`,
|
|
4106
|
+
[vars$t.knobColor]: refs.valueTextColor,
|
|
4107
|
+
[vars$t.knobTextColor]: refs.valueTextColor,
|
|
4097
4108
|
},
|
|
4098
4109
|
|
|
4099
4110
|
_disabled: {
|
|
4100
|
-
[vars$
|
|
4101
|
-
[vars$
|
|
4102
|
-
[vars$
|
|
4103
|
-
[vars$
|
|
4111
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
|
4112
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.surface.light,
|
|
4113
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4114
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
4104
4115
|
_checked: {
|
|
4105
|
-
[vars$
|
|
4106
|
-
[vars$
|
|
4116
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
|
4117
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4107
4118
|
},
|
|
4108
4119
|
},
|
|
4109
4120
|
|
|
4110
4121
|
_invalid: {
|
|
4111
|
-
[vars$
|
|
4112
|
-
[vars$
|
|
4122
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.error.main,
|
|
4123
|
+
[vars$t.knobColor]: globalRefs$h.colors.error.main,
|
|
4113
4124
|
},
|
|
4114
4125
|
};
|
|
4115
4126
|
|
|
4116
4127
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
4117
4128
|
__proto__: null,
|
|
4118
4129
|
default: switchToggle,
|
|
4119
|
-
vars: vars$
|
|
4130
|
+
vars: vars$t
|
|
4120
4131
|
});
|
|
4121
4132
|
|
|
4122
|
-
const componentName$
|
|
4133
|
+
const componentName$B = getComponentName('container');
|
|
4123
4134
|
|
|
4124
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
4135
|
+
class RawContainer extends createBaseClass({ componentName: componentName$B, baseSelector: 'slot' }) {
|
|
4125
4136
|
constructor() {
|
|
4126
4137
|
super();
|
|
4127
4138
|
|
|
@@ -4174,7 +4185,7 @@ const ContainerClass = compose(
|
|
|
4174
4185
|
componentNameValidationMixin
|
|
4175
4186
|
)(RawContainer);
|
|
4176
4187
|
|
|
4177
|
-
const globalRefs$
|
|
4188
|
+
const globalRefs$g = getThemeRefs(globals);
|
|
4178
4189
|
|
|
4179
4190
|
const compVars$4 = ContainerClass.cssVarList;
|
|
4180
4191
|
|
|
@@ -4196,7 +4207,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
4196
4207
|
horizontalAlignment,
|
|
4197
4208
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
4198
4209
|
},
|
|
4199
|
-
componentName$
|
|
4210
|
+
componentName$B
|
|
4200
4211
|
);
|
|
4201
4212
|
|
|
4202
4213
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
@@ -4206,10 +4217,10 @@ const container = {
|
|
|
4206
4217
|
|
|
4207
4218
|
[compVars$4.hostWidth]: '100%',
|
|
4208
4219
|
[compVars$4.boxShadow]: 'none',
|
|
4209
|
-
[compVars$4.backgroundColor]: globalRefs$
|
|
4210
|
-
[compVars$4.color]: globalRefs$
|
|
4220
|
+
[compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
|
|
4221
|
+
[compVars$4.color]: globalRefs$g.colors.surface.contrast,
|
|
4211
4222
|
[compVars$4.borderRadius]: '0px',
|
|
4212
|
-
[compVars$4.hostDirection]: globalRefs$
|
|
4223
|
+
[compVars$4.hostDirection]: globalRefs$g.direction,
|
|
4213
4224
|
|
|
4214
4225
|
verticalPadding: {
|
|
4215
4226
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
|
@@ -4255,34 +4266,34 @@ const container = {
|
|
|
4255
4266
|
|
|
4256
4267
|
shadow: {
|
|
4257
4268
|
sm: {
|
|
4258
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4269
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
|
|
4259
4270
|
},
|
|
4260
4271
|
md: {
|
|
4261
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4272
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
|
|
4262
4273
|
},
|
|
4263
4274
|
lg: {
|
|
4264
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4275
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
|
|
4265
4276
|
},
|
|
4266
4277
|
xl: {
|
|
4267
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4278
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
|
|
4268
4279
|
},
|
|
4269
4280
|
'2xl': {
|
|
4270
4281
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
4271
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
|
4282
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
|
|
4272
4283
|
},
|
|
4273
4284
|
},
|
|
4274
4285
|
|
|
4275
4286
|
borderRadius: {
|
|
4276
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
|
4277
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
|
4278
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
|
4279
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
|
4280
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4281
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
|
4287
|
+
sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
|
|
4288
|
+
md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
|
|
4289
|
+
lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
|
|
4290
|
+
xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
|
|
4291
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
|
|
4292
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
|
|
4282
4293
|
},
|
|
4283
4294
|
};
|
|
4284
4295
|
|
|
4285
|
-
const vars$
|
|
4296
|
+
const vars$s = {
|
|
4286
4297
|
...compVars$4,
|
|
4287
4298
|
...helperVars$2,
|
|
4288
4299
|
};
|
|
@@ -4290,7 +4301,7 @@ const vars$q = {
|
|
|
4290
4301
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
4291
4302
|
__proto__: null,
|
|
4292
4303
|
default: container,
|
|
4293
|
-
vars: vars$
|
|
4304
|
+
vars: vars$s
|
|
4294
4305
|
});
|
|
4295
4306
|
|
|
4296
4307
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -4343,71 +4354,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
4343
4354
|
return CssVarImageClass;
|
|
4344
4355
|
};
|
|
4345
4356
|
|
|
4346
|
-
const componentName$
|
|
4357
|
+
const componentName$A = getComponentName('logo');
|
|
4347
4358
|
|
|
4348
4359
|
const LogoClass = createCssVarImageClass({
|
|
4349
|
-
componentName: componentName$
|
|
4360
|
+
componentName: componentName$A,
|
|
4350
4361
|
varName: 'url',
|
|
4351
4362
|
fallbackVarName: 'fallbackUrl',
|
|
4352
4363
|
});
|
|
4353
4364
|
|
|
4354
|
-
const vars$
|
|
4365
|
+
const vars$r = LogoClass.cssVarList;
|
|
4355
4366
|
|
|
4356
4367
|
const logo$2 = {
|
|
4357
|
-
[vars$
|
|
4368
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
4358
4369
|
};
|
|
4359
4370
|
|
|
4360
4371
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
|
4361
4372
|
__proto__: null,
|
|
4362
4373
|
default: logo$2,
|
|
4363
|
-
vars: vars$
|
|
4374
|
+
vars: vars$r
|
|
4364
4375
|
});
|
|
4365
4376
|
|
|
4366
|
-
const componentName$
|
|
4377
|
+
const componentName$z = getComponentName('totp-image');
|
|
4367
4378
|
|
|
4368
4379
|
const TotpImageClass = createCssVarImageClass({
|
|
4369
|
-
componentName: componentName$
|
|
4380
|
+
componentName: componentName$z,
|
|
4370
4381
|
varName: 'url',
|
|
4371
4382
|
fallbackVarName: 'fallbackUrl',
|
|
4372
4383
|
});
|
|
4373
4384
|
|
|
4374
|
-
const vars$
|
|
4385
|
+
const vars$q = TotpImageClass.cssVarList;
|
|
4375
4386
|
|
|
4376
4387
|
const logo$1 = {
|
|
4377
|
-
[vars$
|
|
4388
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
4378
4389
|
};
|
|
4379
4390
|
|
|
4380
4391
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
4381
4392
|
__proto__: null,
|
|
4382
4393
|
default: logo$1,
|
|
4383
|
-
vars: vars$
|
|
4394
|
+
vars: vars$q
|
|
4384
4395
|
});
|
|
4385
4396
|
|
|
4386
|
-
const componentName$
|
|
4397
|
+
const componentName$y = getComponentName('notp-image');
|
|
4387
4398
|
|
|
4388
4399
|
const NotpImageClass = createCssVarImageClass({
|
|
4389
|
-
componentName: componentName$
|
|
4400
|
+
componentName: componentName$y,
|
|
4390
4401
|
varName: 'url',
|
|
4391
4402
|
fallbackVarName: 'fallbackUrl',
|
|
4392
4403
|
});
|
|
4393
4404
|
|
|
4394
|
-
const vars$
|
|
4405
|
+
const vars$p = NotpImageClass.cssVarList;
|
|
4395
4406
|
|
|
4396
4407
|
const logo = {
|
|
4397
|
-
[vars$
|
|
4408
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
|
4398
4409
|
};
|
|
4399
4410
|
|
|
4400
4411
|
var notpImage = /*#__PURE__*/Object.freeze({
|
|
4401
4412
|
__proto__: null,
|
|
4402
4413
|
default: logo,
|
|
4403
|
-
vars: vars$
|
|
4414
|
+
vars: vars$p
|
|
4404
4415
|
});
|
|
4405
4416
|
|
|
4406
4417
|
// eslint-disable-next-line max-classes-per-file
|
|
4407
4418
|
|
|
4408
|
-
const componentName$
|
|
4419
|
+
const componentName$x = getComponentName('text');
|
|
4409
4420
|
|
|
4410
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
4421
|
+
class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
|
|
4411
4422
|
constructor() {
|
|
4412
4423
|
super();
|
|
4413
4424
|
|
|
@@ -4421,7 +4432,7 @@ class RawText extends createBaseClass({ componentName: componentName$u, baseSele
|
|
|
4421
4432
|
display: inline-block;
|
|
4422
4433
|
}
|
|
4423
4434
|
</style>
|
|
4424
|
-
<slot></slot>
|
|
4435
|
+
<slot part="text-wrapper"></slot>
|
|
4425
4436
|
`;
|
|
4426
4437
|
}
|
|
4427
4438
|
}
|
|
@@ -4467,99 +4478,99 @@ const TextClass = compose(
|
|
|
4467
4478
|
customTextMixin
|
|
4468
4479
|
)(RawText);
|
|
4469
4480
|
|
|
4470
|
-
const globalRefs$
|
|
4471
|
-
const vars$
|
|
4481
|
+
const globalRefs$f = getThemeRefs(globals);
|
|
4482
|
+
const vars$o = TextClass.cssVarList;
|
|
4472
4483
|
|
|
4473
4484
|
const text$2 = {
|
|
4474
|
-
[vars$
|
|
4475
|
-
[vars$
|
|
4476
|
-
[vars$
|
|
4477
|
-
[vars$
|
|
4485
|
+
[vars$o.hostDirection]: globalRefs$f.direction,
|
|
4486
|
+
[vars$o.textLineHeight]: '1.35em',
|
|
4487
|
+
[vars$o.textAlign]: 'left',
|
|
4488
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
|
4478
4489
|
variant: {
|
|
4479
4490
|
h1: {
|
|
4480
|
-
[vars$
|
|
4481
|
-
[vars$
|
|
4482
|
-
[vars$
|
|
4491
|
+
[vars$o.fontSize]: globalRefs$f.typography.h1.size,
|
|
4492
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h1.weight,
|
|
4493
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h1.font,
|
|
4483
4494
|
},
|
|
4484
4495
|
h2: {
|
|
4485
|
-
[vars$
|
|
4486
|
-
[vars$
|
|
4487
|
-
[vars$
|
|
4496
|
+
[vars$o.fontSize]: globalRefs$f.typography.h2.size,
|
|
4497
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h2.weight,
|
|
4498
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h2.font,
|
|
4488
4499
|
},
|
|
4489
4500
|
h3: {
|
|
4490
|
-
[vars$
|
|
4491
|
-
[vars$
|
|
4492
|
-
[vars$
|
|
4501
|
+
[vars$o.fontSize]: globalRefs$f.typography.h3.size,
|
|
4502
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h3.weight,
|
|
4503
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h3.font,
|
|
4493
4504
|
},
|
|
4494
4505
|
subtitle1: {
|
|
4495
|
-
[vars$
|
|
4496
|
-
[vars$
|
|
4497
|
-
[vars$
|
|
4506
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle1.size,
|
|
4507
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle1.weight,
|
|
4508
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle1.font,
|
|
4498
4509
|
},
|
|
4499
4510
|
subtitle2: {
|
|
4500
|
-
[vars$
|
|
4501
|
-
[vars$
|
|
4502
|
-
[vars$
|
|
4511
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle2.size,
|
|
4512
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle2.weight,
|
|
4513
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle2.font,
|
|
4503
4514
|
},
|
|
4504
4515
|
body1: {
|
|
4505
|
-
[vars$
|
|
4506
|
-
[vars$
|
|
4507
|
-
[vars$
|
|
4516
|
+
[vars$o.fontSize]: globalRefs$f.typography.body1.size,
|
|
4517
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body1.weight,
|
|
4518
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body1.font,
|
|
4508
4519
|
},
|
|
4509
4520
|
body2: {
|
|
4510
|
-
[vars$
|
|
4511
|
-
[vars$
|
|
4512
|
-
[vars$
|
|
4521
|
+
[vars$o.fontSize]: globalRefs$f.typography.body2.size,
|
|
4522
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body2.weight,
|
|
4523
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body2.font,
|
|
4513
4524
|
},
|
|
4514
4525
|
},
|
|
4515
4526
|
|
|
4516
4527
|
mode: {
|
|
4517
4528
|
primary: {
|
|
4518
|
-
[vars$
|
|
4529
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.contrast,
|
|
4519
4530
|
},
|
|
4520
4531
|
secondary: {
|
|
4521
|
-
[vars$
|
|
4532
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
|
4522
4533
|
},
|
|
4523
4534
|
error: {
|
|
4524
|
-
[vars$
|
|
4535
|
+
[vars$o.textColor]: globalRefs$f.colors.error.main,
|
|
4525
4536
|
},
|
|
4526
4537
|
success: {
|
|
4527
|
-
[vars$
|
|
4538
|
+
[vars$o.textColor]: globalRefs$f.colors.success.main,
|
|
4528
4539
|
},
|
|
4529
4540
|
},
|
|
4530
4541
|
|
|
4531
4542
|
textAlign: {
|
|
4532
|
-
right: { [vars$
|
|
4533
|
-
left: { [vars$
|
|
4534
|
-
center: { [vars$
|
|
4543
|
+
right: { [vars$o.textAlign]: 'right' },
|
|
4544
|
+
left: { [vars$o.textAlign]: 'left' },
|
|
4545
|
+
center: { [vars$o.textAlign]: 'center' },
|
|
4535
4546
|
},
|
|
4536
4547
|
|
|
4537
4548
|
_fullWidth: {
|
|
4538
|
-
[vars$
|
|
4549
|
+
[vars$o.hostWidth]: '100%',
|
|
4539
4550
|
},
|
|
4540
4551
|
|
|
4541
4552
|
_italic: {
|
|
4542
|
-
[vars$
|
|
4553
|
+
[vars$o.fontStyle]: 'italic',
|
|
4543
4554
|
},
|
|
4544
4555
|
|
|
4545
4556
|
_uppercase: {
|
|
4546
|
-
[vars$
|
|
4557
|
+
[vars$o.textTransform]: 'uppercase',
|
|
4547
4558
|
},
|
|
4548
4559
|
|
|
4549
4560
|
_lowercase: {
|
|
4550
|
-
[vars$
|
|
4561
|
+
[vars$o.textTransform]: 'lowercase',
|
|
4551
4562
|
},
|
|
4552
4563
|
};
|
|
4553
4564
|
|
|
4554
4565
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
4555
4566
|
__proto__: null,
|
|
4556
4567
|
default: text$2,
|
|
4557
|
-
vars: vars$
|
|
4568
|
+
vars: vars$o
|
|
4558
4569
|
});
|
|
4559
4570
|
|
|
4560
|
-
const componentName$
|
|
4571
|
+
const componentName$w = getComponentName('link');
|
|
4561
4572
|
|
|
4562
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
4573
|
+
class RawLink extends createBaseClass({ componentName: componentName$w, baseSelector: ':host a' }) {
|
|
4563
4574
|
constructor() {
|
|
4564
4575
|
super();
|
|
4565
4576
|
|
|
@@ -4605,12 +4616,12 @@ const selectors$2 = {
|
|
|
4605
4616
|
text: { selector: () => TextClass.componentName },
|
|
4606
4617
|
};
|
|
4607
4618
|
|
|
4608
|
-
const { anchor, text: text$1, host: host$
|
|
4619
|
+
const { anchor, text: text$1, host: host$f, wrapper: wrapper$1 } = selectors$2;
|
|
4609
4620
|
|
|
4610
4621
|
const LinkClass = compose(
|
|
4611
4622
|
createStyleMixin({
|
|
4612
4623
|
mappings: {
|
|
4613
|
-
hostWidth: { ...host$
|
|
4624
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
4614
4625
|
hostDirection: { ...text$1, property: 'direction' },
|
|
4615
4626
|
textAlign: wrapper$1,
|
|
4616
4627
|
textColor: [
|
|
@@ -4624,37 +4635,37 @@ const LinkClass = compose(
|
|
|
4624
4635
|
componentNameValidationMixin
|
|
4625
4636
|
)(RawLink);
|
|
4626
4637
|
|
|
4627
|
-
const globalRefs$
|
|
4628
|
-
const vars$
|
|
4638
|
+
const globalRefs$e = getThemeRefs(globals);
|
|
4639
|
+
const vars$n = LinkClass.cssVarList;
|
|
4629
4640
|
|
|
4630
4641
|
const link = {
|
|
4631
|
-
[vars$
|
|
4632
|
-
[vars$
|
|
4642
|
+
[vars$n.hostDirection]: globalRefs$e.direction,
|
|
4643
|
+
[vars$n.cursor]: 'pointer',
|
|
4633
4644
|
|
|
4634
|
-
[vars$
|
|
4645
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
|
4635
4646
|
|
|
4636
4647
|
textAlign: {
|
|
4637
|
-
right: { [vars$
|
|
4638
|
-
left: { [vars$
|
|
4639
|
-
center: { [vars$
|
|
4648
|
+
right: { [vars$n.textAlign]: 'right' },
|
|
4649
|
+
left: { [vars$n.textAlign]: 'left' },
|
|
4650
|
+
center: { [vars$n.textAlign]: 'center' },
|
|
4640
4651
|
},
|
|
4641
4652
|
|
|
4642
4653
|
_fullWidth: {
|
|
4643
|
-
[vars$
|
|
4654
|
+
[vars$n.hostWidth]: '100%',
|
|
4644
4655
|
},
|
|
4645
4656
|
|
|
4646
4657
|
mode: {
|
|
4647
4658
|
primary: {
|
|
4648
|
-
[vars$
|
|
4659
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
|
4649
4660
|
},
|
|
4650
4661
|
secondary: {
|
|
4651
|
-
[vars$
|
|
4662
|
+
[vars$n.textColor]: globalRefs$e.colors.secondary.main,
|
|
4652
4663
|
},
|
|
4653
4664
|
error: {
|
|
4654
|
-
[vars$
|
|
4665
|
+
[vars$n.textColor]: globalRefs$e.colors.error.main,
|
|
4655
4666
|
},
|
|
4656
4667
|
success: {
|
|
4657
|
-
[vars$
|
|
4668
|
+
[vars$n.textColor]: globalRefs$e.colors.success.main,
|
|
4658
4669
|
},
|
|
4659
4670
|
},
|
|
4660
4671
|
};
|
|
@@ -4662,11 +4673,11 @@ const link = {
|
|
|
4662
4673
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
4663
4674
|
__proto__: null,
|
|
4664
4675
|
default: link,
|
|
4665
|
-
vars: vars$
|
|
4676
|
+
vars: vars$n
|
|
4666
4677
|
});
|
|
4667
4678
|
|
|
4668
|
-
const componentName$
|
|
4669
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
4679
|
+
const componentName$v = getComponentName('divider');
|
|
4680
|
+
class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
|
4670
4681
|
constructor() {
|
|
4671
4682
|
super();
|
|
4672
4683
|
|
|
@@ -4712,7 +4723,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$s, baseS
|
|
|
4712
4723
|
}
|
|
4713
4724
|
|
|
4714
4725
|
const textVars$3 = TextClass.cssVarList;
|
|
4715
|
-
const { host: host$
|
|
4726
|
+
const { host: host$e, before, after: after$1, text } = {
|
|
4716
4727
|
host: { selector: () => ':host' },
|
|
4717
4728
|
before: { selector: '::before' },
|
|
4718
4729
|
after: { selector: '::after' },
|
|
@@ -4722,8 +4733,8 @@ const { host: host$c, before, after: after$1, text } = {
|
|
|
4722
4733
|
const DividerClass = compose(
|
|
4723
4734
|
createStyleMixin({
|
|
4724
4735
|
mappings: {
|
|
4725
|
-
hostWidth: { ...host$
|
|
4726
|
-
hostPadding: { ...host$
|
|
4736
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
4737
|
+
hostPadding: { ...host$e, property: 'padding' },
|
|
4727
4738
|
hostDirection: { ...text, property: 'direction' },
|
|
4728
4739
|
|
|
4729
4740
|
minHeight: {},
|
|
@@ -4765,7 +4776,7 @@ const DividerClass = compose(
|
|
|
4765
4776
|
componentNameValidationMixin
|
|
4766
4777
|
)(RawDivider);
|
|
4767
4778
|
|
|
4768
|
-
const globalRefs$
|
|
4779
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
4769
4780
|
const compVars$3 = DividerClass.cssVarList;
|
|
4770
4781
|
|
|
4771
4782
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -4773,18 +4784,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
4773
4784
|
thickness: '2px',
|
|
4774
4785
|
spacing: '10px',
|
|
4775
4786
|
},
|
|
4776
|
-
componentName$
|
|
4787
|
+
componentName$v
|
|
4777
4788
|
);
|
|
4778
4789
|
|
|
4779
4790
|
const divider = {
|
|
4780
4791
|
...helperTheme$1,
|
|
4781
4792
|
|
|
4782
|
-
[compVars$3.hostDirection]: globalRefs$
|
|
4793
|
+
[compVars$3.hostDirection]: globalRefs$d.direction,
|
|
4783
4794
|
[compVars$3.alignItems]: 'center',
|
|
4784
4795
|
[compVars$3.flexDirection]: 'row',
|
|
4785
4796
|
[compVars$3.alignSelf]: 'stretch',
|
|
4786
4797
|
[compVars$3.hostWidth]: '100%',
|
|
4787
|
-
[compVars$3.stripeColor]: globalRefs$
|
|
4798
|
+
[compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
|
|
4788
4799
|
[compVars$3.stripeColorOpacity]: '0.5',
|
|
4789
4800
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
4790
4801
|
[compVars$3.labelTextWidth]: 'fit-content',
|
|
@@ -4804,7 +4815,7 @@ const divider = {
|
|
|
4804
4815
|
},
|
|
4805
4816
|
};
|
|
4806
4817
|
|
|
4807
|
-
const vars$
|
|
4818
|
+
const vars$m = {
|
|
4808
4819
|
...compVars$3,
|
|
4809
4820
|
...helperVars$1,
|
|
4810
4821
|
};
|
|
@@ -4812,18 +4823,18 @@ const vars$k = {
|
|
|
4812
4823
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
4813
4824
|
__proto__: null,
|
|
4814
4825
|
default: divider,
|
|
4815
|
-
vars: vars$
|
|
4826
|
+
vars: vars$m
|
|
4816
4827
|
});
|
|
4817
4828
|
|
|
4818
4829
|
/* eslint-disable no-param-reassign */
|
|
4819
4830
|
|
|
4820
|
-
const componentName$
|
|
4831
|
+
const componentName$u = getComponentName('passcode-internal');
|
|
4821
4832
|
|
|
4822
|
-
createBaseInputClass({ componentName: componentName$
|
|
4833
|
+
createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
|
|
4823
4834
|
|
|
4824
|
-
const componentName$
|
|
4835
|
+
const componentName$t = getComponentName('loader-radial');
|
|
4825
4836
|
|
|
4826
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
4837
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
|
|
4827
4838
|
constructor() {
|
|
4828
4839
|
super();
|
|
4829
4840
|
|
|
@@ -4867,11 +4878,11 @@ const LoaderRadialClass = compose(
|
|
|
4867
4878
|
componentNameValidationMixin
|
|
4868
4879
|
)(RawLoaderRadial);
|
|
4869
4880
|
|
|
4870
|
-
const componentName$
|
|
4881
|
+
const componentName$s = getComponentName('passcode');
|
|
4871
4882
|
|
|
4872
4883
|
const observedAttributes$3 = ['digits'];
|
|
4873
4884
|
|
|
4874
|
-
const customMixin$
|
|
4885
|
+
const customMixin$6 = (superclass) =>
|
|
4875
4886
|
class PasscodeMixinClass extends superclass {
|
|
4876
4887
|
static get observedAttributes() {
|
|
4877
4888
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -4886,17 +4897,17 @@ const customMixin$5 = (superclass) =>
|
|
|
4886
4897
|
const template = document.createElement('template');
|
|
4887
4898
|
|
|
4888
4899
|
template.innerHTML = `
|
|
4889
|
-
<${componentName$
|
|
4900
|
+
<${componentName$u}
|
|
4890
4901
|
bordered="true"
|
|
4891
4902
|
name="code"
|
|
4892
4903
|
tabindex="-1"
|
|
4893
4904
|
slot="input"
|
|
4894
|
-
><slot></slot></${componentName$
|
|
4905
|
+
><slot></slot></${componentName$u}>
|
|
4895
4906
|
`;
|
|
4896
4907
|
|
|
4897
4908
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
4898
4909
|
|
|
4899
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
4910
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$u);
|
|
4900
4911
|
|
|
4901
4912
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
|
4902
4913
|
}
|
|
@@ -4911,7 +4922,7 @@ const customMixin$5 = (superclass) =>
|
|
|
4911
4922
|
};
|
|
4912
4923
|
|
|
4913
4924
|
const {
|
|
4914
|
-
host: host$
|
|
4925
|
+
host: host$d,
|
|
4915
4926
|
digitField,
|
|
4916
4927
|
label: label$6,
|
|
4917
4928
|
requiredIndicator: requiredIndicator$6,
|
|
@@ -4934,10 +4945,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
|
4934
4945
|
const PasscodeClass = compose(
|
|
4935
4946
|
createStyleMixin({
|
|
4936
4947
|
mappings: {
|
|
4937
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
4948
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$d],
|
|
4938
4949
|
hostWidth: { property: 'width' },
|
|
4939
|
-
hostDirection: { ...host$
|
|
4940
|
-
fontFamily: [host$
|
|
4950
|
+
hostDirection: { ...host$d, property: 'direction' },
|
|
4951
|
+
fontFamily: [host$d, { ...label$6 }],
|
|
4941
4952
|
labelTextColor: [
|
|
4942
4953
|
{ ...label$6, property: 'color' },
|
|
4943
4954
|
{ ...requiredIndicator$6, property: 'color' },
|
|
@@ -4967,7 +4978,7 @@ const PasscodeClass = compose(
|
|
|
4967
4978
|
draggableMixin,
|
|
4968
4979
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
4969
4980
|
componentNameValidationMixin,
|
|
4970
|
-
customMixin$
|
|
4981
|
+
customMixin$6
|
|
4971
4982
|
)(
|
|
4972
4983
|
createProxy({
|
|
4973
4984
|
slots: [],
|
|
@@ -5043,56 +5054,56 @@ const PasscodeClass = compose(
|
|
|
5043
5054
|
${resetInputCursor('vaadin-text-field')}
|
|
5044
5055
|
`,
|
|
5045
5056
|
excludeAttrsSync: ['tabindex'],
|
|
5046
|
-
componentName: componentName$
|
|
5057
|
+
componentName: componentName$s,
|
|
5047
5058
|
})
|
|
5048
5059
|
);
|
|
5049
5060
|
|
|
5050
|
-
const vars$
|
|
5061
|
+
const vars$l = PasscodeClass.cssVarList;
|
|
5051
5062
|
|
|
5052
5063
|
const passcode = {
|
|
5053
|
-
[vars$
|
|
5054
|
-
[vars$
|
|
5055
|
-
[vars$
|
|
5056
|
-
[vars$
|
|
5057
|
-
[vars$
|
|
5058
|
-
[vars$
|
|
5059
|
-
[vars$
|
|
5060
|
-
[vars$
|
|
5061
|
-
[vars$
|
|
5062
|
-
[vars$
|
|
5063
|
-
[vars$
|
|
5064
|
-
[vars$
|
|
5065
|
-
[vars$
|
|
5066
|
-
[vars$
|
|
5067
|
-
[vars$
|
|
5064
|
+
[vars$l.hostDirection]: refs.direction,
|
|
5065
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
|
5066
|
+
[vars$l.fontSize]: refs.fontSize,
|
|
5067
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
|
5068
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5069
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5070
|
+
[vars$l.digitValueTextColor]: refs.valueTextColor,
|
|
5071
|
+
[vars$l.digitPadding]: '0',
|
|
5072
|
+
[vars$l.digitTextAlign]: 'center',
|
|
5073
|
+
[vars$l.digitSpacing]: '4px',
|
|
5074
|
+
[vars$l.hostWidth]: refs.width,
|
|
5075
|
+
[vars$l.digitOutlineColor]: 'transparent',
|
|
5076
|
+
[vars$l.digitOutlineWidth]: refs.outlineWidth,
|
|
5077
|
+
[vars$l.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
5078
|
+
[vars$l.digitSize]: refs.inputHeight,
|
|
5068
5079
|
|
|
5069
5080
|
size: {
|
|
5070
|
-
xs: { [vars$
|
|
5071
|
-
sm: { [vars$
|
|
5072
|
-
md: { [vars$
|
|
5073
|
-
lg: { [vars$
|
|
5081
|
+
xs: { [vars$l.spinnerSize]: '15px' },
|
|
5082
|
+
sm: { [vars$l.spinnerSize]: '20px' },
|
|
5083
|
+
md: { [vars$l.spinnerSize]: '20px' },
|
|
5084
|
+
lg: { [vars$l.spinnerSize]: '20px' },
|
|
5074
5085
|
},
|
|
5075
5086
|
|
|
5076
5087
|
_hideCursor: {
|
|
5077
|
-
[vars$
|
|
5088
|
+
[vars$l.digitCaretTextColor]: 'transparent',
|
|
5078
5089
|
},
|
|
5079
5090
|
|
|
5080
5091
|
_loading: {
|
|
5081
|
-
[vars$
|
|
5092
|
+
[vars$l.overlayOpacity]: refs.overlayOpacity,
|
|
5082
5093
|
},
|
|
5083
5094
|
};
|
|
5084
5095
|
|
|
5085
5096
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
5086
5097
|
__proto__: null,
|
|
5087
5098
|
default: passcode,
|
|
5088
|
-
vars: vars$
|
|
5099
|
+
vars: vars$l
|
|
5089
5100
|
});
|
|
5090
5101
|
|
|
5091
|
-
const componentName$
|
|
5102
|
+
const componentName$r = getComponentName('loader-linear');
|
|
5092
5103
|
|
|
5093
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
5104
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
|
5094
5105
|
static get componentName() {
|
|
5095
|
-
return componentName$
|
|
5106
|
+
return componentName$r;
|
|
5096
5107
|
}
|
|
5097
5108
|
|
|
5098
5109
|
constructor() {
|
|
@@ -5128,18 +5139,18 @@ const selectors$1 = {
|
|
|
5128
5139
|
host: { selector: () => ':host' },
|
|
5129
5140
|
};
|
|
5130
5141
|
|
|
5131
|
-
const { after, host: host$
|
|
5142
|
+
const { after, host: host$c } = selectors$1;
|
|
5132
5143
|
|
|
5133
5144
|
const LoaderLinearClass = compose(
|
|
5134
5145
|
createStyleMixin({
|
|
5135
5146
|
mappings: {
|
|
5136
5147
|
hostDisplay: {},
|
|
5137
|
-
hostWidth: { ...host$
|
|
5148
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
5138
5149
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
5139
5150
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
5140
5151
|
verticalPadding: [
|
|
5141
|
-
{ ...host$
|
|
5142
|
-
{ ...host$
|
|
5152
|
+
{ ...host$c, property: 'padding-top' },
|
|
5153
|
+
{ ...host$c, property: 'padding-bottom' },
|
|
5143
5154
|
],
|
|
5144
5155
|
barBackgroundColor: { property: 'background-color' },
|
|
5145
5156
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -5153,67 +5164,67 @@ const LoaderLinearClass = compose(
|
|
|
5153
5164
|
componentNameValidationMixin
|
|
5154
5165
|
)(RawLoaderLinear);
|
|
5155
5166
|
|
|
5156
|
-
const globalRefs$
|
|
5157
|
-
const vars$
|
|
5167
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
5168
|
+
const vars$k = LoaderLinearClass.cssVarList;
|
|
5158
5169
|
|
|
5159
5170
|
const loaderLinear = {
|
|
5160
|
-
[vars$
|
|
5161
|
-
[vars$
|
|
5171
|
+
[vars$k.hostDisplay]: 'inline-block',
|
|
5172
|
+
[vars$k.hostWidth]: '100%',
|
|
5162
5173
|
|
|
5163
|
-
[vars$
|
|
5164
|
-
[vars$
|
|
5174
|
+
[vars$k.barColor]: globalRefs$c.colors.surface.contrast,
|
|
5175
|
+
[vars$k.barWidth]: '20%',
|
|
5165
5176
|
|
|
5166
|
-
[vars$
|
|
5167
|
-
[vars$
|
|
5177
|
+
[vars$k.barBackgroundColor]: globalRefs$c.colors.surface.light,
|
|
5178
|
+
[vars$k.barBorderRadius]: '4px',
|
|
5168
5179
|
|
|
5169
|
-
[vars$
|
|
5170
|
-
[vars$
|
|
5171
|
-
[vars$
|
|
5172
|
-
[vars$
|
|
5180
|
+
[vars$k.animationDuration]: '2s',
|
|
5181
|
+
[vars$k.animationTimingFunction]: 'linear',
|
|
5182
|
+
[vars$k.animationIterationCount]: 'infinite',
|
|
5183
|
+
[vars$k.verticalPadding]: '0.25em',
|
|
5173
5184
|
|
|
5174
5185
|
size: {
|
|
5175
|
-
xs: { [vars$
|
|
5176
|
-
sm: { [vars$
|
|
5177
|
-
md: { [vars$
|
|
5178
|
-
lg: { [vars$
|
|
5186
|
+
xs: { [vars$k.barHeight]: '2px' },
|
|
5187
|
+
sm: { [vars$k.barHeight]: '4px' },
|
|
5188
|
+
md: { [vars$k.barHeight]: '6px' },
|
|
5189
|
+
lg: { [vars$k.barHeight]: '8px' },
|
|
5179
5190
|
},
|
|
5180
5191
|
|
|
5181
5192
|
mode: {
|
|
5182
5193
|
primary: {
|
|
5183
|
-
[vars$
|
|
5194
|
+
[vars$k.barColor]: globalRefs$c.colors.primary.main,
|
|
5184
5195
|
},
|
|
5185
5196
|
secondary: {
|
|
5186
|
-
[vars$
|
|
5197
|
+
[vars$k.barColor]: globalRefs$c.colors.secondary.main,
|
|
5187
5198
|
},
|
|
5188
5199
|
},
|
|
5189
5200
|
|
|
5190
5201
|
_hidden: {
|
|
5191
|
-
[vars$
|
|
5202
|
+
[vars$k.hostDisplay]: 'none',
|
|
5192
5203
|
},
|
|
5193
5204
|
};
|
|
5194
5205
|
|
|
5195
5206
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
5196
5207
|
__proto__: null,
|
|
5197
5208
|
default: loaderLinear,
|
|
5198
|
-
vars: vars$
|
|
5209
|
+
vars: vars$k
|
|
5199
5210
|
});
|
|
5200
5211
|
|
|
5201
|
-
const globalRefs$
|
|
5212
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
5202
5213
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
|
5203
5214
|
|
|
5204
5215
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
5205
5216
|
{
|
|
5206
|
-
spinnerColor: globalRefs$
|
|
5217
|
+
spinnerColor: globalRefs$b.colors.surface.contrast,
|
|
5207
5218
|
mode: {
|
|
5208
5219
|
primary: {
|
|
5209
|
-
spinnerColor: globalRefs$
|
|
5220
|
+
spinnerColor: globalRefs$b.colors.primary.main,
|
|
5210
5221
|
},
|
|
5211
5222
|
secondary: {
|
|
5212
|
-
spinnerColor: globalRefs$
|
|
5223
|
+
spinnerColor: globalRefs$b.colors.secondary.main,
|
|
5213
5224
|
},
|
|
5214
5225
|
},
|
|
5215
5226
|
},
|
|
5216
|
-
componentName$
|
|
5227
|
+
componentName$t
|
|
5217
5228
|
);
|
|
5218
5229
|
|
|
5219
5230
|
const loaderRadial = {
|
|
@@ -5242,7 +5253,7 @@ const loaderRadial = {
|
|
|
5242
5253
|
[compVars$2.hostDisplay]: 'none',
|
|
5243
5254
|
},
|
|
5244
5255
|
};
|
|
5245
|
-
const vars$
|
|
5256
|
+
const vars$j = {
|
|
5246
5257
|
...compVars$2,
|
|
5247
5258
|
...helperVars,
|
|
5248
5259
|
};
|
|
@@ -5250,10 +5261,10 @@ const vars$h = {
|
|
|
5250
5261
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
5251
5262
|
__proto__: null,
|
|
5252
5263
|
default: loaderRadial,
|
|
5253
|
-
vars: vars$
|
|
5264
|
+
vars: vars$j
|
|
5254
5265
|
});
|
|
5255
5266
|
|
|
5256
|
-
const componentName$
|
|
5267
|
+
const componentName$q = getComponentName('combo-box');
|
|
5257
5268
|
|
|
5258
5269
|
const ComboBoxMixin = (superclass) =>
|
|
5259
5270
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -5479,7 +5490,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
5479
5490
|
};
|
|
5480
5491
|
|
|
5481
5492
|
const {
|
|
5482
|
-
host: host$
|
|
5493
|
+
host: host$b,
|
|
5483
5494
|
inputField: inputField$3,
|
|
5484
5495
|
inputElement: inputElement$1,
|
|
5485
5496
|
placeholder: placeholder$1,
|
|
@@ -5505,10 +5516,10 @@ const {
|
|
|
5505
5516
|
const ComboBoxClass = compose(
|
|
5506
5517
|
createStyleMixin({
|
|
5507
5518
|
mappings: {
|
|
5508
|
-
hostWidth: { ...host$
|
|
5509
|
-
hostDirection: { ...host$
|
|
5519
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
5520
|
+
hostDirection: { ...host$b, property: 'direction' },
|
|
5510
5521
|
// we apply font-size also on the host so we can set its width with em
|
|
5511
|
-
fontSize: [{}, host$
|
|
5522
|
+
fontSize: [{}, host$b],
|
|
5512
5523
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
|
5513
5524
|
labelTextColor: [
|
|
5514
5525
|
{ ...label$5, property: 'color' },
|
|
@@ -5636,71 +5647,71 @@ const ComboBoxClass = compose(
|
|
|
5636
5647
|
// and reset items to an empty array, and opening the list box with no items
|
|
5637
5648
|
// to display.
|
|
5638
5649
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
|
5639
|
-
componentName: componentName$
|
|
5650
|
+
componentName: componentName$q,
|
|
5640
5651
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
5641
5652
|
})
|
|
5642
5653
|
);
|
|
5643
5654
|
|
|
5644
|
-
const globalRefs$
|
|
5645
|
-
const vars$
|
|
5655
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
5656
|
+
const vars$i = ComboBoxClass.cssVarList;
|
|
5646
5657
|
|
|
5647
5658
|
const comboBox = {
|
|
5648
|
-
[vars$
|
|
5649
|
-
[vars$
|
|
5650
|
-
[vars$
|
|
5651
|
-
[vars$
|
|
5652
|
-
[vars$
|
|
5653
|
-
[vars$
|
|
5654
|
-
[vars$
|
|
5655
|
-
[vars$
|
|
5656
|
-
[vars$
|
|
5657
|
-
[vars$
|
|
5658
|
-
[vars$
|
|
5659
|
-
[vars$
|
|
5660
|
-
[vars$
|
|
5661
|
-
[vars$
|
|
5662
|
-
[vars$
|
|
5663
|
-
[vars$
|
|
5664
|
-
[vars$
|
|
5665
|
-
[vars$
|
|
5666
|
-
[vars$
|
|
5667
|
-
[vars$
|
|
5668
|
-
[vars$
|
|
5669
|
-
[vars$
|
|
5670
|
-
[vars$
|
|
5671
|
-
[vars$
|
|
5672
|
-
[vars$
|
|
5673
|
-
[vars$
|
|
5659
|
+
[vars$i.hostWidth]: refs.width,
|
|
5660
|
+
[vars$i.hostDirection]: refs.direction,
|
|
5661
|
+
[vars$i.fontSize]: refs.fontSize,
|
|
5662
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
|
5663
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
|
5664
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5665
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
|
5666
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
|
5667
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
|
5668
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
|
5669
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
|
5670
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
|
5671
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
|
5672
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
|
5673
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5674
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
|
5675
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5676
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
|
5677
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
|
5678
|
+
[vars$i.inputHeight]: refs.inputHeight,
|
|
5679
|
+
[vars$i.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
|
|
5680
|
+
[vars$i.inputDropdownButtonCursor]: 'pointer',
|
|
5681
|
+
[vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
5682
|
+
[vars$i.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
|
|
5683
|
+
[vars$i.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
|
|
5684
|
+
[vars$i.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
|
|
5674
5685
|
|
|
5675
5686
|
_readonly: {
|
|
5676
|
-
[vars$
|
|
5687
|
+
[vars$i.inputDropdownButtonCursor]: 'default',
|
|
5677
5688
|
},
|
|
5678
5689
|
|
|
5679
5690
|
// Overlay theme exposed via the component:
|
|
5680
|
-
[vars$
|
|
5681
|
-
[vars$
|
|
5682
|
-
[vars$
|
|
5683
|
-
[vars$
|
|
5684
|
-
[vars$
|
|
5685
|
-
[vars$
|
|
5691
|
+
[vars$i.overlayFontSize]: refs.fontSize,
|
|
5692
|
+
[vars$i.overlayFontFamily]: refs.fontFamily,
|
|
5693
|
+
[vars$i.overlayCursor]: 'pointer',
|
|
5694
|
+
[vars$i.overlayItemBoxShadow]: 'none',
|
|
5695
|
+
[vars$i.overlayBackground]: refs.backgroundColor,
|
|
5696
|
+
[vars$i.overlayTextColor]: refs.valueTextColor,
|
|
5686
5697
|
|
|
5687
5698
|
// Overlay direct theme:
|
|
5688
|
-
[vars$
|
|
5689
|
-
[vars$
|
|
5699
|
+
[vars$i.overlay.minHeight]: '400px',
|
|
5700
|
+
[vars$i.overlay.margin]: '0',
|
|
5690
5701
|
};
|
|
5691
5702
|
|
|
5692
5703
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
5693
5704
|
__proto__: null,
|
|
5694
5705
|
comboBox: comboBox,
|
|
5695
5706
|
default: comboBox,
|
|
5696
|
-
vars: vars$
|
|
5707
|
+
vars: vars$i
|
|
5697
5708
|
});
|
|
5698
5709
|
|
|
5699
5710
|
const observedAttributes$2 = ['src', 'alt'];
|
|
5700
5711
|
|
|
5701
|
-
const componentName$
|
|
5712
|
+
const componentName$p = getComponentName('image');
|
|
5702
5713
|
|
|
5703
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
5714
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$p, baseSelector: ':host > img' });
|
|
5704
5715
|
class RawImage extends BaseClass$1 {
|
|
5705
5716
|
static get observedAttributes() {
|
|
5706
5717
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -5740,14 +5751,14 @@ const ImageClass = compose(
|
|
|
5740
5751
|
draggableMixin
|
|
5741
5752
|
)(RawImage);
|
|
5742
5753
|
|
|
5743
|
-
const vars$
|
|
5754
|
+
const vars$h = ImageClass.cssVarList;
|
|
5744
5755
|
|
|
5745
5756
|
const image = {};
|
|
5746
5757
|
|
|
5747
5758
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
5748
5759
|
__proto__: null,
|
|
5749
5760
|
default: image,
|
|
5750
|
-
vars: vars$
|
|
5761
|
+
vars: vars$h
|
|
5751
5762
|
});
|
|
5752
5763
|
|
|
5753
5764
|
var CountryCodes = [
|
|
@@ -6966,16 +6977,16 @@ var CountryCodes = [
|
|
|
6966
6977
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
|
6967
6978
|
];
|
|
6968
6979
|
|
|
6969
|
-
const componentName$
|
|
6980
|
+
const componentName$o = getComponentName('phone-field-internal');
|
|
6970
6981
|
|
|
6971
|
-
createBaseInputClass({ componentName: componentName$
|
|
6982
|
+
createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
|
6972
6983
|
|
|
6973
6984
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
6974
6985
|
const comboVars = ComboBoxClass.cssVarList;
|
|
6975
6986
|
|
|
6976
|
-
const componentName$
|
|
6987
|
+
const componentName$n = getComponentName('phone-field');
|
|
6977
6988
|
|
|
6978
|
-
const customMixin$
|
|
6989
|
+
const customMixin$5 = (superclass) =>
|
|
6979
6990
|
class PhoneFieldMixinClass extends superclass {
|
|
6980
6991
|
static get CountryCodes() {
|
|
6981
6992
|
return CountryCodes;
|
|
@@ -6987,15 +6998,15 @@ const customMixin$4 = (superclass) =>
|
|
|
6987
6998
|
const template = document.createElement('template');
|
|
6988
6999
|
|
|
6989
7000
|
template.innerHTML = `
|
|
6990
|
-
<${componentName$
|
|
7001
|
+
<${componentName$o}
|
|
6991
7002
|
tabindex="-1"
|
|
6992
7003
|
slot="input"
|
|
6993
|
-
></${componentName$
|
|
7004
|
+
></${componentName$o}>
|
|
6994
7005
|
`;
|
|
6995
7006
|
|
|
6996
7007
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
6997
7008
|
|
|
6998
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7009
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
|
6999
7010
|
|
|
7000
7011
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7001
7012
|
includeAttrs: [
|
|
@@ -7015,7 +7026,7 @@ const customMixin$4 = (superclass) =>
|
|
|
7015
7026
|
};
|
|
7016
7027
|
|
|
7017
7028
|
const {
|
|
7018
|
-
host: host$
|
|
7029
|
+
host: host$a,
|
|
7019
7030
|
label: label$4,
|
|
7020
7031
|
requiredIndicator: requiredIndicator$4,
|
|
7021
7032
|
inputField: inputField$2,
|
|
@@ -7040,7 +7051,7 @@ const PhoneFieldClass = compose(
|
|
|
7040
7051
|
createStyleMixin({
|
|
7041
7052
|
mappings: {
|
|
7042
7053
|
fontSize: [
|
|
7043
|
-
host$
|
|
7054
|
+
host$a,
|
|
7044
7055
|
inputField$2,
|
|
7045
7056
|
{
|
|
7046
7057
|
selector: TextFieldClass.componentName,
|
|
@@ -7061,11 +7072,11 @@ const PhoneFieldClass = compose(
|
|
|
7061
7072
|
},
|
|
7062
7073
|
],
|
|
7063
7074
|
hostWidth: [
|
|
7064
|
-
{ ...host$
|
|
7075
|
+
{ ...host$a, property: 'width' },
|
|
7065
7076
|
{ ...phoneInput$1, property: 'width' },
|
|
7066
7077
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
7067
7078
|
],
|
|
7068
|
-
hostDirection: { ...host$
|
|
7079
|
+
hostDirection: { ...host$a, property: 'direction' },
|
|
7069
7080
|
|
|
7070
7081
|
inputBorderStyle: [
|
|
7071
7082
|
{ ...inputField$2, property: 'border-style' },
|
|
@@ -7115,7 +7126,7 @@ const PhoneFieldClass = compose(
|
|
|
7115
7126
|
}),
|
|
7116
7127
|
draggableMixin,
|
|
7117
7128
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7118
|
-
customMixin$
|
|
7129
|
+
customMixin$5
|
|
7119
7130
|
)(
|
|
7120
7131
|
createProxy({
|
|
7121
7132
|
slots: [],
|
|
@@ -7191,33 +7202,33 @@ const PhoneFieldClass = compose(
|
|
|
7191
7202
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7192
7203
|
`,
|
|
7193
7204
|
excludeAttrsSync: ['tabindex'],
|
|
7194
|
-
componentName: componentName$
|
|
7205
|
+
componentName: componentName$n,
|
|
7195
7206
|
})
|
|
7196
7207
|
);
|
|
7197
7208
|
|
|
7198
|
-
const vars$
|
|
7209
|
+
const vars$g = PhoneFieldClass.cssVarList;
|
|
7199
7210
|
|
|
7200
7211
|
const phoneField = {
|
|
7201
|
-
[vars$
|
|
7202
|
-
[vars$
|
|
7203
|
-
[vars$
|
|
7204
|
-
[vars$
|
|
7205
|
-
[vars$
|
|
7206
|
-
[vars$
|
|
7207
|
-
[vars$
|
|
7208
|
-
[vars$
|
|
7209
|
-
[vars$
|
|
7210
|
-
[vars$
|
|
7211
|
-
[vars$
|
|
7212
|
-
[vars$
|
|
7213
|
-
[vars$
|
|
7214
|
-
[vars$
|
|
7215
|
-
[vars$
|
|
7216
|
-
[vars$
|
|
7217
|
-
[vars$
|
|
7218
|
-
[vars$
|
|
7219
|
-
[vars$
|
|
7220
|
-
[vars$
|
|
7212
|
+
[vars$g.hostWidth]: refs.width,
|
|
7213
|
+
[vars$g.hostDirection]: refs.direction,
|
|
7214
|
+
[vars$g.fontSize]: refs.fontSize,
|
|
7215
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
|
7216
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
7217
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7218
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7219
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
|
7220
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7221
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
|
7222
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
|
7223
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
|
7224
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
|
7225
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
|
7226
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
|
7227
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
|
7228
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
|
7229
|
+
[vars$g.phoneInputWidth]: refs.minWidth,
|
|
7230
|
+
[vars$g.countryCodeInputWidth]: '5em',
|
|
7231
|
+
[vars$g.countryCodeDropdownWidth]: '20em',
|
|
7221
7232
|
|
|
7222
7233
|
// '@overlay': {
|
|
7223
7234
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -7227,18 +7238,18 @@ const phoneField = {
|
|
|
7227
7238
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
7228
7239
|
__proto__: null,
|
|
7229
7240
|
default: phoneField,
|
|
7230
|
-
vars: vars$
|
|
7241
|
+
vars: vars$g
|
|
7231
7242
|
});
|
|
7232
7243
|
|
|
7233
|
-
const componentName$
|
|
7244
|
+
const componentName$m = getComponentName('phone-field-internal-input-box');
|
|
7234
7245
|
|
|
7235
|
-
createBaseInputClass({ componentName: componentName$
|
|
7246
|
+
createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
|
7236
7247
|
|
|
7237
7248
|
const textVars = TextFieldClass.cssVarList;
|
|
7238
7249
|
|
|
7239
|
-
const componentName$
|
|
7250
|
+
const componentName$l = getComponentName('phone-input-box-field');
|
|
7240
7251
|
|
|
7241
|
-
const customMixin$
|
|
7252
|
+
const customMixin$4 = (superclass) =>
|
|
7242
7253
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
7243
7254
|
static get CountryCodes() {
|
|
7244
7255
|
return CountryCodes;
|
|
@@ -7250,15 +7261,15 @@ const customMixin$3 = (superclass) =>
|
|
|
7250
7261
|
const template = document.createElement('template');
|
|
7251
7262
|
|
|
7252
7263
|
template.innerHTML = `
|
|
7253
|
-
<${componentName$
|
|
7264
|
+
<${componentName$m}
|
|
7254
7265
|
tabindex="-1"
|
|
7255
7266
|
slot="input"
|
|
7256
|
-
></${componentName$
|
|
7267
|
+
></${componentName$m}>
|
|
7257
7268
|
`;
|
|
7258
7269
|
|
|
7259
7270
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7260
7271
|
|
|
7261
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7272
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
|
7262
7273
|
|
|
7263
7274
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7264
7275
|
includeAttrs: [
|
|
@@ -7275,7 +7286,7 @@ const customMixin$3 = (superclass) =>
|
|
|
7275
7286
|
}
|
|
7276
7287
|
};
|
|
7277
7288
|
|
|
7278
|
-
const { host: host$
|
|
7289
|
+
const { host: host$9, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
|
7279
7290
|
host: { selector: () => ':host' },
|
|
7280
7291
|
label: { selector: '::part(label)' },
|
|
7281
7292
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -7289,7 +7300,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7289
7300
|
createStyleMixin({
|
|
7290
7301
|
mappings: {
|
|
7291
7302
|
fontSize: [
|
|
7292
|
-
host$
|
|
7303
|
+
host$9,
|
|
7293
7304
|
inputField$1,
|
|
7294
7305
|
{
|
|
7295
7306
|
selector: TextFieldClass.componentName,
|
|
@@ -7297,9 +7308,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7297
7308
|
},
|
|
7298
7309
|
],
|
|
7299
7310
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
|
7300
|
-
hostWidth: { ...host$
|
|
7301
|
-
hostMinWidth: { ...host$
|
|
7302
|
-
hostDirection: { ...host$
|
|
7311
|
+
hostWidth: { ...host$9, property: 'width' },
|
|
7312
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
|
7313
|
+
hostDirection: { ...host$9, property: 'direction' },
|
|
7303
7314
|
|
|
7304
7315
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
|
7305
7316
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
|
@@ -7325,7 +7336,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7325
7336
|
}),
|
|
7326
7337
|
draggableMixin,
|
|
7327
7338
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7328
|
-
customMixin$
|
|
7339
|
+
customMixin$4
|
|
7329
7340
|
)(
|
|
7330
7341
|
createProxy({
|
|
7331
7342
|
slots: [],
|
|
@@ -7391,47 +7402,47 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7391
7402
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7392
7403
|
`,
|
|
7393
7404
|
excludeAttrsSync: ['tabindex'],
|
|
7394
|
-
componentName: componentName$
|
|
7405
|
+
componentName: componentName$l,
|
|
7395
7406
|
})
|
|
7396
7407
|
);
|
|
7397
7408
|
|
|
7398
|
-
const vars$
|
|
7409
|
+
const vars$f = PhoneFieldInputBoxClass.cssVarList;
|
|
7399
7410
|
|
|
7400
7411
|
const phoneInputBoxField = {
|
|
7401
|
-
[vars$
|
|
7402
|
-
[vars$
|
|
7403
|
-
[vars$
|
|
7404
|
-
[vars$
|
|
7405
|
-
[vars$
|
|
7406
|
-
[vars$
|
|
7407
|
-
[vars$
|
|
7408
|
-
[vars$
|
|
7409
|
-
[vars$
|
|
7410
|
-
[vars$
|
|
7411
|
-
[vars$
|
|
7412
|
-
[vars$
|
|
7413
|
-
[vars$
|
|
7414
|
-
[vars$
|
|
7415
|
-
[vars$
|
|
7416
|
-
[vars$
|
|
7417
|
-
[vars$
|
|
7418
|
-
[vars$
|
|
7412
|
+
[vars$f.hostWidth]: '16em',
|
|
7413
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
|
7414
|
+
[vars$f.hostDirection]: refs.direction,
|
|
7415
|
+
[vars$f.fontSize]: refs.fontSize,
|
|
7416
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
|
7417
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
|
7418
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7419
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7420
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
|
7421
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7422
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
|
7423
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
|
7424
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
|
7425
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
|
7426
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
|
7427
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
|
7428
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
|
7429
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
|
7419
7430
|
_fullWidth: {
|
|
7420
|
-
[vars$
|
|
7431
|
+
[vars$f.hostWidth]: refs.width,
|
|
7421
7432
|
},
|
|
7422
7433
|
};
|
|
7423
7434
|
|
|
7424
7435
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
7425
7436
|
__proto__: null,
|
|
7426
7437
|
default: phoneInputBoxField,
|
|
7427
|
-
vars: vars$
|
|
7438
|
+
vars: vars$f
|
|
7428
7439
|
});
|
|
7429
7440
|
|
|
7430
|
-
const componentName$
|
|
7441
|
+
const componentName$k = getComponentName('new-password-internal');
|
|
7431
7442
|
|
|
7432
|
-
const componentName$
|
|
7443
|
+
const componentName$j = getComponentName('new-password');
|
|
7433
7444
|
|
|
7434
|
-
const customMixin$
|
|
7445
|
+
const customMixin$3 = (superclass) =>
|
|
7435
7446
|
class NewPasswordMixinClass extends superclass {
|
|
7436
7447
|
init() {
|
|
7437
7448
|
super.init?.();
|
|
@@ -7439,16 +7450,16 @@ const customMixin$2 = (superclass) =>
|
|
|
7439
7450
|
const template = document.createElement('template');
|
|
7440
7451
|
|
|
7441
7452
|
template.innerHTML = `
|
|
7442
|
-
<${componentName$
|
|
7453
|
+
<${componentName$k}
|
|
7443
7454
|
name="new-password"
|
|
7444
7455
|
tabindex="-1"
|
|
7445
7456
|
slot="input"
|
|
7446
|
-
></${componentName$
|
|
7457
|
+
></${componentName$k}>
|
|
7447
7458
|
`;
|
|
7448
7459
|
|
|
7449
7460
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7450
7461
|
|
|
7451
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7462
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
|
7452
7463
|
|
|
7453
7464
|
forwardAttrs(this, this.inputElement, {
|
|
7454
7465
|
includeAttrs: [
|
|
@@ -7469,7 +7480,7 @@ const customMixin$2 = (superclass) =>
|
|
|
7469
7480
|
}
|
|
7470
7481
|
};
|
|
7471
7482
|
|
|
7472
|
-
const { host: host$
|
|
7483
|
+
const { host: host$8, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
|
7473
7484
|
host: { selector: () => ':host' },
|
|
7474
7485
|
label: { selector: '::part(label)' },
|
|
7475
7486
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
@@ -7482,7 +7493,7 @@ const NewPasswordClass = compose(
|
|
|
7482
7493
|
createStyleMixin({
|
|
7483
7494
|
mappings: {
|
|
7484
7495
|
fontSize: [
|
|
7485
|
-
host$
|
|
7496
|
+
host$8,
|
|
7486
7497
|
{},
|
|
7487
7498
|
{
|
|
7488
7499
|
selector: PasswordClass.componentName,
|
|
@@ -7491,19 +7502,19 @@ const NewPasswordClass = compose(
|
|
|
7491
7502
|
],
|
|
7492
7503
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
|
7493
7504
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
7494
|
-
hostWidth: { ...host$
|
|
7495
|
-
hostMinWidth: { ...host$
|
|
7505
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
7506
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
|
7496
7507
|
hostDirection: [
|
|
7497
|
-
{ ...host$
|
|
7508
|
+
{ ...host$8, property: 'direction' },
|
|
7498
7509
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
|
7499
7510
|
],
|
|
7500
|
-
inputsRequiredIndicator: { ...host$
|
|
7511
|
+
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
|
7501
7512
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
7502
7513
|
},
|
|
7503
7514
|
}),
|
|
7504
7515
|
draggableMixin,
|
|
7505
7516
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7506
|
-
customMixin$
|
|
7517
|
+
customMixin$3
|
|
7507
7518
|
)(
|
|
7508
7519
|
createProxy({
|
|
7509
7520
|
slots: [],
|
|
@@ -7555,33 +7566,33 @@ const NewPasswordClass = compose(
|
|
|
7555
7566
|
}
|
|
7556
7567
|
`,
|
|
7557
7568
|
excludeAttrsSync: ['tabindex'],
|
|
7558
|
-
componentName: componentName$
|
|
7569
|
+
componentName: componentName$j,
|
|
7559
7570
|
})
|
|
7560
7571
|
);
|
|
7561
7572
|
|
|
7562
|
-
const vars$
|
|
7573
|
+
const vars$e = NewPasswordClass.cssVarList;
|
|
7563
7574
|
|
|
7564
7575
|
const newPassword = {
|
|
7565
|
-
[vars$
|
|
7566
|
-
[vars$
|
|
7567
|
-
[vars$
|
|
7568
|
-
[vars$
|
|
7569
|
-
[vars$
|
|
7570
|
-
[vars$
|
|
7571
|
-
[vars$
|
|
7576
|
+
[vars$e.hostWidth]: refs.width,
|
|
7577
|
+
[vars$e.hostMinWidth]: refs.minWidth,
|
|
7578
|
+
[vars$e.hostDirection]: refs.direction,
|
|
7579
|
+
[vars$e.fontSize]: refs.fontSize,
|
|
7580
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
|
7581
|
+
[vars$e.spaceBetweenInputs]: '1em',
|
|
7582
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7572
7583
|
|
|
7573
7584
|
_required: {
|
|
7574
7585
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
7575
7586
|
// That's why we fake the required indicator on each input.
|
|
7576
7587
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
7577
|
-
[vars$
|
|
7588
|
+
[vars$e.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
7578
7589
|
},
|
|
7579
7590
|
};
|
|
7580
7591
|
|
|
7581
7592
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
7582
7593
|
__proto__: null,
|
|
7583
7594
|
default: newPassword,
|
|
7584
|
-
vars: vars$
|
|
7595
|
+
vars: vars$e
|
|
7585
7596
|
});
|
|
7586
7597
|
|
|
7587
7598
|
const getFileBase64 = (fileObj) => {
|
|
@@ -7596,7 +7607,7 @@ const getFilename = (fileObj) => {
|
|
|
7596
7607
|
return fileObj.name.replace(/^.*\\/, '');
|
|
7597
7608
|
};
|
|
7598
7609
|
|
|
7599
|
-
const componentName$
|
|
7610
|
+
const componentName$i = getComponentName('upload-file');
|
|
7600
7611
|
|
|
7601
7612
|
const observedAttributes$1 = [
|
|
7602
7613
|
'title',
|
|
@@ -7611,7 +7622,7 @@ const observedAttributes$1 = [
|
|
|
7611
7622
|
'icon',
|
|
7612
7623
|
];
|
|
7613
7624
|
|
|
7614
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
7625
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
|
|
7615
7626
|
|
|
7616
7627
|
class RawUploadFile extends BaseInputClass {
|
|
7617
7628
|
static get observedAttributes() {
|
|
@@ -7783,7 +7794,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
7783
7794
|
}
|
|
7784
7795
|
|
|
7785
7796
|
const buttonVars = ButtonClass.cssVarList;
|
|
7786
|
-
const { host: host$
|
|
7797
|
+
const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
|
7787
7798
|
host: { selector: () => ':host' },
|
|
7788
7799
|
wrapper: { selector: () => ':host > div' },
|
|
7789
7800
|
icon: { selector: () => '::slotted(*)' },
|
|
@@ -7802,11 +7813,11 @@ const UploadFileClass = compose(
|
|
|
7802
7813
|
borderWidth: {},
|
|
7803
7814
|
borderStyle: {},
|
|
7804
7815
|
borderRadius: {},
|
|
7805
|
-
hostHeight: { ...host$
|
|
7806
|
-
hostWidth: { ...host$
|
|
7816
|
+
hostHeight: { ...host$7, property: 'height' },
|
|
7817
|
+
hostWidth: { ...host$7, property: 'width' },
|
|
7807
7818
|
hostPadding: { property: 'padding' },
|
|
7808
7819
|
hostDirection: [
|
|
7809
|
-
{ ...host$
|
|
7820
|
+
{ ...host$7, property: 'direction' },
|
|
7810
7821
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
|
7811
7822
|
],
|
|
7812
7823
|
gap: { ...wrapper },
|
|
@@ -7826,77 +7837,77 @@ const UploadFileClass = compose(
|
|
|
7826
7837
|
componentNameValidationMixin
|
|
7827
7838
|
)(RawUploadFile);
|
|
7828
7839
|
|
|
7829
|
-
const vars$
|
|
7840
|
+
const vars$d = UploadFileClass.cssVarList;
|
|
7830
7841
|
|
|
7831
7842
|
const uploadFile = {
|
|
7832
|
-
[vars$
|
|
7833
|
-
[vars$
|
|
7834
|
-
[vars$
|
|
7843
|
+
[vars$d.hostDirection]: refs.direction,
|
|
7844
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
|
7845
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
|
7835
7846
|
|
|
7836
|
-
[vars$
|
|
7847
|
+
[vars$d.iconSize]: '2em',
|
|
7837
7848
|
|
|
7838
|
-
[vars$
|
|
7839
|
-
[vars$
|
|
7849
|
+
[vars$d.hostPadding]: '0.75em',
|
|
7850
|
+
[vars$d.gap]: '0.5em',
|
|
7840
7851
|
|
|
7841
|
-
[vars$
|
|
7842
|
-
[vars$
|
|
7843
|
-
[vars$
|
|
7852
|
+
[vars$d.fontSize]: '16px',
|
|
7853
|
+
[vars$d.titleFontWeight]: '500',
|
|
7854
|
+
[vars$d.lineHeight]: '1em',
|
|
7844
7855
|
|
|
7845
|
-
[vars$
|
|
7846
|
-
[vars$
|
|
7847
|
-
[vars$
|
|
7848
|
-
[vars$
|
|
7856
|
+
[vars$d.borderWidth]: refs.borderWidth,
|
|
7857
|
+
[vars$d.borderColor]: refs.borderColor,
|
|
7858
|
+
[vars$d.borderRadius]: refs.borderRadius,
|
|
7859
|
+
[vars$d.borderStyle]: 'dashed',
|
|
7849
7860
|
|
|
7850
7861
|
_required: {
|
|
7851
|
-
[vars$
|
|
7862
|
+
[vars$d.requiredIndicator]: refs.requiredIndicator,
|
|
7852
7863
|
},
|
|
7853
7864
|
|
|
7854
7865
|
size: {
|
|
7855
7866
|
xs: {
|
|
7856
|
-
[vars$
|
|
7857
|
-
[vars$
|
|
7858
|
-
[vars$
|
|
7859
|
-
[vars$
|
|
7860
|
-
[vars$
|
|
7867
|
+
[vars$d.hostHeight]: '196px',
|
|
7868
|
+
[vars$d.hostWidth]: '200px',
|
|
7869
|
+
[vars$d.titleFontSize]: '0.875em',
|
|
7870
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
|
7871
|
+
[vars$d.lineHeight]: '1.25em',
|
|
7861
7872
|
},
|
|
7862
7873
|
sm: {
|
|
7863
|
-
[vars$
|
|
7864
|
-
[vars$
|
|
7865
|
-
[vars$
|
|
7866
|
-
[vars$
|
|
7867
|
-
[vars$
|
|
7874
|
+
[vars$d.hostHeight]: '216px',
|
|
7875
|
+
[vars$d.hostWidth]: '230px',
|
|
7876
|
+
[vars$d.titleFontSize]: '1em',
|
|
7877
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
|
7878
|
+
[vars$d.lineHeight]: '1.25em',
|
|
7868
7879
|
},
|
|
7869
7880
|
md: {
|
|
7870
|
-
[vars$
|
|
7871
|
-
[vars$
|
|
7872
|
-
[vars$
|
|
7873
|
-
[vars$
|
|
7874
|
-
[vars$
|
|
7881
|
+
[vars$d.hostHeight]: '256px',
|
|
7882
|
+
[vars$d.hostWidth]: '312px',
|
|
7883
|
+
[vars$d.titleFontSize]: '1.125em',
|
|
7884
|
+
[vars$d.descriptionFontSize]: '1em',
|
|
7885
|
+
[vars$d.lineHeight]: '1.5em',
|
|
7875
7886
|
},
|
|
7876
7887
|
lg: {
|
|
7877
|
-
[vars$
|
|
7878
|
-
[vars$
|
|
7879
|
-
[vars$
|
|
7880
|
-
[vars$
|
|
7881
|
-
[vars$
|
|
7888
|
+
[vars$d.hostHeight]: '280px',
|
|
7889
|
+
[vars$d.hostWidth]: '336px',
|
|
7890
|
+
[vars$d.titleFontSize]: '1.125em',
|
|
7891
|
+
[vars$d.descriptionFontSize]: '1.125em',
|
|
7892
|
+
[vars$d.lineHeight]: '1.75em',
|
|
7882
7893
|
},
|
|
7883
7894
|
},
|
|
7884
7895
|
|
|
7885
7896
|
_fullWidth: {
|
|
7886
|
-
[vars$
|
|
7897
|
+
[vars$d.hostWidth]: refs.width,
|
|
7887
7898
|
},
|
|
7888
7899
|
};
|
|
7889
7900
|
|
|
7890
7901
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7891
7902
|
__proto__: null,
|
|
7892
7903
|
default: uploadFile,
|
|
7893
|
-
vars: vars$
|
|
7904
|
+
vars: vars$d
|
|
7894
7905
|
});
|
|
7895
7906
|
|
|
7896
|
-
const componentName$
|
|
7907
|
+
const componentName$h = getComponentName('button-selection-group-item');
|
|
7897
7908
|
|
|
7898
7909
|
class RawSelectItem extends createBaseClass({
|
|
7899
|
-
componentName: componentName$
|
|
7910
|
+
componentName: componentName$h,
|
|
7900
7911
|
baseSelector: ':host > descope-button',
|
|
7901
7912
|
}) {
|
|
7902
7913
|
get size() {
|
|
@@ -8003,39 +8014,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
|
8003
8014
|
componentNameValidationMixin
|
|
8004
8015
|
)(RawSelectItem);
|
|
8005
8016
|
|
|
8006
|
-
const globalRefs$
|
|
8017
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
8007
8018
|
|
|
8008
|
-
const vars$
|
|
8019
|
+
const vars$c = ButtonSelectionGroupItemClass.cssVarList;
|
|
8009
8020
|
|
|
8010
8021
|
const buttonSelectionGroupItem = {
|
|
8011
|
-
[vars$
|
|
8012
|
-
[vars$
|
|
8013
|
-
[vars$
|
|
8014
|
-
[vars$
|
|
8015
|
-
[vars$
|
|
8016
|
-
[vars$
|
|
8017
|
-
[vars$
|
|
8018
|
-
[vars$
|
|
8022
|
+
[vars$c.hostDirection]: 'inherit',
|
|
8023
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
|
|
8024
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
|
8025
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.light,
|
|
8026
|
+
[vars$c.borderStyle]: 'solid',
|
|
8027
|
+
[vars$c.borderRadius]: globalRefs$9.radius.sm,
|
|
8028
|
+
[vars$c.outlineColor]: 'transparent',
|
|
8029
|
+
[vars$c.borderWidth]: globalRefs$9.border.xs,
|
|
8019
8030
|
|
|
8020
8031
|
_hover: {
|
|
8021
|
-
[vars$
|
|
8032
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.highlight,
|
|
8022
8033
|
},
|
|
8023
8034
|
|
|
8024
8035
|
_focused: {
|
|
8025
|
-
[vars$
|
|
8036
|
+
[vars$c.outlineColor]: globalRefs$9.colors.surface.light,
|
|
8026
8037
|
},
|
|
8027
8038
|
|
|
8028
8039
|
_selected: {
|
|
8029
|
-
[vars$
|
|
8030
|
-
[vars$
|
|
8031
|
-
[vars$
|
|
8040
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.contrast,
|
|
8041
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.contrast,
|
|
8042
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.main,
|
|
8032
8043
|
},
|
|
8033
8044
|
};
|
|
8034
8045
|
|
|
8035
8046
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8036
8047
|
__proto__: null,
|
|
8037
8048
|
default: buttonSelectionGroupItem,
|
|
8038
|
-
vars: vars$
|
|
8049
|
+
vars: vars$c
|
|
8039
8050
|
});
|
|
8040
8051
|
|
|
8041
8052
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
@@ -8134,10 +8145,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
|
8134
8145
|
return BaseButtonSelectionGroupInternalClass;
|
|
8135
8146
|
};
|
|
8136
8147
|
|
|
8137
|
-
const componentName$
|
|
8148
|
+
const componentName$g = getComponentName('button-selection-group-internal');
|
|
8138
8149
|
|
|
8139
8150
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8140
|
-
componentName$
|
|
8151
|
+
componentName$g
|
|
8141
8152
|
) {
|
|
8142
8153
|
getSelectedNode() {
|
|
8143
8154
|
return this.items.find((item) => item.hasAttribute('selected'));
|
|
@@ -8293,7 +8304,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
|
8293
8304
|
}
|
|
8294
8305
|
};
|
|
8295
8306
|
|
|
8296
|
-
const { host: host$
|
|
8307
|
+
const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
|
8297
8308
|
host: { selector: () => ':host' },
|
|
8298
8309
|
label: { selector: '::part(label)' },
|
|
8299
8310
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -8302,9 +8313,9 @@ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
|
8302
8313
|
};
|
|
8303
8314
|
|
|
8304
8315
|
const buttonSelectionGroupMappings = {
|
|
8305
|
-
hostWidth: { ...host$
|
|
8306
|
-
hostDirection: { ...host$
|
|
8307
|
-
fontFamily: host$
|
|
8316
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
8317
|
+
hostDirection: { ...host$6, property: 'direction' },
|
|
8318
|
+
fontFamily: host$6,
|
|
8308
8319
|
labelTextColor: [
|
|
8309
8320
|
{ ...label$1, property: 'color' },
|
|
8310
8321
|
{ ...requiredIndicator$1, property: 'color' },
|
|
@@ -8369,7 +8380,7 @@ const buttonSelectionGroupStyles = `
|
|
|
8369
8380
|
${resetInputCursor('vaadin-text-field')}
|
|
8370
8381
|
`;
|
|
8371
8382
|
|
|
8372
|
-
const componentName$
|
|
8383
|
+
const componentName$f = getComponentName('button-selection-group');
|
|
8373
8384
|
|
|
8374
8385
|
const buttonSelectionGroupMixin = (superclass) =>
|
|
8375
8386
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8378,19 +8389,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
|
8378
8389
|
const template = document.createElement('template');
|
|
8379
8390
|
|
|
8380
8391
|
template.innerHTML = `
|
|
8381
|
-
<${componentName$
|
|
8392
|
+
<${componentName$g}
|
|
8382
8393
|
name="button-selection-group"
|
|
8383
8394
|
slot="input"
|
|
8384
8395
|
tabindex="-1"
|
|
8385
8396
|
part="internal-component"
|
|
8386
8397
|
>
|
|
8387
8398
|
<slot></slot>
|
|
8388
|
-
</${componentName$
|
|
8399
|
+
</${componentName$g}>
|
|
8389
8400
|
`;
|
|
8390
8401
|
|
|
8391
8402
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8392
8403
|
|
|
8393
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8404
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
|
8394
8405
|
|
|
8395
8406
|
forwardAttrs(this, this.inputElement, {
|
|
8396
8407
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
|
@@ -8415,11 +8426,11 @@ const ButtonSelectionGroupClass = compose(
|
|
|
8415
8426
|
wrappedEleName: 'vaadin-text-field',
|
|
8416
8427
|
style: () => buttonSelectionGroupStyles,
|
|
8417
8428
|
excludeAttrsSync: ['tabindex'],
|
|
8418
|
-
componentName: componentName$
|
|
8429
|
+
componentName: componentName$f,
|
|
8419
8430
|
})
|
|
8420
8431
|
);
|
|
8421
8432
|
|
|
8422
|
-
const globalRefs$
|
|
8433
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
8423
8434
|
|
|
8424
8435
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8425
8436
|
[vars.hostDirection]: refs.direction,
|
|
@@ -8427,26 +8438,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
|
8427
8438
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
8428
8439
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
8429
8440
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
8430
|
-
[vars.itemsSpacing]: globalRefs$
|
|
8441
|
+
[vars.itemsSpacing]: globalRefs$8.spacing.sm,
|
|
8431
8442
|
[vars.hostWidth]: refs.width,
|
|
8432
8443
|
});
|
|
8433
8444
|
|
|
8434
|
-
const vars$
|
|
8445
|
+
const vars$b = ButtonSelectionGroupClass.cssVarList;
|
|
8435
8446
|
|
|
8436
8447
|
const buttonSelectionGroup = {
|
|
8437
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8448
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
|
8438
8449
|
};
|
|
8439
8450
|
|
|
8440
8451
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8441
8452
|
__proto__: null,
|
|
8442
8453
|
default: buttonSelectionGroup,
|
|
8443
|
-
vars: vars$
|
|
8454
|
+
vars: vars$b
|
|
8444
8455
|
});
|
|
8445
8456
|
|
|
8446
|
-
const componentName$
|
|
8457
|
+
const componentName$e = getComponentName('button-multi-selection-group-internal');
|
|
8447
8458
|
|
|
8448
8459
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8449
|
-
componentName$
|
|
8460
|
+
componentName$e
|
|
8450
8461
|
) {
|
|
8451
8462
|
#getSelectedNodes() {
|
|
8452
8463
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
|
@@ -8549,7 +8560,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
|
8549
8560
|
}
|
|
8550
8561
|
}
|
|
8551
8562
|
|
|
8552
|
-
const componentName$
|
|
8563
|
+
const componentName$d = getComponentName('button-multi-selection-group');
|
|
8553
8564
|
|
|
8554
8565
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8555
8566
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8558,19 +8569,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
|
8558
8569
|
const template = document.createElement('template');
|
|
8559
8570
|
|
|
8560
8571
|
template.innerHTML = `
|
|
8561
|
-
<${componentName$
|
|
8572
|
+
<${componentName$e}
|
|
8562
8573
|
name="button-selection-group"
|
|
8563
8574
|
slot="input"
|
|
8564
8575
|
tabindex="-1"
|
|
8565
8576
|
part="internal-component"
|
|
8566
8577
|
>
|
|
8567
8578
|
<slot></slot>
|
|
8568
|
-
</${componentName$
|
|
8579
|
+
</${componentName$e}>
|
|
8569
8580
|
`;
|
|
8570
8581
|
|
|
8571
8582
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8572
8583
|
|
|
8573
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8584
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
|
8574
8585
|
|
|
8575
8586
|
forwardAttrs(this, this.inputElement, {
|
|
8576
8587
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
|
@@ -8595,25 +8606,25 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
|
8595
8606
|
wrappedEleName: 'vaadin-text-field',
|
|
8596
8607
|
style: () => buttonSelectionGroupStyles,
|
|
8597
8608
|
excludeAttrsSync: ['tabindex'],
|
|
8598
|
-
componentName: componentName$
|
|
8609
|
+
componentName: componentName$d,
|
|
8599
8610
|
})
|
|
8600
8611
|
);
|
|
8601
8612
|
|
|
8602
|
-
const vars$
|
|
8613
|
+
const vars$a = ButtonMultiSelectionGroupClass.cssVarList;
|
|
8603
8614
|
|
|
8604
8615
|
const buttonMultiSelectionGroup = {
|
|
8605
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8616
|
+
...createBaseButtonSelectionGroupMappings(vars$a),
|
|
8606
8617
|
};
|
|
8607
8618
|
|
|
8608
8619
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8609
8620
|
__proto__: null,
|
|
8610
8621
|
default: buttonMultiSelectionGroup,
|
|
8611
|
-
vars: vars$
|
|
8622
|
+
vars: vars$a
|
|
8612
8623
|
});
|
|
8613
8624
|
|
|
8614
|
-
const componentName$
|
|
8625
|
+
const componentName$c = getComponentName('modal');
|
|
8615
8626
|
|
|
8616
|
-
const customMixin$
|
|
8627
|
+
const customMixin$2 = (superclass) =>
|
|
8617
8628
|
class ModalMixinClass extends superclass {
|
|
8618
8629
|
get opened() {
|
|
8619
8630
|
return this.getAttribute('opened') === 'true';
|
|
@@ -8703,35 +8714,35 @@ const ModalClass = compose(
|
|
|
8703
8714
|
}),
|
|
8704
8715
|
draggableMixin,
|
|
8705
8716
|
componentNameValidationMixin,
|
|
8706
|
-
customMixin$
|
|
8717
|
+
customMixin$2
|
|
8707
8718
|
)(
|
|
8708
8719
|
createProxy({
|
|
8709
8720
|
slots: [''],
|
|
8710
8721
|
wrappedEleName: 'vaadin-dialog',
|
|
8711
8722
|
style: () => ``,
|
|
8712
8723
|
excludeAttrsSync: ['tabindex', 'opened'],
|
|
8713
|
-
componentName: componentName$
|
|
8724
|
+
componentName: componentName$c,
|
|
8714
8725
|
})
|
|
8715
8726
|
);
|
|
8716
8727
|
|
|
8717
|
-
const globalRefs$
|
|
8728
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
8718
8729
|
|
|
8719
8730
|
const compVars$1 = ModalClass.cssVarList;
|
|
8720
8731
|
|
|
8721
8732
|
const modal = {
|
|
8722
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
|
8723
|
-
[compVars$1.overlayShadow]: globalRefs$
|
|
8733
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
|
|
8734
|
+
[compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
|
|
8724
8735
|
[compVars$1.overlayWidth]: '540px',
|
|
8725
8736
|
};
|
|
8726
8737
|
|
|
8727
|
-
const vars$
|
|
8738
|
+
const vars$9 = {
|
|
8728
8739
|
...compVars$1,
|
|
8729
8740
|
};
|
|
8730
8741
|
|
|
8731
8742
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
|
8732
8743
|
__proto__: null,
|
|
8733
8744
|
default: modal,
|
|
8734
|
-
vars: vars$
|
|
8745
|
+
vars: vars$9
|
|
8735
8746
|
});
|
|
8736
8747
|
|
|
8737
8748
|
const isValidDataType = (data) => {
|
|
@@ -8744,7 +8755,7 @@ const isValidDataType = (data) => {
|
|
|
8744
8755
|
return isValid;
|
|
8745
8756
|
};
|
|
8746
8757
|
|
|
8747
|
-
const componentName$
|
|
8758
|
+
const componentName$b = getComponentName('grid');
|
|
8748
8759
|
|
|
8749
8760
|
const GridMixin = (superclass) =>
|
|
8750
8761
|
class GridMixinClass extends superclass {
|
|
@@ -8904,7 +8915,7 @@ const GridMixin = (superclass) =>
|
|
|
8904
8915
|
};
|
|
8905
8916
|
|
|
8906
8917
|
const {
|
|
8907
|
-
host: host$
|
|
8918
|
+
host: host$5,
|
|
8908
8919
|
headerRow,
|
|
8909
8920
|
headerRowCell,
|
|
8910
8921
|
contentRow,
|
|
@@ -8939,15 +8950,15 @@ const GridClass = compose(
|
|
|
8939
8950
|
fontWeight: { ...contentRow },
|
|
8940
8951
|
valueTextColor: { ...contentRow, property: 'color' },
|
|
8941
8952
|
backgroundColor: [
|
|
8942
|
-
{ ...host$
|
|
8953
|
+
{ ...host$5, property: 'background-color' },
|
|
8943
8954
|
{ ...contentRow, property: 'background-color' },
|
|
8944
8955
|
],
|
|
8945
8956
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
|
8946
8957
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
|
8947
|
-
borderColor: { ...host$
|
|
8948
|
-
borderWidth: { ...host$
|
|
8949
|
-
borderStyle: { ...host$
|
|
8950
|
-
borderRadius: { ...host$
|
|
8958
|
+
borderColor: { ...host$5, property: 'border-color' },
|
|
8959
|
+
borderWidth: { ...host$5, property: 'border-width' },
|
|
8960
|
+
borderStyle: { ...host$5, property: 'border-style' },
|
|
8961
|
+
borderRadius: { ...host$5, property: 'border-radius' },
|
|
8951
8962
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
|
8952
8963
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
|
8953
8964
|
separatorColor: [
|
|
@@ -8980,40 +8991,40 @@ const GridClass = compose(
|
|
|
8980
8991
|
}
|
|
8981
8992
|
`,
|
|
8982
8993
|
excludeAttrsSync: ['columns', 'tabindex'],
|
|
8983
|
-
componentName: componentName$
|
|
8994
|
+
componentName: componentName$b,
|
|
8984
8995
|
})
|
|
8985
8996
|
);
|
|
8986
8997
|
|
|
8987
|
-
const globalRefs$
|
|
8988
|
-
const vars$
|
|
8998
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
8999
|
+
const vars$8 = GridClass.cssVarList;
|
|
8989
9000
|
|
|
8990
9001
|
const grid = {
|
|
8991
|
-
[vars$
|
|
8992
|
-
[vars$
|
|
8993
|
-
[vars$
|
|
8994
|
-
[vars$
|
|
8995
|
-
[vars$
|
|
9002
|
+
[vars$8.hostWidth]: '100%',
|
|
9003
|
+
[vars$8.hostHeight]: '100%',
|
|
9004
|
+
[vars$8.hostMinHeight]: '400px',
|
|
9005
|
+
[vars$8.fontWeight]: '400',
|
|
9006
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
|
8996
9007
|
|
|
8997
|
-
[vars$
|
|
8998
|
-
[vars$
|
|
9008
|
+
[vars$8.fontSize]: refs.fontSize,
|
|
9009
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
|
8999
9010
|
|
|
9000
|
-
[vars$
|
|
9001
|
-
[vars$
|
|
9002
|
-
[vars$
|
|
9011
|
+
[vars$8.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
|
|
9012
|
+
[vars$8.activeSortIndicator]: globalRefs$6.colors.surface.dark,
|
|
9013
|
+
[vars$8.resizeHandleColor]: globalRefs$6.colors.surface.light,
|
|
9003
9014
|
|
|
9004
|
-
[vars$
|
|
9005
|
-
[vars$
|
|
9006
|
-
[vars$
|
|
9007
|
-
[vars$
|
|
9015
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
|
9016
|
+
[vars$8.borderStyle]: refs.borderStyle,
|
|
9017
|
+
[vars$8.borderRadius]: refs.borderRadius,
|
|
9018
|
+
[vars$8.borderColor]: 'transparent',
|
|
9008
9019
|
|
|
9009
|
-
[vars$
|
|
9010
|
-
[vars$
|
|
9020
|
+
[vars$8.headerRowTextColor]: globalRefs$6.colors.surface.dark,
|
|
9021
|
+
[vars$8.separatorColor]: globalRefs$6.colors.surface.light,
|
|
9011
9022
|
|
|
9012
|
-
[vars$
|
|
9013
|
-
[vars$
|
|
9023
|
+
[vars$8.valueTextColor]: globalRefs$6.colors.surface.contrast,
|
|
9024
|
+
[vars$8.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
|
|
9014
9025
|
|
|
9015
9026
|
_bordered: {
|
|
9016
|
-
[vars$
|
|
9027
|
+
[vars$8.borderColor]: refs.borderColor,
|
|
9017
9028
|
},
|
|
9018
9029
|
};
|
|
9019
9030
|
|
|
@@ -9021,10 +9032,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
|
9021
9032
|
__proto__: null,
|
|
9022
9033
|
default: grid,
|
|
9023
9034
|
grid: grid,
|
|
9024
|
-
vars: vars$
|
|
9035
|
+
vars: vars$8
|
|
9025
9036
|
});
|
|
9026
9037
|
|
|
9027
|
-
const componentName$
|
|
9038
|
+
const componentName$a = getComponentName('notification-card');
|
|
9028
9039
|
|
|
9029
9040
|
const notificationCardMixin = (superclass) =>
|
|
9030
9041
|
class NotificationCardMixinClass extends superclass {
|
|
@@ -9132,54 +9143,54 @@ const NotificationCardClass = compose(
|
|
|
9132
9143
|
}
|
|
9133
9144
|
`,
|
|
9134
9145
|
excludeAttrsSync: ['tabindex'],
|
|
9135
|
-
componentName: componentName$
|
|
9146
|
+
componentName: componentName$a,
|
|
9136
9147
|
})
|
|
9137
9148
|
);
|
|
9138
9149
|
|
|
9139
|
-
const globalRefs$
|
|
9140
|
-
const vars$
|
|
9150
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
9151
|
+
const vars$7 = NotificationCardClass.cssVarList;
|
|
9141
9152
|
|
|
9142
9153
|
const shadowColor = '#00000020';
|
|
9143
9154
|
|
|
9144
9155
|
const notification = {
|
|
9145
|
-
[vars$
|
|
9146
|
-
[vars$
|
|
9147
|
-
[vars$
|
|
9148
|
-
[vars$
|
|
9149
|
-
[vars$
|
|
9150
|
-
[vars$
|
|
9151
|
-
[vars$
|
|
9152
|
-
[vars$
|
|
9153
|
-
[vars$
|
|
9156
|
+
[vars$7.hostMinWidth]: '415px',
|
|
9157
|
+
[vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
|
|
9158
|
+
[vars$7.fontSize]: globalRefs$5.typography.body1.size,
|
|
9159
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.surface.main,
|
|
9160
|
+
[vars$7.textColor]: globalRefs$5.colors.surface.contrast,
|
|
9161
|
+
[vars$7.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
|
|
9162
|
+
[vars$7.verticalPadding]: '0.625em',
|
|
9163
|
+
[vars$7.horizontalPadding]: '1.5em',
|
|
9164
|
+
[vars$7.borderRadius]: globalRefs$5.radius.xs,
|
|
9154
9165
|
|
|
9155
9166
|
_bordered: {
|
|
9156
|
-
[vars$
|
|
9157
|
-
[vars$
|
|
9158
|
-
[vars$
|
|
9167
|
+
[vars$7.borderWidth]: globalRefs$5.border.sm,
|
|
9168
|
+
[vars$7.borderStyle]: 'solid',
|
|
9169
|
+
[vars$7.borderColor]: 'transparent',
|
|
9159
9170
|
},
|
|
9160
9171
|
|
|
9161
9172
|
size: {
|
|
9162
|
-
xs: { [vars$
|
|
9163
|
-
sm: { [vars$
|
|
9164
|
-
md: { [vars$
|
|
9165
|
-
lg: { [vars$
|
|
9173
|
+
xs: { [vars$7.fontSize]: '12px' },
|
|
9174
|
+
sm: { [vars$7.fontSize]: '14px' },
|
|
9175
|
+
md: { [vars$7.fontSize]: '16px' },
|
|
9176
|
+
lg: { [vars$7.fontSize]: '18px' },
|
|
9166
9177
|
},
|
|
9167
9178
|
|
|
9168
9179
|
mode: {
|
|
9169
9180
|
primary: {
|
|
9170
|
-
[vars$
|
|
9171
|
-
[vars$
|
|
9172
|
-
[vars$
|
|
9181
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.primary.main,
|
|
9182
|
+
[vars$7.textColor]: globalRefs$5.colors.primary.contrast,
|
|
9183
|
+
[vars$7.borderColor]: globalRefs$5.colors.primary.light,
|
|
9173
9184
|
},
|
|
9174
9185
|
success: {
|
|
9175
|
-
[vars$
|
|
9176
|
-
[vars$
|
|
9177
|
-
[vars$
|
|
9186
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.success.main,
|
|
9187
|
+
[vars$7.textColor]: globalRefs$5.colors.success.contrast,
|
|
9188
|
+
[vars$7.borderColor]: globalRefs$5.colors.success.light,
|
|
9178
9189
|
},
|
|
9179
9190
|
error: {
|
|
9180
|
-
[vars$
|
|
9181
|
-
[vars$
|
|
9182
|
-
[vars$
|
|
9191
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.error.main,
|
|
9192
|
+
[vars$7.textColor]: globalRefs$5.colors.error.contrast,
|
|
9193
|
+
[vars$7.borderColor]: globalRefs$5.colors.error.light,
|
|
9183
9194
|
},
|
|
9184
9195
|
},
|
|
9185
9196
|
};
|
|
@@ -9187,10 +9198,10 @@ const notification = {
|
|
|
9187
9198
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
|
9188
9199
|
__proto__: null,
|
|
9189
9200
|
default: notification,
|
|
9190
|
-
vars: vars$
|
|
9201
|
+
vars: vars$7
|
|
9191
9202
|
});
|
|
9192
9203
|
|
|
9193
|
-
const componentName$
|
|
9204
|
+
const componentName$9 = getComponentName('multi-select-combo-box');
|
|
9194
9205
|
|
|
9195
9206
|
const multiSelectComboBoxMixin = (superclass) =>
|
|
9196
9207
|
class MultiSelectComboBoxMixinClass extends superclass {
|
|
@@ -9578,7 +9589,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
|
9578
9589
|
};
|
|
9579
9590
|
|
|
9580
9591
|
const {
|
|
9581
|
-
host: host$
|
|
9592
|
+
host: host$4,
|
|
9582
9593
|
inputField,
|
|
9583
9594
|
inputElement,
|
|
9584
9595
|
placeholder,
|
|
@@ -9616,10 +9627,10 @@ const {
|
|
|
9616
9627
|
const MultiSelectComboBoxClass = compose(
|
|
9617
9628
|
createStyleMixin({
|
|
9618
9629
|
mappings: {
|
|
9619
|
-
hostWidth: { ...host$
|
|
9620
|
-
hostDirection: { ...host$
|
|
9630
|
+
hostWidth: { ...host$4, property: 'width' },
|
|
9631
|
+
hostDirection: { ...host$4, property: 'direction' },
|
|
9621
9632
|
// we apply font-size also on the host so we can set its width with em
|
|
9622
|
-
fontSize: [{}, host$
|
|
9633
|
+
fontSize: [{}, host$4],
|
|
9623
9634
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
|
9624
9635
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
|
9625
9636
|
labelTextColor: [
|
|
@@ -9794,73 +9805,73 @@ const MultiSelectComboBoxClass = compose(
|
|
|
9794
9805
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
|
9795
9806
|
// tries to override it, causing us to lose the user set placeholder.
|
|
9796
9807
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
|
9797
|
-
componentName: componentName$
|
|
9808
|
+
componentName: componentName$9,
|
|
9798
9809
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
|
9799
9810
|
})
|
|
9800
9811
|
);
|
|
9801
9812
|
|
|
9802
|
-
const globalRefs$
|
|
9803
|
-
const vars$
|
|
9813
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
9814
|
+
const vars$6 = MultiSelectComboBoxClass.cssVarList;
|
|
9804
9815
|
|
|
9805
9816
|
const multiSelectComboBox = {
|
|
9806
|
-
[vars$
|
|
9807
|
-
[vars$
|
|
9808
|
-
[vars$
|
|
9809
|
-
[vars$
|
|
9810
|
-
[vars$
|
|
9811
|
-
[vars$
|
|
9812
|
-
[vars$
|
|
9813
|
-
[vars$
|
|
9814
|
-
[vars$
|
|
9815
|
-
[vars$
|
|
9816
|
-
[vars$
|
|
9817
|
-
[vars$
|
|
9818
|
-
[vars$
|
|
9819
|
-
[vars$
|
|
9820
|
-
[vars$
|
|
9821
|
-
[vars$
|
|
9822
|
-
[vars$
|
|
9823
|
-
[vars$
|
|
9824
|
-
[vars$
|
|
9825
|
-
[vars$
|
|
9826
|
-
[vars$
|
|
9827
|
-
[vars$
|
|
9828
|
-
[vars$
|
|
9829
|
-
[vars$
|
|
9830
|
-
[vars$
|
|
9831
|
-
[vars$
|
|
9832
|
-
[vars$
|
|
9833
|
-
[vars$
|
|
9834
|
-
[vars$
|
|
9835
|
-
[vars$
|
|
9817
|
+
[vars$6.hostWidth]: refs.width,
|
|
9818
|
+
[vars$6.hostDirection]: refs.direction,
|
|
9819
|
+
[vars$6.fontSize]: refs.fontSize,
|
|
9820
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
|
9821
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
|
9822
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
9823
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
|
9824
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
|
9825
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
|
9826
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
|
9827
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
|
9828
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
|
9829
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
|
9830
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
|
9831
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
|
9832
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
|
9833
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
9834
|
+
[vars$6.inputBackgroundColor]: refs.backgroundColor,
|
|
9835
|
+
[vars$6.inputHorizontalPadding]: refs.horizontalPadding,
|
|
9836
|
+
[vars$6.inputVerticalPadding]: refs.verticalPadding,
|
|
9837
|
+
[vars$6.inputHeight]: refs.inputHeight,
|
|
9838
|
+
[vars$6.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
|
|
9839
|
+
[vars$6.inputDropdownButtonCursor]: 'pointer',
|
|
9840
|
+
[vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
9841
|
+
[vars$6.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
|
9842
|
+
[vars$6.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
|
|
9843
|
+
[vars$6.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
|
|
9844
|
+
[vars$6.chipFontSize]: refs.chipFontSize,
|
|
9845
|
+
[vars$6.chipTextColor]: globalRefs$4.colors.surface.contrast,
|
|
9846
|
+
[vars$6.chipBackgroundColor]: globalRefs$4.colors.surface.light,
|
|
9836
9847
|
|
|
9837
9848
|
_readonly: {
|
|
9838
|
-
[vars$
|
|
9849
|
+
[vars$6.inputDropdownButtonCursor]: 'default',
|
|
9839
9850
|
},
|
|
9840
9851
|
|
|
9841
9852
|
// Overlay theme exposed via the component:
|
|
9842
|
-
[vars$
|
|
9843
|
-
[vars$
|
|
9844
|
-
[vars$
|
|
9845
|
-
[vars$
|
|
9846
|
-
[vars$
|
|
9847
|
-
[vars$
|
|
9853
|
+
[vars$6.overlayFontSize]: refs.fontSize,
|
|
9854
|
+
[vars$6.overlayFontFamily]: refs.fontFamily,
|
|
9855
|
+
[vars$6.overlayCursor]: 'pointer',
|
|
9856
|
+
[vars$6.overlayItemBoxShadow]: 'none',
|
|
9857
|
+
[vars$6.overlayBackground]: refs.backgroundColor,
|
|
9858
|
+
[vars$6.overlayTextColor]: refs.valueTextColor,
|
|
9848
9859
|
|
|
9849
9860
|
// Overlay direct theme:
|
|
9850
|
-
[vars$
|
|
9851
|
-
[vars$
|
|
9861
|
+
[vars$6.overlay.minHeight]: '400px',
|
|
9862
|
+
[vars$6.overlay.margin]: '0',
|
|
9852
9863
|
};
|
|
9853
9864
|
|
|
9854
9865
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
|
9855
9866
|
__proto__: null,
|
|
9856
9867
|
default: multiSelectComboBox,
|
|
9857
9868
|
multiSelectComboBox: multiSelectComboBox,
|
|
9858
|
-
vars: vars$
|
|
9869
|
+
vars: vars$6
|
|
9859
9870
|
});
|
|
9860
9871
|
|
|
9861
|
-
const componentName$
|
|
9872
|
+
const componentName$8 = getComponentName('badge');
|
|
9862
9873
|
|
|
9863
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
|
9874
|
+
class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
|
|
9864
9875
|
constructor() {
|
|
9865
9876
|
super();
|
|
9866
9877
|
|
|
@@ -9871,6 +9882,9 @@ class RawBadge extends createBaseClass({ componentName: componentName$5, baseSel
|
|
|
9871
9882
|
}
|
|
9872
9883
|
:host > div {
|
|
9873
9884
|
width: 100%;
|
|
9885
|
+
text-overflow: ellipsis;
|
|
9886
|
+
overflow: hidden;
|
|
9887
|
+
white-space: nowrap;
|
|
9874
9888
|
}
|
|
9875
9889
|
</style>
|
|
9876
9890
|
<div>
|
|
@@ -9908,79 +9922,79 @@ const BadgeClass = compose(
|
|
|
9908
9922
|
componentNameValidationMixin
|
|
9909
9923
|
)(RawBadge);
|
|
9910
9924
|
|
|
9911
|
-
const globalRefs$
|
|
9912
|
-
const vars$
|
|
9925
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
9926
|
+
const vars$5 = BadgeClass.cssVarList;
|
|
9913
9927
|
|
|
9914
|
-
const badge = {
|
|
9915
|
-
[vars$
|
|
9916
|
-
[vars$
|
|
9928
|
+
const badge$1 = {
|
|
9929
|
+
[vars$5.hostWidth]: 'fit-content',
|
|
9930
|
+
[vars$5.hostDirection]: globalRefs$3.direction,
|
|
9917
9931
|
|
|
9918
|
-
[vars$
|
|
9932
|
+
[vars$5.textAlign]: 'center',
|
|
9919
9933
|
|
|
9920
|
-
[vars$
|
|
9921
|
-
[vars$
|
|
9934
|
+
[vars$5.fontFamily]: globalRefs$3.fonts.font1.family,
|
|
9935
|
+
[vars$5.fontWeight]: '400',
|
|
9922
9936
|
|
|
9923
|
-
[vars$
|
|
9924
|
-
[vars$
|
|
9937
|
+
[vars$5.verticalPadding]: '0.25em',
|
|
9938
|
+
[vars$5.horizontalPadding]: '0.5em',
|
|
9925
9939
|
|
|
9926
|
-
[vars$
|
|
9927
|
-
[vars$
|
|
9928
|
-
[vars$
|
|
9929
|
-
[vars$
|
|
9940
|
+
[vars$5.borderWidth]: globalRefs$3.border.xs,
|
|
9941
|
+
[vars$5.borderRadius]: globalRefs$3.radius.xs,
|
|
9942
|
+
[vars$5.borderColor]: 'transparent',
|
|
9943
|
+
[vars$5.borderStyle]: 'solid',
|
|
9930
9944
|
|
|
9931
9945
|
_fullWidth: {
|
|
9932
|
-
[vars$
|
|
9946
|
+
[vars$5.hostWidth]: '100%',
|
|
9933
9947
|
},
|
|
9934
9948
|
|
|
9935
9949
|
size: {
|
|
9936
|
-
xs: { [vars$
|
|
9937
|
-
sm: { [vars$
|
|
9938
|
-
md: { [vars$
|
|
9939
|
-
lg: { [vars$
|
|
9950
|
+
xs: { [vars$5.fontSize]: '12px' },
|
|
9951
|
+
sm: { [vars$5.fontSize]: '14px' },
|
|
9952
|
+
md: { [vars$5.fontSize]: '16px' },
|
|
9953
|
+
lg: { [vars$5.fontSize]: '18px' },
|
|
9940
9954
|
},
|
|
9941
9955
|
|
|
9942
9956
|
mode: {
|
|
9943
9957
|
default: {
|
|
9944
|
-
[vars$
|
|
9958
|
+
[vars$5.textColor]: globalRefs$3.colors.surface.dark,
|
|
9945
9959
|
_bordered: {
|
|
9946
|
-
[vars$
|
|
9960
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.light,
|
|
9947
9961
|
},
|
|
9948
9962
|
},
|
|
9949
9963
|
primary: {
|
|
9950
|
-
[vars$
|
|
9964
|
+
[vars$5.textColor]: globalRefs$3.colors.primary.main,
|
|
9951
9965
|
_bordered: {
|
|
9952
|
-
[vars$
|
|
9966
|
+
[vars$5.borderColor]: globalRefs$3.colors.primary.light,
|
|
9953
9967
|
},
|
|
9954
9968
|
},
|
|
9955
9969
|
secondary: {
|
|
9956
|
-
[vars$
|
|
9970
|
+
[vars$5.textColor]: globalRefs$3.colors.secondary.main,
|
|
9957
9971
|
_bordered: {
|
|
9958
|
-
[vars$
|
|
9972
|
+
[vars$5.borderColor]: globalRefs$3.colors.secondary.light,
|
|
9959
9973
|
},
|
|
9960
9974
|
},
|
|
9961
9975
|
error: {
|
|
9962
|
-
[vars$
|
|
9976
|
+
[vars$5.textColor]: globalRefs$3.colors.error.main,
|
|
9963
9977
|
_bordered: {
|
|
9964
|
-
[vars$
|
|
9978
|
+
[vars$5.borderColor]: globalRefs$3.colors.error.light,
|
|
9965
9979
|
},
|
|
9966
9980
|
},
|
|
9967
9981
|
success: {
|
|
9968
|
-
[vars$
|
|
9982
|
+
[vars$5.textColor]: globalRefs$3.colors.success.main,
|
|
9969
9983
|
_bordered: {
|
|
9970
|
-
[vars$
|
|
9984
|
+
[vars$5.borderColor]: globalRefs$3.colors.success.light,
|
|
9971
9985
|
},
|
|
9972
9986
|
},
|
|
9973
9987
|
},
|
|
9974
9988
|
};
|
|
9975
9989
|
|
|
9976
|
-
var badge$
|
|
9990
|
+
var badge$2 = /*#__PURE__*/Object.freeze({
|
|
9977
9991
|
__proto__: null,
|
|
9978
|
-
default: badge,
|
|
9979
|
-
vars: vars$
|
|
9992
|
+
default: badge$1,
|
|
9993
|
+
vars: vars$5
|
|
9980
9994
|
});
|
|
9981
9995
|
|
|
9982
|
-
const componentName$
|
|
9983
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
|
9996
|
+
const componentName$7 = getComponentName('avatar');
|
|
9997
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
|
|
9984
9998
|
constructor() {
|
|
9985
9999
|
super();
|
|
9986
10000
|
|
|
@@ -9990,7 +10004,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
9990
10004
|
display: inline-flex;
|
|
9991
10005
|
}
|
|
9992
10006
|
|
|
9993
|
-
.
|
|
10007
|
+
.editableBadge {
|
|
9994
10008
|
border: 1px solid;
|
|
9995
10009
|
border-radius: 100%;
|
|
9996
10010
|
height: fit-content;
|
|
@@ -10026,7 +10040,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10026
10040
|
|
|
10027
10041
|
<div class="wrapper">
|
|
10028
10042
|
<vaadin-avatar></vaadin-avatar>
|
|
10029
|
-
<div class="
|
|
10043
|
+
<div class="editableBadge">
|
|
10030
10044
|
<vaadin-icon icon="vaadin:pencil"></vaadin-icon>
|
|
10031
10045
|
</div>
|
|
10032
10046
|
</div>
|
|
@@ -10035,10 +10049,11 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10035
10049
|
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
|
10036
10050
|
|
|
10037
10051
|
forwardAttrs(this, this.avatarComponent, {
|
|
10038
|
-
includeAttrs: ['name', 'img'],
|
|
10052
|
+
includeAttrs: ['display-name', 'img'],
|
|
10053
|
+
mapAttrs: { 'display-name': 'name' },
|
|
10039
10054
|
});
|
|
10040
10055
|
|
|
10041
|
-
const editableIcon = this.shadowRoot.querySelector('.
|
|
10056
|
+
const editableIcon = this.shadowRoot.querySelector('.editableBadge');
|
|
10042
10057
|
|
|
10043
10058
|
observeAttributes(
|
|
10044
10059
|
this,
|
|
@@ -10054,18 +10069,19 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
|
10054
10069
|
}
|
|
10055
10070
|
}
|
|
10056
10071
|
|
|
10057
|
-
const { host: host$
|
|
10072
|
+
const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
|
10058
10073
|
host: { selector: () => ':host' },
|
|
10059
|
-
editableBadge: { selector: '> .
|
|
10074
|
+
editableBadge: { selector: '> .editableBadge' },
|
|
10060
10075
|
avatar: { selector: 'vaadin-avatar' },
|
|
10061
10076
|
};
|
|
10062
10077
|
|
|
10063
10078
|
const AvatarClass = compose(
|
|
10064
10079
|
createStyleMixin({
|
|
10065
10080
|
mappings: {
|
|
10066
|
-
hostWidth: { ...host$
|
|
10067
|
-
hostHeight: { ...host$
|
|
10068
|
-
|
|
10081
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
10082
|
+
hostHeight: { ...host$3, property: 'height' },
|
|
10083
|
+
cursor: [avatar$2, host$3],
|
|
10084
|
+
hostDirection: { ...host$3, property: 'direction' },
|
|
10069
10085
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
|
10070
10086
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
|
10071
10087
|
editableIconColor: { ...editableBadge, property: 'color' },
|
|
@@ -10077,16 +10093,20 @@ const AvatarClass = compose(
|
|
|
10077
10093
|
componentNameValidationMixin
|
|
10078
10094
|
)(RawAvatar);
|
|
10079
10095
|
|
|
10080
|
-
const globalRefs$
|
|
10096
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
10081
10097
|
const compVars = AvatarClass.cssVarList;
|
|
10082
10098
|
|
|
10083
10099
|
const avatar = {
|
|
10084
|
-
[compVars.hostDirection]: globalRefs$
|
|
10085
|
-
[compVars.editableIconColor]: globalRefs$
|
|
10086
|
-
[compVars.editableBorderColor]: globalRefs$
|
|
10087
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
|
10088
|
-
[compVars.avatarTextColor]: globalRefs$
|
|
10089
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
|
10100
|
+
[compVars.hostDirection]: globalRefs$2.direction,
|
|
10101
|
+
[compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
|
|
10102
|
+
[compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
|
|
10103
|
+
[compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
|
|
10104
|
+
[compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
|
|
10105
|
+
[compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
|
|
10106
|
+
|
|
10107
|
+
_editable: {
|
|
10108
|
+
[compVars.cursor]: 'pointer',
|
|
10109
|
+
},
|
|
10090
10110
|
|
|
10091
10111
|
size: {
|
|
10092
10112
|
xs: {
|
|
@@ -10108,23 +10128,23 @@ const avatar = {
|
|
|
10108
10128
|
},
|
|
10109
10129
|
};
|
|
10110
10130
|
|
|
10111
|
-
const vars$
|
|
10131
|
+
const vars$4 = {
|
|
10112
10132
|
...compVars,
|
|
10113
10133
|
};
|
|
10114
10134
|
|
|
10115
10135
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10116
10136
|
__proto__: null,
|
|
10117
10137
|
default: avatar,
|
|
10118
|
-
vars: vars$
|
|
10138
|
+
vars: vars$4
|
|
10119
10139
|
});
|
|
10120
10140
|
|
|
10121
|
-
const componentName$
|
|
10141
|
+
const componentName$6 = getComponentName('mappings-field-internal');
|
|
10122
10142
|
|
|
10123
|
-
createBaseInputClass({ componentName: componentName$
|
|
10143
|
+
createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
|
10124
10144
|
|
|
10125
|
-
const componentName$
|
|
10145
|
+
const componentName$5 = getComponentName('mappings-field');
|
|
10126
10146
|
|
|
10127
|
-
const customMixin = (superclass) =>
|
|
10147
|
+
const customMixin$1 = (superclass) =>
|
|
10128
10148
|
class MappingsFieldMixinClass extends superclass {
|
|
10129
10149
|
get defaultValues() {
|
|
10130
10150
|
const defaultValuesAttr = this.getAttribute('default-values');
|
|
@@ -10151,14 +10171,14 @@ const customMixin = (superclass) =>
|
|
|
10151
10171
|
const template = document.createElement('template');
|
|
10152
10172
|
|
|
10153
10173
|
template.innerHTML = `
|
|
10154
|
-
<${componentName$
|
|
10174
|
+
<${componentName$6}
|
|
10155
10175
|
tabindex="-1"
|
|
10156
|
-
></${componentName$
|
|
10176
|
+
></${componentName$6}>
|
|
10157
10177
|
`;
|
|
10158
10178
|
|
|
10159
10179
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10160
10180
|
|
|
10161
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
10181
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
|
10162
10182
|
|
|
10163
10183
|
forwardAttrs(this, this.inputElement, {
|
|
10164
10184
|
includeAttrs: [
|
|
@@ -10176,16 +10196,21 @@ const customMixin = (superclass) =>
|
|
|
10176
10196
|
],
|
|
10177
10197
|
});
|
|
10178
10198
|
|
|
10199
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
|
10200
|
+
// we want to reflect the change in the parent component
|
|
10201
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10202
|
+
|
|
10179
10203
|
this.setDefaultValues();
|
|
10180
10204
|
}
|
|
10181
10205
|
};
|
|
10182
10206
|
|
|
10183
10207
|
const {
|
|
10184
|
-
host,
|
|
10208
|
+
host: host$2,
|
|
10185
10209
|
helperText,
|
|
10186
10210
|
errorMessage,
|
|
10187
10211
|
mappingItem,
|
|
10188
10212
|
labels,
|
|
10213
|
+
labelsText,
|
|
10189
10214
|
valueLabel,
|
|
10190
10215
|
attrLabel,
|
|
10191
10216
|
separator,
|
|
@@ -10196,6 +10221,9 @@ const {
|
|
|
10196
10221
|
errorMessage: { selector: '::part(error-message)' },
|
|
10197
10222
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
|
10198
10223
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
|
10224
|
+
labelsText: {
|
|
10225
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
|
10226
|
+
},
|
|
10199
10227
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
|
10200
10228
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
|
10201
10229
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
|
@@ -10205,12 +10233,17 @@ const {
|
|
|
10205
10233
|
const MappingsFieldClass = compose(
|
|
10206
10234
|
createStyleMixin({
|
|
10207
10235
|
mappings: {
|
|
10208
|
-
hostWidth: { ...host, property: 'width' },
|
|
10209
|
-
hostDirection: { ...host, property: 'direction' },
|
|
10236
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
10237
|
+
hostDirection: { ...host$2, property: 'direction' },
|
|
10210
10238
|
// we apply font-size also on the host so we can set its width with em
|
|
10211
|
-
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
|
10239
|
+
fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
|
|
10212
10240
|
fontFamily: [helperText, errorMessage, labels],
|
|
10213
10241
|
separatorFontSize: { ...separator, property: 'font-size' },
|
|
10242
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
|
10243
|
+
labelsLineHeight: [
|
|
10244
|
+
{ ...labelsText, property: 'line-height' },
|
|
10245
|
+
{ ...labels, property: 'line-height' },
|
|
10246
|
+
],
|
|
10214
10247
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
|
10215
10248
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
|
10216
10249
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
|
@@ -10227,7 +10260,7 @@ const MappingsFieldClass = compose(
|
|
|
10227
10260
|
proxyParentValidation: true,
|
|
10228
10261
|
}),
|
|
10229
10262
|
componentNameValidationMixin,
|
|
10230
|
-
customMixin
|
|
10263
|
+
customMixin$1
|
|
10231
10264
|
)(
|
|
10232
10265
|
createProxy({
|
|
10233
10266
|
slots: [],
|
|
@@ -10274,35 +10307,402 @@ const MappingsFieldClass = compose(
|
|
|
10274
10307
|
'options',
|
|
10275
10308
|
'error-message',
|
|
10276
10309
|
],
|
|
10277
|
-
componentName: componentName$
|
|
10310
|
+
componentName: componentName$5,
|
|
10278
10311
|
})
|
|
10279
10312
|
);
|
|
10280
10313
|
|
|
10281
|
-
const globalRefs = getThemeRefs(globals);
|
|
10314
|
+
const globalRefs$1 = getThemeRefs(globals);
|
|
10282
10315
|
|
|
10283
|
-
const vars$
|
|
10316
|
+
const vars$3 = MappingsFieldClass.cssVarList;
|
|
10284
10317
|
|
|
10285
10318
|
const mappingsField = {
|
|
10286
|
-
[vars$
|
|
10287
|
-
[vars$
|
|
10288
|
-
[vars$
|
|
10289
|
-
[vars$
|
|
10290
|
-
[vars$
|
|
10291
|
-
[vars$
|
|
10292
|
-
[vars$
|
|
10319
|
+
[vars$3.hostWidth]: refs.width,
|
|
10320
|
+
[vars$3.hostDirection]: refs.direction,
|
|
10321
|
+
[vars$3.fontSize]: refs.fontSize,
|
|
10322
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
|
10323
|
+
[vars$3.separatorFontSize]: '14px',
|
|
10324
|
+
[vars$3.labelsFontSize]: '14px',
|
|
10325
|
+
[vars$3.labelsLineHeight]: '1',
|
|
10326
|
+
[vars$3.labelsMarginBottom]: '6px',
|
|
10327
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
|
10328
|
+
[vars$3.itemMarginBottom]: '1em',
|
|
10293
10329
|
// To be positioned correctly, the min width has to match the text field min width
|
|
10294
|
-
[vars$
|
|
10330
|
+
[vars$3.valueLabelMinWidth]: refs.minWidth,
|
|
10295
10331
|
// To be positioned correctly, the min width has to match the combo box field min width
|
|
10296
|
-
[vars$
|
|
10297
|
-
[vars$
|
|
10298
|
-
[vars$
|
|
10299
|
-
[vars$1.removeButtonWidth]: '60px',
|
|
10332
|
+
[vars$3.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
|
|
10333
|
+
[vars$3.separatorWidth]: '70px',
|
|
10334
|
+
[vars$3.removeButtonWidth]: '60px',
|
|
10300
10335
|
};
|
|
10301
10336
|
|
|
10302
10337
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
|
10303
10338
|
__proto__: null,
|
|
10304
10339
|
default: mappingsField,
|
|
10305
10340
|
mappingsField: mappingsField,
|
|
10341
|
+
vars: vars$3
|
|
10342
|
+
});
|
|
10343
|
+
|
|
10344
|
+
function deleteIcon() {
|
|
10345
|
+
return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
|
10346
|
+
}
|
|
10347
|
+
|
|
10348
|
+
function editIcon() {
|
|
10349
|
+
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;
|
|
10350
|
+
}
|
|
10351
|
+
|
|
10352
|
+
const componentName$4 = getComponentName('user-attribute');
|
|
10353
|
+
class RawUserAttribute extends createBaseClass({
|
|
10354
|
+
componentName: componentName$4,
|
|
10355
|
+
baseSelector: ':host > .root',
|
|
10356
|
+
}) {
|
|
10357
|
+
constructor() {
|
|
10358
|
+
super();
|
|
10359
|
+
|
|
10360
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
|
10361
|
+
<style>
|
|
10362
|
+
:host {
|
|
10363
|
+
display: inline-flex;
|
|
10364
|
+
}
|
|
10365
|
+
|
|
10366
|
+
vaadin-icon {
|
|
10367
|
+
color: currentcolor;
|
|
10368
|
+
}
|
|
10369
|
+
|
|
10370
|
+
.root {
|
|
10371
|
+
display: flex;
|
|
10372
|
+
width: 100%;
|
|
10373
|
+
height: 100%;
|
|
10374
|
+
align-items: center;
|
|
10375
|
+
}
|
|
10376
|
+
|
|
10377
|
+
.btn-wrapper {
|
|
10378
|
+
display: flex;
|
|
10379
|
+
justify-content: space-between;
|
|
10380
|
+
align-items: center;
|
|
10381
|
+
flex-grow: 0;
|
|
10382
|
+
}
|
|
10383
|
+
|
|
10384
|
+
.text-wrapper {
|
|
10385
|
+
display: flex;
|
|
10386
|
+
align-items: center;
|
|
10387
|
+
flex-grow: 1;
|
|
10388
|
+
}
|
|
10389
|
+
|
|
10390
|
+
descope-text::part(text-wrapper) {
|
|
10391
|
+
text-overflow: ellipsis;
|
|
10392
|
+
overflow: hidden;
|
|
10393
|
+
white-space: nowrap;
|
|
10394
|
+
width: initial;
|
|
10395
|
+
}
|
|
10396
|
+
|
|
10397
|
+
descope-text {
|
|
10398
|
+
display: inline-flex;
|
|
10399
|
+
}
|
|
10400
|
+
|
|
10401
|
+
descope-badge {
|
|
10402
|
+
margin-inline-end: 10px;
|
|
10403
|
+
}
|
|
10404
|
+
|
|
10405
|
+
descope-text[data-id="label-text"].required:after {
|
|
10406
|
+
content: '*';
|
|
10407
|
+
color: var(${TextClass.cssVarList.textColor});
|
|
10408
|
+
}
|
|
10409
|
+
</style>
|
|
10410
|
+
|
|
10411
|
+
|
|
10412
|
+
<div class="root">
|
|
10413
|
+
<div class="text-wrapper">
|
|
10414
|
+
<descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
|
|
10415
|
+
<descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
|
|
10416
|
+
</div>
|
|
10417
|
+
|
|
10418
|
+
<div class="btn-wrapper">
|
|
10419
|
+
<descope-badge mode="default" bordered="true" size="xs"></descope-badge>
|
|
10420
|
+
<descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
|
|
10421
|
+
<vaadin-icon src=${editIcon}></vaadin-icon>
|
|
10422
|
+
</descope-button>
|
|
10423
|
+
<descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
|
|
10424
|
+
<vaadin-icon src=${deleteIcon}></vaadin-icon>
|
|
10425
|
+
</descope-button>
|
|
10426
|
+
</div
|
|
10427
|
+
</div>
|
|
10428
|
+
`;
|
|
10429
|
+
|
|
10430
|
+
this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
|
|
10431
|
+
this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
|
|
10432
|
+
this.badge = this.shadowRoot.querySelector('descope-badge');
|
|
10433
|
+
this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
|
|
10434
|
+
this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
|
|
10435
|
+
}
|
|
10436
|
+
|
|
10437
|
+
onLabelChange() {
|
|
10438
|
+
this.labelText.innerText = this.label;
|
|
10439
|
+
this.labelText.setAttribute('title', this.label);
|
|
10440
|
+
}
|
|
10441
|
+
|
|
10442
|
+
onValueOrPlaceholderChange() {
|
|
10443
|
+
const text = this.value || this.placeholder;
|
|
10444
|
+
const mode = this.value ? 'primary' : 'secondary';
|
|
10445
|
+
|
|
10446
|
+
this.valueText.innerText = text;
|
|
10447
|
+
this.valueText.setAttribute('title', text);
|
|
10448
|
+
this.valueText.setAttribute('mode', mode);
|
|
10449
|
+
}
|
|
10450
|
+
|
|
10451
|
+
onBadgeLabelChange() {
|
|
10452
|
+
if (!this.badgeLabel) {
|
|
10453
|
+
this.badge.style.display = 'none';
|
|
10454
|
+
} else {
|
|
10455
|
+
this.badge.innerText = this.badgeLabel;
|
|
10456
|
+
this.badge.style.display = '';
|
|
10457
|
+
}
|
|
10458
|
+
}
|
|
10459
|
+
|
|
10460
|
+
onBadgeTooltipTextChange() {
|
|
10461
|
+
this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
|
|
10462
|
+
}
|
|
10463
|
+
|
|
10464
|
+
onIsRequiredChange() {
|
|
10465
|
+
this.labelText.classList.toggle('required', this.isRequired);
|
|
10466
|
+
}
|
|
10467
|
+
|
|
10468
|
+
get label() {
|
|
10469
|
+
return this.getAttribute('label') || '';
|
|
10470
|
+
}
|
|
10471
|
+
|
|
10472
|
+
get value() {
|
|
10473
|
+
return this.getAttribute('value') || '';
|
|
10474
|
+
}
|
|
10475
|
+
|
|
10476
|
+
get placeholder() {
|
|
10477
|
+
return this.getAttribute('placeholder') || '';
|
|
10478
|
+
}
|
|
10479
|
+
|
|
10480
|
+
get isRequired() {
|
|
10481
|
+
return this.getAttribute('required') === 'true';
|
|
10482
|
+
}
|
|
10483
|
+
|
|
10484
|
+
get badgeLabel() {
|
|
10485
|
+
return this.getAttribute('badge-label') || '';
|
|
10486
|
+
}
|
|
10487
|
+
|
|
10488
|
+
get badgeTooltipText() {
|
|
10489
|
+
return this.getAttribute('badge-tooltip-text') || '';
|
|
10490
|
+
}
|
|
10491
|
+
|
|
10492
|
+
init() {
|
|
10493
|
+
this.onLabelChange();
|
|
10494
|
+
this.onValueOrPlaceholderChange();
|
|
10495
|
+
this.onIsRequiredChange();
|
|
10496
|
+
this.onBadgeLabelChange();
|
|
10497
|
+
this.onBadgeTooltipTextChange();
|
|
10498
|
+
|
|
10499
|
+
this.deleteButton.addEventListener('click', () =>
|
|
10500
|
+
this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
|
|
10501
|
+
);
|
|
10502
|
+
|
|
10503
|
+
this.editButton.addEventListener('click', () =>
|
|
10504
|
+
this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
|
|
10505
|
+
);
|
|
10506
|
+
}
|
|
10507
|
+
|
|
10508
|
+
static get observedAttributes() {
|
|
10509
|
+
return [
|
|
10510
|
+
'label',
|
|
10511
|
+
'value',
|
|
10512
|
+
'placeholder',
|
|
10513
|
+
'required',
|
|
10514
|
+
'badge-label',
|
|
10515
|
+
'badge-tooltip-text',
|
|
10516
|
+
].concat(super.observedAttributes);
|
|
10517
|
+
}
|
|
10518
|
+
|
|
10519
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
10520
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
|
10521
|
+
|
|
10522
|
+
if (oldValue === newValue) {
|
|
10523
|
+
return;
|
|
10524
|
+
}
|
|
10525
|
+
|
|
10526
|
+
if (name === 'label') {
|
|
10527
|
+
this.onLabelChange();
|
|
10528
|
+
} else if (name === 'value' || name === 'placeholder') {
|
|
10529
|
+
this.onValueOrPlaceholderChange();
|
|
10530
|
+
} else if (name === 'required') {
|
|
10531
|
+
this.onIsRequiredChange();
|
|
10532
|
+
} else if (name === 'badge-label') {
|
|
10533
|
+
this.onBadgeLabelChange();
|
|
10534
|
+
} else if (name === 'badge-tooltip-text') {
|
|
10535
|
+
this.onBadgeTooltipTextChange();
|
|
10536
|
+
}
|
|
10537
|
+
}
|
|
10538
|
+
}
|
|
10539
|
+
|
|
10540
|
+
const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10541
|
+
host: { selector: () => ':host' },
|
|
10542
|
+
textFields: { selector: 'descope-text' },
|
|
10543
|
+
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
|
10544
|
+
labelText: { selector: 'descope-text[data-id="label-text"]' },
|
|
10545
|
+
buttons: { selector: 'descope-button' },
|
|
10546
|
+
badge: { selector: 'descope-badge' },
|
|
10547
|
+
textWrapper: { selector: ' .text-wrapper' },
|
|
10548
|
+
};
|
|
10549
|
+
|
|
10550
|
+
const UserAttributeClass = compose(
|
|
10551
|
+
createStyleMixin({
|
|
10552
|
+
mappings: {
|
|
10553
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
10554
|
+
hostMinWidth: { ...host$1, property: 'min-width' },
|
|
10555
|
+
hostDirection: [
|
|
10556
|
+
{ ...host$1, property: 'direction' },
|
|
10557
|
+
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
|
10558
|
+
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
|
10559
|
+
{ ...badge, property: BadgeClass.cssVarList.hostDirection },
|
|
10560
|
+
],
|
|
10561
|
+
labelTextWidth: { ...labelText, property: 'width' },
|
|
10562
|
+
valueTextWidth: { ...valueText, property: 'width' },
|
|
10563
|
+
badgeMaxWidth: { ...badge, property: 'max-width' },
|
|
10564
|
+
itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
|
|
10565
|
+
},
|
|
10566
|
+
}),
|
|
10567
|
+
draggableMixin,
|
|
10568
|
+
componentNameValidationMixin
|
|
10569
|
+
)(RawUserAttribute);
|
|
10570
|
+
|
|
10571
|
+
const globalRefs = getThemeRefs(globals);
|
|
10572
|
+
const vars$2 = UserAttributeClass.cssVarList;
|
|
10573
|
+
|
|
10574
|
+
const userAttribute = {
|
|
10575
|
+
[vars$2.hostDirection]: globalRefs.direction,
|
|
10576
|
+
[vars$2.labelTextWidth]: '150px',
|
|
10577
|
+
[vars$2.valueTextWidth]: '200px',
|
|
10578
|
+
[vars$2.badgeMaxWidth]: '85px',
|
|
10579
|
+
[vars$2.itemsGap]: '16px',
|
|
10580
|
+
[vars$2.hostMinWidth]: '530px',
|
|
10581
|
+
_fullWidth: {
|
|
10582
|
+
[vars$2.hostWidth]: '100%',
|
|
10583
|
+
},
|
|
10584
|
+
};
|
|
10585
|
+
|
|
10586
|
+
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
|
10587
|
+
__proto__: null,
|
|
10588
|
+
default: userAttribute,
|
|
10589
|
+
vars: vars$2
|
|
10590
|
+
});
|
|
10591
|
+
|
|
10592
|
+
const componentName$3 = getComponentName('saml-group-mappings-internal');
|
|
10593
|
+
|
|
10594
|
+
createBaseInputClass({ componentName: componentName$3, baseSelector: '' });
|
|
10595
|
+
|
|
10596
|
+
const componentName$2 = getComponentName('saml-group-mappings');
|
|
10597
|
+
|
|
10598
|
+
const customMixin = (superclass) =>
|
|
10599
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
|
10600
|
+
init() {
|
|
10601
|
+
super.init?.();
|
|
10602
|
+
|
|
10603
|
+
const template = document.createElement('template');
|
|
10604
|
+
|
|
10605
|
+
template.innerHTML = `
|
|
10606
|
+
<${componentName$3}
|
|
10607
|
+
tabindex="-1"
|
|
10608
|
+
></${componentName$3}>
|
|
10609
|
+
`;
|
|
10610
|
+
|
|
10611
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10612
|
+
|
|
10613
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
|
10614
|
+
|
|
10615
|
+
forwardAttrs(this, this.inputElement, {
|
|
10616
|
+
includeAttrs: [
|
|
10617
|
+
'size',
|
|
10618
|
+
'full-width',
|
|
10619
|
+
'label-group',
|
|
10620
|
+
'label-value',
|
|
10621
|
+
'label-attr',
|
|
10622
|
+
'button-label',
|
|
10623
|
+
'separator',
|
|
10624
|
+
'options',
|
|
10625
|
+
'readonly',
|
|
10626
|
+
'disabled',
|
|
10627
|
+
],
|
|
10628
|
+
});
|
|
10629
|
+
|
|
10630
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10631
|
+
}
|
|
10632
|
+
};
|
|
10633
|
+
|
|
10634
|
+
const { host, groupInput } = {
|
|
10635
|
+
host: { selector: () => ':host' },
|
|
10636
|
+
groupInput: { selector: 'descope-text-field' },
|
|
10637
|
+
};
|
|
10638
|
+
|
|
10639
|
+
const SamlGroupMappingsClass = compose(
|
|
10640
|
+
createStyleMixin({
|
|
10641
|
+
mappings: {
|
|
10642
|
+
hostWidth: { ...host, property: 'width' },
|
|
10643
|
+
hostDirection: { ...host, property: 'direction' },
|
|
10644
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
|
10645
|
+
},
|
|
10646
|
+
}),
|
|
10647
|
+
draggableMixin,
|
|
10648
|
+
composedProxyInputMixin({
|
|
10649
|
+
proxyProps: ['value', 'selectionStart'],
|
|
10650
|
+
inputEvent: 'input',
|
|
10651
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
|
10652
|
+
proxyParentValidation: true,
|
|
10653
|
+
}),
|
|
10654
|
+
componentNameValidationMixin,
|
|
10655
|
+
customMixin
|
|
10656
|
+
)(
|
|
10657
|
+
createProxy({
|
|
10658
|
+
slots: [],
|
|
10659
|
+
wrappedEleName: 'vaadin-custom-field',
|
|
10660
|
+
style: () => `
|
|
10661
|
+
:host {
|
|
10662
|
+
display: inline-flex;
|
|
10663
|
+
max-width: 100%;
|
|
10664
|
+
direction: ltr;
|
|
10665
|
+
}
|
|
10666
|
+
|
|
10667
|
+
vaadin-custom-field {
|
|
10668
|
+
line-height: unset;
|
|
10669
|
+
width: 100%;
|
|
10670
|
+
}
|
|
10671
|
+
|
|
10672
|
+
descope-text-field {
|
|
10673
|
+
width: auto;
|
|
10674
|
+
}
|
|
10675
|
+
|
|
10676
|
+
descope-mappings-field {
|
|
10677
|
+
display: block;
|
|
10678
|
+
}
|
|
10679
|
+
`,
|
|
10680
|
+
excludeAttrsSync: [
|
|
10681
|
+
'tabindex',
|
|
10682
|
+
'label-group',
|
|
10683
|
+
'label-value',
|
|
10684
|
+
'label-attr',
|
|
10685
|
+
'button-label',
|
|
10686
|
+
'separator',
|
|
10687
|
+
'options',
|
|
10688
|
+
'error-message',
|
|
10689
|
+
],
|
|
10690
|
+
componentName: componentName$2,
|
|
10691
|
+
})
|
|
10692
|
+
);
|
|
10693
|
+
|
|
10694
|
+
const vars$1 = SamlGroupMappingsClass.cssVarList;
|
|
10695
|
+
|
|
10696
|
+
const samlGroupMappings = {
|
|
10697
|
+
[vars$1.hostWidth]: refs.width,
|
|
10698
|
+
[vars$1.hostDirection]: refs.direction,
|
|
10699
|
+
[vars$1.groupNameInputMarginBottom]: '1em',
|
|
10700
|
+
};
|
|
10701
|
+
|
|
10702
|
+
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
|
10703
|
+
__proto__: null,
|
|
10704
|
+
default: samlGroupMappings,
|
|
10705
|
+
samlGroupMappings: samlGroupMappings,
|
|
10306
10706
|
vars: vars$1
|
|
10307
10707
|
});
|
|
10308
10708
|
|
|
@@ -10339,9 +10739,11 @@ const components = {
|
|
|
10339
10739
|
grid: grid$1,
|
|
10340
10740
|
notificationCard,
|
|
10341
10741
|
multiSelectComboBox: multiSelectComboBox$1,
|
|
10342
|
-
badge: badge$
|
|
10742
|
+
badge: badge$2,
|
|
10343
10743
|
avatar: avatar$1,
|
|
10344
10744
|
mappingsField: mappingsField$1,
|
|
10745
|
+
userAttribute: userAttribute$1,
|
|
10746
|
+
samlGroupMappings: samlGroupMappings$1,
|
|
10345
10747
|
};
|
|
10346
10748
|
|
|
10347
10749
|
const theme = Object.keys(components).reduce(
|
|
@@ -10354,7 +10756,7 @@ const vars = Object.keys(components).reduce(
|
|
|
10354
10756
|
);
|
|
10355
10757
|
|
|
10356
10758
|
const defaultTheme = { globals, components: theme };
|
|
10357
|
-
const themeVars = { globals: vars$
|
|
10759
|
+
const themeVars = { globals: vars$C, components: vars };
|
|
10358
10760
|
|
|
10359
10761
|
const colors = {
|
|
10360
10762
|
surface: {
|
|
@@ -10684,12 +11086,14 @@ exports.PasswordClass = PasswordClass;
|
|
|
10684
11086
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
10685
11087
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
10686
11088
|
exports.RecaptchaClass = RecaptchaClass;
|
|
11089
|
+
exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
|
|
10687
11090
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
10688
11091
|
exports.TextAreaClass = TextAreaClass;
|
|
10689
11092
|
exports.TextClass = TextClass;
|
|
10690
11093
|
exports.TextFieldClass = TextFieldClass;
|
|
10691
11094
|
exports.TotpImageClass = TotpImageClass;
|
|
10692
11095
|
exports.UploadFileClass = UploadFileClass;
|
|
11096
|
+
exports.UserAttributeClass = UserAttributeClass;
|
|
10693
11097
|
exports.componentsThemeManager = componentsThemeManager;
|
|
10694
11098
|
exports.createComponentsTheme = createComponentsTheme;
|
|
10695
11099
|
exports.createHelperVars = createHelperVars;
|