@descope/web-components-ui 1.0.333 → 1.0.335

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/dist/cjs/index.cjs.js +86 -509
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +88 -514
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/4392.js +1 -1
  6. package/dist/umd/4978.js +1 -1
  7. package/dist/umd/DescopeDev.js +1 -1
  8. package/dist/umd/descope-email-field-index-js.js +4 -4
  9. package/dist/umd/descope-grid-index-js.js +1 -1
  10. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  11. package/dist/umd/descope-new-password-index-js.js +1 -1
  12. package/dist/umd/descope-number-field-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-password-index-js.js +1 -1
  15. package/dist/umd/descope-radio-group-index-js.js +1 -1
  16. package/dist/umd/descope-text-field-index-js.js +2 -2
  17. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
  18. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  19. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  20. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
  21. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  22. package/package.json +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +3 -103
  24. package/src/components/descope-grid/GridClass.js +1 -0
  25. package/src/components/descope-new-password/NewPasswordClass.js +0 -24
  26. package/src/components/descope-password/PasswordClass.js +1 -126
  27. package/src/components/descope-text-field/TextFieldClass.js +1 -26
  28. package/src/components/descope-text-field/textFieldMappings.js +6 -37
  29. package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -11
  30. package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -5
  31. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
  32. package/src/mixins/proxyInputMixin.js +2 -5
  33. package/src/theme/components/comboBox.js +10 -15
  34. package/src/theme/components/emailField.js +10 -15
  35. package/src/theme/components/grid.js +1 -0
  36. package/src/theme/components/multiSelectComboBox.js +9 -10
  37. package/src/theme/components/newPassword.js +1 -6
  38. package/src/theme/components/numberField.js +10 -15
  39. package/src/theme/components/password.js +9 -14
  40. package/src/theme/components/phoneField.js +3 -8
  41. package/src/theme/components/phoneInputBoxField.js +9 -14
  42. package/src/theme/components/textField.js +10 -15
  43. package/src/helpers/externalInputs.js +0 -76
