@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/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,101 @@ 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
|
+
],
|
2599
|
+
};
|
2600
|
+
|
2601
|
+
// since on load we can only sample the color of the placeholder,
|
2602
|
+
// we need to temporarily populate the input in order to sample the value color
|
2603
|
+
const getValueColor = (ele, computedStyle) => {
|
2604
|
+
// eslint-disable-next-line no-param-reassign
|
2605
|
+
ele.value = '_';
|
2606
|
+
|
2607
|
+
const valueColor = computedStyle.getPropertyValue('color');
|
2608
|
+
|
2609
|
+
// eslint-disable-next-line no-param-reassign
|
2610
|
+
ele.value = '';
|
2611
|
+
|
2612
|
+
return valueColor;
|
2613
|
+
};
|
2614
|
+
|
2615
|
+
const createExternalInputSlot = (slotName, targetSlotName) => {
|
2616
|
+
const slotEle = document.createElement('slot');
|
2617
|
+
|
2618
|
+
slotEle.setAttribute('name', slotName);
|
2619
|
+
slotEle.setAttribute('slot', targetSlotName);
|
2620
|
+
|
2621
|
+
return slotEle;
|
2622
|
+
};
|
2623
|
+
|
2624
|
+
const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
2625
|
+
const inputEle = document.createElement('input');
|
2626
|
+
|
2627
|
+
inputEle.setAttribute('slot', targetSlotName);
|
2628
|
+
inputEle.setAttribute('type', type);
|
2629
|
+
inputEle.setAttribute('data-hidden-input', 'true');
|
2630
|
+
inputEle.setAttribute('autocomplete', autocompleteType);
|
2631
|
+
|
2632
|
+
return inputEle;
|
2633
|
+
};
|
2634
|
+
|
2635
|
+
const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
|
2636
|
+
const computedStyle = getComputedStyle(sourceInputEle);
|
2637
|
+
const height = computedStyle.getPropertyValue('height');
|
2638
|
+
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
2639
|
+
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
2640
|
+
const fontSize = computedStyle.getPropertyValue('font-size');
|
2641
|
+
const fontFamily = computedStyle.getPropertyValue('font-family');
|
2642
|
+
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
2643
|
+
const caretColor = computedStyle.getPropertyValue('caret-color');
|
2644
|
+
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
2645
|
+
|
2646
|
+
// set external input style (and lock it with `all: unset` and `!important` all around)
|
2647
|
+
// eslint-disable-next-line no-param-reassign
|
2648
|
+
targetInputEle.style = `
|
2649
|
+
all: unset !important;
|
2650
|
+
position: absolute !important;
|
2651
|
+
background-color: transparent !important;
|
2652
|
+
color: ${valueColor} !important;
|
2653
|
+
height: ${height} !important;
|
2654
|
+
left: ${paddingLeft} !important;
|
2655
|
+
right: ${paddingRight} !important;
|
2656
|
+
font-size: ${fontSize} !important;
|
2657
|
+
font-family: ${fontFamily} !important;
|
2658
|
+
letter-spacing: ${letterSpacing} !important;
|
2659
|
+
caret-color: ${caretColor} !important;
|
2660
|
+
${customStyle || ''}
|
2661
|
+
`;
|
2550
2662
|
};
|
2551
2663
|
|
2552
2664
|
const componentName$M = getComponentName('email-field');
|
@@ -2555,9 +2667,68 @@ const customMixin$a = (superclass) =>
|
|
2555
2667
|
class EmailFieldMixinClass extends superclass {
|
2556
2668
|
init() {
|
2557
2669
|
super.init?.();
|
2670
|
+
|
2558
2671
|
this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
|
2672
|
+
|
2673
|
+
this.handleExternalInput();
|
2674
|
+
}
|
2675
|
+
|
2676
|
+
handleExternalInput() {
|
2677
|
+
// reset vaadin's checkValidity
|
2678
|
+
this.baseElement.checkValidity = () => {};
|
2679
|
+
|
2680
|
+
// set safety attribute `external-input`
|
2681
|
+
this.setAttribute('external-input', 'true');
|
2682
|
+
|
2683
|
+
// use original input element as reference
|
2684
|
+
const origInput = this.baseElement.querySelector('input');
|
2685
|
+
|
2686
|
+
// create external slot
|
2687
|
+
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
2688
|
+
// append external slot to base element
|
2689
|
+
this.baseElement.appendChild(externalInputSlot);
|
2690
|
+
|
2691
|
+
const externalInput = createExternalInputEle(
|
2692
|
+
'external-input',
|
2693
|
+
'text',
|
2694
|
+
this.getAutocompleteType()
|
2695
|
+
);
|
2696
|
+
|
2697
|
+
// apply original input's styles to external input
|
2698
|
+
setTimeout(() => {
|
2699
|
+
applyExternalInputStyles(origInput, externalInput);
|
2700
|
+
});
|
2701
|
+
|
2702
|
+
// set external input events
|
2703
|
+
this.handleExternalInputEvents(externalInput);
|
2704
|
+
|
2705
|
+
syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
|
2706
|
+
|
2707
|
+
// append external input to component's DOM
|
2708
|
+
this.appendChild(externalInput);
|
2709
|
+
}
|
2710
|
+
|
2711
|
+
getAutocompleteType() {
|
2712
|
+
return this.getAttribute('autocomplete') || 'username';
|
2713
|
+
}
|
2714
|
+
|
2715
|
+
handleExternalInputEvents(inputEle) {
|
2716
|
+
// sync value of insible input back to original input
|
2717
|
+
inputEle.addEventListener('input', (e) => {
|
2718
|
+
this.value = e.target.value;
|
2719
|
+
});
|
2720
|
+
|
2721
|
+
// sync `focused` attribute on host when focusing on external input
|
2722
|
+
inputEle.addEventListener('focus', () => {
|
2723
|
+
this.setAttribute('focused', 'true');
|
2724
|
+
});
|
2725
|
+
|
2726
|
+
inputEle.addEventListener('blur', () => {
|
2727
|
+
this.removeAttribute('focused');
|
2728
|
+
});
|
2559
2729
|
}
|
2560
2730
|
};
|
2731
|
+
|
2561
2732
|
const EmailFieldClass = compose(
|
2562
2733
|
createStyleMixin({
|
2563
2734
|
mappings: textFieldMappings,
|
@@ -2582,6 +2753,14 @@ const EmailFieldClass = compose(
|
|
2582
2753
|
${resetInputLabelPosition('vaadin-email-field')}
|
2583
2754
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2584
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
|
+
}
|
2585
2764
|
`,
|
2586
2765
|
excludeAttrsSync: ['tabindex'],
|
2587
2766
|
componentName: componentName$M,
|
@@ -2764,6 +2943,14 @@ const NumberFieldClass = compose(
|
|
2764
2943
|
${resetInputLabelPosition('vaadin-number-field')}
|
2765
2944
|
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
2766
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
|
+
}
|
2767
2954
|
`,
|
2768
2955
|
excludeAttrsSync: ['tabindex'],
|
2769
2956
|
componentName: componentName$H,
|
@@ -3022,7 +3209,7 @@ class PasscodeInternal extends BaseInputClass$7 {
|
|
3022
3209
|
|
3023
3210
|
const componentName$F = getComponentName('text-field');
|
3024
3211
|
|
3025
|
-
const observedAttrs = ['type'];
|
3212
|
+
const observedAttrs = ['type', 'label-type'];
|
3026
3213
|
|
3027
3214
|
const customMixin$9 = (superclass) =>
|
3028
3215
|
class TextFieldClass extends superclass {
|
@@ -3030,6 +3217,10 @@ const customMixin$9 = (superclass) =>
|
|
3030
3217
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
3031
3218
|
}
|
3032
3219
|
|
3220
|
+
onLabelClick() {
|
3221
|
+
this.focus();
|
3222
|
+
}
|
3223
|
+
|
3033
3224
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
3034
3225
|
super.attributeChangeCallback?.(attrName, oldVal, newVal);
|
3035
3226
|
|
@@ -3041,6 +3232,16 @@ const customMixin$9 = (superclass) =>
|
|
3041
3232
|
if (attrName === 'type') {
|
3042
3233
|
this.baseElement._setType(newVal);
|
3043
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
|
+
}
|
3044
3245
|
}
|
3045
3246
|
|
3046
3247
|
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
@@ -3093,9 +3294,17 @@ const TextFieldClass = compose(
|
|
3093
3294
|
:host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
|
3094
3295
|
opacity: 1;
|
3095
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
|
+
}
|
3096
3304
|
${resetInputLabelPosition('vaadin-text-field')}
|
3097
3305
|
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
3098
3306
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3307
|
+
${inputFloatingLabelStyle()}
|
3099
3308
|
`,
|
3100
3309
|
excludeAttrsSync: ['tabindex'],
|
3101
3310
|
componentName: componentName$F,
|
@@ -3327,69 +3536,6 @@ const passwordDraggableMixin = (superclass) =>
|
|
3327
3536
|
}
|
3328
3537
|
};
|
3329
3538
|
|
3330
|
-
// since on load we can only sample the color of the placeholder,
|
3331
|
-
// we need to temporarily populate the input in order to sample the value color
|
3332
|
-
const getValueColor = (ele, computedStyle) => {
|
3333
|
-
// eslint-disable-next-line no-param-reassign
|
3334
|
-
ele.value = '_';
|
3335
|
-
|
3336
|
-
const valueColor = computedStyle.getPropertyValue('color');
|
3337
|
-
|
3338
|
-
// eslint-disable-next-line no-param-reassign
|
3339
|
-
ele.value = '';
|
3340
|
-
|
3341
|
-
return valueColor;
|
3342
|
-
};
|
3343
|
-
|
3344
|
-
const createExternalInputSlot = (slotName, targetSlotName) => {
|
3345
|
-
const slotEle = document.createElement('slot');
|
3346
|
-
|
3347
|
-
slotEle.setAttribute('name', slotName);
|
3348
|
-
slotEle.setAttribute('slot', targetSlotName);
|
3349
|
-
|
3350
|
-
return slotEle;
|
3351
|
-
};
|
3352
|
-
|
3353
|
-
const createExternalInputEle = (targetSlotName, autocompleteType) => {
|
3354
|
-
const inputEle = document.createElement('input');
|
3355
|
-
|
3356
|
-
inputEle.setAttribute('slot', targetSlotName);
|
3357
|
-
inputEle.setAttribute('type', 'password');
|
3358
|
-
inputEle.setAttribute('data-hidden-input', 'true');
|
3359
|
-
inputEle.setAttribute('autocomplete', autocompleteType);
|
3360
|
-
|
3361
|
-
return inputEle;
|
3362
|
-
};
|
3363
|
-
|
3364
|
-
const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
|
3365
|
-
const computedStyle = getComputedStyle(sourceInputEle);
|
3366
|
-
const height = computedStyle.getPropertyValue('height');
|
3367
|
-
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
3368
|
-
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
3369
|
-
const fontSize = computedStyle.getPropertyValue('font-size');
|
3370
|
-
const fontFamily = computedStyle.getPropertyValue('font-family');
|
3371
|
-
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
3372
|
-
const caretColor = computedStyle.getPropertyValue('caret-color');
|
3373
|
-
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
3374
|
-
|
3375
|
-
// set external input style (and lock it with `all: unset` and `!important` all around)
|
3376
|
-
// eslint-disable-next-line no-param-reassign
|
3377
|
-
targetInputEle.style = `
|
3378
|
-
all: unset !important;
|
3379
|
-
position: absolute !important;
|
3380
|
-
width: calc(100% - 3em) !important;
|
3381
|
-
background-color: transparent !important;
|
3382
|
-
color: ${valueColor} !important;
|
3383
|
-
height: ${height} !important;
|
3384
|
-
left: ${paddingLeft} !important;
|
3385
|
-
right: ${paddingRight} !important;
|
3386
|
-
font-size: ${fontSize} !important;
|
3387
|
-
font-family: ${fontFamily} !important;
|
3388
|
-
letter-spacing: ${letterSpacing} !important;
|
3389
|
-
caret-color: ${caretColor} !important;
|
3390
|
-
`;
|
3391
|
-
};
|
3392
|
-
|
3393
3539
|
const componentName$D = getComponentName('password');
|
3394
3540
|
|
3395
3541
|
const customMixin$7 = (superclass) =>
|
@@ -3411,13 +3557,23 @@ const customMixin$7 = (superclass) =>
|
|
3411
3557
|
this.baseElement.appendChild(externalInputSlot);
|
3412
3558
|
|
3413
3559
|
// create external input
|
3414
|
-
const externalInput = createExternalInputEle(
|
3560
|
+
const externalInput = createExternalInputEle(
|
3561
|
+
'external-input',
|
3562
|
+
'password',
|
3563
|
+
this.getAutocompleteType()
|
3564
|
+
);
|
3415
3565
|
|
3416
3566
|
this.handlePasswordVisibility(externalInput);
|
3417
3567
|
|
3418
3568
|
// apply original input's styles to external input
|
3419
3569
|
setTimeout(() => {
|
3420
|
-
applyExternalInputStyles(
|
3570
|
+
applyExternalInputStyles(
|
3571
|
+
origInput,
|
3572
|
+
externalInput,
|
3573
|
+
`
|
3574
|
+
width: calc(100% - 3em) !important;
|
3575
|
+
`
|
3576
|
+
);
|
3421
3577
|
});
|
3422
3578
|
|
3423
3579
|
// set external input events
|
@@ -3516,7 +3672,7 @@ const customMixin$7 = (superclass) =>
|
|
3516
3672
|
const {
|
3517
3673
|
host: host$f,
|
3518
3674
|
inputField: inputField$5,
|
3519
|
-
inputElement: inputElement$
|
3675
|
+
inputElement: inputElement$3,
|
3520
3676
|
inputElementPlaceholder,
|
3521
3677
|
revealButtonContainer,
|
3522
3678
|
revealButtonIcon,
|
@@ -3547,8 +3703,8 @@ const PasswordClass = compose(
|
|
3547
3703
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3548
3704
|
inputHeight: { ...inputField$5, property: 'height' },
|
3549
3705
|
inputHorizontalPadding: [
|
3550
|
-
{ ...inputElement$
|
3551
|
-
{ ...inputElement$
|
3706
|
+
{ ...inputElement$3, property: 'padding-left' },
|
3707
|
+
{ ...inputElement$3, property: 'padding-right' },
|
3552
3708
|
],
|
3553
3709
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
3554
3710
|
|
@@ -3562,6 +3718,8 @@ const PasswordClass = compose(
|
|
3562
3718
|
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
3563
3719
|
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
3564
3720
|
|
3721
|
+
labelFontSize: { ...label$7, property: 'font-size' },
|
3722
|
+
labelFontWeight: { ...label$7, property: 'font-weight' },
|
3565
3723
|
labelTextColor: [
|
3566
3724
|
{ ...label$7, property: 'color' },
|
3567
3725
|
{ ...requiredIndicator$7, property: 'color' },
|
@@ -3574,7 +3732,7 @@ const PasswordClass = compose(
|
|
3574
3732
|
{ selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
|
3575
3733
|
],
|
3576
3734
|
inputValueTextColor: [
|
3577
|
-
{ ...inputElement$
|
3735
|
+
{ ...inputElement$3, property: 'color' },
|
3578
3736
|
{ selector: () => ':host ::slotted(input)', property: 'color' },
|
3579
3737
|
],
|
3580
3738
|
|
@@ -3584,6 +3742,22 @@ const PasswordClass = compose(
|
|
3584
3742
|
],
|
3585
3743
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3586
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' },
|
3587
3761
|
},
|
3588
3762
|
}),
|
3589
3763
|
draggableMixin,
|
@@ -3645,6 +3819,17 @@ const PasswordClass = compose(
|
|
3645
3819
|
vaadin-password-field-button[focus-ring] {
|
3646
3820
|
box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
|
3647
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
|
+
|
3648
3833
|
`,
|
3649
3834
|
excludeAttrsSync: ['tabindex'],
|
3650
3835
|
componentName: componentName$D,
|
@@ -3964,6 +4149,10 @@ const componentName$z = getComponentName('combo-box');
|
|
3964
4149
|
|
3965
4150
|
const ComboBoxMixin = (superclass) =>
|
3966
4151
|
class ComboBoxMixinClass extends superclass {
|
4152
|
+
static get observedAttributes() {
|
4153
|
+
return ['label-type'];
|
4154
|
+
}
|
4155
|
+
|
3967
4156
|
// eslint-disable-next-line class-methods-use-this
|
3968
4157
|
#renderItem = ({ displayName, value, label }) => {
|
3969
4158
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -4164,6 +4353,28 @@ const ComboBoxMixin = (superclass) =>
|
|
4164
4353
|
});
|
4165
4354
|
}
|
4166
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
|
+
|
4167
4378
|
setDefaultValue() {
|
4168
4379
|
this.value = this.defaultValue;
|
4169
4380
|
}
|
@@ -4188,7 +4399,7 @@ const ComboBoxMixin = (superclass) =>
|
|
4188
4399
|
const {
|
4189
4400
|
host: host$d,
|
4190
4401
|
inputField: inputField$3,
|
4191
|
-
inputElement: inputElement$
|
4402
|
+
inputElement: inputElement$2,
|
4192
4403
|
placeholder: placeholder$1,
|
4193
4404
|
toggle: toggle$1,
|
4194
4405
|
clearButton: clearButton$1,
|
@@ -4217,6 +4428,8 @@ const ComboBoxClass = compose(
|
|
4217
4428
|
// we apply font-size also on the host so we can set its width with em
|
4218
4429
|
fontSize: [{}, host$d],
|
4219
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' },
|
4220
4433
|
labelTextColor: [
|
4221
4434
|
{ ...label$5, property: 'color' },
|
4222
4435
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -4252,10 +4465,24 @@ const ComboBoxClass = compose(
|
|
4252
4465
|
inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
|
4253
4466
|
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
4254
4467
|
inputHorizontalPadding: [
|
4255
|
-
{ ...inputElement$
|
4256
|
-
{ ...inputElement$
|
4468
|
+
{ ...inputElement$2, property: 'padding-left' },
|
4469
|
+
{ ...inputElement$2, property: 'padding-right' },
|
4257
4470
|
],
|
4258
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
|
+
|
4259
4486
|
// we need to use the variables from the portal mixin
|
4260
4487
|
// so we need to use an arrow function on the selector
|
4261
4488
|
// for that to work, because ComboBox is not available
|
@@ -4336,7 +4563,21 @@ const ComboBoxClass = compose(
|
|
4336
4563
|
padding: 0;
|
4337
4564
|
box-shadow: none;
|
4338
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
|
+
|
4339
4579
|
${resetInputLabelPosition('vaadin-combo-box')}
|
4580
|
+
${inputFloatingLabelStyle()}
|
4340
4581
|
`,
|
4341
4582
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
4342
4583
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -5593,15 +5834,18 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5593
5834
|
|
5594
5835
|
const componentName$y = getComponentName('phone-field-internal');
|
5595
5836
|
|
5596
|
-
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5837
|
+
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'label-type'];
|
5597
5838
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
5598
5839
|
const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
|
5840
|
+
const labelTypeAttrs = ['country-input-label', 'phone-input-label'];
|
5599
5841
|
const mapAttrs$1 = {
|
5842
|
+
'country-input-label': 'label',
|
5843
|
+
'phone-input-label': 'label',
|
5600
5844
|
'country-input-placeholder': 'placeholder',
|
5601
5845
|
'phone-input-placeholder': 'placeholder',
|
5602
5846
|
};
|
5603
5847
|
|
5604
|
-
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5848
|
+
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
|
5605
5849
|
|
5606
5850
|
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
|
5607
5851
|
|
@@ -5630,6 +5874,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5630
5874
|
this.phoneNumberInput = this.querySelector('descope-text-field');
|
5631
5875
|
this.inputs = [this.countryCodeInput, this.phoneNumberInput];
|
5632
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
|
+
|
5633
5883
|
// override combo box setter to display dialCode value in input
|
5634
5884
|
this.countryCodeInput.customValueTransformFn = (val) => {
|
5635
5885
|
const [, dialCode] = val?.split?.(' ') || [];
|
@@ -5766,6 +6016,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5766
6016
|
this.countryCodeInput.setAttribute(attr, newValue);
|
5767
6017
|
} else if (phoneAttrs.includes(attrName)) {
|
5768
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
|
+
}
|
5769
6026
|
}
|
5770
6027
|
}
|
5771
6028
|
if (attrName === 'restrict-countries') {
|
@@ -5816,6 +6073,10 @@ const customMixin$6 = (superclass) =>
|
|
5816
6073
|
'phone-input-placeholder',
|
5817
6074
|
'disabled',
|
5818
6075
|
'restrict-countries',
|
6076
|
+
'label-type',
|
6077
|
+
'country-input-label',
|
6078
|
+
'phone-input-label',
|
6079
|
+
'readonly',
|
5819
6080
|
],
|
5820
6081
|
});
|
5821
6082
|
}
|
@@ -5828,6 +6089,7 @@ const {
|
|
5828
6089
|
inputField: inputField$2,
|
5829
6090
|
countryCodeInput,
|
5830
6091
|
phoneInput: phoneInput$1,
|
6092
|
+
phoneExternalInput,
|
5831
6093
|
separator: separator$1,
|
5832
6094
|
errorMessage: errorMessage$5,
|
5833
6095
|
helperText: helperText$4,
|
@@ -5837,6 +6099,7 @@ const {
|
|
5837
6099
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
5838
6100
|
inputField: { selector: '::part(input-field)' },
|
5839
6101
|
phoneInput: { selector: () => 'descope-text-field' },
|
6102
|
+
phoneExternalInput: { selector: () => '::slotted(input)' },
|
5840
6103
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
5841
6104
|
separator: { selector: 'descope-phone-field-internal .separator' },
|
5842
6105
|
helperText: { selector: '::part(helper-text)' },
|
@@ -5895,6 +6158,13 @@ const PhoneFieldClass = compose(
|
|
5895
6158
|
},
|
5896
6159
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
5897
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
|
+
|
5898
6168
|
labelTextColor: [
|
5899
6169
|
{ ...label$4, property: 'color' },
|
5900
6170
|
{ ...requiredIndicator$4, property: 'color' },
|
@@ -5918,6 +6188,20 @@ const PhoneFieldClass = compose(
|
|
5918
6188
|
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
5919
6189
|
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
5920
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
|
+
],
|
5921
6205
|
},
|
5922
6206
|
}),
|
5923
6207
|
draggableMixin,
|
@@ -5988,10 +6272,15 @@ const PhoneFieldClass = compose(
|
|
5988
6272
|
${textVars$1.inputOutlineOffset}: 0;
|
5989
6273
|
${textVars$1.inputBorderWidth}: 0;
|
5990
6274
|
${textVars$1.inputBorderRadius}: 0;
|
5991
|
-
|
5992
|
-
|
5993
|
-
|
5994
|
-
|
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
|
+
|
5995
6284
|
vaadin-text-field::part(input-field)::after {
|
5996
6285
|
border: none;
|
5997
6286
|
}
|
@@ -6019,6 +6308,7 @@ const observedAttributes$2 = [
|
|
6019
6308
|
'phone-input-placeholder',
|
6020
6309
|
'name',
|
6021
6310
|
'autocomplete',
|
6311
|
+
'label-type',
|
6022
6312
|
];
|
6023
6313
|
const mapAttrs = {
|
6024
6314
|
'phone-input-placeholder': 'placeholder',
|
@@ -6201,14 +6491,26 @@ const customMixin$5 = (superclass) =>
|
|
6201
6491
|
'default-code',
|
6202
6492
|
'disabled',
|
6203
6493
|
'phone-input-placeholder',
|
6494
|
+
'label-type',
|
6204
6495
|
],
|
6205
6496
|
});
|
6206
6497
|
}
|
6207
6498
|
};
|
6208
6499
|
|
6209
|
-
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
|
+
} = {
|
6210
6510
|
host: { selector: () => ':host' },
|
6211
6511
|
label: { selector: '::part(label)' },
|
6512
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
6513
|
+
inputElement: { selector: 'input' },
|
6212
6514
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6213
6515
|
inputField: { selector: '::part(input-field)' },
|
6214
6516
|
phoneInput: { selector: () => 'descope-text-field' },
|
@@ -6237,6 +6539,13 @@ const PhoneFieldInputBoxClass = compose(
|
|
6237
6539
|
inputBorderColor: { ...inputField$1, property: 'border-color' },
|
6238
6540
|
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
6239
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' },
|
6240
6549
|
labelTextColor: [
|
6241
6550
|
{ ...label$3, property: 'color' },
|
6242
6551
|
{ ...requiredIndicator$3, property: 'color' },
|
@@ -6252,6 +6561,21 @@ const PhoneFieldInputBoxClass = compose(
|
|
6252
6561
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
6253
6562
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
6254
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
|
+
},
|
6255
6579
|
},
|
6256
6580
|
}),
|
6257
6581
|
draggableMixin,
|
@@ -6319,7 +6643,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
6319
6643
|
vaadin-text-field::part(input-field)::after {
|
6320
6644
|
border: none;
|
6321
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
|
+
|
6322
6654
|
${resetInputLabelPosition('vaadin-text-field')}
|
6655
|
+
${inputFloatingLabelStyle()}
|
6323
6656
|
`,
|
6324
6657
|
excludeAttrsSync: ['tabindex'],
|
6325
6658
|
componentName: componentName$v,
|
@@ -6602,6 +6935,7 @@ const customMixin$4 = (superclass) =>
|
|
6602
6935
|
'active-policies',
|
6603
6936
|
'available-policies',
|
6604
6937
|
'data-password-policy-value-minlength',
|
6938
|
+
'label-type',
|
6605
6939
|
],
|
6606
6940
|
});
|
6607
6941
|
}
|
@@ -6665,6 +6999,12 @@ const NewPasswordClass = compose(
|
|
6665
6999
|
property: policyPreviewVars.backgroundColor,
|
6666
7000
|
},
|
6667
7001
|
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
7002
|
+
|
7003
|
+
valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
|
7004
|
+
valueInputMarginBottom: {
|
7005
|
+
...passwordInput,
|
7006
|
+
property: PasswordClass.cssVarList.valueInputMarginBottom,
|
7007
|
+
},
|
6668
7008
|
},
|
6669
7009
|
}),
|
6670
7010
|
draggableMixin,
|
@@ -6753,6 +7093,7 @@ const commonAttrs = [
|
|
6753
7093
|
'readonly',
|
6754
7094
|
'draggable',
|
6755
7095
|
'autocomplete',
|
7096
|
+
'label-type',
|
6756
7097
|
];
|
6757
7098
|
|
6758
7099
|
const inputRelatedAttrs = [].concat(
|
@@ -8854,6 +9195,8 @@ const MultiSelectComboBoxClass = compose(
|
|
8854
9195
|
fontSize: [{}, host$5],
|
8855
9196
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
8856
9197
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
9198
|
+
labelFontSize: { ...label, property: 'font-size' },
|
9199
|
+
labelFontWeight: { ...label, property: 'font-weight' },
|
8857
9200
|
labelTextColor: [
|
8858
9201
|
{ ...label, property: 'color' },
|
8859
9202
|
{ ...requiredIndicator, property: 'color' },
|
@@ -8904,6 +9247,19 @@ const MultiSelectComboBoxClass = compose(
|
|
8904
9247
|
{ ...overflowChipSecondBorder, property: 'border-color' },
|
8905
9248
|
],
|
8906
9249
|
|
9250
|
+
labelPosition: { ...label, property: 'position' },
|
9251
|
+
labelTopPosition: { ...label, property: 'top' },
|
9252
|
+
labelLeftPosition: { ...label, property: 'left' },
|
9253
|
+
labelHorizontalPosition: [
|
9254
|
+
{ ...label, property: 'left' },
|
9255
|
+
{ ...label, property: 'right' },
|
9256
|
+
],
|
9257
|
+
inputTransformY: { ...label, property: 'transform' },
|
9258
|
+
inputTransition: { ...label, property: 'transition' },
|
9259
|
+
marginInlineStart: { ...label, property: 'margin-inline-start' },
|
9260
|
+
placeholderOpacity: { ...placeholder, property: 'opacity' },
|
9261
|
+
inputVerticalAlignment: { ...inputField, property: 'align-items' },
|
9262
|
+
|
8907
9263
|
// we need to use the variables from the portal mixin
|
8908
9264
|
// so we need to use an arrow function on the selector
|
8909
9265
|
// for that to work, because ComboBox is not available
|
@@ -9018,6 +9374,21 @@ const MultiSelectComboBoxClass = compose(
|
|
9018
9374
|
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
9019
9375
|
display: none;
|
9020
9376
|
}
|
9377
|
+
|
9378
|
+
${inputFloatingLabelStyle()}
|
9379
|
+
|
9380
|
+
vaadin-multi-select-combo-box::part(toggle-button),
|
9381
|
+
vaadin-multi-select-combo-box::part(clear-button) {
|
9382
|
+
align-self: center;
|
9383
|
+
}
|
9384
|
+
|
9385
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
9386
|
+
opacity: 0;
|
9387
|
+
}
|
9388
|
+
vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
9389
|
+
opacity: 0;
|
9390
|
+
}
|
9391
|
+
|
9021
9392
|
`,
|
9022
9393
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
9023
9394
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -11812,6 +12183,7 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
11812
12183
|
{
|
11813
12184
|
labelTextColor: globalRefs$q.colors.surface.dark,
|
11814
12185
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
12186
|
+
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
11815
12187
|
valueTextColor: globalRefs$q.colors.surface.contrast,
|
11816
12188
|
placeholderTextColor: globalRefs$q.colors.surface.dark,
|
11817
12189
|
requiredIndicator: "'*'",
|
@@ -11849,6 +12221,40 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
11849
12221
|
lg: { fontSize: '18px', chipFontSize: '16px' },
|
11850
12222
|
},
|
11851
12223
|
|
12224
|
+
labelType: {
|
12225
|
+
floating: {
|
12226
|
+
labelPosition: 'absolute',
|
12227
|
+
labelTopPosition: '0',
|
12228
|
+
labelHorizontalPosition: '0.9em',
|
12229
|
+
labelFontSize: '1em',
|
12230
|
+
placeholderOpacity: 0,
|
12231
|
+
inputHeight: '3.5em',
|
12232
|
+
inputVerticalAlignment: 'flex-end',
|
12233
|
+
inputTransformY: 'translateY(1.55em)',
|
12234
|
+
inputTransition: 'all 75ms ease-in-out',
|
12235
|
+
marginInlineStart: '0', // `calc(0.25em + ${globalRefs.border.sm})`,
|
12236
|
+
valueInputHeight: '1.5702em',
|
12237
|
+
valueInputMarginBottom: '0.5em',
|
12238
|
+
|
12239
|
+
_focused: {
|
12240
|
+
labelFontSize: '0.75em',
|
12241
|
+
inputTransformY: 'translateY(1.05em)',
|
12242
|
+
labelFontWeight: '400',
|
12243
|
+
placeholderOpacity: 1,
|
12244
|
+
},
|
12245
|
+
|
12246
|
+
_readOnly: {
|
12247
|
+
placeholderOpacity: 0,
|
12248
|
+
},
|
12249
|
+
|
12250
|
+
_hasValue: {
|
12251
|
+
inputTransformY: 'translateY(1.05em)',
|
12252
|
+
labelFontSize: '0.75em',
|
12253
|
+
labelFontWeight: '400',
|
12254
|
+
},
|
12255
|
+
},
|
12256
|
+
},
|
12257
|
+
|
11852
12258
|
_fullWidth: {
|
11853
12259
|
width: '100%',
|
11854
12260
|
},
|
@@ -11896,6 +12302,8 @@ const textField = {
|
|
11896
12302
|
[vars$G.hostDirection]: refs.direction,
|
11897
12303
|
[vars$G.fontSize]: refs.fontSize,
|
11898
12304
|
[vars$G.fontFamily]: refs.fontFamily,
|
12305
|
+
[vars$G.labelFontSize]: refs.labelFontSize,
|
12306
|
+
[vars$G.labelFontWeight]: refs.labelFontWeight,
|
11899
12307
|
[vars$G.labelTextColor]: refs.labelTextColor,
|
11900
12308
|
[vars$G.labelRequiredIndicator]: refs.requiredIndicator,
|
11901
12309
|
[vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -11918,6 +12326,21 @@ const textField = {
|
|
11918
12326
|
left: { [vars$G.inputTextAlign]: 'left' },
|
11919
12327
|
center: { [vars$G.inputTextAlign]: 'center' },
|
11920
12328
|
},
|
12329
|
+
|
12330
|
+
labelType: {
|
12331
|
+
floating: {
|
12332
|
+
[vars$G.labelPosition]: refs.labelPosition,
|
12333
|
+
[vars$G.labelTopPosition]: refs.labelTopPosition,
|
12334
|
+
[vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12335
|
+
[vars$G.inputTransformY]: refs.inputTransformY,
|
12336
|
+
[vars$G.inputTransition]: refs.inputTransition,
|
12337
|
+
[vars$G.marginInlineStart]: refs.marginInlineStart,
|
12338
|
+
[vars$G.placeholderOpacity]: refs.placeholderOpacity,
|
12339
|
+
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12340
|
+
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
12341
|
+
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12342
|
+
},
|
12343
|
+
},
|
11921
12344
|
};
|
11922
12345
|
|
11923
12346
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
@@ -11932,9 +12355,12 @@ const vars$F = PasswordClass.cssVarList;
|
|
11932
12355
|
|
11933
12356
|
const password = {
|
11934
12357
|
[vars$F.hostWidth]: refs.width,
|
12358
|
+
[vars$F.hostMinWidth]: refs.minWidth,
|
11935
12359
|
[vars$F.hostDirection]: refs.direction,
|
11936
12360
|
[vars$F.fontSize]: refs.fontSize,
|
11937
12361
|
[vars$F.fontFamily]: refs.fontFamily,
|
12362
|
+
[vars$F.labelFontSize]: refs.labelFontSize,
|
12363
|
+
[vars$F.labelFontWeight]: refs.labelFontWeight,
|
11938
12364
|
[vars$F.labelTextColor]: refs.labelTextColor,
|
11939
12365
|
[vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
|
11940
12366
|
[vars$F.inputHorizontalPadding]: refs.horizontalPadding,
|
@@ -11954,6 +12380,20 @@ const password = {
|
|
11954
12380
|
[vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
|
11955
12381
|
[vars$F.revealButtonSize]: refs.toggleButtonSize,
|
11956
12382
|
[vars$F.revealButtonColor]: refs.placeholderTextColor,
|
12383
|
+
|
12384
|
+
labelType: {
|
12385
|
+
floating: {
|
12386
|
+
[vars$F.labelPosition]: refs.labelPosition,
|
12387
|
+
[vars$F.labelTopPosition]: refs.labelTopPosition,
|
12388
|
+
[vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12389
|
+
[vars$F.inputTransformY]: refs.inputTransformY,
|
12390
|
+
[vars$F.inputTransition]: refs.inputTransition,
|
12391
|
+
[vars$F.marginInlineStart]: refs.marginInlineStart,
|
12392
|
+
[vars$F.placeholderOpacity]: refs.placeholderOpacity,
|
12393
|
+
[vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12394
|
+
[vars$F.valueInputHeight]: refs.valueInputHeight,
|
12395
|
+
},
|
12396
|
+
},
|
11957
12397
|
};
|
11958
12398
|
|
11959
12399
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -11970,6 +12410,8 @@ const numberField = {
|
|
11970
12410
|
[vars$E.hostDirection]: refs.direction,
|
11971
12411
|
[vars$E.fontSize]: refs.fontSize,
|
11972
12412
|
[vars$E.fontFamily]: refs.fontFamily,
|
12413
|
+
[vars$E.labelFontSize]: refs.labelFontSize,
|
12414
|
+
[vars$E.labelFontWeight]: refs.labelFontWeight,
|
11973
12415
|
[vars$E.labelTextColor]: refs.labelTextColor,
|
11974
12416
|
[vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
|
11975
12417
|
[vars$E.inputValueTextColor]: refs.valueTextColor,
|
@@ -11986,6 +12428,21 @@ const numberField = {
|
|
11986
12428
|
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
11987
12429
|
[vars$E.inputHorizontalPadding]: refs.horizontalPadding,
|
11988
12430
|
[vars$E.inputHeight]: refs.inputHeight,
|
12431
|
+
|
12432
|
+
labelType: {
|
12433
|
+
floating: {
|
12434
|
+
[vars$E.labelPosition]: refs.labelPosition,
|
12435
|
+
[vars$E.labelTopPosition]: refs.labelTopPosition,
|
12436
|
+
[vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12437
|
+
[vars$E.inputTransformY]: refs.inputTransformY,
|
12438
|
+
[vars$E.inputTransition]: refs.inputTransition,
|
12439
|
+
[vars$E.marginInlineStart]: refs.marginInlineStart,
|
12440
|
+
[vars$E.placeholderOpacity]: refs.placeholderOpacity,
|
12441
|
+
[vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12442
|
+
[vars$E.valueInputHeight]: refs.valueInputHeight,
|
12443
|
+
[vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12444
|
+
},
|
12445
|
+
},
|
11989
12446
|
};
|
11990
12447
|
|
11991
12448
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -12002,6 +12459,8 @@ const emailField = {
|
|
12002
12459
|
[vars$D.hostDirection]: refs.direction,
|
12003
12460
|
[vars$D.fontSize]: refs.fontSize,
|
12004
12461
|
[vars$D.fontFamily]: refs.fontFamily,
|
12462
|
+
[vars$D.labelFontSize]: refs.labelFontSize,
|
12463
|
+
[vars$D.labelFontWeight]: refs.labelFontWeight,
|
12005
12464
|
[vars$D.labelTextColor]: refs.labelTextColor,
|
12006
12465
|
[vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
|
12007
12466
|
[vars$D.inputValueTextColor]: refs.valueTextColor,
|
@@ -12018,6 +12477,21 @@ const emailField = {
|
|
12018
12477
|
[vars$D.inputBackgroundColor]: refs.backgroundColor,
|
12019
12478
|
[vars$D.inputHorizontalPadding]: refs.horizontalPadding,
|
12020
12479
|
[vars$D.inputHeight]: refs.inputHeight,
|
12480
|
+
|
12481
|
+
labelType: {
|
12482
|
+
floating: {
|
12483
|
+
[vars$D.labelPosition]: refs.labelPosition,
|
12484
|
+
[vars$D.labelTopPosition]: refs.labelTopPosition,
|
12485
|
+
[vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
12486
|
+
[vars$D.inputTransformY]: refs.inputTransformY,
|
12487
|
+
[vars$D.inputTransition]: refs.inputTransition,
|
12488
|
+
[vars$D.marginInlineStart]: refs.marginInlineStart,
|
12489
|
+
[vars$D.placeholderOpacity]: refs.placeholderOpacity,
|
12490
|
+
[vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12491
|
+
[vars$D.valueInputHeight]: refs.valueInputHeight,
|
12492
|
+
[vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12493
|
+
},
|
12494
|
+
},
|
12021
12495
|
};
|
12022
12496
|
|
12023
12497
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
@@ -12744,6 +13218,8 @@ const comboBox = {
|
|
12744
13218
|
[vars$o.hostDirection]: refs.direction,
|
12745
13219
|
[vars$o.fontSize]: refs.fontSize,
|
12746
13220
|
[vars$o.fontFamily]: refs.fontFamily,
|
13221
|
+
[vars$o.labelFontSize]: refs.labelFontSize,
|
13222
|
+
[vars$o.labelFontWeight]: refs.labelFontWeight,
|
12747
13223
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
12748
13224
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
12749
13225
|
[vars$o.inputBorderColor]: refs.borderColor,
|
@@ -12767,6 +13243,21 @@ const comboBox = {
|
|
12767
13243
|
[vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
|
12768
13244
|
[vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
|
12769
13245
|
|
13246
|
+
labelType: {
|
13247
|
+
floating: {
|
13248
|
+
[vars$o.labelPosition]: refs.labelPosition,
|
13249
|
+
[vars$o.labelTopPosition]: refs.labelTopPosition,
|
13250
|
+
[vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13251
|
+
[vars$o.inputTransformY]: refs.inputTransformY,
|
13252
|
+
[vars$o.inputTransition]: refs.inputTransition,
|
13253
|
+
[vars$o.marginInlineStart]: refs.marginInlineStart,
|
13254
|
+
[vars$o.placeholderOpacity]: refs.placeholderOpacity,
|
13255
|
+
[vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
13256
|
+
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
13257
|
+
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
13258
|
+
},
|
13259
|
+
},
|
13260
|
+
|
12770
13261
|
_readonly: {
|
12771
13262
|
[vars$o.inputDropdownButtonCursor]: 'default',
|
12772
13263
|
},
|
@@ -12825,6 +13316,14 @@ const phoneField = {
|
|
12825
13316
|
[vars$m.countryCodeInputWidth]: '5em',
|
12826
13317
|
[vars$m.countryCodeDropdownWidth]: '20em',
|
12827
13318
|
|
13319
|
+
labelType: {
|
13320
|
+
floating: {
|
13321
|
+
[vars$m.marginInlineStart]: '-0.25em',
|
13322
|
+
[vars$m.valueInputHeight]: '1.65em',
|
13323
|
+
[vars$m.valueInputMarginBottom]: '0.25em',
|
13324
|
+
},
|
13325
|
+
},
|
13326
|
+
|
12828
13327
|
// '@overlay': {
|
12829
13328
|
// overlayItemBackgroundColor: 'red'
|
12830
13329
|
// }
|
@@ -12844,6 +13343,8 @@ const phoneInputBoxField = {
|
|
12844
13343
|
[vars$l.hostDirection]: refs.direction,
|
12845
13344
|
[vars$l.fontSize]: refs.fontSize,
|
12846
13345
|
[vars$l.fontFamily]: refs.fontFamily,
|
13346
|
+
[vars$l.labelFontSize]: refs.labelFontSize,
|
13347
|
+
[vars$l.labelFontWeight]: refs.labelFontWeight,
|
12847
13348
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
12848
13349
|
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
12849
13350
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
@@ -12857,6 +13358,21 @@ const phoneInputBoxField = {
|
|
12857
13358
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
12858
13359
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
12859
13360
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
13361
|
+
|
13362
|
+
labelType: {
|
13363
|
+
floating: {
|
13364
|
+
[vars$l.labelPosition]: refs.labelPosition,
|
13365
|
+
[vars$l.labelTopPosition]: refs.labelTopPosition,
|
13366
|
+
[vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13367
|
+
[vars$l.inputTransformY]: refs.inputTransformY,
|
13368
|
+
[vars$l.inputTransition]: refs.inputTransition,
|
13369
|
+
[vars$l.marginInlineStart]: refs.marginInlineStart,
|
13370
|
+
[vars$l.valueInputHeight]: refs.valueInputHeight,
|
13371
|
+
[vars$l.valueInputMarginBottom]: '0.25em',
|
13372
|
+
[vars$l.inputHorizontalPadding]: '0',
|
13373
|
+
},
|
13374
|
+
},
|
13375
|
+
|
12860
13376
|
_fullWidth: {
|
12861
13377
|
[vars$l.hostWidth]: refs.width,
|
12862
13378
|
},
|
@@ -12877,11 +13393,21 @@ const newPassword = {
|
|
12877
13393
|
[vars$k.hostDirection]: refs.direction,
|
12878
13394
|
[vars$k.fontSize]: refs.fontSize,
|
12879
13395
|
[vars$k.fontFamily]: refs.fontFamily,
|
13396
|
+
[vars$k.labelFontSize]: refs.labelFontSize,
|
13397
|
+
[vars$k.labelFontWeight]: refs.labelFontWeight,
|
13398
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
12880
13399
|
[vars$k.spaceBetweenInputs]: '1em',
|
12881
13400
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
12882
13401
|
[vars$k.policyPreviewBackgroundColor]: 'none',
|
12883
13402
|
[vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
|
12884
13403
|
|
13404
|
+
labelType: {
|
13405
|
+
floating: {
|
13406
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
13407
|
+
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
13408
|
+
},
|
13409
|
+
},
|
13410
|
+
|
12885
13411
|
_required: {
|
12886
13412
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
12887
13413
|
// That's why we fake the required indicator on each input.
|
@@ -13156,6 +13682,8 @@ const multiSelectComboBox = {
|
|
13156
13682
|
[vars$c.hostDirection]: refs.direction,
|
13157
13683
|
[vars$c.fontSize]: refs.fontSize,
|
13158
13684
|
[vars$c.fontFamily]: refs.fontFamily,
|
13685
|
+
[vars$c.labelFontSize]: refs.labelFontSize,
|
13686
|
+
[vars$c.labelFontWeight]: refs.labelFontWeight,
|
13159
13687
|
[vars$c.labelTextColor]: refs.labelTextColor,
|
13160
13688
|
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
13161
13689
|
[vars$c.inputBorderColor]: refs.borderColor,
|
@@ -13183,6 +13711,26 @@ const multiSelectComboBox = {
|
|
13183
13711
|
[vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
|
13184
13712
|
[vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
|
13185
13713
|
|
13714
|
+
labelType: {
|
13715
|
+
floating: {
|
13716
|
+
[vars$c.labelPosition]: refs.labelPosition,
|
13717
|
+
[vars$c.labelTopPosition]: refs.labelTopPosition,
|
13718
|
+
[vars$c.labelLeftPosition]: refs.labelLeftPosition,
|
13719
|
+
[vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
13720
|
+
[vars$c.inputTransformY]: refs.inputTransformY,
|
13721
|
+
[vars$c.inputTransition]: refs.inputTransition,
|
13722
|
+
[vars$c.marginInlineStart]: refs.marginInlineStart,
|
13723
|
+
[vars$c.placeholderOpacity]: refs.placeholderOpacity,
|
13724
|
+
[vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
13725
|
+
[vars$c.valueInputHeight]: refs.valueInputHeight,
|
13726
|
+
[vars$c.inputHorizontalPadding]: '0.25em',
|
13727
|
+
|
13728
|
+
_hasValue: {
|
13729
|
+
[vars$c.inputHorizontalPadding]: '0.45em',
|
13730
|
+
},
|
13731
|
+
},
|
13732
|
+
},
|
13733
|
+
|
13186
13734
|
_readonly: {
|
13187
13735
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
13188
13736
|
},
|