@descope/web-components-ui 1.0.241 → 1.0.243

package/dist/cjs/index.cjs.js

@@ -2902,6 +2902,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' },
@@ -4568,7 +4570,53 @@ const componentName$m = getComponentName('passcode-internal');
 
 createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
 
-const componentName$l = getComponentName('passcode');
+const componentName$l = getComponentName('loader-radial');
+
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
+  }
+}
+
+const LoaderRadialClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostDisplay: { property: 'display' },
+      spinnerSize: [{ property: 'width' }, { property: 'height' }],
+      spinnerBorderWidth: { property: 'border-width' },
+      spinnerBorderStyle: { property: 'border-style' },
+      spinnerBorderRadius: { property: 'border-radius' },
+      spinnerQuadrant1Color: { property: 'border-top-color' },
+      spinnerQuadrant2Color: { property: 'border-bottom-color' },
+      spinnerQuadrant3Color: { property: 'border-right-color' },
+      spinnerQuadrant4Color: { property: 'border-left-color' },
+      animationDuration: {},
+      animationTimingFunction: {},
+      animationIterationCount: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLoaderRadial);
+
+const componentName$k = getComponentName('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -4599,7 +4647,7 @@ const customMixin$5 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$m);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -4630,6 +4678,7 @@ const {
 };
 
 const textVars$2 = TextFieldClass.cssVarList;
+const loaderVars = LoaderRadialClass.cssVarList;
 
 const PasscodeClass = compose(
   createStyleMixin({
@@ -4660,6 +4709,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,
@@ -4684,6 +4735,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;
@@ -4737,7 +4792,7 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$k,
   })
 );
 
@@ -4760,9 +4815,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({
@@ -4771,11 +4837,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   vars: vars$g
 });
 
-const componentName$k = getComponentName('loader-linear');
+const componentName$j = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$k;
+    return componentName$j;
   }
 
   constructor() {
@@ -4881,52 +4947,6 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   vars: vars$f
 });
 
-const componentName$j = getComponentName('loader-radial');
-
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
-				0% { transform: rotate(0deg); }
-				100% { transform: rotate(360deg); }
-			}
-			:host {
-				position: relative;
-				display: inline-flex;
-			}
-			:host > div {
-				animation-name: spin;
-			}
-		</style>
-		<div></div>
-	`;
-  }
-}
-
-const LoaderRadialClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostDisplay: { property: 'display' },
-      spinnerSize: [{ property: 'width' }, { property: 'height' }],
-      spinnerBorderWidth: { property: 'border-width' },
-      spinnerBorderStyle: { property: 'border-style' },
-      spinnerBorderRadius: { property: 'border-radius' },
-      spinnerQuadrant1Color: { property: 'border-top-color' },
-      spinnerQuadrant2Color: { property: 'border-bottom-color' },
-      spinnerQuadrant3Color: { property: 'border-right-color' },
-      spinnerQuadrant4Color: { property: 'border-left-color' },
-      animationDuration: {},
-      animationTimingFunction: {},
-      animationIterationCount: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawLoaderRadial);
-
 const globalRefs$8 = getThemeRefs(globals);
 const compVars$1 = LoaderRadialClass.cssVarList;
 
@@ -4942,7 +4962,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$j
+  componentName$l
 );
 
 const loaderRadial = {