@descope/web-components-ui 1.0.365 → 1.0.366
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1799 -1282
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1849 -1335
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-apps-list-index-js.js +1 -0
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-list-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-apps-list/AppsListClass.js +98 -0
- package/src/components/descope-apps-list/index.js +8 -0
- package/src/components/descope-avatar/AvatarClass.js +5 -2
- package/src/components/descope-list/ListClass.js +140 -0
- package/src/components/descope-list/ListItemClass.js +56 -0
- package/src/components/descope-list/index.js +7 -0
- package/src/index.cjs.js +3 -0
- package/src/mixins/activableMixin.js +14 -0
- package/src/mixins/createDynamicDataMixin.js +84 -0
- package/src/mixins/createProxy.js +1 -1
- package/src/theme/components/appsList.js +36 -0
- package/src/theme/components/index.js +6 -0
- package/src/theme/components/list/list.js +56 -0
- package/src/theme/components/list/listItem.js +41 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -641,7 +641,7 @@ const globals = {
|
|
641
641
|
fonts,
|
642
642
|
direction,
|
643
643
|
};
|
644
|
-
const vars$
|
644
|
+
const vars$M = getThemeVars(globals);
|
645
645
|
|
646
646
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
647
647
|
|
@@ -1148,7 +1148,7 @@ const createProxy = ({
|
|
1148
1148
|
.map(
|
1149
1149
|
(
|
1150
1150
|
slot // when slot is an empty string, we will create the default slot (without a name)
|
1151
|
-
) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}
|
1151
|
+
) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
|
1152
1152
|
)
|
1153
1153
|
.join('')}
|
1154
1154
|
</${wrappedEleName}>
|
@@ -2656,9 +2656,9 @@ const createIcon = async (src) => {
|
|
2656
2656
|
|
2657
2657
|
/* eslint-disable no-use-before-define */
|
2658
2658
|
|
2659
|
-
const componentName$
|
2659
|
+
const componentName$V = getComponentName('icon');
|
2660
2660
|
|
2661
|
-
class RawIcon extends createBaseClass({ componentName: componentName$
|
2661
|
+
class RawIcon extends createBaseClass({ componentName: componentName$V, baseSelector: 'slot' }) {
|
2662
2662
|
static get observedAttributes() {
|
2663
2663
|
return ['src', 'fill-color'];
|
2664
2664
|
}
|
@@ -2756,7 +2756,7 @@ const clickableMixin = (superclass) =>
|
|
2756
2756
|
}
|
2757
2757
|
};
|
2758
2758
|
|
2759
|
-
const componentName$
|
2759
|
+
const componentName$U = getComponentName('button');
|
2760
2760
|
|
2761
2761
|
const resetStyles = `
|
2762
2762
|
:host {
|
@@ -2872,7 +2872,7 @@ const ButtonClass = compose(
|
|
2872
2872
|
}
|
2873
2873
|
`,
|
2874
2874
|
excludeAttrsSync: ['tabindex'],
|
2875
|
-
componentName: componentName$
|
2875
|
+
componentName: componentName$U,
|
2876
2876
|
})
|
2877
2877
|
);
|
2878
2878
|
|
@@ -2909,139 +2909,139 @@ loadingIndicatorStyles = `
|
|
2909
2909
|
}
|
2910
2910
|
`;
|
2911
2911
|
|
2912
|
-
const globalRefs$
|
2913
|
-
const compVars$
|
2912
|
+
const globalRefs$v = getThemeRefs(globals);
|
2913
|
+
const compVars$6 = ButtonClass.cssVarList;
|
2914
2914
|
|
2915
2915
|
const mode = {
|
2916
|
-
primary: globalRefs$
|
2917
|
-
secondary: globalRefs$
|
2918
|
-
success: globalRefs$
|
2919
|
-
error: globalRefs$
|
2920
|
-
surface: globalRefs$
|
2916
|
+
primary: globalRefs$v.colors.primary,
|
2917
|
+
secondary: globalRefs$v.colors.secondary,
|
2918
|
+
success: globalRefs$v.colors.success,
|
2919
|
+
error: globalRefs$v.colors.error,
|
2920
|
+
surface: globalRefs$v.colors.surface,
|
2921
2921
|
};
|
2922
2922
|
|
2923
|
-
const [helperTheme$
|
2923
|
+
const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$U);
|
2924
2924
|
|
2925
2925
|
const button = {
|
2926
|
-
...helperTheme$
|
2926
|
+
...helperTheme$4,
|
2927
2927
|
|
2928
|
-
[compVars$
|
2928
|
+
[compVars$6.fontFamily]: globalRefs$v.fonts.font1.family,
|
2929
2929
|
|
2930
|
-
[compVars$
|
2931
|
-
[compVars$
|
2932
|
-
[compVars$
|
2933
|
-
[compVars$
|
2930
|
+
[compVars$6.cursor]: 'pointer',
|
2931
|
+
[compVars$6.hostHeight]: '3em',
|
2932
|
+
[compVars$6.hostWidth]: 'auto',
|
2933
|
+
[compVars$6.hostDirection]: globalRefs$v.direction,
|
2934
2934
|
|
2935
|
-
[compVars$
|
2936
|
-
[compVars$
|
2937
|
-
[compVars$
|
2938
|
-
[compVars$
|
2935
|
+
[compVars$6.borderRadius]: globalRefs$v.radius.sm,
|
2936
|
+
[compVars$6.borderWidth]: globalRefs$v.border.xs,
|
2937
|
+
[compVars$6.borderStyle]: 'solid',
|
2938
|
+
[compVars$6.borderColor]: 'transparent',
|
2939
2939
|
|
2940
|
-
[compVars$
|
2940
|
+
[compVars$6.labelSpacing]: '0.25em',
|
2941
2941
|
|
2942
|
-
[compVars$
|
2942
|
+
[compVars$6.textAlign]: 'center', // default text align center
|
2943
2943
|
textAlign: {
|
2944
|
-
right: { [compVars$
|
2945
|
-
left: { [compVars$
|
2946
|
-
center: { [compVars$
|
2944
|
+
right: { [compVars$6.textAlign]: 'right' },
|
2945
|
+
left: { [compVars$6.textAlign]: 'left' },
|
2946
|
+
center: { [compVars$6.textAlign]: 'center' },
|
2947
2947
|
},
|
2948
2948
|
|
2949
|
-
[compVars$
|
2950
|
-
[compVars$
|
2949
|
+
[compVars$6.verticalPadding]: '1em',
|
2950
|
+
[compVars$6.horizontalPadding]: '0.875em',
|
2951
2951
|
|
2952
|
-
[compVars$
|
2953
|
-
[compVars$
|
2954
|
-
[compVars$
|
2955
|
-
[compVars$
|
2952
|
+
[compVars$6.outlineWidth]: globals.border.sm,
|
2953
|
+
[compVars$6.outlineOffset]: '0px', // keep `px` unit for external calc
|
2954
|
+
[compVars$6.outlineStyle]: 'solid',
|
2955
|
+
[compVars$6.outlineColor]: 'transparent',
|
2956
2956
|
|
2957
|
-
[compVars$
|
2958
|
-
[compVars$
|
2957
|
+
[compVars$6.iconSize]: '1.5em',
|
2958
|
+
[compVars$6.iconColor]: 'currentColor',
|
2959
2959
|
|
2960
2960
|
size: {
|
2961
|
-
xs: { [compVars$
|
2962
|
-
sm: { [compVars$
|
2963
|
-
md: { [compVars$
|
2964
|
-
lg: { [compVars$
|
2961
|
+
xs: { [compVars$6.fontSize]: '12px' },
|
2962
|
+
sm: { [compVars$6.fontSize]: '14px' },
|
2963
|
+
md: { [compVars$6.fontSize]: '16px' },
|
2964
|
+
lg: { [compVars$6.fontSize]: '18px' },
|
2965
2965
|
},
|
2966
2966
|
|
2967
2967
|
_square: {
|
2968
|
-
[compVars$
|
2969
|
-
[compVars$
|
2970
|
-
[compVars$
|
2968
|
+
[compVars$6.hostHeight]: '3em',
|
2969
|
+
[compVars$6.hostWidth]: '3em',
|
2970
|
+
[compVars$6.verticalPadding]: '0',
|
2971
2971
|
},
|
2972
2972
|
|
2973
2973
|
_fullWidth: {
|
2974
|
-
[compVars$
|
2974
|
+
[compVars$6.hostWidth]: '100%',
|
2975
2975
|
},
|
2976
2976
|
|
2977
2977
|
_loading: {
|
2978
|
-
[compVars$
|
2979
|
-
[compVars$
|
2978
|
+
[compVars$6.cursor]: 'wait',
|
2979
|
+
[compVars$6.labelTextColor]: helperRefs$4.main,
|
2980
2980
|
},
|
2981
2981
|
|
2982
2982
|
_disabled: {
|
2983
|
-
[helperVars$
|
2984
|
-
[helperVars$
|
2985
|
-
[helperVars$
|
2986
|
-
[helperVars$
|
2987
|
-
[compVars$
|
2983
|
+
[helperVars$4.main]: globalRefs$v.colors.surface.light,
|
2984
|
+
[helperVars$4.dark]: globalRefs$v.colors.surface.dark,
|
2985
|
+
[helperVars$4.light]: globalRefs$v.colors.surface.light,
|
2986
|
+
[helperVars$4.contrast]: globalRefs$v.colors.surface.main,
|
2987
|
+
[compVars$6.iconColor]: globalRefs$v.colors.surface.main,
|
2988
2988
|
},
|
2989
2989
|
|
2990
2990
|
variant: {
|
2991
2991
|
contained: {
|
2992
|
-
[compVars$
|
2993
|
-
[compVars$
|
2992
|
+
[compVars$6.labelTextColor]: helperRefs$4.contrast,
|
2993
|
+
[compVars$6.backgroundColor]: helperRefs$4.main,
|
2994
2994
|
_hover: {
|
2995
|
-
[compVars$
|
2995
|
+
[compVars$6.backgroundColor]: helperRefs$4.dark,
|
2996
2996
|
_loading: {
|
2997
|
-
[compVars$
|
2997
|
+
[compVars$6.backgroundColor]: helperRefs$4.main,
|
2998
2998
|
},
|
2999
2999
|
},
|
3000
3000
|
_active: {
|
3001
|
-
[compVars$
|
3001
|
+
[compVars$6.backgroundColor]: helperRefs$4.main,
|
3002
3002
|
},
|
3003
3003
|
},
|
3004
3004
|
|
3005
3005
|
outline: {
|
3006
|
-
[compVars$
|
3007
|
-
[compVars$
|
3006
|
+
[compVars$6.labelTextColor]: helperRefs$4.main,
|
3007
|
+
[compVars$6.borderColor]: helperRefs$4.main,
|
3008
3008
|
_hover: {
|
3009
|
-
[compVars$
|
3010
|
-
[compVars$
|
3009
|
+
[compVars$6.labelTextColor]: helperRefs$4.dark,
|
3010
|
+
[compVars$6.borderColor]: helperRefs$4.dark,
|
3011
3011
|
},
|
3012
3012
|
_active: {
|
3013
|
-
[compVars$
|
3014
|
-
[compVars$
|
3013
|
+
[compVars$6.labelTextColor]: helperRefs$4.main,
|
3014
|
+
[compVars$6.borderColor]: helperRefs$4.main,
|
3015
3015
|
},
|
3016
3016
|
},
|
3017
3017
|
|
3018
3018
|
link: {
|
3019
|
-
[compVars$
|
3020
|
-
[compVars$
|
3019
|
+
[compVars$6.labelTextColor]: helperRefs$4.main,
|
3020
|
+
[compVars$6.horizontalPadding]: '0.125em',
|
3021
3021
|
_hover: {
|
3022
|
-
[compVars$
|
3023
|
-
[compVars$
|
3022
|
+
[compVars$6.labelTextColor]: helperRefs$4.dark,
|
3023
|
+
[compVars$6.labelTextDecoration]: 'underline',
|
3024
3024
|
},
|
3025
3025
|
_active: {
|
3026
|
-
[compVars$
|
3026
|
+
[compVars$6.labelTextColor]: helperRefs$4.main,
|
3027
3027
|
},
|
3028
3028
|
},
|
3029
3029
|
},
|
3030
3030
|
|
3031
3031
|
_focused: {
|
3032
|
-
[compVars$
|
3032
|
+
[compVars$6.outlineColor]: helperRefs$4.light,
|
3033
3033
|
},
|
3034
3034
|
};
|
3035
3035
|
|
3036
|
-
const vars$
|
3037
|
-
...compVars$
|
3038
|
-
...helperVars$
|
3036
|
+
const vars$L = {
|
3037
|
+
...compVars$6,
|
3038
|
+
...helperVars$4,
|
3039
3039
|
};
|
3040
3040
|
|
3041
3041
|
var button$1 = /*#__PURE__*/Object.freeze({
|
3042
3042
|
__proto__: null,
|
3043
3043
|
default: button,
|
3044
|
-
vars: vars$
|
3044
|
+
vars: vars$L
|
3045
3045
|
});
|
3046
3046
|
|
3047
3047
|
const {
|
@@ -3301,11 +3301,11 @@ const inputFloatingLabelStyle = () => {
|
|
3301
3301
|
`;
|
3302
3302
|
};
|
3303
3303
|
|
3304
|
-
const componentName$
|
3304
|
+
const componentName$T = getComponentName('text-field');
|
3305
3305
|
|
3306
3306
|
const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
|
3307
3307
|
|
3308
|
-
const customMixin$
|
3308
|
+
const customMixin$c = (superclass) =>
|
3309
3309
|
class TextFieldClass extends superclass {
|
3310
3310
|
static get observedAttributes() {
|
3311
3311
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -3389,7 +3389,7 @@ const TextFieldClass = compose(
|
|
3389
3389
|
draggableMixin,
|
3390
3390
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
|
3391
3391
|
componentNameValidationMixin,
|
3392
|
-
customMixin$
|
3392
|
+
customMixin$c
|
3393
3393
|
)(
|
3394
3394
|
createProxy({
|
3395
3395
|
slots: ['prefix', 'suffix'],
|
@@ -3423,30 +3423,30 @@ const TextFieldClass = compose(
|
|
3423
3423
|
}
|
3424
3424
|
`,
|
3425
3425
|
excludeAttrsSync: ['tabindex'],
|
3426
|
-
componentName: componentName$
|
3426
|
+
componentName: componentName$T,
|
3427
3427
|
})
|
3428
3428
|
);
|
3429
3429
|
|
3430
|
-
const componentName$
|
3431
|
-
const globalRefs$
|
3430
|
+
const componentName$S = getComponentName('input-wrapper');
|
3431
|
+
const globalRefs$u = getThemeRefs(globals);
|
3432
3432
|
|
3433
|
-
const [theme$1, refs, vars$
|
3433
|
+
const [theme$1, refs, vars$K] = createHelperVars(
|
3434
3434
|
{
|
3435
|
-
labelTextColor: globalRefs$
|
3435
|
+
labelTextColor: globalRefs$u.colors.surface.dark,
|
3436
3436
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
3437
3437
|
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
3438
|
-
valueTextColor: globalRefs$
|
3439
|
-
placeholderTextColor: globalRefs$
|
3438
|
+
valueTextColor: globalRefs$u.colors.surface.contrast,
|
3439
|
+
placeholderTextColor: globalRefs$u.colors.surface.dark,
|
3440
3440
|
requiredIndicator: "'*'",
|
3441
|
-
helperTextColor: globalRefs$
|
3442
|
-
errorMessageTextColor: globalRefs$
|
3443
|
-
successMessageTextColor: globalRefs$
|
3441
|
+
helperTextColor: globalRefs$u.colors.surface.dark,
|
3442
|
+
errorMessageTextColor: globalRefs$u.colors.error.main,
|
3443
|
+
successMessageTextColor: globalRefs$u.colors.success.main,
|
3444
3444
|
|
3445
|
-
borderWidth: globalRefs$
|
3446
|
-
borderRadius: globalRefs$
|
3445
|
+
borderWidth: globalRefs$u.border.xs,
|
3446
|
+
borderRadius: globalRefs$u.radius.xs,
|
3447
3447
|
borderColor: 'transparent',
|
3448
3448
|
|
3449
|
-
outlineWidth: globalRefs$
|
3449
|
+
outlineWidth: globalRefs$u.border.sm,
|
3450
3450
|
outlineStyle: 'solid',
|
3451
3451
|
outlineColor: 'transparent',
|
3452
3452
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -3458,11 +3458,11 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3458
3458
|
horizontalPadding: '0.5em',
|
3459
3459
|
verticalPadding: '0.5em',
|
3460
3460
|
|
3461
|
-
backgroundColor: globalRefs$
|
3461
|
+
backgroundColor: globalRefs$u.colors.surface.main,
|
3462
3462
|
|
3463
|
-
fontFamily: globalRefs$
|
3463
|
+
fontFamily: globalRefs$u.fonts.font1.family,
|
3464
3464
|
|
3465
|
-
direction: globalRefs$
|
3465
|
+
direction: globalRefs$u.direction,
|
3466
3466
|
|
3467
3467
|
overlayOpacity: '0.3',
|
3468
3468
|
|
@@ -3512,93 +3512,93 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3512
3512
|
},
|
3513
3513
|
|
3514
3514
|
_focused: {
|
3515
|
-
outlineColor: globalRefs$
|
3515
|
+
outlineColor: globalRefs$u.colors.surface.light,
|
3516
3516
|
_invalid: {
|
3517
|
-
outlineColor: globalRefs$
|
3517
|
+
outlineColor: globalRefs$u.colors.error.main,
|
3518
3518
|
},
|
3519
3519
|
},
|
3520
3520
|
|
3521
3521
|
_bordered: {
|
3522
|
-
outlineWidth: globalRefs$
|
3523
|
-
borderColor: globalRefs$
|
3522
|
+
outlineWidth: globalRefs$u.border.xs,
|
3523
|
+
borderColor: globalRefs$u.colors.surface.light,
|
3524
3524
|
borderStyle: 'solid',
|
3525
3525
|
_invalid: {
|
3526
|
-
borderColor: globalRefs$
|
3526
|
+
borderColor: globalRefs$u.colors.error.main,
|
3527
3527
|
},
|
3528
3528
|
},
|
3529
3529
|
|
3530
3530
|
_disabled: {
|
3531
|
-
labelTextColor: globalRefs$
|
3532
|
-
borderColor: globalRefs$
|
3533
|
-
valueTextColor: globalRefs$
|
3534
|
-
placeholderTextColor: globalRefs$
|
3535
|
-
helperTextColor: globalRefs$
|
3536
|
-
backgroundColor: globalRefs$
|
3531
|
+
labelTextColor: globalRefs$u.colors.surface.light,
|
3532
|
+
borderColor: globalRefs$u.colors.surface.light,
|
3533
|
+
valueTextColor: globalRefs$u.colors.surface.light,
|
3534
|
+
placeholderTextColor: globalRefs$u.colors.surface.light,
|
3535
|
+
helperTextColor: globalRefs$u.colors.surface.light,
|
3536
|
+
backgroundColor: globalRefs$u.colors.surface.main,
|
3537
3537
|
},
|
3538
3538
|
},
|
3539
|
-
componentName$
|
3539
|
+
componentName$S
|
3540
3540
|
);
|
3541
3541
|
|
3542
3542
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
3543
3543
|
__proto__: null,
|
3544
3544
|
default: theme$1,
|
3545
3545
|
refs: refs,
|
3546
|
-
vars: vars$
|
3546
|
+
vars: vars$K
|
3547
3547
|
});
|
3548
3548
|
|
3549
|
-
const globalRefs$
|
3550
|
-
const vars$
|
3549
|
+
const globalRefs$t = getThemeRefs(globals);
|
3550
|
+
const vars$J = TextFieldClass.cssVarList;
|
3551
3551
|
|
3552
3552
|
const textField$1 = {
|
3553
|
-
[vars$
|
3554
|
-
[vars$
|
3555
|
-
[vars$
|
3556
|
-
[vars$
|
3557
|
-
[vars$
|
3558
|
-
[vars$
|
3559
|
-
[vars$
|
3560
|
-
[vars$
|
3561
|
-
[vars$
|
3562
|
-
[vars$
|
3563
|
-
[vars$
|
3564
|
-
[vars$
|
3565
|
-
[vars$
|
3566
|
-
[vars$
|
3567
|
-
[vars$
|
3568
|
-
[vars$
|
3569
|
-
[vars$
|
3570
|
-
[vars$
|
3571
|
-
[vars$
|
3572
|
-
[vars$
|
3573
|
-
[vars$
|
3574
|
-
[vars$
|
3575
|
-
[vars$
|
3576
|
-
[vars$
|
3553
|
+
[vars$J.hostWidth]: refs.width,
|
3554
|
+
[vars$J.hostMinWidth]: refs.minWidth,
|
3555
|
+
[vars$J.hostDirection]: refs.direction,
|
3556
|
+
[vars$J.fontSize]: refs.fontSize,
|
3557
|
+
[vars$J.fontFamily]: refs.fontFamily,
|
3558
|
+
[vars$J.labelFontSize]: refs.labelFontSize,
|
3559
|
+
[vars$J.labelFontWeight]: refs.labelFontWeight,
|
3560
|
+
[vars$J.labelTextColor]: refs.labelTextColor,
|
3561
|
+
[vars$J.labelRequiredIndicator]: refs.requiredIndicator,
|
3562
|
+
[vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
|
3563
|
+
[vars$J.inputValueTextColor]: refs.valueTextColor,
|
3564
|
+
[vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
|
3565
|
+
[vars$J.inputBorderWidth]: refs.borderWidth,
|
3566
|
+
[vars$J.inputBorderStyle]: refs.borderStyle,
|
3567
|
+
[vars$J.inputBorderColor]: refs.borderColor,
|
3568
|
+
[vars$J.inputBorderRadius]: refs.borderRadius,
|
3569
|
+
[vars$J.inputOutlineWidth]: refs.outlineWidth,
|
3570
|
+
[vars$J.inputOutlineStyle]: refs.outlineStyle,
|
3571
|
+
[vars$J.inputOutlineColor]: refs.outlineColor,
|
3572
|
+
[vars$J.inputOutlineOffset]: refs.outlineOffset,
|
3573
|
+
[vars$J.inputBackgroundColor]: refs.backgroundColor,
|
3574
|
+
[vars$J.inputHeight]: refs.inputHeight,
|
3575
|
+
[vars$J.inputHorizontalPadding]: refs.horizontalPadding,
|
3576
|
+
[vars$J.helperTextColor]: refs.helperTextColor,
|
3577
3577
|
textAlign: {
|
3578
|
-
right: { [vars$
|
3579
|
-
left: { [vars$
|
3580
|
-
center: { [vars$
|
3578
|
+
right: { [vars$J.inputTextAlign]: 'right' },
|
3579
|
+
left: { [vars$J.inputTextAlign]: 'left' },
|
3580
|
+
center: { [vars$J.inputTextAlign]: 'center' },
|
3581
3581
|
},
|
3582
|
-
[vars$
|
3583
|
-
[vars$
|
3584
|
-
[vars$
|
3585
|
-
[vars$
|
3586
|
-
[vars$
|
3587
|
-
[vars$
|
3588
|
-
[vars$
|
3589
|
-
[vars$
|
3590
|
-
[vars$
|
3591
|
-
[vars$
|
3592
|
-
[vars$
|
3593
|
-
[vars$
|
3594
|
-
[vars$
|
3582
|
+
[vars$J.labelPosition]: refs.labelPosition,
|
3583
|
+
[vars$J.labelTopPosition]: refs.labelTopPosition,
|
3584
|
+
[vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3585
|
+
[vars$J.inputTransformY]: refs.inputTransformY,
|
3586
|
+
[vars$J.inputTransition]: refs.inputTransition,
|
3587
|
+
[vars$J.marginInlineStart]: refs.marginInlineStart,
|
3588
|
+
[vars$J.placeholderOpacity]: refs.placeholderOpacity,
|
3589
|
+
[vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3590
|
+
[vars$J.valueInputHeight]: refs.valueInputHeight,
|
3591
|
+
[vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
3592
|
+
[vars$J.inputIconOffset]: globalRefs$t.spacing.md,
|
3593
|
+
[vars$J.inputIconSize]: refs.inputIconSize,
|
3594
|
+
[vars$J.inputIconColor]: refs.placeholderTextColor,
|
3595
3595
|
};
|
3596
3596
|
|
3597
3597
|
var textField$2 = /*#__PURE__*/Object.freeze({
|
3598
3598
|
__proto__: null,
|
3599
3599
|
default: textField$1,
|
3600
3600
|
textField: textField$1,
|
3601
|
-
vars: vars$
|
3601
|
+
vars: vars$J
|
3602
3602
|
});
|
3603
3603
|
|
3604
3604
|
const passwordDraggableMixin = (superclass) =>
|
@@ -3640,9 +3640,9 @@ const passwordDraggableMixin = (superclass) =>
|
|
3640
3640
|
}
|
3641
3641
|
};
|
3642
3642
|
|
3643
|
-
const componentName$
|
3643
|
+
const componentName$R = getComponentName('password');
|
3644
3644
|
|
3645
|
-
const customMixin$
|
3645
|
+
const customMixin$b = (superclass) =>
|
3646
3646
|
class PasswordFieldMixinClass extends superclass {
|
3647
3647
|
static get observedAttributes() {
|
3648
3648
|
return ['manual-visibility-toggle'];
|
@@ -3795,7 +3795,7 @@ const PasswordClass = compose(
|
|
3795
3795
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3796
3796
|
componentNameValidationMixin,
|
3797
3797
|
passwordDraggableMixin,
|
3798
|
-
customMixin$
|
3798
|
+
customMixin$b
|
3799
3799
|
)(
|
3800
3800
|
createProxy({
|
3801
3801
|
slots: ['', 'suffix'],
|
@@ -3858,58 +3858,58 @@ const PasswordClass = compose(
|
|
3858
3858
|
}
|
3859
3859
|
`,
|
3860
3860
|
excludeAttrsSync: ['tabindex'],
|
3861
|
-
componentName: componentName$
|
3861
|
+
componentName: componentName$R,
|
3862
3862
|
})
|
3863
3863
|
);
|
3864
3864
|
|
3865
|
-
const globalRefs$
|
3866
|
-
const vars$
|
3865
|
+
const globalRefs$s = getThemeRefs(globals);
|
3866
|
+
const vars$I = PasswordClass.cssVarList;
|
3867
3867
|
|
3868
3868
|
const password = {
|
3869
|
-
[vars$
|
3870
|
-
[vars$
|
3871
|
-
[vars$
|
3872
|
-
[vars$
|
3873
|
-
[vars$
|
3874
|
-
[vars$
|
3875
|
-
[vars$
|
3876
|
-
[vars$
|
3877
|
-
[vars$
|
3878
|
-
[vars$
|
3879
|
-
[vars$
|
3880
|
-
[vars$
|
3881
|
-
[vars$
|
3882
|
-
[vars$
|
3883
|
-
[vars$
|
3884
|
-
[vars$
|
3885
|
-
[vars$
|
3886
|
-
[vars$
|
3887
|
-
[vars$
|
3888
|
-
[vars$
|
3889
|
-
[vars$
|
3890
|
-
[vars$
|
3891
|
-
[vars$
|
3892
|
-
[vars$
|
3893
|
-
[vars$
|
3894
|
-
[vars$
|
3895
|
-
[vars$
|
3896
|
-
[vars$
|
3897
|
-
[vars$
|
3898
|
-
[vars$
|
3899
|
-
[vars$
|
3900
|
-
[vars$
|
3901
|
-
[vars$
|
3902
|
-
[vars$
|
3903
|
-
[vars$
|
3869
|
+
[vars$I.hostWidth]: refs.width,
|
3870
|
+
[vars$I.hostMinWidth]: refs.minWidth,
|
3871
|
+
[vars$I.hostDirection]: refs.direction,
|
3872
|
+
[vars$I.fontSize]: refs.fontSize,
|
3873
|
+
[vars$I.fontFamily]: refs.fontFamily,
|
3874
|
+
[vars$I.labelFontSize]: refs.labelFontSize,
|
3875
|
+
[vars$I.labelFontWeight]: refs.labelFontWeight,
|
3876
|
+
[vars$I.labelTextColor]: refs.labelTextColor,
|
3877
|
+
[vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
|
3878
|
+
[vars$I.inputHorizontalPadding]: refs.horizontalPadding,
|
3879
|
+
[vars$I.inputHeight]: refs.inputHeight,
|
3880
|
+
[vars$I.inputBackgroundColor]: refs.backgroundColor,
|
3881
|
+
[vars$I.labelRequiredIndicator]: refs.requiredIndicator,
|
3882
|
+
[vars$I.inputValueTextColor]: refs.valueTextColor,
|
3883
|
+
[vars$I.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3884
|
+
[vars$I.inputBorderWidth]: refs.borderWidth,
|
3885
|
+
[vars$I.inputBorderStyle]: refs.borderStyle,
|
3886
|
+
[vars$I.inputBorderColor]: refs.borderColor,
|
3887
|
+
[vars$I.inputBorderRadius]: refs.borderRadius,
|
3888
|
+
[vars$I.inputOutlineWidth]: refs.outlineWidth,
|
3889
|
+
[vars$I.inputOutlineStyle]: refs.outlineStyle,
|
3890
|
+
[vars$I.inputOutlineColor]: refs.outlineColor,
|
3891
|
+
[vars$I.inputOutlineOffset]: refs.outlineOffset,
|
3892
|
+
[vars$I.revealButtonOffset]: globalRefs$s.spacing.md,
|
3893
|
+
[vars$I.revealButtonSize]: refs.toggleButtonSize,
|
3894
|
+
[vars$I.revealButtonColor]: refs.placeholderTextColor,
|
3895
|
+
[vars$I.labelPosition]: refs.labelPosition,
|
3896
|
+
[vars$I.labelTopPosition]: refs.labelTopPosition,
|
3897
|
+
[vars$I.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3898
|
+
[vars$I.inputTransformY]: refs.inputTransformY,
|
3899
|
+
[vars$I.inputTransition]: refs.inputTransition,
|
3900
|
+
[vars$I.marginInlineStart]: refs.marginInlineStart,
|
3901
|
+
[vars$I.placeholderOpacity]: refs.placeholderOpacity,
|
3902
|
+
[vars$I.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3903
|
+
[vars$I.valueInputHeight]: refs.valueInputHeight,
|
3904
3904
|
};
|
3905
3905
|
|
3906
3906
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3907
3907
|
__proto__: null,
|
3908
3908
|
default: password,
|
3909
|
-
vars: vars$
|
3909
|
+
vars: vars$I
|
3910
3910
|
});
|
3911
3911
|
|
3912
|
-
const componentName$
|
3912
|
+
const componentName$Q = getComponentName('number-field');
|
3913
3913
|
|
3914
3914
|
const NumberFieldClass = compose(
|
3915
3915
|
createStyleMixin({
|
@@ -3943,60 +3943,60 @@ const NumberFieldClass = compose(
|
|
3943
3943
|
}
|
3944
3944
|
`,
|
3945
3945
|
excludeAttrsSync: ['tabindex'],
|
3946
|
-
componentName: componentName$
|
3946
|
+
componentName: componentName$Q,
|
3947
3947
|
})
|
3948
3948
|
);
|
3949
3949
|
|
3950
|
-
const vars$
|
3950
|
+
const vars$H = NumberFieldClass.cssVarList;
|
3951
3951
|
|
3952
3952
|
const numberField = {
|
3953
|
-
[vars$
|
3954
|
-
[vars$
|
3955
|
-
[vars$
|
3956
|
-
[vars$
|
3957
|
-
[vars$
|
3958
|
-
[vars$
|
3959
|
-
[vars$
|
3960
|
-
[vars$
|
3961
|
-
[vars$
|
3962
|
-
[vars$
|
3963
|
-
[vars$
|
3964
|
-
[vars$
|
3965
|
-
[vars$
|
3966
|
-
[vars$
|
3967
|
-
[vars$
|
3968
|
-
[vars$
|
3969
|
-
[vars$
|
3970
|
-
[vars$
|
3971
|
-
[vars$
|
3972
|
-
[vars$
|
3973
|
-
[vars$
|
3974
|
-
[vars$
|
3975
|
-
[vars$
|
3976
|
-
[vars$
|
3977
|
-
[vars$
|
3978
|
-
[vars$
|
3979
|
-
[vars$
|
3980
|
-
[vars$
|
3981
|
-
[vars$
|
3982
|
-
[vars$
|
3983
|
-
[vars$
|
3984
|
-
[vars$
|
3985
|
-
[vars$
|
3953
|
+
[vars$H.hostWidth]: refs.width,
|
3954
|
+
[vars$H.hostMinWidth]: refs.minWidth,
|
3955
|
+
[vars$H.hostDirection]: refs.direction,
|
3956
|
+
[vars$H.fontSize]: refs.fontSize,
|
3957
|
+
[vars$H.fontFamily]: refs.fontFamily,
|
3958
|
+
[vars$H.labelFontSize]: refs.labelFontSize,
|
3959
|
+
[vars$H.labelFontWeight]: refs.labelFontWeight,
|
3960
|
+
[vars$H.labelTextColor]: refs.labelTextColor,
|
3961
|
+
[vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
|
3962
|
+
[vars$H.inputValueTextColor]: refs.valueTextColor,
|
3963
|
+
[vars$H.inputPlaceholderColor]: refs.placeholderTextColor,
|
3964
|
+
[vars$H.inputBorderWidth]: refs.borderWidth,
|
3965
|
+
[vars$H.inputBorderStyle]: refs.borderStyle,
|
3966
|
+
[vars$H.inputBorderColor]: refs.borderColor,
|
3967
|
+
[vars$H.inputBorderRadius]: refs.borderRadius,
|
3968
|
+
[vars$H.inputOutlineWidth]: refs.outlineWidth,
|
3969
|
+
[vars$H.inputOutlineStyle]: refs.outlineStyle,
|
3970
|
+
[vars$H.inputOutlineColor]: refs.outlineColor,
|
3971
|
+
[vars$H.inputOutlineOffset]: refs.outlineOffset,
|
3972
|
+
[vars$H.inputBackgroundColor]: refs.backgroundColor,
|
3973
|
+
[vars$H.labelRequiredIndicator]: refs.requiredIndicator,
|
3974
|
+
[vars$H.inputHorizontalPadding]: refs.horizontalPadding,
|
3975
|
+
[vars$H.inputHeight]: refs.inputHeight,
|
3976
|
+
[vars$H.labelPosition]: refs.labelPosition,
|
3977
|
+
[vars$H.labelTopPosition]: refs.labelTopPosition,
|
3978
|
+
[vars$H.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3979
|
+
[vars$H.inputTransformY]: refs.inputTransformY,
|
3980
|
+
[vars$H.inputTransition]: refs.inputTransition,
|
3981
|
+
[vars$H.marginInlineStart]: refs.marginInlineStart,
|
3982
|
+
[vars$H.placeholderOpacity]: refs.placeholderOpacity,
|
3983
|
+
[vars$H.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3984
|
+
[vars$H.valueInputHeight]: refs.valueInputHeight,
|
3985
|
+
[vars$H.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
3986
3986
|
};
|
3987
3987
|
|
3988
3988
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3989
3989
|
__proto__: null,
|
3990
3990
|
default: numberField,
|
3991
|
-
vars: vars$
|
3991
|
+
vars: vars$H
|
3992
3992
|
});
|
3993
3993
|
|
3994
|
-
const componentName$
|
3994
|
+
const componentName$P = getComponentName('email-field');
|
3995
3995
|
|
3996
3996
|
const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
|
3997
3997
|
const defaultAutocomplete = 'username';
|
3998
3998
|
|
3999
|
-
const customMixin$
|
3999
|
+
const customMixin$a = (superclass) =>
|
4000
4000
|
class EmailFieldMixinClass extends superclass {
|
4001
4001
|
init() {
|
4002
4002
|
super.init?.();
|
@@ -4017,7 +4017,7 @@ const EmailFieldClass = compose(
|
|
4017
4017
|
draggableMixin,
|
4018
4018
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
|
4019
4019
|
componentNameValidationMixin,
|
4020
|
-
customMixin$
|
4020
|
+
customMixin$a
|
4021
4021
|
)(
|
4022
4022
|
createProxy({
|
4023
4023
|
slots: ['', 'suffix'],
|
@@ -4048,55 +4048,55 @@ const EmailFieldClass = compose(
|
|
4048
4048
|
}
|
4049
4049
|
`,
|
4050
4050
|
excludeAttrsSync: ['tabindex'],
|
4051
|
-
componentName: componentName$
|
4051
|
+
componentName: componentName$P,
|
4052
4052
|
})
|
4053
4053
|
);
|
4054
4054
|
|
4055
|
-
const vars$
|
4055
|
+
const vars$G = EmailFieldClass.cssVarList;
|
4056
4056
|
|
4057
4057
|
const emailField = {
|
4058
|
-
[vars$
|
4059
|
-
[vars$
|
4060
|
-
[vars$
|
4061
|
-
[vars$
|
4062
|
-
[vars$
|
4063
|
-
[vars$
|
4064
|
-
[vars$
|
4065
|
-
[vars$
|
4066
|
-
[vars$
|
4067
|
-
[vars$
|
4068
|
-
[vars$
|
4069
|
-
[vars$
|
4070
|
-
[vars$
|
4071
|
-
[vars$
|
4072
|
-
[vars$
|
4073
|
-
[vars$
|
4074
|
-
[vars$
|
4075
|
-
[vars$
|
4076
|
-
[vars$
|
4077
|
-
[vars$
|
4078
|
-
[vars$
|
4079
|
-
[vars$
|
4080
|
-
[vars$
|
4081
|
-
[vars$
|
4082
|
-
[vars$
|
4083
|
-
[vars$
|
4084
|
-
[vars$
|
4085
|
-
[vars$
|
4086
|
-
[vars$
|
4087
|
-
[vars$
|
4088
|
-
[vars$
|
4089
|
-
[vars$
|
4090
|
-
[vars$
|
4058
|
+
[vars$G.hostWidth]: refs.width,
|
4059
|
+
[vars$G.hostMinWidth]: refs.minWidth,
|
4060
|
+
[vars$G.hostDirection]: refs.direction,
|
4061
|
+
[vars$G.fontSize]: refs.fontSize,
|
4062
|
+
[vars$G.fontFamily]: refs.fontFamily,
|
4063
|
+
[vars$G.labelFontSize]: refs.labelFontSize,
|
4064
|
+
[vars$G.labelFontWeight]: refs.labelFontWeight,
|
4065
|
+
[vars$G.labelTextColor]: refs.labelTextColor,
|
4066
|
+
[vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
|
4067
|
+
[vars$G.inputValueTextColor]: refs.valueTextColor,
|
4068
|
+
[vars$G.labelRequiredIndicator]: refs.requiredIndicator,
|
4069
|
+
[vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
|
4070
|
+
[vars$G.inputBorderWidth]: refs.borderWidth,
|
4071
|
+
[vars$G.inputBorderStyle]: refs.borderStyle,
|
4072
|
+
[vars$G.inputBorderColor]: refs.borderColor,
|
4073
|
+
[vars$G.inputBorderRadius]: refs.borderRadius,
|
4074
|
+
[vars$G.inputOutlineWidth]: refs.outlineWidth,
|
4075
|
+
[vars$G.inputOutlineStyle]: refs.outlineStyle,
|
4076
|
+
[vars$G.inputOutlineColor]: refs.outlineColor,
|
4077
|
+
[vars$G.inputOutlineOffset]: refs.outlineOffset,
|
4078
|
+
[vars$G.inputBackgroundColor]: refs.backgroundColor,
|
4079
|
+
[vars$G.inputHorizontalPadding]: refs.horizontalPadding,
|
4080
|
+
[vars$G.inputHeight]: refs.inputHeight,
|
4081
|
+
[vars$G.labelPosition]: refs.labelPosition,
|
4082
|
+
[vars$G.labelTopPosition]: refs.labelTopPosition,
|
4083
|
+
[vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
4084
|
+
[vars$G.inputTransformY]: refs.inputTransformY,
|
4085
|
+
[vars$G.inputTransition]: refs.inputTransition,
|
4086
|
+
[vars$G.marginInlineStart]: refs.marginInlineStart,
|
4087
|
+
[vars$G.placeholderOpacity]: refs.placeholderOpacity,
|
4088
|
+
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
4089
|
+
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
4090
|
+
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4091
4091
|
};
|
4092
4092
|
|
4093
4093
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
4094
4094
|
__proto__: null,
|
4095
4095
|
default: emailField,
|
4096
|
-
vars: vars$
|
4096
|
+
vars: vars$G
|
4097
4097
|
});
|
4098
4098
|
|
4099
|
-
const componentName$
|
4099
|
+
const componentName$O = getComponentName('text-area');
|
4100
4100
|
|
4101
4101
|
const {
|
4102
4102
|
host: host$k,
|
@@ -4172,49 +4172,49 @@ const TextAreaClass = compose(
|
|
4172
4172
|
${resetInputCursor('vaadin-text-area')}
|
4173
4173
|
`,
|
4174
4174
|
excludeAttrsSync: ['tabindex'],
|
4175
|
-
componentName: componentName$
|
4175
|
+
componentName: componentName$O,
|
4176
4176
|
})
|
4177
4177
|
);
|
4178
4178
|
|
4179
|
-
const vars$
|
4179
|
+
const vars$F = TextAreaClass.cssVarList;
|
4180
4180
|
|
4181
4181
|
const textArea = {
|
4182
|
-
[vars$
|
4183
|
-
[vars$
|
4184
|
-
[vars$
|
4185
|
-
[vars$
|
4186
|
-
[vars$
|
4187
|
-
[vars$
|
4188
|
-
[vars$
|
4189
|
-
[vars$
|
4190
|
-
[vars$
|
4191
|
-
[vars$
|
4192
|
-
[vars$
|
4193
|
-
[vars$
|
4194
|
-
[vars$
|
4195
|
-
[vars$
|
4196
|
-
[vars$
|
4197
|
-
[vars$
|
4198
|
-
[vars$
|
4199
|
-
[vars$
|
4200
|
-
[vars$
|
4201
|
-
[vars$
|
4202
|
-
[vars$
|
4182
|
+
[vars$F.hostWidth]: refs.width,
|
4183
|
+
[vars$F.hostMinWidth]: refs.minWidth,
|
4184
|
+
[vars$F.hostDirection]: refs.direction,
|
4185
|
+
[vars$F.fontSize]: refs.fontSize,
|
4186
|
+
[vars$F.fontFamily]: refs.fontFamily,
|
4187
|
+
[vars$F.labelTextColor]: refs.labelTextColor,
|
4188
|
+
[vars$F.labelRequiredIndicator]: refs.requiredIndicator,
|
4189
|
+
[vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
|
4190
|
+
[vars$F.inputBackgroundColor]: refs.backgroundColor,
|
4191
|
+
[vars$F.inputValueTextColor]: refs.valueTextColor,
|
4192
|
+
[vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
4193
|
+
[vars$F.inputBorderRadius]: refs.borderRadius,
|
4194
|
+
[vars$F.inputBorderWidth]: refs.borderWidth,
|
4195
|
+
[vars$F.inputBorderStyle]: refs.borderStyle,
|
4196
|
+
[vars$F.inputBorderColor]: refs.borderColor,
|
4197
|
+
[vars$F.inputOutlineWidth]: refs.outlineWidth,
|
4198
|
+
[vars$F.inputOutlineStyle]: refs.outlineStyle,
|
4199
|
+
[vars$F.inputOutlineColor]: refs.outlineColor,
|
4200
|
+
[vars$F.inputOutlineOffset]: refs.outlineOffset,
|
4201
|
+
[vars$F.inputResizeType]: 'vertical',
|
4202
|
+
[vars$F.inputMinHeight]: '5em',
|
4203
4203
|
textAlign: {
|
4204
|
-
right: { [vars$
|
4205
|
-
left: { [vars$
|
4206
|
-
center: { [vars$
|
4204
|
+
right: { [vars$F.inputTextAlign]: 'right' },
|
4205
|
+
left: { [vars$F.inputTextAlign]: 'left' },
|
4206
|
+
center: { [vars$F.inputTextAlign]: 'center' },
|
4207
4207
|
},
|
4208
4208
|
|
4209
4209
|
_readonly: {
|
4210
|
-
[vars$
|
4210
|
+
[vars$F.inputResizeType]: 'none',
|
4211
4211
|
},
|
4212
4212
|
};
|
4213
4213
|
|
4214
4214
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
4215
4215
|
__proto__: null,
|
4216
4216
|
default: textArea,
|
4217
|
-
vars: vars$
|
4217
|
+
vars: vars$F
|
4218
4218
|
});
|
4219
4219
|
|
4220
4220
|
const createBaseInputClass = (...args) =>
|
@@ -4225,9 +4225,9 @@ const createBaseInputClass = (...args) =>
|
|
4225
4225
|
inputEventsDispatchingMixin
|
4226
4226
|
)(createBaseClass(...args));
|
4227
4227
|
|
4228
|
-
const componentName$
|
4228
|
+
const componentName$N = getComponentName('boolean-field-internal');
|
4229
4229
|
|
4230
|
-
createBaseInputClass({ componentName: componentName$
|
4230
|
+
createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
|
4231
4231
|
|
4232
4232
|
const booleanFieldMixin = (superclass) =>
|
4233
4233
|
class BooleanFieldMixinClass extends superclass {
|
@@ -4236,14 +4236,14 @@ const booleanFieldMixin = (superclass) =>
|
|
4236
4236
|
|
4237
4237
|
const template = document.createElement('template');
|
4238
4238
|
template.innerHTML = `
|
4239
|
-
<${componentName$
|
4239
|
+
<${componentName$N}
|
4240
4240
|
tabindex="-1"
|
4241
4241
|
slot="input"
|
4242
|
-
></${componentName$
|
4242
|
+
></${componentName$N}>
|
4243
4243
|
`;
|
4244
4244
|
|
4245
4245
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4246
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4246
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$N);
|
4247
4247
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
4248
4248
|
|
4249
4249
|
forwardAttrs(this, this.inputElement, {
|
@@ -4313,7 +4313,7 @@ descope-boolean-field-internal {
|
|
4313
4313
|
}
|
4314
4314
|
`;
|
4315
4315
|
|
4316
|
-
const componentName$
|
4316
|
+
const componentName$M = getComponentName('checkbox');
|
4317
4317
|
|
4318
4318
|
const {
|
4319
4319
|
host: host$j,
|
@@ -4419,51 +4419,51 @@ const CheckboxClass = compose(
|
|
4419
4419
|
}
|
4420
4420
|
`,
|
4421
4421
|
excludeAttrsSync: ['label', 'tabindex'],
|
4422
|
-
componentName: componentName$
|
4422
|
+
componentName: componentName$M,
|
4423
4423
|
})
|
4424
4424
|
);
|
4425
4425
|
|
4426
|
-
const vars$
|
4426
|
+
const vars$E = CheckboxClass.cssVarList;
|
4427
4427
|
const checkboxSize = '1.35em';
|
4428
4428
|
|
4429
4429
|
const checkbox = {
|
4430
|
-
[vars$
|
4431
|
-
[vars$
|
4432
|
-
[vars$
|
4433
|
-
[vars$
|
4434
|
-
[vars$
|
4435
|
-
[vars$
|
4436
|
-
[vars$
|
4437
|
-
[vars$
|
4438
|
-
[vars$
|
4439
|
-
[vars$
|
4440
|
-
[vars$
|
4441
|
-
[vars$
|
4442
|
-
[vars$
|
4443
|
-
[vars$
|
4444
|
-
[vars$
|
4445
|
-
[vars$
|
4446
|
-
[vars$
|
4447
|
-
[vars$
|
4448
|
-
[vars$
|
4449
|
-
[vars$
|
4430
|
+
[vars$E.hostWidth]: refs.width,
|
4431
|
+
[vars$E.hostDirection]: refs.direction,
|
4432
|
+
[vars$E.fontSize]: refs.fontSize,
|
4433
|
+
[vars$E.fontFamily]: refs.fontFamily,
|
4434
|
+
[vars$E.labelTextColor]: refs.labelTextColor,
|
4435
|
+
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
4436
|
+
[vars$E.labelFontWeight]: '400',
|
4437
|
+
[vars$E.labelLineHeight]: checkboxSize,
|
4438
|
+
[vars$E.labelSpacing]: '1em',
|
4439
|
+
[vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
|
4440
|
+
[vars$E.inputOutlineWidth]: refs.outlineWidth,
|
4441
|
+
[vars$E.inputOutlineOffset]: refs.outlineOffset,
|
4442
|
+
[vars$E.inputOutlineColor]: refs.outlineColor,
|
4443
|
+
[vars$E.inputOutlineStyle]: refs.outlineStyle,
|
4444
|
+
[vars$E.inputBorderRadius]: refs.borderRadius,
|
4445
|
+
[vars$E.inputBorderColor]: refs.borderColor,
|
4446
|
+
[vars$E.inputBorderWidth]: refs.borderWidth,
|
4447
|
+
[vars$E.inputBorderStyle]: refs.borderStyle,
|
4448
|
+
[vars$E.inputBackgroundColor]: refs.backgroundColor,
|
4449
|
+
[vars$E.inputSize]: checkboxSize,
|
4450
4450
|
|
4451
4451
|
_checked: {
|
4452
|
-
[vars$
|
4452
|
+
[vars$E.inputValueTextColor]: refs.valueTextColor,
|
4453
4453
|
},
|
4454
4454
|
|
4455
4455
|
_disabled: {
|
4456
|
-
[vars$
|
4456
|
+
[vars$E.labelTextColor]: refs.labelTextColor,
|
4457
4457
|
},
|
4458
4458
|
};
|
4459
4459
|
|
4460
4460
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
4461
4461
|
__proto__: null,
|
4462
4462
|
default: checkbox,
|
4463
|
-
vars: vars$
|
4463
|
+
vars: vars$E
|
4464
4464
|
});
|
4465
4465
|
|
4466
|
-
const componentName$
|
4466
|
+
const componentName$L = getComponentName('switch-toggle');
|
4467
4467
|
|
4468
4468
|
const {
|
4469
4469
|
host: host$i,
|
@@ -4595,82 +4595,82 @@ const SwitchToggleClass = compose(
|
|
4595
4595
|
}
|
4596
4596
|
`,
|
4597
4597
|
excludeAttrsSync: ['label', 'tabindex'],
|
4598
|
-
componentName: componentName$
|
4598
|
+
componentName: componentName$L,
|
4599
4599
|
})
|
4600
4600
|
);
|
4601
4601
|
|
4602
4602
|
const knobMargin = '2px';
|
4603
4603
|
const checkboxHeight = '1.25em';
|
4604
4604
|
|
4605
|
-
const globalRefs$
|
4606
|
-
const vars$
|
4605
|
+
const globalRefs$r = getThemeRefs(globals);
|
4606
|
+
const vars$D = SwitchToggleClass.cssVarList;
|
4607
4607
|
|
4608
4608
|
const switchToggle = {
|
4609
|
-
[vars$
|
4610
|
-
[vars$
|
4611
|
-
[vars$
|
4612
|
-
[vars$
|
4613
|
-
|
4614
|
-
[vars$
|
4615
|
-
[vars$
|
4616
|
-
[vars$
|
4617
|
-
[vars$
|
4618
|
-
|
4619
|
-
[vars$
|
4620
|
-
[vars$
|
4621
|
-
[vars$
|
4622
|
-
[vars$
|
4623
|
-
[vars$
|
4624
|
-
[vars$
|
4625
|
-
[vars$
|
4626
|
-
|
4627
|
-
[vars$
|
4628
|
-
[vars$
|
4629
|
-
[vars$
|
4630
|
-
[vars$
|
4631
|
-
[vars$
|
4632
|
-
[vars$
|
4633
|
-
|
4634
|
-
[vars$
|
4635
|
-
[vars$
|
4636
|
-
[vars$
|
4637
|
-
[vars$
|
4638
|
-
[vars$
|
4639
|
-
[vars$
|
4609
|
+
[vars$D.hostWidth]: refs.width,
|
4610
|
+
[vars$D.hostDirection]: refs.direction,
|
4611
|
+
[vars$D.fontSize]: refs.fontSize,
|
4612
|
+
[vars$D.fontFamily]: refs.fontFamily,
|
4613
|
+
|
4614
|
+
[vars$D.inputOutlineWidth]: refs.outlineWidth,
|
4615
|
+
[vars$D.inputOutlineOffset]: refs.outlineOffset,
|
4616
|
+
[vars$D.inputOutlineColor]: refs.outlineColor,
|
4617
|
+
[vars$D.inputOutlineStyle]: refs.outlineStyle,
|
4618
|
+
|
4619
|
+
[vars$D.trackBorderStyle]: refs.borderStyle,
|
4620
|
+
[vars$D.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
4621
|
+
[vars$D.trackBorderColor]: refs.borderColor,
|
4622
|
+
[vars$D.trackBackgroundColor]: refs.backgroundColor,
|
4623
|
+
[vars$D.trackBorderRadius]: globalRefs$r.radius.md,
|
4624
|
+
[vars$D.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
4625
|
+
[vars$D.trackHeight]: checkboxHeight,
|
4626
|
+
|
4627
|
+
[vars$D.knobSize]: `calc(1em - ${knobMargin})`,
|
4628
|
+
[vars$D.knobRadius]: '50%',
|
4629
|
+
[vars$D.knobTopOffset]: '1px',
|
4630
|
+
[vars$D.knobLeftOffset]: knobMargin,
|
4631
|
+
[vars$D.knobColor]: refs.labelTextColor,
|
4632
|
+
[vars$D.knobTransitionDuration]: '0.3s',
|
4633
|
+
|
4634
|
+
[vars$D.labelTextColor]: refs.labelTextColor,
|
4635
|
+
[vars$D.labelFontWeight]: '400',
|
4636
|
+
[vars$D.labelLineHeight]: '1.35em',
|
4637
|
+
[vars$D.labelSpacing]: '1em',
|
4638
|
+
[vars$D.labelRequiredIndicator]: refs.requiredIndicator,
|
4639
|
+
[vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
|
4640
4640
|
|
4641
4641
|
_checked: {
|
4642
|
-
[vars$
|
4643
|
-
[vars$
|
4644
|
-
[vars$
|
4645
|
-
[vars$
|
4642
|
+
[vars$D.trackBorderColor]: refs.borderColor,
|
4643
|
+
[vars$D.knobLeftOffset]: `calc(100% - var(${vars$D.knobSize}) - ${knobMargin})`,
|
4644
|
+
[vars$D.knobColor]: refs.valueTextColor,
|
4645
|
+
[vars$D.knobTextColor]: refs.valueTextColor,
|
4646
4646
|
},
|
4647
4647
|
|
4648
4648
|
_disabled: {
|
4649
|
-
[vars$
|
4650
|
-
[vars$
|
4651
|
-
[vars$
|
4652
|
-
[vars$
|
4649
|
+
[vars$D.knobColor]: globalRefs$r.colors.surface.light,
|
4650
|
+
[vars$D.trackBorderColor]: globalRefs$r.colors.surface.light,
|
4651
|
+
[vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
|
4652
|
+
[vars$D.labelTextColor]: refs.labelTextColor,
|
4653
4653
|
_checked: {
|
4654
|
-
[vars$
|
4655
|
-
[vars$
|
4654
|
+
[vars$D.knobColor]: globalRefs$r.colors.surface.light,
|
4655
|
+
[vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
|
4656
4656
|
},
|
4657
4657
|
},
|
4658
4658
|
|
4659
4659
|
_invalid: {
|
4660
|
-
[vars$
|
4661
|
-
[vars$
|
4660
|
+
[vars$D.trackBorderColor]: globalRefs$r.colors.error.main,
|
4661
|
+
[vars$D.knobColor]: globalRefs$r.colors.error.main,
|
4662
4662
|
},
|
4663
4663
|
};
|
4664
4664
|
|
4665
4665
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
4666
4666
|
__proto__: null,
|
4667
4667
|
default: switchToggle,
|
4668
|
-
vars: vars$
|
4668
|
+
vars: vars$D
|
4669
4669
|
});
|
4670
4670
|
|
4671
|
-
const componentName$
|
4671
|
+
const componentName$K = getComponentName('container');
|
4672
4672
|
|
4673
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
4673
|
+
class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
|
4674
4674
|
constructor() {
|
4675
4675
|
super();
|
4676
4676
|
|
@@ -4723,9 +4723,9 @@ const ContainerClass = compose(
|
|
4723
4723
|
componentNameValidationMixin
|
4724
4724
|
)(RawContainer);
|
4725
4725
|
|
4726
|
-
const globalRefs$
|
4726
|
+
const globalRefs$q = getThemeRefs(globals);
|
4727
4727
|
|
4728
|
-
const compVars$
|
4728
|
+
const compVars$5 = ContainerClass.cssVarList;
|
4729
4729
|
|
4730
4730
|
const verticalAlignment = {
|
4731
4731
|
start: { verticalAlignment: 'start' },
|
@@ -4739,108 +4739,108 @@ const horizontalAlignment = {
|
|
4739
4739
|
end: { horizontalAlignment: 'end' },
|
4740
4740
|
};
|
4741
4741
|
|
4742
|
-
const [helperTheme$
|
4742
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
|
4743
4743
|
{
|
4744
4744
|
verticalAlignment,
|
4745
4745
|
horizontalAlignment,
|
4746
4746
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
4747
4747
|
},
|
4748
|
-
componentName$
|
4748
|
+
componentName$K
|
4749
4749
|
);
|
4750
4750
|
|
4751
|
-
const { shadowColor: shadowColor$
|
4751
|
+
const { shadowColor: shadowColor$2 } = helperRefs$3;
|
4752
4752
|
|
4753
4753
|
const container = {
|
4754
|
-
...helperTheme$
|
4754
|
+
...helperTheme$3,
|
4755
4755
|
|
4756
|
-
[compVars$
|
4757
|
-
[compVars$
|
4758
|
-
[compVars$
|
4759
|
-
[compVars$
|
4760
|
-
[compVars$
|
4761
|
-
[compVars$
|
4762
|
-
[compVars$
|
4756
|
+
[compVars$5.itemsGrow]: '0',
|
4757
|
+
[compVars$5.hostWidth]: '100%',
|
4758
|
+
[compVars$5.boxShadow]: 'none',
|
4759
|
+
[compVars$5.backgroundColor]: globalRefs$q.colors.surface.main,
|
4760
|
+
[compVars$5.color]: globalRefs$q.colors.surface.contrast,
|
4761
|
+
[compVars$5.borderRadius]: '0px',
|
4762
|
+
[compVars$5.hostDirection]: globalRefs$q.direction,
|
4763
4763
|
|
4764
4764
|
verticalPadding: {
|
4765
|
-
sm: { [compVars$
|
4766
|
-
md: { [compVars$
|
4767
|
-
lg: { [compVars$
|
4765
|
+
sm: { [compVars$5.verticalPadding]: '5px' },
|
4766
|
+
md: { [compVars$5.verticalPadding]: '10px' },
|
4767
|
+
lg: { [compVars$5.verticalPadding]: '20px' },
|
4768
4768
|
},
|
4769
4769
|
|
4770
4770
|
horizontalPadding: {
|
4771
|
-
sm: { [compVars$
|
4772
|
-
md: { [compVars$
|
4773
|
-
lg: { [compVars$
|
4771
|
+
sm: { [compVars$5.horizontalPadding]: '5px' },
|
4772
|
+
md: { [compVars$5.horizontalPadding]: '10px' },
|
4773
|
+
lg: { [compVars$5.horizontalPadding]: '20px' },
|
4774
4774
|
},
|
4775
4775
|
|
4776
4776
|
direction: {
|
4777
4777
|
row: {
|
4778
|
-
[compVars$
|
4779
|
-
[compVars$
|
4780
|
-
[compVars$
|
4781
|
-
[compVars$
|
4778
|
+
[compVars$5.flexDirection]: 'row',
|
4779
|
+
[compVars$5.alignItems]: helperRefs$3.verticalAlignment,
|
4780
|
+
[compVars$5.justifyContent]: helperRefs$3.horizontalAlignment,
|
4781
|
+
[compVars$5.flexWrap]: 'wrap',
|
4782
4782
|
horizontalAlignment: {
|
4783
4783
|
spaceBetween: {
|
4784
|
-
[helperVars$
|
4784
|
+
[helperVars$3.horizontalAlignment]: 'space-between',
|
4785
4785
|
},
|
4786
4786
|
},
|
4787
4787
|
},
|
4788
4788
|
column: {
|
4789
|
-
[compVars$
|
4790
|
-
[compVars$
|
4791
|
-
[compVars$
|
4789
|
+
[compVars$5.flexDirection]: 'column',
|
4790
|
+
[compVars$5.alignItems]: helperRefs$3.horizontalAlignment,
|
4791
|
+
[compVars$5.justifyContent]: helperRefs$3.verticalAlignment,
|
4792
4792
|
verticalAlignment: {
|
4793
4793
|
spaceBetween: {
|
4794
|
-
[helperVars$
|
4794
|
+
[helperVars$3.verticalAlignment]: 'space-between',
|
4795
4795
|
},
|
4796
4796
|
},
|
4797
4797
|
},
|
4798
4798
|
},
|
4799
4799
|
|
4800
4800
|
spaceBetween: {
|
4801
|
-
sm: { [compVars$
|
4802
|
-
md: { [compVars$
|
4803
|
-
lg: { [compVars$
|
4801
|
+
sm: { [compVars$5.gap]: '10px' },
|
4802
|
+
md: { [compVars$5.gap]: '20px' },
|
4803
|
+
lg: { [compVars$5.gap]: '30px' },
|
4804
4804
|
},
|
4805
4805
|
|
4806
4806
|
shadow: {
|
4807
4807
|
sm: {
|
4808
|
-
[compVars$
|
4808
|
+
[compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.sm} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.sm} ${shadowColor$2}`,
|
4809
4809
|
},
|
4810
4810
|
md: {
|
4811
|
-
[compVars$
|
4811
|
+
[compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$2}`,
|
4812
4812
|
},
|
4813
4813
|
lg: {
|
4814
|
-
[compVars$
|
4814
|
+
[compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$2}`,
|
4815
4815
|
},
|
4816
4816
|
xl: {
|
4817
|
-
[compVars$
|
4817
|
+
[compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$2}`,
|
4818
4818
|
},
|
4819
4819
|
'2xl': {
|
4820
|
-
[helperVars$
|
4821
|
-
[compVars$
|
4820
|
+
[helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
4821
|
+
[compVars$5.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$2}`,
|
4822
4822
|
},
|
4823
4823
|
},
|
4824
4824
|
|
4825
4825
|
borderRadius: {
|
4826
|
-
sm: { [compVars$
|
4827
|
-
md: { [compVars$
|
4828
|
-
lg: { [compVars$
|
4829
|
-
xl: { [compVars$
|
4830
|
-
'2xl': { [compVars$
|
4831
|
-
'3xl': { [compVars$
|
4826
|
+
sm: { [compVars$5.borderRadius]: globalRefs$q.radius.sm },
|
4827
|
+
md: { [compVars$5.borderRadius]: globalRefs$q.radius.md },
|
4828
|
+
lg: { [compVars$5.borderRadius]: globalRefs$q.radius.lg },
|
4829
|
+
xl: { [compVars$5.borderRadius]: globalRefs$q.radius.xl },
|
4830
|
+
'2xl': { [compVars$5.borderRadius]: globalRefs$q.radius['2xl'] },
|
4831
|
+
'3xl': { [compVars$5.borderRadius]: globalRefs$q.radius['3xl'] },
|
4832
4832
|
},
|
4833
4833
|
};
|
4834
4834
|
|
4835
|
-
const vars$
|
4836
|
-
...compVars$
|
4837
|
-
...helperVars$
|
4835
|
+
const vars$C = {
|
4836
|
+
...compVars$5,
|
4837
|
+
...helperVars$3,
|
4838
4838
|
};
|
4839
4839
|
|
4840
4840
|
var container$1 = /*#__PURE__*/Object.freeze({
|
4841
4841
|
__proto__: null,
|
4842
4842
|
default: container,
|
4843
|
-
vars: vars$
|
4843
|
+
vars: vars$C
|
4844
4844
|
});
|
4845
4845
|
|
4846
4846
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4893,69 +4893,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4893
4893
|
return CssVarImageClass;
|
4894
4894
|
};
|
4895
4895
|
|
4896
|
-
const componentName$
|
4896
|
+
const componentName$J = getComponentName('logo');
|
4897
4897
|
|
4898
4898
|
const LogoClass = createCssVarImageClass({
|
4899
|
-
componentName: componentName$
|
4899
|
+
componentName: componentName$J,
|
4900
4900
|
varName: 'url',
|
4901
4901
|
fallbackVarName: 'fallbackUrl',
|
4902
4902
|
});
|
4903
4903
|
|
4904
|
-
const vars$
|
4904
|
+
const vars$B = LogoClass.cssVarList;
|
4905
4905
|
|
4906
4906
|
const logo$2 = {
|
4907
|
-
[vars$
|
4907
|
+
[vars$B.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4908
4908
|
};
|
4909
4909
|
|
4910
4910
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
4911
4911
|
__proto__: null,
|
4912
4912
|
default: logo$2,
|
4913
|
-
vars: vars$
|
4913
|
+
vars: vars$B
|
4914
4914
|
});
|
4915
4915
|
|
4916
|
-
const componentName$
|
4916
|
+
const componentName$I = getComponentName('totp-image');
|
4917
4917
|
|
4918
4918
|
const TotpImageClass = createCssVarImageClass({
|
4919
|
-
componentName: componentName$
|
4919
|
+
componentName: componentName$I,
|
4920
4920
|
varName: 'url',
|
4921
4921
|
fallbackVarName: 'fallbackUrl',
|
4922
4922
|
});
|
4923
4923
|
|
4924
|
-
const vars$
|
4924
|
+
const vars$A = TotpImageClass.cssVarList;
|
4925
4925
|
|
4926
4926
|
const logo$1 = {
|
4927
|
-
[vars$
|
4927
|
+
[vars$A.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4928
4928
|
};
|
4929
4929
|
|
4930
4930
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4931
4931
|
__proto__: null,
|
4932
4932
|
default: logo$1,
|
4933
|
-
vars: vars$
|
4933
|
+
vars: vars$A
|
4934
4934
|
});
|
4935
4935
|
|
4936
|
-
const componentName$
|
4936
|
+
const componentName$H = getComponentName('notp-image');
|
4937
4937
|
|
4938
4938
|
const NotpImageClass = createCssVarImageClass({
|
4939
|
-
componentName: componentName$
|
4939
|
+
componentName: componentName$H,
|
4940
4940
|
varName: 'url',
|
4941
4941
|
fallbackVarName: 'fallbackUrl',
|
4942
4942
|
});
|
4943
4943
|
|
4944
|
-
const vars$
|
4944
|
+
const vars$z = NotpImageClass.cssVarList;
|
4945
4945
|
|
4946
4946
|
const logo = {
|
4947
|
-
[vars$
|
4947
|
+
[vars$z.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
4948
4948
|
};
|
4949
4949
|
|
4950
4950
|
var notpImage = /*#__PURE__*/Object.freeze({
|
4951
4951
|
__proto__: null,
|
4952
4952
|
default: logo,
|
4953
|
-
vars: vars$
|
4953
|
+
vars: vars$z
|
4954
4954
|
});
|
4955
4955
|
|
4956
|
-
const componentName$
|
4956
|
+
const componentName$G = getComponentName('text');
|
4957
4957
|
|
4958
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4958
|
+
class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
|
4959
4959
|
constructor() {
|
4960
4960
|
super();
|
4961
4961
|
|
@@ -5012,95 +5012,95 @@ const TextClass = compose(
|
|
5012
5012
|
componentNameValidationMixin
|
5013
5013
|
)(RawText);
|
5014
5014
|
|
5015
|
-
const globalRefs$
|
5016
|
-
const vars$
|
5015
|
+
const globalRefs$p = getThemeRefs(globals);
|
5016
|
+
const vars$y = TextClass.cssVarList;
|
5017
5017
|
|
5018
5018
|
const text$2 = {
|
5019
|
-
[vars$
|
5020
|
-
[vars$
|
5021
|
-
[vars$
|
5022
|
-
[vars$
|
5019
|
+
[vars$y.hostDirection]: globalRefs$p.direction,
|
5020
|
+
[vars$y.textLineHeight]: '1.35em',
|
5021
|
+
[vars$y.textAlign]: 'left',
|
5022
|
+
[vars$y.textColor]: globalRefs$p.colors.surface.dark,
|
5023
5023
|
|
5024
5024
|
variant: {
|
5025
5025
|
h1: {
|
5026
|
-
[vars$
|
5027
|
-
[vars$
|
5028
|
-
[vars$
|
5026
|
+
[vars$y.fontSize]: globalRefs$p.typography.h1.size,
|
5027
|
+
[vars$y.fontWeight]: globalRefs$p.typography.h1.weight,
|
5028
|
+
[vars$y.fontFamily]: globalRefs$p.typography.h1.font,
|
5029
5029
|
},
|
5030
5030
|
h2: {
|
5031
|
-
[vars$
|
5032
|
-
[vars$
|
5033
|
-
[vars$
|
5031
|
+
[vars$y.fontSize]: globalRefs$p.typography.h2.size,
|
5032
|
+
[vars$y.fontWeight]: globalRefs$p.typography.h2.weight,
|
5033
|
+
[vars$y.fontFamily]: globalRefs$p.typography.h2.font,
|
5034
5034
|
},
|
5035
5035
|
h3: {
|
5036
|
-
[vars$
|
5037
|
-
[vars$
|
5038
|
-
[vars$
|
5036
|
+
[vars$y.fontSize]: globalRefs$p.typography.h3.size,
|
5037
|
+
[vars$y.fontWeight]: globalRefs$p.typography.h3.weight,
|
5038
|
+
[vars$y.fontFamily]: globalRefs$p.typography.h3.font,
|
5039
5039
|
},
|
5040
5040
|
subtitle1: {
|
5041
|
-
[vars$
|
5042
|
-
[vars$
|
5043
|
-
[vars$
|
5041
|
+
[vars$y.fontSize]: globalRefs$p.typography.subtitle1.size,
|
5042
|
+
[vars$y.fontWeight]: globalRefs$p.typography.subtitle1.weight,
|
5043
|
+
[vars$y.fontFamily]: globalRefs$p.typography.subtitle1.font,
|
5044
5044
|
},
|
5045
5045
|
subtitle2: {
|
5046
|
-
[vars$
|
5047
|
-
[vars$
|
5048
|
-
[vars$
|
5046
|
+
[vars$y.fontSize]: globalRefs$p.typography.subtitle2.size,
|
5047
|
+
[vars$y.fontWeight]: globalRefs$p.typography.subtitle2.weight,
|
5048
|
+
[vars$y.fontFamily]: globalRefs$p.typography.subtitle2.font,
|
5049
5049
|
},
|
5050
5050
|
body1: {
|
5051
|
-
[vars$
|
5052
|
-
[vars$
|
5053
|
-
[vars$
|
5051
|
+
[vars$y.fontSize]: globalRefs$p.typography.body1.size,
|
5052
|
+
[vars$y.fontWeight]: globalRefs$p.typography.body1.weight,
|
5053
|
+
[vars$y.fontFamily]: globalRefs$p.typography.body1.font,
|
5054
5054
|
},
|
5055
5055
|
body2: {
|
5056
|
-
[vars$
|
5057
|
-
[vars$
|
5058
|
-
[vars$
|
5056
|
+
[vars$y.fontSize]: globalRefs$p.typography.body2.size,
|
5057
|
+
[vars$y.fontWeight]: globalRefs$p.typography.body2.weight,
|
5058
|
+
[vars$y.fontFamily]: globalRefs$p.typography.body2.font,
|
5059
5059
|
},
|
5060
5060
|
},
|
5061
5061
|
|
5062
5062
|
mode: {
|
5063
5063
|
primary: {
|
5064
|
-
[vars$
|
5064
|
+
[vars$y.textColor]: globalRefs$p.colors.surface.contrast,
|
5065
5065
|
},
|
5066
5066
|
secondary: {
|
5067
|
-
[vars$
|
5067
|
+
[vars$y.textColor]: globalRefs$p.colors.surface.dark,
|
5068
5068
|
},
|
5069
5069
|
error: {
|
5070
|
-
[vars$
|
5070
|
+
[vars$y.textColor]: globalRefs$p.colors.error.main,
|
5071
5071
|
},
|
5072
5072
|
success: {
|
5073
|
-
[vars$
|
5073
|
+
[vars$y.textColor]: globalRefs$p.colors.success.main,
|
5074
5074
|
},
|
5075
5075
|
},
|
5076
5076
|
|
5077
5077
|
textAlign: {
|
5078
|
-
right: { [vars$
|
5079
|
-
left: { [vars$
|
5080
|
-
center: { [vars$
|
5078
|
+
right: { [vars$y.textAlign]: 'right' },
|
5079
|
+
left: { [vars$y.textAlign]: 'left' },
|
5080
|
+
center: { [vars$y.textAlign]: 'center' },
|
5081
5081
|
},
|
5082
5082
|
|
5083
5083
|
_fullWidth: {
|
5084
|
-
[vars$
|
5084
|
+
[vars$y.hostWidth]: '100%',
|
5085
5085
|
},
|
5086
5086
|
|
5087
5087
|
_italic: {
|
5088
|
-
[vars$
|
5088
|
+
[vars$y.fontStyle]: 'italic',
|
5089
5089
|
},
|
5090
5090
|
|
5091
5091
|
_uppercase: {
|
5092
|
-
[vars$
|
5092
|
+
[vars$y.textTransform]: 'uppercase',
|
5093
5093
|
},
|
5094
5094
|
|
5095
5095
|
_lowercase: {
|
5096
|
-
[vars$
|
5096
|
+
[vars$y.textTransform]: 'lowercase',
|
5097
5097
|
},
|
5098
5098
|
};
|
5099
5099
|
|
5100
5100
|
var text$3 = /*#__PURE__*/Object.freeze({
|
5101
5101
|
__proto__: null,
|
5102
5102
|
default: text$2,
|
5103
|
-
vars: vars$
|
5103
|
+
vars: vars$y
|
5104
5104
|
});
|
5105
5105
|
|
5106
5106
|
const disableRules = [
|
@@ -5126,9 +5126,9 @@ const decodeHTML = (html) => {
|
|
5126
5126
|
|
5127
5127
|
/* eslint-disable no-param-reassign */
|
5128
5128
|
|
5129
|
-
const componentName$
|
5129
|
+
const componentName$F = getComponentName('enriched-text');
|
5130
5130
|
|
5131
|
-
class EnrichedText extends createBaseClass({ componentName: componentName$
|
5131
|
+
class EnrichedText extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
|
5132
5132
|
#origLinkRenderer;
|
5133
5133
|
|
5134
5134
|
#origEmRenderer;
|
@@ -5318,9 +5318,9 @@ const EnrichedTextClass = compose(
|
|
5318
5318
|
componentNameValidationMixin
|
5319
5319
|
)(EnrichedText);
|
5320
5320
|
|
5321
|
-
const componentName$
|
5321
|
+
const componentName$E = getComponentName('link');
|
5322
5322
|
|
5323
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
5323
|
+
class RawLink extends createBaseClass({ componentName: componentName$E, baseSelector: ':host a' }) {
|
5324
5324
|
constructor() {
|
5325
5325
|
super();
|
5326
5326
|
|
@@ -5384,38 +5384,38 @@ const LinkClass = compose(
|
|
5384
5384
|
componentNameValidationMixin
|
5385
5385
|
)(RawLink);
|
5386
5386
|
|
5387
|
-
const globalRefs$
|
5388
|
-
const vars$
|
5387
|
+
const globalRefs$o = getThemeRefs(globals);
|
5388
|
+
const vars$x = LinkClass.cssVarList;
|
5389
5389
|
|
5390
5390
|
const link$1 = {
|
5391
|
-
[vars$
|
5392
|
-
[vars$
|
5391
|
+
[vars$x.hostDirection]: globalRefs$o.direction,
|
5392
|
+
[vars$x.cursor]: 'pointer',
|
5393
5393
|
|
5394
|
-
[vars$
|
5394
|
+
[vars$x.textColor]: globalRefs$o.colors.primary.main,
|
5395
5395
|
|
5396
5396
|
textAlign: {
|
5397
|
-
right: { [vars$
|
5398
|
-
left: { [vars$
|
5399
|
-
center: { [vars$
|
5397
|
+
right: { [vars$x.textAlign]: 'right' },
|
5398
|
+
left: { [vars$x.textAlign]: 'left' },
|
5399
|
+
center: { [vars$x.textAlign]: 'center' },
|
5400
5400
|
},
|
5401
5401
|
|
5402
5402
|
_fullWidth: {
|
5403
|
-
[vars$
|
5403
|
+
[vars$x.hostWidth]: '100%',
|
5404
5404
|
},
|
5405
5405
|
|
5406
5406
|
_hover: {
|
5407
|
-
[vars$
|
5407
|
+
[vars$x.textDecoration]: 'underline',
|
5408
5408
|
},
|
5409
5409
|
|
5410
5410
|
mode: {
|
5411
5411
|
secondary: {
|
5412
|
-
[vars$
|
5412
|
+
[vars$x.textColor]: globalRefs$o.colors.secondary.main,
|
5413
5413
|
},
|
5414
5414
|
error: {
|
5415
|
-
[vars$
|
5415
|
+
[vars$x.textColor]: globalRefs$o.colors.error.main,
|
5416
5416
|
},
|
5417
5417
|
success: {
|
5418
|
-
[vars$
|
5418
|
+
[vars$x.textColor]: globalRefs$o.colors.success.main,
|
5419
5419
|
},
|
5420
5420
|
},
|
5421
5421
|
};
|
@@ -5423,41 +5423,41 @@ const link$1 = {
|
|
5423
5423
|
var link$2 = /*#__PURE__*/Object.freeze({
|
5424
5424
|
__proto__: null,
|
5425
5425
|
default: link$1,
|
5426
|
-
vars: vars$
|
5426
|
+
vars: vars$x
|
5427
5427
|
});
|
5428
5428
|
|
5429
|
-
const globalRefs$
|
5430
|
-
const vars$
|
5429
|
+
const globalRefs$n = getThemeRefs(globals);
|
5430
|
+
const vars$w = EnrichedTextClass.cssVarList;
|
5431
5431
|
|
5432
5432
|
const enrichedText = {
|
5433
|
-
[vars$
|
5434
|
-
[vars$
|
5433
|
+
[vars$w.hostDirection]: globalRefs$n.direction,
|
5434
|
+
[vars$w.hostWidth]: useVar(vars$y.hostWidth),
|
5435
5435
|
|
5436
|
-
[vars$
|
5437
|
-
[vars$
|
5438
|
-
[vars$
|
5436
|
+
[vars$w.textLineHeight]: useVar(vars$y.textLineHeight),
|
5437
|
+
[vars$w.textColor]: useVar(vars$y.textColor),
|
5438
|
+
[vars$w.textAlign]: useVar(vars$y.textAlign),
|
5439
5439
|
|
5440
|
-
[vars$
|
5441
|
-
[vars$
|
5442
|
-
[vars$
|
5440
|
+
[vars$w.fontSize]: useVar(vars$y.fontSize),
|
5441
|
+
[vars$w.fontWeight]: useVar(vars$y.fontWeight),
|
5442
|
+
[vars$w.fontFamily]: useVar(vars$y.fontFamily),
|
5443
5443
|
|
5444
|
-
[vars$
|
5445
|
-
[vars$
|
5446
|
-
[vars$
|
5444
|
+
[vars$w.linkColor]: useVar(vars$x.textColor),
|
5445
|
+
[vars$w.linkTextDecoration]: 'none',
|
5446
|
+
[vars$w.linkHoverTextDecoration]: 'underline',
|
5447
5447
|
|
5448
|
-
[vars$
|
5449
|
-
[vars$
|
5450
|
-
[vars$
|
5448
|
+
[vars$w.fontWeightBold]: '900',
|
5449
|
+
[vars$w.minWidth]: '0.25em',
|
5450
|
+
[vars$w.minHeight]: '1.35em',
|
5451
5451
|
};
|
5452
5452
|
|
5453
5453
|
var enrichedText$1 = /*#__PURE__*/Object.freeze({
|
5454
5454
|
__proto__: null,
|
5455
5455
|
default: enrichedText,
|
5456
|
-
vars: vars$
|
5456
|
+
vars: vars$w
|
5457
5457
|
});
|
5458
5458
|
|
5459
|
-
const componentName$
|
5460
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
5459
|
+
const componentName$D = getComponentName('divider');
|
5460
|
+
class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
|
5461
5461
|
constructor() {
|
5462
5462
|
super();
|
5463
5463
|
|
@@ -5556,65 +5556,65 @@ const DividerClass = compose(
|
|
5556
5556
|
componentNameValidationMixin
|
5557
5557
|
)(RawDivider);
|
5558
5558
|
|
5559
|
-
const globalRefs$
|
5560
|
-
const compVars$
|
5559
|
+
const globalRefs$m = getThemeRefs(globals);
|
5560
|
+
const compVars$4 = DividerClass.cssVarList;
|
5561
5561
|
|
5562
|
-
const [helperTheme$
|
5562
|
+
const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
5563
5563
|
{
|
5564
5564
|
thickness: '2px',
|
5565
5565
|
spacing: '10px',
|
5566
5566
|
},
|
5567
|
-
componentName$
|
5567
|
+
componentName$D
|
5568
5568
|
);
|
5569
5569
|
|
5570
5570
|
const divider = {
|
5571
|
-
...helperTheme$
|
5571
|
+
...helperTheme$2,
|
5572
5572
|
|
5573
|
-
[compVars$
|
5574
|
-
[compVars$
|
5575
|
-
[compVars$
|
5576
|
-
[compVars$
|
5577
|
-
[compVars$
|
5578
|
-
[compVars$
|
5579
|
-
[compVars$
|
5580
|
-
[compVars$
|
5581
|
-
[compVars$
|
5582
|
-
[compVars$
|
5583
|
-
[compVars$
|
5584
|
-
[compVars$
|
5573
|
+
[compVars$4.hostDirection]: globalRefs$m.direction,
|
5574
|
+
[compVars$4.alignItems]: 'center',
|
5575
|
+
[compVars$4.flexDirection]: 'row',
|
5576
|
+
[compVars$4.alignSelf]: 'stretch',
|
5577
|
+
[compVars$4.hostWidth]: '100%',
|
5578
|
+
[compVars$4.stripeColor]: globalRefs$m.colors.surface.light,
|
5579
|
+
[compVars$4.stripeColorOpacity]: '0.5',
|
5580
|
+
[compVars$4.stripeHorizontalThickness]: helperRefs$2.thickness,
|
5581
|
+
[compVars$4.labelTextWidth]: 'fit-content',
|
5582
|
+
[compVars$4.labelTextMaxWidth]: 'calc(100% - 100px)',
|
5583
|
+
[compVars$4.labelTextHorizontalSpacing]: helperRefs$2.spacing,
|
5584
|
+
[compVars$4.textAlign]: 'center',
|
5585
5585
|
|
5586
5586
|
_vertical: {
|
5587
|
-
[compVars$
|
5588
|
-
[compVars$
|
5589
|
-
[compVars$
|
5590
|
-
[compVars$
|
5591
|
-
[compVars$
|
5592
|
-
[compVars$
|
5593
|
-
[compVars$
|
5594
|
-
[compVars$
|
5587
|
+
[compVars$4.minHeight]: '200px',
|
5588
|
+
[compVars$4.flexDirection]: 'column',
|
5589
|
+
[compVars$4.hostWidth]: 'fit-content',
|
5590
|
+
[compVars$4.hostPadding]: `0 calc(${helperRefs$2.thickness} * 3)`,
|
5591
|
+
[compVars$4.stripeVerticalThickness]: helperRefs$2.thickness,
|
5592
|
+
[compVars$4.labelTextWidth]: 'fit-content',
|
5593
|
+
[compVars$4.labelTextMaxWidth]: '100%',
|
5594
|
+
[compVars$4.labelTextVerticalSpacing]: helperRefs$2.spacing,
|
5595
5595
|
},
|
5596
5596
|
};
|
5597
5597
|
|
5598
|
-
const vars$
|
5599
|
-
...compVars$
|
5600
|
-
...helperVars$
|
5598
|
+
const vars$v = {
|
5599
|
+
...compVars$4,
|
5600
|
+
...helperVars$2,
|
5601
5601
|
};
|
5602
5602
|
|
5603
5603
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
5604
5604
|
__proto__: null,
|
5605
5605
|
default: divider,
|
5606
|
-
vars: vars$
|
5606
|
+
vars: vars$v
|
5607
5607
|
});
|
5608
5608
|
|
5609
5609
|
/* eslint-disable no-param-reassign */
|
5610
5610
|
|
5611
|
-
const componentName$
|
5611
|
+
const componentName$C = getComponentName('passcode-internal');
|
5612
5612
|
|
5613
|
-
createBaseInputClass({ componentName: componentName$
|
5613
|
+
createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
|
5614
5614
|
|
5615
|
-
const componentName$
|
5615
|
+
const componentName$B = getComponentName('loader-radial');
|
5616
5616
|
|
5617
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
5617
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
|
5618
5618
|
constructor() {
|
5619
5619
|
super();
|
5620
5620
|
|
@@ -5658,11 +5658,11 @@ const LoaderRadialClass = compose(
|
|
5658
5658
|
componentNameValidationMixin
|
5659
5659
|
)(RawLoaderRadial);
|
5660
5660
|
|
5661
|
-
const componentName$
|
5661
|
+
const componentName$A = getComponentName('passcode');
|
5662
5662
|
|
5663
5663
|
const observedAttributes$3 = ['digits'];
|
5664
5664
|
|
5665
|
-
const customMixin$
|
5665
|
+
const customMixin$9 = (superclass) =>
|
5666
5666
|
class PasscodeMixinClass extends superclass {
|
5667
5667
|
static get observedAttributes() {
|
5668
5668
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
@@ -5677,17 +5677,17 @@ const customMixin$7 = (superclass) =>
|
|
5677
5677
|
const template = document.createElement('template');
|
5678
5678
|
|
5679
5679
|
template.innerHTML = `
|
5680
|
-
<${componentName$
|
5680
|
+
<${componentName$C}
|
5681
5681
|
bordered="true"
|
5682
5682
|
name="code"
|
5683
5683
|
tabindex="-1"
|
5684
5684
|
slot="input"
|
5685
|
-
><slot></slot></${componentName$
|
5685
|
+
><slot></slot></${componentName$C}>
|
5686
5686
|
`;
|
5687
5687
|
|
5688
5688
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5689
5689
|
|
5690
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5690
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$C);
|
5691
5691
|
|
5692
5692
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
5693
5693
|
}
|
@@ -5758,7 +5758,7 @@ const PasscodeClass = compose(
|
|
5758
5758
|
draggableMixin,
|
5759
5759
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5760
5760
|
componentNameValidationMixin,
|
5761
|
-
customMixin$
|
5761
|
+
customMixin$9
|
5762
5762
|
)(
|
5763
5763
|
createProxy({
|
5764
5764
|
slots: [],
|
@@ -5839,56 +5839,56 @@ const PasscodeClass = compose(
|
|
5839
5839
|
${resetInputCursor('vaadin-text-field')}
|
5840
5840
|
`,
|
5841
5841
|
excludeAttrsSync: ['tabindex'],
|
5842
|
-
componentName: componentName$
|
5842
|
+
componentName: componentName$A,
|
5843
5843
|
})
|
5844
5844
|
);
|
5845
5845
|
|
5846
|
-
const vars$
|
5846
|
+
const vars$u = PasscodeClass.cssVarList;
|
5847
5847
|
|
5848
5848
|
const passcode = {
|
5849
|
-
[vars$
|
5850
|
-
[vars$
|
5851
|
-
[vars$
|
5852
|
-
[vars$
|
5853
|
-
[vars$
|
5854
|
-
[vars$
|
5855
|
-
[vars$
|
5856
|
-
[vars$
|
5857
|
-
[vars$
|
5858
|
-
[vars$
|
5859
|
-
[vars$
|
5860
|
-
[vars$
|
5861
|
-
[vars$
|
5862
|
-
[vars$
|
5863
|
-
[vars$
|
5849
|
+
[vars$u.hostDirection]: refs.direction,
|
5850
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
5851
|
+
[vars$u.fontSize]: refs.fontSize,
|
5852
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
5853
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
5854
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
5855
|
+
[vars$u.digitValueTextColor]: refs.valueTextColor,
|
5856
|
+
[vars$u.digitPadding]: '0',
|
5857
|
+
[vars$u.digitTextAlign]: 'center',
|
5858
|
+
[vars$u.digitSpacing]: '4px',
|
5859
|
+
[vars$u.hostWidth]: refs.width,
|
5860
|
+
[vars$u.digitOutlineColor]: 'transparent',
|
5861
|
+
[vars$u.digitOutlineWidth]: refs.outlineWidth,
|
5862
|
+
[vars$u.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
5863
|
+
[vars$u.digitSize]: refs.inputHeight,
|
5864
5864
|
|
5865
5865
|
size: {
|
5866
|
-
xs: { [vars$
|
5867
|
-
sm: { [vars$
|
5868
|
-
md: { [vars$
|
5869
|
-
lg: { [vars$
|
5866
|
+
xs: { [vars$u.spinnerSize]: '15px' },
|
5867
|
+
sm: { [vars$u.spinnerSize]: '20px' },
|
5868
|
+
md: { [vars$u.spinnerSize]: '20px' },
|
5869
|
+
lg: { [vars$u.spinnerSize]: '20px' },
|
5870
5870
|
},
|
5871
5871
|
|
5872
5872
|
_hideCursor: {
|
5873
|
-
[vars$
|
5873
|
+
[vars$u.digitCaretTextColor]: 'transparent',
|
5874
5874
|
},
|
5875
5875
|
|
5876
5876
|
_loading: {
|
5877
|
-
[vars$
|
5877
|
+
[vars$u.overlayOpacity]: refs.overlayOpacity,
|
5878
5878
|
},
|
5879
5879
|
};
|
5880
5880
|
|
5881
5881
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
5882
5882
|
__proto__: null,
|
5883
5883
|
default: passcode,
|
5884
|
-
vars: vars$
|
5884
|
+
vars: vars$u
|
5885
5885
|
});
|
5886
5886
|
|
5887
|
-
const componentName$
|
5887
|
+
const componentName$z = getComponentName('loader-linear');
|
5888
5888
|
|
5889
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
5889
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
|
5890
5890
|
static get componentName() {
|
5891
|
-
return componentName$
|
5891
|
+
return componentName$z;
|
5892
5892
|
}
|
5893
5893
|
|
5894
5894
|
constructor() {
|
@@ -5949,107 +5949,107 @@ const LoaderLinearClass = compose(
|
|
5949
5949
|
componentNameValidationMixin
|
5950
5950
|
)(RawLoaderLinear);
|
5951
5951
|
|
5952
|
-
const globalRefs$
|
5953
|
-
const vars$
|
5952
|
+
const globalRefs$l = getThemeRefs(globals);
|
5953
|
+
const vars$t = LoaderLinearClass.cssVarList;
|
5954
5954
|
|
5955
5955
|
const loaderLinear = {
|
5956
|
-
[vars$
|
5957
|
-
[vars$
|
5956
|
+
[vars$t.hostDisplay]: 'inline-block',
|
5957
|
+
[vars$t.hostWidth]: '100%',
|
5958
5958
|
|
5959
|
-
[vars$
|
5960
|
-
[vars$
|
5959
|
+
[vars$t.barColor]: globalRefs$l.colors.surface.contrast,
|
5960
|
+
[vars$t.barWidth]: '20%',
|
5961
5961
|
|
5962
|
-
[vars$
|
5963
|
-
[vars$
|
5962
|
+
[vars$t.barBackgroundColor]: globalRefs$l.colors.surface.light,
|
5963
|
+
[vars$t.barBorderRadius]: '4px',
|
5964
5964
|
|
5965
|
-
[vars$
|
5966
|
-
[vars$
|
5967
|
-
[vars$
|
5968
|
-
[vars$
|
5965
|
+
[vars$t.animationDuration]: '2s',
|
5966
|
+
[vars$t.animationTimingFunction]: 'linear',
|
5967
|
+
[vars$t.animationIterationCount]: 'infinite',
|
5968
|
+
[vars$t.verticalPadding]: '0.25em',
|
5969
5969
|
|
5970
5970
|
size: {
|
5971
|
-
xs: { [vars$
|
5972
|
-
sm: { [vars$
|
5973
|
-
md: { [vars$
|
5974
|
-
lg: { [vars$
|
5971
|
+
xs: { [vars$t.barHeight]: '2px' },
|
5972
|
+
sm: { [vars$t.barHeight]: '4px' },
|
5973
|
+
md: { [vars$t.barHeight]: '6px' },
|
5974
|
+
lg: { [vars$t.barHeight]: '8px' },
|
5975
5975
|
},
|
5976
5976
|
|
5977
5977
|
mode: {
|
5978
5978
|
primary: {
|
5979
|
-
[vars$
|
5979
|
+
[vars$t.barColor]: globalRefs$l.colors.primary.main,
|
5980
5980
|
},
|
5981
5981
|
secondary: {
|
5982
|
-
[vars$
|
5982
|
+
[vars$t.barColor]: globalRefs$l.colors.secondary.main,
|
5983
5983
|
},
|
5984
5984
|
},
|
5985
5985
|
|
5986
5986
|
_hidden: {
|
5987
|
-
[vars$
|
5987
|
+
[vars$t.hostDisplay]: 'none',
|
5988
5988
|
},
|
5989
5989
|
};
|
5990
5990
|
|
5991
5991
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
5992
5992
|
__proto__: null,
|
5993
5993
|
default: loaderLinear,
|
5994
|
-
vars: vars$
|
5994
|
+
vars: vars$t
|
5995
5995
|
});
|
5996
5996
|
|
5997
|
-
const globalRefs$
|
5998
|
-
const compVars$
|
5997
|
+
const globalRefs$k = getThemeRefs(globals);
|
5998
|
+
const compVars$3 = LoaderRadialClass.cssVarList;
|
5999
5999
|
|
6000
|
-
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
6000
|
+
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
6001
6001
|
{
|
6002
|
-
spinnerColor: globalRefs$
|
6002
|
+
spinnerColor: globalRefs$k.colors.surface.contrast,
|
6003
6003
|
mode: {
|
6004
6004
|
primary: {
|
6005
|
-
spinnerColor: globalRefs$
|
6005
|
+
spinnerColor: globalRefs$k.colors.primary.main,
|
6006
6006
|
},
|
6007
6007
|
secondary: {
|
6008
|
-
spinnerColor: globalRefs$
|
6008
|
+
spinnerColor: globalRefs$k.colors.secondary.main,
|
6009
6009
|
},
|
6010
6010
|
},
|
6011
6011
|
},
|
6012
|
-
componentName$
|
6012
|
+
componentName$B
|
6013
6013
|
);
|
6014
6014
|
|
6015
6015
|
const loaderRadial = {
|
6016
|
-
...helperTheme,
|
6016
|
+
...helperTheme$1,
|
6017
6017
|
|
6018
|
-
[compVars$
|
6019
|
-
[compVars$
|
6020
|
-
[compVars$
|
6021
|
-
[compVars$
|
6022
|
-
[compVars$
|
6023
|
-
[compVars$
|
6024
|
-
[compVars$
|
6025
|
-
[compVars$
|
6026
|
-
[compVars$
|
6027
|
-
[compVars$
|
6018
|
+
[compVars$3.animationDuration]: '2s',
|
6019
|
+
[compVars$3.animationTimingFunction]: 'linear',
|
6020
|
+
[compVars$3.animationIterationCount]: 'infinite',
|
6021
|
+
[compVars$3.spinnerBorderStyle]: 'solid',
|
6022
|
+
[compVars$3.spinnerBorderWidth]: '0.2em',
|
6023
|
+
[compVars$3.spinnerBorderRadius]: '50%',
|
6024
|
+
[compVars$3.spinnerQuadrant1Color]: helperRefs$1.spinnerColor,
|
6025
|
+
[compVars$3.spinnerQuadrant2Color]: 'transparent',
|
6026
|
+
[compVars$3.spinnerQuadrant3Color]: helperRefs$1.spinnerColor,
|
6027
|
+
[compVars$3.spinnerQuadrant4Color]: 'transparent',
|
6028
6028
|
|
6029
6029
|
size: {
|
6030
|
-
xs: { [compVars$
|
6031
|
-
sm: { [compVars$
|
6032
|
-
md: { [compVars$
|
6033
|
-
lg: { [compVars$
|
6034
|
-
xl: { [compVars$
|
6030
|
+
xs: { [compVars$3.spinnerSize]: '20px' },
|
6031
|
+
sm: { [compVars$3.spinnerSize]: '30px' },
|
6032
|
+
md: { [compVars$3.spinnerSize]: '40px' },
|
6033
|
+
lg: { [compVars$3.spinnerSize]: '60px' },
|
6034
|
+
xl: { [compVars$3.spinnerSize]: '80px' },
|
6035
6035
|
},
|
6036
6036
|
|
6037
6037
|
_hidden: {
|
6038
|
-
[compVars$
|
6038
|
+
[compVars$3.hostDisplay]: 'none',
|
6039
6039
|
},
|
6040
6040
|
};
|
6041
|
-
const vars$
|
6042
|
-
...compVars$
|
6043
|
-
...helperVars,
|
6041
|
+
const vars$s = {
|
6042
|
+
...compVars$3,
|
6043
|
+
...helperVars$1,
|
6044
6044
|
};
|
6045
6045
|
|
6046
6046
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
6047
6047
|
__proto__: null,
|
6048
6048
|
default: loaderRadial,
|
6049
|
-
vars: vars$
|
6049
|
+
vars: vars$s
|
6050
6050
|
});
|
6051
6051
|
|
6052
|
-
const componentName$
|
6052
|
+
const componentName$y = getComponentName('combo-box');
|
6053
6053
|
|
6054
6054
|
const ComboBoxMixin = (superclass) =>
|
6055
6055
|
class ComboBoxMixinClass extends superclass {
|
@@ -6488,83 +6488,83 @@ const ComboBoxClass = compose(
|
|
6488
6488
|
// and reset items to an empty array, and opening the list box with no items
|
6489
6489
|
// to display.
|
6490
6490
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
6491
|
-
componentName: componentName$
|
6491
|
+
componentName: componentName$y,
|
6492
6492
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
6493
6493
|
})
|
6494
6494
|
);
|
6495
6495
|
|
6496
|
-
const globalRefs$
|
6497
|
-
const vars$
|
6496
|
+
const globalRefs$j = getThemeRefs(globals);
|
6497
|
+
const vars$r = ComboBoxClass.cssVarList;
|
6498
6498
|
|
6499
6499
|
const comboBox = {
|
6500
|
-
[vars$
|
6501
|
-
[vars$
|
6502
|
-
[vars$
|
6503
|
-
[vars$
|
6504
|
-
[vars$
|
6505
|
-
[vars$
|
6506
|
-
[vars$
|
6507
|
-
[vars$
|
6508
|
-
[vars$
|
6509
|
-
[vars$
|
6510
|
-
[vars$
|
6511
|
-
[vars$
|
6512
|
-
[vars$
|
6513
|
-
[vars$
|
6514
|
-
[vars$
|
6515
|
-
[vars$
|
6516
|
-
[vars$
|
6517
|
-
[vars$
|
6518
|
-
[vars$
|
6519
|
-
[vars$
|
6520
|
-
[vars$
|
6521
|
-
[vars$
|
6522
|
-
[vars$
|
6523
|
-
[vars$
|
6524
|
-
[vars$
|
6525
|
-
[vars$
|
6526
|
-
[vars$
|
6527
|
-
[vars$
|
6528
|
-
[vars$
|
6529
|
-
[vars$
|
6530
|
-
[vars$
|
6531
|
-
[vars$
|
6532
|
-
[vars$
|
6533
|
-
[vars$
|
6534
|
-
[vars$
|
6535
|
-
[vars$
|
6536
|
-
[vars$
|
6537
|
-
[vars$
|
6500
|
+
[vars$r.hostWidth]: refs.width,
|
6501
|
+
[vars$r.hostDirection]: refs.direction,
|
6502
|
+
[vars$r.fontSize]: refs.fontSize,
|
6503
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
6504
|
+
[vars$r.labelFontSize]: refs.labelFontSize,
|
6505
|
+
[vars$r.labelFontWeight]: refs.labelFontWeight,
|
6506
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
6507
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
6508
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
6509
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
6510
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
6511
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
6512
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
6513
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
6514
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
6515
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
6516
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
6517
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
6518
|
+
[vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6519
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
6520
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
6521
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
6522
|
+
[vars$r.inputDropdownButtonColor]: globalRefs$j.colors.surface.dark,
|
6523
|
+
[vars$r.inputDropdownButtonCursor]: 'pointer',
|
6524
|
+
[vars$r.inputDropdownButtonSize]: refs.toggleButtonSize,
|
6525
|
+
[vars$r.inputDropdownButtonOffset]: globalRefs$j.spacing.xs,
|
6526
|
+
[vars$r.overlayItemPaddingInlineStart]: globalRefs$j.spacing.xs,
|
6527
|
+
[vars$r.overlayItemPaddingInlineEnd]: globalRefs$j.spacing.lg,
|
6528
|
+
[vars$r.labelPosition]: refs.labelPosition,
|
6529
|
+
[vars$r.labelTopPosition]: refs.labelTopPosition,
|
6530
|
+
[vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
6531
|
+
[vars$r.inputTransformY]: refs.inputTransformY,
|
6532
|
+
[vars$r.inputTransition]: refs.inputTransition,
|
6533
|
+
[vars$r.marginInlineStart]: refs.marginInlineStart,
|
6534
|
+
[vars$r.placeholderOpacity]: refs.placeholderOpacity,
|
6535
|
+
[vars$r.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
6536
|
+
[vars$r.valueInputHeight]: refs.valueInputHeight,
|
6537
|
+
[vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
6538
6538
|
|
6539
6539
|
_readonly: {
|
6540
|
-
[vars$
|
6540
|
+
[vars$r.inputDropdownButtonCursor]: 'default',
|
6541
6541
|
},
|
6542
6542
|
|
6543
6543
|
// Overlay theme exposed via the component:
|
6544
|
-
[vars$
|
6545
|
-
[vars$
|
6546
|
-
[vars$
|
6547
|
-
[vars$
|
6548
|
-
[vars$
|
6549
|
-
[vars$
|
6544
|
+
[vars$r.overlayFontSize]: refs.fontSize,
|
6545
|
+
[vars$r.overlayFontFamily]: refs.fontFamily,
|
6546
|
+
[vars$r.overlayCursor]: 'pointer',
|
6547
|
+
[vars$r.overlayItemBoxShadow]: 'none',
|
6548
|
+
[vars$r.overlayBackground]: refs.backgroundColor,
|
6549
|
+
[vars$r.overlayTextColor]: refs.valueTextColor,
|
6550
6550
|
|
6551
6551
|
// Overlay direct theme:
|
6552
|
-
[vars$
|
6553
|
-
[vars$
|
6552
|
+
[vars$r.overlay.minHeight]: '400px',
|
6553
|
+
[vars$r.overlay.margin]: '0',
|
6554
6554
|
};
|
6555
6555
|
|
6556
6556
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
6557
6557
|
__proto__: null,
|
6558
6558
|
comboBox: comboBox,
|
6559
6559
|
default: comboBox,
|
6560
|
-
vars: vars$
|
6560
|
+
vars: vars$r
|
6561
6561
|
});
|
6562
6562
|
|
6563
6563
|
const observedAttributes$2 = ['src', 'alt'];
|
6564
6564
|
|
6565
|
-
const componentName$
|
6565
|
+
const componentName$x = getComponentName('image');
|
6566
6566
|
|
6567
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
6567
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$x, baseSelector: ':host > img' });
|
6568
6568
|
class RawImage extends BaseClass$1 {
|
6569
6569
|
static get observedAttributes() {
|
6570
6570
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -6604,14 +6604,14 @@ const ImageClass = compose(
|
|
6604
6604
|
draggableMixin
|
6605
6605
|
)(RawImage);
|
6606
6606
|
|
6607
|
-
const vars$
|
6607
|
+
const vars$q = ImageClass.cssVarList;
|
6608
6608
|
|
6609
6609
|
const image = {};
|
6610
6610
|
|
6611
6611
|
var image$1 = /*#__PURE__*/Object.freeze({
|
6612
6612
|
__proto__: null,
|
6613
6613
|
default: image,
|
6614
|
-
vars: vars$
|
6614
|
+
vars: vars$q
|
6615
6615
|
});
|
6616
6616
|
|
6617
6617
|
var CountryCodes = [
|
@@ -7830,16 +7830,16 @@ var CountryCodes = [
|
|
7830
7830
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
7831
7831
|
];
|
7832
7832
|
|
7833
|
-
const componentName$
|
7833
|
+
const componentName$w = getComponentName('phone-field-internal');
|
7834
7834
|
|
7835
|
-
createBaseInputClass({ componentName: componentName$
|
7835
|
+
createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
|
7836
7836
|
|
7837
7837
|
const textVars$1 = TextFieldClass.cssVarList;
|
7838
7838
|
const comboVars = ComboBoxClass.cssVarList;
|
7839
7839
|
|
7840
|
-
const componentName$
|
7840
|
+
const componentName$v = getComponentName('phone-field');
|
7841
7841
|
|
7842
|
-
const customMixin$
|
7842
|
+
const customMixin$8 = (superclass) =>
|
7843
7843
|
class PhoneFieldMixinClass extends superclass {
|
7844
7844
|
static get CountryCodes() {
|
7845
7845
|
return CountryCodes;
|
@@ -7851,15 +7851,15 @@ const customMixin$6 = (superclass) =>
|
|
7851
7851
|
const template = document.createElement('template');
|
7852
7852
|
|
7853
7853
|
template.innerHTML = `
|
7854
|
-
<${componentName$
|
7854
|
+
<${componentName$w}
|
7855
7855
|
tabindex="-1"
|
7856
7856
|
slot="input"
|
7857
|
-
></${componentName$
|
7857
|
+
></${componentName$w}>
|
7858
7858
|
`;
|
7859
7859
|
|
7860
7860
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7861
7861
|
|
7862
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7862
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$w);
|
7863
7863
|
|
7864
7864
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
7865
7865
|
includeAttrs: [
|
@@ -7997,7 +7997,7 @@ const PhoneFieldClass = compose(
|
|
7997
7997
|
}),
|
7998
7998
|
draggableMixin,
|
7999
7999
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8000
|
-
customMixin$
|
8000
|
+
customMixin$8
|
8001
8001
|
)(
|
8002
8002
|
createProxy({
|
8003
8003
|
slots: [],
|
@@ -8081,36 +8081,36 @@ const PhoneFieldClass = compose(
|
|
8081
8081
|
${resetInputLabelPosition('vaadin-text-field')}
|
8082
8082
|
`,
|
8083
8083
|
excludeAttrsSync: ['tabindex'],
|
8084
|
-
componentName: componentName$
|
8084
|
+
componentName: componentName$v,
|
8085
8085
|
})
|
8086
8086
|
);
|
8087
8087
|
|
8088
|
-
const vars$
|
8088
|
+
const vars$p = PhoneFieldClass.cssVarList;
|
8089
8089
|
|
8090
8090
|
const phoneField = {
|
8091
|
-
[vars$
|
8092
|
-
[vars$
|
8093
|
-
[vars$
|
8094
|
-
[vars$
|
8095
|
-
[vars$
|
8096
|
-
[vars$
|
8097
|
-
[vars$
|
8098
|
-
[vars$
|
8099
|
-
[vars$
|
8100
|
-
[vars$
|
8101
|
-
[vars$
|
8102
|
-
[vars$
|
8103
|
-
[vars$
|
8104
|
-
[vars$
|
8105
|
-
[vars$
|
8106
|
-
[vars$
|
8107
|
-
[vars$
|
8108
|
-
[vars$
|
8109
|
-
[vars$
|
8110
|
-
[vars$
|
8111
|
-
[vars$
|
8112
|
-
[vars$
|
8113
|
-
[vars$
|
8091
|
+
[vars$p.hostWidth]: refs.width,
|
8092
|
+
[vars$p.hostDirection]: refs.direction,
|
8093
|
+
[vars$p.fontSize]: refs.fontSize,
|
8094
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
8095
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
8096
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
8097
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
8098
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
8099
|
+
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8100
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
8101
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
8102
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
8103
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
8104
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
8105
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
8106
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
8107
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
8108
|
+
[vars$p.phoneInputWidth]: refs.minWidth,
|
8109
|
+
[vars$p.countryCodeInputWidth]: '5em',
|
8110
|
+
[vars$p.countryCodeDropdownWidth]: '20em',
|
8111
|
+
[vars$p.marginInlineStart]: '-0.25em',
|
8112
|
+
[vars$p.valueInputHeight]: refs.valueInputHeight,
|
8113
|
+
[vars$p.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
8114
8114
|
|
8115
8115
|
// '@overlay': {
|
8116
8116
|
// overlayItemBackgroundColor: 'red'
|
@@ -8120,18 +8120,18 @@ const phoneField = {
|
|
8120
8120
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8121
8121
|
__proto__: null,
|
8122
8122
|
default: phoneField,
|
8123
|
-
vars: vars$
|
8123
|
+
vars: vars$p
|
8124
8124
|
});
|
8125
8125
|
|
8126
|
-
const componentName$
|
8126
|
+
const componentName$u = getComponentName('phone-field-internal-input-box');
|
8127
8127
|
|
8128
|
-
createBaseInputClass({ componentName: componentName$
|
8128
|
+
createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
|
8129
8129
|
|
8130
8130
|
const textVars = TextFieldClass.cssVarList;
|
8131
8131
|
|
8132
|
-
const componentName$
|
8132
|
+
const componentName$t = getComponentName('phone-input-box-field');
|
8133
8133
|
|
8134
|
-
const customMixin$
|
8134
|
+
const customMixin$7 = (superclass) =>
|
8135
8135
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
8136
8136
|
static get CountryCodes() {
|
8137
8137
|
return CountryCodes;
|
@@ -8143,15 +8143,15 @@ const customMixin$5 = (superclass) =>
|
|
8143
8143
|
const template = document.createElement('template');
|
8144
8144
|
|
8145
8145
|
template.innerHTML = `
|
8146
|
-
<${componentName$
|
8146
|
+
<${componentName$u}
|
8147
8147
|
tabindex="-1"
|
8148
8148
|
slot="input"
|
8149
|
-
></${componentName$
|
8149
|
+
></${componentName$u}>
|
8150
8150
|
`;
|
8151
8151
|
|
8152
8152
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8153
8153
|
|
8154
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8154
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$u);
|
8155
8155
|
|
8156
8156
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
8157
8157
|
includeAttrs: [
|
@@ -8253,7 +8253,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
8253
8253
|
}),
|
8254
8254
|
draggableMixin,
|
8255
8255
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8256
|
-
customMixin$
|
8256
|
+
customMixin$7
|
8257
8257
|
)(
|
8258
8258
|
createProxy({
|
8259
8259
|
slots: [],
|
@@ -8328,68 +8328,68 @@ const PhoneFieldInputBoxClass = compose(
|
|
8328
8328
|
${inputFloatingLabelStyle()}
|
8329
8329
|
`,
|
8330
8330
|
excludeAttrsSync: ['tabindex'],
|
8331
|
-
componentName: componentName$
|
8331
|
+
componentName: componentName$t,
|
8332
8332
|
})
|
8333
8333
|
);
|
8334
8334
|
|
8335
|
-
const vars$
|
8335
|
+
const vars$o = PhoneFieldInputBoxClass.cssVarList;
|
8336
8336
|
|
8337
8337
|
const phoneInputBoxField = {
|
8338
|
-
[vars$
|
8339
|
-
[vars$
|
8340
|
-
[vars$
|
8341
|
-
[vars$
|
8342
|
-
[vars$
|
8343
|
-
[vars$
|
8344
|
-
[vars$
|
8345
|
-
[vars$
|
8346
|
-
[vars$
|
8347
|
-
[vars$
|
8348
|
-
[vars$
|
8349
|
-
[vars$
|
8350
|
-
[vars$
|
8351
|
-
[vars$
|
8352
|
-
[vars$
|
8353
|
-
[vars$
|
8354
|
-
[vars$
|
8355
|
-
[vars$
|
8356
|
-
[vars$
|
8357
|
-
[vars$
|
8358
|
-
[vars$
|
8359
|
-
[vars$
|
8360
|
-
[vars$
|
8361
|
-
[vars$
|
8362
|
-
[vars$
|
8363
|
-
[vars$
|
8364
|
-
[vars$
|
8365
|
-
[vars$
|
8366
|
-
[vars$
|
8338
|
+
[vars$o.hostWidth]: '16em',
|
8339
|
+
[vars$o.hostMinWidth]: refs.minWidth,
|
8340
|
+
[vars$o.hostDirection]: refs.direction,
|
8341
|
+
[vars$o.fontSize]: refs.fontSize,
|
8342
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
8343
|
+
[vars$o.labelFontSize]: refs.labelFontSize,
|
8344
|
+
[vars$o.labelFontWeight]: refs.labelFontWeight,
|
8345
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
8346
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
8347
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
8348
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
8349
|
+
[vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8350
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
8351
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
8352
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
8353
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
8354
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
8355
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
8356
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
8357
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
8358
|
+
[vars$o.labelPosition]: refs.labelPosition,
|
8359
|
+
[vars$o.labelTopPosition]: refs.labelTopPosition,
|
8360
|
+
[vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
8361
|
+
[vars$o.inputTransformY]: refs.inputTransformY,
|
8362
|
+
[vars$o.inputTransition]: refs.inputTransition,
|
8363
|
+
[vars$o.marginInlineStart]: refs.marginInlineStart,
|
8364
|
+
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
8365
|
+
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
8366
|
+
[vars$o.inputHorizontalPadding]: '0',
|
8367
8367
|
|
8368
8368
|
_fullWidth: {
|
8369
|
-
[vars$
|
8369
|
+
[vars$o.hostWidth]: refs.width,
|
8370
8370
|
},
|
8371
8371
|
};
|
8372
8372
|
|
8373
8373
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8374
8374
|
__proto__: null,
|
8375
8375
|
default: phoneInputBoxField,
|
8376
|
-
vars: vars$
|
8376
|
+
vars: vars$o
|
8377
8377
|
});
|
8378
8378
|
|
8379
|
-
const componentName$
|
8379
|
+
const componentName$s = getComponentName('new-password-internal');
|
8380
8380
|
|
8381
8381
|
const interpolateString = (template, values) =>
|
8382
8382
|
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
8383
8383
|
|
8384
8384
|
// eslint-disable-next-line max-classes-per-file
|
8385
8385
|
|
8386
|
-
const componentName$
|
8386
|
+
const componentName$r = getComponentName('policy-validation');
|
8387
8387
|
|
8388
8388
|
const overrideAttrs = ['data-password-policy-value-minlength'];
|
8389
8389
|
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
8390
8390
|
const policyAttrs = ['label', 'value', ...dataAttrs];
|
8391
8391
|
|
8392
|
-
class RawPolicyValidation extends createBaseClass({ componentName: componentName$
|
8392
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
8393
8393
|
#availablePolicies;
|
8394
8394
|
|
8395
8395
|
#activePolicies = [];
|
@@ -8597,11 +8597,11 @@ const PolicyValidationClass = compose(
|
|
8597
8597
|
componentNameValidationMixin
|
8598
8598
|
)(RawPolicyValidation);
|
8599
8599
|
|
8600
|
-
const componentName$
|
8600
|
+
const componentName$q = getComponentName('new-password');
|
8601
8601
|
|
8602
8602
|
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
8603
8603
|
|
8604
|
-
const customMixin$
|
8604
|
+
const customMixin$6 = (superclass) =>
|
8605
8605
|
class NewPasswordMixinClass extends superclass {
|
8606
8606
|
init() {
|
8607
8607
|
super.init?.();
|
@@ -8609,17 +8609,17 @@ const customMixin$4 = (superclass) =>
|
|
8609
8609
|
const template = document.createElement('template');
|
8610
8610
|
|
8611
8611
|
template.innerHTML = `
|
8612
|
-
<${componentName$
|
8612
|
+
<${componentName$s}
|
8613
8613
|
name="new-password"
|
8614
8614
|
tabindex="-1"
|
8615
8615
|
slot="input"
|
8616
8616
|
>
|
8617
|
-
</${componentName$
|
8617
|
+
</${componentName$s}>
|
8618
8618
|
`;
|
8619
8619
|
|
8620
8620
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8621
8621
|
|
8622
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8622
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
8623
8623
|
|
8624
8624
|
forwardAttrs(this, this.inputElement, {
|
8625
8625
|
includeAttrs: [
|
@@ -8704,7 +8704,7 @@ const NewPasswordClass = compose(
|
|
8704
8704
|
}),
|
8705
8705
|
draggableMixin,
|
8706
8706
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8707
|
-
customMixin$
|
8707
|
+
customMixin$6
|
8708
8708
|
)(
|
8709
8709
|
createProxy({
|
8710
8710
|
slots: [],
|
@@ -8763,40 +8763,40 @@ const NewPasswordClass = compose(
|
|
8763
8763
|
}
|
8764
8764
|
`,
|
8765
8765
|
excludeAttrsSync: ['tabindex'],
|
8766
|
-
componentName: componentName$
|
8766
|
+
componentName: componentName$q,
|
8767
8767
|
})
|
8768
8768
|
);
|
8769
8769
|
|
8770
|
-
const globalRefs$
|
8771
|
-
const vars$
|
8770
|
+
const globalRefs$i = getThemeRefs(globals);
|
8771
|
+
const vars$n = NewPasswordClass.cssVarList;
|
8772
8772
|
|
8773
8773
|
const newPassword = {
|
8774
|
-
[vars$
|
8775
|
-
[vars$
|
8776
|
-
[vars$
|
8777
|
-
[vars$
|
8778
|
-
[vars$
|
8779
|
-
[vars$
|
8780
|
-
[vars$
|
8781
|
-
[vars$
|
8782
|
-
[vars$
|
8783
|
-
[vars$
|
8784
|
-
[vars$
|
8785
|
-
[vars$
|
8786
|
-
[vars$
|
8774
|
+
[vars$n.hostWidth]: refs.width,
|
8775
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
8776
|
+
[vars$n.hostDirection]: refs.direction,
|
8777
|
+
[vars$n.fontSize]: refs.fontSize,
|
8778
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
8779
|
+
[vars$n.labelFontSize]: refs.labelFontSize,
|
8780
|
+
[vars$n.labelFontWeight]: refs.labelFontWeight,
|
8781
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
8782
|
+
[vars$n.spaceBetweenInputs]: '1em',
|
8783
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
8784
|
+
[vars$n.policyPreviewBackgroundColor]: 'none',
|
8785
|
+
[vars$n.policyPreviewPadding]: globalRefs$i.spacing.lg,
|
8786
|
+
[vars$n.valueInputHeight]: refs.valueInputHeight,
|
8787
8787
|
|
8788
8788
|
_required: {
|
8789
8789
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8790
8790
|
// That's why we fake the required indicator on each input.
|
8791
8791
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8792
|
-
[vars$
|
8792
|
+
[vars$n.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8793
8793
|
},
|
8794
8794
|
};
|
8795
8795
|
|
8796
8796
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8797
8797
|
__proto__: null,
|
8798
8798
|
default: newPassword,
|
8799
|
-
vars: vars$
|
8799
|
+
vars: vars$n
|
8800
8800
|
});
|
8801
8801
|
|
8802
8802
|
const getFileBase64 = (fileObj) => {
|
@@ -8811,7 +8811,7 @@ const getFilename = (fileObj) => {
|
|
8811
8811
|
return fileObj.name.replace(/^.*\\/, '');
|
8812
8812
|
};
|
8813
8813
|
|
8814
|
-
const componentName$
|
8814
|
+
const componentName$p = getComponentName('upload-file');
|
8815
8815
|
|
8816
8816
|
const observedAttributes$1 = [
|
8817
8817
|
'title',
|
@@ -8826,7 +8826,7 @@ const observedAttributes$1 = [
|
|
8826
8826
|
'icon',
|
8827
8827
|
];
|
8828
8828
|
|
8829
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
8829
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$p, baseSelector: ':host > div' });
|
8830
8830
|
|
8831
8831
|
class RawUploadFile extends BaseInputClass {
|
8832
8832
|
static get observedAttributes() {
|
@@ -9041,77 +9041,77 @@ const UploadFileClass = compose(
|
|
9041
9041
|
componentNameValidationMixin
|
9042
9042
|
)(RawUploadFile);
|
9043
9043
|
|
9044
|
-
const vars$
|
9044
|
+
const vars$m = UploadFileClass.cssVarList;
|
9045
9045
|
|
9046
9046
|
const uploadFile = {
|
9047
|
-
[vars$
|
9048
|
-
[vars$
|
9049
|
-
[vars$
|
9047
|
+
[vars$m.hostDirection]: refs.direction,
|
9048
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
9049
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
9050
9050
|
|
9051
|
-
[vars$
|
9051
|
+
[vars$m.iconSize]: '2em',
|
9052
9052
|
|
9053
|
-
[vars$
|
9054
|
-
[vars$
|
9053
|
+
[vars$m.hostPadding]: '0.75em',
|
9054
|
+
[vars$m.gap]: '0.5em',
|
9055
9055
|
|
9056
|
-
[vars$
|
9057
|
-
[vars$
|
9058
|
-
[vars$
|
9056
|
+
[vars$m.fontSize]: '16px',
|
9057
|
+
[vars$m.titleFontWeight]: '500',
|
9058
|
+
[vars$m.lineHeight]: '1em',
|
9059
9059
|
|
9060
|
-
[vars$
|
9061
|
-
[vars$
|
9062
|
-
[vars$
|
9063
|
-
[vars$
|
9060
|
+
[vars$m.borderWidth]: refs.borderWidth,
|
9061
|
+
[vars$m.borderColor]: refs.borderColor,
|
9062
|
+
[vars$m.borderRadius]: refs.borderRadius,
|
9063
|
+
[vars$m.borderStyle]: 'dashed',
|
9064
9064
|
|
9065
9065
|
_required: {
|
9066
|
-
[vars$
|
9066
|
+
[vars$m.requiredIndicator]: refs.requiredIndicator,
|
9067
9067
|
},
|
9068
9068
|
|
9069
9069
|
size: {
|
9070
9070
|
xs: {
|
9071
|
-
[vars$
|
9072
|
-
[vars$
|
9073
|
-
[vars$
|
9074
|
-
[vars$
|
9075
|
-
[vars$
|
9071
|
+
[vars$m.hostHeight]: '196px',
|
9072
|
+
[vars$m.hostWidth]: '200px',
|
9073
|
+
[vars$m.titleFontSize]: '0.875em',
|
9074
|
+
[vars$m.descriptionFontSize]: '0.875em',
|
9075
|
+
[vars$m.lineHeight]: '1.25em',
|
9076
9076
|
},
|
9077
9077
|
sm: {
|
9078
|
-
[vars$
|
9079
|
-
[vars$
|
9080
|
-
[vars$
|
9081
|
-
[vars$
|
9082
|
-
[vars$
|
9078
|
+
[vars$m.hostHeight]: '216px',
|
9079
|
+
[vars$m.hostWidth]: '230px',
|
9080
|
+
[vars$m.titleFontSize]: '1em',
|
9081
|
+
[vars$m.descriptionFontSize]: '0.875em',
|
9082
|
+
[vars$m.lineHeight]: '1.25em',
|
9083
9083
|
},
|
9084
9084
|
md: {
|
9085
|
-
[vars$
|
9086
|
-
[vars$
|
9087
|
-
[vars$
|
9088
|
-
[vars$
|
9089
|
-
[vars$
|
9085
|
+
[vars$m.hostHeight]: '256px',
|
9086
|
+
[vars$m.hostWidth]: '312px',
|
9087
|
+
[vars$m.titleFontSize]: '1.125em',
|
9088
|
+
[vars$m.descriptionFontSize]: '1em',
|
9089
|
+
[vars$m.lineHeight]: '1.5em',
|
9090
9090
|
},
|
9091
9091
|
lg: {
|
9092
|
-
[vars$
|
9093
|
-
[vars$
|
9094
|
-
[vars$
|
9095
|
-
[vars$
|
9096
|
-
[vars$
|
9092
|
+
[vars$m.hostHeight]: '280px',
|
9093
|
+
[vars$m.hostWidth]: '336px',
|
9094
|
+
[vars$m.titleFontSize]: '1.125em',
|
9095
|
+
[vars$m.descriptionFontSize]: '1.125em',
|
9096
|
+
[vars$m.lineHeight]: '1.75em',
|
9097
9097
|
},
|
9098
9098
|
},
|
9099
9099
|
|
9100
9100
|
_fullWidth: {
|
9101
|
-
[vars$
|
9101
|
+
[vars$m.hostWidth]: refs.width,
|
9102
9102
|
},
|
9103
9103
|
};
|
9104
9104
|
|
9105
9105
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
9106
9106
|
__proto__: null,
|
9107
9107
|
default: uploadFile,
|
9108
|
-
vars: vars$
|
9108
|
+
vars: vars$m
|
9109
9109
|
});
|
9110
9110
|
|
9111
|
-
const componentName$
|
9111
|
+
const componentName$o = getComponentName('button-selection-group-item');
|
9112
9112
|
|
9113
9113
|
class RawSelectItem extends createBaseClass({
|
9114
|
-
componentName: componentName$
|
9114
|
+
componentName: componentName$o,
|
9115
9115
|
baseSelector: ':host > descope-button',
|
9116
9116
|
}) {
|
9117
9117
|
get size() {
|
@@ -9218,39 +9218,39 @@ const ButtonSelectionGroupItemClass = compose(
|
|
9218
9218
|
componentNameValidationMixin
|
9219
9219
|
)(RawSelectItem);
|
9220
9220
|
|
9221
|
-
const globalRefs$
|
9221
|
+
const globalRefs$h = getThemeRefs(globals);
|
9222
9222
|
|
9223
|
-
const vars$
|
9223
|
+
const vars$l = ButtonSelectionGroupItemClass.cssVarList;
|
9224
9224
|
|
9225
9225
|
const buttonSelectionGroupItem = {
|
9226
|
-
[vars$
|
9227
|
-
[vars$
|
9228
|
-
[vars$
|
9229
|
-
[vars$
|
9230
|
-
[vars$
|
9231
|
-
[vars$
|
9232
|
-
[vars$
|
9233
|
-
[vars$
|
9226
|
+
[vars$l.hostDirection]: 'inherit',
|
9227
|
+
[vars$l.backgroundColor]: globalRefs$h.colors.surface.main,
|
9228
|
+
[vars$l.labelTextColor]: globalRefs$h.colors.surface.contrast,
|
9229
|
+
[vars$l.borderColor]: globalRefs$h.colors.surface.light,
|
9230
|
+
[vars$l.borderStyle]: 'solid',
|
9231
|
+
[vars$l.borderRadius]: globalRefs$h.radius.sm,
|
9232
|
+
[vars$l.outlineColor]: 'transparent',
|
9233
|
+
[vars$l.borderWidth]: globalRefs$h.border.xs,
|
9234
9234
|
|
9235
9235
|
_hover: {
|
9236
|
-
[vars$
|
9236
|
+
[vars$l.backgroundColor]: globalRefs$h.colors.surface.highlight,
|
9237
9237
|
},
|
9238
9238
|
|
9239
9239
|
_focused: {
|
9240
|
-
[vars$
|
9240
|
+
[vars$l.outlineColor]: globalRefs$h.colors.surface.light,
|
9241
9241
|
},
|
9242
9242
|
|
9243
9243
|
_selected: {
|
9244
|
-
[vars$
|
9245
|
-
[vars$
|
9246
|
-
[vars$
|
9244
|
+
[vars$l.borderColor]: globalRefs$h.colors.surface.contrast,
|
9245
|
+
[vars$l.backgroundColor]: globalRefs$h.colors.surface.contrast,
|
9246
|
+
[vars$l.labelTextColor]: globalRefs$h.colors.surface.main,
|
9247
9247
|
},
|
9248
9248
|
};
|
9249
9249
|
|
9250
9250
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
9251
9251
|
__proto__: null,
|
9252
9252
|
default: buttonSelectionGroupItem,
|
9253
|
-
vars: vars$
|
9253
|
+
vars: vars$l
|
9254
9254
|
});
|
9255
9255
|
|
9256
9256
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
@@ -9349,10 +9349,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
9349
9349
|
return BaseButtonSelectionGroupInternalClass;
|
9350
9350
|
};
|
9351
9351
|
|
9352
|
-
const componentName$
|
9352
|
+
const componentName$n = getComponentName('button-selection-group-internal');
|
9353
9353
|
|
9354
9354
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
9355
|
-
componentName$
|
9355
|
+
componentName$n
|
9356
9356
|
) {
|
9357
9357
|
getSelectedNode() {
|
9358
9358
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -9584,7 +9584,7 @@ const buttonSelectionGroupStyles = `
|
|
9584
9584
|
${resetInputCursor('vaadin-text-field')}
|
9585
9585
|
`;
|
9586
9586
|
|
9587
|
-
const componentName$
|
9587
|
+
const componentName$m = getComponentName('button-selection-group');
|
9588
9588
|
|
9589
9589
|
const buttonSelectionGroupMixin = (superclass) =>
|
9590
9590
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -9593,19 +9593,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
9593
9593
|
const template = document.createElement('template');
|
9594
9594
|
|
9595
9595
|
template.innerHTML = `
|
9596
|
-
<${componentName$
|
9596
|
+
<${componentName$n}
|
9597
9597
|
name="button-selection-group"
|
9598
9598
|
slot="input"
|
9599
9599
|
tabindex="-1"
|
9600
9600
|
part="internal-component"
|
9601
9601
|
>
|
9602
9602
|
<slot></slot>
|
9603
|
-
</${componentName$
|
9603
|
+
</${componentName$n}>
|
9604
9604
|
`;
|
9605
9605
|
|
9606
9606
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
9607
9607
|
|
9608
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
9608
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
9609
9609
|
|
9610
9610
|
forwardAttrs(this, this.inputElement, {
|
9611
9611
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -9630,11 +9630,11 @@ const ButtonSelectionGroupClass = compose(
|
|
9630
9630
|
wrappedEleName: 'vaadin-text-field',
|
9631
9631
|
style: () => buttonSelectionGroupStyles,
|
9632
9632
|
excludeAttrsSync: ['tabindex'],
|
9633
|
-
componentName: componentName$
|
9633
|
+
componentName: componentName$m,
|
9634
9634
|
})
|
9635
9635
|
);
|
9636
9636
|
|
9637
|
-
const globalRefs$
|
9637
|
+
const globalRefs$g = getThemeRefs(globals);
|
9638
9638
|
|
9639
9639
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
9640
9640
|
[vars.hostDirection]: refs.direction,
|
@@ -9642,26 +9642,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
9642
9642
|
[vars.labelTextColor]: refs.labelTextColor,
|
9643
9643
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
9644
9644
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
9645
|
-
[vars.itemsSpacing]: globalRefs$
|
9645
|
+
[vars.itemsSpacing]: globalRefs$g.spacing.sm,
|
9646
9646
|
[vars.hostWidth]: refs.width,
|
9647
9647
|
});
|
9648
9648
|
|
9649
|
-
const vars$
|
9649
|
+
const vars$k = ButtonSelectionGroupClass.cssVarList;
|
9650
9650
|
|
9651
9651
|
const buttonSelectionGroup = {
|
9652
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
9652
|
+
...createBaseButtonSelectionGroupMappings(vars$k),
|
9653
9653
|
};
|
9654
9654
|
|
9655
9655
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
9656
9656
|
__proto__: null,
|
9657
9657
|
default: buttonSelectionGroup,
|
9658
|
-
vars: vars$
|
9658
|
+
vars: vars$k
|
9659
9659
|
});
|
9660
9660
|
|
9661
|
-
const componentName$
|
9661
|
+
const componentName$l = getComponentName('button-multi-selection-group-internal');
|
9662
9662
|
|
9663
9663
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
9664
|
-
componentName$
|
9664
|
+
componentName$l
|
9665
9665
|
) {
|
9666
9666
|
#getSelectedNodes() {
|
9667
9667
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -9764,7 +9764,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
9764
9764
|
}
|
9765
9765
|
}
|
9766
9766
|
|
9767
|
-
const componentName$
|
9767
|
+
const componentName$k = getComponentName('button-multi-selection-group');
|
9768
9768
|
|
9769
9769
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
9770
9770
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -9773,19 +9773,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
9773
9773
|
const template = document.createElement('template');
|
9774
9774
|
|
9775
9775
|
template.innerHTML = `
|
9776
|
-
<${componentName$
|
9776
|
+
<${componentName$l}
|
9777
9777
|
name="button-selection-group"
|
9778
9778
|
slot="input"
|
9779
9779
|
tabindex="-1"
|
9780
9780
|
part="internal-component"
|
9781
9781
|
>
|
9782
9782
|
<slot></slot>
|
9783
|
-
</${componentName$
|
9783
|
+
</${componentName$l}>
|
9784
9784
|
`;
|
9785
9785
|
|
9786
9786
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
9787
9787
|
|
9788
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
9788
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
9789
9789
|
|
9790
9790
|
forwardAttrs(this, this.inputElement, {
|
9791
9791
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -9810,25 +9810,25 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
9810
9810
|
wrappedEleName: 'vaadin-text-field',
|
9811
9811
|
style: () => buttonSelectionGroupStyles,
|
9812
9812
|
excludeAttrsSync: ['tabindex'],
|
9813
|
-
componentName: componentName$
|
9813
|
+
componentName: componentName$k,
|
9814
9814
|
})
|
9815
9815
|
);
|
9816
9816
|
|
9817
|
-
const vars$
|
9817
|
+
const vars$j = ButtonMultiSelectionGroupClass.cssVarList;
|
9818
9818
|
|
9819
9819
|
const buttonMultiSelectionGroup = {
|
9820
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
9820
|
+
...createBaseButtonSelectionGroupMappings(vars$j),
|
9821
9821
|
};
|
9822
9822
|
|
9823
9823
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
9824
9824
|
__proto__: null,
|
9825
9825
|
default: buttonMultiSelectionGroup,
|
9826
|
-
vars: vars$
|
9826
|
+
vars: vars$j
|
9827
9827
|
});
|
9828
9828
|
|
9829
|
-
const componentName$
|
9829
|
+
const componentName$j = getComponentName('modal');
|
9830
9830
|
|
9831
|
-
const customMixin$
|
9831
|
+
const customMixin$5 = (superclass) =>
|
9832
9832
|
class ModalMixinClass extends superclass {
|
9833
9833
|
get opened() {
|
9834
9834
|
return this.getAttribute('opened') === 'true';
|
@@ -9918,35 +9918,35 @@ const ModalClass = compose(
|
|
9918
9918
|
}),
|
9919
9919
|
draggableMixin,
|
9920
9920
|
componentNameValidationMixin,
|
9921
|
-
customMixin$
|
9921
|
+
customMixin$5
|
9922
9922
|
)(
|
9923
9923
|
createProxy({
|
9924
9924
|
slots: [''],
|
9925
9925
|
wrappedEleName: 'vaadin-dialog',
|
9926
9926
|
style: () => ``,
|
9927
9927
|
excludeAttrsSync: ['tabindex', 'opened'],
|
9928
|
-
componentName: componentName$
|
9928
|
+
componentName: componentName$j,
|
9929
9929
|
})
|
9930
9930
|
);
|
9931
9931
|
|
9932
|
-
const globalRefs$
|
9932
|
+
const globalRefs$f = getThemeRefs(globals);
|
9933
9933
|
|
9934
|
-
const compVars$
|
9934
|
+
const compVars$2 = ModalClass.cssVarList;
|
9935
9935
|
|
9936
9936
|
const modal = {
|
9937
|
-
[compVars$
|
9938
|
-
[compVars$
|
9939
|
-
[compVars$
|
9937
|
+
[compVars$2.overlayBackgroundColor]: globalRefs$f.colors.surface.main,
|
9938
|
+
[compVars$2.overlayShadow]: globalRefs$f.shadow.wide['2xl'],
|
9939
|
+
[compVars$2.overlayWidth]: '540px',
|
9940
9940
|
};
|
9941
9941
|
|
9942
|
-
const vars$
|
9943
|
-
...compVars$
|
9942
|
+
const vars$i = {
|
9943
|
+
...compVars$2,
|
9944
9944
|
};
|
9945
9945
|
|
9946
9946
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
9947
9947
|
__proto__: null,
|
9948
9948
|
default: modal,
|
9949
|
-
vars: vars$
|
9949
|
+
vars: vars$i
|
9950
9950
|
});
|
9951
9951
|
|
9952
9952
|
const isValidDataType = (data) => {
|
@@ -10022,7 +10022,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
|
|
10022
10022
|
`;
|
10023
10023
|
};
|
10024
10024
|
|
10025
|
-
const componentName$
|
10025
|
+
const componentName$i = getComponentName('grid');
|
10026
10026
|
|
10027
10027
|
const GridMixin = (superclass) =>
|
10028
10028
|
class GridMixinClass extends superclass {
|
@@ -10376,52 +10376,52 @@ const GridClass = compose(
|
|
10376
10376
|
/*!css*/
|
10377
10377
|
`,
|
10378
10378
|
excludeAttrsSync: ['columns', 'tabindex'],
|
10379
|
-
componentName: componentName$
|
10379
|
+
componentName: componentName$i,
|
10380
10380
|
})
|
10381
10381
|
);
|
10382
10382
|
|
10383
|
-
const globalRefs$
|
10384
|
-
const vars$
|
10383
|
+
const globalRefs$e = getThemeRefs(globals);
|
10384
|
+
const vars$h = GridClass.cssVarList;
|
10385
10385
|
|
10386
10386
|
const grid = {
|
10387
|
-
[vars$
|
10388
|
-
[vars$
|
10389
|
-
[vars$
|
10390
|
-
[vars$
|
10391
|
-
[vars$
|
10392
|
-
|
10393
|
-
[vars$
|
10394
|
-
[vars$
|
10395
|
-
|
10396
|
-
[vars$
|
10397
|
-
[vars$
|
10398
|
-
[vars$
|
10399
|
-
|
10400
|
-
[vars$
|
10401
|
-
[vars$
|
10402
|
-
[vars$
|
10403
|
-
[vars$
|
10404
|
-
|
10405
|
-
[vars$
|
10406
|
-
[vars$
|
10407
|
-
|
10408
|
-
[vars$
|
10409
|
-
[vars$
|
10410
|
-
[vars$
|
10411
|
-
|
10412
|
-
[vars$
|
10413
|
-
[vars$
|
10414
|
-
[vars$
|
10415
|
-
[vars$
|
10416
|
-
[vars$
|
10417
|
-
[vars$
|
10418
|
-
[vars$
|
10419
|
-
[vars$
|
10420
|
-
[vars$
|
10421
|
-
[vars$
|
10387
|
+
[vars$h.hostWidth]: '100%',
|
10388
|
+
[vars$h.hostHeight]: '100%',
|
10389
|
+
[vars$h.hostMinHeight]: '400px',
|
10390
|
+
[vars$h.fontWeight]: '400',
|
10391
|
+
[vars$h.backgroundColor]: globalRefs$e.colors.surface.main,
|
10392
|
+
|
10393
|
+
[vars$h.fontSize]: refs.fontSize,
|
10394
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
10395
|
+
|
10396
|
+
[vars$h.sortIndicatorsColor]: globalRefs$e.colors.surface.light,
|
10397
|
+
[vars$h.activeSortIndicator]: globalRefs$e.colors.surface.dark,
|
10398
|
+
[vars$h.resizeHandleColor]: globalRefs$e.colors.surface.light,
|
10399
|
+
|
10400
|
+
[vars$h.borderWidth]: refs.borderWidth,
|
10401
|
+
[vars$h.borderStyle]: refs.borderStyle,
|
10402
|
+
[vars$h.borderRadius]: refs.borderRadius,
|
10403
|
+
[vars$h.borderColor]: 'transparent',
|
10404
|
+
|
10405
|
+
[vars$h.headerRowTextColor]: globalRefs$e.colors.surface.dark,
|
10406
|
+
[vars$h.separatorColor]: globalRefs$e.colors.surface.light,
|
10407
|
+
|
10408
|
+
[vars$h.valueTextColor]: globalRefs$e.colors.surface.contrast,
|
10409
|
+
[vars$h.selectedBackgroundColor]: globalRefs$e.colors.surface.highlight,
|
10410
|
+
[vars$h.hostDirection]: globalRefs$e.direction,
|
10411
|
+
|
10412
|
+
[vars$h.toggleDetailsPanelButtonSize]: '1em',
|
10413
|
+
[vars$h.toggleDetailsPanelButtonOpenedColor]: globalRefs$e.colors.surface.contrast,
|
10414
|
+
[vars$h.toggleDetailsPanelButtonClosedColor]: globalRefs$e.colors.surface.light,
|
10415
|
+
[vars$h.toggleDetailsPanelButtonCursor]: 'pointer',
|
10416
|
+
[vars$h.detailsPanelBackgroundColor]: globalRefs$e.colors.surface.highlight,
|
10417
|
+
[vars$h.detailsPanelBorderTopColor]: globalRefs$e.colors.surface.light,
|
10418
|
+
[vars$h.detailsPanelLabelsColor]: globalRefs$e.colors.surface.dark,
|
10419
|
+
[vars$h.detailsPanelLabelsFontSize]: '0.8em',
|
10420
|
+
[vars$h.detailsPanelItemsGap]: '2em',
|
10421
|
+
[vars$h.detailsPanelPadding]: '12px 0',
|
10422
10422
|
|
10423
10423
|
_bordered: {
|
10424
|
-
[vars$
|
10424
|
+
[vars$h.borderColor]: refs.borderColor,
|
10425
10425
|
},
|
10426
10426
|
};
|
10427
10427
|
|
@@ -10429,10 +10429,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
10429
10429
|
__proto__: null,
|
10430
10430
|
default: grid,
|
10431
10431
|
grid: grid,
|
10432
|
-
vars: vars$
|
10432
|
+
vars: vars$h
|
10433
10433
|
});
|
10434
10434
|
|
10435
|
-
const componentName$
|
10435
|
+
const componentName$h = getComponentName('notification-card');
|
10436
10436
|
|
10437
10437
|
const notificationCardMixin = (superclass) =>
|
10438
10438
|
class NotificationCardMixinClass extends superclass {
|
@@ -10540,54 +10540,54 @@ const NotificationCardClass = compose(
|
|
10540
10540
|
}
|
10541
10541
|
`,
|
10542
10542
|
excludeAttrsSync: ['tabindex'],
|
10543
|
-
componentName: componentName$
|
10543
|
+
componentName: componentName$h,
|
10544
10544
|
})
|
10545
10545
|
);
|
10546
10546
|
|
10547
|
-
const globalRefs$
|
10548
|
-
const vars$
|
10547
|
+
const globalRefs$d = getThemeRefs(globals);
|
10548
|
+
const vars$g = NotificationCardClass.cssVarList;
|
10549
10549
|
|
10550
|
-
const shadowColor = '#00000020';
|
10550
|
+
const shadowColor$1 = '#00000020';
|
10551
10551
|
|
10552
10552
|
const notification = {
|
10553
|
-
[vars$
|
10554
|
-
[vars$
|
10555
|
-
[vars$
|
10556
|
-
[vars$
|
10557
|
-
[vars$
|
10558
|
-
[vars$
|
10559
|
-
[vars$
|
10560
|
-
[vars$
|
10561
|
-
[vars$
|
10553
|
+
[vars$g.hostMinWidth]: '415px',
|
10554
|
+
[vars$g.fontFamily]: globalRefs$d.fonts.font1.family,
|
10555
|
+
[vars$g.fontSize]: globalRefs$d.typography.body1.size,
|
10556
|
+
[vars$g.backgroundColor]: globalRefs$d.colors.surface.main,
|
10557
|
+
[vars$g.textColor]: globalRefs$d.colors.surface.contrast,
|
10558
|
+
[vars$g.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
|
10559
|
+
[vars$g.verticalPadding]: '0.625em',
|
10560
|
+
[vars$g.horizontalPadding]: '1.5em',
|
10561
|
+
[vars$g.borderRadius]: globalRefs$d.radius.xs,
|
10562
10562
|
|
10563
10563
|
_bordered: {
|
10564
|
-
[vars$
|
10565
|
-
[vars$
|
10566
|
-
[vars$
|
10564
|
+
[vars$g.borderWidth]: globalRefs$d.border.sm,
|
10565
|
+
[vars$g.borderStyle]: 'solid',
|
10566
|
+
[vars$g.borderColor]: 'transparent',
|
10567
10567
|
},
|
10568
10568
|
|
10569
10569
|
size: {
|
10570
|
-
xs: { [vars$
|
10571
|
-
sm: { [vars$
|
10572
|
-
md: { [vars$
|
10573
|
-
lg: { [vars$
|
10570
|
+
xs: { [vars$g.fontSize]: '12px' },
|
10571
|
+
sm: { [vars$g.fontSize]: '14px' },
|
10572
|
+
md: { [vars$g.fontSize]: '16px' },
|
10573
|
+
lg: { [vars$g.fontSize]: '18px' },
|
10574
10574
|
},
|
10575
10575
|
|
10576
10576
|
mode: {
|
10577
10577
|
primary: {
|
10578
|
-
[vars$
|
10579
|
-
[vars$
|
10580
|
-
[vars$
|
10578
|
+
[vars$g.backgroundColor]: globalRefs$d.colors.primary.main,
|
10579
|
+
[vars$g.textColor]: globalRefs$d.colors.primary.contrast,
|
10580
|
+
[vars$g.borderColor]: globalRefs$d.colors.primary.light,
|
10581
10581
|
},
|
10582
10582
|
success: {
|
10583
|
-
[vars$
|
10584
|
-
[vars$
|
10585
|
-
[vars$
|
10583
|
+
[vars$g.backgroundColor]: globalRefs$d.colors.success.main,
|
10584
|
+
[vars$g.textColor]: globalRefs$d.colors.success.contrast,
|
10585
|
+
[vars$g.borderColor]: globalRefs$d.colors.success.light,
|
10586
10586
|
},
|
10587
10587
|
error: {
|
10588
|
-
[vars$
|
10589
|
-
[vars$
|
10590
|
-
[vars$
|
10588
|
+
[vars$g.backgroundColor]: globalRefs$d.colors.error.main,
|
10589
|
+
[vars$g.textColor]: globalRefs$d.colors.error.contrast,
|
10590
|
+
[vars$g.borderColor]: globalRefs$d.colors.error.light,
|
10591
10591
|
},
|
10592
10592
|
},
|
10593
10593
|
};
|
@@ -10595,10 +10595,10 @@ const notification = {
|
|
10595
10595
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
10596
10596
|
__proto__: null,
|
10597
10597
|
default: notification,
|
10598
|
-
vars: vars$
|
10598
|
+
vars: vars$g
|
10599
10599
|
});
|
10600
10600
|
|
10601
|
-
const componentName$
|
10601
|
+
const componentName$g = getComponentName('multi-select-combo-box');
|
10602
10602
|
|
10603
10603
|
const multiSelectComboBoxMixin = (superclass) =>
|
10604
10604
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -11232,93 +11232,93 @@ const MultiSelectComboBoxClass = compose(
|
|
11232
11232
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
11233
11233
|
// tries to override it, causing us to lose the user set placeholder.
|
11234
11234
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
11235
|
-
componentName: componentName$
|
11235
|
+
componentName: componentName$g,
|
11236
11236
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
11237
11237
|
})
|
11238
11238
|
);
|
11239
11239
|
|
11240
|
-
const globalRefs$
|
11241
|
-
const vars$
|
11240
|
+
const globalRefs$c = getThemeRefs(globals);
|
11241
|
+
const vars$f = MultiSelectComboBoxClass.cssVarList;
|
11242
11242
|
|
11243
11243
|
const multiSelectComboBox = {
|
11244
|
-
[vars$
|
11245
|
-
[vars$
|
11246
|
-
[vars$
|
11247
|
-
[vars$
|
11248
|
-
[vars$
|
11249
|
-
[vars$
|
11250
|
-
[vars$
|
11251
|
-
[vars$
|
11252
|
-
[vars$
|
11253
|
-
[vars$
|
11254
|
-
[vars$
|
11255
|
-
[vars$
|
11256
|
-
[vars$
|
11257
|
-
[vars$
|
11258
|
-
[vars$
|
11259
|
-
[vars$
|
11260
|
-
[vars$
|
11261
|
-
[vars$
|
11262
|
-
[vars$
|
11263
|
-
[vars$
|
11264
|
-
[vars$
|
11265
|
-
[vars$
|
11266
|
-
[vars$
|
11267
|
-
[vars$
|
11268
|
-
[vars$
|
11269
|
-
[vars$
|
11270
|
-
[vars$
|
11271
|
-
[vars$
|
11272
|
-
[vars$
|
11273
|
-
[vars$
|
11274
|
-
[vars$
|
11275
|
-
[vars$
|
11276
|
-
[vars$
|
11277
|
-
[vars$
|
11278
|
-
[vars$
|
11279
|
-
[vars$
|
11280
|
-
[vars$
|
11281
|
-
[vars$
|
11282
|
-
[vars$
|
11283
|
-
[vars$
|
11284
|
-
[vars$
|
11244
|
+
[vars$f.hostWidth]: refs.width,
|
11245
|
+
[vars$f.hostDirection]: refs.direction,
|
11246
|
+
[vars$f.fontSize]: refs.fontSize,
|
11247
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
11248
|
+
[vars$f.labelFontSize]: refs.labelFontSize,
|
11249
|
+
[vars$f.labelFontWeight]: refs.labelFontWeight,
|
11250
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
11251
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
11252
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
11253
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
11254
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
11255
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
11256
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
11257
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
11258
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
11259
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
11260
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
11261
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
11262
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11263
|
+
[vars$f.inputBackgroundColor]: refs.backgroundColor,
|
11264
|
+
[vars$f.inputHorizontalPadding]: refs.horizontalPadding,
|
11265
|
+
[vars$f.inputVerticalPadding]: refs.verticalPadding,
|
11266
|
+
[vars$f.inputHeight]: refs.inputHeight,
|
11267
|
+
[vars$f.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
|
11268
|
+
[vars$f.inputDropdownButtonCursor]: 'pointer',
|
11269
|
+
[vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11270
|
+
[vars$f.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
|
11271
|
+
[vars$f.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
|
11272
|
+
[vars$f.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
|
11273
|
+
[vars$f.chipFontSize]: refs.chipFontSize,
|
11274
|
+
[vars$f.chipTextColor]: globalRefs$c.colors.surface.contrast,
|
11275
|
+
[vars$f.chipBackgroundColor]: globalRefs$c.colors.surface.light,
|
11276
|
+
[vars$f.labelPosition]: refs.labelPosition,
|
11277
|
+
[vars$f.labelTopPosition]: refs.labelTopPosition,
|
11278
|
+
[vars$f.labelLeftPosition]: refs.labelLeftPosition,
|
11279
|
+
[vars$f.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
11280
|
+
[vars$f.inputTransformY]: refs.inputTransformY,
|
11281
|
+
[vars$f.inputTransition]: refs.inputTransition,
|
11282
|
+
[vars$f.marginInlineStart]: refs.marginInlineStart,
|
11283
|
+
[vars$f.placeholderOpacity]: refs.placeholderOpacity,
|
11284
|
+
[vars$f.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
11285
11285
|
|
11286
11286
|
labelType: {
|
11287
11287
|
floating: {
|
11288
|
-
[vars$
|
11288
|
+
[vars$f.inputHorizontalPadding]: '0.25em',
|
11289
11289
|
_hasValue: {
|
11290
|
-
[vars$
|
11290
|
+
[vars$f.inputHorizontalPadding]: '0.45em',
|
11291
11291
|
},
|
11292
11292
|
},
|
11293
11293
|
},
|
11294
11294
|
|
11295
11295
|
_readonly: {
|
11296
|
-
[vars$
|
11296
|
+
[vars$f.inputDropdownButtonCursor]: 'default',
|
11297
11297
|
},
|
11298
11298
|
|
11299
11299
|
// Overlay theme exposed via the component:
|
11300
|
-
[vars$
|
11301
|
-
[vars$
|
11302
|
-
[vars$
|
11303
|
-
[vars$
|
11304
|
-
[vars$
|
11305
|
-
[vars$
|
11300
|
+
[vars$f.overlayFontSize]: refs.fontSize,
|
11301
|
+
[vars$f.overlayFontFamily]: refs.fontFamily,
|
11302
|
+
[vars$f.overlayCursor]: 'pointer',
|
11303
|
+
[vars$f.overlayItemBoxShadow]: 'none',
|
11304
|
+
[vars$f.overlayBackground]: refs.backgroundColor,
|
11305
|
+
[vars$f.overlayTextColor]: refs.valueTextColor,
|
11306
11306
|
|
11307
11307
|
// Overlay direct theme:
|
11308
|
-
[vars$
|
11309
|
-
[vars$
|
11308
|
+
[vars$f.overlay.minHeight]: '400px',
|
11309
|
+
[vars$f.overlay.margin]: '0',
|
11310
11310
|
};
|
11311
11311
|
|
11312
11312
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
11313
11313
|
__proto__: null,
|
11314
11314
|
default: multiSelectComboBox,
|
11315
11315
|
multiSelectComboBox: multiSelectComboBox,
|
11316
|
-
vars: vars$
|
11316
|
+
vars: vars$f
|
11317
11317
|
});
|
11318
11318
|
|
11319
|
-
const componentName$
|
11319
|
+
const componentName$f = getComponentName('badge');
|
11320
11320
|
|
11321
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
11321
|
+
class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
|
11322
11322
|
constructor() {
|
11323
11323
|
super();
|
11324
11324
|
|
@@ -11369,66 +11369,66 @@ const BadgeClass = compose(
|
|
11369
11369
|
componentNameValidationMixin
|
11370
11370
|
)(RawBadge);
|
11371
11371
|
|
11372
|
-
const globalRefs$
|
11373
|
-
const vars$
|
11372
|
+
const globalRefs$b = getThemeRefs(globals);
|
11373
|
+
const vars$e = BadgeClass.cssVarList;
|
11374
11374
|
|
11375
11375
|
const badge$2 = {
|
11376
|
-
[vars$
|
11377
|
-
[vars$
|
11376
|
+
[vars$e.hostWidth]: 'fit-content',
|
11377
|
+
[vars$e.hostDirection]: globalRefs$b.direction,
|
11378
11378
|
|
11379
|
-
[vars$
|
11379
|
+
[vars$e.textAlign]: 'center',
|
11380
11380
|
|
11381
|
-
[vars$
|
11382
|
-
[vars$
|
11381
|
+
[vars$e.fontFamily]: globalRefs$b.fonts.font1.family,
|
11382
|
+
[vars$e.fontWeight]: '400',
|
11383
11383
|
|
11384
|
-
[vars$
|
11385
|
-
[vars$
|
11384
|
+
[vars$e.verticalPadding]: '0.25em',
|
11385
|
+
[vars$e.horizontalPadding]: '0.5em',
|
11386
11386
|
|
11387
|
-
[vars$
|
11388
|
-
[vars$
|
11389
|
-
[vars$
|
11390
|
-
[vars$
|
11387
|
+
[vars$e.borderWidth]: globalRefs$b.border.xs,
|
11388
|
+
[vars$e.borderRadius]: globalRefs$b.radius.xs,
|
11389
|
+
[vars$e.borderColor]: 'transparent',
|
11390
|
+
[vars$e.borderStyle]: 'solid',
|
11391
11391
|
|
11392
11392
|
_fullWidth: {
|
11393
|
-
[vars$
|
11393
|
+
[vars$e.hostWidth]: '100%',
|
11394
11394
|
},
|
11395
11395
|
|
11396
11396
|
size: {
|
11397
|
-
xs: { [vars$
|
11398
|
-
sm: { [vars$
|
11399
|
-
md: { [vars$
|
11400
|
-
lg: { [vars$
|
11397
|
+
xs: { [vars$e.fontSize]: '12px' },
|
11398
|
+
sm: { [vars$e.fontSize]: '14px' },
|
11399
|
+
md: { [vars$e.fontSize]: '16px' },
|
11400
|
+
lg: { [vars$e.fontSize]: '18px' },
|
11401
11401
|
},
|
11402
11402
|
|
11403
11403
|
mode: {
|
11404
11404
|
default: {
|
11405
|
-
[vars$
|
11405
|
+
[vars$e.textColor]: globalRefs$b.colors.surface.dark,
|
11406
11406
|
_bordered: {
|
11407
|
-
[vars$
|
11407
|
+
[vars$e.borderColor]: globalRefs$b.colors.surface.light,
|
11408
11408
|
},
|
11409
11409
|
},
|
11410
11410
|
primary: {
|
11411
|
-
[vars$
|
11411
|
+
[vars$e.textColor]: globalRefs$b.colors.primary.main,
|
11412
11412
|
_bordered: {
|
11413
|
-
[vars$
|
11413
|
+
[vars$e.borderColor]: globalRefs$b.colors.primary.light,
|
11414
11414
|
},
|
11415
11415
|
},
|
11416
11416
|
secondary: {
|
11417
|
-
[vars$
|
11417
|
+
[vars$e.textColor]: globalRefs$b.colors.secondary.main,
|
11418
11418
|
_bordered: {
|
11419
|
-
[vars$
|
11419
|
+
[vars$e.borderColor]: globalRefs$b.colors.secondary.light,
|
11420
11420
|
},
|
11421
11421
|
},
|
11422
11422
|
error: {
|
11423
|
-
[vars$
|
11423
|
+
[vars$e.textColor]: globalRefs$b.colors.error.main,
|
11424
11424
|
_bordered: {
|
11425
|
-
[vars$
|
11425
|
+
[vars$e.borderColor]: globalRefs$b.colors.error.light,
|
11426
11426
|
},
|
11427
11427
|
},
|
11428
11428
|
success: {
|
11429
|
-
[vars$
|
11429
|
+
[vars$e.textColor]: globalRefs$b.colors.success.main,
|
11430
11430
|
_bordered: {
|
11431
|
-
[vars$
|
11431
|
+
[vars$e.borderColor]: globalRefs$b.colors.success.light,
|
11432
11432
|
},
|
11433
11433
|
},
|
11434
11434
|
},
|
@@ -11437,11 +11437,11 @@ const badge$2 = {
|
|
11437
11437
|
var badge$3 = /*#__PURE__*/Object.freeze({
|
11438
11438
|
__proto__: null,
|
11439
11439
|
default: badge$2,
|
11440
|
-
vars: vars$
|
11440
|
+
vars: vars$e
|
11441
11441
|
});
|
11442
11442
|
|
11443
|
-
const componentName$
|
11444
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
11443
|
+
const componentName$e = getComponentName('avatar');
|
11444
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
|
11445
11445
|
constructor() {
|
11446
11446
|
super();
|
11447
11447
|
|
@@ -11498,7 +11498,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSe
|
|
11498
11498
|
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
11499
11499
|
|
11500
11500
|
forwardAttrs(this, this.avatarComponent, {
|
11501
|
-
includeAttrs: ['display-name', 'img'],
|
11501
|
+
includeAttrs: ['display-name', 'img', 'abbr'],
|
11502
11502
|
mapAttrs: { 'display-name': 'name' },
|
11503
11503
|
});
|
11504
11504
|
|
@@ -11527,7 +11527,10 @@ const { host: host$4, editableBadge, avatar: avatar$2 } = {
|
|
11527
11527
|
const AvatarClass = compose(
|
11528
11528
|
createStyleMixin({
|
11529
11529
|
mappings: {
|
11530
|
-
hostWidth:
|
11530
|
+
hostWidth: [
|
11531
|
+
{ ...host$4, property: 'width' },
|
11532
|
+
{ ...host$4, property: 'min-width' },
|
11533
|
+
],
|
11531
11534
|
hostHeight: { ...host$4, property: 'height' },
|
11532
11535
|
cursor: [avatar$2, host$4],
|
11533
11536
|
hostDirection: { ...host$4, property: 'direction' },
|
@@ -11542,58 +11545,58 @@ const AvatarClass = compose(
|
|
11542
11545
|
componentNameValidationMixin
|
11543
11546
|
)(RawAvatar);
|
11544
11547
|
|
11545
|
-
const globalRefs$
|
11546
|
-
const compVars = AvatarClass.cssVarList;
|
11548
|
+
const globalRefs$a = getThemeRefs(globals);
|
11549
|
+
const compVars$1 = AvatarClass.cssVarList;
|
11547
11550
|
|
11548
11551
|
const avatar = {
|
11549
|
-
[compVars.hostDirection]: globalRefs$
|
11550
|
-
[compVars.editableIconColor]: globalRefs$
|
11551
|
-
[compVars.editableBorderColor]: globalRefs$
|
11552
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
11553
|
-
[compVars.avatarTextColor]: globalRefs$
|
11554
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
11552
|
+
[compVars$1.hostDirection]: globalRefs$a.direction,
|
11553
|
+
[compVars$1.editableIconColor]: globalRefs$a.colors.surface.dark,
|
11554
|
+
[compVars$1.editableBorderColor]: globalRefs$a.colors.surface.dark,
|
11555
|
+
[compVars$1.editableBackgroundColor]: globalRefs$a.colors.surface.main,
|
11556
|
+
[compVars$1.avatarTextColor]: globalRefs$a.colors.surface.main,
|
11557
|
+
[compVars$1.avatarBackgroundColor]: globalRefs$a.colors.surface.dark,
|
11555
11558
|
|
11556
11559
|
_editable: {
|
11557
|
-
[compVars.cursor]: 'pointer',
|
11560
|
+
[compVars$1.cursor]: 'pointer',
|
11558
11561
|
},
|
11559
11562
|
|
11560
11563
|
size: {
|
11561
11564
|
xs: {
|
11562
|
-
[compVars.hostWidth]: '30px',
|
11563
|
-
[compVars.hostHeight]: '30px',
|
11565
|
+
[compVars$1.hostWidth]: '30px',
|
11566
|
+
[compVars$1.hostHeight]: '30px',
|
11564
11567
|
},
|
11565
11568
|
sm: {
|
11566
|
-
[compVars.hostWidth]: '40px',
|
11567
|
-
[compVars.hostHeight]: '40px',
|
11569
|
+
[compVars$1.hostWidth]: '40px',
|
11570
|
+
[compVars$1.hostHeight]: '40px',
|
11568
11571
|
},
|
11569
11572
|
md: {
|
11570
|
-
[compVars.hostWidth]: '60px',
|
11571
|
-
[compVars.hostHeight]: '60px',
|
11573
|
+
[compVars$1.hostWidth]: '60px',
|
11574
|
+
[compVars$1.hostHeight]: '60px',
|
11572
11575
|
},
|
11573
11576
|
lg: {
|
11574
|
-
[compVars.hostWidth]: '98px',
|
11575
|
-
[compVars.hostHeight]: '98px',
|
11577
|
+
[compVars$1.hostWidth]: '98px',
|
11578
|
+
[compVars$1.hostHeight]: '98px',
|
11576
11579
|
},
|
11577
11580
|
},
|
11578
11581
|
};
|
11579
11582
|
|
11580
|
-
const vars$
|
11581
|
-
...compVars,
|
11583
|
+
const vars$d = {
|
11584
|
+
...compVars$1,
|
11582
11585
|
};
|
11583
11586
|
|
11584
11587
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
11585
11588
|
__proto__: null,
|
11586
11589
|
default: avatar,
|
11587
|
-
vars: vars$
|
11590
|
+
vars: vars$d
|
11588
11591
|
});
|
11589
11592
|
|
11590
|
-
const componentName$
|
11593
|
+
const componentName$d = getComponentName('mappings-field-internal');
|
11591
11594
|
|
11592
|
-
createBaseInputClass({ componentName: componentName$
|
11595
|
+
createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
|
11593
11596
|
|
11594
|
-
const componentName$
|
11597
|
+
const componentName$c = getComponentName('mappings-field');
|
11595
11598
|
|
11596
|
-
const customMixin$
|
11599
|
+
const customMixin$4 = (superclass) =>
|
11597
11600
|
class MappingsFieldMixinClass extends superclass {
|
11598
11601
|
get defaultValues() {
|
11599
11602
|
const defaultValuesAttr = this.getAttribute('default-values');
|
@@ -11620,14 +11623,14 @@ const customMixin$2 = (superclass) =>
|
|
11620
11623
|
const template = document.createElement('template');
|
11621
11624
|
|
11622
11625
|
template.innerHTML = `
|
11623
|
-
<${componentName$
|
11626
|
+
<${componentName$d}
|
11624
11627
|
tabindex="-1"
|
11625
|
-
></${componentName$
|
11628
|
+
></${componentName$d}>
|
11626
11629
|
`;
|
11627
11630
|
|
11628
11631
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
11629
11632
|
|
11630
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
11633
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
11631
11634
|
|
11632
11635
|
forwardAttrs(this, this.inputElement, {
|
11633
11636
|
includeAttrs: [
|
@@ -11709,7 +11712,7 @@ const MappingsFieldClass = compose(
|
|
11709
11712
|
proxyParentValidation: true,
|
11710
11713
|
}),
|
11711
11714
|
componentNameValidationMixin,
|
11712
|
-
customMixin$
|
11715
|
+
customMixin$4
|
11713
11716
|
)(
|
11714
11717
|
createProxy({
|
11715
11718
|
slots: [],
|
@@ -11756,47 +11759,47 @@ const MappingsFieldClass = compose(
|
|
11756
11759
|
'options',
|
11757
11760
|
'error-message',
|
11758
11761
|
],
|
11759
|
-
componentName: componentName$
|
11762
|
+
componentName: componentName$c,
|
11760
11763
|
})
|
11761
11764
|
);
|
11762
11765
|
|
11763
|
-
const globalRefs$
|
11766
|
+
const globalRefs$9 = getThemeRefs(globals);
|
11764
11767
|
|
11765
|
-
const vars$
|
11768
|
+
const vars$c = MappingsFieldClass.cssVarList;
|
11766
11769
|
|
11767
11770
|
const mappingsField = {
|
11768
|
-
[vars$
|
11769
|
-
[vars$
|
11770
|
-
[vars$
|
11771
|
-
[vars$
|
11772
|
-
[vars$
|
11773
|
-
[vars$
|
11774
|
-
[vars$
|
11775
|
-
[vars$
|
11776
|
-
[vars$
|
11777
|
-
[vars$
|
11771
|
+
[vars$c.hostWidth]: refs.width,
|
11772
|
+
[vars$c.hostDirection]: refs.direction,
|
11773
|
+
[vars$c.fontSize]: refs.fontSize,
|
11774
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
11775
|
+
[vars$c.separatorFontSize]: '14px',
|
11776
|
+
[vars$c.labelsFontSize]: '14px',
|
11777
|
+
[vars$c.labelsLineHeight]: '1',
|
11778
|
+
[vars$c.labelsMarginBottom]: '6px',
|
11779
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
11780
|
+
[vars$c.itemMarginBottom]: '1em',
|
11778
11781
|
// To be positioned correctly, the min width has to match the text field min width
|
11779
|
-
[vars$
|
11782
|
+
[vars$c.valueLabelMinWidth]: refs.minWidth,
|
11780
11783
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11781
|
-
[vars$
|
11782
|
-
[vars$
|
11783
|
-
[vars$
|
11784
|
+
[vars$c.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$9.border.xs})`,
|
11785
|
+
[vars$c.separatorWidth]: '70px',
|
11786
|
+
[vars$c.removeButtonWidth]: '60px',
|
11784
11787
|
};
|
11785
11788
|
|
11786
11789
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
11787
11790
|
__proto__: null,
|
11788
11791
|
default: mappingsField,
|
11789
11792
|
mappingsField: mappingsField,
|
11790
|
-
vars: vars$
|
11793
|
+
vars: vars$c
|
11791
11794
|
});
|
11792
11795
|
|
11793
11796
|
var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
|
11794
11797
|
|
11795
11798
|
var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
|
11796
11799
|
|
11797
|
-
const componentName$
|
11800
|
+
const componentName$b = getComponentName('user-attribute');
|
11798
11801
|
class RawUserAttribute extends createBaseClass({
|
11799
|
-
componentName: componentName$
|
11802
|
+
componentName: componentName$b,
|
11800
11803
|
baseSelector: ':host > .root',
|
11801
11804
|
}) {
|
11802
11805
|
constructor() {
|
@@ -12026,32 +12029,32 @@ const UserAttributeClass = compose(
|
|
12026
12029
|
componentNameValidationMixin
|
12027
12030
|
)(RawUserAttribute);
|
12028
12031
|
|
12029
|
-
const globalRefs$
|
12030
|
-
const vars$
|
12032
|
+
const globalRefs$8 = getThemeRefs(globals);
|
12033
|
+
const vars$b = UserAttributeClass.cssVarList;
|
12031
12034
|
|
12032
12035
|
const userAttribute = {
|
12033
|
-
[vars$
|
12034
|
-
[vars$
|
12035
|
-
[vars$
|
12036
|
-
[vars$
|
12037
|
-
[vars$
|
12038
|
-
[vars$
|
12036
|
+
[vars$b.hostDirection]: globalRefs$8.direction,
|
12037
|
+
[vars$b.labelTextWidth]: '150px',
|
12038
|
+
[vars$b.valueTextWidth]: '200px',
|
12039
|
+
[vars$b.badgeMaxWidth]: '85px',
|
12040
|
+
[vars$b.itemsGap]: '16px',
|
12041
|
+
[vars$b.hostMinWidth]: '530px',
|
12039
12042
|
_fullWidth: {
|
12040
|
-
[vars$
|
12043
|
+
[vars$b.hostWidth]: '100%',
|
12041
12044
|
},
|
12042
12045
|
};
|
12043
12046
|
|
12044
12047
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
12045
12048
|
__proto__: null,
|
12046
12049
|
default: userAttribute,
|
12047
|
-
vars: vars$
|
12050
|
+
vars: vars$b
|
12048
12051
|
});
|
12049
12052
|
|
12050
12053
|
var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
|
12051
12054
|
|
12052
|
-
const componentName$
|
12055
|
+
const componentName$a = getComponentName('user-auth-method');
|
12053
12056
|
class RawUserAuthMethod extends createBaseClass({
|
12054
|
-
componentName: componentName$
|
12057
|
+
componentName: componentName$a,
|
12055
12058
|
baseSelector: ':host > .root',
|
12056
12059
|
}) {
|
12057
12060
|
constructor() {
|
@@ -12243,33 +12246,33 @@ const UserAuthMethodClass = compose(
|
|
12243
12246
|
componentNameValidationMixin
|
12244
12247
|
)(RawUserAuthMethod);
|
12245
12248
|
|
12246
|
-
const globalRefs$
|
12247
|
-
const vars$
|
12249
|
+
const globalRefs$7 = getThemeRefs(globals);
|
12250
|
+
const vars$a = UserAuthMethodClass.cssVarList;
|
12248
12251
|
|
12249
12252
|
const userAuthMethod = {
|
12250
|
-
[vars$
|
12251
|
-
[vars$
|
12252
|
-
[vars$
|
12253
|
-
[vars$
|
12254
|
-
[vars$
|
12253
|
+
[vars$a.hostDirection]: globalRefs$7.direction,
|
12254
|
+
[vars$a.labelTextWidth]: '200px',
|
12255
|
+
[vars$a.itemsGap]: '16px',
|
12256
|
+
[vars$a.hostMinWidth]: '530px',
|
12257
|
+
[vars$a.iconSize]: '24px',
|
12255
12258
|
_fullWidth: {
|
12256
|
-
[vars$
|
12259
|
+
[vars$a.hostWidth]: '100%',
|
12257
12260
|
},
|
12258
12261
|
};
|
12259
12262
|
|
12260
12263
|
var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
|
12261
12264
|
__proto__: null,
|
12262
12265
|
default: userAuthMethod,
|
12263
|
-
vars: vars$
|
12266
|
+
vars: vars$a
|
12264
12267
|
});
|
12265
12268
|
|
12266
|
-
const componentName$
|
12269
|
+
const componentName$9 = getComponentName('saml-group-mappings-internal');
|
12267
12270
|
|
12268
|
-
createBaseInputClass({ componentName: componentName$
|
12271
|
+
createBaseInputClass({ componentName: componentName$9, baseSelector: '' });
|
12269
12272
|
|
12270
|
-
const componentName$
|
12273
|
+
const componentName$8 = getComponentName('saml-group-mappings');
|
12271
12274
|
|
12272
|
-
const customMixin$
|
12275
|
+
const customMixin$3 = (superclass) =>
|
12273
12276
|
class SamlGroupMappingsMixinClass extends superclass {
|
12274
12277
|
init() {
|
12275
12278
|
super.init?.();
|
@@ -12277,14 +12280,14 @@ const customMixin$1 = (superclass) =>
|
|
12277
12280
|
const template = document.createElement('template');
|
12278
12281
|
|
12279
12282
|
template.innerHTML = `
|
12280
|
-
<${componentName$
|
12283
|
+
<${componentName$9}
|
12281
12284
|
tabindex="-1"
|
12282
|
-
></${componentName$
|
12285
|
+
></${componentName$9}>
|
12283
12286
|
`;
|
12284
12287
|
|
12285
12288
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
12286
12289
|
|
12287
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
12290
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
12288
12291
|
|
12289
12292
|
forwardAttrs(this, this.inputElement, {
|
12290
12293
|
includeAttrs: [
|
@@ -12326,7 +12329,7 @@ const SamlGroupMappingsClass = compose(
|
|
12326
12329
|
proxyParentValidation: true,
|
12327
12330
|
}),
|
12328
12331
|
componentNameValidationMixin,
|
12329
|
-
customMixin$
|
12332
|
+
customMixin$3
|
12330
12333
|
)(
|
12331
12334
|
createProxy({
|
12332
12335
|
slots: [],
|
@@ -12361,61 +12364,61 @@ const SamlGroupMappingsClass = compose(
|
|
12361
12364
|
'options',
|
12362
12365
|
'error-message',
|
12363
12366
|
],
|
12364
|
-
componentName: componentName$
|
12367
|
+
componentName: componentName$8,
|
12365
12368
|
})
|
12366
12369
|
);
|
12367
12370
|
|
12368
|
-
const vars$
|
12371
|
+
const vars$9 = SamlGroupMappingsClass.cssVarList;
|
12369
12372
|
|
12370
12373
|
const samlGroupMappings = {
|
12371
|
-
[vars$
|
12372
|
-
[vars$
|
12373
|
-
[vars$
|
12374
|
+
[vars$9.hostWidth]: refs.width,
|
12375
|
+
[vars$9.hostDirection]: refs.direction,
|
12376
|
+
[vars$9.groupNameInputMarginBottom]: '1em',
|
12374
12377
|
};
|
12375
12378
|
|
12376
12379
|
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
12377
12380
|
__proto__: null,
|
12378
12381
|
default: samlGroupMappings,
|
12379
12382
|
samlGroupMappings: samlGroupMappings,
|
12380
|
-
vars: vars$
|
12383
|
+
vars: vars$9
|
12381
12384
|
});
|
12382
12385
|
|
12383
|
-
const globalRefs$
|
12384
|
-
const vars$
|
12386
|
+
const globalRefs$6 = getThemeRefs(globals);
|
12387
|
+
const vars$8 = PolicyValidationClass.cssVarList;
|
12385
12388
|
|
12386
12389
|
const policyValidation = {
|
12387
|
-
[vars$
|
12388
|
-
[vars$
|
12389
|
-
[vars$
|
12390
|
-
[vars$
|
12391
|
-
[vars$
|
12392
|
-
[vars$
|
12393
|
-
[vars$
|
12394
|
-
[vars$
|
12395
|
-
[vars$
|
12396
|
-
[vars$
|
12397
|
-
[vars$
|
12398
|
-
[vars$
|
12399
|
-
[vars$
|
12400
|
-
[vars$
|
12401
|
-
[vars$
|
12402
|
-
[vars$
|
12390
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
12391
|
+
[vars$8.fontSize]: refs.labelFontSize,
|
12392
|
+
[vars$8.textColor]: refs.labelTextColor,
|
12393
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
12394
|
+
[vars$8.borderStyle]: refs.borderStyle,
|
12395
|
+
[vars$8.borderColor]: refs.borderColor,
|
12396
|
+
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
12397
|
+
[vars$8.backgroundColor]: 'none',
|
12398
|
+
[vars$8.padding]: '0px',
|
12399
|
+
[vars$8.labelMargin]: globalRefs$6.spacing.sm,
|
12400
|
+
[vars$8.itemsSpacing]: globalRefs$6.spacing.lg,
|
12401
|
+
[vars$8.itemSymbolDefault]: "'\\2022'", // "•"
|
12402
|
+
[vars$8.itemSymbolSuccess]: "'\\2713'", // "✓"
|
12403
|
+
[vars$8.itemSymbolError]: "'\\2A09'", // "⨉"
|
12404
|
+
[vars$8.itemSymbolSuccessColor]: globalRefs$6.colors.success.main,
|
12405
|
+
[vars$8.itemSymbolErrorColor]: globalRefs$6.colors.error.main,
|
12403
12406
|
};
|
12404
12407
|
|
12405
12408
|
var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
12406
12409
|
__proto__: null,
|
12407
12410
|
default: policyValidation,
|
12408
|
-
vars: vars$
|
12411
|
+
vars: vars$8
|
12409
12412
|
});
|
12410
12413
|
|
12411
|
-
const vars$
|
12414
|
+
const vars$7 = IconClass.cssVarList;
|
12412
12415
|
|
12413
12416
|
const icon = {};
|
12414
12417
|
|
12415
12418
|
var icon$1 = /*#__PURE__*/Object.freeze({
|
12416
12419
|
__proto__: null,
|
12417
12420
|
default: icon,
|
12418
|
-
vars: vars$
|
12421
|
+
vars: vars$7
|
12419
12422
|
});
|
12420
12423
|
|
12421
12424
|
const decode = (input) => {
|
@@ -12428,9 +12431,9 @@ const tpl = (input, inline) => {
|
|
12428
12431
|
return inline ? input : `<pre>${input}</pre>`;
|
12429
12432
|
};
|
12430
12433
|
|
12431
|
-
const componentName$
|
12434
|
+
const componentName$7 = getComponentName('code-snippet');
|
12432
12435
|
|
12433
|
-
let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$
|
12436
|
+
let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > code' }) {
|
12434
12437
|
static get observedAttributes() {
|
12435
12438
|
return ['lang', 'inline'];
|
12436
12439
|
}
|
@@ -12660,9 +12663,9 @@ const CodeSnippetClass = compose(
|
|
12660
12663
|
componentNameValidationMixin
|
12661
12664
|
)(CodeSnippet$1);
|
12662
12665
|
|
12663
|
-
const globalRefs$
|
12666
|
+
const globalRefs$5 = getThemeRefs(globals);
|
12664
12667
|
|
12665
|
-
const vars$
|
12668
|
+
const vars$6 = CodeSnippetClass.cssVarList;
|
12666
12669
|
|
12667
12670
|
const light = {
|
12668
12671
|
color1: '#fa0',
|
@@ -12697,50 +12700,50 @@ const dark = {
|
|
12697
12700
|
};
|
12698
12701
|
|
12699
12702
|
const CodeSnippet = {
|
12700
|
-
[vars$
|
12701
|
-
[vars$
|
12702
|
-
[vars$
|
12703
|
-
[vars$
|
12704
|
-
[vars$
|
12705
|
-
[vars$
|
12706
|
-
[vars$
|
12707
|
-
[vars$
|
12708
|
-
[vars$
|
12709
|
-
[vars$
|
12710
|
-
[vars$
|
12711
|
-
[vars$
|
12712
|
-
[vars$
|
12713
|
-
[vars$
|
12714
|
-
[vars$
|
12715
|
-
[vars$
|
12716
|
-
[vars$
|
12717
|
-
[vars$
|
12718
|
-
[vars$
|
12719
|
-
[vars$
|
12720
|
-
[vars$
|
12721
|
-
[vars$
|
12722
|
-
[vars$
|
12723
|
-
[vars$
|
12724
|
-
[vars$
|
12725
|
-
[vars$
|
12726
|
-
[vars$
|
12727
|
-
[vars$
|
12728
|
-
[vars$
|
12729
|
-
[vars$
|
12730
|
-
[vars$
|
12731
|
-
[vars$
|
12732
|
-
[vars$
|
12733
|
-
[vars$
|
12734
|
-
[vars$
|
12735
|
-
[vars$
|
12736
|
-
[vars$
|
12737
|
-
[vars$
|
12738
|
-
[vars$
|
12739
|
-
[vars$
|
12740
|
-
[vars$
|
12741
|
-
[vars$
|
12742
|
-
[vars$
|
12743
|
-
[vars$
|
12703
|
+
[vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
|
12704
|
+
[vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
|
12705
|
+
[vars$6.docTagTextColor]: light.color2,
|
12706
|
+
[vars$6.keywordTextColor]: light.color2,
|
12707
|
+
[vars$6.metaKeywordTextColor]: light.color2,
|
12708
|
+
[vars$6.templateTagTextColor]: light.color2,
|
12709
|
+
[vars$6.templateVariableTextColor]: light.color2,
|
12710
|
+
[vars$6.typeTextColor]: light.color2,
|
12711
|
+
[vars$6.variableLanguageTextColor]: light.color2,
|
12712
|
+
[vars$6.titleTextColor]: light.color3,
|
12713
|
+
[vars$6.titleClassTextColor]: light.color3,
|
12714
|
+
[vars$6.titleClassInheritedTextColor]: light.color3,
|
12715
|
+
[vars$6.titleFunctionTextColor]: light.color3,
|
12716
|
+
[vars$6.attrTextColor]: light.color4,
|
12717
|
+
[vars$6.attributeTextColor]: light.color4,
|
12718
|
+
[vars$6.literalTextColor]: light.color4,
|
12719
|
+
[vars$6.metaTextColor]: light.color4,
|
12720
|
+
[vars$6.numberTextColor]: light.color4,
|
12721
|
+
[vars$6.operatorTextColor]: light.color4,
|
12722
|
+
[vars$6.variableTextColor]: light.color4,
|
12723
|
+
[vars$6.selectorAttrTextColor]: light.color4,
|
12724
|
+
[vars$6.selectorClassTextColor]: light.color4,
|
12725
|
+
[vars$6.selectorIdTextColor]: light.color4,
|
12726
|
+
[vars$6.regexpTextColor]: light.color13,
|
12727
|
+
[vars$6.stringTextColor]: light.color13,
|
12728
|
+
[vars$6.metaStringTextColor]: light.color13,
|
12729
|
+
[vars$6.builtInTextColor]: light.color5,
|
12730
|
+
[vars$6.symbolTextColor]: light.color5,
|
12731
|
+
[vars$6.commentTextColor]: light.color6,
|
12732
|
+
[vars$6.codeTextColor]: light.color6,
|
12733
|
+
[vars$6.formulaTextColor]: light.color6,
|
12734
|
+
[vars$6.nameTextColor]: light.color7,
|
12735
|
+
[vars$6.quoteTextColor]: light.color7,
|
12736
|
+
[vars$6.selectorTagTextColor]: light.color7,
|
12737
|
+
[vars$6.selectorPseudoTextColor]: light.color7,
|
12738
|
+
[vars$6.substTextColor]: light.color8,
|
12739
|
+
[vars$6.sectionTextColor]: light.color4,
|
12740
|
+
[vars$6.bulletTextColor]: light.color9,
|
12741
|
+
[vars$6.emphasisTextColor]: light.color8,
|
12742
|
+
[vars$6.strongTextColor]: light.color8,
|
12743
|
+
[vars$6.additionTextColor]: light.color7,
|
12744
|
+
[vars$6.additionBgColor]: light.color10,
|
12745
|
+
[vars$6.deletionTextColor]: light.color2,
|
12746
|
+
[vars$6.deletionBgColor]: light.color10,
|
12744
12747
|
/* purposely ignored */
|
12745
12748
|
// [vars.charEscapeTextColor]: '',
|
12746
12749
|
// [vars.linkTextColor]: '',
|
@@ -12752,50 +12755,50 @@ const CodeSnippet = {
|
|
12752
12755
|
|
12753
12756
|
const codeSnippetDarkThemeOverrides = {
|
12754
12757
|
codeSnippet: {
|
12755
|
-
[vars$
|
12756
|
-
[vars$
|
12757
|
-
[vars$
|
12758
|
-
[vars$
|
12759
|
-
[vars$
|
12760
|
-
[vars$
|
12761
|
-
[vars$
|
12762
|
-
[vars$
|
12763
|
-
[vars$
|
12764
|
-
[vars$
|
12765
|
-
[vars$
|
12766
|
-
[vars$
|
12767
|
-
[vars$
|
12768
|
-
[vars$
|
12769
|
-
[vars$
|
12770
|
-
[vars$
|
12771
|
-
[vars$
|
12772
|
-
[vars$
|
12773
|
-
[vars$
|
12774
|
-
[vars$
|
12775
|
-
[vars$
|
12776
|
-
[vars$
|
12777
|
-
[vars$
|
12778
|
-
[vars$
|
12779
|
-
[vars$
|
12780
|
-
[vars$
|
12781
|
-
[vars$
|
12782
|
-
[vars$
|
12783
|
-
[vars$
|
12784
|
-
[vars$
|
12785
|
-
[vars$
|
12786
|
-
[vars$
|
12787
|
-
[vars$
|
12788
|
-
[vars$
|
12789
|
-
[vars$
|
12790
|
-
[vars$
|
12791
|
-
[vars$
|
12792
|
-
[vars$
|
12793
|
-
[vars$
|
12794
|
-
[vars$
|
12795
|
-
[vars$
|
12796
|
-
[vars$
|
12797
|
-
[vars$
|
12798
|
-
[vars$
|
12758
|
+
[vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
|
12759
|
+
[vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
|
12760
|
+
[vars$6.docTagTextColor]: dark.color2,
|
12761
|
+
[vars$6.keywordTextColor]: dark.color2,
|
12762
|
+
[vars$6.metaKeywordTextColor]: dark.color2,
|
12763
|
+
[vars$6.templateTagTextColor]: dark.color2,
|
12764
|
+
[vars$6.templateVariableTextColor]: dark.color2,
|
12765
|
+
[vars$6.typeTextColor]: dark.color2,
|
12766
|
+
[vars$6.variableLanguageTextColor]: dark.color2,
|
12767
|
+
[vars$6.titleTextColor]: dark.color3,
|
12768
|
+
[vars$6.titleClassTextColor]: dark.color3,
|
12769
|
+
[vars$6.titleClassInheritedTextColor]: dark.color3,
|
12770
|
+
[vars$6.titleFunctionTextColor]: dark.color3,
|
12771
|
+
[vars$6.attrTextColor]: dark.color4,
|
12772
|
+
[vars$6.attributeTextColor]: dark.color4,
|
12773
|
+
[vars$6.literalTextColor]: dark.color4,
|
12774
|
+
[vars$6.metaTextColor]: dark.color4,
|
12775
|
+
[vars$6.numberTextColor]: dark.color4,
|
12776
|
+
[vars$6.operatorTextColor]: dark.color4,
|
12777
|
+
[vars$6.variableTextColor]: dark.color4,
|
12778
|
+
[vars$6.selectorAttrTextColor]: dark.color4,
|
12779
|
+
[vars$6.selectorClassTextColor]: dark.color4,
|
12780
|
+
[vars$6.selectorIdTextColor]: dark.color4,
|
12781
|
+
[vars$6.regexpTextColor]: dark.color13,
|
12782
|
+
[vars$6.stringTextColor]: dark.color13,
|
12783
|
+
[vars$6.metaStringTextColor]: dark.color13,
|
12784
|
+
[vars$6.builtInTextColor]: dark.color5,
|
12785
|
+
[vars$6.symbolTextColor]: dark.color5,
|
12786
|
+
[vars$6.commentTextColor]: dark.color6,
|
12787
|
+
[vars$6.codeTextColor]: dark.color6,
|
12788
|
+
[vars$6.formulaTextColor]: dark.color6,
|
12789
|
+
[vars$6.nameTextColor]: dark.color7,
|
12790
|
+
[vars$6.quoteTextColor]: dark.color7,
|
12791
|
+
[vars$6.selectorTagTextColor]: dark.color7,
|
12792
|
+
[vars$6.selectorPseudoTextColor]: dark.color7,
|
12793
|
+
[vars$6.substTextColor]: dark.color8,
|
12794
|
+
[vars$6.sectionTextColor]: dark.color4,
|
12795
|
+
[vars$6.bulletTextColor]: dark.color9,
|
12796
|
+
[vars$6.emphasisTextColor]: dark.color8,
|
12797
|
+
[vars$6.strongTextColor]: dark.color8,
|
12798
|
+
[vars$6.additionTextColor]: dark.color7,
|
12799
|
+
[vars$6.additionBgColor]: dark.color10,
|
12800
|
+
[vars$6.deletionTextColor]: dark.color2,
|
12801
|
+
[vars$6.deletionBgColor]: dark.color10,
|
12799
12802
|
},
|
12800
12803
|
};
|
12801
12804
|
|
@@ -12803,12 +12806,12 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
|
|
12803
12806
|
__proto__: null,
|
12804
12807
|
codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
|
12805
12808
|
default: CodeSnippet,
|
12806
|
-
vars: vars$
|
12809
|
+
vars: vars$6
|
12807
12810
|
});
|
12808
12811
|
|
12809
|
-
const componentName$
|
12812
|
+
const componentName$6 = getComponentName('radio-button');
|
12810
12813
|
|
12811
|
-
const customMixin = (superclass) =>
|
12814
|
+
const customMixin$2 = (superclass) =>
|
12812
12815
|
class CustomMixin extends superclass {
|
12813
12816
|
constructor() {
|
12814
12817
|
super();
|
@@ -12864,18 +12867,18 @@ const RadioButtonClass = compose(
|
|
12864
12867
|
}),
|
12865
12868
|
composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
12866
12869
|
componentNameValidationMixin,
|
12867
|
-
customMixin
|
12870
|
+
customMixin$2
|
12868
12871
|
)(
|
12869
12872
|
createProxy({
|
12870
12873
|
slots: [''],
|
12871
12874
|
wrappedEleName: 'vaadin-radio-button',
|
12872
12875
|
excludeAttrsSync: ['tabindex', 'data'],
|
12873
12876
|
includeForwardProps: ['checked', 'name', 'disabled'],
|
12874
|
-
componentName: componentName$
|
12877
|
+
componentName: componentName$6,
|
12875
12878
|
})
|
12876
12879
|
);
|
12877
12880
|
|
12878
|
-
const componentName$
|
12881
|
+
const componentName$5 = getComponentName('radio-group');
|
12879
12882
|
|
12880
12883
|
const RadioGroupMixin = (superclass) =>
|
12881
12884
|
class RadioGroupMixinClass extends superclass {
|
@@ -12890,12 +12893,12 @@ const RadioGroupMixin = (superclass) =>
|
|
12890
12893
|
|
12891
12894
|
// we are overriding vaadin children getter so it will run on our custom elements
|
12892
12895
|
Object.defineProperty(this.baseElement, 'children', {
|
12893
|
-
get: () => this.querySelectorAll(componentName$
|
12896
|
+
get: () => this.querySelectorAll(componentName$6),
|
12894
12897
|
});
|
12895
12898
|
|
12896
12899
|
// we are overriding vaadin __filterRadioButtons so it will run on our custom elements
|
12897
12900
|
this.baseElement.__filterRadioButtons = (nodes) => {
|
12898
|
-
return nodes.filter((node) => node.localName === componentName$
|
12901
|
+
return nodes.filter((node) => node.localName === componentName$6);
|
12899
12902
|
};
|
12900
12903
|
|
12901
12904
|
// vaadin radio group missing some input properties
|
@@ -13045,38 +13048,38 @@ const RadioGroupClass = compose(
|
|
13045
13048
|
`,
|
13046
13049
|
|
13047
13050
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
|
13048
|
-
componentName: componentName$
|
13051
|
+
componentName: componentName$5,
|
13049
13052
|
includeForwardProps: ['value'],
|
13050
13053
|
})
|
13051
13054
|
);
|
13052
13055
|
|
13053
|
-
const vars$
|
13054
|
-
const globalRefs$
|
13056
|
+
const vars$5 = RadioGroupClass.cssVarList;
|
13057
|
+
const globalRefs$4 = getThemeRefs(globals);
|
13055
13058
|
|
13056
13059
|
const radioGroup = {
|
13057
|
-
[vars$
|
13058
|
-
[vars$
|
13059
|
-
[vars$
|
13060
|
-
[vars$
|
13061
|
-
[vars$
|
13062
|
-
[vars$
|
13063
|
-
[vars$
|
13064
|
-
[vars$
|
13065
|
-
[vars$
|
13066
|
-
[vars$
|
13060
|
+
[vars$5.buttonsRowGap]: '9px',
|
13061
|
+
[vars$5.hostWidth]: refs.width,
|
13062
|
+
[vars$5.hostDirection]: refs.direction,
|
13063
|
+
[vars$5.fontSize]: refs.fontSize,
|
13064
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
13065
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
13066
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
13067
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
13068
|
+
[vars$5.helperTextColor]: refs.helperTextColor,
|
13069
|
+
[vars$5.itemsLabelColor]: globalRefs$4.colors.surface.contrast,
|
13067
13070
|
|
13068
13071
|
textAlign: {
|
13069
|
-
right: { [vars$
|
13070
|
-
left: { [vars$
|
13071
|
-
center: { [vars$
|
13072
|
+
right: { [vars$5.inputTextAlign]: 'right' },
|
13073
|
+
left: { [vars$5.inputTextAlign]: 'left' },
|
13074
|
+
center: { [vars$5.inputTextAlign]: 'center' },
|
13072
13075
|
},
|
13073
13076
|
|
13074
13077
|
_fullWidth: {
|
13075
|
-
[vars$
|
13078
|
+
[vars$5.buttonsSpacing]: 'space-between',
|
13076
13079
|
},
|
13077
13080
|
|
13078
13081
|
_disabled: {
|
13079
|
-
[vars$
|
13082
|
+
[vars$5.itemsLabelColor]: globalRefs$4.colors.surface.light,
|
13080
13083
|
},
|
13081
13084
|
};
|
13082
13085
|
|
@@ -13084,24 +13087,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
|
|
13084
13087
|
__proto__: null,
|
13085
13088
|
default: radioGroup,
|
13086
13089
|
radioGroup: radioGroup,
|
13087
|
-
vars: vars$
|
13090
|
+
vars: vars$5
|
13088
13091
|
});
|
13089
13092
|
|
13090
|
-
const vars$
|
13091
|
-
const globalRefs = getThemeRefs(globals);
|
13093
|
+
const vars$4 = RadioButtonClass.cssVarList;
|
13094
|
+
const globalRefs$3 = getThemeRefs(globals);
|
13092
13095
|
|
13093
13096
|
const radioButton = {
|
13094
|
-
[vars$
|
13095
|
-
[vars$
|
13096
|
-
[vars$
|
13097
|
-
[vars$
|
13098
|
-
[vars$
|
13099
|
-
[vars$
|
13100
|
-
[vars$
|
13101
|
-
[vars$
|
13097
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
13098
|
+
[vars$4.radioSize]: 'calc(1em + 6px)',
|
13099
|
+
[vars$4.radioMargin]: 'auto 4px',
|
13100
|
+
[vars$4.radioCheckedSize]: `calc(var(${vars$4.radioSize})/5)`,
|
13101
|
+
[vars$4.radioCheckedColor]: globalRefs$3.colors.surface.light,
|
13102
|
+
[vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.light,
|
13103
|
+
[vars$4.radioBorderColor]: 'none',
|
13104
|
+
[vars$4.radioBorderWidth]: 0,
|
13102
13105
|
|
13103
13106
|
_checked: {
|
13104
|
-
[vars$
|
13107
|
+
[vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.contrast,
|
13105
13108
|
},
|
13106
13109
|
|
13107
13110
|
_hover: {
|
@@ -13110,16 +13113,16 @@ const radioButton = {
|
|
13110
13113
|
|
13111
13114
|
size: {
|
13112
13115
|
xs: {
|
13113
|
-
[vars$
|
13116
|
+
[vars$4.fontSize]: '12px',
|
13114
13117
|
},
|
13115
13118
|
sm: {
|
13116
|
-
[vars$
|
13119
|
+
[vars$4.fontSize]: '14px',
|
13117
13120
|
},
|
13118
13121
|
md: {
|
13119
|
-
[vars$
|
13122
|
+
[vars$4.fontSize]: '16px',
|
13120
13123
|
},
|
13121
13124
|
lg: {
|
13122
|
-
[vars$
|
13125
|
+
[vars$4.fontSize]: '18px',
|
13123
13126
|
},
|
13124
13127
|
},
|
13125
13128
|
};
|
@@ -13128,6 +13131,514 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
|
|
13128
13131
|
__proto__: null,
|
13129
13132
|
default: radioButton,
|
13130
13133
|
radioButton: radioButton,
|
13134
|
+
vars: vars$4
|
13135
|
+
});
|
13136
|
+
|
13137
|
+
const activeableMixin = (superclass) =>
|
13138
|
+
class ActiveableMixinClass extends superclass {
|
13139
|
+
init() {
|
13140
|
+
super.init?.();
|
13141
|
+
|
13142
|
+
this.baseElement.addEventListener('mousedown', (e) => {
|
13143
|
+
e.preventDefault();
|
13144
|
+
this.setAttribute('active', 'true');
|
13145
|
+
window.addEventListener('mouseup', () => this.removeAttribute('active'), {
|
13146
|
+
once: true,
|
13147
|
+
});
|
13148
|
+
});
|
13149
|
+
}
|
13150
|
+
};
|
13151
|
+
|
13152
|
+
const componentName$4 = getComponentName('list-item');
|
13153
|
+
|
13154
|
+
const customMixin$1 = (superclass) =>
|
13155
|
+
class ListItemMixinClass extends superclass {
|
13156
|
+
constructor() {
|
13157
|
+
super();
|
13158
|
+
|
13159
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
13160
|
+
<style>
|
13161
|
+
/*css*/
|
13162
|
+
slot {
|
13163
|
+
width: 100%;
|
13164
|
+
display: flex;
|
13165
|
+
overflow: hidden;
|
13166
|
+
box-sizing: border-box;
|
13167
|
+
}
|
13168
|
+
:host {
|
13169
|
+
display: block;
|
13170
|
+
}
|
13171
|
+
|
13172
|
+
/*!css*/
|
13173
|
+
</style>
|
13174
|
+
<slot></slot>
|
13175
|
+
`;
|
13176
|
+
}
|
13177
|
+
};
|
13178
|
+
|
13179
|
+
const ListItemClass = compose(
|
13180
|
+
createStyleMixin({
|
13181
|
+
mappings: {
|
13182
|
+
padding: {},
|
13183
|
+
backgroundColor: {},
|
13184
|
+
borderColor: {},
|
13185
|
+
borderStyle: {},
|
13186
|
+
borderWidth: {},
|
13187
|
+
borderRadius: {},
|
13188
|
+
outline: {},
|
13189
|
+
cursor: {},
|
13190
|
+
gap: {},
|
13191
|
+
maxWidth: { selector: () => ':host' },
|
13192
|
+
alignItems: {},
|
13193
|
+
flexDirection: {},
|
13194
|
+
transition: {},
|
13195
|
+
},
|
13196
|
+
}),
|
13197
|
+
draggableMixin,
|
13198
|
+
componentNameValidationMixin,
|
13199
|
+
customMixin$1,
|
13200
|
+
activeableMixin
|
13201
|
+
)(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
|
13202
|
+
|
13203
|
+
const componentName$3 = getComponentName('list');
|
13204
|
+
|
13205
|
+
class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
|
13206
|
+
static get observedAttributes() {
|
13207
|
+
return ['variant'];
|
13208
|
+
}
|
13209
|
+
|
13210
|
+
constructor() {
|
13211
|
+
super();
|
13212
|
+
|
13213
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
13214
|
+
<style>
|
13215
|
+
/*css*/
|
13216
|
+
.wrapper {
|
13217
|
+
overflow: auto;
|
13218
|
+
display: grid;
|
13219
|
+
max-height: 100%;
|
13220
|
+
width: 100%;
|
13221
|
+
}
|
13222
|
+
|
13223
|
+
:host {
|
13224
|
+
display: inline-flex;
|
13225
|
+
width: 100%;
|
13226
|
+
}
|
13227
|
+
slot[name="empty-state"] {
|
13228
|
+
justify-content: center;
|
13229
|
+
align-items: center;
|
13230
|
+
display: flex;
|
13231
|
+
flex-grow: 1;
|
13232
|
+
}
|
13233
|
+
|
13234
|
+
:host slot[name="empty-state"] {
|
13235
|
+
display: none;
|
13236
|
+
}
|
13237
|
+
:host([empty]) slot[name="empty-state"] {
|
13238
|
+
display: flex;
|
13239
|
+
}
|
13240
|
+
::slotted(:not([slot])) {
|
13241
|
+
width: 100%;
|
13242
|
+
}
|
13243
|
+
/*!css*/
|
13244
|
+
</style>
|
13245
|
+
|
13246
|
+
<div class="wrapper">
|
13247
|
+
<slot></slot>
|
13248
|
+
<slot name="empty-state">
|
13249
|
+
No item...
|
13250
|
+
</slot>
|
13251
|
+
</div>
|
13252
|
+
`;
|
13253
|
+
}
|
13254
|
+
|
13255
|
+
get items() {
|
13256
|
+
return this.shadowRoot.querySelector('slot').assignedElements();
|
13257
|
+
}
|
13258
|
+
|
13259
|
+
#handleEmptyState() {
|
13260
|
+
if (this.items.length === 0) {
|
13261
|
+
this.setAttribute('empty', 'true');
|
13262
|
+
} else {
|
13263
|
+
this.removeAttribute('empty');
|
13264
|
+
}
|
13265
|
+
}
|
13266
|
+
|
13267
|
+
get variant() {
|
13268
|
+
return this.getAttribute('variant') || 'list';
|
13269
|
+
}
|
13270
|
+
|
13271
|
+
#handleItemsVariant() {
|
13272
|
+
this.items.forEach((item) => {
|
13273
|
+
let listItem = item;
|
13274
|
+
if (listItem.localName !== ListItemClass.componentName) {
|
13275
|
+
listItem = item.querySelector(ListItemClass.componentName);
|
13276
|
+
}
|
13277
|
+
|
13278
|
+
const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
|
13279
|
+
listItem.setAttribute('variant', listItemVariant);
|
13280
|
+
});
|
13281
|
+
}
|
13282
|
+
|
13283
|
+
init() {
|
13284
|
+
super.init?.();
|
13285
|
+
|
13286
|
+
// we want new items to get the size
|
13287
|
+
observeChildren(this, () => {
|
13288
|
+
this.#handleEmptyState();
|
13289
|
+
this.#handleItemsVariant();
|
13290
|
+
});
|
13291
|
+
}
|
13292
|
+
|
13293
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
13294
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
13295
|
+
|
13296
|
+
if (newValue === oldValue) return;
|
13297
|
+
|
13298
|
+
if (name === 'variant') {
|
13299
|
+
this.#handleItemsVariant();
|
13300
|
+
}
|
13301
|
+
}
|
13302
|
+
}
|
13303
|
+
|
13304
|
+
const ListClass = compose(
|
13305
|
+
createStyleMixin({
|
13306
|
+
mappings: {
|
13307
|
+
hostWidth: { selector: () => ':host', property: 'width' },
|
13308
|
+
maxHeight: { selector: () => ':host' },
|
13309
|
+
minHeight: {},
|
13310
|
+
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
13311
|
+
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
13312
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
13313
|
+
fontFamily: {},
|
13314
|
+
gap: {},
|
13315
|
+
|
13316
|
+
backgroundColor: {},
|
13317
|
+
borderRadius: {},
|
13318
|
+
borderColor: {},
|
13319
|
+
borderStyle: {},
|
13320
|
+
borderWidth: {},
|
13321
|
+
|
13322
|
+
boxShadow: {},
|
13323
|
+
gridTemplateColumns: {},
|
13324
|
+
maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
|
13325
|
+
minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
|
13326
|
+
itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
|
13327
|
+
emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
|
13328
|
+
emptyStateTextFontFamily: {
|
13329
|
+
selector: () => 'slot[name="empty-state"]',
|
13330
|
+
property: 'font-family',
|
13331
|
+
},
|
13332
|
+
},
|
13333
|
+
}),
|
13334
|
+
draggableMixin,
|
13335
|
+
componentNameValidationMixin
|
13336
|
+
)(RawList);
|
13337
|
+
|
13338
|
+
const globalRefs$2 = getThemeRefs(globals);
|
13339
|
+
|
13340
|
+
const compVars = ListClass.cssVarList;
|
13341
|
+
|
13342
|
+
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
13343
|
+
{ shadowColor: '#00000020' },
|
13344
|
+
componentName$3
|
13345
|
+
);
|
13346
|
+
|
13347
|
+
const { shadowColor } = helperRefs;
|
13348
|
+
|
13349
|
+
const list$1 = {
|
13350
|
+
...helperTheme,
|
13351
|
+
|
13352
|
+
[compVars.hostWidth]: '100%',
|
13353
|
+
[compVars.backgroundColor]: globalRefs$2.colors.surface.main,
|
13354
|
+
[compVars.fontFamily]: globalRefs$2.fonts.font1.family,
|
13355
|
+
[compVars.borderColor]: globalRefs$2.colors.surface.light,
|
13356
|
+
[compVars.borderStyle]: 'solid',
|
13357
|
+
[compVars.borderWidth]: globalRefs$2.border.xs,
|
13358
|
+
[compVars.borderRadius]: globalRefs$2.radius.sm,
|
13359
|
+
[compVars.gap]: globalRefs$2.spacing.md,
|
13360
|
+
[compVars.verticalPadding]: globalRefs$2.spacing.lg,
|
13361
|
+
[compVars.horizontalPadding]: globalRefs$2.spacing.lg,
|
13362
|
+
[compVars.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor}`,
|
13363
|
+
[compVars.maxHeight]: '100%',
|
13364
|
+
[compVars.hostDirection]: globalRefs$2.direction,
|
13365
|
+
[compVars.minItemsWidth]: '150px',
|
13366
|
+
|
13367
|
+
_empty: {
|
13368
|
+
[compVars.minHeight]: '150px',
|
13369
|
+
[compVars.emptyStateTextColor]: globalRefs$2.colors.surface.dark,
|
13370
|
+
[compVars.emptyStateTextFontFamily]: globalRefs$2.fonts.font1.family,
|
13371
|
+
},
|
13372
|
+
|
13373
|
+
variant: {
|
13374
|
+
tiles: {
|
13375
|
+
[compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
|
13376
|
+
compVars.minItemsWidth
|
13377
|
+
)}, 100%), 1fr))`,
|
13378
|
+
[compVars.maxItemsWidth]: '200px',
|
13379
|
+
[compVars.itemsHorizontalAlign]: 'center',
|
13380
|
+
},
|
13381
|
+
},
|
13382
|
+
};
|
13383
|
+
|
13384
|
+
const vars$3 = {
|
13385
|
+
...compVars,
|
13386
|
+
...helperVars,
|
13387
|
+
};
|
13388
|
+
|
13389
|
+
var list$2 = /*#__PURE__*/Object.freeze({
|
13390
|
+
__proto__: null,
|
13391
|
+
default: list$1,
|
13392
|
+
vars: vars$3
|
13393
|
+
});
|
13394
|
+
|
13395
|
+
const globalRefs$1 = getThemeRefs(globals);
|
13396
|
+
|
13397
|
+
const vars$2 = ListItemClass.cssVarList;
|
13398
|
+
|
13399
|
+
const list = {
|
13400
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
|
13401
|
+
[vars$2.padding]: globalRefs$1.spacing.lg,
|
13402
|
+
[vars$2.gap]: globalRefs$1.spacing.md,
|
13403
|
+
[vars$2.borderStyle]: 'solid',
|
13404
|
+
[vars$2.borderWidth]: globalRefs$1.border.xs,
|
13405
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
13406
|
+
[vars$2.borderRadius]: globalRefs$1.radius.sm,
|
13407
|
+
[vars$2.cursor]: 'pointer',
|
13408
|
+
[vars$2.alignItems]: 'center',
|
13409
|
+
[vars$2.flexDirection]: 'row',
|
13410
|
+
[vars$2.transition]: 'border-color 0.2s, background-color 0.2s',
|
13411
|
+
|
13412
|
+
variant: {
|
13413
|
+
tile: {
|
13414
|
+
[vars$2.alignItems]: 'flex-start',
|
13415
|
+
[vars$2.flexDirection]: 'column',
|
13416
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.light,
|
13417
|
+
},
|
13418
|
+
},
|
13419
|
+
|
13420
|
+
_hover: {
|
13421
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.highlight,
|
13422
|
+
},
|
13423
|
+
|
13424
|
+
_active: {
|
13425
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
|
13426
|
+
[vars$2.borderColor]: globalRefs$1.colors.primary.light,
|
13427
|
+
[vars$2.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
|
13428
|
+
},
|
13429
|
+
};
|
13430
|
+
|
13431
|
+
var listItem = /*#__PURE__*/Object.freeze({
|
13432
|
+
__proto__: null,
|
13433
|
+
default: list,
|
13434
|
+
vars: vars$2
|
13435
|
+
});
|
13436
|
+
|
13437
|
+
const defaultValidateSchema = () => true;
|
13438
|
+
const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
|
13439
|
+
|
13440
|
+
const createTemplate = (templateString) => {
|
13441
|
+
const template = document.createElement('template');
|
13442
|
+
template.innerHTML = templateString;
|
13443
|
+
|
13444
|
+
return template;
|
13445
|
+
};
|
13446
|
+
|
13447
|
+
const getTemplateContent = (templateOrString) => {
|
13448
|
+
if (typeof templateOrString === 'string') {
|
13449
|
+
return createTemplate(templateOrString).content;
|
13450
|
+
}
|
13451
|
+
|
13452
|
+
if (templateOrString instanceof HTMLTemplateElement) {
|
13453
|
+
return templateOrString.content;
|
13454
|
+
}
|
13455
|
+
|
13456
|
+
// eslint-disable-next-line no-console
|
13457
|
+
console.error('Invalid template', templateOrString);
|
13458
|
+
return null;
|
13459
|
+
};
|
13460
|
+
|
13461
|
+
const createDynamicDataMixin =
|
13462
|
+
({
|
13463
|
+
itemRenderer = defaultItemRenderer,
|
13464
|
+
validateSchema = defaultValidateSchema,
|
13465
|
+
slotName,
|
13466
|
+
rerenderAttrsList = [],
|
13467
|
+
}) =>
|
13468
|
+
(superclass) =>
|
13469
|
+
class DynamicDataMixinClass extends superclass {
|
13470
|
+
#data = [];
|
13471
|
+
|
13472
|
+
// eslint-disable-next-line class-methods-use-this
|
13473
|
+
#validateSchema(data) {
|
13474
|
+
if (!validateSchema) return true;
|
13475
|
+
|
13476
|
+
const validation = validateSchema(data);
|
13477
|
+
if (validation === true) return true;
|
13478
|
+
|
13479
|
+
// eslint-disable-next-line no-console
|
13480
|
+
console.error('Data schema validation failed', validation || '');
|
13481
|
+
|
13482
|
+
return false;
|
13483
|
+
}
|
13484
|
+
|
13485
|
+
#removeOldItems() {
|
13486
|
+
const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
|
13487
|
+
this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
|
13488
|
+
}
|
13489
|
+
|
13490
|
+
#renderItems() {
|
13491
|
+
this.#removeOldItems();
|
13492
|
+
this.data.forEach((item, index) => {
|
13493
|
+
const content = getTemplateContent(itemRenderer(item, index, this));
|
13494
|
+
this.baseElement.appendChild(content?.cloneNode(true));
|
13495
|
+
});
|
13496
|
+
}
|
13497
|
+
|
13498
|
+
set data(value) {
|
13499
|
+
if (this.#validateSchema(value)) {
|
13500
|
+
this.#data = value;
|
13501
|
+
this.#renderItems();
|
13502
|
+
}
|
13503
|
+
}
|
13504
|
+
|
13505
|
+
get data() {
|
13506
|
+
return this.#data;
|
13507
|
+
}
|
13508
|
+
|
13509
|
+
init() {
|
13510
|
+
super.init?.();
|
13511
|
+
|
13512
|
+
if (rerenderAttrsList.length) {
|
13513
|
+
observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
|
13514
|
+
} else {
|
13515
|
+
this.#renderItems();
|
13516
|
+
}
|
13517
|
+
}
|
13518
|
+
};
|
13519
|
+
|
13520
|
+
const componentName$2 = getComponentName('apps-list');
|
13521
|
+
|
13522
|
+
const limitAbbreviation = (str, limit = 3) =>
|
13523
|
+
str
|
13524
|
+
.trim()
|
13525
|
+
.split(' ')
|
13526
|
+
.splice(0, limit)
|
13527
|
+
.map((s) => s[0]?.toUpperCase())
|
13528
|
+
.join('');
|
13529
|
+
|
13530
|
+
const itemRenderer = ({ name, icon, url }, _, ref) => `
|
13531
|
+
<a href="${url}" target="_blank" title="${url}">
|
13532
|
+
<descope-list-item>
|
13533
|
+
<descope-avatar
|
13534
|
+
img="${icon}"
|
13535
|
+
display-name="${name}"
|
13536
|
+
abbr=${limitAbbreviation(name)}
|
13537
|
+
size=${ref.size}
|
13538
|
+
></descope-avatar>
|
13539
|
+
<descope-text
|
13540
|
+
variant="body1"
|
13541
|
+
mode="primary"
|
13542
|
+
>${name}</descope-text>
|
13543
|
+
</descope-list-item>
|
13544
|
+
</a>
|
13545
|
+
`;
|
13546
|
+
|
13547
|
+
const customMixin = (superclass) =>
|
13548
|
+
class AppsListMixinClass extends superclass {
|
13549
|
+
get size() {
|
13550
|
+
return this.getAttribute('size') || 'sm';
|
13551
|
+
}
|
13552
|
+
};
|
13553
|
+
|
13554
|
+
const AppsListClass = compose(
|
13555
|
+
createStyleMixin({
|
13556
|
+
mappings: {
|
13557
|
+
maxHeight: { selector: () => ':host' },
|
13558
|
+
minHeight: { selector: () => ':host' },
|
13559
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
13560
|
+
itemsFontWeight: {
|
13561
|
+
selector: TextClass.componentName,
|
13562
|
+
property: TextClass.cssVarList.fontWeight,
|
13563
|
+
},
|
13564
|
+
itemsFontSize: {
|
13565
|
+
selector: TextClass.componentName,
|
13566
|
+
property: TextClass.cssVarList.fontSize,
|
13567
|
+
},
|
13568
|
+
itemsTextAlign: {
|
13569
|
+
selector: TextClass.componentName,
|
13570
|
+
property: TextClass.cssVarList.textAlign,
|
13571
|
+
},
|
13572
|
+
},
|
13573
|
+
}),
|
13574
|
+
createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
|
13575
|
+
draggableMixin,
|
13576
|
+
componentNameValidationMixin,
|
13577
|
+
customMixin
|
13578
|
+
)(
|
13579
|
+
createProxy({
|
13580
|
+
slots: ['empty-state'],
|
13581
|
+
wrappedEleName: 'descope-list',
|
13582
|
+
excludeAttrsSync: ['tabindex', 'class'],
|
13583
|
+
componentName: componentName$2,
|
13584
|
+
style: () => `
|
13585
|
+
:host {
|
13586
|
+
width: 100%;
|
13587
|
+
display: inline-flex;
|
13588
|
+
}
|
13589
|
+
|
13590
|
+
descope-text::part(text-wrapper) {
|
13591
|
+
display: -webkit-box;
|
13592
|
+
-webkit-line-clamp: 2;
|
13593
|
+
-webkit-box-orient: vertical;
|
13594
|
+
overflow: hidden;
|
13595
|
+
}
|
13596
|
+
|
13597
|
+
a {
|
13598
|
+
text-decoration: none;
|
13599
|
+
}
|
13600
|
+
|
13601
|
+
descope-text {
|
13602
|
+
${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
|
13603
|
+
}
|
13604
|
+
`,
|
13605
|
+
})
|
13606
|
+
);
|
13607
|
+
|
13608
|
+
const vars$1 = AppsListClass.cssVarList;
|
13609
|
+
const globalRefs = getThemeRefs(globals);
|
13610
|
+
|
13611
|
+
const defaultHeight = '400px';
|
13612
|
+
|
13613
|
+
const appsList = {
|
13614
|
+
[vars$1.itemsFontWeight]: 'normal',
|
13615
|
+
[vars$1.itemsTextAlign]: 'start',
|
13616
|
+
[vars$1.hostDirection]: globalRefs.direction,
|
13617
|
+
[vars$1.maxHeight]: defaultHeight,
|
13618
|
+
|
13619
|
+
_empty: {
|
13620
|
+
[vars$1.minHeight]: defaultHeight,
|
13621
|
+
},
|
13622
|
+
|
13623
|
+
size: {
|
13624
|
+
xs: {
|
13625
|
+
[vars$1.itemsFontSize]: '14px',
|
13626
|
+
},
|
13627
|
+
sm: {
|
13628
|
+
[vars$1.itemsFontSize]: '14px',
|
13629
|
+
},
|
13630
|
+
md: {
|
13631
|
+
[vars$1.itemsFontSize]: '16px',
|
13632
|
+
},
|
13633
|
+
lg: {
|
13634
|
+
[vars$1.itemsFontSize]: '20px',
|
13635
|
+
},
|
13636
|
+
},
|
13637
|
+
};
|
13638
|
+
|
13639
|
+
var appsList$1 = /*#__PURE__*/Object.freeze({
|
13640
|
+
__proto__: null,
|
13641
|
+
default: appsList,
|
13131
13642
|
vars: vars$1
|
13132
13643
|
});
|
13133
13644
|
|
@@ -13176,6 +13687,9 @@ const components = {
|
|
13176
13687
|
codeSnippet,
|
13177
13688
|
radioGroup: radioGroup$1,
|
13178
13689
|
radioButton: radioButton$1,
|
13690
|
+
list: list$2,
|
13691
|
+
listItem,
|
13692
|
+
appsList: appsList$1,
|
13179
13693
|
};
|
13180
13694
|
|
13181
13695
|
const theme = Object.keys(components).reduce(
|
@@ -13188,7 +13702,7 @@ const vars = Object.keys(components).reduce(
|
|
13188
13702
|
);
|
13189
13703
|
|
13190
13704
|
const defaultTheme = { globals, components: theme };
|
13191
|
-
const themeVars = { globals: vars$
|
13705
|
+
const themeVars = { globals: vars$M, components: vars };
|
13192
13706
|
|
13193
13707
|
const colors = {
|
13194
13708
|
surface: {
|
@@ -13528,6 +14042,7 @@ const NotificationClass = compose(
|
|
13528
14042
|
})
|
13529
14043
|
);
|
13530
14044
|
|
14045
|
+
exports.AppsListClass = AppsListClass;
|
13531
14046
|
exports.AvatarClass = AvatarClass;
|
13532
14047
|
exports.BadgeClass = BadgeClass;
|
13533
14048
|
exports.ButtonClass = ButtonClass;
|
@@ -13543,6 +14058,8 @@ exports.EnrichedTextClass = EnrichedTextClass;
|
|
13543
14058
|
exports.GridClass = GridClass;
|
13544
14059
|
exports.ImageClass = ImageClass;
|
13545
14060
|
exports.LinkClass = LinkClass;
|
14061
|
+
exports.ListClass = ListClass;
|
14062
|
+
exports.ListItemClass = ListItemClass;
|
13546
14063
|
exports.LoaderLinearClass = LoaderLinearClass;
|
13547
14064
|
exports.LoaderRadialClass = LoaderRadialClass;
|
13548
14065
|
exports.LogoClass = LogoClass;
|