@descope/web-components-ui 1.0.309 → 1.0.310

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/index.cjs.js +47 -3
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +52 -6
  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-new-password-index-js.js +1 -1
  10. package/dist/umd/descope-number-field-index-js.js +1 -1
  11. package/dist/umd/descope-passcode-index-js.js +1 -1
  12. package/dist/umd/descope-text-field-index-js.js +2 -2
  13. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
  14. package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
  15. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  16. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  17. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
  18. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  19. package/package.json +2 -2
  20. package/src/components/descope-text-field/TextFieldClass.js +25 -0
  21. package/src/components/descope-text-field/textFieldMappings.js +21 -2
  22. package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -2
  23. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +3 -1
  24. package/src/mixins/proxyInputMixin.js +1 -1
package/dist/index.esm.js CHANGED
@@ -959,7 +959,7 @@ const getNestedInput = (ele) => {
959
959
  let nonSlotEle = ele;
960
960
  for (let i = 0; i < nestingLevel; i++) {
961
961
  [nonSlotEle] = nonSlotEle.assignedElements();
962
- if (nonSlotEle.localName !== 'slot') return nonSlotEle;
962
+ if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
963
963
  }
964
964
  return undefined;
965
965
  };
@@ -2451,6 +2451,10 @@ const {
2451
2451
  errorMessage: errorMessage$a,
2452
2452
  disabledPlaceholder,
2453
2453
  inputDisabled,
2454
+ externalInput,
2455
+ externalInputDisabled,
2456
+ externalPlaceholder,
2457
+ externalDisabledPlaceholder,
2454
2458
  } = {
2455
2459
  host: { selector: () => ':host' },
2456
2460
  label: { selector: '::part(label)' },
@@ -2462,6 +2466,10 @@ const {
2462
2466
  inputDisabled: { selector: 'input:disabled' },
2463
2467
  helperText: { selector: '::part(helper-text)' },
2464
2468
  errorMessage: { selector: '::part(error-message)' },
2469
+ externalInput: { selector: () => '::slotted(input)' },
2470
+ externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
2471
+ externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
2472
+ externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
2465
2473
  };
2466
2474
 
2467
2475
  var textFieldMappings = {
@@ -2487,8 +2495,12 @@ var textFieldMappings = {
2487
2495
  inputValueTextColor: [
2488
2496
  { ...inputField$6, property: 'color' },
2489
2497
  { ...inputDisabled, property: '-webkit-text-fill-color' },
2498
+ { ...externalInputDisabled, property: '-webkit-text-fill-color' },
2499
+ ],
2500
+ inputCaretTextColor: [
2501
+ { ...input, property: 'color' },
2502
+ { ...externalInput, property: 'color' },
2490
2503
  ],
2491
- inputCaretTextColor: { ...input, property: 'color' },
2492
2504
 
2493
2505
  labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
2494
2506
 
@@ -2501,6 +2513,8 @@ var textFieldMappings = {
2501
2513
  inputHorizontalPadding: [
2502
2514
  { ...input, property: 'padding-left' },
2503
2515
  { ...input, property: 'padding-right' },
2516
+ { ...externalInput, property: 'padding-left' },
2517
+ { ...externalInput, property: 'padding-right' },
2504
2518
  ],
2505
2519
 
2506
2520
  inputOutlineColor: { ...inputField$6, property: 'outline-color' },
@@ -2508,11 +2522,16 @@ var textFieldMappings = {
2508
2522
  inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
2509
2523
  inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
2510
2524
 
2511
- inputTextAlign: { ...input, property: 'text-align' },
2525
+ inputTextAlign: [
2526
+ { ...input, property: 'text-align' },
2527
+ { ...externalInput, property: 'text-align' },
2528
+ ],
2512
2529
 
2513
2530
  inputPlaceholderColor: [
2514
2531
  { ...placeholder$3, property: 'color' },
2532
+ { ...externalPlaceholder, property: 'color' },
2515
2533
  { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
2534
+ { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
2516
2535
  ],
2517
2536
  };
2518
2537
 
@@ -3008,6 +3027,31 @@ const customMixin$7 = (superclass) =>
3008
3027
  this.baseElement._setType(newVal);
3009
3028
  }
3010
3029
  }
3030
+
3031
+ // webauthn is not working when the native input element is nested inside multiple shadow roots
3032
+ // so we need to be able move the input outside the shadow root for some cases
3033
+ get isExternalInput() {
3034
+ return this.getAttribute('external-input') === 'true';
3035
+ }
3036
+
3037
+ constructor() {
3038
+ super();
3039
+
3040
+ if (this.isExternalInput) {
3041
+ const origInput = this.baseElement.querySelector('input');
3042
+ this.inputSlot = document.createElement('slot');
3043
+
3044
+ this.focus = () => {
3045
+ origInput.focus();
3046
+ };
3047
+
3048
+ this.inputSlot.setAttribute('name', 'input');
3049
+ this.inputSlot.setAttribute('slot', 'input');
3050
+ this.baseElement.appendChild(this.inputSlot);
3051
+
3052
+ this.appendChild(origInput);
3053
+ }
3054
+ }
3011
3055
  };
3012
3056
 
3013
3057
  const TextFieldClass = compose(
@@ -5336,7 +5380,7 @@ const componentName$v = getComponentName('phone-field-internal');
5336
5380
 
5337
5381
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5338
5382
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
5339
- const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
5383
+ const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
5340
5384
  const mapAttrs$1 = {
5341
5385
  'country-input-placeholder': 'placeholder',
5342
5386
  'phone-input-placeholder': 'placeholder',
@@ -5363,7 +5407,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
5363
5407
  ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
5364
5408
  </descope-combo-box>
5365
5409
  <div class="separator"></div>
5366
- <descope-text-field type="tel"></descope-text-field>
5410
+ <descope-text-field type="tel" external-input="true"></descope-text-field>
5367
5411
  </div>
5368
5412
  `;
5369
5413
 
@@ -5758,6 +5802,8 @@ const observedAttributes$2 = [
5758
5802
  'invalid',
5759
5803
  'readonly',
5760
5804
  'phone-input-placeholder',
5805
+ 'name',
5806
+ 'autocomplete',
5761
5807
  ];
5762
5808
  const mapAttrs = {
5763
5809
  'phone-input-placeholder': 'placeholder',
@@ -5775,7 +5821,7 @@ class PhoneFieldInternal extends BaseInputClass$5 {
5775
5821
 
5776
5822
  this.innerHTML = `
5777
5823
  <div>
5778
- <descope-text-field tabindex="1"></descope-text-field>
5824
+ <descope-text-field tabindex="1" external-input="true"></descope-text-field>
5779
5825
  </div>
5780
5826
  `;
5781
5827