@descope/web-components-ui 1.0.242 → 1.0.244

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;
@@ -6699,8 +6730,6 @@ const ButtonSelectionGroupClass = compose(
 
 customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
 
-customElements.define(componentName$a, ButtonSelectionGroupClass);
-
 const componentName$9 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
@@ -6804,6 +6833,8 @@ const ButtonSelectionGroupItemClass = compose(
 
 customElements.define(componentName$9, ButtonSelectionGroupItemClass);
 
+customElements.define(componentName$a, ButtonSelectionGroupClass);
+
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
     return this.getAttribute('sortable') === 'true';
@@ -6836,7 +6867,7 @@ class GridCustomColumnClass extends GridTextColumnClass {
     // we are going over the elements, and when finding an element which is pattern matches the data,
     // we are cloning this element, and injecting the data as its child
     const contentEle = Array.from(this.children).find((child) => {
-      const pattern = child.getAttribute('pattern');
+      const pattern = child.getAttribute('data-pattern');
       if (!pattern) return true;
 
       const regEx = new RegExp(pattern);
@@ -6871,7 +6902,8 @@ const createCheckboxEle = () => {
   return checkbox;
 };
 
-const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
+const getIsAllItemsSelected = (grid) =>
+  !!grid.items?.length && grid.selectedItems.length === grid.items.length;
 
 class GridSelectionColumnClass extends GridSelectionColumn {
   // eslint-disable-next-line class-methods-use-this
@@ -7170,6 +7202,58 @@ const GridClass = compose(
 
 customElements.define(componentName$5, GridClass);
 
+const componentName$4 = getComponentName('badge');
+
+class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
+
+const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+      textTransform: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);
+
+customElements.define(componentName$4, BadgeClass);
+
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
 const transformTheme = (theme, path, getTransformation) => {
@@ -7621,7 +7705,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const componentName$4 = getComponentName('input-wrapper');
+const componentName$3 = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
 const [theme$1, refs, vars$u] = createHelperVars(
@@ -7653,6 +7737,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' },
@@ -7688,7 +7774,7 @@ const [theme$1, refs, vars$u] = createHelperVars(
       backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$4
+  componentName$3
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -8322,9 +8408,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({
@@ -8703,7 +8800,7 @@ var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$3 = getComponentName('modal');
+const componentName$2 = getComponentName('modal');
 
 const customMixin = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -8802,7 +8899,7 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$3,
+    componentName: componentName$2,
   })
 );
 
@@ -8865,7 +8962,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$4
 });
 
-const componentName$2 = getComponentName('notification-card');
+const componentName$1 = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -8973,7 +9070,7 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
+    componentName: componentName$1,
   })
 );
 
@@ -9031,7 +9128,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
   vars: vars$3
 });
 
-const componentName$1 = getComponentName('multi-select-combo-box');
+const componentName = getComponentName('multi-select-combo-box');
 
 const MultiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -9519,7 +9616,7 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$1,
+    componentName,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
@@ -9581,56 +9678,6 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const componentName = getComponentName('badge');
-
-class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-      :host {
-        display: inline-flex;
-      }
-      :host > div {
-        width: 100%;
-      }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
-  }
-}
-
-const BadgeClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: [{ selector: () => ':host', property: 'width' }],
-      hostDirection: { property: 'direction' },
-
-      fontFamily: {},
-      fontSize: {},
-      fontWeight: {},
-      textTransform: {},
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
-
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-      borderRadius: {},
-
-      backgroundColor: {},
-
-      textColor: { property: 'color' },
-      textAlign: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawBadge);
-
 const globalRefs = getThemeRefs(globals);
 const vars$1 = BadgeClass.cssVarList;
 
@@ -9748,5 +9795,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$w, components: vars };
 
-export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map