@descope/web-components-ui 1.0.241 → 1.0.243

package/dist/index.esm.js

@@ -2556,7 +2556,7 @@ const getSanitizedCharacters = (str) => {
 
 const componentName$q = getComponentName('passcode-internal');
 
-const observedAttributes$5 = ['digits'];
+const observedAttributes$5 = ['digits', 'loading'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
@@ -2572,21 +2572,34 @@ class PasscodeInternal extends BaseInputClass$4 {
 
     this.innerHTML = `
 		<div class="wrapper"></div>
+		<div class="loader-container">
+      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>
+    </div>
 		<style>
 			.wrapper {
 				display: flex;
 				width: 100%;
 				justify-content: space-between;
         direction: ltr;
+        position: relative;
 			}
 
       descope-text-field {
         direction: ltr;
       }
+
+      .loader-container {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
 		</style>
 		`;
 
-    this.wrapperEle = this.querySelector('div');
+    this.wrapperEle = this.querySelector('.wrapper');
+    this.loaderContainer = this.querySelector('.loader-container');
   }
 
   renderInputs() {
@@ -2608,6 +2621,14 @@ class PasscodeInternal extends BaseInputClass$4 {
     this.initInputs();
   }
 
+  handleLoadingState(isLoading) {
+    if (isLoading) {
+      this.setAttribute('inert', 'true');
+    } else {
+      this.removeAttribute('inert');
+    }
+  }
+
   get digits() {
     return Number.parseInt(this.getAttribute('digits'), 10) || 6;
   }
@@ -2753,6 +2774,9 @@ class PasscodeInternal extends BaseInputClass$4 {
         if (attrName === 'digits') {
           this.renderInputs();
         }
+        if (attrName === 'loading') {
+          this.handleLoadingState(newValue === 'true');
+        }
       }
     }
   }
@@ -2847,7 +2871,7 @@ const customMixin$5 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$q);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2878,6 +2902,7 @@ const {
 };
 
 const textVars$2 = TextFieldClass.cssVarList;
+const loaderVars = LoaderRadialClass.cssVarList;
 
 const PasscodeClass = compose(
   createStyleMixin({
@@ -2908,6 +2933,8 @@ const PasscodeClass = compose(
       digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
 
       focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
+      overlayOpacity: { ...internalWrapper$1, property: 'opacity' },
+      spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
     },
   }),
   draggableMixin,
@@ -2932,6 +2959,10 @@ const PasscodeClass = compose(
 				background-color: transparent;
 			}
 
+      :host([loading="true"]) descope-passcode-internal .loader-container {
+        display: block;
+      }
+
 			descope-passcode-internal {
 				-webkit-mask-image: none;
 				padding: 0;
@@ -7653,6 +7684,8 @@ const [theme$1, refs, vars$u] = createHelperVars(
 
     direction: globalRefs$h.direction,
 
+    overlayOpacity: '0.3',
+
     size: {
       xs: { fontSize: '12px', chipFontSize: '10px' },
       sm: { fontSize: '14px', chipFontSize: '12px' },
@@ -8322,9 +8355,20 @@ const passcode = {
   [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
   [vars$g.digitSize]: refs.inputHeight,
 
+  size: {
+    xs: { [vars$g.spinnerSize]: '15px' },
+    sm: { [vars$g.spinnerSize]: '20px' },
+    md: { [vars$g.spinnerSize]: '20px' },
+    lg: { [vars$g.spinnerSize]: '20px' },
+  },
+
   _hideCursor: {
     [vars$g.digitCaretTextColor]: 'transparent',
   },
+
+  _loading: {
+    [vars$g.overlayOpacity]: refs.overlayOpacity,
+  },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({