@descope/web-components-ui 1.0.322 → 1.0.323
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +480 -19
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +500 -21
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4392.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +7 -7
- package/dist/umd/descope-email-field-index-js.js +3 -3
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +2 -2
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +57 -0
- package/src/components/descope-email-field/EmailFieldClass.js +9 -0
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +31 -0
- package/src/components/descope-new-password/NewPasswordClass.js +7 -0
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +1 -0
- package/src/components/descope-number-field/NumberFieldClass.js +9 -0
- package/src/components/descope-password/PasswordClass.js +30 -0
- package/src/components/descope-text-field/TextFieldClass.js +24 -1
- package/src/components/descope-text-field/textFieldMappings.js +40 -6
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +36 -4
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +19 -3
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +45 -1
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -0
- package/src/helpers/themeHelpers/resetHelpers.js +15 -0
- package/src/theme/components/comboBox.js +17 -0
- package/src/theme/components/emailField.js +17 -0
- package/src/theme/components/inputWrapper.js +35 -0
- package/src/theme/components/multiSelectComboBox.js +22 -0
- package/src/theme/components/newPassword.js +10 -0
- package/src/theme/components/numberField.js +17 -0
- package/src/theme/components/password.js +17 -0
- package/src/theme/components/phoneField.js +8 -0
- package/src/theme/components/phoneInputBoxField.js +17 -0
- package/src/theme/components/textField.js +17 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -2941,7 +2941,10 @@ const {
|
|
2941
2941
|
host: { selector: () => ':host' },
|
2942
2942
|
label: { selector: '::part(label)' },
|
2943
2943
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2944
|
-
placeholder:
|
2944
|
+
placeholder: [
|
2945
|
+
{ selector: '> input:placeholder-shown' },
|
2946
|
+
{ selector: () => ':host::slotted(input:placeholder-shown)' },
|
2947
|
+
],
|
2945
2948
|
disabledPlaceholder: { selector: '> input:disabled::placeholder' },
|
2946
2949
|
inputField: { selector: '::part(input-field)' },
|
2947
2950
|
input: { selector: 'input' },
|
@@ -2959,11 +2962,8 @@ var textFieldMappings = {
|
|
2959
2962
|
fontSize: [{}, host$m],
|
2960
2963
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
2961
2964
|
|
2962
|
-
|
2963
|
-
|
2964
|
-
hostDirection: { ...host$m, property: 'direction' },
|
2965
|
-
|
2966
|
-
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2965
|
+
labelFontSize: { ...label$9, property: 'font-size' },
|
2966
|
+
labelFontWeight: { ...label$9, property: 'font-weight' },
|
2967
2967
|
|
2968
2968
|
labelTextColor: [
|
2969
2969
|
{ ...label$9, property: 'color' },
|
@@ -2971,6 +2971,13 @@ var textFieldMappings = {
|
|
2971
2971
|
{ ...label$9, property: '-webkit-text-fill-color' },
|
2972
2972
|
{ ...requiredIndicator$b, property: '-webkit-text-fill-color' },
|
2973
2973
|
],
|
2974
|
+
|
2975
|
+
hostWidth: { ...host$m, property: 'width' },
|
2976
|
+
hostMinWidth: { ...host$m, property: 'min-width' },
|
2977
|
+
hostDirection: { ...host$m, property: 'direction' },
|
2978
|
+
|
2979
|
+
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2980
|
+
|
2974
2981
|
errorMessageTextColor: { ...errorMessage$c, property: 'color' },
|
2975
2982
|
helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
|
2976
2983
|
|
@@ -3010,11 +3017,38 @@ var textFieldMappings = {
|
|
3010
3017
|
],
|
3011
3018
|
|
3012
3019
|
inputPlaceholderColor: [
|
3020
|
+
{ selector: () => ':host input:placeholder-shown', property: 'color' },
|
3013
3021
|
{ ...placeholder$3, property: 'color' },
|
3014
3022
|
{ ...externalPlaceholder, property: 'color' },
|
3015
3023
|
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
3016
3024
|
{ ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
|
3017
3025
|
],
|
3026
|
+
|
3027
|
+
labelPosition: { ...label$9, property: 'position' },
|
3028
|
+
labelTopPosition: { ...label$9, property: 'top' },
|
3029
|
+
labelHorizontalPosition: [
|
3030
|
+
{ ...label$9, property: 'left' },
|
3031
|
+
{ ...label$9, property: 'right' },
|
3032
|
+
],
|
3033
|
+
inputTransformY: { ...label$9, property: 'transform' },
|
3034
|
+
inputTransition: { ...label$9, property: 'transition' },
|
3035
|
+
marginInlineStart: { ...label$9, property: 'margin-inline-start' },
|
3036
|
+
placeholderOpacity: [
|
3037
|
+
{ selector: '> input:placeholder-shown', property: 'opacity' },
|
3038
|
+
{ ...externalPlaceholder, property: 'opacity' },
|
3039
|
+
],
|
3040
|
+
inputVerticalAlignment: [
|
3041
|
+
{ ...inputField$6, property: 'align-items' },
|
3042
|
+
{ ...externalInput, property: 'align-items' },
|
3043
|
+
],
|
3044
|
+
valueInputHeight: [
|
3045
|
+
{ ...input, property: 'height' },
|
3046
|
+
{ ...externalInput, property: 'height' },
|
3047
|
+
],
|
3048
|
+
valueInputMarginBottom: [
|
3049
|
+
{ ...input, property: 'margin-bottom' },
|
3050
|
+
{ ...externalInput, property: 'margin-bottom' },
|
3051
|
+
],
|
3018
3052
|
};
|
3019
3053
|
|
3020
3054
|
const useHostExternalPadding = (cssVarList) => `
|
@@ -3146,9 +3180,24 @@ const resetInputLabelPosition = (name) => `
|
|
3146
3180
|
}
|
3147
3181
|
`;
|
3148
3182
|
|
3183
|
+
const inputFloatingLabelStyle = () => {
|
3184
|
+
return `
|
3185
|
+
:host([label-type="floating"]) {
|
3186
|
+
position: relative;
|
3187
|
+
}
|
3188
|
+
:host([label-type="floating"][has-label]) [slot="label"] {
|
3189
|
+
padding: 0;
|
3190
|
+
}
|
3191
|
+
:host([label-type="floating"][has-label]) > ::part(label) {
|
3192
|
+
z-index: 1;
|
3193
|
+
padding: 0;
|
3194
|
+
}
|
3195
|
+
`;
|
3196
|
+
};
|
3197
|
+
|
3149
3198
|
const componentName$Q = getComponentName('text-field');
|
3150
3199
|
|
3151
|
-
const observedAttrs = ['type'];
|
3200
|
+
const observedAttrs = ['type', 'label-type'];
|
3152
3201
|
|
3153
3202
|
const customMixin$a = (superclass) =>
|
3154
3203
|
class TextFieldClass extends superclass {
|
@@ -3156,6 +3205,10 @@ const customMixin$a = (superclass) =>
|
|
3156
3205
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
3157
3206
|
}
|
3158
3207
|
|
3208
|
+
onLabelClick() {
|
3209
|
+
this.focus();
|
3210
|
+
}
|
3211
|
+
|
3159
3212
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
3160
3213
|
super.attributeChangeCallback?.(attrName, oldVal, newVal);
|
3161
3214
|
|
@@ -3167,6 +3220,16 @@ const customMixin$a = (superclass) =>
|
|
3167
3220
|
if (attrName === 'type') {
|
3168
3221
|
this.baseElement._setType(newVal);
|
3169
3222
|
}
|
3223
|
+
|
3224
|
+
if (oldVal !== newVal) {
|
3225
|
+
if (attrName === 'label-type') {
|
3226
|
+
if (newVal === 'floating') {
|
3227
|
+
this.addEventListener('click', this.onLabelClick);
|
3228
|
+
} else {
|
3229
|
+
this.removeEventListener('click', this.onLabelClick);
|
3230
|
+
}
|
3231
|
+
}
|
3232
|
+
}
|
3170
3233
|
}
|
3171
3234
|
|
3172
3235
|
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
@@ -3219,9 +3282,17 @@ const TextFieldClass = compose(
|
|
3219
3282
|
:host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
|
3220
3283
|
opacity: 1;
|
3221
3284
|
}
|
3285
|
+
|
3286
|
+
vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
3287
|
+
opacity: 0;
|
3288
|
+
}
|
3289
|
+
vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
3290
|
+
opacity: 0;
|
3291
|
+
}
|
3222
3292
|
${resetInputLabelPosition('vaadin-text-field')}
|
3223
3293
|
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
3224
3294
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3295
|
+
${inputFloatingLabelStyle()}
|
3225
3296
|
`,
|
3226
3297
|
excludeAttrsSync: ['tabindex'],
|
3227
3298
|
componentName: componentName$Q,
|
@@ -3235,6 +3306,7 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3235
3306
|
{
|
3236
3307
|
labelTextColor: globalRefs$q.colors.surface.dark,
|
3237
3308
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
3309
|
+
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
3238
3310
|
valueTextColor: globalRefs$q.colors.surface.contrast,
|
3239
3311
|
placeholderTextColor: globalRefs$q.colors.surface.dark,
|
3240
3312
|
requiredIndicator: "'*'",
|
@@ -3272,6 +3344,40 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3272
3344
|
lg: { fontSize: '18px', chipFontSize: '16px' },
|
3273
3345
|
},
|
3274
3346
|
|
3347
|
+
labelType: {
|
3348
|
+
floating: {
|
3349
|
+
labelPosition: 'absolute',
|
3350
|
+
labelTopPosition: '0',
|
3351
|
+
labelHorizontalPosition: '0.9em',
|
3352
|
+
labelFontSize: '1em',
|
3353
|
+
placeholderOpacity: 0,
|
3354
|
+
inputHeight: '3.5em',
|
3355
|
+
inputVerticalAlignment: 'flex-end',
|
3356
|
+
inputTransformY: 'translateY(1.55em)',
|
3357
|
+
inputTransition: 'all 75ms ease-in-out',
|
3358
|
+
marginInlineStart: '0', // `calc(0.25em + ${globalRefs.border.sm})`,
|
3359
|
+
valueInputHeight: '1.5702em',
|
3360
|
+
valueInputMarginBottom: '0.5em',
|
3361
|
+
|
3362
|
+
_focused: {
|
3363
|
+
labelFontSize: '0.75em',
|
3364
|
+
inputTransformY: 'translateY(1.05em)',
|
3365
|
+
labelFontWeight: '400',
|
3366
|
+
placeholderOpacity: 1,
|
3367
|
+
},
|
3368
|
+
|
3369
|
+
_readOnly: {
|
3370
|
+
placeholderOpacity: 0,
|
3371
|
+
},
|
3372
|
+
|
3373
|
+
_hasValue: {
|
3374
|
+
inputTransformY: 'translateY(1.05em)',
|
3375
|
+
labelFontSize: '0.75em',
|
3376
|
+
labelFontWeight: '400',
|
3377
|
+
},
|
3378
|
+
},
|
3379
|
+
},
|
3380
|
+
|
3275
3381
|
_fullWidth: {
|
3276
3382
|
width: '100%',
|
3277
3383
|
},
|
@@ -3319,6 +3425,8 @@ const textField$1 = {
|
|
3319
3425
|
[vars$G.hostDirection]: refs.direction,
|
3320
3426
|
[vars$G.fontSize]: refs.fontSize,
|
3321
3427
|
[vars$G.fontFamily]: refs.fontFamily,
|
3428
|
+
[vars$G.labelFontSize]: refs.labelFontSize,
|
3429
|
+
[vars$G.labelFontWeight]: refs.labelFontWeight,
|
3322
3430
|
[vars$G.labelTextColor]: refs.labelTextColor,
|
3323
3431
|
[vars$G.labelRequiredIndicator]: refs.requiredIndicator,
|
3324
3432
|
[vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -3341,6 +3449,21 @@ const textField$1 = {
|
|
3341
3449
|
left: { [vars$G.inputTextAlign]: 'left' },
|
3342
3450
|
center: { [vars$G.inputTextAlign]: 'center' },
|
3343
3451
|
},
|
3452
|
+
|
3453
|
+
labelType: {
|
3454
|
+
floating: {
|
3455
|
+
[vars$G.labelPosition]: refs.labelPosition,
|
3456
|
+
[vars$G.labelTopPosition]: refs.labelTopPosition,
|
3457
|
+
[vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3458
|
+
[vars$G.inputTransformY]: refs.inputTransformY,
|
3459
|
+
[vars$G.inputTransition]: refs.inputTransition,
|
3460
|
+
[vars$G.marginInlineStart]: refs.marginInlineStart,
|
3461
|
+
[vars$G.placeholderOpacity]: refs.placeholderOpacity,
|
3462
|
+
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3463
|
+
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
3464
|
+
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
3465
|
+
},
|
3466
|
+
},
|
3344
3467
|
};
|
3345
3468
|
|
3346
3469
|
var textField$2 = /*#__PURE__*/Object.freeze({
|
@@ -3588,7 +3711,7 @@ const customMixin$9 = (superclass) =>
|
|
3588
3711
|
const {
|
3589
3712
|
host: host$l,
|
3590
3713
|
inputField: inputField$5,
|
3591
|
-
inputElement: inputElement$
|
3714
|
+
inputElement: inputElement$3,
|
3592
3715
|
inputElementPlaceholder,
|
3593
3716
|
revealButtonContainer,
|
3594
3717
|
revealButtonIcon,
|
@@ -3619,8 +3742,8 @@ const PasswordClass = compose(
|
|
3619
3742
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
3620
3743
|
inputHeight: { ...inputField$5, property: 'height' },
|
3621
3744
|
inputHorizontalPadding: [
|
3622
|
-
{ ...inputElement$
|
3623
|
-
{ ...inputElement$
|
3745
|
+
{ ...inputElement$3, property: 'padding-left' },
|
3746
|
+
{ ...inputElement$3, property: 'padding-right' },
|
3624
3747
|
],
|
3625
3748
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
3626
3749
|
|
@@ -3634,6 +3757,8 @@ const PasswordClass = compose(
|
|
3634
3757
|
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
3635
3758
|
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
3636
3759
|
|
3760
|
+
labelFontSize: { ...label$8, property: 'font-size' },
|
3761
|
+
labelFontWeight: { ...label$8, property: 'font-weight' },
|
3637
3762
|
labelTextColor: [
|
3638
3763
|
{ ...label$8, property: 'color' },
|
3639
3764
|
{ ...requiredIndicator$a, property: 'color' },
|
@@ -3646,7 +3771,7 @@ const PasswordClass = compose(
|
|
3646
3771
|
{ selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
|
3647
3772
|
],
|
3648
3773
|
inputValueTextColor: [
|
3649
|
-
{ ...inputElement$
|
3774
|
+
{ ...inputElement$3, property: 'color' },
|
3650
3775
|
{ selector: () => ':host ::slotted(input)', property: 'color' },
|
3651
3776
|
],
|
3652
3777
|
|
@@ -3656,6 +3781,22 @@ const PasswordClass = compose(
|
|
3656
3781
|
],
|
3657
3782
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3658
3783
|
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
3784
|
+
|
3785
|
+
labelPosition: { ...label$8, property: 'position' },
|
3786
|
+
labelTopPosition: { ...label$8, property: 'top' },
|
3787
|
+
labelHorizontalPosition: [
|
3788
|
+
{ ...label$8, property: 'left' },
|
3789
|
+
{ ...label$8, property: 'right' },
|
3790
|
+
],
|
3791
|
+
inputTransformY: { ...label$8, property: 'transform' },
|
3792
|
+
inputTransition: { ...label$8, property: 'transition' },
|
3793
|
+
marginInlineStart: { ...label$8, property: 'margin-inline-start' },
|
3794
|
+
placeholderOpacity: [
|
3795
|
+
{ selector: '> input:placeholder-shown', property: 'opacity' },
|
3796
|
+
{ ...inputElement$3, property: 'opacity' },
|
3797
|
+
],
|
3798
|
+
inputVerticalAlignment: { ...inputField$5, property: 'align-items' },
|
3799
|
+
valueInputHeight: { ...inputElement$3, property: 'height' },
|
3659
3800
|
},
|
3660
3801
|
}),
|
3661
3802
|
draggableMixin,
|
@@ -3717,6 +3858,17 @@ const PasswordClass = compose(
|
|
3717
3858
|
vaadin-password-field-button[focus-ring] {
|
3718
3859
|
box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
|
3719
3860
|
}
|
3861
|
+
|
3862
|
+
${inputFloatingLabelStyle()}
|
3863
|
+
|
3864
|
+
:host ::slotted(input) {
|
3865
|
+
display: none !important;
|
3866
|
+
}
|
3867
|
+
|
3868
|
+
::part(reveal-button) {
|
3869
|
+
align-self: center;
|
3870
|
+
}
|
3871
|
+
|
3720
3872
|
`,
|
3721
3873
|
excludeAttrsSync: ['tabindex'],
|
3722
3874
|
componentName: componentName$O,
|
@@ -3728,9 +3880,12 @@ const vars$F = PasswordClass.cssVarList;
|
|
3728
3880
|
|
3729
3881
|
const password = {
|
3730
3882
|
[vars$F.hostWidth]: refs.width,
|
3883
|
+
[vars$F.hostMinWidth]: refs.minWidth,
|
3731
3884
|
[vars$F.hostDirection]: refs.direction,
|
3732
3885
|
[vars$F.fontSize]: refs.fontSize,
|
3733
3886
|
[vars$F.fontFamily]: refs.fontFamily,
|
3887
|
+
[vars$F.labelFontSize]: refs.labelFontSize,
|
3888
|
+
[vars$F.labelFontWeight]: refs.labelFontWeight,
|
3734
3889
|
[vars$F.labelTextColor]: refs.labelTextColor,
|
3735
3890
|
[vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
|
3736
3891
|
[vars$F.inputHorizontalPadding]: refs.horizontalPadding,
|
@@ -3750,6 +3905,20 @@ const password = {
|
|
3750
3905
|
[vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
|
3751
3906
|
[vars$F.revealButtonSize]: refs.toggleButtonSize,
|
3752
3907
|
[vars$F.revealButtonColor]: refs.placeholderTextColor,
|
3908
|
+
|
3909
|
+
labelType: {
|
3910
|
+
floating: {
|
3911
|
+
[vars$F.labelPosition]: refs.labelPosition,
|
3912
|
+
[vars$F.labelTopPosition]: refs.labelTopPosition,
|
3913
|
+
[vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3914
|
+
[vars$F.inputTransformY]: refs.inputTransformY,
|
3915
|
+
[vars$F.inputTransition]: refs.inputTransition,
|
3916
|
+
[vars$F.marginInlineStart]: refs.marginInlineStart,
|
3917
|
+
[vars$F.placeholderOpacity]: refs.placeholderOpacity,
|
3918
|
+
[vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3919
|
+
[vars$F.valueInputHeight]: refs.valueInputHeight,
|
3920
|
+
},
|
3921
|
+
},
|
3753
3922
|
};
|
3754
3923
|
|
3755
3924
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -3782,6 +3951,14 @@ const NumberFieldClass = compose(
|
|
3782
3951
|
${resetInputLabelPosition('vaadin-number-field')}
|
3783
3952
|
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
3784
3953
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3954
|
+
${inputFloatingLabelStyle()}
|
3955
|
+
|
3956
|
+
vaadin-number-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
3957
|
+
opacity: 0;
|
3958
|
+
}
|
3959
|
+
vaadin-number-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
3960
|
+
opacity: 0;
|
3961
|
+
}
|
3785
3962
|
`,
|
3786
3963
|
excludeAttrsSync: ['tabindex'],
|
3787
3964
|
componentName: componentName$N,
|
@@ -3796,6 +3973,8 @@ const numberField = {
|
|
3796
3973
|
[vars$E.hostDirection]: refs.direction,
|
3797
3974
|
[vars$E.fontSize]: refs.fontSize,
|
3798
3975
|
[vars$E.fontFamily]: refs.fontFamily,
|
3976
|
+
[vars$E.labelFontSize]: refs.labelFontSize,
|
3977
|
+
[vars$E.labelFontWeight]: refs.labelFontWeight,
|
3799
3978
|
[vars$E.labelTextColor]: refs.labelTextColor,
|
3800
3979
|
[vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
|
3801
3980
|
[vars$E.inputValueTextColor]: refs.valueTextColor,
|
@@ -3812,6 +3991,21 @@ const numberField = {
|
|
3812
3991
|
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
3813
3992
|
[vars$E.inputHorizontalPadding]: refs.horizontalPadding,
|
3814
3993
|
[vars$E.inputHeight]: refs.inputHeight,
|
3994
|
+
|
3995
|
+
labelType: {
|
3996
|
+
floating: {
|
3997
|
+
[vars$E.labelPosition]: refs.labelPosition,
|
3998
|
+
[vars$E.labelTopPosition]: refs.labelTopPosition,
|
3999
|
+
[vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
4000
|
+
[vars$E.inputTransformY]: refs.inputTransformY,
|
4001
|
+
[vars$E.inputTransition]: refs.inputTransition,
|
4002
|
+
[vars$E.marginInlineStart]: refs.marginInlineStart,
|
4003
|
+
[vars$E.placeholderOpacity]: refs.placeholderOpacity,
|
4004
|
+
[vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
4005
|
+
[vars$E.valueInputHeight]: refs.valueInputHeight,
|
4006
|
+
[vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4007
|
+
},
|
4008
|
+
},
|
3815
4009
|
};
|
3816
4010
|
|
3817
4011
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -3912,6 +4106,14 @@ const EmailFieldClass = compose(
|
|
3912
4106
|
${resetInputLabelPosition('vaadin-email-field')}
|
3913
4107
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
3914
4108
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
4109
|
+
${inputFloatingLabelStyle()}
|
4110
|
+
|
4111
|
+
vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
4112
|
+
opacity: 0;
|
4113
|
+
}
|
4114
|
+
vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
4115
|
+
opacity: 0;
|
4116
|
+
}
|
3915
4117
|
`,
|
3916
4118
|
excludeAttrsSync: ['tabindex'],
|
3917
4119
|
componentName: componentName$M,
|
@@ -3926,6 +4128,8 @@ const emailField = {
|
|
3926
4128
|
[vars$D.hostDirection]: refs.direction,
|
3927
4129
|
[vars$D.fontSize]: refs.fontSize,
|
3928
4130
|
[vars$D.fontFamily]: refs.fontFamily,
|
4131
|
+
[vars$D.labelFontSize]: refs.labelFontSize,
|
4132
|
+
[vars$D.labelFontWeight]: refs.labelFontWeight,
|
3929
4133
|
[vars$D.labelTextColor]: refs.labelTextColor,
|
3930
4134
|
[vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
|
3931
4135
|
[vars$D.inputValueTextColor]: refs.valueTextColor,
|
@@ -3942,6 +4146,21 @@ const emailField = {
|
|
3942
4146
|
[vars$D.inputBackgroundColor]: refs.backgroundColor,
|
3943
4147
|
[vars$D.inputHorizontalPadding]: refs.horizontalPadding,
|
3944
4148
|
[vars$D.inputHeight]: refs.inputHeight,
|
4149
|
+
|
4150
|
+
labelType: {
|
4151
|
+
floating: {
|
4152
|
+
[vars$D.labelPosition]: refs.labelPosition,
|
4153
|
+
[vars$D.labelTopPosition]: refs.labelTopPosition,
|
4154
|
+
[vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
4155
|
+
[vars$D.inputTransformY]: refs.inputTransformY,
|
4156
|
+
[vars$D.inputTransition]: refs.inputTransition,
|
4157
|
+
[vars$D.marginInlineStart]: refs.marginInlineStart,
|
4158
|
+
[vars$D.placeholderOpacity]: refs.placeholderOpacity,
|
4159
|
+
[vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
4160
|
+
[vars$D.valueInputHeight]: refs.valueInputHeight,
|
4161
|
+
[vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4162
|
+
},
|
4163
|
+
},
|
3945
4164
|
};
|
3946
4165
|
|
3947
4166
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
@@ -5916,6 +6135,10 @@ const componentName$v = getComponentName('combo-box');
|
|
5916
6135
|
|
5917
6136
|
const ComboBoxMixin = (superclass) =>
|
5918
6137
|
class ComboBoxMixinClass extends superclass {
|
6138
|
+
static get observedAttributes() {
|
6139
|
+
return ['label-type'];
|
6140
|
+
}
|
6141
|
+
|
5919
6142
|
// eslint-disable-next-line class-methods-use-this
|
5920
6143
|
#renderItem = ({ displayName, value, label }) => {
|
5921
6144
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -6116,6 +6339,28 @@ const ComboBoxMixin = (superclass) =>
|
|
6116
6339
|
});
|
6117
6340
|
}
|
6118
6341
|
|
6342
|
+
onLabelClick() {
|
6343
|
+
if (this.isReadOnly || this.isDisabled) {
|
6344
|
+
return;
|
6345
|
+
}
|
6346
|
+
this.focus();
|
6347
|
+
this.setAttribute('opened', 'true');
|
6348
|
+
}
|
6349
|
+
|
6350
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
6351
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6352
|
+
|
6353
|
+
if (oldValue !== newValue) {
|
6354
|
+
if (attrName === 'label-type') {
|
6355
|
+
if (newValue === 'floating') {
|
6356
|
+
this.addEventListener('click', this.onLabelClick);
|
6357
|
+
} else {
|
6358
|
+
this.removeEventListener('click', this.onLabelClick);
|
6359
|
+
}
|
6360
|
+
}
|
6361
|
+
}
|
6362
|
+
}
|
6363
|
+
|
6119
6364
|
setDefaultValue() {
|
6120
6365
|
this.value = this.defaultValue;
|
6121
6366
|
}
|
@@ -6140,7 +6385,7 @@ const ComboBoxMixin = (superclass) =>
|
|
6140
6385
|
const {
|
6141
6386
|
host: host$d,
|
6142
6387
|
inputField: inputField$3,
|
6143
|
-
inputElement: inputElement$
|
6388
|
+
inputElement: inputElement$2,
|
6144
6389
|
placeholder: placeholder$1,
|
6145
6390
|
toggle: toggle$1,
|
6146
6391
|
clearButton: clearButton$1,
|
@@ -6169,6 +6414,8 @@ const ComboBoxClass = compose(
|
|
6169
6414
|
// we apply font-size also on the host so we can set its width with em
|
6170
6415
|
fontSize: [{}, host$d],
|
6171
6416
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
6417
|
+
labelFontSize: { ...label$5, property: 'font-size' },
|
6418
|
+
labelFontWeight: { ...label$5, property: 'font-weight' },
|
6172
6419
|
labelTextColor: [
|
6173
6420
|
{ ...label$5, property: 'color' },
|
6174
6421
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -6204,10 +6451,24 @@ const ComboBoxClass = compose(
|
|
6204
6451
|
inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
|
6205
6452
|
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
6206
6453
|
inputHorizontalPadding: [
|
6207
|
-
{ ...inputElement$
|
6208
|
-
{ ...inputElement$
|
6454
|
+
{ ...inputElement$2, property: 'padding-left' },
|
6455
|
+
{ ...inputElement$2, property: 'padding-right' },
|
6209
6456
|
],
|
6210
6457
|
|
6458
|
+
labelPosition: { ...label$5, property: 'position' },
|
6459
|
+
labelTopPosition: { ...label$5, property: 'top' },
|
6460
|
+
labelHorizontalPosition: [
|
6461
|
+
{ ...label$5, property: 'left' },
|
6462
|
+
{ ...label$5, property: 'right' },
|
6463
|
+
],
|
6464
|
+
inputTransformY: { ...label$5, property: 'transform' },
|
6465
|
+
inputTransition: { ...label$5, property: 'transition' },
|
6466
|
+
marginInlineStart: { ...label$5, property: 'margin-inline-start' },
|
6467
|
+
placeholderOpacity: { ...placeholder$1, property: 'opacity' },
|
6468
|
+
inputVerticalAlignment: { ...inputField$3, property: 'align-items' },
|
6469
|
+
valueInputHeight: { ...inputElement$2, property: 'height' },
|
6470
|
+
valueInputMarginBottom: { ...inputElement$2, property: 'margin-bottom' },
|
6471
|
+
|
6211
6472
|
// we need to use the variables from the portal mixin
|
6212
6473
|
// so we need to use an arrow function on the selector
|
6213
6474
|
// for that to work, because ComboBox is not available
|
@@ -6288,7 +6549,21 @@ const ComboBoxClass = compose(
|
|
6288
6549
|
padding: 0;
|
6289
6550
|
box-shadow: none;
|
6290
6551
|
}
|
6552
|
+
|
6553
|
+
vaadin-combo-box::part(toggle-button),
|
6554
|
+
vaadin-combo-box::part(clear-button) {
|
6555
|
+
align-self: center;
|
6556
|
+
}
|
6557
|
+
|
6558
|
+
vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
6559
|
+
opacity: 0;
|
6560
|
+
}
|
6561
|
+
vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
6562
|
+
opacity: 0;
|
6563
|
+
}
|
6564
|
+
|
6291
6565
|
${resetInputLabelPosition('vaadin-combo-box')}
|
6566
|
+
${inputFloatingLabelStyle()}
|
6292
6567
|
`,
|
6293
6568
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
6294
6569
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -6308,6 +6583,8 @@ const comboBox = {
|
|
6308
6583
|
[vars$o.hostDirection]: refs.direction,
|
6309
6584
|
[vars$o.fontSize]: refs.fontSize,
|
6310
6585
|
[vars$o.fontFamily]: refs.fontFamily,
|
6586
|
+
[vars$o.labelFontSize]: refs.labelFontSize,
|
6587
|
+
[vars$o.labelFontWeight]: refs.labelFontWeight,
|
6311
6588
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
6312
6589
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
6313
6590
|
[vars$o.inputBorderColor]: refs.borderColor,
|
@@ -6331,6 +6608,21 @@ const comboBox = {
|
|
6331
6608
|
[vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
|
6332
6609
|
[vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
|
6333
6610
|
|
6611
|
+
labelType: {
|
6612
|
+
floating: {
|
6613
|
+
[vars$o.labelPosition]: refs.labelPosition,
|
6614
|
+
[vars$o.labelTopPosition]: refs.labelTopPosition,
|
6615
|
+
[vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
6616
|
+
[vars$o.inputTransformY]: refs.inputTransformY,
|
6617
|
+
[vars$o.inputTransition]: refs.inputTransition,
|
6618
|
+
[vars$o.marginInlineStart]: refs.marginInlineStart,
|
6619
|
+
[vars$o.placeholderOpacity]: refs.placeholderOpacity,
|
6620
|
+
[vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
6621
|
+
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
6622
|
+
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
6623
|
+
},
|
6624
|
+
},
|
6625
|
+
|
6334
6626
|
_readonly: {
|
6335
6627
|
[vars$o.inputDropdownButtonCursor]: 'default',
|
6336
6628
|
},
|
@@ -7668,6 +7960,10 @@ const customMixin$6 = (superclass) =>
|
|
7668
7960
|
'phone-input-placeholder',
|
7669
7961
|
'disabled',
|
7670
7962
|
'restrict-countries',
|
7963
|
+
'label-type',
|
7964
|
+
'country-input-label',
|
7965
|
+
'phone-input-label',
|
7966
|
+
'readonly',
|
7671
7967
|
],
|
7672
7968
|
});
|
7673
7969
|
}
|
@@ -7680,6 +7976,7 @@ const {
|
|
7680
7976
|
inputField: inputField$2,
|
7681
7977
|
countryCodeInput,
|
7682
7978
|
phoneInput: phoneInput$1,
|
7979
|
+
phoneExternalInput,
|
7683
7980
|
separator: separator$1,
|
7684
7981
|
errorMessage: errorMessage$5,
|
7685
7982
|
helperText: helperText$4,
|
@@ -7689,6 +7986,7 @@ const {
|
|
7689
7986
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7690
7987
|
inputField: { selector: '::part(input-field)' },
|
7691
7988
|
phoneInput: { selector: () => 'descope-text-field' },
|
7989
|
+
phoneExternalInput: { selector: () => '::slotted(input)' },
|
7692
7990
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
7693
7991
|
separator: { selector: 'descope-phone-field-internal .separator' },
|
7694
7992
|
helperText: { selector: '::part(helper-text)' },
|
@@ -7747,6 +8045,13 @@ const PhoneFieldClass = compose(
|
|
7747
8045
|
},
|
7748
8046
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
7749
8047
|
|
8048
|
+
horizontalPadding: [
|
8049
|
+
{ ...phoneInput$1, property: 'padding-left' },
|
8050
|
+
{ ...phoneInput$1, property: 'padding-right' },
|
8051
|
+
{ ...countryCodeInput, property: 'padding-left' },
|
8052
|
+
{ ...countryCodeInput, property: 'padding-right' },
|
8053
|
+
],
|
8054
|
+
|
7750
8055
|
labelTextColor: [
|
7751
8056
|
{ ...label$4, property: 'color' },
|
7752
8057
|
{ ...requiredIndicator$4, property: 'color' },
|
@@ -7770,6 +8075,20 @@ const PhoneFieldClass = compose(
|
|
7770
8075
|
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
7771
8076
|
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
7772
8077
|
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
8078
|
+
|
8079
|
+
valueInputHeight: [
|
8080
|
+
{ ...phoneExternalInput, property: textVars$1.valueInputHeight },
|
8081
|
+
{ ...countryCodeInput, property: comboVars.valueInputHeight },
|
8082
|
+
],
|
8083
|
+
valueInputMarginBottom: [
|
8084
|
+
{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom },
|
8085
|
+
{ ...phoneExternalInput, property: 'margin-bottom' },
|
8086
|
+
],
|
8087
|
+
marginInlineStart: [
|
8088
|
+
{ ...phoneInput$1, property: textVars$1.marginInlineStart },
|
8089
|
+
{ ...phoneExternalInput, property: 'margin-inline-start' },
|
8090
|
+
{ ...countryCodeInput, property: comboVars.marginInlineStart },
|
8091
|
+
],
|
7773
8092
|
},
|
7774
8093
|
}),
|
7775
8094
|
draggableMixin,
|
@@ -7840,10 +8159,15 @@ const PhoneFieldClass = compose(
|
|
7840
8159
|
${textVars$1.inputOutlineOffset}: 0;
|
7841
8160
|
${textVars$1.inputBorderWidth}: 0;
|
7842
8161
|
${textVars$1.inputBorderRadius}: 0;
|
7843
|
-
|
7844
|
-
|
7845
|
-
|
7846
|
-
|
8162
|
+
}
|
8163
|
+
|
8164
|
+
descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
8165
|
+
opacity: 0;
|
8166
|
+
}
|
8167
|
+
descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
8168
|
+
opacity: 0;
|
8169
|
+
}
|
8170
|
+
|
7847
8171
|
vaadin-text-field::part(input-field)::after {
|
7848
8172
|
border: none;
|
7849
8173
|
}
|
@@ -7878,6 +8202,14 @@ const phoneField = {
|
|
7878
8202
|
[vars$m.countryCodeInputWidth]: '5em',
|
7879
8203
|
[vars$m.countryCodeDropdownWidth]: '20em',
|
7880
8204
|
|
8205
|
+
labelType: {
|
8206
|
+
floating: {
|
8207
|
+
[vars$m.marginInlineStart]: '-0.25em',
|
8208
|
+
[vars$m.valueInputHeight]: '1.65em',
|
8209
|
+
[vars$m.valueInputMarginBottom]: '0.25em',
|
8210
|
+
},
|
8211
|
+
},
|
8212
|
+
|
7881
8213
|
// '@overlay': {
|
7882
8214
|
// overlayItemBackgroundColor: 'red'
|
7883
8215
|
// }
|
@@ -7929,14 +8261,26 @@ const customMixin$5 = (superclass) =>
|
|
7929
8261
|
'default-code',
|
7930
8262
|
'disabled',
|
7931
8263
|
'phone-input-placeholder',
|
8264
|
+
'label-type',
|
7932
8265
|
],
|
7933
8266
|
});
|
7934
8267
|
}
|
7935
8268
|
};
|
7936
8269
|
|
7937
|
-
const {
|
8270
|
+
const {
|
8271
|
+
host: host$b,
|
8272
|
+
label: label$3,
|
8273
|
+
inputElement: inputElement$1,
|
8274
|
+
requiredIndicator: requiredIndicator$3,
|
8275
|
+
inputField: inputField$1,
|
8276
|
+
phoneInput,
|
8277
|
+
errorMessage: errorMessage$4,
|
8278
|
+
helperText: helperText$3,
|
8279
|
+
} = {
|
7938
8280
|
host: { selector: () => ':host' },
|
7939
8281
|
label: { selector: '::part(label)' },
|
8282
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
8283
|
+
inputElement: { selector: 'input' },
|
7940
8284
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7941
8285
|
inputField: { selector: '::part(input-field)' },
|
7942
8286
|
phoneInput: { selector: () => 'descope-text-field' },
|
@@ -7965,6 +8309,13 @@ const PhoneFieldInputBoxClass = compose(
|
|
7965
8309
|
inputBorderColor: { ...inputField$1, property: 'border-color' },
|
7966
8310
|
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
7967
8311
|
|
8312
|
+
inputHorizontalPadding: [
|
8313
|
+
{ ...phoneInput, property: 'padding-left' },
|
8314
|
+
{ ...phoneInput, property: 'padding-right' },
|
8315
|
+
],
|
8316
|
+
|
8317
|
+
labelFontSize: { ...label$3, property: 'font-size' },
|
8318
|
+
labelFontWeight: { ...label$3, property: 'font-weight' },
|
7968
8319
|
labelTextColor: [
|
7969
8320
|
{ ...label$3, property: 'color' },
|
7970
8321
|
{ ...requiredIndicator$3, property: 'color' },
|
@@ -7980,6 +8331,21 @@ const PhoneFieldInputBoxClass = compose(
|
|
7980
8331
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
7981
8332
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
7982
8333
|
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
8334
|
+
|
8335
|
+
labelPosition: { ...label$3, property: 'position' },
|
8336
|
+
labelTopPosition: { ...label$3, property: 'top' },
|
8337
|
+
labelHorizontalPosition: [
|
8338
|
+
{ ...label$3, property: 'left' },
|
8339
|
+
{ ...label$3, property: 'right' },
|
8340
|
+
],
|
8341
|
+
inputTransformY: { ...label$3, property: 'transform' },
|
8342
|
+
inputTransition: { ...label$3, property: 'transition' },
|
8343
|
+
marginInlineStart: { ...label$3, property: 'margin-inline-start' },
|
8344
|
+
valueInputHeight: { ...inputElement$1, property: 'height' },
|
8345
|
+
valueInputMarginBottom: {
|
8346
|
+
selector: TextFieldClass.componentName,
|
8347
|
+
property: textVars.valueInputMarginBottom,
|
8348
|
+
},
|
7983
8349
|
},
|
7984
8350
|
}),
|
7985
8351
|
draggableMixin,
|
@@ -8047,7 +8413,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
8047
8413
|
vaadin-text-field::part(input-field)::after {
|
8048
8414
|
border: none;
|
8049
8415
|
}
|
8416
|
+
|
8417
|
+
vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {
|
8418
|
+
opacity: 0;
|
8419
|
+
}
|
8420
|
+
vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {
|
8421
|
+
opacity: 0;
|
8422
|
+
}
|
8423
|
+
|
8050
8424
|
${resetInputLabelPosition('vaadin-text-field')}
|
8425
|
+
${inputFloatingLabelStyle()}
|
8051
8426
|
`,
|
8052
8427
|
excludeAttrsSync: ['tabindex'],
|
8053
8428
|
componentName: componentName$q,
|
@@ -8062,6 +8437,8 @@ const phoneInputBoxField = {
|
|
8062
8437
|
[vars$l.hostDirection]: refs.direction,
|
8063
8438
|
[vars$l.fontSize]: refs.fontSize,
|
8064
8439
|
[vars$l.fontFamily]: refs.fontFamily,
|
8440
|
+
[vars$l.labelFontSize]: refs.labelFontSize,
|
8441
|
+
[vars$l.labelFontWeight]: refs.labelFontWeight,
|
8065
8442
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
8066
8443
|
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
8067
8444
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -8075,6 +8452,21 @@ const phoneInputBoxField = {
|
|
8075
8452
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
8076
8453
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
8077
8454
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
8455
|
+
|
8456
|
+
labelType: {
|
8457
|
+
floating: {
|
8458
|
+
[vars$l.labelPosition]: refs.labelPosition,
|
8459
|
+
[vars$l.labelTopPosition]: refs.labelTopPosition,
|
8460
|
+
[vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
8461
|
+
[vars$l.inputTransformY]: refs.inputTransformY,
|
8462
|
+
[vars$l.inputTransition]: refs.inputTransition,
|
8463
|
+
[vars$l.marginInlineStart]: refs.marginInlineStart,
|
8464
|
+
[vars$l.valueInputHeight]: refs.valueInputHeight,
|
8465
|
+
[vars$l.valueInputMarginBottom]: '0.25em',
|
8466
|
+
[vars$l.inputHorizontalPadding]: '0',
|
8467
|
+
},
|
8468
|
+
},
|
8469
|
+
|
8078
8470
|
_fullWidth: {
|
8079
8471
|
[vars$l.hostWidth]: refs.width,
|
8080
8472
|
},
|
@@ -8360,6 +8752,7 @@ const customMixin$4 = (superclass) =>
|
|
8360
8752
|
'active-policies',
|
8361
8753
|
'available-policies',
|
8362
8754
|
'data-password-policy-value-minlength',
|
8755
|
+
'label-type',
|
8363
8756
|
],
|
8364
8757
|
});
|
8365
8758
|
}
|
@@ -8423,6 +8816,12 @@ const NewPasswordClass = compose(
|
|
8423
8816
|
property: policyPreviewVars.backgroundColor,
|
8424
8817
|
},
|
8425
8818
|
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
8819
|
+
|
8820
|
+
valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
|
8821
|
+
valueInputMarginBottom: {
|
8822
|
+
...passwordInput,
|
8823
|
+
property: PasswordClass.cssVarList.valueInputMarginBottom,
|
8824
|
+
},
|
8426
8825
|
},
|
8427
8826
|
}),
|
8428
8827
|
draggableMixin,
|
@@ -8499,11 +8898,21 @@ const newPassword = {
|
|
8499
8898
|
[vars$k.hostDirection]: refs.direction,
|
8500
8899
|
[vars$k.fontSize]: refs.fontSize,
|
8501
8900
|
[vars$k.fontFamily]: refs.fontFamily,
|
8901
|
+
[vars$k.labelFontSize]: refs.labelFontSize,
|
8902
|
+
[vars$k.labelFontWeight]: refs.labelFontWeight,
|
8903
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
8502
8904
|
[vars$k.spaceBetweenInputs]: '1em',
|
8503
8905
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
8504
8906
|
[vars$k.policyPreviewBackgroundColor]: 'none',
|
8505
8907
|
[vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
|
8506
8908
|
|
8909
|
+
labelType: {
|
8910
|
+
floating: {
|
8911
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
8912
|
+
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
8913
|
+
},
|
8914
|
+
},
|
8915
|
+
|
8507
8916
|
_required: {
|
8508
8917
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8509
8918
|
// That's why we fake the required indicator on each input.
|
@@ -10556,6 +10965,8 @@ const MultiSelectComboBoxClass = compose(
|
|
10556
10965
|
fontSize: [{}, host$5],
|
10557
10966
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
10558
10967
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
10968
|
+
labelFontSize: { ...label, property: 'font-size' },
|
10969
|
+
labelFontWeight: { ...label, property: 'font-weight' },
|
10559
10970
|
labelTextColor: [
|
10560
10971
|
{ ...label, property: 'color' },
|
10561
10972
|
{ ...requiredIndicator, property: 'color' },
|
@@ -10606,6 +11017,19 @@ const MultiSelectComboBoxClass = compose(
|
|
10606
11017
|
{ ...overflowChipSecondBorder, property: 'border-color' },
|
10607
11018
|
],
|
10608
11019
|
|
11020
|
+
labelPosition: { ...label, property: 'position' },
|
11021
|
+
labelTopPosition: { ...label, property: 'top' },
|
11022
|
+
labelLeftPosition: { ...label, property: 'left' },
|
11023
|
+
labelHorizontalPosition: [
|
11024
|
+
{ ...label, property: 'left' },
|
11025
|
+
{ ...label, property: 'right' },
|
11026
|
+
],
|
11027
|
+
inputTransformY: { ...label, property: 'transform' },
|
11028
|
+
inputTransition: { ...label, property: 'transition' },
|
11029
|
+
marginInlineStart: { ...label, property: 'margin-inline-start' },
|
11030
|
+
placeholderOpacity: { ...placeholder, property: 'opacity' },
|
11031
|
+
inputVerticalAlignment: { ...inputField, property: 'align-items' },
|
11032
|
+
|
10609
11033
|
// we need to use the variables from the portal mixin
|
10610
11034
|
// so we need to use an arrow function on the selector
|
10611
11035
|
// for that to work, because ComboBox is not available
|
@@ -10720,6 +11144,21 @@ const MultiSelectComboBoxClass = compose(
|
|
10720
11144
|
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
10721
11145
|
display: none;
|
10722
11146
|
}
|
11147
|
+
|
11148
|
+
${inputFloatingLabelStyle()}
|
11149
|
+
|
11150
|
+
vaadin-multi-select-combo-box::part(toggle-button),
|
11151
|
+
vaadin-multi-select-combo-box::part(clear-button) {
|
11152
|
+
align-self: center;
|
11153
|
+
}
|
11154
|
+
|
11155
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
11156
|
+
opacity: 0;
|
11157
|
+
}
|
11158
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
11159
|
+
opacity: 0;
|
11160
|
+
}
|
11161
|
+
|
10723
11162
|
`,
|
10724
11163
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
10725
11164
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -10741,6 +11180,8 @@ const multiSelectComboBox = {
|
|
10741
11180
|
[vars$c.hostDirection]: refs.direction,
|
10742
11181
|
[vars$c.fontSize]: refs.fontSize,
|
10743
11182
|
[vars$c.fontFamily]: refs.fontFamily,
|
11183
|
+
[vars$c.labelFontSize]: refs.labelFontSize,
|
11184
|
+
[vars$c.labelFontWeight]: refs.labelFontWeight,
|
10744
11185
|
[vars$c.labelTextColor]: refs.labelTextColor,
|
10745
11186
|
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
10746
11187
|
[vars$c.inputBorderColor]: refs.borderColor,
|
@@ -10768,6 +11209,26 @@ const multiSelectComboBox = {
|
|
10768
11209
|
[vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
|
10769
11210
|
[vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
|
10770
11211
|
|
11212
|
+
labelType: {
|
11213
|
+
floating: {
|
11214
|
+
[vars$c.labelPosition]: refs.labelPosition,
|
11215
|
+
[vars$c.labelTopPosition]: refs.labelTopPosition,
|
11216
|
+
[vars$c.labelLeftPosition]: refs.labelLeftPosition,
|
11217
|
+
[vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
11218
|
+
[vars$c.inputTransformY]: refs.inputTransformY,
|
11219
|
+
[vars$c.inputTransition]: refs.inputTransition,
|
11220
|
+
[vars$c.marginInlineStart]: refs.marginInlineStart,
|
11221
|
+
[vars$c.placeholderOpacity]: refs.placeholderOpacity,
|
11222
|
+
[vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
11223
|
+
[vars$c.valueInputHeight]: refs.valueInputHeight,
|
11224
|
+
[vars$c.inputHorizontalPadding]: '0.25em',
|
11225
|
+
|
11226
|
+
_hasValue: {
|
11227
|
+
[vars$c.inputHorizontalPadding]: '0.45em',
|
11228
|
+
},
|
11229
|
+
},
|
11230
|
+
},
|
11231
|
+
|
10771
11232
|
_readonly: {
|
10772
11233
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
10773
11234
|
},
|