@descope/web-components-ui 1.0.282 → 1.0.284
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1081 -935
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1081 -940
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1621.js +1 -1
- package/dist/umd/{3280.js → 2106.js} +5 -129
- package/dist/umd/{3280.js.LICENSE.txt → 2106.js.LICENSE.txt} +0 -6
- package/dist/umd/2775.js +240 -0
- package/dist/umd/2775.js.LICENSE.txt +17 -0
- package/dist/umd/3003.js +1 -1
- package/dist/umd/3249.js +2 -0
- package/dist/umd/3249.js.LICENSE.txt +5 -0
- package/dist/umd/3373.js +2 -0
- package/dist/umd/3373.js.LICENSE.txt +5 -0
- package/dist/umd/4946.js +2 -0
- package/dist/umd/4946.js.LICENSE.txt +5 -0
- package/dist/umd/6091.js +2 -1
- package/dist/umd/6606.js +17 -0
- package/dist/umd/7044.js +1 -1
- package/dist/umd/7531.js +1 -1
- package/dist/umd/9383.js +94 -0
- package/dist/umd/descope-avatar-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +126 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js.LICENSE.txt +5 -0
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-avatar/AvatarClass.js +102 -0
- package/src/components/descope-avatar/index.js +8 -0
- package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +2 -2
- package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js +5 -7
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/avatar.js +40 -0
- package/src/theme/components/index.js +2 -0
- package/dist/umd/3660.js +0 -17
- package/dist/umd/5345.js +0 -94
- package/dist/umd/7262.js +0 -1
- /package/dist/umd/{3660.js.LICENSE.txt → 6606.js.LICENSE.txt} +0 -0
- /package/dist/umd/{5345.js.LICENSE.txt → 9383.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -2,6 +2,9 @@
|
|
2
2
|
|
3
3
|
var merge = require('lodash.merge');
|
4
4
|
var Color = require('color');
|
5
|
+
require('@vaadin/avatar');
|
6
|
+
require('@vaadin/icon');
|
7
|
+
require('@vaadin/icons');
|
5
8
|
|
6
9
|
const DESCOPE_PREFIX = 'descope';
|
7
10
|
const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
|
@@ -566,7 +569,7 @@ const globals = {
|
|
566
569
|
fonts,
|
567
570
|
direction,
|
568
571
|
};
|
569
|
-
const vars$
|
572
|
+
const vars$A = getThemeVars(globals);
|
570
573
|
|
571
574
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
572
575
|
|
@@ -2505,7 +2508,7 @@ const clickableMixin = (superclass) =>
|
|
2505
2508
|
}
|
2506
2509
|
};
|
2507
2510
|
|
2508
|
-
const componentName$
|
2511
|
+
const componentName$I = getComponentName('button');
|
2509
2512
|
|
2510
2513
|
const resetStyles = `
|
2511
2514
|
:host {
|
@@ -2543,7 +2546,7 @@ const iconStyles = `
|
|
2543
2546
|
|
2544
2547
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
2545
2548
|
|
2546
|
-
const { host: host$
|
2549
|
+
const { host: host$j, label: label$a } = {
|
2547
2550
|
host: { selector: () => ':host' },
|
2548
2551
|
label: { selector: '::part(label)' },
|
2549
2552
|
};
|
@@ -2555,7 +2558,7 @@ const ButtonClass = compose(
|
|
2555
2558
|
mappings: {
|
2556
2559
|
hostWidth: { property: 'width' },
|
2557
2560
|
hostHeight: { property: 'height' },
|
2558
|
-
hostDirection: { ...host$
|
2561
|
+
hostDirection: { ...host$j, property: 'direction' },
|
2559
2562
|
fontSize: {},
|
2560
2563
|
fontFamily: {},
|
2561
2564
|
|
@@ -2607,7 +2610,7 @@ const ButtonClass = compose(
|
|
2607
2610
|
}
|
2608
2611
|
`,
|
2609
2612
|
excludeAttrsSync: ['tabindex'],
|
2610
|
-
componentName: componentName$
|
2613
|
+
componentName: componentName$I,
|
2611
2614
|
})
|
2612
2615
|
);
|
2613
2616
|
|
@@ -2644,137 +2647,137 @@ loadingIndicatorStyles = `
|
|
2644
2647
|
}
|
2645
2648
|
`;
|
2646
2649
|
|
2647
|
-
const globalRefs$
|
2648
|
-
const compVars$
|
2650
|
+
const globalRefs$j = getThemeRefs(globals);
|
2651
|
+
const compVars$5 = ButtonClass.cssVarList;
|
2649
2652
|
|
2650
2653
|
const mode = {
|
2651
|
-
primary: globalRefs$
|
2652
|
-
secondary: globalRefs$
|
2653
|
-
success: globalRefs$
|
2654
|
-
error: globalRefs$
|
2655
|
-
surface: globalRefs$
|
2654
|
+
primary: globalRefs$j.colors.primary,
|
2655
|
+
secondary: globalRefs$j.colors.secondary,
|
2656
|
+
success: globalRefs$j.colors.success,
|
2657
|
+
error: globalRefs$j.colors.error,
|
2658
|
+
surface: globalRefs$j.colors.surface,
|
2656
2659
|
};
|
2657
2660
|
|
2658
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2661
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
|
2659
2662
|
|
2660
2663
|
const button = {
|
2661
2664
|
...helperTheme$3,
|
2662
2665
|
|
2663
|
-
[compVars$
|
2666
|
+
[compVars$5.fontFamily]: globalRefs$j.fonts.font1.family,
|
2664
2667
|
|
2665
|
-
[compVars$
|
2666
|
-
[compVars$
|
2667
|
-
[compVars$
|
2668
|
-
[compVars$
|
2668
|
+
[compVars$5.cursor]: 'pointer',
|
2669
|
+
[compVars$5.hostHeight]: '3em',
|
2670
|
+
[compVars$5.hostWidth]: 'auto',
|
2671
|
+
[compVars$5.hostDirection]: globalRefs$j.direction,
|
2669
2672
|
|
2670
|
-
[compVars$
|
2671
|
-
[compVars$
|
2672
|
-
[compVars$
|
2673
|
-
[compVars$
|
2673
|
+
[compVars$5.borderRadius]: globalRefs$j.radius.sm,
|
2674
|
+
[compVars$5.borderWidth]: globalRefs$j.border.xs,
|
2675
|
+
[compVars$5.borderStyle]: 'solid',
|
2676
|
+
[compVars$5.borderColor]: 'transparent',
|
2674
2677
|
|
2675
|
-
[compVars$
|
2678
|
+
[compVars$5.labelSpacing]: '0.25em',
|
2676
2679
|
|
2677
|
-
[compVars$
|
2680
|
+
[compVars$5.textAlign]: 'center', // default text align center
|
2678
2681
|
textAlign: {
|
2679
|
-
right: { [compVars$
|
2680
|
-
left: { [compVars$
|
2681
|
-
center: { [compVars$
|
2682
|
+
right: { [compVars$5.textAlign]: 'right' },
|
2683
|
+
left: { [compVars$5.textAlign]: 'left' },
|
2684
|
+
center: { [compVars$5.textAlign]: 'center' },
|
2682
2685
|
},
|
2683
2686
|
|
2684
|
-
[compVars$
|
2687
|
+
[compVars$5.verticalPadding]: '1em',
|
2685
2688
|
|
2686
|
-
[compVars$
|
2687
|
-
[compVars$
|
2688
|
-
[compVars$
|
2689
|
-
[compVars$
|
2689
|
+
[compVars$5.outlineWidth]: globals.border.sm,
|
2690
|
+
[compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc
|
2691
|
+
[compVars$5.outlineStyle]: 'solid',
|
2692
|
+
[compVars$5.outlineColor]: 'transparent',
|
2690
2693
|
|
2691
2694
|
size: {
|
2692
|
-
xs: { [compVars$
|
2693
|
-
sm: { [compVars$
|
2694
|
-
md: { [compVars$
|
2695
|
-
lg: { [compVars$
|
2695
|
+
xs: { [compVars$5.fontSize]: '12px' },
|
2696
|
+
sm: { [compVars$5.fontSize]: '14px' },
|
2697
|
+
md: { [compVars$5.fontSize]: '16px' },
|
2698
|
+
lg: { [compVars$5.fontSize]: '18px' },
|
2696
2699
|
},
|
2697
2700
|
|
2698
2701
|
_square: {
|
2699
|
-
[compVars$
|
2700
|
-
[compVars$
|
2701
|
-
[compVars$
|
2702
|
+
[compVars$5.hostHeight]: '3em',
|
2703
|
+
[compVars$5.hostWidth]: '3em',
|
2704
|
+
[compVars$5.verticalPadding]: '0',
|
2702
2705
|
},
|
2703
2706
|
|
2704
2707
|
_fullWidth: {
|
2705
|
-
[compVars$
|
2708
|
+
[compVars$5.hostWidth]: '100%',
|
2706
2709
|
},
|
2707
2710
|
|
2708
2711
|
_loading: {
|
2709
|
-
[compVars$
|
2710
|
-
[compVars$
|
2712
|
+
[compVars$5.cursor]: 'wait',
|
2713
|
+
[compVars$5.labelTextColor]: helperRefs$3.main,
|
2711
2714
|
},
|
2712
2715
|
|
2713
2716
|
_disabled: {
|
2714
|
-
[helperVars$3.main]: globalRefs$
|
2715
|
-
[helperVars$3.dark]: globalRefs$
|
2716
|
-
[helperVars$3.light]: globalRefs$
|
2717
|
-
[helperVars$3.contrast]: globalRefs$
|
2717
|
+
[helperVars$3.main]: globalRefs$j.colors.surface.light,
|
2718
|
+
[helperVars$3.dark]: globalRefs$j.colors.surface.dark,
|
2719
|
+
[helperVars$3.light]: globalRefs$j.colors.surface.light,
|
2720
|
+
[helperVars$3.contrast]: globalRefs$j.colors.surface.main,
|
2718
2721
|
},
|
2719
2722
|
|
2720
2723
|
variant: {
|
2721
2724
|
contained: {
|
2722
|
-
[compVars$
|
2723
|
-
[compVars$
|
2725
|
+
[compVars$5.labelTextColor]: helperRefs$3.contrast,
|
2726
|
+
[compVars$5.backgroundColor]: helperRefs$3.main,
|
2724
2727
|
_hover: {
|
2725
|
-
[compVars$
|
2728
|
+
[compVars$5.backgroundColor]: helperRefs$3.dark,
|
2726
2729
|
_loading: {
|
2727
|
-
[compVars$
|
2730
|
+
[compVars$5.backgroundColor]: helperRefs$3.main,
|
2728
2731
|
},
|
2729
2732
|
},
|
2730
2733
|
_active: {
|
2731
|
-
[compVars$
|
2734
|
+
[compVars$5.backgroundColor]: helperRefs$3.main,
|
2732
2735
|
},
|
2733
2736
|
},
|
2734
2737
|
|
2735
2738
|
outline: {
|
2736
|
-
[compVars$
|
2737
|
-
[compVars$
|
2739
|
+
[compVars$5.labelTextColor]: helperRefs$3.main,
|
2740
|
+
[compVars$5.borderColor]: helperRefs$3.main,
|
2738
2741
|
_hover: {
|
2739
|
-
[compVars$
|
2740
|
-
[compVars$
|
2742
|
+
[compVars$5.labelTextColor]: helperRefs$3.dark,
|
2743
|
+
[compVars$5.borderColor]: helperRefs$3.dark,
|
2741
2744
|
},
|
2742
2745
|
_active: {
|
2743
|
-
[compVars$
|
2744
|
-
[compVars$
|
2746
|
+
[compVars$5.labelTextColor]: helperRefs$3.main,
|
2747
|
+
[compVars$5.borderColor]: helperRefs$3.main,
|
2745
2748
|
},
|
2746
2749
|
},
|
2747
2750
|
|
2748
2751
|
link: {
|
2749
|
-
[compVars$
|
2752
|
+
[compVars$5.labelTextColor]: helperRefs$3.main,
|
2750
2753
|
_hover: {
|
2751
|
-
[compVars$
|
2752
|
-
[compVars$
|
2754
|
+
[compVars$5.labelTextColor]: helperRefs$3.dark,
|
2755
|
+
[compVars$5.labelTextDecoration]: 'underline',
|
2753
2756
|
},
|
2754
2757
|
_active: {
|
2755
|
-
[compVars$
|
2758
|
+
[compVars$5.labelTextColor]: helperRefs$3.main,
|
2756
2759
|
},
|
2757
2760
|
},
|
2758
2761
|
},
|
2759
2762
|
|
2760
2763
|
_focused: {
|
2761
|
-
[compVars$
|
2764
|
+
[compVars$5.outlineColor]: helperRefs$3.light,
|
2762
2765
|
},
|
2763
2766
|
};
|
2764
2767
|
|
2765
|
-
const vars$
|
2766
|
-
...compVars$
|
2768
|
+
const vars$z = {
|
2769
|
+
...compVars$5,
|
2767
2770
|
...helperVars$3,
|
2768
2771
|
};
|
2769
2772
|
|
2770
2773
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2771
2774
|
__proto__: null,
|
2772
2775
|
default: button,
|
2773
|
-
vars: vars$
|
2776
|
+
vars: vars$z
|
2774
2777
|
});
|
2775
2778
|
|
2776
2779
|
const {
|
2777
|
-
host: host$
|
2780
|
+
host: host$i,
|
2778
2781
|
label: label$9,
|
2779
2782
|
placeholder: placeholder$3,
|
2780
2783
|
requiredIndicator: requiredIndicator$b,
|
@@ -2799,12 +2802,12 @@ const {
|
|
2799
2802
|
|
2800
2803
|
var textFieldMappings = {
|
2801
2804
|
// we apply font-size also on the host so we can set its width with em
|
2802
|
-
fontSize: [{}, host$
|
2805
|
+
fontSize: [{}, host$i],
|
2803
2806
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
2804
2807
|
|
2805
|
-
hostWidth: { ...host$
|
2806
|
-
hostMinWidth: { ...host$
|
2807
|
-
hostDirection: { ...host$
|
2808
|
+
hostWidth: { ...host$i, property: 'width' },
|
2809
|
+
hostMinWidth: { ...host$i, property: 'min-width' },
|
2810
|
+
hostDirection: { ...host$i, property: 'direction' },
|
2808
2811
|
|
2809
2812
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2810
2813
|
|
@@ -2978,7 +2981,7 @@ const resetInputLabelPosition = (name) => `
|
|
2978
2981
|
}
|
2979
2982
|
`;
|
2980
2983
|
|
2981
|
-
const componentName$
|
2984
|
+
const componentName$H = getComponentName('text-field');
|
2982
2985
|
|
2983
2986
|
const observedAttrs = ['type'];
|
2984
2987
|
|
@@ -3028,27 +3031,27 @@ const TextFieldClass = compose(
|
|
3028
3031
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3029
3032
|
`,
|
3030
3033
|
excludeAttrsSync: ['tabindex'],
|
3031
|
-
componentName: componentName$
|
3034
|
+
componentName: componentName$H,
|
3032
3035
|
})
|
3033
3036
|
);
|
3034
3037
|
|
3035
|
-
const componentName$
|
3036
|
-
const globalRefs$
|
3038
|
+
const componentName$G = getComponentName('input-wrapper');
|
3039
|
+
const globalRefs$i = getThemeRefs(globals);
|
3037
3040
|
|
3038
|
-
const [theme$1, refs, vars$
|
3041
|
+
const [theme$1, refs, vars$y] = createHelperVars(
|
3039
3042
|
{
|
3040
|
-
labelTextColor: globalRefs$
|
3041
|
-
valueTextColor: globalRefs$
|
3042
|
-
placeholderTextColor: globalRefs$
|
3043
|
+
labelTextColor: globalRefs$i.colors.surface.dark,
|
3044
|
+
valueTextColor: globalRefs$i.colors.surface.contrast,
|
3045
|
+
placeholderTextColor: globalRefs$i.colors.surface.dark,
|
3043
3046
|
requiredIndicator: "'*'",
|
3044
|
-
errorMessageTextColor: globalRefs$
|
3045
|
-
helperTextColor: globalRefs$
|
3047
|
+
errorMessageTextColor: globalRefs$i.colors.error.main,
|
3048
|
+
helperTextColor: globalRefs$i.colors.surface.dark,
|
3046
3049
|
|
3047
|
-
borderWidth: globalRefs$
|
3048
|
-
borderRadius: globalRefs$
|
3050
|
+
borderWidth: globalRefs$i.border.xs,
|
3051
|
+
borderRadius: globalRefs$i.radius.xs,
|
3049
3052
|
borderColor: 'transparent',
|
3050
3053
|
|
3051
|
-
outlineWidth: globalRefs$
|
3054
|
+
outlineWidth: globalRefs$i.border.sm,
|
3052
3055
|
outlineStyle: 'solid',
|
3053
3056
|
outlineColor: 'transparent',
|
3054
3057
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -3059,11 +3062,11 @@ const [theme$1, refs, vars$x] = createHelperVars(
|
|
3059
3062
|
horizontalPadding: '0.5em',
|
3060
3063
|
verticalPadding: '0.5em',
|
3061
3064
|
|
3062
|
-
backgroundColor: globalRefs$
|
3065
|
+
backgroundColor: globalRefs$i.colors.surface.main,
|
3063
3066
|
|
3064
|
-
fontFamily: globalRefs$
|
3067
|
+
fontFamily: globalRefs$i.fonts.font1.family,
|
3065
3068
|
|
3066
|
-
direction: globalRefs$
|
3069
|
+
direction: globalRefs$i.direction,
|
3067
3070
|
|
3068
3071
|
overlayOpacity: '0.3',
|
3069
3072
|
|
@@ -3079,69 +3082,69 @@ const [theme$1, refs, vars$x] = createHelperVars(
|
|
3079
3082
|
},
|
3080
3083
|
|
3081
3084
|
_focused: {
|
3082
|
-
outlineColor: globalRefs$
|
3085
|
+
outlineColor: globalRefs$i.colors.surface.light,
|
3083
3086
|
_invalid: {
|
3084
|
-
outlineColor: globalRefs$
|
3087
|
+
outlineColor: globalRefs$i.colors.error.main,
|
3085
3088
|
},
|
3086
3089
|
},
|
3087
3090
|
|
3088
3091
|
_bordered: {
|
3089
|
-
outlineWidth: globalRefs$
|
3090
|
-
borderColor: globalRefs$
|
3092
|
+
outlineWidth: globalRefs$i.border.xs,
|
3093
|
+
borderColor: globalRefs$i.colors.surface.light,
|
3091
3094
|
borderStyle: 'solid',
|
3092
3095
|
_invalid: {
|
3093
|
-
borderColor: globalRefs$
|
3096
|
+
borderColor: globalRefs$i.colors.error.main,
|
3094
3097
|
},
|
3095
3098
|
},
|
3096
3099
|
|
3097
3100
|
_disabled: {
|
3098
|
-
labelTextColor: globalRefs$
|
3099
|
-
borderColor: globalRefs$
|
3100
|
-
valueTextColor: globalRefs$
|
3101
|
-
placeholderTextColor: globalRefs$
|
3102
|
-
helperTextColor: globalRefs$
|
3103
|
-
backgroundColor: globalRefs$
|
3101
|
+
labelTextColor: globalRefs$i.colors.surface.light,
|
3102
|
+
borderColor: globalRefs$i.colors.surface.light,
|
3103
|
+
valueTextColor: globalRefs$i.colors.surface.light,
|
3104
|
+
placeholderTextColor: globalRefs$i.colors.surface.light,
|
3105
|
+
helperTextColor: globalRefs$i.colors.surface.light,
|
3106
|
+
backgroundColor: globalRefs$i.colors.surface.main,
|
3104
3107
|
},
|
3105
3108
|
},
|
3106
|
-
componentName$
|
3109
|
+
componentName$G
|
3107
3110
|
);
|
3108
3111
|
|
3109
3112
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
3110
3113
|
__proto__: null,
|
3111
3114
|
default: theme$1,
|
3112
3115
|
refs: refs,
|
3113
|
-
vars: vars$
|
3116
|
+
vars: vars$y
|
3114
3117
|
});
|
3115
3118
|
|
3116
|
-
const vars$
|
3119
|
+
const vars$x = TextFieldClass.cssVarList;
|
3117
3120
|
|
3118
3121
|
const textField = {
|
3119
|
-
[vars$
|
3120
|
-
[vars$
|
3121
|
-
[vars$
|
3122
|
-
[vars$
|
3123
|
-
[vars$
|
3124
|
-
[vars$
|
3125
|
-
[vars$
|
3126
|
-
[vars$
|
3127
|
-
[vars$
|
3128
|
-
[vars$
|
3129
|
-
[vars$
|
3130
|
-
[vars$
|
3131
|
-
[vars$
|
3132
|
-
[vars$
|
3133
|
-
[vars$
|
3134
|
-
[vars$
|
3135
|
-
[vars$
|
3136
|
-
[vars$
|
3137
|
-
[vars$
|
3138
|
-
[vars$
|
3139
|
-
[vars$
|
3140
|
-
[vars$
|
3122
|
+
[vars$x.hostWidth]: refs.width,
|
3123
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
3124
|
+
[vars$x.hostDirection]: refs.direction,
|
3125
|
+
[vars$x.fontSize]: refs.fontSize,
|
3126
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
3127
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
3128
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
3129
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
3130
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
3131
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
3132
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
3133
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
3134
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
3135
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
3136
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
3137
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
3138
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
3139
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
3140
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
3141
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
3142
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
3143
|
+
[vars$x.helperTextColor]: refs.helperTextColor,
|
3141
3144
|
textAlign: {
|
3142
|
-
right: { [vars$
|
3143
|
-
left: { [vars$
|
3144
|
-
center: { [vars$
|
3145
|
+
right: { [vars$x.inputTextAlign]: 'right' },
|
3146
|
+
left: { [vars$x.inputTextAlign]: 'left' },
|
3147
|
+
center: { [vars$x.inputTextAlign]: 'center' },
|
3145
3148
|
},
|
3146
3149
|
};
|
3147
3150
|
|
@@ -3149,7 +3152,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
3149
3152
|
__proto__: null,
|
3150
3153
|
default: textField,
|
3151
3154
|
textField: textField,
|
3152
|
-
vars: vars$
|
3155
|
+
vars: vars$x
|
3153
3156
|
});
|
3154
3157
|
|
3155
3158
|
const passwordDraggableMixin = (superclass) =>
|
@@ -3186,10 +3189,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3186
3189
|
}
|
3187
3190
|
};
|
3188
3191
|
|
3189
|
-
const componentName$
|
3192
|
+
const componentName$F = getComponentName('password');
|
3190
3193
|
|
3191
3194
|
const {
|
3192
|
-
host: host$
|
3195
|
+
host: host$h,
|
3193
3196
|
inputField: inputField$5,
|
3194
3197
|
inputElement: inputElement$2,
|
3195
3198
|
inputElementPlaceholder,
|
@@ -3215,10 +3218,10 @@ const {
|
|
3215
3218
|
const PasswordClass = compose(
|
3216
3219
|
createStyleMixin({
|
3217
3220
|
mappings: {
|
3218
|
-
hostWidth: { ...host$
|
3219
|
-
hostMinWidth: { ...host$
|
3220
|
-
hostDirection: { ...host$
|
3221
|
-
fontSize: [{}, host$
|
3221
|
+
hostWidth: { ...host$h, property: 'width' },
|
3222
|
+
hostMinWidth: { ...host$h, property: 'min-width' },
|
3223
|
+
hostDirection: { ...host$h, property: 'direction' },
|
3224
|
+
fontSize: [{}, host$h],
|
3222
3225
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
3223
3226
|
inputHeight: { ...inputField$5, property: 'height' },
|
3224
3227
|
inputHorizontalPadding: [
|
@@ -3315,46 +3318,46 @@ const PasswordClass = compose(
|
|
3315
3318
|
}
|
3316
3319
|
`,
|
3317
3320
|
excludeAttrsSync: ['tabindex'],
|
3318
|
-
componentName: componentName$
|
3321
|
+
componentName: componentName$F,
|
3319
3322
|
})
|
3320
3323
|
);
|
3321
3324
|
|
3322
|
-
const globalRefs$
|
3323
|
-
const vars$
|
3325
|
+
const globalRefs$h = getThemeRefs(globals);
|
3326
|
+
const vars$w = PasswordClass.cssVarList;
|
3324
3327
|
|
3325
3328
|
const password = {
|
3326
|
-
[vars$
|
3327
|
-
[vars$
|
3328
|
-
[vars$
|
3329
|
-
[vars$
|
3330
|
-
[vars$
|
3331
|
-
[vars$
|
3332
|
-
[vars$
|
3333
|
-
[vars$
|
3334
|
-
[vars$
|
3335
|
-
[vars$
|
3336
|
-
[vars$
|
3337
|
-
[vars$
|
3338
|
-
[vars$
|
3339
|
-
[vars$
|
3340
|
-
[vars$
|
3341
|
-
[vars$
|
3342
|
-
[vars$
|
3343
|
-
[vars$
|
3344
|
-
[vars$
|
3345
|
-
[vars$
|
3346
|
-
[vars$
|
3347
|
-
[vars$
|
3348
|
-
[vars$
|
3329
|
+
[vars$w.hostWidth]: refs.width,
|
3330
|
+
[vars$w.hostDirection]: refs.direction,
|
3331
|
+
[vars$w.fontSize]: refs.fontSize,
|
3332
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
3333
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
3334
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
3335
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
3336
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
3337
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
3338
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
3339
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
3340
|
+
[vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3341
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
3342
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
3343
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
3344
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
3345
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
3346
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
3347
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
3348
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
3349
|
+
[vars$w.revealButtonOffset]: globalRefs$h.spacing.md,
|
3350
|
+
[vars$w.revealButtonSize]: refs.toggleButtonSize,
|
3351
|
+
[vars$w.revealButtonColor]: refs.placeholderTextColor,
|
3349
3352
|
};
|
3350
3353
|
|
3351
3354
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3352
3355
|
__proto__: null,
|
3353
3356
|
default: password,
|
3354
|
-
vars: vars$
|
3357
|
+
vars: vars$w
|
3355
3358
|
});
|
3356
3359
|
|
3357
|
-
const componentName$
|
3360
|
+
const componentName$E = getComponentName('number-field');
|
3358
3361
|
|
3359
3362
|
const NumberFieldClass = compose(
|
3360
3363
|
createStyleMixin({
|
@@ -3380,43 +3383,43 @@ const NumberFieldClass = compose(
|
|
3380
3383
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3381
3384
|
`,
|
3382
3385
|
excludeAttrsSync: ['tabindex'],
|
3383
|
-
componentName: componentName$
|
3386
|
+
componentName: componentName$E,
|
3384
3387
|
})
|
3385
3388
|
);
|
3386
3389
|
|
3387
|
-
const vars$
|
3390
|
+
const vars$v = NumberFieldClass.cssVarList;
|
3388
3391
|
|
3389
3392
|
const numberField = {
|
3390
|
-
[vars$
|
3391
|
-
[vars$
|
3392
|
-
[vars$
|
3393
|
-
[vars$
|
3394
|
-
[vars$
|
3395
|
-
[vars$
|
3396
|
-
[vars$
|
3397
|
-
[vars$
|
3398
|
-
[vars$
|
3399
|
-
[vars$
|
3400
|
-
[vars$
|
3401
|
-
[vars$
|
3402
|
-
[vars$
|
3403
|
-
[vars$
|
3404
|
-
[vars$
|
3405
|
-
[vars$
|
3406
|
-
[vars$
|
3407
|
-
[vars$
|
3408
|
-
[vars$
|
3409
|
-
[vars$
|
3410
|
-
[vars$
|
3393
|
+
[vars$v.hostWidth]: refs.width,
|
3394
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
3395
|
+
[vars$v.hostDirection]: refs.direction,
|
3396
|
+
[vars$v.fontSize]: refs.fontSize,
|
3397
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
3398
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
3399
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
3400
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
3401
|
+
[vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
|
3402
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
3403
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
3404
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
3405
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
3406
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
3407
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
3408
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
3409
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
3410
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
3411
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
3412
|
+
[vars$v.inputHorizontalPadding]: refs.horizontalPadding,
|
3413
|
+
[vars$v.inputHeight]: refs.inputHeight,
|
3411
3414
|
};
|
3412
3415
|
|
3413
3416
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3414
3417
|
__proto__: null,
|
3415
3418
|
default: numberField,
|
3416
|
-
vars: vars$
|
3419
|
+
vars: vars$v
|
3417
3420
|
});
|
3418
3421
|
|
3419
|
-
const componentName$
|
3422
|
+
const componentName$D = getComponentName('email-field');
|
3420
3423
|
|
3421
3424
|
const customMixin$6 = (superclass) =>
|
3422
3425
|
class EmailFieldMixinClass extends superclass {
|
@@ -3451,46 +3454,46 @@ const EmailFieldClass = compose(
|
|
3451
3454
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3452
3455
|
`,
|
3453
3456
|
excludeAttrsSync: ['tabindex'],
|
3454
|
-
componentName: componentName$
|
3457
|
+
componentName: componentName$D,
|
3455
3458
|
})
|
3456
3459
|
);
|
3457
3460
|
|
3458
|
-
const vars$
|
3461
|
+
const vars$u = EmailFieldClass.cssVarList;
|
3459
3462
|
|
3460
3463
|
const emailField = {
|
3461
|
-
[vars$
|
3462
|
-
[vars$
|
3463
|
-
[vars$
|
3464
|
-
[vars$
|
3465
|
-
[vars$
|
3466
|
-
[vars$
|
3467
|
-
[vars$
|
3468
|
-
[vars$
|
3469
|
-
[vars$
|
3470
|
-
[vars$
|
3471
|
-
[vars$
|
3472
|
-
[vars$
|
3473
|
-
[vars$
|
3474
|
-
[vars$
|
3475
|
-
[vars$
|
3476
|
-
[vars$
|
3477
|
-
[vars$
|
3478
|
-
[vars$
|
3479
|
-
[vars$
|
3480
|
-
[vars$
|
3481
|
-
[vars$
|
3464
|
+
[vars$u.hostWidth]: refs.width,
|
3465
|
+
[vars$u.hostMinWidth]: refs.minWidth,
|
3466
|
+
[vars$u.hostDirection]: refs.direction,
|
3467
|
+
[vars$u.fontSize]: refs.fontSize,
|
3468
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
3469
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
3470
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
3471
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
3472
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
3473
|
+
[vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
|
3474
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
3475
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
3476
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
3477
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
3478
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
3479
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
3480
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
3481
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
3482
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
3483
|
+
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
3484
|
+
[vars$u.inputHeight]: refs.inputHeight,
|
3482
3485
|
};
|
3483
3486
|
|
3484
3487
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3485
3488
|
__proto__: null,
|
3486
3489
|
default: emailField,
|
3487
|
-
vars: vars$
|
3490
|
+
vars: vars$u
|
3488
3491
|
});
|
3489
3492
|
|
3490
|
-
const componentName$
|
3493
|
+
const componentName$C = getComponentName('text-area');
|
3491
3494
|
|
3492
3495
|
const {
|
3493
|
-
host: host$
|
3496
|
+
host: host$g,
|
3494
3497
|
label: label$7,
|
3495
3498
|
placeholder: placeholder$2,
|
3496
3499
|
inputField: inputField$4,
|
@@ -3512,10 +3515,10 @@ const {
|
|
3512
3515
|
const TextAreaClass = compose(
|
3513
3516
|
createStyleMixin({
|
3514
3517
|
mappings: {
|
3515
|
-
hostWidth: { ...host$
|
3516
|
-
hostMinWidth: { ...host$
|
3517
|
-
hostDirection: { ...host$
|
3518
|
-
fontSize: [host$
|
3518
|
+
hostWidth: { ...host$g, property: 'width' },
|
3519
|
+
hostMinWidth: { ...host$g, property: 'min-width' },
|
3520
|
+
hostDirection: { ...host$g, property: 'direction' },
|
3521
|
+
fontSize: [host$g, textArea$2],
|
3519
3522
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
3520
3523
|
labelTextColor: [
|
3521
3524
|
{ ...label$7, property: 'color' },
|
@@ -3563,49 +3566,49 @@ const TextAreaClass = compose(
|
|
3563
3566
|
${resetInputCursor('vaadin-text-area')}
|
3564
3567
|
`,
|
3565
3568
|
excludeAttrsSync: ['tabindex'],
|
3566
|
-
componentName: componentName$
|
3569
|
+
componentName: componentName$C,
|
3567
3570
|
})
|
3568
3571
|
);
|
3569
3572
|
|
3570
|
-
const vars$
|
3573
|
+
const vars$t = TextAreaClass.cssVarList;
|
3571
3574
|
|
3572
3575
|
const textArea = {
|
3573
|
-
[vars$
|
3574
|
-
[vars$
|
3575
|
-
[vars$
|
3576
|
-
[vars$
|
3577
|
-
[vars$
|
3578
|
-
[vars$
|
3579
|
-
[vars$
|
3580
|
-
[vars$
|
3581
|
-
[vars$
|
3582
|
-
[vars$
|
3583
|
-
[vars$
|
3584
|
-
[vars$
|
3585
|
-
[vars$
|
3586
|
-
[vars$
|
3587
|
-
[vars$
|
3588
|
-
[vars$
|
3589
|
-
[vars$
|
3590
|
-
[vars$
|
3591
|
-
[vars$
|
3592
|
-
[vars$
|
3593
|
-
[vars$
|
3576
|
+
[vars$t.hostWidth]: refs.width,
|
3577
|
+
[vars$t.hostMinWidth]: refs.minWidth,
|
3578
|
+
[vars$t.hostDirection]: refs.direction,
|
3579
|
+
[vars$t.fontSize]: refs.fontSize,
|
3580
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
3581
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
3582
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
3583
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
3584
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
3585
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
3586
|
+
[vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3587
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
3588
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
3589
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
3590
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
3591
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
3592
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
3593
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
3594
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
3595
|
+
[vars$t.inputResizeType]: 'vertical',
|
3596
|
+
[vars$t.inputMinHeight]: '5em',
|
3594
3597
|
textAlign: {
|
3595
|
-
right: { [vars$
|
3596
|
-
left: { [vars$
|
3597
|
-
center: { [vars$
|
3598
|
+
right: { [vars$t.inputTextAlign]: 'right' },
|
3599
|
+
left: { [vars$t.inputTextAlign]: 'left' },
|
3600
|
+
center: { [vars$t.inputTextAlign]: 'center' },
|
3598
3601
|
},
|
3599
3602
|
|
3600
3603
|
_readonly: {
|
3601
|
-
[vars$
|
3604
|
+
[vars$t.inputResizeType]: 'none',
|
3602
3605
|
},
|
3603
3606
|
};
|
3604
3607
|
|
3605
3608
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3606
3609
|
__proto__: null,
|
3607
3610
|
default: textArea,
|
3608
|
-
vars: vars$
|
3611
|
+
vars: vars$t
|
3609
3612
|
});
|
3610
3613
|
|
3611
3614
|
const createBaseInputClass = (...args) =>
|
@@ -3616,9 +3619,9 @@ const createBaseInputClass = (...args) =>
|
|
3616
3619
|
inputEventsDispatchingMixin
|
3617
3620
|
)(createBaseClass(...args));
|
3618
3621
|
|
3619
|
-
const componentName$
|
3622
|
+
const componentName$B = getComponentName('boolean-field-internal');
|
3620
3623
|
|
3621
|
-
createBaseInputClass({ componentName: componentName$
|
3624
|
+
createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
|
3622
3625
|
|
3623
3626
|
const booleanFieldMixin = (superclass) =>
|
3624
3627
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3627,14 +3630,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3627
3630
|
|
3628
3631
|
const template = document.createElement('template');
|
3629
3632
|
template.innerHTML = `
|
3630
|
-
<${componentName$
|
3633
|
+
<${componentName$B}
|
3631
3634
|
tabindex="-1"
|
3632
3635
|
slot="input"
|
3633
|
-
></${componentName$
|
3636
|
+
></${componentName$B}>
|
3634
3637
|
`;
|
3635
3638
|
|
3636
3639
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3637
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3640
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$B);
|
3638
3641
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3639
3642
|
|
3640
3643
|
forwardAttrs(this, this.inputElement, {
|
@@ -3704,10 +3707,10 @@ descope-boolean-field-internal {
|
|
3704
3707
|
}
|
3705
3708
|
`;
|
3706
3709
|
|
3707
|
-
const componentName$
|
3710
|
+
const componentName$A = getComponentName('checkbox');
|
3708
3711
|
|
3709
3712
|
const {
|
3710
|
-
host: host$
|
3713
|
+
host: host$f,
|
3711
3714
|
component: component$1,
|
3712
3715
|
checkboxElement,
|
3713
3716
|
checkboxSurface,
|
@@ -3729,10 +3732,10 @@ const {
|
|
3729
3732
|
const CheckboxClass = compose(
|
3730
3733
|
createStyleMixin({
|
3731
3734
|
mappings: {
|
3732
|
-
hostWidth: { ...host$
|
3733
|
-
hostDirection: { ...host$
|
3735
|
+
hostWidth: { ...host$f, property: 'width' },
|
3736
|
+
hostDirection: { ...host$f, property: 'direction' },
|
3734
3737
|
|
3735
|
-
fontSize: [host$
|
3738
|
+
fontSize: [host$f, checkboxElement, checkboxLabel$1],
|
3736
3739
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
3737
3740
|
|
3738
3741
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -3810,54 +3813,54 @@ const CheckboxClass = compose(
|
|
3810
3813
|
}
|
3811
3814
|
`,
|
3812
3815
|
excludeAttrsSync: ['label', 'tabindex'],
|
3813
|
-
componentName: componentName$
|
3816
|
+
componentName: componentName$A,
|
3814
3817
|
})
|
3815
3818
|
);
|
3816
3819
|
|
3817
|
-
const vars$
|
3820
|
+
const vars$s = CheckboxClass.cssVarList;
|
3818
3821
|
const checkboxSize = '1.35em';
|
3819
3822
|
|
3820
3823
|
const checkbox = {
|
3821
|
-
[vars$
|
3822
|
-
[vars$
|
3823
|
-
[vars$
|
3824
|
-
[vars$
|
3825
|
-
[vars$
|
3826
|
-
[vars$
|
3827
|
-
[vars$
|
3828
|
-
[vars$
|
3829
|
-
[vars$
|
3830
|
-
[vars$
|
3831
|
-
[vars$
|
3832
|
-
[vars$
|
3833
|
-
[vars$
|
3834
|
-
[vars$
|
3835
|
-
[vars$
|
3836
|
-
[vars$
|
3837
|
-
[vars$
|
3838
|
-
[vars$
|
3839
|
-
[vars$
|
3840
|
-
[vars$
|
3824
|
+
[vars$s.hostWidth]: refs.width,
|
3825
|
+
[vars$s.hostDirection]: refs.direction,
|
3826
|
+
[vars$s.fontSize]: refs.fontSize,
|
3827
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
3828
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
3829
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
3830
|
+
[vars$s.labelFontWeight]: '400',
|
3831
|
+
[vars$s.labelLineHeight]: checkboxSize,
|
3832
|
+
[vars$s.labelSpacing]: '1em',
|
3833
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
3834
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
3835
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
3836
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
3837
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
3838
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
3839
|
+
[vars$s.inputBorderColor]: refs.borderColor,
|
3840
|
+
[vars$s.inputBorderWidth]: refs.borderWidth,
|
3841
|
+
[vars$s.inputBorderStyle]: refs.borderStyle,
|
3842
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
3843
|
+
[vars$s.inputSize]: checkboxSize,
|
3841
3844
|
|
3842
3845
|
_checked: {
|
3843
|
-
[vars$
|
3846
|
+
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
3844
3847
|
},
|
3845
3848
|
|
3846
3849
|
_disabled: {
|
3847
|
-
[vars$
|
3850
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
3848
3851
|
},
|
3849
3852
|
};
|
3850
3853
|
|
3851
3854
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3852
3855
|
__proto__: null,
|
3853
3856
|
default: checkbox,
|
3854
|
-
vars: vars$
|
3857
|
+
vars: vars$s
|
3855
3858
|
});
|
3856
3859
|
|
3857
|
-
const componentName$
|
3860
|
+
const componentName$z = getComponentName('switch-toggle');
|
3858
3861
|
|
3859
3862
|
const {
|
3860
|
-
host: host$
|
3863
|
+
host: host$e,
|
3861
3864
|
component,
|
3862
3865
|
checkboxElement: track,
|
3863
3866
|
checkboxSurface: knob,
|
@@ -3879,8 +3882,8 @@ const {
|
|
3879
3882
|
const SwitchToggleClass = compose(
|
3880
3883
|
createStyleMixin({
|
3881
3884
|
mappings: {
|
3882
|
-
hostWidth: { ...host$
|
3883
|
-
hostDirection: { ...host$
|
3885
|
+
hostWidth: { ...host$e, property: 'width' },
|
3886
|
+
hostDirection: { ...host$e, property: 'direction' },
|
3884
3887
|
|
3885
3888
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
3886
3889
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
@@ -3986,82 +3989,82 @@ const SwitchToggleClass = compose(
|
|
3986
3989
|
}
|
3987
3990
|
`,
|
3988
3991
|
excludeAttrsSync: ['label', 'tabindex'],
|
3989
|
-
componentName: componentName$
|
3992
|
+
componentName: componentName$z,
|
3990
3993
|
})
|
3991
3994
|
);
|
3992
3995
|
|
3993
3996
|
const knobMargin = '2px';
|
3994
3997
|
const checkboxHeight = '1.25em';
|
3995
3998
|
|
3996
|
-
const globalRefs$
|
3997
|
-
const vars$
|
3999
|
+
const globalRefs$g = getThemeRefs(globals);
|
4000
|
+
const vars$r = SwitchToggleClass.cssVarList;
|
3998
4001
|
|
3999
4002
|
const switchToggle = {
|
4000
|
-
[vars$
|
4001
|
-
[vars$
|
4002
|
-
[vars$
|
4003
|
-
[vars$
|
4004
|
-
|
4005
|
-
[vars$
|
4006
|
-
[vars$
|
4007
|
-
[vars$
|
4008
|
-
[vars$
|
4009
|
-
|
4010
|
-
[vars$
|
4011
|
-
[vars$
|
4012
|
-
[vars$
|
4013
|
-
[vars$
|
4014
|
-
[vars$
|
4015
|
-
[vars$
|
4016
|
-
[vars$
|
4017
|
-
|
4018
|
-
[vars$
|
4019
|
-
[vars$
|
4020
|
-
[vars$
|
4021
|
-
[vars$
|
4022
|
-
[vars$
|
4023
|
-
[vars$
|
4024
|
-
|
4025
|
-
[vars$
|
4026
|
-
[vars$
|
4027
|
-
[vars$
|
4028
|
-
[vars$
|
4029
|
-
[vars$
|
4030
|
-
[vars$
|
4003
|
+
[vars$r.hostWidth]: refs.width,
|
4004
|
+
[vars$r.hostDirection]: refs.direction,
|
4005
|
+
[vars$r.fontSize]: refs.fontSize,
|
4006
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
4007
|
+
|
4008
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
4009
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
4010
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
4011
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
4012
|
+
|
4013
|
+
[vars$r.trackBorderStyle]: refs.borderStyle,
|
4014
|
+
[vars$r.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
4015
|
+
[vars$r.trackBorderColor]: refs.borderColor,
|
4016
|
+
[vars$r.trackBackgroundColor]: refs.backgroundColor,
|
4017
|
+
[vars$r.trackBorderRadius]: globalRefs$g.radius.md,
|
4018
|
+
[vars$r.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
4019
|
+
[vars$r.trackHeight]: checkboxHeight,
|
4020
|
+
|
4021
|
+
[vars$r.knobSize]: `calc(1em - ${knobMargin})`,
|
4022
|
+
[vars$r.knobRadius]: '50%',
|
4023
|
+
[vars$r.knobTopOffset]: '1px',
|
4024
|
+
[vars$r.knobLeftOffset]: knobMargin,
|
4025
|
+
[vars$r.knobColor]: refs.labelTextColor,
|
4026
|
+
[vars$r.knobTransitionDuration]: '0.3s',
|
4027
|
+
|
4028
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
4029
|
+
[vars$r.labelFontWeight]: '400',
|
4030
|
+
[vars$r.labelLineHeight]: '1.35em',
|
4031
|
+
[vars$r.labelSpacing]: '1em',
|
4032
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
4033
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
4031
4034
|
|
4032
4035
|
_checked: {
|
4033
|
-
[vars$
|
4034
|
-
[vars$
|
4035
|
-
[vars$
|
4036
|
-
[vars$
|
4036
|
+
[vars$r.trackBorderColor]: refs.borderColor,
|
4037
|
+
[vars$r.knobLeftOffset]: `calc(100% - var(${vars$r.knobSize}) - ${knobMargin})`,
|
4038
|
+
[vars$r.knobColor]: refs.valueTextColor,
|
4039
|
+
[vars$r.knobTextColor]: refs.valueTextColor,
|
4037
4040
|
},
|
4038
4041
|
|
4039
4042
|
_disabled: {
|
4040
|
-
[vars$
|
4041
|
-
[vars$
|
4042
|
-
[vars$
|
4043
|
-
[vars$
|
4043
|
+
[vars$r.knobColor]: globalRefs$g.colors.surface.light,
|
4044
|
+
[vars$r.trackBorderColor]: globalRefs$g.colors.surface.light,
|
4045
|
+
[vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
|
4046
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
4044
4047
|
_checked: {
|
4045
|
-
[vars$
|
4046
|
-
[vars$
|
4048
|
+
[vars$r.knobColor]: globalRefs$g.colors.surface.light,
|
4049
|
+
[vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
|
4047
4050
|
},
|
4048
4051
|
},
|
4049
4052
|
|
4050
4053
|
_invalid: {
|
4051
|
-
[vars$
|
4052
|
-
[vars$
|
4054
|
+
[vars$r.trackBorderColor]: globalRefs$g.colors.error.main,
|
4055
|
+
[vars$r.knobColor]: globalRefs$g.colors.error.main,
|
4053
4056
|
},
|
4054
4057
|
};
|
4055
4058
|
|
4056
4059
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
4057
4060
|
__proto__: null,
|
4058
4061
|
default: switchToggle,
|
4059
|
-
vars: vars$
|
4062
|
+
vars: vars$r
|
4060
4063
|
});
|
4061
4064
|
|
4062
|
-
const componentName$
|
4065
|
+
const componentName$y = getComponentName('container');
|
4063
4066
|
|
4064
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
4067
|
+
class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
|
4065
4068
|
constructor() {
|
4066
4069
|
super();
|
4067
4070
|
|
@@ -4114,9 +4117,9 @@ const ContainerClass = compose(
|
|
4114
4117
|
componentNameValidationMixin
|
4115
4118
|
)(RawContainer);
|
4116
4119
|
|
4117
|
-
const globalRefs$
|
4120
|
+
const globalRefs$f = getThemeRefs(globals);
|
4118
4121
|
|
4119
|
-
const compVars$
|
4122
|
+
const compVars$4 = ContainerClass.cssVarList;
|
4120
4123
|
|
4121
4124
|
const verticalAlignment = {
|
4122
4125
|
start: { verticalAlignment: 'start' },
|
@@ -4136,7 +4139,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
4136
4139
|
horizontalAlignment,
|
4137
4140
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
4138
4141
|
},
|
4139
|
-
componentName$
|
4142
|
+
componentName$y
|
4140
4143
|
);
|
4141
4144
|
|
4142
4145
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -4144,31 +4147,31 @@ const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
4144
4147
|
const container = {
|
4145
4148
|
...helperTheme$2,
|
4146
4149
|
|
4147
|
-
[compVars$
|
4148
|
-
[compVars$
|
4149
|
-
[compVars$
|
4150
|
-
[compVars$
|
4151
|
-
[compVars$
|
4152
|
-
[compVars$
|
4150
|
+
[compVars$4.hostWidth]: '100%',
|
4151
|
+
[compVars$4.boxShadow]: 'none',
|
4152
|
+
[compVars$4.backgroundColor]: globalRefs$f.colors.surface.main,
|
4153
|
+
[compVars$4.color]: globalRefs$f.colors.surface.contrast,
|
4154
|
+
[compVars$4.borderRadius]: '0px',
|
4155
|
+
[compVars$4.hostDirection]: globalRefs$f.direction,
|
4153
4156
|
|
4154
4157
|
verticalPadding: {
|
4155
|
-
sm: { [compVars$
|
4156
|
-
md: { [compVars$
|
4157
|
-
lg: { [compVars$
|
4158
|
+
sm: { [compVars$4.verticalPadding]: '5px' },
|
4159
|
+
md: { [compVars$4.verticalPadding]: '10px' },
|
4160
|
+
lg: { [compVars$4.verticalPadding]: '20px' },
|
4158
4161
|
},
|
4159
4162
|
|
4160
4163
|
horizontalPadding: {
|
4161
|
-
sm: { [compVars$
|
4162
|
-
md: { [compVars$
|
4163
|
-
lg: { [compVars$
|
4164
|
+
sm: { [compVars$4.horizontalPadding]: '5px' },
|
4165
|
+
md: { [compVars$4.horizontalPadding]: '10px' },
|
4166
|
+
lg: { [compVars$4.horizontalPadding]: '20px' },
|
4164
4167
|
},
|
4165
4168
|
|
4166
4169
|
direction: {
|
4167
4170
|
row: {
|
4168
|
-
[compVars$
|
4169
|
-
[compVars$
|
4170
|
-
[compVars$
|
4171
|
-
[compVars$
|
4171
|
+
[compVars$4.flexDirection]: 'row',
|
4172
|
+
[compVars$4.alignItems]: helperRefs$2.verticalAlignment,
|
4173
|
+
[compVars$4.justifyContent]: helperRefs$2.horizontalAlignment,
|
4174
|
+
[compVars$4.flexWrap]: 'wrap',
|
4172
4175
|
horizontalAlignment: {
|
4173
4176
|
spaceBetween: {
|
4174
4177
|
[helperVars$2.horizontalAlignment]: 'space-between',
|
@@ -4176,9 +4179,9 @@ const container = {
|
|
4176
4179
|
},
|
4177
4180
|
},
|
4178
4181
|
column: {
|
4179
|
-
[compVars$
|
4180
|
-
[compVars$
|
4181
|
-
[compVars$
|
4182
|
+
[compVars$4.flexDirection]: 'column',
|
4183
|
+
[compVars$4.alignItems]: helperRefs$2.horizontalAlignment,
|
4184
|
+
[compVars$4.justifyContent]: helperRefs$2.verticalAlignment,
|
4182
4185
|
verticalAlignment: {
|
4183
4186
|
spaceBetween: {
|
4184
4187
|
[helperVars$2.verticalAlignment]: 'space-between',
|
@@ -4188,49 +4191,49 @@ const container = {
|
|
4188
4191
|
},
|
4189
4192
|
|
4190
4193
|
spaceBetween: {
|
4191
|
-
sm: { [compVars$
|
4192
|
-
md: { [compVars$
|
4193
|
-
lg: { [compVars$
|
4194
|
+
sm: { [compVars$4.gap]: '10px' },
|
4195
|
+
md: { [compVars$4.gap]: '20px' },
|
4196
|
+
lg: { [compVars$4.gap]: '30px' },
|
4194
4197
|
},
|
4195
4198
|
|
4196
4199
|
shadow: {
|
4197
4200
|
sm: {
|
4198
|
-
[compVars$
|
4201
|
+
[compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.sm} ${shadowColor$1}`,
|
4199
4202
|
},
|
4200
4203
|
md: {
|
4201
|
-
[compVars$
|
4204
|
+
[compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.md} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.md} ${shadowColor$1}`,
|
4202
4205
|
},
|
4203
4206
|
lg: {
|
4204
|
-
[compVars$
|
4207
|
+
[compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.lg} ${shadowColor$1}`,
|
4205
4208
|
},
|
4206
4209
|
xl: {
|
4207
|
-
[compVars$
|
4210
|
+
[compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$1}`,
|
4208
4211
|
},
|
4209
4212
|
'2xl': {
|
4210
4213
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
4211
|
-
[compVars$
|
4214
|
+
[compVars$4.boxShadow]: `${globalRefs$f.shadow.wide['2xl']} ${shadowColor$1}`,
|
4212
4215
|
},
|
4213
4216
|
},
|
4214
4217
|
|
4215
4218
|
borderRadius: {
|
4216
|
-
sm: { [compVars$
|
4217
|
-
md: { [compVars$
|
4218
|
-
lg: { [compVars$
|
4219
|
-
xl: { [compVars$
|
4220
|
-
'2xl': { [compVars$
|
4221
|
-
'3xl': { [compVars$
|
4219
|
+
sm: { [compVars$4.borderRadius]: globalRefs$f.radius.sm },
|
4220
|
+
md: { [compVars$4.borderRadius]: globalRefs$f.radius.md },
|
4221
|
+
lg: { [compVars$4.borderRadius]: globalRefs$f.radius.lg },
|
4222
|
+
xl: { [compVars$4.borderRadius]: globalRefs$f.radius.xl },
|
4223
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$f.radius['2xl'] },
|
4224
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$f.radius['3xl'] },
|
4222
4225
|
},
|
4223
4226
|
};
|
4224
4227
|
|
4225
|
-
const vars$
|
4226
|
-
...compVars$
|
4228
|
+
const vars$q = {
|
4229
|
+
...compVars$4,
|
4227
4230
|
...helperVars$2,
|
4228
4231
|
};
|
4229
4232
|
|
4230
4233
|
var container$1 = /*#__PURE__*/Object.freeze({
|
4231
4234
|
__proto__: null,
|
4232
4235
|
default: container,
|
4233
|
-
vars: vars$
|
4236
|
+
vars: vars$q
|
4234
4237
|
});
|
4235
4238
|
|
4236
4239
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4283,71 +4286,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4283
4286
|
return CssVarImageClass;
|
4284
4287
|
};
|
4285
4288
|
|
4286
|
-
const componentName$
|
4289
|
+
const componentName$x = getComponentName('logo');
|
4287
4290
|
|
4288
4291
|
const LogoClass = createCssVarImageClass({
|
4289
|
-
componentName: componentName$
|
4292
|
+
componentName: componentName$x,
|
4290
4293
|
varName: 'url',
|
4291
4294
|
fallbackVarName: 'fallbackUrl',
|
4292
4295
|
});
|
4293
4296
|
|
4294
|
-
const vars$
|
4297
|
+
const vars$p = LogoClass.cssVarList;
|
4295
4298
|
|
4296
4299
|
const logo$2 = {
|
4297
|
-
[vars$
|
4300
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4298
4301
|
};
|
4299
4302
|
|
4300
4303
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
4301
4304
|
__proto__: null,
|
4302
4305
|
default: logo$2,
|
4303
|
-
vars: vars$
|
4306
|
+
vars: vars$p
|
4304
4307
|
});
|
4305
4308
|
|
4306
|
-
const componentName$
|
4309
|
+
const componentName$w = getComponentName('totp-image');
|
4307
4310
|
|
4308
4311
|
const TotpImageClass = createCssVarImageClass({
|
4309
|
-
componentName: componentName$
|
4312
|
+
componentName: componentName$w,
|
4310
4313
|
varName: 'url',
|
4311
4314
|
fallbackVarName: 'fallbackUrl',
|
4312
4315
|
});
|
4313
4316
|
|
4314
|
-
const vars$
|
4317
|
+
const vars$o = TotpImageClass.cssVarList;
|
4315
4318
|
|
4316
4319
|
const logo$1 = {
|
4317
|
-
[vars$
|
4320
|
+
[vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4318
4321
|
};
|
4319
4322
|
|
4320
4323
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4321
4324
|
__proto__: null,
|
4322
4325
|
default: logo$1,
|
4323
|
-
vars: vars$
|
4326
|
+
vars: vars$o
|
4324
4327
|
});
|
4325
4328
|
|
4326
|
-
const componentName$
|
4329
|
+
const componentName$v = getComponentName('notp-image');
|
4327
4330
|
|
4328
4331
|
const NotpImageClass = createCssVarImageClass({
|
4329
|
-
componentName: componentName$
|
4332
|
+
componentName: componentName$v,
|
4330
4333
|
varName: 'url',
|
4331
4334
|
fallbackVarName: 'fallbackUrl',
|
4332
4335
|
});
|
4333
4336
|
|
4334
|
-
const vars$
|
4337
|
+
const vars$n = NotpImageClass.cssVarList;
|
4335
4338
|
|
4336
4339
|
const logo = {
|
4337
|
-
[vars$
|
4340
|
+
[vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
4338
4341
|
};
|
4339
4342
|
|
4340
4343
|
var notpImage = /*#__PURE__*/Object.freeze({
|
4341
4344
|
__proto__: null,
|
4342
4345
|
default: logo,
|
4343
|
-
vars: vars$
|
4346
|
+
vars: vars$n
|
4344
4347
|
});
|
4345
4348
|
|
4346
4349
|
// eslint-disable-next-line max-classes-per-file
|
4347
4350
|
|
4348
|
-
const componentName$
|
4351
|
+
const componentName$u = getComponentName('text');
|
4349
4352
|
|
4350
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4353
|
+
class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
|
4351
4354
|
constructor() {
|
4352
4355
|
super();
|
4353
4356
|
|
@@ -4407,99 +4410,99 @@ const TextClass = compose(
|
|
4407
4410
|
customTextMixin
|
4408
4411
|
)(RawText);
|
4409
4412
|
|
4410
|
-
const globalRefs$
|
4411
|
-
const vars$
|
4413
|
+
const globalRefs$e = getThemeRefs(globals);
|
4414
|
+
const vars$m = TextClass.cssVarList;
|
4412
4415
|
|
4413
4416
|
const text$2 = {
|
4414
|
-
[vars$
|
4415
|
-
[vars$
|
4416
|
-
[vars$
|
4417
|
-
[vars$
|
4417
|
+
[vars$m.hostDirection]: globalRefs$e.direction,
|
4418
|
+
[vars$m.textLineHeight]: '1.35em',
|
4419
|
+
[vars$m.textAlign]: 'left',
|
4420
|
+
[vars$m.textColor]: globalRefs$e.colors.surface.dark,
|
4418
4421
|
variant: {
|
4419
4422
|
h1: {
|
4420
|
-
[vars$
|
4421
|
-
[vars$
|
4422
|
-
[vars$
|
4423
|
+
[vars$m.fontSize]: globalRefs$e.typography.h1.size,
|
4424
|
+
[vars$m.fontWeight]: globalRefs$e.typography.h1.weight,
|
4425
|
+
[vars$m.fontFamily]: globalRefs$e.typography.h1.font,
|
4423
4426
|
},
|
4424
4427
|
h2: {
|
4425
|
-
[vars$
|
4426
|
-
[vars$
|
4427
|
-
[vars$
|
4428
|
+
[vars$m.fontSize]: globalRefs$e.typography.h2.size,
|
4429
|
+
[vars$m.fontWeight]: globalRefs$e.typography.h2.weight,
|
4430
|
+
[vars$m.fontFamily]: globalRefs$e.typography.h2.font,
|
4428
4431
|
},
|
4429
4432
|
h3: {
|
4430
|
-
[vars$
|
4431
|
-
[vars$
|
4432
|
-
[vars$
|
4433
|
+
[vars$m.fontSize]: globalRefs$e.typography.h3.size,
|
4434
|
+
[vars$m.fontWeight]: globalRefs$e.typography.h3.weight,
|
4435
|
+
[vars$m.fontFamily]: globalRefs$e.typography.h3.font,
|
4433
4436
|
},
|
4434
4437
|
subtitle1: {
|
4435
|
-
[vars$
|
4436
|
-
[vars$
|
4437
|
-
[vars$
|
4438
|
+
[vars$m.fontSize]: globalRefs$e.typography.subtitle1.size,
|
4439
|
+
[vars$m.fontWeight]: globalRefs$e.typography.subtitle1.weight,
|
4440
|
+
[vars$m.fontFamily]: globalRefs$e.typography.subtitle1.font,
|
4438
4441
|
},
|
4439
4442
|
subtitle2: {
|
4440
|
-
[vars$
|
4441
|
-
[vars$
|
4442
|
-
[vars$
|
4443
|
+
[vars$m.fontSize]: globalRefs$e.typography.subtitle2.size,
|
4444
|
+
[vars$m.fontWeight]: globalRefs$e.typography.subtitle2.weight,
|
4445
|
+
[vars$m.fontFamily]: globalRefs$e.typography.subtitle2.font,
|
4443
4446
|
},
|
4444
4447
|
body1: {
|
4445
|
-
[vars$
|
4446
|
-
[vars$
|
4447
|
-
[vars$
|
4448
|
+
[vars$m.fontSize]: globalRefs$e.typography.body1.size,
|
4449
|
+
[vars$m.fontWeight]: globalRefs$e.typography.body1.weight,
|
4450
|
+
[vars$m.fontFamily]: globalRefs$e.typography.body1.font,
|
4448
4451
|
},
|
4449
4452
|
body2: {
|
4450
|
-
[vars$
|
4451
|
-
[vars$
|
4452
|
-
[vars$
|
4453
|
+
[vars$m.fontSize]: globalRefs$e.typography.body2.size,
|
4454
|
+
[vars$m.fontWeight]: globalRefs$e.typography.body2.weight,
|
4455
|
+
[vars$m.fontFamily]: globalRefs$e.typography.body2.font,
|
4453
4456
|
},
|
4454
4457
|
},
|
4455
4458
|
|
4456
4459
|
mode: {
|
4457
4460
|
primary: {
|
4458
|
-
[vars$
|
4461
|
+
[vars$m.textColor]: globalRefs$e.colors.surface.contrast,
|
4459
4462
|
},
|
4460
4463
|
secondary: {
|
4461
|
-
[vars$
|
4464
|
+
[vars$m.textColor]: globalRefs$e.colors.surface.dark,
|
4462
4465
|
},
|
4463
4466
|
error: {
|
4464
|
-
[vars$
|
4467
|
+
[vars$m.textColor]: globalRefs$e.colors.error.main,
|
4465
4468
|
},
|
4466
4469
|
success: {
|
4467
|
-
[vars$
|
4470
|
+
[vars$m.textColor]: globalRefs$e.colors.success.main,
|
4468
4471
|
},
|
4469
4472
|
},
|
4470
4473
|
|
4471
4474
|
textAlign: {
|
4472
|
-
right: { [vars$
|
4473
|
-
left: { [vars$
|
4474
|
-
center: { [vars$
|
4475
|
+
right: { [vars$m.textAlign]: 'right' },
|
4476
|
+
left: { [vars$m.textAlign]: 'left' },
|
4477
|
+
center: { [vars$m.textAlign]: 'center' },
|
4475
4478
|
},
|
4476
4479
|
|
4477
4480
|
_fullWidth: {
|
4478
|
-
[vars$
|
4481
|
+
[vars$m.hostWidth]: '100%',
|
4479
4482
|
},
|
4480
4483
|
|
4481
4484
|
_italic: {
|
4482
|
-
[vars$
|
4485
|
+
[vars$m.fontStyle]: 'italic',
|
4483
4486
|
},
|
4484
4487
|
|
4485
4488
|
_uppercase: {
|
4486
|
-
[vars$
|
4489
|
+
[vars$m.textTransform]: 'uppercase',
|
4487
4490
|
},
|
4488
4491
|
|
4489
4492
|
_lowercase: {
|
4490
|
-
[vars$
|
4493
|
+
[vars$m.textTransform]: 'lowercase',
|
4491
4494
|
},
|
4492
4495
|
};
|
4493
4496
|
|
4494
4497
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4495
4498
|
__proto__: null,
|
4496
4499
|
default: text$2,
|
4497
|
-
vars: vars$
|
4500
|
+
vars: vars$m
|
4498
4501
|
});
|
4499
4502
|
|
4500
|
-
const componentName$
|
4503
|
+
const componentName$t = getComponentName('link');
|
4501
4504
|
|
4502
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4505
|
+
class RawLink extends createBaseClass({ componentName: componentName$t, baseSelector: ':host a' }) {
|
4503
4506
|
constructor() {
|
4504
4507
|
super();
|
4505
4508
|
|
@@ -4545,12 +4548,12 @@ const selectors$2 = {
|
|
4545
4548
|
text: { selector: () => TextClass.componentName },
|
4546
4549
|
};
|
4547
4550
|
|
4548
|
-
const { anchor, text: text$1, host: host$
|
4551
|
+
const { anchor, text: text$1, host: host$d, wrapper: wrapper$1 } = selectors$2;
|
4549
4552
|
|
4550
4553
|
const LinkClass = compose(
|
4551
4554
|
createStyleMixin({
|
4552
4555
|
mappings: {
|
4553
|
-
hostWidth: { ...host$
|
4556
|
+
hostWidth: { ...host$d, property: 'width' },
|
4554
4557
|
hostDirection: { ...text$1, property: 'direction' },
|
4555
4558
|
textAlign: wrapper$1,
|
4556
4559
|
textColor: [
|
@@ -4564,37 +4567,37 @@ const LinkClass = compose(
|
|
4564
4567
|
componentNameValidationMixin
|
4565
4568
|
)(RawLink);
|
4566
4569
|
|
4567
|
-
const globalRefs$
|
4568
|
-
const vars$
|
4570
|
+
const globalRefs$d = getThemeRefs(globals);
|
4571
|
+
const vars$l = LinkClass.cssVarList;
|
4569
4572
|
|
4570
4573
|
const link = {
|
4571
|
-
[vars$
|
4572
|
-
[vars$
|
4574
|
+
[vars$l.hostDirection]: globalRefs$d.direction,
|
4575
|
+
[vars$l.cursor]: 'pointer',
|
4573
4576
|
|
4574
|
-
[vars$
|
4577
|
+
[vars$l.textColor]: globalRefs$d.colors.primary.main,
|
4575
4578
|
|
4576
4579
|
textAlign: {
|
4577
|
-
right: { [vars$
|
4578
|
-
left: { [vars$
|
4579
|
-
center: { [vars$
|
4580
|
+
right: { [vars$l.textAlign]: 'right' },
|
4581
|
+
left: { [vars$l.textAlign]: 'left' },
|
4582
|
+
center: { [vars$l.textAlign]: 'center' },
|
4580
4583
|
},
|
4581
4584
|
|
4582
4585
|
_fullWidth: {
|
4583
|
-
[vars$
|
4586
|
+
[vars$l.hostWidth]: '100%',
|
4584
4587
|
},
|
4585
4588
|
|
4586
4589
|
mode: {
|
4587
4590
|
primary: {
|
4588
|
-
[vars$
|
4591
|
+
[vars$l.textColor]: globalRefs$d.colors.primary.main,
|
4589
4592
|
},
|
4590
4593
|
secondary: {
|
4591
|
-
[vars$
|
4594
|
+
[vars$l.textColor]: globalRefs$d.colors.secondary.main,
|
4592
4595
|
},
|
4593
4596
|
error: {
|
4594
|
-
[vars$
|
4597
|
+
[vars$l.textColor]: globalRefs$d.colors.error.main,
|
4595
4598
|
},
|
4596
4599
|
success: {
|
4597
|
-
[vars$
|
4600
|
+
[vars$l.textColor]: globalRefs$d.colors.success.main,
|
4598
4601
|
},
|
4599
4602
|
},
|
4600
4603
|
};
|
@@ -4602,11 +4605,11 @@ const link = {
|
|
4602
4605
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4603
4606
|
__proto__: null,
|
4604
4607
|
default: link,
|
4605
|
-
vars: vars$
|
4608
|
+
vars: vars$l
|
4606
4609
|
});
|
4607
4610
|
|
4608
|
-
const componentName$
|
4609
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4611
|
+
const componentName$s = getComponentName('divider');
|
4612
|
+
class RawDivider extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
4610
4613
|
constructor() {
|
4611
4614
|
super();
|
4612
4615
|
|
@@ -4652,7 +4655,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$r, baseS
|
|
4652
4655
|
}
|
4653
4656
|
|
4654
4657
|
const textVars$3 = TextClass.cssVarList;
|
4655
|
-
const { host: host$
|
4658
|
+
const { host: host$c, before, after: after$1, text } = {
|
4656
4659
|
host: { selector: () => ':host' },
|
4657
4660
|
before: { selector: '::before' },
|
4658
4661
|
after: { selector: '::after' },
|
@@ -4662,8 +4665,8 @@ const { host: host$b, before, after: after$1, text } = {
|
|
4662
4665
|
const DividerClass = compose(
|
4663
4666
|
createStyleMixin({
|
4664
4667
|
mappings: {
|
4665
|
-
hostWidth: { ...host$
|
4666
|
-
hostPadding: { ...host$
|
4668
|
+
hostWidth: { ...host$c, property: 'width' },
|
4669
|
+
hostPadding: { ...host$c, property: 'padding' },
|
4667
4670
|
hostDirection: { ...text, property: 'direction' },
|
4668
4671
|
|
4669
4672
|
minHeight: {},
|
@@ -4705,65 +4708,65 @@ const DividerClass = compose(
|
|
4705
4708
|
componentNameValidationMixin
|
4706
4709
|
)(RawDivider);
|
4707
4710
|
|
4708
|
-
const globalRefs$
|
4709
|
-
const compVars$
|
4711
|
+
const globalRefs$c = getThemeRefs(globals);
|
4712
|
+
const compVars$3 = DividerClass.cssVarList;
|
4710
4713
|
|
4711
4714
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
4712
4715
|
{
|
4713
4716
|
thickness: '2px',
|
4714
4717
|
spacing: '10px',
|
4715
4718
|
},
|
4716
|
-
componentName$
|
4719
|
+
componentName$s
|
4717
4720
|
);
|
4718
4721
|
|
4719
4722
|
const divider = {
|
4720
4723
|
...helperTheme$1,
|
4721
4724
|
|
4722
|
-
[compVars$
|
4723
|
-
[compVars$
|
4724
|
-
[compVars$
|
4725
|
-
[compVars$
|
4726
|
-
[compVars$
|
4727
|
-
[compVars$
|
4728
|
-
[compVars$
|
4729
|
-
[compVars$
|
4730
|
-
[compVars$
|
4731
|
-
[compVars$
|
4732
|
-
[compVars$
|
4733
|
-
[compVars$
|
4725
|
+
[compVars$3.hostDirection]: globalRefs$c.direction,
|
4726
|
+
[compVars$3.alignItems]: 'center',
|
4727
|
+
[compVars$3.flexDirection]: 'row',
|
4728
|
+
[compVars$3.alignSelf]: 'stretch',
|
4729
|
+
[compVars$3.hostWidth]: '100%',
|
4730
|
+
[compVars$3.stripeColor]: globalRefs$c.colors.surface.light,
|
4731
|
+
[compVars$3.stripeColorOpacity]: '0.5',
|
4732
|
+
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4733
|
+
[compVars$3.labelTextWidth]: 'fit-content',
|
4734
|
+
[compVars$3.labelTextMaxWidth]: 'calc(100% - 100px)',
|
4735
|
+
[compVars$3.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
4736
|
+
[compVars$3.textAlign]: 'center',
|
4734
4737
|
|
4735
4738
|
_vertical: {
|
4736
|
-
[compVars$
|
4737
|
-
[compVars$
|
4738
|
-
[compVars$
|
4739
|
-
[compVars$
|
4740
|
-
[compVars$
|
4741
|
-
[compVars$
|
4742
|
-
[compVars$
|
4743
|
-
[compVars$
|
4739
|
+
[compVars$3.minHeight]: '200px',
|
4740
|
+
[compVars$3.flexDirection]: 'column',
|
4741
|
+
[compVars$3.hostWidth]: 'fit-content',
|
4742
|
+
[compVars$3.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
4743
|
+
[compVars$3.stripeVerticalThickness]: helperRefs$1.thickness,
|
4744
|
+
[compVars$3.labelTextWidth]: 'fit-content',
|
4745
|
+
[compVars$3.labelTextMaxWidth]: '100%',
|
4746
|
+
[compVars$3.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
4744
4747
|
},
|
4745
4748
|
};
|
4746
4749
|
|
4747
|
-
const vars$
|
4748
|
-
...compVars$
|
4750
|
+
const vars$k = {
|
4751
|
+
...compVars$3,
|
4749
4752
|
...helperVars$1,
|
4750
4753
|
};
|
4751
4754
|
|
4752
4755
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4753
4756
|
__proto__: null,
|
4754
4757
|
default: divider,
|
4755
|
-
vars: vars$
|
4758
|
+
vars: vars$k
|
4756
4759
|
});
|
4757
4760
|
|
4758
4761
|
/* eslint-disable no-param-reassign */
|
4759
4762
|
|
4760
|
-
const componentName$
|
4763
|
+
const componentName$r = getComponentName('passcode-internal');
|
4761
4764
|
|
4762
|
-
createBaseInputClass({ componentName: componentName$
|
4765
|
+
createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
|
4763
4766
|
|
4764
|
-
const componentName$
|
4767
|
+
const componentName$q = getComponentName('loader-radial');
|
4765
4768
|
|
4766
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4769
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > div' }) {
|
4767
4770
|
constructor() {
|
4768
4771
|
super();
|
4769
4772
|
|
@@ -4807,7 +4810,7 @@ const LoaderRadialClass = compose(
|
|
4807
4810
|
componentNameValidationMixin
|
4808
4811
|
)(RawLoaderRadial);
|
4809
4812
|
|
4810
|
-
const componentName$
|
4813
|
+
const componentName$p = getComponentName('passcode');
|
4811
4814
|
|
4812
4815
|
const observedAttributes$3 = ['digits'];
|
4813
4816
|
|
@@ -4826,17 +4829,17 @@ const customMixin$5 = (superclass) =>
|
|
4826
4829
|
const template = document.createElement('template');
|
4827
4830
|
|
4828
4831
|
template.innerHTML = `
|
4829
|
-
<${componentName$
|
4832
|
+
<${componentName$r}
|
4830
4833
|
bordered="true"
|
4831
4834
|
name="code"
|
4832
4835
|
tabindex="-1"
|
4833
4836
|
slot="input"
|
4834
|
-
><slot></slot></${componentName$
|
4837
|
+
><slot></slot></${componentName$r}>
|
4835
4838
|
`;
|
4836
4839
|
|
4837
4840
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4838
4841
|
|
4839
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4842
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$r);
|
4840
4843
|
|
4841
4844
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
4842
4845
|
}
|
@@ -4851,7 +4854,7 @@ const customMixin$5 = (superclass) =>
|
|
4851
4854
|
};
|
4852
4855
|
|
4853
4856
|
const {
|
4854
|
-
host: host$
|
4857
|
+
host: host$b,
|
4855
4858
|
digitField,
|
4856
4859
|
label: label$6,
|
4857
4860
|
requiredIndicator: requiredIndicator$6,
|
@@ -4874,10 +4877,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
4874
4877
|
const PasscodeClass = compose(
|
4875
4878
|
createStyleMixin({
|
4876
4879
|
mappings: {
|
4877
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
4880
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
|
4878
4881
|
hostWidth: { property: 'width' },
|
4879
|
-
hostDirection: { ...host$
|
4880
|
-
fontFamily: [host$
|
4882
|
+
hostDirection: { ...host$b, property: 'direction' },
|
4883
|
+
fontFamily: [host$b, { ...label$6 }],
|
4881
4884
|
labelTextColor: [
|
4882
4885
|
{ ...label$6, property: 'color' },
|
4883
4886
|
{ ...requiredIndicator$6, property: 'color' },
|
@@ -4983,56 +4986,56 @@ const PasscodeClass = compose(
|
|
4983
4986
|
${resetInputCursor('vaadin-text-field')}
|
4984
4987
|
`,
|
4985
4988
|
excludeAttrsSync: ['tabindex'],
|
4986
|
-
componentName: componentName$
|
4989
|
+
componentName: componentName$p,
|
4987
4990
|
})
|
4988
4991
|
);
|
4989
4992
|
|
4990
|
-
const vars$
|
4993
|
+
const vars$j = PasscodeClass.cssVarList;
|
4991
4994
|
|
4992
4995
|
const passcode = {
|
4993
|
-
[vars$
|
4994
|
-
[vars$
|
4995
|
-
[vars$
|
4996
|
-
[vars$
|
4997
|
-
[vars$
|
4998
|
-
[vars$
|
4999
|
-
[vars$
|
5000
|
-
[vars$
|
5001
|
-
[vars$
|
5002
|
-
[vars$
|
5003
|
-
[vars$
|
5004
|
-
[vars$
|
5005
|
-
[vars$
|
5006
|
-
[vars$
|
5007
|
-
[vars$
|
4996
|
+
[vars$j.hostDirection]: refs.direction,
|
4997
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
4998
|
+
[vars$j.fontSize]: refs.fontSize,
|
4999
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
5000
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
5001
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
5002
|
+
[vars$j.digitValueTextColor]: refs.valueTextColor,
|
5003
|
+
[vars$j.digitPadding]: '0',
|
5004
|
+
[vars$j.digitTextAlign]: 'center',
|
5005
|
+
[vars$j.digitSpacing]: '4px',
|
5006
|
+
[vars$j.hostWidth]: refs.width,
|
5007
|
+
[vars$j.digitOutlineColor]: 'transparent',
|
5008
|
+
[vars$j.digitOutlineWidth]: refs.outlineWidth,
|
5009
|
+
[vars$j.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
5010
|
+
[vars$j.digitSize]: refs.inputHeight,
|
5008
5011
|
|
5009
5012
|
size: {
|
5010
|
-
xs: { [vars$
|
5011
|
-
sm: { [vars$
|
5012
|
-
md: { [vars$
|
5013
|
-
lg: { [vars$
|
5013
|
+
xs: { [vars$j.spinnerSize]: '15px' },
|
5014
|
+
sm: { [vars$j.spinnerSize]: '20px' },
|
5015
|
+
md: { [vars$j.spinnerSize]: '20px' },
|
5016
|
+
lg: { [vars$j.spinnerSize]: '20px' },
|
5014
5017
|
},
|
5015
5018
|
|
5016
5019
|
_hideCursor: {
|
5017
|
-
[vars$
|
5020
|
+
[vars$j.digitCaretTextColor]: 'transparent',
|
5018
5021
|
},
|
5019
5022
|
|
5020
5023
|
_loading: {
|
5021
|
-
[vars$
|
5024
|
+
[vars$j.overlayOpacity]: refs.overlayOpacity,
|
5022
5025
|
},
|
5023
5026
|
};
|
5024
5027
|
|
5025
5028
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
5026
5029
|
__proto__: null,
|
5027
5030
|
default: passcode,
|
5028
|
-
vars: vars$
|
5031
|
+
vars: vars$j
|
5029
5032
|
});
|
5030
5033
|
|
5031
|
-
const componentName$
|
5034
|
+
const componentName$o = getComponentName('loader-linear');
|
5032
5035
|
|
5033
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
5036
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
|
5034
5037
|
static get componentName() {
|
5035
|
-
return componentName$
|
5038
|
+
return componentName$o;
|
5036
5039
|
}
|
5037
5040
|
|
5038
5041
|
constructor() {
|
@@ -5068,18 +5071,18 @@ const selectors$1 = {
|
|
5068
5071
|
host: { selector: () => ':host' },
|
5069
5072
|
};
|
5070
5073
|
|
5071
|
-
const { after, host: host$
|
5074
|
+
const { after, host: host$a } = selectors$1;
|
5072
5075
|
|
5073
5076
|
const LoaderLinearClass = compose(
|
5074
5077
|
createStyleMixin({
|
5075
5078
|
mappings: {
|
5076
5079
|
hostDisplay: {},
|
5077
|
-
hostWidth: { ...host$
|
5080
|
+
hostWidth: { ...host$a, property: 'width' },
|
5078
5081
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
5079
5082
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
5080
5083
|
verticalPadding: [
|
5081
|
-
{ ...host$
|
5082
|
-
{ ...host$
|
5084
|
+
{ ...host$a, property: 'padding-top' },
|
5085
|
+
{ ...host$a, property: 'padding-bottom' },
|
5083
5086
|
],
|
5084
5087
|
barBackgroundColor: { property: 'background-color' },
|
5085
5088
|
barColor: { ...after, property: 'background-color' },
|
@@ -5093,107 +5096,107 @@ const LoaderLinearClass = compose(
|
|
5093
5096
|
componentNameValidationMixin
|
5094
5097
|
)(RawLoaderLinear);
|
5095
5098
|
|
5096
|
-
const globalRefs$
|
5097
|
-
const vars$
|
5099
|
+
const globalRefs$b = getThemeRefs(globals);
|
5100
|
+
const vars$i = LoaderLinearClass.cssVarList;
|
5098
5101
|
|
5099
5102
|
const loaderLinear = {
|
5100
|
-
[vars$
|
5101
|
-
[vars$
|
5103
|
+
[vars$i.hostDisplay]: 'inline-block',
|
5104
|
+
[vars$i.hostWidth]: '100%',
|
5102
5105
|
|
5103
|
-
[vars$
|
5104
|
-
[vars$
|
5106
|
+
[vars$i.barColor]: globalRefs$b.colors.surface.contrast,
|
5107
|
+
[vars$i.barWidth]: '20%',
|
5105
5108
|
|
5106
|
-
[vars$
|
5107
|
-
[vars$
|
5109
|
+
[vars$i.barBackgroundColor]: globalRefs$b.colors.surface.light,
|
5110
|
+
[vars$i.barBorderRadius]: '4px',
|
5108
5111
|
|
5109
|
-
[vars$
|
5110
|
-
[vars$
|
5111
|
-
[vars$
|
5112
|
-
[vars$
|
5112
|
+
[vars$i.animationDuration]: '2s',
|
5113
|
+
[vars$i.animationTimingFunction]: 'linear',
|
5114
|
+
[vars$i.animationIterationCount]: 'infinite',
|
5115
|
+
[vars$i.verticalPadding]: '0.25em',
|
5113
5116
|
|
5114
5117
|
size: {
|
5115
|
-
xs: { [vars$
|
5116
|
-
sm: { [vars$
|
5117
|
-
md: { [vars$
|
5118
|
-
lg: { [vars$
|
5118
|
+
xs: { [vars$i.barHeight]: '2px' },
|
5119
|
+
sm: { [vars$i.barHeight]: '4px' },
|
5120
|
+
md: { [vars$i.barHeight]: '6px' },
|
5121
|
+
lg: { [vars$i.barHeight]: '8px' },
|
5119
5122
|
},
|
5120
5123
|
|
5121
5124
|
mode: {
|
5122
5125
|
primary: {
|
5123
|
-
[vars$
|
5126
|
+
[vars$i.barColor]: globalRefs$b.colors.primary.main,
|
5124
5127
|
},
|
5125
5128
|
secondary: {
|
5126
|
-
[vars$
|
5129
|
+
[vars$i.barColor]: globalRefs$b.colors.secondary.main,
|
5127
5130
|
},
|
5128
5131
|
},
|
5129
5132
|
|
5130
5133
|
_hidden: {
|
5131
|
-
[vars$
|
5134
|
+
[vars$i.hostDisplay]: 'none',
|
5132
5135
|
},
|
5133
5136
|
};
|
5134
5137
|
|
5135
5138
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
5136
5139
|
__proto__: null,
|
5137
5140
|
default: loaderLinear,
|
5138
|
-
vars: vars$
|
5141
|
+
vars: vars$i
|
5139
5142
|
});
|
5140
5143
|
|
5141
|
-
const globalRefs$
|
5142
|
-
const compVars$
|
5144
|
+
const globalRefs$a = getThemeRefs(globals);
|
5145
|
+
const compVars$2 = LoaderRadialClass.cssVarList;
|
5143
5146
|
|
5144
5147
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
5145
5148
|
{
|
5146
|
-
spinnerColor: globalRefs$
|
5149
|
+
spinnerColor: globalRefs$a.colors.surface.contrast,
|
5147
5150
|
mode: {
|
5148
5151
|
primary: {
|
5149
|
-
spinnerColor: globalRefs$
|
5152
|
+
spinnerColor: globalRefs$a.colors.primary.main,
|
5150
5153
|
},
|
5151
5154
|
secondary: {
|
5152
|
-
spinnerColor: globalRefs$
|
5155
|
+
spinnerColor: globalRefs$a.colors.secondary.main,
|
5153
5156
|
},
|
5154
5157
|
},
|
5155
5158
|
},
|
5156
|
-
componentName$
|
5159
|
+
componentName$q
|
5157
5160
|
);
|
5158
5161
|
|
5159
5162
|
const loaderRadial = {
|
5160
5163
|
...helperTheme,
|
5161
5164
|
|
5162
|
-
[compVars$
|
5163
|
-
[compVars$
|
5164
|
-
[compVars$
|
5165
|
-
[compVars$
|
5166
|
-
[compVars$
|
5167
|
-
[compVars$
|
5168
|
-
[compVars$
|
5169
|
-
[compVars$
|
5170
|
-
[compVars$
|
5171
|
-
[compVars$
|
5165
|
+
[compVars$2.animationDuration]: '2s',
|
5166
|
+
[compVars$2.animationTimingFunction]: 'linear',
|
5167
|
+
[compVars$2.animationIterationCount]: 'infinite',
|
5168
|
+
[compVars$2.spinnerBorderStyle]: 'solid',
|
5169
|
+
[compVars$2.spinnerBorderWidth]: '0.2em',
|
5170
|
+
[compVars$2.spinnerBorderRadius]: '50%',
|
5171
|
+
[compVars$2.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
5172
|
+
[compVars$2.spinnerQuadrant2Color]: 'transparent',
|
5173
|
+
[compVars$2.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
5174
|
+
[compVars$2.spinnerQuadrant4Color]: 'transparent',
|
5172
5175
|
|
5173
5176
|
size: {
|
5174
|
-
xs: { [compVars$
|
5175
|
-
sm: { [compVars$
|
5176
|
-
md: { [compVars$
|
5177
|
-
lg: { [compVars$
|
5178
|
-
xl: { [compVars$
|
5177
|
+
xs: { [compVars$2.spinnerSize]: '20px' },
|
5178
|
+
sm: { [compVars$2.spinnerSize]: '30px' },
|
5179
|
+
md: { [compVars$2.spinnerSize]: '40px' },
|
5180
|
+
lg: { [compVars$2.spinnerSize]: '60px' },
|
5181
|
+
xl: { [compVars$2.spinnerSize]: '80px' },
|
5179
5182
|
},
|
5180
5183
|
|
5181
5184
|
_hidden: {
|
5182
|
-
[compVars$
|
5185
|
+
[compVars$2.hostDisplay]: 'none',
|
5183
5186
|
},
|
5184
5187
|
};
|
5185
|
-
const vars$
|
5186
|
-
...compVars$
|
5188
|
+
const vars$h = {
|
5189
|
+
...compVars$2,
|
5187
5190
|
...helperVars,
|
5188
5191
|
};
|
5189
5192
|
|
5190
5193
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
5191
5194
|
__proto__: null,
|
5192
5195
|
default: loaderRadial,
|
5193
|
-
vars: vars$
|
5196
|
+
vars: vars$h
|
5194
5197
|
});
|
5195
5198
|
|
5196
|
-
const componentName$
|
5199
|
+
const componentName$n = getComponentName('combo-box');
|
5197
5200
|
|
5198
5201
|
const ComboBoxMixin = (superclass) =>
|
5199
5202
|
class ComboBoxMixinClass extends superclass {
|
@@ -5419,7 +5422,7 @@ const ComboBoxMixin = (superclass) =>
|
|
5419
5422
|
};
|
5420
5423
|
|
5421
5424
|
const {
|
5422
|
-
host: host$
|
5425
|
+
host: host$9,
|
5423
5426
|
inputField: inputField$3,
|
5424
5427
|
inputElement: inputElement$1,
|
5425
5428
|
placeholder: placeholder$1,
|
@@ -5445,10 +5448,10 @@ const {
|
|
5445
5448
|
const ComboBoxClass = compose(
|
5446
5449
|
createStyleMixin({
|
5447
5450
|
mappings: {
|
5448
|
-
hostWidth: { ...host$
|
5449
|
-
hostDirection: { ...host$
|
5451
|
+
hostWidth: { ...host$9, property: 'width' },
|
5452
|
+
hostDirection: { ...host$9, property: 'direction' },
|
5450
5453
|
// we apply font-size also on the host so we can set its width with em
|
5451
|
-
fontSize: [{}, host$
|
5454
|
+
fontSize: [{}, host$9],
|
5452
5455
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
5453
5456
|
labelTextColor: [
|
5454
5457
|
{ ...label$5, property: 'color' },
|
@@ -5576,71 +5579,71 @@ const ComboBoxClass = compose(
|
|
5576
5579
|
// and reset items to an empty array, and opening the list box with no items
|
5577
5580
|
// to display.
|
5578
5581
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5579
|
-
componentName: componentName$
|
5582
|
+
componentName: componentName$n,
|
5580
5583
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5581
5584
|
})
|
5582
5585
|
);
|
5583
5586
|
|
5584
|
-
const globalRefs$
|
5585
|
-
const vars$
|
5587
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5588
|
+
const vars$g = ComboBoxClass.cssVarList;
|
5586
5589
|
|
5587
5590
|
const comboBox = {
|
5588
|
-
[vars$
|
5589
|
-
[vars$
|
5590
|
-
[vars$
|
5591
|
-
[vars$
|
5592
|
-
[vars$
|
5593
|
-
[vars$
|
5594
|
-
[vars$
|
5595
|
-
[vars$
|
5596
|
-
[vars$
|
5597
|
-
[vars$
|
5598
|
-
[vars$
|
5599
|
-
[vars$
|
5600
|
-
[vars$
|
5601
|
-
[vars$
|
5602
|
-
[vars$
|
5603
|
-
[vars$
|
5604
|
-
[vars$
|
5605
|
-
[vars$
|
5606
|
-
[vars$
|
5607
|
-
[vars$
|
5608
|
-
[vars$
|
5609
|
-
[vars$
|
5610
|
-
[vars$
|
5611
|
-
[vars$
|
5612
|
-
[vars$
|
5613
|
-
[vars$
|
5591
|
+
[vars$g.hostWidth]: refs.width,
|
5592
|
+
[vars$g.hostDirection]: refs.direction,
|
5593
|
+
[vars$g.fontSize]: refs.fontSize,
|
5594
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
5595
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
5596
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
5597
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
5598
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
5599
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
5600
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
5601
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
5602
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
5603
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
5604
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
5605
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
5606
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
5607
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5608
|
+
[vars$g.inputBackgroundColor]: refs.backgroundColor,
|
5609
|
+
[vars$g.inputHorizontalPadding]: refs.horizontalPadding,
|
5610
|
+
[vars$g.inputHeight]: refs.inputHeight,
|
5611
|
+
[vars$g.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
|
5612
|
+
[vars$g.inputDropdownButtonCursor]: 'pointer',
|
5613
|
+
[vars$g.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5614
|
+
[vars$g.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
|
5615
|
+
[vars$g.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
|
5616
|
+
[vars$g.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
|
5614
5617
|
|
5615
5618
|
_readonly: {
|
5616
|
-
[vars$
|
5619
|
+
[vars$g.inputDropdownButtonCursor]: 'default',
|
5617
5620
|
},
|
5618
5621
|
|
5619
5622
|
// Overlay theme exposed via the component:
|
5620
|
-
[vars$
|
5621
|
-
[vars$
|
5622
|
-
[vars$
|
5623
|
-
[vars$
|
5624
|
-
[vars$
|
5625
|
-
[vars$
|
5623
|
+
[vars$g.overlayFontSize]: refs.fontSize,
|
5624
|
+
[vars$g.overlayFontFamily]: refs.fontFamily,
|
5625
|
+
[vars$g.overlayCursor]: 'pointer',
|
5626
|
+
[vars$g.overlayItemBoxShadow]: 'none',
|
5627
|
+
[vars$g.overlayBackground]: refs.backgroundColor,
|
5628
|
+
[vars$g.overlayTextColor]: refs.valueTextColor,
|
5626
5629
|
|
5627
5630
|
// Overlay direct theme:
|
5628
|
-
[vars$
|
5629
|
-
[vars$
|
5631
|
+
[vars$g.overlay.minHeight]: '400px',
|
5632
|
+
[vars$g.overlay.margin]: '0',
|
5630
5633
|
};
|
5631
5634
|
|
5632
5635
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5633
5636
|
__proto__: null,
|
5634
5637
|
comboBox: comboBox,
|
5635
5638
|
default: comboBox,
|
5636
|
-
vars: vars$
|
5639
|
+
vars: vars$g
|
5637
5640
|
});
|
5638
5641
|
|
5639
5642
|
const observedAttributes$2 = ['src', 'alt'];
|
5640
5643
|
|
5641
|
-
const componentName$
|
5644
|
+
const componentName$m = getComponentName('image');
|
5642
5645
|
|
5643
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5646
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$m, baseSelector: ':host > img' });
|
5644
5647
|
class RawImage extends BaseClass$1 {
|
5645
5648
|
static get observedAttributes() {
|
5646
5649
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5680,14 +5683,14 @@ const ImageClass = compose(
|
|
5680
5683
|
draggableMixin
|
5681
5684
|
)(RawImage);
|
5682
5685
|
|
5683
|
-
const vars$
|
5686
|
+
const vars$f = ImageClass.cssVarList;
|
5684
5687
|
|
5685
5688
|
const image = {};
|
5686
5689
|
|
5687
5690
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5688
5691
|
__proto__: null,
|
5689
5692
|
default: image,
|
5690
|
-
vars: vars$
|
5693
|
+
vars: vars$f
|
5691
5694
|
});
|
5692
5695
|
|
5693
5696
|
var CountryCodes = [
|
@@ -6906,14 +6909,14 @@ var CountryCodes = [
|
|
6906
6909
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
6907
6910
|
];
|
6908
6911
|
|
6909
|
-
const componentName$
|
6912
|
+
const componentName$l = getComponentName('phone-field-internal');
|
6910
6913
|
|
6911
|
-
createBaseInputClass({ componentName: componentName$
|
6914
|
+
createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
|
6912
6915
|
|
6913
6916
|
const textVars$1 = TextFieldClass.cssVarList;
|
6914
6917
|
const comboVars = ComboBoxClass.cssVarList;
|
6915
6918
|
|
6916
|
-
const componentName$
|
6919
|
+
const componentName$k = getComponentName('phone-field');
|
6917
6920
|
|
6918
6921
|
const customMixin$4 = (superclass) =>
|
6919
6922
|
class PhoneFieldMixinClass extends superclass {
|
@@ -6927,15 +6930,15 @@ const customMixin$4 = (superclass) =>
|
|
6927
6930
|
const template = document.createElement('template');
|
6928
6931
|
|
6929
6932
|
template.innerHTML = `
|
6930
|
-
<${componentName$
|
6933
|
+
<${componentName$l}
|
6931
6934
|
tabindex="-1"
|
6932
6935
|
slot="input"
|
6933
|
-
></${componentName$
|
6936
|
+
></${componentName$l}>
|
6934
6937
|
`;
|
6935
6938
|
|
6936
6939
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6937
6940
|
|
6938
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6941
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
6939
6942
|
|
6940
6943
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6941
6944
|
includeAttrs: [
|
@@ -6955,7 +6958,7 @@ const customMixin$4 = (superclass) =>
|
|
6955
6958
|
};
|
6956
6959
|
|
6957
6960
|
const {
|
6958
|
-
host: host$
|
6961
|
+
host: host$8,
|
6959
6962
|
label: label$4,
|
6960
6963
|
requiredIndicator: requiredIndicator$4,
|
6961
6964
|
inputField: inputField$2,
|
@@ -6980,7 +6983,7 @@ const PhoneFieldClass = compose(
|
|
6980
6983
|
createStyleMixin({
|
6981
6984
|
mappings: {
|
6982
6985
|
fontSize: [
|
6983
|
-
host$
|
6986
|
+
host$8,
|
6984
6987
|
inputField$2,
|
6985
6988
|
{
|
6986
6989
|
selector: TextFieldClass.componentName,
|
@@ -7001,11 +7004,11 @@ const PhoneFieldClass = compose(
|
|
7001
7004
|
},
|
7002
7005
|
],
|
7003
7006
|
hostWidth: [
|
7004
|
-
{ ...host$
|
7007
|
+
{ ...host$8, property: 'width' },
|
7005
7008
|
{ ...phoneInput$1, property: 'width' },
|
7006
7009
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
7007
7010
|
],
|
7008
|
-
hostDirection: { ...host$
|
7011
|
+
hostDirection: { ...host$8, property: 'direction' },
|
7009
7012
|
|
7010
7013
|
inputBorderStyle: [
|
7011
7014
|
{ ...inputField$2, property: 'border-style' },
|
@@ -7131,33 +7134,33 @@ const PhoneFieldClass = compose(
|
|
7131
7134
|
${resetInputLabelPosition('vaadin-text-field')}
|
7132
7135
|
`,
|
7133
7136
|
excludeAttrsSync: ['tabindex'],
|
7134
|
-
componentName: componentName$
|
7137
|
+
componentName: componentName$k,
|
7135
7138
|
})
|
7136
7139
|
);
|
7137
7140
|
|
7138
|
-
const vars$
|
7141
|
+
const vars$e = PhoneFieldClass.cssVarList;
|
7139
7142
|
|
7140
7143
|
const phoneField = {
|
7141
|
-
[vars$
|
7142
|
-
[vars$
|
7143
|
-
[vars$
|
7144
|
-
[vars$
|
7145
|
-
[vars$
|
7146
|
-
[vars$
|
7147
|
-
[vars$
|
7148
|
-
[vars$
|
7149
|
-
[vars$
|
7150
|
-
[vars$
|
7151
|
-
[vars$
|
7152
|
-
[vars$
|
7153
|
-
[vars$
|
7154
|
-
[vars$
|
7155
|
-
[vars$
|
7156
|
-
[vars$
|
7157
|
-
[vars$
|
7158
|
-
[vars$
|
7159
|
-
[vars$
|
7160
|
-
[vars$
|
7144
|
+
[vars$e.hostWidth]: refs.width,
|
7145
|
+
[vars$e.hostDirection]: refs.direction,
|
7146
|
+
[vars$e.fontSize]: refs.fontSize,
|
7147
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
7148
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
7149
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
7150
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
7151
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
7152
|
+
[vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7153
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
7154
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
7155
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
7156
|
+
[vars$e.inputBorderRadius]: refs.borderRadius,
|
7157
|
+
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
7158
|
+
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
7159
|
+
[vars$e.inputOutlineColor]: refs.outlineColor,
|
7160
|
+
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
7161
|
+
[vars$e.phoneInputWidth]: refs.minWidth,
|
7162
|
+
[vars$e.countryCodeInputWidth]: '5em',
|
7163
|
+
[vars$e.countryCodeDropdownWidth]: '20em',
|
7161
7164
|
|
7162
7165
|
// '@overlay': {
|
7163
7166
|
// overlayItemBackgroundColor: 'red'
|
@@ -7167,16 +7170,16 @@ const phoneField = {
|
|
7167
7170
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7168
7171
|
__proto__: null,
|
7169
7172
|
default: phoneField,
|
7170
|
-
vars: vars$
|
7173
|
+
vars: vars$e
|
7171
7174
|
});
|
7172
7175
|
|
7173
|
-
const componentName$
|
7176
|
+
const componentName$j = getComponentName('phone-field-internal-input-box');
|
7174
7177
|
|
7175
|
-
createBaseInputClass({ componentName: componentName$
|
7178
|
+
createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
|
7176
7179
|
|
7177
7180
|
const textVars = TextFieldClass.cssVarList;
|
7178
7181
|
|
7179
|
-
const componentName$
|
7182
|
+
const componentName$i = getComponentName('phone-input-box-field');
|
7180
7183
|
|
7181
7184
|
const customMixin$3 = (superclass) =>
|
7182
7185
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -7190,15 +7193,15 @@ const customMixin$3 = (superclass) =>
|
|
7190
7193
|
const template = document.createElement('template');
|
7191
7194
|
|
7192
7195
|
template.innerHTML = `
|
7193
|
-
<${componentName$
|
7196
|
+
<${componentName$j}
|
7194
7197
|
tabindex="-1"
|
7195
7198
|
slot="input"
|
7196
|
-
></${componentName$
|
7199
|
+
></${componentName$j}>
|
7197
7200
|
`;
|
7198
7201
|
|
7199
7202
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7200
7203
|
|
7201
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7204
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$j);
|
7202
7205
|
|
7203
7206
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
7204
7207
|
includeAttrs: [
|
@@ -7215,7 +7218,7 @@ const customMixin$3 = (superclass) =>
|
|
7215
7218
|
}
|
7216
7219
|
};
|
7217
7220
|
|
7218
|
-
const { host: host$
|
7221
|
+
const { host: host$7, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
7219
7222
|
host: { selector: () => ':host' },
|
7220
7223
|
label: { selector: '::part(label)' },
|
7221
7224
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -7229,7 +7232,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
7229
7232
|
createStyleMixin({
|
7230
7233
|
mappings: {
|
7231
7234
|
fontSize: [
|
7232
|
-
host$
|
7235
|
+
host$7,
|
7233
7236
|
inputField$1,
|
7234
7237
|
{
|
7235
7238
|
selector: TextFieldClass.componentName,
|
@@ -7237,9 +7240,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
7237
7240
|
},
|
7238
7241
|
],
|
7239
7242
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
7240
|
-
hostWidth: { ...host$
|
7241
|
-
hostMinWidth: { ...host$
|
7242
|
-
hostDirection: { ...host$
|
7243
|
+
hostWidth: { ...host$7, property: 'width' },
|
7244
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
7245
|
+
hostDirection: { ...host$7, property: 'direction' },
|
7243
7246
|
|
7244
7247
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
7245
7248
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -7331,45 +7334,45 @@ const PhoneFieldInputBoxClass = compose(
|
|
7331
7334
|
${resetInputLabelPosition('vaadin-text-field')}
|
7332
7335
|
`,
|
7333
7336
|
excludeAttrsSync: ['tabindex'],
|
7334
|
-
componentName: componentName$
|
7337
|
+
componentName: componentName$i,
|
7335
7338
|
})
|
7336
7339
|
);
|
7337
7340
|
|
7338
|
-
const vars$
|
7341
|
+
const vars$d = PhoneFieldInputBoxClass.cssVarList;
|
7339
7342
|
|
7340
7343
|
const phoneInputBoxField = {
|
7341
|
-
[vars$
|
7342
|
-
[vars$
|
7343
|
-
[vars$
|
7344
|
-
[vars$
|
7345
|
-
[vars$
|
7346
|
-
[vars$
|
7347
|
-
[vars$
|
7348
|
-
[vars$
|
7349
|
-
[vars$
|
7350
|
-
[vars$
|
7351
|
-
[vars$
|
7352
|
-
[vars$
|
7353
|
-
[vars$
|
7354
|
-
[vars$
|
7355
|
-
[vars$
|
7356
|
-
[vars$
|
7357
|
-
[vars$
|
7358
|
-
[vars$
|
7344
|
+
[vars$d.hostWidth]: '16em',
|
7345
|
+
[vars$d.hostMinWidth]: refs.minWidth,
|
7346
|
+
[vars$d.hostDirection]: refs.direction,
|
7347
|
+
[vars$d.fontSize]: refs.fontSize,
|
7348
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
7349
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
7350
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
7351
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
7352
|
+
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
7353
|
+
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7354
|
+
[vars$d.inputBorderStyle]: refs.borderStyle,
|
7355
|
+
[vars$d.inputBorderWidth]: refs.borderWidth,
|
7356
|
+
[vars$d.inputBorderColor]: refs.borderColor,
|
7357
|
+
[vars$d.inputBorderRadius]: refs.borderRadius,
|
7358
|
+
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
7359
|
+
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
7360
|
+
[vars$d.inputOutlineColor]: refs.outlineColor,
|
7361
|
+
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
7359
7362
|
_fullWidth: {
|
7360
|
-
[vars$
|
7363
|
+
[vars$d.hostWidth]: refs.width,
|
7361
7364
|
},
|
7362
7365
|
};
|
7363
7366
|
|
7364
7367
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7365
7368
|
__proto__: null,
|
7366
7369
|
default: phoneInputBoxField,
|
7367
|
-
vars: vars$
|
7370
|
+
vars: vars$d
|
7368
7371
|
});
|
7369
7372
|
|
7370
|
-
const componentName$
|
7373
|
+
const componentName$h = getComponentName('new-password-internal');
|
7371
7374
|
|
7372
|
-
const componentName$
|
7375
|
+
const componentName$g = getComponentName('new-password');
|
7373
7376
|
|
7374
7377
|
const customMixin$2 = (superclass) =>
|
7375
7378
|
class NewPasswordMixinClass extends superclass {
|
@@ -7379,16 +7382,16 @@ const customMixin$2 = (superclass) =>
|
|
7379
7382
|
const template = document.createElement('template');
|
7380
7383
|
|
7381
7384
|
template.innerHTML = `
|
7382
|
-
<${componentName$
|
7385
|
+
<${componentName$h}
|
7383
7386
|
name="new-password"
|
7384
7387
|
tabindex="-1"
|
7385
7388
|
slot="input"
|
7386
|
-
></${componentName$
|
7389
|
+
></${componentName$h}>
|
7387
7390
|
`;
|
7388
7391
|
|
7389
7392
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7390
7393
|
|
7391
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7394
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
7392
7395
|
|
7393
7396
|
forwardAttrs(this, this.inputElement, {
|
7394
7397
|
includeAttrs: [
|
@@ -7409,7 +7412,7 @@ const customMixin$2 = (superclass) =>
|
|
7409
7412
|
}
|
7410
7413
|
};
|
7411
7414
|
|
7412
|
-
const { host: host$
|
7415
|
+
const { host: host$6, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
7413
7416
|
host: { selector: () => ':host' },
|
7414
7417
|
label: { selector: '::part(label)' },
|
7415
7418
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -7422,7 +7425,7 @@ const NewPasswordClass = compose(
|
|
7422
7425
|
createStyleMixin({
|
7423
7426
|
mappings: {
|
7424
7427
|
fontSize: [
|
7425
|
-
host$
|
7428
|
+
host$6,
|
7426
7429
|
{},
|
7427
7430
|
{
|
7428
7431
|
selector: PasswordClass.componentName,
|
@@ -7431,13 +7434,13 @@ const NewPasswordClass = compose(
|
|
7431
7434
|
],
|
7432
7435
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
7433
7436
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
7434
|
-
hostWidth: { ...host$
|
7435
|
-
hostMinWidth: { ...host$
|
7437
|
+
hostWidth: { ...host$6, property: 'width' },
|
7438
|
+
hostMinWidth: { ...host$6, property: 'min-width' },
|
7436
7439
|
hostDirection: [
|
7437
|
-
{ ...host$
|
7440
|
+
{ ...host$6, property: 'direction' },
|
7438
7441
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
7439
7442
|
],
|
7440
|
-
inputsRequiredIndicator: { ...host$
|
7443
|
+
inputsRequiredIndicator: { ...host$6, property: 'content' },
|
7441
7444
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
7442
7445
|
},
|
7443
7446
|
}),
|
@@ -7495,33 +7498,33 @@ const NewPasswordClass = compose(
|
|
7495
7498
|
}
|
7496
7499
|
`,
|
7497
7500
|
excludeAttrsSync: ['tabindex'],
|
7498
|
-
componentName: componentName$
|
7501
|
+
componentName: componentName$g,
|
7499
7502
|
})
|
7500
7503
|
);
|
7501
7504
|
|
7502
|
-
const vars$
|
7505
|
+
const vars$c = NewPasswordClass.cssVarList;
|
7503
7506
|
|
7504
7507
|
const newPassword = {
|
7505
|
-
[vars$
|
7506
|
-
[vars$
|
7507
|
-
[vars$
|
7508
|
-
[vars$
|
7509
|
-
[vars$
|
7510
|
-
[vars$
|
7511
|
-
[vars$
|
7508
|
+
[vars$c.hostWidth]: refs.width,
|
7509
|
+
[vars$c.hostMinWidth]: refs.minWidth,
|
7510
|
+
[vars$c.hostDirection]: refs.direction,
|
7511
|
+
[vars$c.fontSize]: refs.fontSize,
|
7512
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
7513
|
+
[vars$c.spaceBetweenInputs]: '1em',
|
7514
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
7512
7515
|
|
7513
7516
|
_required: {
|
7514
7517
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7515
7518
|
// That's why we fake the required indicator on each input.
|
7516
7519
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7517
|
-
[vars$
|
7520
|
+
[vars$c.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7518
7521
|
},
|
7519
7522
|
};
|
7520
7523
|
|
7521
7524
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7522
7525
|
__proto__: null,
|
7523
7526
|
default: newPassword,
|
7524
|
-
vars: vars$
|
7527
|
+
vars: vars$c
|
7525
7528
|
});
|
7526
7529
|
|
7527
7530
|
const getFileBase64 = (fileObj) => {
|
@@ -7536,7 +7539,7 @@ const getFilename = (fileObj) => {
|
|
7536
7539
|
return fileObj.name.replace(/^.*\\/, '');
|
7537
7540
|
};
|
7538
7541
|
|
7539
|
-
const componentName$
|
7542
|
+
const componentName$f = getComponentName('upload-file');
|
7540
7543
|
|
7541
7544
|
const observedAttributes$1 = [
|
7542
7545
|
'title',
|
@@ -7551,7 +7554,7 @@ const observedAttributes$1 = [
|
|
7551
7554
|
'icon',
|
7552
7555
|
];
|
7553
7556
|
|
7554
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7557
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
|
7555
7558
|
|
7556
7559
|
class RawUploadFile extends BaseInputClass {
|
7557
7560
|
static get observedAttributes() {
|
@@ -7723,7 +7726,7 @@ class RawUploadFile extends BaseInputClass {
|
|
7723
7726
|
}
|
7724
7727
|
|
7725
7728
|
const buttonVars = ButtonClass.cssVarList;
|
7726
|
-
const { host: host$
|
7729
|
+
const { host: host$5, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
7727
7730
|
host: { selector: () => ':host' },
|
7728
7731
|
wrapper: { selector: () => ':host > div' },
|
7729
7732
|
icon: { selector: () => '::slotted(*)' },
|
@@ -7742,11 +7745,11 @@ const UploadFileClass = compose(
|
|
7742
7745
|
borderWidth: {},
|
7743
7746
|
borderStyle: {},
|
7744
7747
|
borderRadius: {},
|
7745
|
-
hostHeight: { ...host$
|
7746
|
-
hostWidth: { ...host$
|
7748
|
+
hostHeight: { ...host$5, property: 'height' },
|
7749
|
+
hostWidth: { ...host$5, property: 'width' },
|
7747
7750
|
hostPadding: { property: 'padding' },
|
7748
7751
|
hostDirection: [
|
7749
|
-
{ ...host$
|
7752
|
+
{ ...host$5, property: 'direction' },
|
7750
7753
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
7751
7754
|
],
|
7752
7755
|
gap: { ...wrapper },
|
@@ -7766,77 +7769,77 @@ const UploadFileClass = compose(
|
|
7766
7769
|
componentNameValidationMixin
|
7767
7770
|
)(RawUploadFile);
|
7768
7771
|
|
7769
|
-
const vars$
|
7772
|
+
const vars$b = UploadFileClass.cssVarList;
|
7770
7773
|
|
7771
7774
|
const uploadFile = {
|
7772
|
-
[vars$
|
7773
|
-
[vars$
|
7774
|
-
[vars$
|
7775
|
+
[vars$b.hostDirection]: refs.direction,
|
7776
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
7777
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
7775
7778
|
|
7776
|
-
[vars$
|
7779
|
+
[vars$b.iconSize]: '2em',
|
7777
7780
|
|
7778
|
-
[vars$
|
7779
|
-
[vars$
|
7781
|
+
[vars$b.hostPadding]: '0.75em',
|
7782
|
+
[vars$b.gap]: '0.5em',
|
7780
7783
|
|
7781
|
-
[vars$
|
7782
|
-
[vars$
|
7783
|
-
[vars$
|
7784
|
+
[vars$b.fontSize]: '16px',
|
7785
|
+
[vars$b.titleFontWeight]: '500',
|
7786
|
+
[vars$b.lineHeight]: '1em',
|
7784
7787
|
|
7785
|
-
[vars$
|
7786
|
-
[vars$
|
7787
|
-
[vars$
|
7788
|
-
[vars$
|
7788
|
+
[vars$b.borderWidth]: refs.borderWidth,
|
7789
|
+
[vars$b.borderColor]: refs.borderColor,
|
7790
|
+
[vars$b.borderRadius]: refs.borderRadius,
|
7791
|
+
[vars$b.borderStyle]: 'dashed',
|
7789
7792
|
|
7790
7793
|
_required: {
|
7791
|
-
[vars$
|
7794
|
+
[vars$b.requiredIndicator]: refs.requiredIndicator,
|
7792
7795
|
},
|
7793
7796
|
|
7794
7797
|
size: {
|
7795
7798
|
xs: {
|
7796
|
-
[vars$
|
7797
|
-
[vars$
|
7798
|
-
[vars$
|
7799
|
-
[vars$
|
7800
|
-
[vars$
|
7799
|
+
[vars$b.hostHeight]: '196px',
|
7800
|
+
[vars$b.hostWidth]: '200px',
|
7801
|
+
[vars$b.titleFontSize]: '0.875em',
|
7802
|
+
[vars$b.descriptionFontSize]: '0.875em',
|
7803
|
+
[vars$b.lineHeight]: '1.25em',
|
7801
7804
|
},
|
7802
7805
|
sm: {
|
7803
|
-
[vars$
|
7804
|
-
[vars$
|
7805
|
-
[vars$
|
7806
|
-
[vars$
|
7807
|
-
[vars$
|
7806
|
+
[vars$b.hostHeight]: '216px',
|
7807
|
+
[vars$b.hostWidth]: '230px',
|
7808
|
+
[vars$b.titleFontSize]: '1em',
|
7809
|
+
[vars$b.descriptionFontSize]: '0.875em',
|
7810
|
+
[vars$b.lineHeight]: '1.25em',
|
7808
7811
|
},
|
7809
7812
|
md: {
|
7810
|
-
[vars$
|
7811
|
-
[vars$
|
7812
|
-
[vars$
|
7813
|
-
[vars$
|
7814
|
-
[vars$
|
7813
|
+
[vars$b.hostHeight]: '256px',
|
7814
|
+
[vars$b.hostWidth]: '312px',
|
7815
|
+
[vars$b.titleFontSize]: '1.125em',
|
7816
|
+
[vars$b.descriptionFontSize]: '1em',
|
7817
|
+
[vars$b.lineHeight]: '1.5em',
|
7815
7818
|
},
|
7816
7819
|
lg: {
|
7817
|
-
[vars$
|
7818
|
-
[vars$
|
7819
|
-
[vars$
|
7820
|
-
[vars$
|
7821
|
-
[vars$
|
7820
|
+
[vars$b.hostHeight]: '280px',
|
7821
|
+
[vars$b.hostWidth]: '336px',
|
7822
|
+
[vars$b.titleFontSize]: '1.125em',
|
7823
|
+
[vars$b.descriptionFontSize]: '1.125em',
|
7824
|
+
[vars$b.lineHeight]: '1.75em',
|
7822
7825
|
},
|
7823
7826
|
},
|
7824
7827
|
|
7825
7828
|
_fullWidth: {
|
7826
|
-
[vars$
|
7829
|
+
[vars$b.hostWidth]: refs.width,
|
7827
7830
|
},
|
7828
7831
|
};
|
7829
7832
|
|
7830
7833
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7831
7834
|
__proto__: null,
|
7832
7835
|
default: uploadFile,
|
7833
|
-
vars: vars$
|
7836
|
+
vars: vars$b
|
7834
7837
|
});
|
7835
7838
|
|
7836
|
-
const componentName$
|
7839
|
+
const componentName$e = getComponentName('button-selection-group-item');
|
7837
7840
|
|
7838
7841
|
class RawSelectItem extends createBaseClass({
|
7839
|
-
componentName: componentName$
|
7842
|
+
componentName: componentName$e,
|
7840
7843
|
baseSelector: ':host > descope-button',
|
7841
7844
|
}) {
|
7842
7845
|
get size() {
|
@@ -7939,38 +7942,38 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7939
7942
|
componentNameValidationMixin
|
7940
7943
|
)(RawSelectItem);
|
7941
7944
|
|
7942
|
-
const globalRefs$
|
7945
|
+
const globalRefs$8 = getThemeRefs(globals);
|
7943
7946
|
|
7944
|
-
const vars$
|
7947
|
+
const vars$a = ButtonSelectionGroupItemClass.cssVarList;
|
7945
7948
|
|
7946
7949
|
const buttonSelectionGroupItem = {
|
7947
|
-
[vars$
|
7948
|
-
[vars$
|
7949
|
-
[vars$
|
7950
|
-
[vars$
|
7951
|
-
[vars$
|
7952
|
-
[vars$
|
7953
|
-
[vars$
|
7950
|
+
[vars$a.hostDirection]: 'inherit',
|
7951
|
+
[vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
|
7952
|
+
[vars$a.labelTextColor]: globalRefs$8.colors.surface.contrast,
|
7953
|
+
[vars$a.borderColor]: globalRefs$8.colors.surface.light,
|
7954
|
+
[vars$a.borderStyle]: 'solid',
|
7955
|
+
[vars$a.borderRadius]: globalRefs$8.radius.sm,
|
7956
|
+
[vars$a.outlineColor]: 'transparent',
|
7954
7957
|
|
7955
7958
|
_hover: {
|
7956
|
-
[vars$
|
7959
|
+
[vars$a.backgroundColor]: globalRefs$8.colors.surface.highlight,
|
7957
7960
|
},
|
7958
7961
|
|
7959
7962
|
_focused: {
|
7960
|
-
[vars$
|
7963
|
+
[vars$a.outlineColor]: globalRefs$8.colors.surface.light,
|
7961
7964
|
},
|
7962
7965
|
|
7963
7966
|
_selected: {
|
7964
|
-
[vars$
|
7965
|
-
[vars$
|
7966
|
-
[vars$
|
7967
|
+
[vars$a.borderColor]: globalRefs$8.colors.surface.contrast,
|
7968
|
+
[vars$a.backgroundColor]: globalRefs$8.colors.surface.contrast,
|
7969
|
+
[vars$a.labelTextColor]: globalRefs$8.colors.surface.main,
|
7967
7970
|
},
|
7968
7971
|
};
|
7969
7972
|
|
7970
7973
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7971
7974
|
__proto__: null,
|
7972
7975
|
default: buttonSelectionGroupItem,
|
7973
|
-
vars: vars$
|
7976
|
+
vars: vars$a
|
7974
7977
|
});
|
7975
7978
|
|
7976
7979
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
@@ -8069,10 +8072,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
8069
8072
|
return BaseButtonSelectionGroupInternalClass;
|
8070
8073
|
};
|
8071
8074
|
|
8072
|
-
const componentName$
|
8075
|
+
const componentName$d = getComponentName('button-selection-group-internal');
|
8073
8076
|
|
8074
8077
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8075
|
-
componentName$
|
8078
|
+
componentName$d
|
8076
8079
|
) {
|
8077
8080
|
getSelectedNode() {
|
8078
8081
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -8228,7 +8231,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
8228
8231
|
}
|
8229
8232
|
};
|
8230
8233
|
|
8231
|
-
const { host: host$
|
8234
|
+
const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
8232
8235
|
host: { selector: () => ':host' },
|
8233
8236
|
label: { selector: '::part(label)' },
|
8234
8237
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -8237,9 +8240,9 @@ const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
8237
8240
|
};
|
8238
8241
|
|
8239
8242
|
const buttonSelectionGroupMappings = {
|
8240
|
-
hostWidth: { ...host$
|
8241
|
-
hostDirection: { ...host$
|
8242
|
-
fontFamily: host$
|
8243
|
+
hostWidth: { ...host$4, property: 'width' },
|
8244
|
+
hostDirection: { ...host$4, property: 'direction' },
|
8245
|
+
fontFamily: host$4,
|
8243
8246
|
labelTextColor: [
|
8244
8247
|
{ ...label$1, property: 'color' },
|
8245
8248
|
{ ...requiredIndicator$1, property: 'color' },
|
@@ -8304,7 +8307,7 @@ const buttonSelectionGroupStyles = `
|
|
8304
8307
|
${resetInputCursor('vaadin-text-field')}
|
8305
8308
|
`;
|
8306
8309
|
|
8307
|
-
const componentName$
|
8310
|
+
const componentName$c = getComponentName('button-selection-group');
|
8308
8311
|
|
8309
8312
|
const buttonSelectionGroupMixin = (superclass) =>
|
8310
8313
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -8313,19 +8316,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
8313
8316
|
const template = document.createElement('template');
|
8314
8317
|
|
8315
8318
|
template.innerHTML = `
|
8316
|
-
<${componentName$
|
8319
|
+
<${componentName$d}
|
8317
8320
|
name="button-selection-group"
|
8318
8321
|
slot="input"
|
8319
8322
|
tabindex="-1"
|
8320
8323
|
part="internal-component"
|
8321
8324
|
>
|
8322
8325
|
<slot></slot>
|
8323
|
-
</${componentName$
|
8326
|
+
</${componentName$d}>
|
8324
8327
|
`;
|
8325
8328
|
|
8326
8329
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8327
8330
|
|
8328
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8331
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
8329
8332
|
|
8330
8333
|
forwardAttrs(this, this.inputElement, {
|
8331
8334
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -8350,11 +8353,11 @@ const ButtonSelectionGroupClass = compose(
|
|
8350
8353
|
wrappedEleName: 'vaadin-text-field',
|
8351
8354
|
style: () => buttonSelectionGroupStyles,
|
8352
8355
|
excludeAttrsSync: ['tabindex'],
|
8353
|
-
componentName: componentName$
|
8356
|
+
componentName: componentName$c,
|
8354
8357
|
})
|
8355
8358
|
);
|
8356
8359
|
|
8357
|
-
const globalRefs$
|
8360
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8358
8361
|
|
8359
8362
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
8360
8363
|
[vars.hostDirection]: refs.direction,
|
@@ -8362,26 +8365,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
8362
8365
|
[vars.labelTextColor]: refs.labelTextColor,
|
8363
8366
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
8364
8367
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
8365
|
-
[vars.itemsSpacing]: globalRefs$
|
8368
|
+
[vars.itemsSpacing]: globalRefs$7.spacing.sm,
|
8366
8369
|
[vars.hostWidth]: refs.width,
|
8367
8370
|
});
|
8368
8371
|
|
8369
|
-
const vars$
|
8372
|
+
const vars$9 = ButtonSelectionGroupClass.cssVarList;
|
8370
8373
|
|
8371
8374
|
const buttonSelectionGroup = {
|
8372
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
8375
|
+
...createBaseButtonSelectionGroupMappings(vars$9),
|
8373
8376
|
};
|
8374
8377
|
|
8375
8378
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8376
8379
|
__proto__: null,
|
8377
8380
|
default: buttonSelectionGroup,
|
8378
|
-
vars: vars$
|
8381
|
+
vars: vars$9
|
8379
8382
|
});
|
8380
8383
|
|
8381
|
-
const componentName$
|
8384
|
+
const componentName$b = getComponentName('button-multi-selection-group-internal');
|
8382
8385
|
|
8383
8386
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8384
|
-
componentName$
|
8387
|
+
componentName$b
|
8385
8388
|
) {
|
8386
8389
|
#getSelectedNodes() {
|
8387
8390
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -8484,7 +8487,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
8484
8487
|
}
|
8485
8488
|
}
|
8486
8489
|
|
8487
|
-
const componentName$
|
8490
|
+
const componentName$a = getComponentName('button-multi-selection-group');
|
8488
8491
|
|
8489
8492
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
8490
8493
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -8493,19 +8496,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8493
8496
|
const template = document.createElement('template');
|
8494
8497
|
|
8495
8498
|
template.innerHTML = `
|
8496
|
-
<${componentName$
|
8499
|
+
<${componentName$b}
|
8497
8500
|
name="button-selection-group"
|
8498
8501
|
slot="input"
|
8499
8502
|
tabindex="-1"
|
8500
8503
|
part="internal-component"
|
8501
8504
|
>
|
8502
8505
|
<slot></slot>
|
8503
|
-
</${componentName$
|
8506
|
+
</${componentName$b}>
|
8504
8507
|
`;
|
8505
8508
|
|
8506
8509
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8507
8510
|
|
8508
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8511
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
8509
8512
|
|
8510
8513
|
forwardAttrs(this, this.inputElement, {
|
8511
8514
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -8530,23 +8533,23 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
8530
8533
|
wrappedEleName: 'vaadin-text-field',
|
8531
8534
|
style: () => buttonSelectionGroupStyles,
|
8532
8535
|
excludeAttrsSync: ['tabindex'],
|
8533
|
-
componentName: componentName$
|
8536
|
+
componentName: componentName$a,
|
8534
8537
|
})
|
8535
8538
|
);
|
8536
8539
|
|
8537
|
-
const vars$
|
8540
|
+
const vars$8 = ButtonMultiSelectionGroupClass.cssVarList;
|
8538
8541
|
|
8539
8542
|
const buttonMultiSelectionGroup = {
|
8540
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
8543
|
+
...createBaseButtonSelectionGroupMappings(vars$8),
|
8541
8544
|
};
|
8542
8545
|
|
8543
8546
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8544
8547
|
__proto__: null,
|
8545
8548
|
default: buttonMultiSelectionGroup,
|
8546
|
-
vars: vars$
|
8549
|
+
vars: vars$8
|
8547
8550
|
});
|
8548
8551
|
|
8549
|
-
const componentName$
|
8552
|
+
const componentName$9 = getComponentName('modal');
|
8550
8553
|
|
8551
8554
|
const customMixin$1 = (superclass) =>
|
8552
8555
|
class ModalMixinClass extends superclass {
|
@@ -8645,28 +8648,28 @@ const ModalClass = compose(
|
|
8645
8648
|
wrappedEleName: 'vaadin-dialog',
|
8646
8649
|
style: () => ``,
|
8647
8650
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8648
|
-
componentName: componentName$
|
8651
|
+
componentName: componentName$9,
|
8649
8652
|
})
|
8650
8653
|
);
|
8651
8654
|
|
8652
|
-
const globalRefs$
|
8655
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8653
8656
|
|
8654
|
-
const compVars = ModalClass.cssVarList;
|
8657
|
+
const compVars$1 = ModalClass.cssVarList;
|
8655
8658
|
|
8656
8659
|
const modal = {
|
8657
|
-
[compVars.overlayBackgroundColor]: globalRefs$
|
8658
|
-
[compVars.overlayShadow]: globalRefs$
|
8659
|
-
[compVars.overlayWidth]: '540px',
|
8660
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$6.colors.surface.main,
|
8661
|
+
[compVars$1.overlayShadow]: globalRefs$6.shadow.wide['2xl'],
|
8662
|
+
[compVars$1.overlayWidth]: '540px',
|
8660
8663
|
};
|
8661
8664
|
|
8662
|
-
const vars$
|
8663
|
-
...compVars,
|
8665
|
+
const vars$7 = {
|
8666
|
+
...compVars$1,
|
8664
8667
|
};
|
8665
8668
|
|
8666
8669
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8667
8670
|
__proto__: null,
|
8668
8671
|
default: modal,
|
8669
|
-
vars: vars$
|
8672
|
+
vars: vars$7
|
8670
8673
|
});
|
8671
8674
|
|
8672
8675
|
const isValidDataType = (data) => {
|
@@ -8679,7 +8682,7 @@ const isValidDataType = (data) => {
|
|
8679
8682
|
return isValid;
|
8680
8683
|
};
|
8681
8684
|
|
8682
|
-
const componentName$
|
8685
|
+
const componentName$8 = getComponentName('grid');
|
8683
8686
|
|
8684
8687
|
const GridMixin = (superclass) =>
|
8685
8688
|
class GridMixinClass extends superclass {
|
@@ -8839,7 +8842,7 @@ const GridMixin = (superclass) =>
|
|
8839
8842
|
};
|
8840
8843
|
|
8841
8844
|
const {
|
8842
|
-
host: host$
|
8845
|
+
host: host$3,
|
8843
8846
|
headerRow,
|
8844
8847
|
headerRowCell,
|
8845
8848
|
contentRow,
|
@@ -8874,15 +8877,15 @@ const GridClass = compose(
|
|
8874
8877
|
fontWeight: { ...contentRow },
|
8875
8878
|
valueTextColor: { ...contentRow, property: 'color' },
|
8876
8879
|
backgroundColor: [
|
8877
|
-
{ ...host$
|
8880
|
+
{ ...host$3, property: 'background-color' },
|
8878
8881
|
{ ...contentRow, property: 'background-color' },
|
8879
8882
|
],
|
8880
8883
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
8881
8884
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
8882
|
-
borderColor: { ...host$
|
8883
|
-
borderWidth: { ...host$
|
8884
|
-
borderStyle: { ...host$
|
8885
|
-
borderRadius: { ...host$
|
8885
|
+
borderColor: { ...host$3, property: 'border-color' },
|
8886
|
+
borderWidth: { ...host$3, property: 'border-width' },
|
8887
|
+
borderStyle: { ...host$3, property: 'border-style' },
|
8888
|
+
borderRadius: { ...host$3, property: 'border-radius' },
|
8886
8889
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
8887
8890
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
8888
8891
|
separatorColor: [
|
@@ -8915,40 +8918,40 @@ const GridClass = compose(
|
|
8915
8918
|
}
|
8916
8919
|
`,
|
8917
8920
|
excludeAttrsSync: ['columns', 'tabindex'],
|
8918
|
-
componentName: componentName$
|
8921
|
+
componentName: componentName$8,
|
8919
8922
|
})
|
8920
8923
|
);
|
8921
8924
|
|
8922
|
-
const globalRefs$
|
8923
|
-
const vars$
|
8925
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8926
|
+
const vars$6 = GridClass.cssVarList;
|
8924
8927
|
|
8925
8928
|
const grid = {
|
8926
|
-
[vars$
|
8927
|
-
[vars$
|
8928
|
-
[vars$
|
8929
|
-
[vars$
|
8930
|
-
[vars$
|
8929
|
+
[vars$6.hostWidth]: '100%',
|
8930
|
+
[vars$6.hostHeight]: '100%',
|
8931
|
+
[vars$6.hostMinHeight]: '400px',
|
8932
|
+
[vars$6.fontWeight]: '400',
|
8933
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
|
8931
8934
|
|
8932
|
-
[vars$
|
8933
|
-
[vars$
|
8935
|
+
[vars$6.fontSize]: refs.fontSize,
|
8936
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
8934
8937
|
|
8935
|
-
[vars$
|
8936
|
-
[vars$
|
8937
|
-
[vars$
|
8938
|
+
[vars$6.sortIndicatorsColor]: globalRefs$5.colors.surface.light,
|
8939
|
+
[vars$6.activeSortIndicator]: globalRefs$5.colors.surface.dark,
|
8940
|
+
[vars$6.resizeHandleColor]: globalRefs$5.colors.surface.light,
|
8938
8941
|
|
8939
|
-
[vars$
|
8940
|
-
[vars$
|
8941
|
-
[vars$
|
8942
|
-
[vars$
|
8942
|
+
[vars$6.borderWidth]: refs.borderWidth,
|
8943
|
+
[vars$6.borderStyle]: refs.borderStyle,
|
8944
|
+
[vars$6.borderRadius]: refs.borderRadius,
|
8945
|
+
[vars$6.borderColor]: 'transparent',
|
8943
8946
|
|
8944
|
-
[vars$
|
8945
|
-
[vars$
|
8947
|
+
[vars$6.headerRowTextColor]: globalRefs$5.colors.surface.dark,
|
8948
|
+
[vars$6.separatorColor]: globalRefs$5.colors.surface.light,
|
8946
8949
|
|
8947
|
-
[vars$
|
8948
|
-
[vars$
|
8950
|
+
[vars$6.valueTextColor]: globalRefs$5.colors.surface.contrast,
|
8951
|
+
[vars$6.selectedBackgroundColor]: globalRefs$5.colors.surface.highlight,
|
8949
8952
|
|
8950
8953
|
_bordered: {
|
8951
|
-
[vars$
|
8954
|
+
[vars$6.borderColor]: refs.borderColor,
|
8952
8955
|
},
|
8953
8956
|
};
|
8954
8957
|
|
@@ -8956,10 +8959,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8956
8959
|
__proto__: null,
|
8957
8960
|
default: grid,
|
8958
8961
|
grid: grid,
|
8959
|
-
vars: vars$
|
8962
|
+
vars: vars$6
|
8960
8963
|
});
|
8961
8964
|
|
8962
|
-
const componentName$
|
8965
|
+
const componentName$7 = getComponentName('notification-card');
|
8963
8966
|
|
8964
8967
|
const notificationCardMixin = (superclass) =>
|
8965
8968
|
class NotificationCardMixinClass extends superclass {
|
@@ -9067,54 +9070,54 @@ const NotificationCardClass = compose(
|
|
9067
9070
|
}
|
9068
9071
|
`,
|
9069
9072
|
excludeAttrsSync: ['tabindex'],
|
9070
|
-
componentName: componentName$
|
9073
|
+
componentName: componentName$7,
|
9071
9074
|
})
|
9072
9075
|
);
|
9073
9076
|
|
9074
|
-
const globalRefs$
|
9075
|
-
const vars$
|
9077
|
+
const globalRefs$4 = getThemeRefs(globals);
|
9078
|
+
const vars$5 = NotificationCardClass.cssVarList;
|
9076
9079
|
|
9077
9080
|
const shadowColor = '#00000020';
|
9078
9081
|
|
9079
9082
|
const notification = {
|
9080
|
-
[vars$
|
9081
|
-
[vars$
|
9082
|
-
[vars$
|
9083
|
-
[vars$
|
9084
|
-
[vars$
|
9085
|
-
[vars$
|
9086
|
-
[vars$
|
9087
|
-
[vars$
|
9088
|
-
[vars$
|
9083
|
+
[vars$5.hostMinWidth]: '415px',
|
9084
|
+
[vars$5.fontFamily]: globalRefs$4.fonts.font1.family,
|
9085
|
+
[vars$5.fontSize]: globalRefs$4.typography.body1.size,
|
9086
|
+
[vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
|
9087
|
+
[vars$5.textColor]: globalRefs$4.colors.surface.contrast,
|
9088
|
+
[vars$5.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${shadowColor}`,
|
9089
|
+
[vars$5.verticalPadding]: '0.625em',
|
9090
|
+
[vars$5.horizontalPadding]: '1.5em',
|
9091
|
+
[vars$5.borderRadius]: globalRefs$4.radius.xs,
|
9089
9092
|
|
9090
9093
|
_bordered: {
|
9091
|
-
[vars$
|
9092
|
-
[vars$
|
9093
|
-
[vars$
|
9094
|
+
[vars$5.borderWidth]: globalRefs$4.border.sm,
|
9095
|
+
[vars$5.borderStyle]: 'solid',
|
9096
|
+
[vars$5.borderColor]: 'transparent',
|
9094
9097
|
},
|
9095
9098
|
|
9096
9099
|
size: {
|
9097
|
-
xs: { [vars$
|
9098
|
-
sm: { [vars$
|
9099
|
-
md: { [vars$
|
9100
|
-
lg: { [vars$
|
9100
|
+
xs: { [vars$5.fontSize]: '12px' },
|
9101
|
+
sm: { [vars$5.fontSize]: '14px' },
|
9102
|
+
md: { [vars$5.fontSize]: '16px' },
|
9103
|
+
lg: { [vars$5.fontSize]: '18px' },
|
9101
9104
|
},
|
9102
9105
|
|
9103
9106
|
mode: {
|
9104
9107
|
primary: {
|
9105
|
-
[vars$
|
9106
|
-
[vars$
|
9107
|
-
[vars$
|
9108
|
+
[vars$5.backgroundColor]: globalRefs$4.colors.primary.main,
|
9109
|
+
[vars$5.textColor]: globalRefs$4.colors.primary.contrast,
|
9110
|
+
[vars$5.borderColor]: globalRefs$4.colors.primary.light,
|
9108
9111
|
},
|
9109
9112
|
success: {
|
9110
|
-
[vars$
|
9111
|
-
[vars$
|
9112
|
-
[vars$
|
9113
|
+
[vars$5.backgroundColor]: globalRefs$4.colors.success.main,
|
9114
|
+
[vars$5.textColor]: globalRefs$4.colors.success.contrast,
|
9115
|
+
[vars$5.borderColor]: globalRefs$4.colors.success.light,
|
9113
9116
|
},
|
9114
9117
|
error: {
|
9115
|
-
[vars$
|
9116
|
-
[vars$
|
9117
|
-
[vars$
|
9118
|
+
[vars$5.backgroundColor]: globalRefs$4.colors.error.main,
|
9119
|
+
[vars$5.textColor]: globalRefs$4.colors.error.contrast,
|
9120
|
+
[vars$5.borderColor]: globalRefs$4.colors.error.light,
|
9118
9121
|
},
|
9119
9122
|
},
|
9120
9123
|
};
|
@@ -9122,10 +9125,10 @@ const notification = {
|
|
9122
9125
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
9123
9126
|
__proto__: null,
|
9124
9127
|
default: notification,
|
9125
|
-
vars: vars$
|
9128
|
+
vars: vars$5
|
9126
9129
|
});
|
9127
9130
|
|
9128
|
-
const componentName$
|
9131
|
+
const componentName$6 = getComponentName('multi-select-combo-box');
|
9129
9132
|
|
9130
9133
|
const multiSelectComboBoxMixin = (superclass) =>
|
9131
9134
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -9513,7 +9516,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
9513
9516
|
};
|
9514
9517
|
|
9515
9518
|
const {
|
9516
|
-
host: host$
|
9519
|
+
host: host$2,
|
9517
9520
|
inputField,
|
9518
9521
|
inputElement,
|
9519
9522
|
placeholder,
|
@@ -9551,10 +9554,10 @@ const {
|
|
9551
9554
|
const MultiSelectComboBoxClass = compose(
|
9552
9555
|
createStyleMixin({
|
9553
9556
|
mappings: {
|
9554
|
-
hostWidth: { ...host$
|
9555
|
-
hostDirection: { ...host$
|
9557
|
+
hostWidth: { ...host$2, property: 'width' },
|
9558
|
+
hostDirection: { ...host$2, property: 'direction' },
|
9556
9559
|
// we apply font-size also on the host so we can set its width with em
|
9557
|
-
fontSize: [{}, host$
|
9560
|
+
fontSize: [{}, host$2],
|
9558
9561
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
9559
9562
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
9560
9563
|
labelTextColor: [
|
@@ -9729,73 +9732,73 @@ const MultiSelectComboBoxClass = compose(
|
|
9729
9732
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
9730
9733
|
// tries to override it, causing us to lose the user set placeholder.
|
9731
9734
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
9732
|
-
componentName: componentName$
|
9735
|
+
componentName: componentName$6,
|
9733
9736
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
9734
9737
|
})
|
9735
9738
|
);
|
9736
9739
|
|
9737
|
-
const globalRefs$
|
9738
|
-
const vars$
|
9740
|
+
const globalRefs$3 = getThemeRefs(globals);
|
9741
|
+
const vars$4 = MultiSelectComboBoxClass.cssVarList;
|
9739
9742
|
|
9740
9743
|
const multiSelectComboBox = {
|
9741
|
-
[vars$
|
9742
|
-
[vars$
|
9743
|
-
[vars$
|
9744
|
-
[vars$
|
9745
|
-
[vars$
|
9746
|
-
[vars$
|
9747
|
-
[vars$
|
9748
|
-
[vars$
|
9749
|
-
[vars$
|
9750
|
-
[vars$
|
9751
|
-
[vars$
|
9752
|
-
[vars$
|
9753
|
-
[vars$
|
9754
|
-
[vars$
|
9755
|
-
[vars$
|
9756
|
-
[vars$
|
9757
|
-
[vars$
|
9758
|
-
[vars$
|
9759
|
-
[vars$
|
9760
|
-
[vars$
|
9761
|
-
[vars$
|
9762
|
-
[vars$
|
9763
|
-
[vars$
|
9764
|
-
[vars$
|
9765
|
-
[vars$
|
9766
|
-
[vars$
|
9767
|
-
[vars$
|
9768
|
-
[vars$
|
9769
|
-
[vars$
|
9770
|
-
[vars$
|
9744
|
+
[vars$4.hostWidth]: refs.width,
|
9745
|
+
[vars$4.hostDirection]: refs.direction,
|
9746
|
+
[vars$4.fontSize]: refs.fontSize,
|
9747
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
9748
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
9749
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
9750
|
+
[vars$4.inputBorderColor]: refs.borderColor,
|
9751
|
+
[vars$4.inputBorderWidth]: refs.borderWidth,
|
9752
|
+
[vars$4.inputBorderStyle]: refs.borderStyle,
|
9753
|
+
[vars$4.inputBorderRadius]: refs.borderRadius,
|
9754
|
+
[vars$4.inputOutlineColor]: refs.outlineColor,
|
9755
|
+
[vars$4.inputOutlineOffset]: refs.outlineOffset,
|
9756
|
+
[vars$4.inputOutlineWidth]: refs.outlineWidth,
|
9757
|
+
[vars$4.inputOutlineStyle]: refs.outlineStyle,
|
9758
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
9759
|
+
[vars$4.inputValueTextColor]: refs.valueTextColor,
|
9760
|
+
[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9761
|
+
[vars$4.inputBackgroundColor]: refs.backgroundColor,
|
9762
|
+
[vars$4.inputHorizontalPadding]: refs.horizontalPadding,
|
9763
|
+
[vars$4.inputVerticalPadding]: refs.verticalPadding,
|
9764
|
+
[vars$4.inputHeight]: refs.inputHeight,
|
9765
|
+
[vars$4.inputDropdownButtonColor]: globalRefs$3.colors.surface.dark,
|
9766
|
+
[vars$4.inputDropdownButtonCursor]: 'pointer',
|
9767
|
+
[vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9768
|
+
[vars$4.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
|
9769
|
+
[vars$4.overlayItemPaddingInlineStart]: globalRefs$3.spacing.xs,
|
9770
|
+
[vars$4.overlayItemPaddingInlineEnd]: globalRefs$3.spacing.lg,
|
9771
|
+
[vars$4.chipFontSize]: refs.chipFontSize,
|
9772
|
+
[vars$4.chipTextColor]: globalRefs$3.colors.surface.contrast,
|
9773
|
+
[vars$4.chipBackgroundColor]: globalRefs$3.colors.surface.light,
|
9771
9774
|
|
9772
9775
|
_readonly: {
|
9773
|
-
[vars$
|
9776
|
+
[vars$4.inputDropdownButtonCursor]: 'default',
|
9774
9777
|
},
|
9775
9778
|
|
9776
9779
|
// Overlay theme exposed via the component:
|
9777
|
-
[vars$
|
9778
|
-
[vars$
|
9779
|
-
[vars$
|
9780
|
-
[vars$
|
9781
|
-
[vars$
|
9782
|
-
[vars$
|
9780
|
+
[vars$4.overlayFontSize]: refs.fontSize,
|
9781
|
+
[vars$4.overlayFontFamily]: refs.fontFamily,
|
9782
|
+
[vars$4.overlayCursor]: 'pointer',
|
9783
|
+
[vars$4.overlayItemBoxShadow]: 'none',
|
9784
|
+
[vars$4.overlayBackground]: refs.backgroundColor,
|
9785
|
+
[vars$4.overlayTextColor]: refs.valueTextColor,
|
9783
9786
|
|
9784
9787
|
// Overlay direct theme:
|
9785
|
-
[vars$
|
9786
|
-
[vars$
|
9788
|
+
[vars$4.overlay.minHeight]: '400px',
|
9789
|
+
[vars$4.overlay.margin]: '0',
|
9787
9790
|
};
|
9788
9791
|
|
9789
9792
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
9790
9793
|
__proto__: null,
|
9791
9794
|
default: multiSelectComboBox,
|
9792
9795
|
multiSelectComboBox: multiSelectComboBox,
|
9793
|
-
vars: vars$
|
9796
|
+
vars: vars$4
|
9794
9797
|
});
|
9795
9798
|
|
9796
|
-
const componentName$
|
9799
|
+
const componentName$5 = getComponentName('badge');
|
9797
9800
|
|
9798
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
9801
|
+
class RawBadge extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > div' }) {
|
9799
9802
|
constructor() {
|
9800
9803
|
super();
|
9801
9804
|
|
@@ -9843,66 +9846,66 @@ const BadgeClass = compose(
|
|
9843
9846
|
componentNameValidationMixin
|
9844
9847
|
)(RawBadge);
|
9845
9848
|
|
9846
|
-
const globalRefs$
|
9847
|
-
const vars$
|
9849
|
+
const globalRefs$2 = getThemeRefs(globals);
|
9850
|
+
const vars$3 = BadgeClass.cssVarList;
|
9848
9851
|
|
9849
9852
|
const badge = {
|
9850
|
-
[vars$
|
9851
|
-
[vars$
|
9853
|
+
[vars$3.hostWidth]: 'fit-content',
|
9854
|
+
[vars$3.hostDirection]: globalRefs$2.direction,
|
9852
9855
|
|
9853
|
-
[vars$
|
9856
|
+
[vars$3.textAlign]: 'center',
|
9854
9857
|
|
9855
|
-
[vars$
|
9856
|
-
[vars$
|
9858
|
+
[vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
|
9859
|
+
[vars$3.fontWeight]: '400',
|
9857
9860
|
|
9858
|
-
[vars$
|
9859
|
-
[vars$
|
9861
|
+
[vars$3.verticalPadding]: '0.25em',
|
9862
|
+
[vars$3.horizontalPadding]: '0.5em',
|
9860
9863
|
|
9861
|
-
[vars$
|
9862
|
-
[vars$
|
9863
|
-
[vars$
|
9864
|
-
[vars$
|
9864
|
+
[vars$3.borderWidth]: globalRefs$2.border.xs,
|
9865
|
+
[vars$3.borderRadius]: globalRefs$2.radius.xs,
|
9866
|
+
[vars$3.borderColor]: 'transparent',
|
9867
|
+
[vars$3.borderStyle]: 'solid',
|
9865
9868
|
|
9866
9869
|
_fullWidth: {
|
9867
|
-
[vars$
|
9870
|
+
[vars$3.hostWidth]: '100%',
|
9868
9871
|
},
|
9869
9872
|
|
9870
9873
|
size: {
|
9871
|
-
xs: { [vars$
|
9872
|
-
sm: { [vars$
|
9873
|
-
md: { [vars$
|
9874
|
-
lg: { [vars$
|
9874
|
+
xs: { [vars$3.fontSize]: '12px' },
|
9875
|
+
sm: { [vars$3.fontSize]: '14px' },
|
9876
|
+
md: { [vars$3.fontSize]: '16px' },
|
9877
|
+
lg: { [vars$3.fontSize]: '18px' },
|
9875
9878
|
},
|
9876
9879
|
|
9877
9880
|
mode: {
|
9878
9881
|
default: {
|
9879
|
-
[vars$
|
9882
|
+
[vars$3.textColor]: globalRefs$2.colors.surface.dark,
|
9880
9883
|
_bordered: {
|
9881
|
-
[vars$
|
9884
|
+
[vars$3.borderColor]: globalRefs$2.colors.surface.light,
|
9882
9885
|
},
|
9883
9886
|
},
|
9884
9887
|
primary: {
|
9885
|
-
[vars$
|
9888
|
+
[vars$3.textColor]: globalRefs$2.colors.primary.main,
|
9886
9889
|
_bordered: {
|
9887
|
-
[vars$
|
9890
|
+
[vars$3.borderColor]: globalRefs$2.colors.primary.light,
|
9888
9891
|
},
|
9889
9892
|
},
|
9890
9893
|
secondary: {
|
9891
|
-
[vars$
|
9894
|
+
[vars$3.textColor]: globalRefs$2.colors.secondary.main,
|
9892
9895
|
_bordered: {
|
9893
|
-
[vars$
|
9896
|
+
[vars$3.borderColor]: globalRefs$2.colors.secondary.light,
|
9894
9897
|
},
|
9895
9898
|
},
|
9896
9899
|
error: {
|
9897
|
-
[vars$
|
9900
|
+
[vars$3.textColor]: globalRefs$2.colors.error.main,
|
9898
9901
|
_bordered: {
|
9899
|
-
[vars$
|
9902
|
+
[vars$3.borderColor]: globalRefs$2.colors.error.light,
|
9900
9903
|
},
|
9901
9904
|
},
|
9902
9905
|
success: {
|
9903
|
-
[vars$
|
9906
|
+
[vars$3.textColor]: globalRefs$2.colors.success.main,
|
9904
9907
|
_bordered: {
|
9905
|
-
[vars$
|
9908
|
+
[vars$3.borderColor]: globalRefs$2.colors.success.light,
|
9906
9909
|
},
|
9907
9910
|
},
|
9908
9911
|
},
|
@@ -9911,10 +9914,149 @@ const badge = {
|
|
9911
9914
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
9912
9915
|
__proto__: null,
|
9913
9916
|
default: badge,
|
9917
|
+
vars: vars$3
|
9918
|
+
});
|
9919
|
+
|
9920
|
+
const componentName$4 = getComponentName('avatar');
|
9921
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > .wrapper' }) {
|
9922
|
+
constructor() {
|
9923
|
+
super();
|
9924
|
+
|
9925
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
9926
|
+
<style>
|
9927
|
+
:host {
|
9928
|
+
display: inline-flex;
|
9929
|
+
}
|
9930
|
+
|
9931
|
+
.editable {
|
9932
|
+
border: 1px solid;
|
9933
|
+
border-radius: 100%;
|
9934
|
+
height: fit-content;
|
9935
|
+
width: 25%;
|
9936
|
+
height: 25%;
|
9937
|
+
display: flex;
|
9938
|
+
justify-content: center;
|
9939
|
+
align-items: center;
|
9940
|
+
padding: 5%;
|
9941
|
+
box-sizing: border-box;
|
9942
|
+
position: absolute;
|
9943
|
+
bottom: 0;
|
9944
|
+
inset-inline-end: 0;
|
9945
|
+
}
|
9946
|
+
|
9947
|
+
vaadin-icon {
|
9948
|
+
color: currentcolor;
|
9949
|
+
}
|
9950
|
+
|
9951
|
+
vaadin-avatar {
|
9952
|
+
width: 100%;
|
9953
|
+
height: 100%;
|
9954
|
+
}
|
9955
|
+
|
9956
|
+
.wrapper {
|
9957
|
+
display: inline-flex;
|
9958
|
+
position: relative;
|
9959
|
+
width: 100%;
|
9960
|
+
height: 100%;
|
9961
|
+
}
|
9962
|
+
</style>
|
9963
|
+
|
9964
|
+
|
9965
|
+
<div class="wrapper">
|
9966
|
+
<vaadin-avatar></vaadin-avatar>
|
9967
|
+
<div class="editable">
|
9968
|
+
<vaadin-icon icon="vaadin:pencil"></vaadin-icon>
|
9969
|
+
</div>
|
9970
|
+
</div>
|
9971
|
+
`;
|
9972
|
+
|
9973
|
+
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
9974
|
+
|
9975
|
+
forwardAttrs(this, this.avatarComponent, {
|
9976
|
+
includeAttrs: ['name', 'img'],
|
9977
|
+
});
|
9978
|
+
|
9979
|
+
const editableIcon = this.shadowRoot.querySelector('.editable');
|
9980
|
+
|
9981
|
+
observeAttributes(
|
9982
|
+
this,
|
9983
|
+
() => {
|
9984
|
+
editableIcon.style.display = this.isEditable ? '' : 'none';
|
9985
|
+
},
|
9986
|
+
{ includeAttrs: ['editable'] }
|
9987
|
+
);
|
9988
|
+
}
|
9989
|
+
|
9990
|
+
get isEditable() {
|
9991
|
+
return this.getAttribute('editable') === 'true';
|
9992
|
+
}
|
9993
|
+
}
|
9994
|
+
|
9995
|
+
const { host: host$1, editableBadge, avatar: avatar$2 } = {
|
9996
|
+
host: { selector: () => ':host' },
|
9997
|
+
editableBadge: { selector: '> .editable' },
|
9998
|
+
avatar: { selector: 'vaadin-avatar' },
|
9999
|
+
};
|
10000
|
+
|
10001
|
+
const AvatarClass = compose(
|
10002
|
+
createStyleMixin({
|
10003
|
+
mappings: {
|
10004
|
+
hostWidth: { ...host$1, property: 'width' },
|
10005
|
+
hostHeight: { ...host$1, property: 'height' },
|
10006
|
+
hostDirection: { ...host$1, property: 'direction' },
|
10007
|
+
avatarTextColor: { ...avatar$2, property: 'color' },
|
10008
|
+
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
10009
|
+
editableIconColor: { ...editableBadge, property: 'color' },
|
10010
|
+
editableBorderColor: { ...editableBadge, property: 'border-color' },
|
10011
|
+
editableBackgroundColor: { ...editableBadge, property: 'background-color' },
|
10012
|
+
},
|
10013
|
+
}),
|
10014
|
+
draggableMixin,
|
10015
|
+
componentNameValidationMixin
|
10016
|
+
)(RawAvatar);
|
10017
|
+
|
10018
|
+
const globalRefs$1 = getThemeRefs(globals);
|
10019
|
+
const compVars = AvatarClass.cssVarList;
|
10020
|
+
|
10021
|
+
const avatar = {
|
10022
|
+
[compVars.hostDirection]: globalRefs$1.direction,
|
10023
|
+
[compVars.editableIconColor]: globalRefs$1.colors.surface.dark,
|
10024
|
+
[compVars.editableBorderColor]: globalRefs$1.colors.surface.dark,
|
10025
|
+
[compVars.editableBackgroundColor]: globalRefs$1.colors.surface.main,
|
10026
|
+
[compVars.avatarTextColor]: globalRefs$1.colors.surface.main,
|
10027
|
+
[compVars.avatarBackgroundColor]: globalRefs$1.colors.surface.dark,
|
10028
|
+
|
10029
|
+
size: {
|
10030
|
+
xs: {
|
10031
|
+
[compVars.hostWidth]: '30px',
|
10032
|
+
[compVars.hostHeight]: '30px',
|
10033
|
+
},
|
10034
|
+
sm: {
|
10035
|
+
[compVars.hostWidth]: '40px',
|
10036
|
+
[compVars.hostHeight]: '40px',
|
10037
|
+
},
|
10038
|
+
md: {
|
10039
|
+
[compVars.hostWidth]: '60px',
|
10040
|
+
[compVars.hostHeight]: '60px',
|
10041
|
+
},
|
10042
|
+
lg: {
|
10043
|
+
[compVars.hostWidth]: '98px',
|
10044
|
+
[compVars.hostHeight]: '98px',
|
10045
|
+
},
|
10046
|
+
},
|
10047
|
+
};
|
10048
|
+
|
10049
|
+
const vars$2 = {
|
10050
|
+
...compVars,
|
10051
|
+
};
|
10052
|
+
|
10053
|
+
var avatar$1 = /*#__PURE__*/Object.freeze({
|
10054
|
+
__proto__: null,
|
10055
|
+
default: avatar,
|
9914
10056
|
vars: vars$2
|
9915
10057
|
});
|
9916
10058
|
|
9917
|
-
customElements.define(componentName$
|
10059
|
+
customElements.define(componentName$u, TextClass);
|
9918
10060
|
|
9919
10061
|
const componentName$3 = getComponentName('mappings-field-internal');
|
9920
10062
|
|
@@ -10125,6 +10267,7 @@ const components = {
|
|
10125
10267
|
notificationCard,
|
10126
10268
|
multiSelectComboBox: multiSelectComboBox$1,
|
10127
10269
|
badge: badge$1,
|
10270
|
+
avatar: avatar$1,
|
10128
10271
|
mappingsField: mappingsField$1,
|
10129
10272
|
};
|
10130
10273
|
|
@@ -10138,7 +10281,7 @@ const vars = Object.keys(components).reduce(
|
|
10138
10281
|
);
|
10139
10282
|
|
10140
10283
|
const defaultTheme = { globals, components: theme };
|
10141
|
-
const themeVars = { globals: vars$
|
10284
|
+
const themeVars = { globals: vars$A, components: vars };
|
10142
10285
|
|
10143
10286
|
const colors = {
|
10144
10287
|
surface: {
|
@@ -10440,6 +10583,9 @@ const NotificationClass = compose(
|
|
10440
10583
|
})
|
10441
10584
|
);
|
10442
10585
|
|
10586
|
+
customElements.define(componentName$4, AvatarClass);
|
10587
|
+
|
10588
|
+
exports.AvatarClass = AvatarClass;
|
10443
10589
|
exports.BadgeClass = BadgeClass;
|
10444
10590
|
exports.ButtonClass = ButtonClass;
|
10445
10591
|
exports.ButtonMultiSelectionGroupClass = ButtonMultiSelectionGroupClass;
|