@@ -2206,7 +2206,7 @@ const proxyInputMixin =
2206
2206
  ({
2207
2207
  proxyProps = [],
2208
2208
  // useProxyTargets flag allows to forwardProps to other targets, other than
2209
- // `this.inputElement`. It's to be used within `external-input` components,
2209
+ // `this.inputElement`.
2210
2210
  // if needed
2211
2211
  useProxyTargets = false,
2212
2212
  // allows us to set the event that should trigger validation
@@ -2335,10 +2335,7 @@ const proxyInputMixin =
2335
2335
 
2336
2336
  // sync properties
2337
2337
  proxyProps.forEach((prop) => {
2338
- const externalInput = this.querySelector('input[slot="external-input"]') || null;
2339
- const proxyTargets = useProxyTargets
2340
- ? [this.baseElement, externalInput].filter(Boolean)
2341
- : [];
2338
+ const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
2342
2339
  forwardProps(this, [this.inputElement, ...proxyTargets], prop);
2343
2340
  });
2344
2341
 
@@ -2951,10 +2948,6 @@ const {
2951
2948
  errorMessage: errorMessage$c,
2952
2949
  disabledPlaceholder,
2953
2950
  inputDisabled,
2954
- externalInput,
2955
- externalInputDisabled,
2956
- externalPlaceholder,
2957
- externalDisabledPlaceholder,
2958
2951
  } = {
2959
2952
  host: { selector: () => ':host' },
2960
2953
  label: { selector: '::part(label)' },
@@ -2969,10 +2962,6 @@ const {
2969
2962
  inputDisabled: { selector: 'input:disabled' },
2970
2963
  helperText: { selector: '::part(helper-text)' },
2971
2964
  errorMessage: { selector: '::part(error-message)' },
2972
- externalInput: { selector: () => '::slotted(input)' },
2973
- externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
2974
- externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
2975
- externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
2976
2965
  };
2977
2966
 
2978
2967
  var textFieldMappings = {
@@ -3002,12 +2991,8 @@ var textFieldMappings = {
3002
2991
  inputValueTextColor: [
3003
2992
  { ...inputField$6, property: 'color' },
3004
2993
  { ...inputDisabled, property: '-webkit-text-fill-color' },
3005
- { ...externalInputDisabled, property: '-webkit-text-fill-color' },
3006
- ],
3007
- inputCaretTextColor: [
3008
- { ...input, property: 'color' },
3009
- { ...externalInput, property: 'color' },
3010
2994
  ],
2995
+ inputCaretTextColor: [{ ...input, property: 'color' }],
3011
2996
 
3012
2997
  labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
3013
2998
 
@@ -3020,8 +3005,6 @@ var textFieldMappings = {
3020
3005
  inputHorizontalPadding: [
3021
3006
  { ...input, property: 'padding-left' },
3022
3007
  { ...input, property: 'padding-right' },
3023
- { ...externalInput, property: 'padding-left' },
3024
- { ...externalInput, property: 'padding-right' },
3025
3008
  ],
3026
3009
 
3027
3010
  inputOutlineColor: { ...inputField$6, property: 'outline-color' },
@@ -3029,17 +3012,12 @@ var textFieldMappings = {
3029
3012
  inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
3030
3013
  inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
3031
3014
 
3032
- inputTextAlign: [
3033
- { ...input, property: 'text-align' },
3034
- { ...externalInput, property: 'text-align' },
3035
- ],
3015
+ inputTextAlign: [{ ...input, property: 'text-align' }],
3036
3016
 
3037
3017
  inputPlaceholderColor: [
3038
3018
  { selector: () => ':host input:placeholder-shown', property: 'color' },
3039
3019
  { ...placeholder$3, property: 'color' },
3040
- { ...externalPlaceholder, property: 'color' },
3041
3020
  { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
3042
- { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
3043
3021
  ],
3044
3022
 
3045
3023
  labelPosition: { ...label$9, property: 'position' },
@@ -3051,22 +3029,10 @@ var textFieldMappings = {
3051
3029
  inputTransformY: { ...label$9, property: 'transform' },
3052
3030
  inputTransition: { ...label$9, property: 'transition' },
3053
3031
  marginInlineStart: { ...label$9, property: 'margin-inline-start' },
3054
- placeholderOpacity: [
3055
- { selector: '> input:placeholder-shown', property: 'opacity' },
3056
- { ...externalPlaceholder, property: 'opacity' },
3057
- ],
3058
- inputVerticalAlignment: [
3059
- { ...inputField$6, property: 'align-items' },
3060
- { ...externalInput, property: 'align-items' },
3061
- ],
3062
- valueInputHeight: [
3063
- { ...input, property: 'height' },
3064
- { ...externalInput, property: 'height' },
3065
- ],
3066
- valueInputMarginBottom: [
3067
- { ...input, property: 'margin-bottom' },
3068
- { ...externalInput, property: 'margin-bottom' },
3069
- ],
3032
+ placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
3033
+ inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
3034
+ valueInputHeight: [{ ...input, property: 'height' }],
3035
+ valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
3070
3036
  };
3071
3037
 
3072
3038
  const useHostExternalPadding = (cssVarList) => `
@@ -3249,31 +3215,6 @@ const customMixin$a = (superclass) =>
3249
3215
  }
3250
3216
  }
3251
3217
  }
3252
-
3253
- // webauthn is not working when the native input element is nested inside multiple shadow roots
3254
- // so we need to be able move the input outside the shadow root for some cases
3255
- get isExternalInput() {
3256
- return this.getAttribute('external-input') === 'true';
3257
- }
3258
-
3259
- constructor() {
3260
- super();
3261
-
3262
- if (this.isExternalInput) {
3263
- const origInput = this.baseElement.querySelector('input');
3264
- this.inputSlot = document.createElement('slot');
3265
-
3266
- this.focus = () => {
3267
- origInput.focus();
3268
- };
3269
-
3270
- this.inputSlot.setAttribute('name', 'input');
3271
- this.inputSlot.setAttribute('slot', 'input');
3272
- this.baseElement.appendChild(this.inputSlot);
3273
-
3274
- this.appendChild(origInput);
3275
- }
3276
- }
3277
3218
  };
3278
3219
 
3279
3220
  const TextFieldClass = compose(
@@ -3281,7 +3222,7 @@ const TextFieldClass = compose(
3281
3222
  mappings: textFieldMappings,
3282
3223
  }),
3283
3224
  draggableMixin,
3284
- composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
3225
+ composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3285
3226
  componentNameValidationMixin,
3286
3227
  customMixin$a
3287
3228
  )(
@@ -3467,21 +3408,16 @@ const textField$1 = {
3467
3408
  left: { [vars$G.inputTextAlign]: 'left' },
3468
3409
  center: { [vars$G.inputTextAlign]: 'center' },
3469
3410
  },
3470
-
3471
- labelType: {
3472
- floating: {
3473
- [vars$G.labelPosition]: refs.labelPosition,
3474
- [vars$G.labelTopPosition]: refs.labelTopPosition,
3475
- [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
3476
- [vars$G.inputTransformY]: refs.inputTransformY,
3477
- [vars$G.inputTransition]: refs.inputTransition,
3478
- [vars$G.marginInlineStart]: refs.marginInlineStart,
3479
- [vars$G.placeholderOpacity]: refs.placeholderOpacity,
3480
- [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
3481
- [vars$G.valueInputHeight]: refs.valueInputHeight,
3482
- [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
3483
- },
3484
- },
3411
+ [vars$G.labelPosition]: refs.labelPosition,
3412
+ [vars$G.labelTopPosition]: refs.labelTopPosition,
3413
+ [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
3414
+ [vars$G.inputTransformY]: refs.inputTransformY,
3415
+ [vars$G.inputTransition]: refs.inputTransition,
3416
+ [vars$G.marginInlineStart]: refs.marginInlineStart,
3417
+ [vars$G.placeholderOpacity]: refs.placeholderOpacity,
3418
+ [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
3419
+ [vars$G.valueInputHeight]: refs.valueInputHeight,
3420
+ [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
3485
3421
  };
3486
3422
 
3487
3423
  var textField$2 = /*#__PURE__*/Object.freeze({
@@ -3530,187 +3466,10 @@ const passwordDraggableMixin = (superclass) =>
3530
3466
  }
3531
3467
  };
3532
3468
 
3533
- // since on load we can only sample the color of the placeholder,
3534
- // we need to temporarily populate the input in order to sample the value color
3535
- const getValueColor = (ele, computedStyle) => {
3536
- // eslint-disable-next-line no-param-reassign
3537
- ele.value = '_';
3538
-
3539
- const valueColor = computedStyle.getPropertyValue('color');
3540
-
3541
- // eslint-disable-next-line no-param-reassign
3542
- ele.value = '';
3543
-
3544
- return valueColor;
3545
- };
3546
-
3547
- const createExternalInputSlot = (slotName, targetSlotName) => {
3548
- const slotEle = document.createElement('slot');
3549
-
3550
- slotEle.setAttribute('name', slotName);
3551
- slotEle.setAttribute('slot', targetSlotName);
3552
-
3553
- return slotEle;
3554
- };
3555
-
3556
- const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
3557
- const inputEle = document.createElement('input');
3558
-
3559
- inputEle.setAttribute('slot', targetSlotName);
3560
- inputEle.setAttribute('type', type);
3561
- inputEle.setAttribute('data-hidden-input', 'true');
3562
- inputEle.setAttribute('autocomplete', autocompleteType);
3563
-
3564
- return inputEle;
3565
- };
3566
-
3567
- // We apply the original input's style to the external-input.
3568
- // Eventually, the user should interact directly with the external input.
3569
- // We keep the original input
3570
- const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
3571
- const computedStyle = getComputedStyle(sourceInputEle);
3572
-
3573
- // Get minimal set of computed theme properties to set on external input
3574
- const height = computedStyle.getPropertyValue('height');
3575
- const paddingLeft = computedStyle.getPropertyValue('padding-left');
3576
- const paddingRight = computedStyle.getPropertyValue('padding-right');
3577
- const fontSize = computedStyle.getPropertyValue('font-size');
3578
- const fontFamily = computedStyle.getPropertyValue('font-family');
3579
- const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
3580
- const caretColor = computedStyle.getPropertyValue('caret-color');
3581
-
3582
- const valueColor = getValueColor(sourceInputEle, computedStyle);
3583
-
3584
- const commonThemeStyles = [
3585
- ['all', 'unset'],
3586
- ['position', 'absolute'],
3587
- ['background-color', 'transparent'],
3588
- ['height', height],
3589
- ['left', paddingLeft],
3590
- ['right', paddingRight],
3591
- ['font-size', fontSize],
3592
- ['font-family', fontFamily],
3593
- ['letter-spacing', letterSpacing],
3594
- ['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
3595
- ['caret-color', caretColor], // this is for seeing caret when focusing on external input
3596
- ['color', valueColor],
3597
- ];
3598
-
3599
- commonThemeStyles.forEach(([key, val]) =>
3600
- targetInputEle.style.setProperty(key, val, 'important')
3601
- );
3602
-
3603
- // Handle floating label theme properties
3604
- if (labelType === 'floating') {
3605
- const marginBottom = computedStyle.getPropertyValue('margin-bottom');
3606
- targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
3607
- }
3608
- };
3609
-
3610
3469
  const componentName$O = getComponentName('password');
3611
3470
 
3612
3471
  const customMixin$9 = (superclass) =>
3613
3472
  class PasswordFieldMixinClass extends superclass {
3614
- init() {
3615
- super.init?.();
3616
-
3617
- // reset vaadin's checkValidity
3618
- this.baseElement.checkValidity = () => {};
3619
- // set safety attribute `external-input`
3620
- this.setAttribute('external-input', 'true');
3621
-
3622
- // use original input element as reference
3623
- const origInput = this.baseElement.querySelector('input');
3624
-
3625
- // to avoid focus loop between external-input and origInput
3626
- // we set origInput's tabindex to -1
3627
- // otherwise, shift-tab will never leave the component focus
3628
- origInput.setAttribute('tabindex', '-1');
3629
-
3630
- // create external slot
3631
- const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
3632
- // append external slot to base element
3633
- this.baseElement.appendChild(externalInputSlot);
3634
-
3635
- // create external input
3636
- const externalInput = createExternalInputEle(
3637
- 'external-input',
3638
- 'password',
3639
- this.getAutocompleteType()
3640
- );
3641
-
3642
- this.handlePasswordVisibility(externalInput);
3643
-
3644
- // apply original input's styles to external input
3645
- setTimeout(() => {
3646
- applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
3647
- });
3648
-
3649
- // set external input events
3650
- this.handleExternalInputEvents(externalInput);
3651
-
3652
- // sync input stateful attributes: `type` (for visibility state change) and `readonly`
3653
- syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
3654
- syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
3655
-
3656
- origInput.addEventListener('focus', (e) => {
3657
- e.preventDefault();
3658
- if (e.isTrusted) {
3659
- externalInput.focus();
3660
- }
3661
- });
3662
-
3663
- externalInput.addEventListener('input', (e) => {
3664
- if (!e.target.value) {
3665
- this.removeAttribute('has-value');
3666
- } else {
3667
- this.setAttribute('has-value', 'true');
3668
- }
3669
- });
3670
-
3671
- // append external input to component's DOM
3672
- this.appendChild(externalInput);
3673
- }
3674
-
3675
- // override vaadin's password visibility toggle.
3676
- // we need this override in order to to resolve the external input `focus` race condition,
3677
- // which is caused due to the focus sync between the two inputs.
3678
- handlePasswordVisibility(externalInput) {
3679
- // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
3680
- const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
3681
- this.baseElement
3682
- .querySelector('vaadin-password-field-button')
3683
- .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
3684
-
3685
- // disable vaadin's `_passwordVisibleChanged` observer
3686
- this.baseElement._passwordVisibleChanged = () => {};
3687
-
3688
- // override vaadin's `_togglePasswordVisibility`
3689
- this.baseElement._togglePasswordVisibility = () => {
3690
- const currVisibility = externalInput.getAttribute('type');
3691
- if (currVisibility === 'password') {
3692
- this.showPasswordVisibility(externalInput);
3693
- } else {
3694
- this.hidePasswordVisibility(externalInput);
3695
- }
3696
- };
3697
-
3698
- // on component blur, if password is revealed - hide it
3699
- // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
3700
- // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
3701
- // and then focusing in the input again
3702
- this.addEventListener('blur', () => {
3703
- setTimeout(() => {
3704
- const isHiddenAndFocused =
3705
- externalInput.getAttribute('type') !== 'password' &&
3706
- externalInput.getAttribute('focused') !== 'true';
3707
- if (isHiddenAndFocused) {
3708
- this.hidePasswordVisibility(externalInput);
3709
- }
3710
- });
3711
- });
3712
- }
3713
-
3714
3473
  hidePasswordVisibility(input) {
3715
3474
  // handle input element's type
3716
3475
  input.setAttribute('type', 'password');
@@ -3728,22 +3487,6 @@ const customMixin$9 = (superclass) =>
3728
3487
  getAutocompleteType() {
3729
3488
  return this.getAttribute('autocomplete') || 'current-password';
3730
3489
  }
3731
-
3732
- handleExternalInputEvents(inputEle) {
3733
- // sync value of insible input back to original input
3734
- inputEle.addEventListener('input', (e) => {
3735
- this.value = e.target.value;
3736
- });
3737
-
3738
- // sync `focused` attribute on host when focusing on external input
3739
- inputEle.addEventListener('focus', () => {
3740
- this.setAttribute('focused', 'true');
3741
- });
3742
-
3743
- inputEle.addEventListener('blur', () => {
3744
- this.removeAttribute('focused');
3745
- });
3746
- }
3747
3490
  };
3748
3491
 
3749
3492
  const {
@@ -3902,10 +3645,6 @@ const PasswordClass = compose(
3902
3645
  ::part(reveal-button) {
3903
3646
  align-self: center;
3904
3647
  }
3905
-
3906
- vaadin-password-field > input:not(:placeholder-shown) {
3907
- opacity: 0;
3908
- }
3909
3648
  `,
3910
3649
  excludeAttrsSync: ['tabindex'],
3911
3650
  componentName: componentName$O,
@@ -3942,20 +3681,15 @@ const password = {
3942
3681
  [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
3943
3682
  [vars$F.revealButtonSize]: refs.toggleButtonSize,
3944
3683
  [vars$F.revealButtonColor]: refs.placeholderTextColor,
3945
-
3946
- labelType: {
3947
- floating: {
3948
- [vars$F.labelPosition]: refs.labelPosition,
3949
- [vars$F.labelTopPosition]: refs.labelTopPosition,
3950
- [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
3951
- [vars$F.inputTransformY]: refs.inputTransformY,
3952
- [vars$F.inputTransition]: refs.inputTransition,
3953
- [vars$F.marginInlineStart]: refs.marginInlineStart,
3954
- [vars$F.placeholderOpacity]: refs.placeholderOpacity,
3955
- [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
3956
- [vars$F.valueInputHeight]: refs.valueInputHeight,
3957
- },
3958
- },
3684
+ [vars$F.labelPosition]: refs.labelPosition,
3685
+ [vars$F.labelTopPosition]: refs.labelTopPosition,
3686
+ [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
3687
+ [vars$F.inputTransformY]: refs.inputTransformY,
3688
+ [vars$F.inputTransition]: refs.inputTransition,
3689
+ [vars$F.marginInlineStart]: refs.marginInlineStart,
3690
+ [vars$F.placeholderOpacity]: refs.placeholderOpacity,
3691
+ [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
3692
+ [vars$F.valueInputHeight]: refs.valueInputHeight,
3959
3693
  };
3960
3694
 
3961
3695
  var password$1 = /*#__PURE__*/Object.freeze({
@@ -4028,21 +3762,16 @@ const numberField = {
4028
3762
  [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
4029
3763
  [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
4030
3764
  [vars$E.inputHeight]: refs.inputHeight,
4031
-
4032
- labelType: {
4033
- floating: {
4034
- [vars$E.labelPosition]: refs.labelPosition,
4035
- [vars$E.labelTopPosition]: refs.labelTopPosition,
4036
- [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
4037
- [vars$E.inputTransformY]: refs.inputTransformY,
4038
- [vars$E.inputTransition]: refs.inputTransition,
4039
- [vars$E.marginInlineStart]: refs.marginInlineStart,
4040
- [vars$E.placeholderOpacity]: refs.placeholderOpacity,
4041
- [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
4042
- [vars$E.valueInputHeight]: refs.valueInputHeight,
4043
- [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
4044
- },
4045
- },
3765
+ [vars$E.labelPosition]: refs.labelPosition,
3766
+ [vars$E.labelTopPosition]: refs.labelTopPosition,
3767
+ [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
3768
+ [vars$E.inputTransformY]: refs.inputTransformY,
3769
+ [vars$E.inputTransition]: refs.inputTransition,
3770
+ [vars$E.marginInlineStart]: refs.marginInlineStart,
3771
+ [vars$E.placeholderOpacity]: refs.placeholderOpacity,
3772
+ [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
3773
+ [vars$E.valueInputHeight]: refs.valueInputHeight,
3774
+ [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
4046
3775
  };
4047
3776
 
4048
3777
  var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -4060,103 +3789,12 @@ const customMixin$8 = (superclass) =>
4060
3789
 
4061
3790
  this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
4062
3791
 
4063
- if (!this.isNoExternalInput) {
4064
- this.externalInput = this.handleExternalInput();
4065
-
4066
- this.addEventListener('focus', () => {
4067
- this.externalInput.focus();
4068
- });
4069
- } else {
4070
- this.setAttribute('autocomplete', this.getAutocompleteType());
4071
- }
4072
- }
4073
-
4074
- get isNoExternalInput() {
4075
- return this.getAttribute('no-external-input') === 'true';
4076
- }
4077
-
4078
- forwardInputValue(source, target) {
4079
- // set internal sync events
4080
- const valueDescriptor = Object.getOwnPropertyDescriptor(
4081
- this.inputElement.constructor.prototype,
4082
- 'value'
4083
- );
4084
-
4085
- Object.defineProperty(source, 'value', {
4086
- ...valueDescriptor,
4087
-
4088
- set(v) {
4089
- valueDescriptor.set.call(this, v);
4090
- // eslint-disable-next-line no-param-reassign
4091
- target.value = v;
4092
- },
4093
- configurable: true,
4094
- });
4095
- }
4096
-
4097
- handleExternalInput() {
4098
- // set safety attribute `external-input`
4099
- this.setAttribute('external-input', 'true');
4100
-
4101
- // use original input element as reference
4102
- const origInput = this.baseElement.querySelector('input');
4103
-
4104
- // to avoid focus loop between external-input and origInput
4105
- // we set origInput's tabindex to -1
4106
- // otherwise, shift-tab will never leave the component focus
4107
- origInput.setAttribute('tabindex', '-1');
4108
-
4109
- // create external slot
4110
- const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
4111
- // append external slot to base element
4112
- this.baseElement.appendChild(externalInputSlot);
4113
-
4114
- const externalInput = createExternalInputEle(
4115
- 'external-input',
4116
- 'text',
4117
- this.getAutocompleteType()
4118
- );
4119
-
4120
- // apply original input's styles to external input
4121
- setTimeout(() => {
4122
- applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
4123
- });
4124
-
4125
- // set external input events
4126
- this.handleExternalInputEvents(externalInput);
4127
-
4128
- // 1Password catches the internal input, so we forward the value to the external input
4129
- this.forwardInputValue(origInput, externalInput);
4130
-
4131
- syncAttrs(origInput, externalInput, {
4132
- includeAttrs: ['disabled', 'readonly', 'pattern'],
4133
- });
4134
-
4135
- // append external input to component's DOM
4136
- this.appendChild(externalInput);
4137
-
4138
- return externalInput;
3792
+ this.setAttribute('autocomplete', this.getAutocompleteType());
4139
3793
  }
4140
3794
 
4141
3795
  getAutocompleteType() {
4142
3796
  return this.getAttribute('autocomplete') || 'username';
4143
3797
  }
4144
-
4145
- handleExternalInputEvents(externalInput) {
4146
- // sync value of insible input back to original input
4147
- externalInput.addEventListener('input', (e) => {
4148
- this.value = e.target.value;
4149
- });
4150
-
4151
- // sync `focused` attribute on host when focusing on external input
4152
- externalInput.addEventListener('focus', () => {
4153
- this.setAttribute('focused', 'true');
4154
- });
4155
-
4156
- externalInput.addEventListener('blur', () => {
4157
- this.removeAttribute('focused');
4158
- });
4159
- }
4160
3798
  };
4161
3799
 
4162
3800
  const EmailFieldClass = compose(
@@ -4164,7 +3802,7 @@ const EmailFieldClass = compose(
4164
3802
  mappings: textFieldMappings,
4165
3803
  }),
4166
3804
  draggableMixin,
4167
- composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
3805
+ composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
4168
3806
  componentNameValidationMixin,
4169
3807
  customMixin$8
4170
3808
  )(
@@ -4192,10 +3830,6 @@ const EmailFieldClass = compose(
4192
3830
  opacity: 0;
4193
3831
  }
4194
3832
 
4195
- vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
4196
- opacity: 0;
4197
- }
4198
-
4199
3833
  :host ::slotted(*) {
4200
3834
  -webkit-mask-image: none;
4201
3835
  }
@@ -4231,21 +3865,16 @@ const emailField = {
4231
3865
  [vars$D.inputBackgroundColor]: refs.backgroundColor,
4232
3866
  [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
4233
3867
  [vars$D.inputHeight]: refs.inputHeight,
4234
-
4235
- labelType: {
4236
- floating: {
4237
- [vars$D.labelPosition]: refs.labelPosition,
4238
- [vars$D.labelTopPosition]: refs.labelTopPosition,
4239
- [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
4240
- [vars$D.inputTransformY]: refs.inputTransformY,
4241
- [vars$D.inputTransition]: refs.inputTransition,
4242
- [vars$D.marginInlineStart]: refs.marginInlineStart,
4243
- [vars$D.placeholderOpacity]: refs.placeholderOpacity,
4244
- [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
4245
- [vars$D.valueInputHeight]: refs.valueInputHeight,
4246
- [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
4247
- },
4248
- },
3868
+ [vars$D.labelPosition]: refs.labelPosition,
3869
+ [vars$D.labelTopPosition]: refs.labelTopPosition,
3870
+ [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
3871
+ [vars$D.inputTransformY]: refs.inputTransformY,
3872
+ [vars$D.inputTransition]: refs.inputTransition,
3873
+ [vars$D.marginInlineStart]: refs.marginInlineStart,
3874
+ [vars$D.placeholderOpacity]: refs.placeholderOpacity,
3875
+ [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
3876
+ [vars$D.valueInputHeight]: refs.valueInputHeight,
3877
+ [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
4249
3878
  };
4250
3879
 
4251
3880
  var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -6692,21 +6321,16 @@ const comboBox = {
6692
6321
  [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
6693
6322
  [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
6694
6323
  [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
6695
-
6696
- labelType: {
6697
- floating: {
6698
- [vars$o.labelPosition]: refs.labelPosition,
6699
- [vars$o.labelTopPosition]: refs.labelTopPosition,
6700
- [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
6701
- [vars$o.inputTransformY]: refs.inputTransformY,
6702
- [vars$o.inputTransition]: refs.inputTransition,
6703
- [vars$o.marginInlineStart]: refs.marginInlineStart,
6704
- [vars$o.placeholderOpacity]: refs.placeholderOpacity,
6705
- [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
6706
- [vars$o.valueInputHeight]: refs.valueInputHeight,
6707
- [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
6708
- },
6709
- },
6324
+ [vars$o.labelPosition]: refs.labelPosition,
6325
+ [vars$o.labelTopPosition]: refs.labelTopPosition,
6326
+ [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
6327
+ [vars$o.inputTransformY]: refs.inputTransformY,
6328
+ [vars$o.inputTransition]: refs.inputTransition,
6329
+ [vars$o.marginInlineStart]: refs.marginInlineStart,
6330
+ [vars$o.placeholderOpacity]: refs.placeholderOpacity,
6331
+ [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
6332
+ [vars$o.valueInputHeight]: refs.valueInputHeight,
6333
+ [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
6710
6334
 
6711
6335
  _readonly: {
6712
6336
  [vars$o.inputDropdownButtonCursor]: 'default',
@@ -8061,7 +7685,6 @@ const {
8061
7685
  inputField: inputField$2,
8062
7686
  countryCodeInput,
8063
7687
  phoneInput: phoneInput$1,
8064
- phoneExternalInput,
8065
7688
  separator: separator$1,
8066
7689
  errorMessage: errorMessage$5,
8067
7690
  helperText: helperText$4,
@@ -8071,7 +7694,6 @@ const {
8071
7694
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
8072
7695
  inputField: { selector: '::part(input-field)' },
8073
7696
  phoneInput: { selector: () => 'descope-text-field' },
8074
- phoneExternalInput: { selector: () => '::slotted(input)' },
8075
7697
  countryCodeInput: { selector: () => 'descope-combo-box' },
8076
7698
  separator: { selector: 'descope-phone-field-internal .separator' },
8077
7699
  helperText: { selector: '::part(helper-text)' },
@@ -8161,17 +7783,10 @@ const PhoneFieldClass = compose(
8161
7783
  inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
8162
7784
  inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
8163
7785
 
8164
- valueInputHeight: [
8165
- { ...phoneExternalInput, property: textVars$1.valueInputHeight },
8166
- { ...countryCodeInput, property: comboVars.valueInputHeight },
8167
- ],
8168
- valueInputMarginBottom: [
8169
- { ...phoneInput$1, property: textVars$1.valueInputMarginBottom },
8170
- { ...phoneExternalInput, property: 'margin-bottom' },
8171
- ],
7786
+ valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
7787
+ valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom }],
8172
7788
  marginInlineStart: [
8173
7789
  { ...phoneInput$1, property: textVars$1.marginInlineStart },
8174
- { ...phoneExternalInput, property: 'margin-inline-start' },
8175
7790
  { ...countryCodeInput, property: comboVars.marginInlineStart },
8176
7791
  ],
8177
7792
  },
@@ -8289,14 +7904,9 @@ const phoneField = {
8289
7904
  [vars$m.phoneInputWidth]: refs.minWidth,
8290
7905
  [vars$m.countryCodeInputWidth]: '5em',
8291
7906
  [vars$m.countryCodeDropdownWidth]: '20em',
8292
-
8293
- labelType: {
8294
- floating: {
8295
- [vars$m.marginInlineStart]: '-0.25em',
8296
- [vars$m.valueInputHeight]: '1.65em',
8297
- [vars$m.valueInputMarginBottom]: '0.25em',
8298
- },
8299
- },
7907
+ [vars$m.marginInlineStart]: '-0.25em',
7908
+ [vars$m.valueInputHeight]: refs.valueInputHeight,
7909
+ [vars$m.valueInputMarginBottom]: refs.valueInputMarginBottom,
8300
7910
 
8301
7911
  // '@overlay': {
8302
7912
  // overlayItemBackgroundColor: 'red'
@@ -8541,20 +8151,15 @@ const phoneInputBoxField = {
8541
8151
  [vars$l.inputOutlineWidth]: refs.outlineWidth,
8542
8152
  [vars$l.inputOutlineColor]: refs.outlineColor,
8543
8153
  [vars$l.inputOutlineOffset]: refs.outlineOffset,
8544
-
8545
- labelType: {
8546
- floating: {
8547
- [vars$l.labelPosition]: refs.labelPosition,
8548
- [vars$l.labelTopPosition]: refs.labelTopPosition,
8549
- [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
8550
- [vars$l.inputTransformY]: refs.inputTransformY,
8551
- [vars$l.inputTransition]: refs.inputTransition,
8552
- [vars$l.marginInlineStart]: refs.marginInlineStart,
8553
- [vars$l.valueInputHeight]: refs.valueInputHeight,
8554
- [vars$l.valueInputMarginBottom]: '0.25em',
8555
- [vars$l.inputHorizontalPadding]: '0',
8556
- },
8557
- },
8154
+ [vars$l.labelPosition]: refs.labelPosition,
8155
+ [vars$l.labelTopPosition]: refs.labelTopPosition,
8156
+ [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
8157
+ [vars$l.inputTransformY]: refs.inputTransformY,
8158
+ [vars$l.inputTransition]: refs.inputTransition,
8159
+ [vars$l.marginInlineStart]: refs.marginInlineStart,
8160
+ [vars$l.valueInputHeight]: refs.valueInputHeight,
8161
+ [vars$l.valueInputMarginBottom]: refs.valueInputMarginBottom,
8162
+ [vars$l.inputHorizontalPadding]: '0',
8558
8163
 
8559
8164
  _fullWidth: {
8560
8165
  [vars$l.hostWidth]: refs.width,
@@ -8808,20 +8413,10 @@ const customMixin$4 = (superclass) =>
8808
8413
  </${componentName$p}>
8809
8414
  `;
8810
8415
 
8811
- this.setAttribute('external-input', 'true');
8812
-
8813
8416
  this.baseElement.appendChild(template.content.cloneNode(true));
8814
8417
 
8815
8418
  this.inputElement = this.shadowRoot.querySelector(componentName$p);
8816
8419
 
8817
- // get descope input components
8818
- this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
8819
- this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
8820
-
8821
- // create slots for external password input
8822
- this.createExternalInput(this.passwordInput, 'external-password-input');
8823
- this.createExternalInput(this.confirmInput, 'external-confirm-input');
8824
-
8825
8420
  forwardAttrs(this, this.inputElement, {
8826
8421
  includeAttrs: [
8827
8422
  'password-label',
@@ -8845,20 +8440,6 @@ const customMixin$4 = (superclass) =>
8845
8440
  ],
8846
8441
  });
8847
8442
  }
8848
-
8849
- createExternalInput(node, slotName) {
8850
- const externalInput = node.querySelector('input');
8851
- const slotEle = document.createElement('slot');
8852
- const targetSlot = externalInput.getAttribute('slot');
8853
- slotEle.setAttribute('name', slotName);
8854
- slotEle.setAttribute('slot', targetSlot);
8855
- node.appendChild(slotEle);
8856
-
8857
- // move external input
8858
- externalInput.setAttribute('slot', slotName);
8859
- externalInput.setAttribute('data-hidden-input', 'true');
8860
- this.appendChild(externalInput);
8861
- }
8862
8443
  };
8863
8444
 
8864
8445
  const {
@@ -8997,12 +8578,7 @@ const newPassword = {
8997
8578
  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
8998
8579
  [vars$k.policyPreviewBackgroundColor]: 'none',
8999
8580
  [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
9000
-
9001
- labelType: {
9002
- floating: {
9003
- [vars$k.valueInputHeight]: refs.valueInputHeight,
9004
- },
9005
- },
8581
+ [vars$k.valueInputHeight]: refs.valueInputHeight,
9006
8582
 
9007
8583
  _required: {
9008
8584
  // NewPassword doesn't pass `required` attribute to its Password components.
@@ -10389,6 +9965,7 @@ const GridClass = compose(
10389
9965
  { ...rowSeparator, property: 'border-top-color' },
10390
9966
  ],
10391
9967
  resizeHandleColor: { ...resizeHandle, property: 'background-color' },
9968
+ hostDirection: { ...host$6, property: 'direction', fallback: 'ltr' },
10392
9969
  },
10393
9970
  }),
10394
9971
  draggableMixin,
@@ -10445,6 +10022,7 @@ const grid = {
10445
10022
 
10446
10023
  [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
10447
10024
  [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
10025
+ [vars$e.hostDirection]: globalRefs$b.direction,
10448
10026
 
10449
10027
  _bordered: {
10450
10028
  [vars$e.borderColor]: refs.borderColor,
@@ -11299,20 +10877,19 @@ const multiSelectComboBox = {
11299
10877
  [vars$c.chipFontSize]: refs.chipFontSize,
11300
10878
  [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
11301
10879
  [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
10880
+ [vars$c.labelPosition]: refs.labelPosition,
10881
+ [vars$c.labelTopPosition]: refs.labelTopPosition,
10882
+ [vars$c.labelLeftPosition]: refs.labelLeftPosition,
10883
+ [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
10884
+ [vars$c.inputTransformY]: refs.inputTransformY,
10885
+ [vars$c.inputTransition]: refs.inputTransition,
10886
+ [vars$c.marginInlineStart]: refs.marginInlineStart,
10887
+ [vars$c.placeholderOpacity]: refs.placeholderOpacity,
10888
+ [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
11302
10889
 
11303
10890
  labelType: {
11304
10891
  floating: {
11305
- [vars$c.labelPosition]: refs.labelPosition,
11306
- [vars$c.labelTopPosition]: refs.labelTopPosition,
11307
- [vars$c.labelLeftPosition]: refs.labelLeftPosition,
11308
- [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
11309
- [vars$c.inputTransformY]: refs.inputTransformY,
11310
- [vars$c.inputTransition]: refs.inputTransition,
11311
- [vars$c.marginInlineStart]: refs.marginInlineStart,
11312
- [vars$c.placeholderOpacity]: refs.placeholderOpacity,
11313
- [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
11314
10892
  [vars$c.inputHorizontalPadding]: '0.25em',
11315
-
11316
10893
  _hasValue: {
11317
10894
  [vars$c.inputHorizontalPadding]: '0.45em',
11318
10895
  },