@descope/web-components-ui 1.0.308 → 1.0.310

package/src/components/descope-text-field/TextFieldClass.js

@@ -36,6 +36,31 @@ const customMixin = (superclass) =>
         this.baseElement._setType(newVal);
       }
     }
+
+    // webauthn is not working when the native input element is nested inside multiple shadow roots
+    // so we need to be able move the input outside the shadow root for some cases
+    get isExternalInput() {
+      return this.getAttribute('external-input') === 'true';
+    }
+
+    constructor() {
+      super();
+
+      if (this.isExternalInput) {
+        const origInput = this.baseElement.querySelector('input');
+        this.inputSlot = document.createElement('slot');
+
+        this.focus = () => {
+          origInput.focus();
+        };
+
+        this.inputSlot.setAttribute('name', 'input');
+        this.inputSlot.setAttribute('slot', 'input');
+        this.baseElement.appendChild(this.inputSlot);
+
+        this.appendChild(origInput);
+      }
+    }
   };
 
 export const TextFieldClass = compose(

package/src/components/descope-text-field/textFieldMappings.js

@@ -9,6 +9,10 @@ const {
   errorMessage,
   disabledPlaceholder,
   inputDisabled,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -20,6 +24,10 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 export default {
@@ -45,8 +53,12 @@ export default {
   inputValueTextColor: [
     { ...inputField, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'color' },
+    { ...externalInput, property: 'color' },
   ],
-  inputCaretTextColor: { ...input, property: 'color' },
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -59,6 +71,8 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -66,10 +80,15 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: { ...input, property: 'text-align' },
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
 
   inputPlaceholderColor: [
     { ...placeholder, property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 };

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -7,7 +7,7 @@ export const componentName = getComponentName('phone-field-internal');
 
 const commonAttrs = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
-const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
 const mapAttrs = {
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
@@ -34,7 +34,7 @@ class PhoneFieldInternal extends BaseInputClass {
       ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
       </descope-combo-box>
       <div class="separator"></div>
-      <descope-text-field type="tel"></descope-text-field>
+      <descope-text-field type="tel" external-input="true"></descope-text-field>
     </div>
     `;
 

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -11,6 +11,8 @@ const observedAttributes = [
   'invalid',
   'readonly',
   'phone-input-placeholder',
+  'name',
+  'autocomplete',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -28,7 +30,7 @@ class PhoneFieldInternal extends BaseInputClass {
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1"></descope-text-field>
+        <descope-text-field tabindex="1" external-input="true"></descope-text-field>
       </div>
       `;
 

package/src/mixins/componentsContextMixin.js

@@ -1,9 +1,5 @@
-import { createDispatchEvent } from '../helpers/mixinsHelpers';
-
 export const componentsContextMixin = (superclass) =>
   class ComponentsContextMixinClass extends superclass {
-    #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
-
     updateComponentsContext(componentsContext) {
       this.dispatchEvent(
         new CustomEvent('components-context', {

package/src/mixins/proxyInputMixin.js

@@ -29,7 +29,7 @@ const getNestedInput = (ele) => {
   let nonSlotEle = ele;
   for (let i = 0; i < nestingLevel; i++) {
     [nonSlotEle] = nonSlotEle.assignedElements();
-    if (nonSlotEle.localName !== 'slot') return nonSlotEle;
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
   }
   return undefined;
 };