@descope/web-components-ui 1.0.321 → 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 +555 -25
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +634 -86
- 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 +4 -4
- 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 +74 -1
- 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 +43 -3
- 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/{components/descope-password/helpers.js → helpers/externalInputs.js} +5 -5
- 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({
|
@@ -3412,18 +3535,18 @@ const createExternalInputSlot = (slotName, targetSlotName) => {
|
|
3412
3535
|
return slotEle;
|
3413
3536
|
};
|
3414
3537
|
|
3415
|
-
const createExternalInputEle = (targetSlotName, autocompleteType) => {
|
3538
|
+
const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
3416
3539
|
const inputEle = document.createElement('input');
|
3417
3540
|
|
3418
3541
|
inputEle.setAttribute('slot', targetSlotName);
|
3419
|
-
inputEle.setAttribute('type',
|
3542
|
+
inputEle.setAttribute('type', type);
|
3420
3543
|
inputEle.setAttribute('data-hidden-input', 'true');
|
3421
3544
|
inputEle.setAttribute('autocomplete', autocompleteType);
|
3422
3545
|
|
3423
3546
|
return inputEle;
|
3424
3547
|
};
|
3425
3548
|
|
3426
|
-
const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
3549
|
+
const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
|
3427
3550
|
const computedStyle = getComputedStyle(sourceInputEle);
|
3428
3551
|
const height = computedStyle.getPropertyValue('height');
|
3429
3552
|
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
@@ -3439,7 +3562,6 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
3439
3562
|
targetInputEle.style = `
|
3440
3563
|
all: unset !important;
|
3441
3564
|
position: absolute !important;
|
3442
|
-
width: calc(100% - 3em) !important;
|
3443
3565
|
background-color: transparent !important;
|
3444
3566
|
color: ${valueColor} !important;
|
3445
3567
|
height: ${height} !important;
|
@@ -3449,6 +3571,7 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
|
3449
3571
|
font-family: ${fontFamily} !important;
|
3450
3572
|
letter-spacing: ${letterSpacing} !important;
|
3451
3573
|
caret-color: ${caretColor} !important;
|
3574
|
+
${customStyle || ''}
|
3452
3575
|
`;
|
3453
3576
|
};
|
3454
3577
|
|
@@ -3473,13 +3596,23 @@ const customMixin$9 = (superclass) =>
|
|
3473
3596
|
this.baseElement.appendChild(externalInputSlot);
|
3474
3597
|
|
3475
3598
|
// create external input
|
3476
|
-
const externalInput = createExternalInputEle(
|
3599
|
+
const externalInput = createExternalInputEle(
|
3600
|
+
'external-input',
|
3601
|
+
'password',
|
3602
|
+
this.getAutocompleteType()
|
3603
|
+
);
|
3477
3604
|
|
3478
3605
|
this.handlePasswordVisibility(externalInput);
|
3479
3606
|
|
3480
3607
|
// apply original input's styles to external input
|
3481
3608
|
setTimeout(() => {
|
3482
|
-
applyExternalInputStyles(
|
3609
|
+
applyExternalInputStyles(
|
3610
|
+
origInput,
|
3611
|
+
externalInput,
|
3612
|
+
`
|
3613
|
+
width: calc(100% - 3em) !important;
|
3614
|
+
`
|
3615
|
+
);
|
3483
3616
|
});
|
3484
3617
|
|
3485
3618
|
// set external input events
|
@@ -3578,7 +3711,7 @@ const customMixin$9 = (superclass) =>
|
|
3578
3711
|
const {
|
3579
3712
|
host: host$l,
|
3580
3713
|
inputField: inputField$5,
|
3581
|
-
inputElement: inputElement$
|
3714
|
+
inputElement: inputElement$3,
|
3582
3715
|
inputElementPlaceholder,
|
3583
3716
|
revealButtonContainer,
|
3584
3717
|
revealButtonIcon,
|
@@ -3609,8 +3742,8 @@ const PasswordClass = compose(
|
|
3609
3742
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
3610
3743
|
inputHeight: { ...inputField$5, property: 'height' },
|
3611
3744
|
inputHorizontalPadding: [
|
3612
|
-
{ ...inputElement$
|
3613
|
-
{ ...inputElement$
|
3745
|
+
{ ...inputElement$3, property: 'padding-left' },
|
3746
|
+
{ ...inputElement$3, property: 'padding-right' },
|
3614
3747
|
],
|
3615
3748
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
3616
3749
|
|
@@ -3624,6 +3757,8 @@ const PasswordClass = compose(
|
|
3624
3757
|
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
3625
3758
|
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
3626
3759
|
|
3760
|
+
labelFontSize: { ...label$8, property: 'font-size' },
|
3761
|
+
labelFontWeight: { ...label$8, property: 'font-weight' },
|
3627
3762
|
labelTextColor: [
|
3628
3763
|
{ ...label$8, property: 'color' },
|
3629
3764
|
{ ...requiredIndicator$a, property: 'color' },
|
@@ -3636,7 +3771,7 @@ const PasswordClass = compose(
|
|
3636
3771
|
{ selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
|
3637
3772
|
],
|
3638
3773
|
inputValueTextColor: [
|
3639
|
-
{ ...inputElement$
|
3774
|
+
{ ...inputElement$3, property: 'color' },
|
3640
3775
|
{ selector: () => ':host ::slotted(input)', property: 'color' },
|
3641
3776
|
],
|
3642
3777
|
|
@@ -3646,6 +3781,22 @@ const PasswordClass = compose(
|
|
3646
3781
|
],
|
3647
3782
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3648
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' },
|
3649
3800
|
},
|
3650
3801
|
}),
|
3651
3802
|
draggableMixin,
|
@@ -3707,6 +3858,17 @@ const PasswordClass = compose(
|
|
3707
3858
|
vaadin-password-field-button[focus-ring] {
|
3708
3859
|
box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
|
3709
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
|
+
|
3710
3872
|
`,
|
3711
3873
|
excludeAttrsSync: ['tabindex'],
|
3712
3874
|
componentName: componentName$O,
|
@@ -3718,9 +3880,12 @@ const vars$F = PasswordClass.cssVarList;
|
|
3718
3880
|
|
3719
3881
|
const password = {
|
3720
3882
|
[vars$F.hostWidth]: refs.width,
|
3883
|
+
[vars$F.hostMinWidth]: refs.minWidth,
|
3721
3884
|
[vars$F.hostDirection]: refs.direction,
|
3722
3885
|
[vars$F.fontSize]: refs.fontSize,
|
3723
3886
|
[vars$F.fontFamily]: refs.fontFamily,
|
3887
|
+
[vars$F.labelFontSize]: refs.labelFontSize,
|
3888
|
+
[vars$F.labelFontWeight]: refs.labelFontWeight,
|
3724
3889
|
[vars$F.labelTextColor]: refs.labelTextColor,
|
3725
3890
|
[vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
|
3726
3891
|
[vars$F.inputHorizontalPadding]: refs.horizontalPadding,
|
@@ -3740,6 +3905,20 @@ const password = {
|
|
3740
3905
|
[vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
|
3741
3906
|
[vars$F.revealButtonSize]: refs.toggleButtonSize,
|
3742
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
|
+
},
|
3743
3922
|
};
|
3744
3923
|
|
3745
3924
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -3772,6 +3951,14 @@ const NumberFieldClass = compose(
|
|
3772
3951
|
${resetInputLabelPosition('vaadin-number-field')}
|
3773
3952
|
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
3774
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
|
+
}
|
3775
3962
|
`,
|
3776
3963
|
excludeAttrsSync: ['tabindex'],
|
3777
3964
|
componentName: componentName$N,
|
@@ -3786,6 +3973,8 @@ const numberField = {
|
|
3786
3973
|
[vars$E.hostDirection]: refs.direction,
|
3787
3974
|
[vars$E.fontSize]: refs.fontSize,
|
3788
3975
|
[vars$E.fontFamily]: refs.fontFamily,
|
3976
|
+
[vars$E.labelFontSize]: refs.labelFontSize,
|
3977
|
+
[vars$E.labelFontWeight]: refs.labelFontWeight,
|
3789
3978
|
[vars$E.labelTextColor]: refs.labelTextColor,
|
3790
3979
|
[vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
|
3791
3980
|
[vars$E.inputValueTextColor]: refs.valueTextColor,
|
@@ -3802,6 +3991,21 @@ const numberField = {
|
|
3802
3991
|
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
3803
3992
|
[vars$E.inputHorizontalPadding]: refs.horizontalPadding,
|
3804
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
|
+
},
|
3805
4009
|
};
|
3806
4010
|
|
3807
4011
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -3816,9 +4020,68 @@ const customMixin$8 = (superclass) =>
|
|
3816
4020
|
class EmailFieldMixinClass extends superclass {
|
3817
4021
|
init() {
|
3818
4022
|
super.init?.();
|
4023
|
+
|
3819
4024
|
this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
|
4025
|
+
|
4026
|
+
this.handleExternalInput();
|
4027
|
+
}
|
4028
|
+
|
4029
|
+
handleExternalInput() {
|
4030
|
+
// reset vaadin's checkValidity
|
4031
|
+
this.baseElement.checkValidity = () => {};
|
4032
|
+
|
4033
|
+
// set safety attribute `external-input`
|
4034
|
+
this.setAttribute('external-input', 'true');
|
4035
|
+
|
4036
|
+
// use original input element as reference
|
4037
|
+
const origInput = this.baseElement.querySelector('input');
|
4038
|
+
|
4039
|
+
// create external slot
|
4040
|
+
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
4041
|
+
// append external slot to base element
|
4042
|
+
this.baseElement.appendChild(externalInputSlot);
|
4043
|
+
|
4044
|
+
const externalInput = createExternalInputEle(
|
4045
|
+
'external-input',
|
4046
|
+
'text',
|
4047
|
+
this.getAutocompleteType()
|
4048
|
+
);
|
4049
|
+
|
4050
|
+
// apply original input's styles to external input
|
4051
|
+
setTimeout(() => {
|
4052
|
+
applyExternalInputStyles(origInput, externalInput);
|
4053
|
+
});
|
4054
|
+
|
4055
|
+
// set external input events
|
4056
|
+
this.handleExternalInputEvents(externalInput);
|
4057
|
+
|
4058
|
+
syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
|
4059
|
+
|
4060
|
+
// append external input to component's DOM
|
4061
|
+
this.appendChild(externalInput);
|
4062
|
+
}
|
4063
|
+
|
4064
|
+
getAutocompleteType() {
|
4065
|
+
return this.getAttribute('autocomplete') || 'username';
|
4066
|
+
}
|
4067
|
+
|
4068
|
+
handleExternalInputEvents(inputEle) {
|
4069
|
+
// sync value of insible input back to original input
|
4070
|
+
inputEle.addEventListener('input', (e) => {
|
4071
|
+
this.value = e.target.value;
|
4072
|
+
});
|
4073
|
+
|
4074
|
+
// sync `focused` attribute on host when focusing on external input
|
4075
|
+
inputEle.addEventListener('focus', () => {
|
4076
|
+
this.setAttribute('focused', 'true');
|
4077
|
+
});
|
4078
|
+
|
4079
|
+
inputEle.addEventListener('blur', () => {
|
4080
|
+
this.removeAttribute('focused');
|
4081
|
+
});
|
3820
4082
|
}
|
3821
4083
|
};
|
4084
|
+
|
3822
4085
|
const EmailFieldClass = compose(
|
3823
4086
|
createStyleMixin({
|
3824
4087
|
mappings: textFieldMappings,
|
@@ -3843,6 +4106,14 @@ const EmailFieldClass = compose(
|
|
3843
4106
|
${resetInputLabelPosition('vaadin-email-field')}
|
3844
4107
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
3845
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
|
+
}
|
3846
4117
|
`,
|
3847
4118
|
excludeAttrsSync: ['tabindex'],
|
3848
4119
|
componentName: componentName$M,
|
@@ -3857,6 +4128,8 @@ const emailField = {
|
|
3857
4128
|
[vars$D.hostDirection]: refs.direction,
|
3858
4129
|
[vars$D.fontSize]: refs.fontSize,
|
3859
4130
|
[vars$D.fontFamily]: refs.fontFamily,
|
4131
|
+
[vars$D.labelFontSize]: refs.labelFontSize,
|
4132
|
+
[vars$D.labelFontWeight]: refs.labelFontWeight,
|
3860
4133
|
[vars$D.labelTextColor]: refs.labelTextColor,
|
3861
4134
|
[vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
|
3862
4135
|
[vars$D.inputValueTextColor]: refs.valueTextColor,
|
@@ -3873,6 +4146,21 @@ const emailField = {
|
|
3873
4146
|
[vars$D.inputBackgroundColor]: refs.backgroundColor,
|
3874
4147
|
[vars$D.inputHorizontalPadding]: refs.horizontalPadding,
|
3875
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
|
+
},
|
3876
4164
|
};
|
3877
4165
|
|
3878
4166
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
@@ -5847,6 +6135,10 @@ const componentName$v = getComponentName('combo-box');
|
|
5847
6135
|
|
5848
6136
|
const ComboBoxMixin = (superclass) =>
|
5849
6137
|
class ComboBoxMixinClass extends superclass {
|
6138
|
+
static get observedAttributes() {
|
6139
|
+
return ['label-type'];
|
6140
|
+
}
|
6141
|
+
|
5850
6142
|
// eslint-disable-next-line class-methods-use-this
|
5851
6143
|
#renderItem = ({ displayName, value, label }) => {
|
5852
6144
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -6047,6 +6339,28 @@ const ComboBoxMixin = (superclass) =>
|
|
6047
6339
|
});
|
6048
6340
|
}
|
6049
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
|
+
|
6050
6364
|
setDefaultValue() {
|
6051
6365
|
this.value = this.defaultValue;
|
6052
6366
|
}
|
@@ -6071,7 +6385,7 @@ const ComboBoxMixin = (superclass) =>
|
|
6071
6385
|
const {
|
6072
6386
|
host: host$d,
|
6073
6387
|
inputField: inputField$3,
|
6074
|
-
inputElement: inputElement$
|
6388
|
+
inputElement: inputElement$2,
|
6075
6389
|
placeholder: placeholder$1,
|
6076
6390
|
toggle: toggle$1,
|
6077
6391
|
clearButton: clearButton$1,
|
@@ -6100,6 +6414,8 @@ const ComboBoxClass = compose(
|
|
6100
6414
|
// we apply font-size also on the host so we can set its width with em
|
6101
6415
|
fontSize: [{}, host$d],
|
6102
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' },
|
6103
6419
|
labelTextColor: [
|
6104
6420
|
{ ...label$5, property: 'color' },
|
6105
6421
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -6135,9 +6451,23 @@ const ComboBoxClass = compose(
|
|
6135
6451
|
inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
|
6136
6452
|
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
6137
6453
|
inputHorizontalPadding: [
|
6138
|
-
{ ...inputElement$
|
6139
|
-
{ ...inputElement$
|
6454
|
+
{ ...inputElement$2, property: 'padding-left' },
|
6455
|
+
{ ...inputElement$2, property: 'padding-right' },
|
6456
|
+
],
|
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' },
|
6140
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' },
|
6141
6471
|
|
6142
6472
|
// we need to use the variables from the portal mixin
|
6143
6473
|
// so we need to use an arrow function on the selector
|
@@ -6219,7 +6549,21 @@ const ComboBoxClass = compose(
|
|
6219
6549
|
padding: 0;
|
6220
6550
|
box-shadow: none;
|
6221
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
|
+
|
6222
6565
|
${resetInputLabelPosition('vaadin-combo-box')}
|
6566
|
+
${inputFloatingLabelStyle()}
|
6223
6567
|
`,
|
6224
6568
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
6225
6569
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -6239,6 +6583,8 @@ const comboBox = {
|
|
6239
6583
|
[vars$o.hostDirection]: refs.direction,
|
6240
6584
|
[vars$o.fontSize]: refs.fontSize,
|
6241
6585
|
[vars$o.fontFamily]: refs.fontFamily,
|
6586
|
+
[vars$o.labelFontSize]: refs.labelFontSize,
|
6587
|
+
[vars$o.labelFontWeight]: refs.labelFontWeight,
|
6242
6588
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
6243
6589
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
6244
6590
|
[vars$o.inputBorderColor]: refs.borderColor,
|
@@ -6262,6 +6608,21 @@ const comboBox = {
|
|
6262
6608
|
[vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
|
6263
6609
|
[vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
|
6264
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
|
+
|
6265
6626
|
_readonly: {
|
6266
6627
|
[vars$o.inputDropdownButtonCursor]: 'default',
|
6267
6628
|
},
|
@@ -7599,6 +7960,10 @@ const customMixin$6 = (superclass) =>
|
|
7599
7960
|
'phone-input-placeholder',
|
7600
7961
|
'disabled',
|
7601
7962
|
'restrict-countries',
|
7963
|
+
'label-type',
|
7964
|
+
'country-input-label',
|
7965
|
+
'phone-input-label',
|
7966
|
+
'readonly',
|
7602
7967
|
],
|
7603
7968
|
});
|
7604
7969
|
}
|
@@ -7611,6 +7976,7 @@ const {
|
|
7611
7976
|
inputField: inputField$2,
|
7612
7977
|
countryCodeInput,
|
7613
7978
|
phoneInput: phoneInput$1,
|
7979
|
+
phoneExternalInput,
|
7614
7980
|
separator: separator$1,
|
7615
7981
|
errorMessage: errorMessage$5,
|
7616
7982
|
helperText: helperText$4,
|
@@ -7620,6 +7986,7 @@ const {
|
|
7620
7986
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7621
7987
|
inputField: { selector: '::part(input-field)' },
|
7622
7988
|
phoneInput: { selector: () => 'descope-text-field' },
|
7989
|
+
phoneExternalInput: { selector: () => '::slotted(input)' },
|
7623
7990
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
7624
7991
|
separator: { selector: 'descope-phone-field-internal .separator' },
|
7625
7992
|
helperText: { selector: '::part(helper-text)' },
|
@@ -7678,6 +8045,13 @@ const PhoneFieldClass = compose(
|
|
7678
8045
|
},
|
7679
8046
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
7680
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
|
+
|
7681
8055
|
labelTextColor: [
|
7682
8056
|
{ ...label$4, property: 'color' },
|
7683
8057
|
{ ...requiredIndicator$4, property: 'color' },
|
@@ -7701,6 +8075,20 @@ const PhoneFieldClass = compose(
|
|
7701
8075
|
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
7702
8076
|
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
7703
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
|
+
],
|
7704
8092
|
},
|
7705
8093
|
}),
|
7706
8094
|
draggableMixin,
|
@@ -7771,10 +8159,15 @@ const PhoneFieldClass = compose(
|
|
7771
8159
|
${textVars$1.inputOutlineOffset}: 0;
|
7772
8160
|
${textVars$1.inputBorderWidth}: 0;
|
7773
8161
|
${textVars$1.inputBorderRadius}: 0;
|
7774
|
-
|
7775
|
-
|
7776
|
-
|
7777
|
-
|
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
|
+
|
7778
8171
|
vaadin-text-field::part(input-field)::after {
|
7779
8172
|
border: none;
|
7780
8173
|
}
|
@@ -7809,6 +8202,14 @@ const phoneField = {
|
|
7809
8202
|
[vars$m.countryCodeInputWidth]: '5em',
|
7810
8203
|
[vars$m.countryCodeDropdownWidth]: '20em',
|
7811
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
|
+
|
7812
8213
|
// '@overlay': {
|
7813
8214
|
// overlayItemBackgroundColor: 'red'
|
7814
8215
|
// }
|
@@ -7860,14 +8261,26 @@ const customMixin$5 = (superclass) =>
|
|
7860
8261
|
'default-code',
|
7861
8262
|
'disabled',
|
7862
8263
|
'phone-input-placeholder',
|
8264
|
+
'label-type',
|
7863
8265
|
],
|
7864
8266
|
});
|
7865
8267
|
}
|
7866
8268
|
};
|
7867
8269
|
|
7868
|
-
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
|
+
} = {
|
7869
8280
|
host: { selector: () => ':host' },
|
7870
8281
|
label: { selector: '::part(label)' },
|
8282
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
8283
|
+
inputElement: { selector: 'input' },
|
7871
8284
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7872
8285
|
inputField: { selector: '::part(input-field)' },
|
7873
8286
|
phoneInput: { selector: () => 'descope-text-field' },
|
@@ -7896,6 +8309,13 @@ const PhoneFieldInputBoxClass = compose(
|
|
7896
8309
|
inputBorderColor: { ...inputField$1, property: 'border-color' },
|
7897
8310
|
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
7898
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' },
|
7899
8319
|
labelTextColor: [
|
7900
8320
|
{ ...label$3, property: 'color' },
|
7901
8321
|
{ ...requiredIndicator$3, property: 'color' },
|
@@ -7911,6 +8331,21 @@ const PhoneFieldInputBoxClass = compose(
|
|
7911
8331
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
7912
8332
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
7913
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
|
+
},
|
7914
8349
|
},
|
7915
8350
|
}),
|
7916
8351
|
draggableMixin,
|
@@ -7978,7 +8413,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
7978
8413
|
vaadin-text-field::part(input-field)::after {
|
7979
8414
|
border: none;
|
7980
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
|
+
|
7981
8424
|
${resetInputLabelPosition('vaadin-text-field')}
|
8425
|
+
${inputFloatingLabelStyle()}
|
7982
8426
|
`,
|
7983
8427
|
excludeAttrsSync: ['tabindex'],
|
7984
8428
|
componentName: componentName$q,
|
@@ -7993,6 +8437,8 @@ const phoneInputBoxField = {
|
|
7993
8437
|
[vars$l.hostDirection]: refs.direction,
|
7994
8438
|
[vars$l.fontSize]: refs.fontSize,
|
7995
8439
|
[vars$l.fontFamily]: refs.fontFamily,
|
8440
|
+
[vars$l.labelFontSize]: refs.labelFontSize,
|
8441
|
+
[vars$l.labelFontWeight]: refs.labelFontWeight,
|
7996
8442
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
7997
8443
|
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7998
8444
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -8006,6 +8452,21 @@ const phoneInputBoxField = {
|
|
8006
8452
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
8007
8453
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
8008
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
|
+
|
8009
8470
|
_fullWidth: {
|
8010
8471
|
[vars$l.hostWidth]: refs.width,
|
8011
8472
|
},
|
@@ -8291,6 +8752,7 @@ const customMixin$4 = (superclass) =>
|
|
8291
8752
|
'active-policies',
|
8292
8753
|
'available-policies',
|
8293
8754
|
'data-password-policy-value-minlength',
|
8755
|
+
'label-type',
|
8294
8756
|
],
|
8295
8757
|
});
|
8296
8758
|
}
|
@@ -8354,6 +8816,12 @@ const NewPasswordClass = compose(
|
|
8354
8816
|
property: policyPreviewVars.backgroundColor,
|
8355
8817
|
},
|
8356
8818
|
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
8819
|
+
|
8820
|
+
valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
|
8821
|
+
valueInputMarginBottom: {
|
8822
|
+
...passwordInput,
|
8823
|
+
property: PasswordClass.cssVarList.valueInputMarginBottom,
|
8824
|
+
},
|
8357
8825
|
},
|
8358
8826
|
}),
|
8359
8827
|
draggableMixin,
|
@@ -8430,11 +8898,21 @@ const newPassword = {
|
|
8430
8898
|
[vars$k.hostDirection]: refs.direction,
|
8431
8899
|
[vars$k.fontSize]: refs.fontSize,
|
8432
8900
|
[vars$k.fontFamily]: refs.fontFamily,
|
8901
|
+
[vars$k.labelFontSize]: refs.labelFontSize,
|
8902
|
+
[vars$k.labelFontWeight]: refs.labelFontWeight,
|
8903
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
8433
8904
|
[vars$k.spaceBetweenInputs]: '1em',
|
8434
8905
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
8435
8906
|
[vars$k.policyPreviewBackgroundColor]: 'none',
|
8436
8907
|
[vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
|
8437
8908
|
|
8909
|
+
labelType: {
|
8910
|
+
floating: {
|
8911
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
8912
|
+
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
8913
|
+
},
|
8914
|
+
},
|
8915
|
+
|
8438
8916
|
_required: {
|
8439
8917
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8440
8918
|
// That's why we fake the required indicator on each input.
|
@@ -10487,6 +10965,8 @@ const MultiSelectComboBoxClass = compose(
|
|
10487
10965
|
fontSize: [{}, host$5],
|
10488
10966
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
10489
10967
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
10968
|
+
labelFontSize: { ...label, property: 'font-size' },
|
10969
|
+
labelFontWeight: { ...label, property: 'font-weight' },
|
10490
10970
|
labelTextColor: [
|
10491
10971
|
{ ...label, property: 'color' },
|
10492
10972
|
{ ...requiredIndicator, property: 'color' },
|
@@ -10537,6 +11017,19 @@ const MultiSelectComboBoxClass = compose(
|
|
10537
11017
|
{ ...overflowChipSecondBorder, property: 'border-color' },
|
10538
11018
|
],
|
10539
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
|
+
|
10540
11033
|
// we need to use the variables from the portal mixin
|
10541
11034
|
// so we need to use an arrow function on the selector
|
10542
11035
|
// for that to work, because ComboBox is not available
|
@@ -10651,6 +11144,21 @@ const MultiSelectComboBoxClass = compose(
|
|
10651
11144
|
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
10652
11145
|
display: none;
|
10653
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
|
+
|
10654
11162
|
`,
|
10655
11163
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
10656
11164
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -10672,6 +11180,8 @@ const multiSelectComboBox = {
|
|
10672
11180
|
[vars$c.hostDirection]: refs.direction,
|
10673
11181
|
[vars$c.fontSize]: refs.fontSize,
|
10674
11182
|
[vars$c.fontFamily]: refs.fontFamily,
|
11183
|
+
[vars$c.labelFontSize]: refs.labelFontSize,
|
11184
|
+
[vars$c.labelFontWeight]: refs.labelFontWeight,
|
10675
11185
|
[vars$c.labelTextColor]: refs.labelTextColor,
|
10676
11186
|
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
10677
11187
|
[vars$c.inputBorderColor]: refs.borderColor,
|
@@ -10699,6 +11209,26 @@ const multiSelectComboBox = {
|
|
10699
11209
|
[vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
|
10700
11210
|
[vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
|
10701
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
|
+
|
10702
11232
|
_readonly: {
|
10703
11233
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
10704
11234
|
},
|