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