@descope/web-components-ui 1.0.322 → 1.0.324
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +481 -19
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +501 -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 +10 -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 +21 -0
- package/src/theme/components/newPassword.js +9 -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/index.esm.js
CHANGED
@@ -1817,6 +1817,21 @@ const resetInputLabelPosition = (name) => `
|
|
1817
1817
|
}
|
1818
1818
|
`;
|
1819
1819
|
|
1820
|
+
const inputFloatingLabelStyle = () => {
|
1821
|
+
return `
|
1822
|
+
:host([label-type="floating"]) {
|
1823
|
+
position: relative;
|
1824
|
+
}
|
1825
|
+
:host([label-type="floating"][has-label]) [slot="label"] {
|
1826
|
+
padding: 0;
|
1827
|
+
}
|
1828
|
+
:host([label-type="floating"][has-label]) > ::part(label) {
|
1829
|
+
z-index: 1;
|
1830
|
+
padding: 0;
|
1831
|
+
}
|
1832
|
+
`;
|
1833
|
+
};
|
1834
|
+
|
1820
1835
|
var commonStyles = `
|
1821
1836
|
:host {
|
1822
1837
|
display: inline-flex;
|
@@ -2473,7 +2488,10 @@ const {
|
|
2473
2488
|
host: { selector: () => ':host' },
|
2474
2489
|
label: { selector: '::part(label)' },
|
2475
2490
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2476
|
-
placeholder:
|
2491
|
+
placeholder: [
|
2492
|
+
{ selector: '> input:placeholder-shown' },
|
2493
|
+
{ selector: () => ':host::slotted(input:placeholder-shown)' },
|
2494
|
+
],
|
2477
2495
|
disabledPlaceholder: { selector: '> input:disabled::placeholder' },
|
2478
2496
|
inputField: { selector: '::part(input-field)' },
|
2479
2497
|
input: { selector: 'input' },
|
@@ -2491,11 +2509,8 @@ var textFieldMappings = {
|
|
2491
2509
|
fontSize: [{}, host$i],
|
2492
2510
|
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2493
2511
|
|
2494
|
-
|
2495
|
-
|
2496
|
-
hostDirection: { ...host$i, property: 'direction' },
|
2497
|
-
|
2498
|
-
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2512
|
+
labelFontSize: { ...label$9, property: 'font-size' },
|
2513
|
+
labelFontWeight: { ...label$9, property: 'font-weight' },
|
2499
2514
|
|
2500
2515
|
labelTextColor: [
|
2501
2516
|
{ ...label$9, property: 'color' },
|
@@ -2503,6 +2518,13 @@ var textFieldMappings = {
|
|
2503
2518
|
{ ...label$9, property: '-webkit-text-fill-color' },
|
2504
2519
|
{ ...requiredIndicator$9, property: '-webkit-text-fill-color' },
|
2505
2520
|
],
|
2521
|
+
|
2522
|
+
hostWidth: { ...host$i, property: 'width' },
|
2523
|
+
hostMinWidth: { ...host$i, property: 'min-width' },
|
2524
|
+
hostDirection: { ...host$i, property: 'direction' },
|
2525
|
+
|
2526
|
+
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2527
|
+
|
2506
2528
|
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
2507
2529
|
helperTextColor: { ...helperText$8, property: '-webkit-text-fill-color' },
|
2508
2530
|
|
@@ -2542,11 +2564,38 @@ var textFieldMappings = {
|
|
2542
2564
|
],
|
2543
2565
|
|
2544
2566
|
inputPlaceholderColor: [
|
2567
|
+
{ selector: () => ':host input:placeholder-shown', property: 'color' },
|
2545
2568
|
{ ...placeholder$3, property: 'color' },
|
2546
2569
|
{ ...externalPlaceholder, property: 'color' },
|
2547
2570
|
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
2548
2571
|
{ ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
|
2549
2572
|
],
|
2573
|
+
|
2574
|
+
labelPosition: { ...label$9, property: 'position' },
|
2575
|
+
labelTopPosition: { ...label$9, property: 'top' },
|
2576
|
+
labelHorizontalPosition: [
|
2577
|
+
{ ...label$9, property: 'left' },
|
2578
|
+
{ ...label$9, property: 'right' },
|
2579
|
+
],
|
2580
|
+
inputTransformY: { ...label$9, property: 'transform' },
|
2581
|
+
inputTransition: { ...label$9, property: 'transition' },
|
2582
|
+
marginInlineStart: { ...label$9, property: 'margin-inline-start' },
|
2583
|
+
placeholderOpacity: [
|
2584
|
+
{ selector: '> input:placeholder-shown', property: 'opacity' },
|
2585
|
+
{ ...externalPlaceholder, property: 'opacity' },
|
2586
|
+
],
|
2587
|
+
inputVerticalAlignment: [
|
2588
|
+
{ ...inputField$6, property: 'align-items' },
|
2589
|
+
{ ...externalInput, property: 'align-items' },
|
2590
|
+
],
|
2591
|
+
valueInputHeight: [
|
2592
|
+
{ ...input, property: 'height' },
|
2593
|
+
{ ...externalInput, property: 'height' },
|
2594
|
+
],
|
2595
|
+
valueInputMarginBottom: [
|
2596
|
+
{ ...input, property: 'margin-bottom' },
|
2597
|
+
{ ...externalInput, property: 'margin-bottom' },
|
2598
|
+
],
|
2550
2599
|
};
|
2551
2600
|
|
2552
2601
|
// since on load we can only sample the color of the placeholder,
|
@@ -2704,6 +2753,14 @@ const EmailFieldClass = compose(
|
|
2704
2753
|
${resetInputLabelPosition('vaadin-email-field')}
|
2705
2754
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2706
2755
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2756
|
+
${inputFloatingLabelStyle()}
|
2757
|
+
|
2758
|
+
vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
2759
|
+
opacity: 0;
|
2760
|
+
}
|
2761
|
+
vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
2762
|
+
opacity: 0;
|
2763
|
+
}
|
2707
2764
|
`,
|
2708
2765
|
excludeAttrsSync: ['tabindex'],
|
2709
2766
|
componentName: componentName$M,
|
@@ -2886,6 +2943,14 @@ const NumberFieldClass = compose(
|
|
2886
2943
|
${resetInputLabelPosition('vaadin-number-field')}
|
2887
2944
|
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
2888
2945
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2946
|
+
${inputFloatingLabelStyle()}
|
2947
|
+
|
2948
|
+
vaadin-number-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
2949
|
+
opacity: 0;
|
2950
|
+
}
|
2951
|
+
vaadin-number-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
2952
|
+
opacity: 0;
|
2953
|
+
}
|
2889
2954
|
`,
|
2890
2955
|
excludeAttrsSync: ['tabindex'],
|
2891
2956
|
componentName: componentName$H,
|
@@ -3144,7 +3209,7 @@ class PasscodeInternal extends BaseInputClass$7 {
|
|
3144
3209
|
|
3145
3210
|
const componentName$F = getComponentName('text-field');
|
3146
3211
|
|
3147
|
-
const observedAttrs = ['type'];
|
3212
|
+
const observedAttrs = ['type', 'label-type'];
|
3148
3213
|
|
3149
3214
|
const customMixin$9 = (superclass) =>
|
3150
3215
|
class TextFieldClass extends superclass {
|
@@ -3152,6 +3217,10 @@ const customMixin$9 = (superclass) =>
|
|
3152
3217
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
3153
3218
|
}
|
3154
3219
|
|
3220
|
+
onLabelClick() {
|
3221
|
+
this.focus();
|
3222
|
+
}
|
3223
|
+
|
3155
3224
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
3156
3225
|
super.attributeChangeCallback?.(attrName, oldVal, newVal);
|
3157
3226
|
|
@@ -3163,6 +3232,16 @@ const customMixin$9 = (superclass) =>
|
|
3163
3232
|
if (attrName === 'type') {
|
3164
3233
|
this.baseElement._setType(newVal);
|
3165
3234
|
}
|
3235
|
+
|
3236
|
+
if (oldVal !== newVal) {
|
3237
|
+
if (attrName === 'label-type') {
|
3238
|
+
if (newVal === 'floating') {
|
3239
|
+
this.addEventListener('click', this.onLabelClick);
|
3240
|
+
} else {
|
3241
|
+
this.removeEventListener('click', this.onLabelClick);
|
3242
|
+
}
|
3243
|
+
}
|
3244
|
+
}
|
3166
3245
|
}
|
3167
3246
|
|
3168
3247
|
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
@@ -3215,9 +3294,17 @@ const TextFieldClass = compose(
|
|
3215
3294
|
:host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
|
3216
3295
|
opacity: 1;
|
3217
3296
|
}
|
3297
|
+
|
3298
|
+
vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
3299
|
+
opacity: 0;
|
3300
|
+
}
|
3301
|
+
vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
3302
|
+
opacity: 0;
|
3303
|
+
}
|
3218
3304
|
${resetInputLabelPosition('vaadin-text-field')}
|
3219
3305
|
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
3220
3306
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3307
|
+
${inputFloatingLabelStyle()}
|
3221
3308
|
`,
|
3222
3309
|
excludeAttrsSync: ['tabindex'],
|
3223
3310
|
componentName: componentName$F,
|
@@ -3585,7 +3672,7 @@ const customMixin$7 = (superclass) =>
|
|
3585
3672
|
const {
|
3586
3673
|
host: host$f,
|
3587
3674
|
inputField: inputField$5,
|
3588
|
-
inputElement: inputElement$
|
3675
|
+
inputElement: inputElement$3,
|
3589
3676
|
inputElementPlaceholder,
|
3590
3677
|
revealButtonContainer,
|
3591
3678
|
revealButtonIcon,
|
@@ -3616,8 +3703,8 @@ const PasswordClass = compose(
|
|
3616
3703
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3617
3704
|
inputHeight: { ...inputField$5, property: 'height' },
|
3618
3705
|
inputHorizontalPadding: [
|
3619
|
-
{ ...inputElement$
|
3620
|
-
{ ...inputElement$
|
3706
|
+
{ ...inputElement$3, property: 'padding-left' },
|
3707
|
+
{ ...inputElement$3, property: 'padding-right' },
|
3621
3708
|
],
|
3622
3709
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
3623
3710
|
|
@@ -3631,6 +3718,8 @@ const PasswordClass = compose(
|
|
3631
3718
|
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
3632
3719
|
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
3633
3720
|
|
3721
|
+
labelFontSize: { ...label$7, property: 'font-size' },
|
3722
|
+
labelFontWeight: { ...label$7, property: 'font-weight' },
|
3634
3723
|
labelTextColor: [
|
3635
3724
|
{ ...label$7, property: 'color' },
|
3636
3725
|
{ ...requiredIndicator$7, property: 'color' },
|
@@ -3643,7 +3732,7 @@ const PasswordClass = compose(
|
|
3643
3732
|
{ selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
|
3644
3733
|
],
|
3645
3734
|
inputValueTextColor: [
|
3646
|
-
{ ...inputElement$
|
3735
|
+
{ ...inputElement$3, property: 'color' },
|
3647
3736
|
{ selector: () => ':host ::slotted(input)', property: 'color' },
|
3648
3737
|
],
|
3649
3738
|
|
@@ -3653,6 +3742,22 @@ const PasswordClass = compose(
|
|
3653
3742
|
],
|
3654
3743
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3655
3744
|
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
3745
|
+
|
3746
|
+
labelPosition: { ...label$7, property: 'position' },
|
3747
|
+
labelTopPosition: { ...label$7, property: 'top' },
|
3748
|
+
labelHorizontalPosition: [
|
3749
|
+
{ ...label$7, property: 'left' },
|
3750
|
+
{ ...label$7, property: 'right' },
|
3751
|
+
],
|
3752
|
+
inputTransformY: { ...label$7, property: 'transform' },
|
3753
|
+
inputTransition: { ...label$7, property: 'transition' },
|
3754
|
+
marginInlineStart: { ...label$7, property: 'margin-inline-start' },
|
3755
|
+
placeholderOpacity: [
|
3756
|
+
{ selector: '> input:placeholder-shown', property: 'opacity' },
|
3757
|
+
{ ...inputElement$3, property: 'opacity' },
|
3758
|
+
],
|
3759
|
+
inputVerticalAlignment: { ...inputField$5, property: 'align-items' },
|
3760
|
+
valueInputHeight: { ...inputElement$3, property: 'height' },
|
3656
3761
|
},
|
3657
3762
|
}),
|
3658
3763
|
draggableMixin,
|
@@ -3714,6 +3819,17 @@ const PasswordClass = compose(
|
|
3714
3819
|
vaadin-password-field-button[focus-ring] {
|
3715
3820
|
box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
|
3716
3821
|
}
|
3822
|
+
|
3823
|
+
${inputFloatingLabelStyle()}
|
3824
|
+
|
3825
|
+
:host ::slotted(input) {
|
3826
|
+
display: none !important;
|
3827
|
+
}
|
3828
|
+
|
3829
|
+
::part(reveal-button) {
|
3830
|
+
align-self: center;
|
3831
|
+
}
|
3832
|
+
|
3717
3833
|
`,
|
3718
3834
|
excludeAttrsSync: ['tabindex'],
|
3719
3835
|
componentName: componentName$D,
|
@@ -4033,6 +4149,10 @@ const componentName$z = getComponentName('combo-box');
|
|
4033
4149
|
|
4034
4150
|
const ComboBoxMixin = (superclass) =>
|
4035
4151
|
class ComboBoxMixinClass extends superclass {
|
4152
|
+
static get observedAttributes() {
|
4153
|
+
return ['label-type'];
|
4154
|
+
}
|
4155
|
+
|
4036
4156
|
// eslint-disable-next-line class-methods-use-this
|
4037
4157
|
#renderItem = ({ displayName, value, label }) => {
|
4038
4158
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -4233,6 +4353,28 @@ const ComboBoxMixin = (superclass) =>
|
|
4233
4353
|
});
|
4234
4354
|
}
|
4235
4355
|
|
4356
|
+
onLabelClick() {
|
4357
|
+
if (this.isReadOnly || this.isDisabled) {
|
4358
|
+
return;
|
4359
|
+
}
|
4360
|
+
this.focus();
|
4361
|
+
this.setAttribute('opened', 'true');
|
4362
|
+
}
|
4363
|
+
|
4364
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
4365
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
4366
|
+
|
4367
|
+
if (oldValue !== newValue) {
|
4368
|
+
if (attrName === 'label-type') {
|
4369
|
+
if (newValue === 'floating') {
|
4370
|
+
this.addEventListener('click', this.onLabelClick);
|
4371
|
+
} else {
|
4372
|
+
this.removeEventListener('click', this.onLabelClick);
|
4373
|
+
}
|
4374
|
+
}
|
4375
|
+
}
|
4376
|
+
}
|
4377
|
+
|
4236
4378
|
setDefaultValue() {
|
4237
4379
|
this.value = this.defaultValue;
|
4238
4380
|
}
|
@@ -4257,7 +4399,7 @@ const ComboBoxMixin = (superclass) =>
|
|
4257
4399
|
const {
|
4258
4400
|
host: host$d,
|
4259
4401
|
inputField: inputField$3,
|
4260
|
-
inputElement: inputElement$
|
4402
|
+
inputElement: inputElement$2,
|
4261
4403
|
placeholder: placeholder$1,
|
4262
4404
|
toggle: toggle$1,
|
4263
4405
|
clearButton: clearButton$1,
|
@@ -4286,6 +4428,8 @@ const ComboBoxClass = compose(
|
|
4286
4428
|
// we apply font-size also on the host so we can set its width with em
|
4287
4429
|
fontSize: [{}, host$d],
|
4288
4430
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
4431
|
+
labelFontSize: { ...label$5, property: 'font-size' },
|
4432
|
+
labelFontWeight: { ...label$5, property: 'font-weight' },
|
4289
4433
|
labelTextColor: [
|
4290
4434
|
{ ...label$5, property: 'color' },
|
4291
4435
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -4321,10 +4465,24 @@ const ComboBoxClass = compose(
|
|
4321
4465
|
inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
|
4322
4466
|
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
4323
4467
|
inputHorizontalPadding: [
|
4324
|
-
{ ...inputElement$
|
4325
|
-
{ ...inputElement$
|
4468
|
+
{ ...inputElement$2, property: 'padding-left' },
|
4469
|
+
{ ...inputElement$2, property: 'padding-right' },
|
4326
4470
|
],
|
4327
4471
|
|
4472
|
+
labelPosition: { ...label$5, property: 'position' },
|
4473
|
+
labelTopPosition: { ...label$5, property: 'top' },
|
4474
|
+
labelHorizontalPosition: [
|
4475
|
+
{ ...label$5, property: 'left' },
|
4476
|
+
{ ...label$5, property: 'right' },
|
4477
|
+
],
|
4478
|
+
inputTransformY: { ...label$5, property: 'transform' },
|
4479
|
+
inputTransition: { ...label$5, property: 'transition' },
|
4480
|
+
marginInlineStart: { ...label$5, property: 'margin-inline-start' },
|
4481
|
+
placeholderOpacity: { ...placeholder$1, property: 'opacity' },
|
4482
|
+
inputVerticalAlignment: { ...inputField$3, property: 'align-items' },
|
4483
|
+
valueInputHeight: { ...inputElement$2, property: 'height' },
|
4484
|
+
valueInputMarginBottom: { ...inputElement$2, property: 'margin-bottom' },
|
4485
|
+
|
4328
4486
|
// we need to use the variables from the portal mixin
|
4329
4487
|
// so we need to use an arrow function on the selector
|
4330
4488
|
// for that to work, because ComboBox is not available
|
@@ -4405,7 +4563,21 @@ const ComboBoxClass = compose(
|
|
4405
4563
|
padding: 0;
|
4406
4564
|
box-shadow: none;
|
4407
4565
|
}
|
4566
|
+
|
4567
|
+
vaadin-combo-box::part(toggle-button),
|
4568
|
+
vaadin-combo-box::part(clear-button) {
|
4569
|
+
align-self: center;
|
4570
|
+
}
|
4571
|
+
|
4572
|
+
vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
4573
|
+
opacity: 0;
|
4574
|
+
}
|
4575
|
+
vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
4576
|
+
opacity: 0;
|
4577
|
+
}
|
4578
|
+
|
4408
4579
|
${resetInputLabelPosition('vaadin-combo-box')}
|
4580
|
+
${inputFloatingLabelStyle()}
|
4409
4581
|
`,
|
4410
4582
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
4411
4583
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -5662,15 +5834,18 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5662
5834
|
|
5663
5835
|
const componentName$y = getComponentName('phone-field-internal');
|
5664
5836
|
|
5665
|
-
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5837
|
+
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'label-type'];
|
5666
5838
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
5667
5839
|
const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
|
5840
|
+
const labelTypeAttrs = ['country-input-label', 'phone-input-label'];
|
5668
5841
|
const mapAttrs$1 = {
|
5842
|
+
'country-input-label': 'label',
|
5843
|
+
'phone-input-label': 'label',
|
5669
5844
|
'country-input-placeholder': 'placeholder',
|
5670
5845
|
'phone-input-placeholder': 'placeholder',
|
5671
5846
|
};
|
5672
5847
|
|
5673
|
-
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5848
|
+
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
|
5674
5849
|
|
5675
5850
|
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
|
5676
5851
|
|
@@ -5699,6 +5874,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5699
5874
|
this.phoneNumberInput = this.querySelector('descope-text-field');
|
5700
5875
|
this.inputs = [this.countryCodeInput, this.phoneNumberInput];
|
5701
5876
|
|
5877
|
+
forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
|
5878
|
+
forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type'] });
|
5879
|
+
|
5880
|
+
const externalInput = this.phoneNumberInput.querySelector('input');
|
5881
|
+
syncAttrs(this.phoneNumberInput, externalInput, { includeAttrs: ['focused'] });
|
5882
|
+
|
5702
5883
|
// override combo box setter to display dialCode value in input
|
5703
5884
|
this.countryCodeInput.customValueTransformFn = (val) => {
|
5704
5885
|
const [, dialCode] = val?.split?.(' ') || [];
|
@@ -5835,6 +6016,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5835
6016
|
this.countryCodeInput.setAttribute(attr, newValue);
|
5836
6017
|
} else if (phoneAttrs.includes(attrName)) {
|
5837
6018
|
this.phoneNumberInput.setAttribute(attr, newValue);
|
6019
|
+
} else if (labelTypeAttrs.includes(attrName)) {
|
6020
|
+
if (attrName === 'country-input-label') {
|
6021
|
+
this.countryCodeInput.setAttribute(attr, newValue);
|
6022
|
+
}
|
6023
|
+
if (attrName === 'phone-input-label') {
|
6024
|
+
this.phoneNumberInput.setAttribute(attr, newValue);
|
6025
|
+
}
|
5838
6026
|
}
|
5839
6027
|
}
|
5840
6028
|
if (attrName === 'restrict-countries') {
|
@@ -5885,6 +6073,10 @@ const customMixin$6 = (superclass) =>
|
|
5885
6073
|
'phone-input-placeholder',
|
5886
6074
|
'disabled',
|
5887
6075
|
'restrict-countries',
|
6076
|
+
'label-type',
|
6077
|
+
'country-input-label',
|
6078
|
+
'phone-input-label',
|
6079
|
+
'readonly',
|
5888
6080
|
],
|
5889
6081
|
});
|
5890
6082
|
}
|
@@ -5897,6 +6089,7 @@ const {
|
|
5897
6089
|
inputField: inputField$2,
|
5898
6090
|
countryCodeInput,
|
5899
6091
|
phoneInput: phoneInput$1,
|
6092
|
+
phoneExternalInput,
|
5900
6093
|
separator: separator$1,
|
5901
6094
|
errorMessage: errorMessage$5,
|
5902
6095
|
helperText: helperText$4,
|
@@ -5906,6 +6099,7 @@ const {
|
|
5906
6099
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
5907
6100
|
inputField: { selector: '::part(input-field)' },
|
5908
6101
|
phoneInput: { selector: () => 'descope-text-field' },
|
6102
|
+
phoneExternalInput: { selector: () => '::slotted(input)' },
|
5909
6103
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
5910
6104
|
separator: { selector: 'descope-phone-field-internal .separator' },
|
5911
6105
|
helperText: { selector: '::part(helper-text)' },
|
@@ -5964,6 +6158,13 @@ const PhoneFieldClass = compose(
|
|
5964
6158
|
},
|
5965
6159
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
5966
6160
|
|
6161
|
+
horizontalPadding: [
|
6162
|
+
{ ...phoneInput$1, property: 'padding-left' },
|
6163
|
+
{ ...phoneInput$1, property: 'padding-right' },
|
6164
|
+
{ ...countryCodeInput, property: 'padding-left' },
|
6165
|
+
{ ...countryCodeInput, property: 'padding-right' },
|
6166
|
+
],
|
6167
|
+
|
5967
6168
|
labelTextColor: [
|
5968
6169
|
{ ...label$4, property: 'color' },
|
5969
6170
|
{ ...requiredIndicator$4, property: 'color' },
|
@@ -5987,6 +6188,20 @@ const PhoneFieldClass = compose(
|
|
5987
6188
|
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
5988
6189
|
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
5989
6190
|
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
6191
|
+
|
6192
|
+
valueInputHeight: [
|
6193
|
+
{ ...phoneExternalInput, property: textVars$1.valueInputHeight },
|
6194
|
+
{ ...countryCodeInput, property: comboVars.valueInputHeight },
|
6195
|
+
],
|
6196
|
+
valueInputMarginBottom: [
|
6197
|
+
{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom },
|
6198
|
+
{ ...phoneExternalInput, property: 'margin-bottom' },
|
6199
|
+
],
|
6200
|
+
marginInlineStart: [
|
6201
|
+
{ ...phoneInput$1, property: textVars$1.marginInlineStart },
|
6202
|
+
{ ...phoneExternalInput, property: 'margin-inline-start' },
|
6203
|
+
{ ...countryCodeInput, property: comboVars.marginInlineStart },
|
6204
|
+
],
|
5990
6205
|
},
|
5991
6206
|
}),
|
5992
6207
|
draggableMixin,
|
@@ -6057,10 +6272,15 @@ const PhoneFieldClass = compose(
|
|
6057
6272
|
${textVars$1.inputOutlineOffset}: 0;
|
6058
6273
|
${textVars$1.inputBorderWidth}: 0;
|
6059
6274
|
${textVars$1.inputBorderRadius}: 0;
|
6060
|
-
|
6061
|
-
|
6062
|
-
|
6063
|
-
|
6275
|
+
}
|
6276
|
+
|
6277
|
+
descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
6278
|
+
opacity: 0;
|
6279
|
+
}
|
6280
|
+
descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
6281
|
+
opacity: 0;
|
6282
|
+
}
|
6283
|
+
|
6064
6284
|
vaadin-text-field::part(input-field)::after {
|
6065
6285
|
border: none;
|
6066
6286
|
}
|
@@ -6088,6 +6308,7 @@ const observedAttributes$2 = [
|
|
6088
6308
|
'phone-input-placeholder',
|
6089
6309
|
'name',
|
6090
6310
|
'autocomplete',
|
6311
|
+
'label-type',
|
6091
6312
|
];
|
6092
6313
|
const mapAttrs = {
|
6093
6314
|
'phone-input-placeholder': 'placeholder',
|
@@ -6270,14 +6491,26 @@ const customMixin$5 = (superclass) =>
|
|
6270
6491
|
'default-code',
|
6271
6492
|
'disabled',
|
6272
6493
|
'phone-input-placeholder',
|
6494
|
+
'label-type',
|
6273
6495
|
],
|
6274
6496
|
});
|
6275
6497
|
}
|
6276
6498
|
};
|
6277
6499
|
|
6278
|
-
const {
|
6500
|
+
const {
|
6501
|
+
host: host$b,
|
6502
|
+
label: label$3,
|
6503
|
+
inputElement: inputElement$1,
|
6504
|
+
requiredIndicator: requiredIndicator$3,
|
6505
|
+
inputField: inputField$1,
|
6506
|
+
phoneInput,
|
6507
|
+
errorMessage: errorMessage$4,
|
6508
|
+
helperText: helperText$3,
|
6509
|
+
} = {
|
6279
6510
|
host: { selector: () => ':host' },
|
6280
6511
|
label: { selector: '::part(label)' },
|
6512
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
6513
|
+
inputElement: { selector: 'input' },
|
6281
6514
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6282
6515
|
inputField: { selector: '::part(input-field)' },
|
6283
6516
|
phoneInput: { selector: () => 'descope-text-field' },
|
@@ -6306,6 +6539,13 @@ const PhoneFieldInputBoxClass = compose(
|
|
6306
6539
|
inputBorderColor: { ...inputField$1, property: 'border-color' },
|
6307
6540
|
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
6308
6541
|
|
6542
|
+
inputHorizontalPadding: [
|
6543
|
+
{ ...phoneInput, property: 'padding-left' },
|
6544
|
+
{ ...phoneInput, property: 'padding-right' },
|
6545
|
+
],
|
6546
|
+
|
6547
|
+
labelFontSize: { ...label$3, property: 'font-size' },
|
6548
|
+
labelFontWeight: { ...label$3, property: 'font-weight' },
|
6309
6549
|
labelTextColor: [
|
6310
6550
|
{ ...label$3, property: 'color' },
|
6311
6551
|
{ ...requiredIndicator$3, property: 'color' },
|
@@ -6321,6 +6561,21 @@ const PhoneFieldInputBoxClass = compose(
|
|
6321
6561
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
6322
6562
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
6323
6563
|
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
6564
|
+
|
6565
|
+
labelPosition: { ...label$3, property: 'position' },
|
6566
|
+
labelTopPosition: { ...label$3, property: 'top' },
|
6567
|
+
labelHorizontalPosition: [
|
6568
|
+
{ ...label$3, property: 'left' },
|
6569
|
+
{ ...label$3, property: 'right' },
|
6570
|
+
],
|
6571
|
+
inputTransformY: { ...label$3, property: 'transform' },
|
6572
|
+
inputTransition: { ...label$3, property: 'transition' },
|
6573
|
+
marginInlineStart: { ...label$3, property: 'margin-inline-start' },
|
6574
|
+
valueInputHeight: { ...inputElement$1, property: 'height' },
|
6575
|
+
valueInputMarginBottom: {
|
6576
|
+
selector: TextFieldClass.componentName,
|
6577
|
+
property: textVars.valueInputMarginBottom,
|
6578
|
+
},
|
6324
6579
|
},
|
6325
6580
|
}),
|
6326
6581
|
draggableMixin,
|
@@ -6388,7 +6643,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
6388
6643
|
vaadin-text-field::part(input-field)::after {
|
6389
6644
|
border: none;
|
6390
6645
|
}
|
6646
|
+
|
6647
|
+
vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {
|
6648
|
+
opacity: 0;
|
6649
|
+
}
|
6650
|
+
vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {
|
6651
|
+
opacity: 0;
|
6652
|
+
}
|
6653
|
+
|
6391
6654
|
${resetInputLabelPosition('vaadin-text-field')}
|
6655
|
+
${inputFloatingLabelStyle()}
|
6392
6656
|
`,
|
6393
6657
|
excludeAttrsSync: ['tabindex'],
|
6394
6658
|
componentName: componentName$v,
|
@@ -6671,6 +6935,7 @@ const customMixin$4 = (superclass) =>
|
|
6671
6935
|
'active-policies',
|
6672
6936
|
'available-policies',
|
6673
6937
|
'data-password-policy-value-minlength',
|
6938
|
+
'label-type',
|
6674
6939
|
],
|
6675
6940
|
});
|
6676
6941
|
}
|
@@ -6720,6 +6985,9 @@ const NewPasswordClass = compose(
|
|
6720
6985
|
},
|
6721
6986
|
],
|
6722
6987
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
6988
|
+
labelFontSize: { ...label$2, property: 'font-size' },
|
6989
|
+
labelFontWeight: { ...label$2, property: 'font-weight' },
|
6990
|
+
labelTextColor: { ...label$2, property: 'color' },
|
6723
6991
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
6724
6992
|
hostWidth: { ...host$9, property: 'width' },
|
6725
6993
|
hostMinWidth: { ...host$9, property: 'min-width' },
|
@@ -6734,6 +7002,12 @@ const NewPasswordClass = compose(
|
|
6734
7002
|
property: policyPreviewVars.backgroundColor,
|
6735
7003
|
},
|
6736
7004
|
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
7005
|
+
|
7006
|
+
valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
|
7007
|
+
valueInputMarginBottom: {
|
7008
|
+
...passwordInput,
|
7009
|
+
property: PasswordClass.cssVarList.valueInputMarginBottom,
|
7010
|
+
},
|
6737
7011
|
},
|
6738
7012
|
}),
|
6739
7013
|
draggableMixin,
|
@@ -6822,6 +7096,7 @@ const commonAttrs = [
|
|
6822
7096
|
'readonly',
|
6823
7097
|
'draggable',
|
6824
7098
|
'autocomplete',
|
7099
|
+
'label-type',
|
6825
7100
|
];
|
6826
7101
|
|
6827
7102
|
const inputRelatedAttrs = [].concat(
|
@@ -8923,6 +9198,8 @@ const MultiSelectComboBoxClass = compose(
|
|
8923
9198
|
fontSize: [{}, host$5],
|
8924
9199
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
8925
9200
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
9201
|
+
labelFontSize: { ...label, property: 'font-size' },
|
9202
|
+
labelFontWeight: { ...label, property: 'font-weight' },
|
8926
9203
|
labelTextColor: [
|
8927
9204
|
{ ...label, property: 'color' },
|
8928
9205
|
{ ...requiredIndicator, property: 'color' },
|
@@ -8973,6 +9250,19 @@ const MultiSelectComboBoxClass = compose(
|
|
8973
9250
|
{ ...overflowChipSecondBorder, property: 'border-color' },
|
8974
9251
|
],
|
8975
9252
|
|
9253
|
+
labelPosition: { ...label, property: 'position' },
|
9254
|
+
labelTopPosition: { ...label, property: 'top' },
|
9255
|
+
labelLeftPosition: { ...label, property: 'left' },
|
9256
|
+
labelHorizontalPosition: [
|
9257
|
+
{ ...label, property: 'left' },
|
9258
|
+
{ ...label, property: 'right' },
|
9259
|
+
],
|
9260
|
+
inputTransformY: { ...label, property: 'transform' },
|
9261
|
+
inputTransition: { ...label, property: 'transition' },
|
9262
|
+
marginInlineStart: { ...label, property: 'margin-inline-start' },
|
9263
|
+
placeholderOpacity: { ...placeholder, property: 'opacity' },
|
9264
|
+
inputVerticalAlignment: { ...inputField, property: 'align-items' },
|
9265
|
+
|
8976
9266
|
// we need to use the variables from the portal mixin
|
8977
9267
|
// so we need to use an arrow function on the selector
|
8978
9268
|
// for that to work, because ComboBox is not available
|
@@ -9087,6 +9377,21 @@ const MultiSelectComboBoxClass = compose(
|
|
9087
9377
|
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
9088
9378
|
display: none;
|
9089
9379
|
}
|
9380
|
+
|
9381
|
+
${inputFloatingLabelStyle()}
|
9382
|
+
|
9383
|
+
vaadin-multi-select-combo-box::part(toggle-button),
|
9384
|
+
vaadin-multi-select-combo-box::part(clear-button) {
|
9385
|
+
align-self: center;
|
9386
|
+
}
|
9387
|
+
|
9388
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
9389
|
+
opacity: 0;
|
9390
|
+
}
|
9391
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
9392
|
+
opacity: 0;
|
9393
|
+
}
|
9394
|
+
|
9090
9395
|
`,
|
9091
9396
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
9092
9397
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -11881,6 +12186,7 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
11881
12186
|
{
|
11882
12187
|
labelTextColor: globalRefs$q.colors.surface.dark,
|
11883
12188
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
12189
|
+
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
11884
12190
|
valueTextColor: globalRefs$q.colors.surface.contrast,
|
11885
12191
|
placeholderTextColor: globalRefs$q.colors.surface.dark,
|
11886
12192
|
requiredIndicator: "'*'",
|
@@ -11918,6 +12224,40 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
11918
12224
|
lg: { fontSize: '18px', chipFontSize: '16px' },
|
11919
12225
|
},
|
11920
12226
|
|
12227
|
+
labelType: {
|
12228
|
+
floating: {
|
12229
|
+
labelPosition: 'absolute',
|
12230
|
+
labelTopPosition: '0',
|
12231
|
+
labelHorizontalPosition: '0.9em',
|
12232
|
+
labelFontSize: '1em',
|
12233
|
+
placeholderOpacity: 0,
|
12234
|
+
inputHeight: '3.5em',
|
12235
|
+
inputVerticalAlignment: 'flex-end',
|
12236
|
+
inputTransformY: 'translateY(1.55em)',
|
12237
|
+
inputTransition: 'all 75ms ease-in-out',
|
12238
|
+
marginInlineStart: '0', // `calc(0.25em + ${globalRefs.border.sm})`,
|
12239
|
+
valueInputHeight: '1.5702em',
|
12240
|
+
valueInputMarginBottom: '0.5em',
|
12241
|
+
|
12242
|
+
_focused: {
|
12243
|
+
labelFontSize: '0.75em',
|
12244
|
+
inputTransformY: 'translateY(1.05em)',
|
12245
|
+
labelFontWeight: '400',
|
12246
|
+
placeholderOpacity: 1,
|
12247
|
+
},
|
12248
|
+
|
12249
|
+
_readOnly: {
|
12250
|
+
placeholderOpacity: 0,
|
12251
|
+
},
|
12252
|
+
|
12253
|
+
_hasValue: {
|
12254
|
+
inputTransformY: 'translateY(1.05em)',
|
12255
|
+
labelFontSize: '0.75em',
|
12256
|
+
labelFontWeight: '400',
|
12257
|
+
},
|
12258
|
+
},
|
12259
|
+
},
|
12260
|
+
|
11921
12261
|
_fullWidth: {
|
11922
12262
|
width: '100%',
|
11923
12263
|
},
|
@@ -11965,6 +12305,8 @@ const textField = {
|
|
11965
12305
|
[vars$G.hostDirection]: refs.direction,
|
11966
12306
|
[vars$G.fontSize]: refs.fontSize,
|
11967
12307
|
[vars$G.fontFamily]: refs.fontFamily,
|
12308
|
+
[vars$G.labelFontSize]: refs.labelFontSize,
|
12309
|
+
[vars$G.labelFontWeight]: refs.labelFontWeight,
|
11968
12310
|
[vars$G.labelTextColor]: refs.labelTextColor,
|
11969
12311
|
[vars$G.labelRequiredIndicator]: refs.requiredIndicator,
|
11970
12312
|
[vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -11987,6 +12329,21 @@ const textField = {
|
|
11987
12329
|
left: { [vars$G.inputTextAlign]: 'left' },
|
11988
12330
|
center: { [vars$G.inputTextAlign]: 'center' },
|
11989
12331
|
},
|
12332
|
+
|
12333
|
+
labelType: {
|
12334
|
+
floating: {
|
12335
|
+
[vars$G.labelPosition]: refs.labelPosition,
|
12336
|
+
[vars$G.labelTopPosition]: refs.labelTopPosition,
|
12337
|
+
[vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12338
|
+
[vars$G.inputTransformY]: refs.inputTransformY,
|
12339
|
+
[vars$G.inputTransition]: refs.inputTransition,
|
12340
|
+
[vars$G.marginInlineStart]: refs.marginInlineStart,
|
12341
|
+
[vars$G.placeholderOpacity]: refs.placeholderOpacity,
|
12342
|
+
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12343
|
+
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
12344
|
+
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12345
|
+
},
|
12346
|
+
},
|
11990
12347
|
};
|
11991
12348
|
|
11992
12349
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
@@ -12001,9 +12358,12 @@ const vars$F = PasswordClass.cssVarList;
|
|
12001
12358
|
|
12002
12359
|
const password = {
|
12003
12360
|
[vars$F.hostWidth]: refs.width,
|
12361
|
+
[vars$F.hostMinWidth]: refs.minWidth,
|
12004
12362
|
[vars$F.hostDirection]: refs.direction,
|
12005
12363
|
[vars$F.fontSize]: refs.fontSize,
|
12006
12364
|
[vars$F.fontFamily]: refs.fontFamily,
|
12365
|
+
[vars$F.labelFontSize]: refs.labelFontSize,
|
12366
|
+
[vars$F.labelFontWeight]: refs.labelFontWeight,
|
12007
12367
|
[vars$F.labelTextColor]: refs.labelTextColor,
|
12008
12368
|
[vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
|
12009
12369
|
[vars$F.inputHorizontalPadding]: refs.horizontalPadding,
|
@@ -12023,6 +12383,20 @@ const password = {
|
|
12023
12383
|
[vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
|
12024
12384
|
[vars$F.revealButtonSize]: refs.toggleButtonSize,
|
12025
12385
|
[vars$F.revealButtonColor]: refs.placeholderTextColor,
|
12386
|
+
|
12387
|
+
labelType: {
|
12388
|
+
floating: {
|
12389
|
+
[vars$F.labelPosition]: refs.labelPosition,
|
12390
|
+
[vars$F.labelTopPosition]: refs.labelTopPosition,
|
12391
|
+
[vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12392
|
+
[vars$F.inputTransformY]: refs.inputTransformY,
|
12393
|
+
[vars$F.inputTransition]: refs.inputTransition,
|
12394
|
+
[vars$F.marginInlineStart]: refs.marginInlineStart,
|
12395
|
+
[vars$F.placeholderOpacity]: refs.placeholderOpacity,
|
12396
|
+
[vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12397
|
+
[vars$F.valueInputHeight]: refs.valueInputHeight,
|
12398
|
+
},
|
12399
|
+
},
|
12026
12400
|
};
|
12027
12401
|
|
12028
12402
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -12039,6 +12413,8 @@ const numberField = {
|
|
12039
12413
|
[vars$E.hostDirection]: refs.direction,
|
12040
12414
|
[vars$E.fontSize]: refs.fontSize,
|
12041
12415
|
[vars$E.fontFamily]: refs.fontFamily,
|
12416
|
+
[vars$E.labelFontSize]: refs.labelFontSize,
|
12417
|
+
[vars$E.labelFontWeight]: refs.labelFontWeight,
|
12042
12418
|
[vars$E.labelTextColor]: refs.labelTextColor,
|
12043
12419
|
[vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
|
12044
12420
|
[vars$E.inputValueTextColor]: refs.valueTextColor,
|
@@ -12055,6 +12431,21 @@ const numberField = {
|
|
12055
12431
|
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
12056
12432
|
[vars$E.inputHorizontalPadding]: refs.horizontalPadding,
|
12057
12433
|
[vars$E.inputHeight]: refs.inputHeight,
|
12434
|
+
|
12435
|
+
labelType: {
|
12436
|
+
floating: {
|
12437
|
+
[vars$E.labelPosition]: refs.labelPosition,
|
12438
|
+
[vars$E.labelTopPosition]: refs.labelTopPosition,
|
12439
|
+
[vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12440
|
+
[vars$E.inputTransformY]: refs.inputTransformY,
|
12441
|
+
[vars$E.inputTransition]: refs.inputTransition,
|
12442
|
+
[vars$E.marginInlineStart]: refs.marginInlineStart,
|
12443
|
+
[vars$E.placeholderOpacity]: refs.placeholderOpacity,
|
12444
|
+
[vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12445
|
+
[vars$E.valueInputHeight]: refs.valueInputHeight,
|
12446
|
+
[vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12447
|
+
},
|
12448
|
+
},
|
12058
12449
|
};
|
12059
12450
|
|
12060
12451
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -12071,6 +12462,8 @@ const emailField = {
|
|
12071
12462
|
[vars$D.hostDirection]: refs.direction,
|
12072
12463
|
[vars$D.fontSize]: refs.fontSize,
|
12073
12464
|
[vars$D.fontFamily]: refs.fontFamily,
|
12465
|
+
[vars$D.labelFontSize]: refs.labelFontSize,
|
12466
|
+
[vars$D.labelFontWeight]: refs.labelFontWeight,
|
12074
12467
|
[vars$D.labelTextColor]: refs.labelTextColor,
|
12075
12468
|
[vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
|
12076
12469
|
[vars$D.inputValueTextColor]: refs.valueTextColor,
|
@@ -12087,6 +12480,21 @@ const emailField = {
|
|
12087
12480
|
[vars$D.inputBackgroundColor]: refs.backgroundColor,
|
12088
12481
|
[vars$D.inputHorizontalPadding]: refs.horizontalPadding,
|
12089
12482
|
[vars$D.inputHeight]: refs.inputHeight,
|
12483
|
+
|
12484
|
+
labelType: {
|
12485
|
+
floating: {
|
12486
|
+
[vars$D.labelPosition]: refs.labelPosition,
|
12487
|
+
[vars$D.labelTopPosition]: refs.labelTopPosition,
|
12488
|
+
[vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12489
|
+
[vars$D.inputTransformY]: refs.inputTransformY,
|
12490
|
+
[vars$D.inputTransition]: refs.inputTransition,
|
12491
|
+
[vars$D.marginInlineStart]: refs.marginInlineStart,
|
12492
|
+
[vars$D.placeholderOpacity]: refs.placeholderOpacity,
|
12493
|
+
[vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12494
|
+
[vars$D.valueInputHeight]: refs.valueInputHeight,
|
12495
|
+
[vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12496
|
+
},
|
12497
|
+
},
|
12090
12498
|
};
|
12091
12499
|
|
12092
12500
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
@@ -12813,6 +13221,8 @@ const comboBox = {
|
|
12813
13221
|
[vars$o.hostDirection]: refs.direction,
|
12814
13222
|
[vars$o.fontSize]: refs.fontSize,
|
12815
13223
|
[vars$o.fontFamily]: refs.fontFamily,
|
13224
|
+
[vars$o.labelFontSize]: refs.labelFontSize,
|
13225
|
+
[vars$o.labelFontWeight]: refs.labelFontWeight,
|
12816
13226
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
12817
13227
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
12818
13228
|
[vars$o.inputBorderColor]: refs.borderColor,
|
@@ -12836,6 +13246,21 @@ const comboBox = {
|
|
12836
13246
|
[vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
|
12837
13247
|
[vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
|
12838
13248
|
|
13249
|
+
labelType: {
|
13250
|
+
floating: {
|
13251
|
+
[vars$o.labelPosition]: refs.labelPosition,
|
13252
|
+
[vars$o.labelTopPosition]: refs.labelTopPosition,
|
13253
|
+
[vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13254
|
+
[vars$o.inputTransformY]: refs.inputTransformY,
|
13255
|
+
[vars$o.inputTransition]: refs.inputTransition,
|
13256
|
+
[vars$o.marginInlineStart]: refs.marginInlineStart,
|
13257
|
+
[vars$o.placeholderOpacity]: refs.placeholderOpacity,
|
13258
|
+
[vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
13259
|
+
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
13260
|
+
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
13261
|
+
},
|
13262
|
+
},
|
13263
|
+
|
12839
13264
|
_readonly: {
|
12840
13265
|
[vars$o.inputDropdownButtonCursor]: 'default',
|
12841
13266
|
},
|
@@ -12894,6 +13319,14 @@ const phoneField = {
|
|
12894
13319
|
[vars$m.countryCodeInputWidth]: '5em',
|
12895
13320
|
[vars$m.countryCodeDropdownWidth]: '20em',
|
12896
13321
|
|
13322
|
+
labelType: {
|
13323
|
+
floating: {
|
13324
|
+
[vars$m.marginInlineStart]: '-0.25em',
|
13325
|
+
[vars$m.valueInputHeight]: '1.65em',
|
13326
|
+
[vars$m.valueInputMarginBottom]: '0.25em',
|
13327
|
+
},
|
13328
|
+
},
|
13329
|
+
|
12897
13330
|
// '@overlay': {
|
12898
13331
|
// overlayItemBackgroundColor: 'red'
|
12899
13332
|
// }
|
@@ -12913,6 +13346,8 @@ const phoneInputBoxField = {
|
|
12913
13346
|
[vars$l.hostDirection]: refs.direction,
|
12914
13347
|
[vars$l.fontSize]: refs.fontSize,
|
12915
13348
|
[vars$l.fontFamily]: refs.fontFamily,
|
13349
|
+
[vars$l.labelFontSize]: refs.labelFontSize,
|
13350
|
+
[vars$l.labelFontWeight]: refs.labelFontWeight,
|
12916
13351
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
12917
13352
|
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
12918
13353
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -12926,6 +13361,21 @@ const phoneInputBoxField = {
|
|
12926
13361
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
12927
13362
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
12928
13363
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
13364
|
+
|
13365
|
+
labelType: {
|
13366
|
+
floating: {
|
13367
|
+
[vars$l.labelPosition]: refs.labelPosition,
|
13368
|
+
[vars$l.labelTopPosition]: refs.labelTopPosition,
|
13369
|
+
[vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13370
|
+
[vars$l.inputTransformY]: refs.inputTransformY,
|
13371
|
+
[vars$l.inputTransition]: refs.inputTransition,
|
13372
|
+
[vars$l.marginInlineStart]: refs.marginInlineStart,
|
13373
|
+
[vars$l.valueInputHeight]: refs.valueInputHeight,
|
13374
|
+
[vars$l.valueInputMarginBottom]: '0.25em',
|
13375
|
+
[vars$l.inputHorizontalPadding]: '0',
|
13376
|
+
},
|
13377
|
+
},
|
13378
|
+
|
12929
13379
|
_fullWidth: {
|
12930
13380
|
[vars$l.hostWidth]: refs.width,
|
12931
13381
|
},
|
@@ -12946,11 +13396,20 @@ const newPassword = {
|
|
12946
13396
|
[vars$k.hostDirection]: refs.direction,
|
12947
13397
|
[vars$k.fontSize]: refs.fontSize,
|
12948
13398
|
[vars$k.fontFamily]: refs.fontFamily,
|
13399
|
+
[vars$k.labelFontSize]: refs.labelFontSize,
|
13400
|
+
[vars$k.labelFontWeight]: refs.labelFontWeight,
|
13401
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
12949
13402
|
[vars$k.spaceBetweenInputs]: '1em',
|
12950
13403
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
12951
13404
|
[vars$k.policyPreviewBackgroundColor]: 'none',
|
12952
13405
|
[vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
|
12953
13406
|
|
13407
|
+
labelType: {
|
13408
|
+
floating: {
|
13409
|
+
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
13410
|
+
},
|
13411
|
+
},
|
13412
|
+
|
12954
13413
|
_required: {
|
12955
13414
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
12956
13415
|
// That's why we fake the required indicator on each input.
|
@@ -13225,6 +13684,8 @@ const multiSelectComboBox = {
|
|
13225
13684
|
[vars$c.hostDirection]: refs.direction,
|
13226
13685
|
[vars$c.fontSize]: refs.fontSize,
|
13227
13686
|
[vars$c.fontFamily]: refs.fontFamily,
|
13687
|
+
[vars$c.labelFontSize]: refs.labelFontSize,
|
13688
|
+
[vars$c.labelFontWeight]: refs.labelFontWeight,
|
13228
13689
|
[vars$c.labelTextColor]: refs.labelTextColor,
|
13229
13690
|
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
13230
13691
|
[vars$c.inputBorderColor]: refs.borderColor,
|
@@ -13252,6 +13713,25 @@ const multiSelectComboBox = {
|
|
13252
13713
|
[vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
|
13253
13714
|
[vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
|
13254
13715
|
|
13716
|
+
labelType: {
|
13717
|
+
floating: {
|
13718
|
+
[vars$c.labelPosition]: refs.labelPosition,
|
13719
|
+
[vars$c.labelTopPosition]: refs.labelTopPosition,
|
13720
|
+
[vars$c.labelLeftPosition]: refs.labelLeftPosition,
|
13721
|
+
[vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13722
|
+
[vars$c.inputTransformY]: refs.inputTransformY,
|
13723
|
+
[vars$c.inputTransition]: refs.inputTransition,
|
13724
|
+
[vars$c.marginInlineStart]: refs.marginInlineStart,
|
13725
|
+
[vars$c.placeholderOpacity]: refs.placeholderOpacity,
|
13726
|
+
[vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
13727
|
+
[vars$c.inputHorizontalPadding]: '0.25em',
|
13728
|
+
|
13729
|
+
_hasValue: {
|
13730
|
+
[vars$c.inputHorizontalPadding]: '0.45em',
|
13731
|
+
},
|
13732
|
+
},
|
13733
|
+
},
|
13734
|
+
|
13255
13735
|
_readonly: {
|
13256
13736
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
13257
13737
|
},
|