@descope/web-components-ui 1.0.162 → 1.0.164

package/dist/index.esm.js

@@ -919,7 +919,7 @@ const proxyInputMixin = (superclass) =>
     }
 
     get inputElement() {
-      if (this.#inputElement) return this.#inputElement
+      if (this.#inputElement) return this.#inputElement;
 
       this.warnIfInputElementIsMissing();
 
@@ -956,7 +956,7 @@ const proxyInputMixin = (superclass) =>
       // on some cases the base element is not ready so the inputElement is empty
       // we are deferring this section to make sure the base element is ready
       setTimeout(() => {
-        this.inputElement.addEventListener('input', (e) => {
+        this.inputElement?.addEventListener('input', (e) => {
           if (!this.inputElement.checkValidity()) {
             this.inputElement.setCustomValidity('');
             // after updating the input validity we want to trigger set validity on the wrapping element
@@ -1000,7 +1000,6 @@ const proxyInputMixin = (superclass) =>
         forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
       });
     }
-
   };
 
 const composedProxyInputMixin = compose(
@@ -2234,13 +2233,13 @@ const selectors = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$7, wrapper } = selectors;
+const { anchor, text: text$2, host: host$7, wrapper: wrapper$1 } = selectors;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$7, property: 'width' },
-      textAlign: wrapper,
+      textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
         { ...text$2, property: TextClass.cssVarList.textColor },
@@ -2538,7 +2537,14 @@ class PasscodeInternal extends BaseInputClass$3 {
       input.onkeydown = ({ key }) => {
         // when user deletes a digit, we want to focus the previous digit
         if (key === 'Backspace') {
-          input.setSelectionRange(1, 1);
+          // if value is empty then the input element does not fire `input` event
+          // if this is the case, we focus the element here.
+          // otherwise, the focusElement occurs as part of the `input` event listener
+          if (!input.value) {
+            setTimeout(() => focusElement(this.getPrevInput(input)), 0);
+          } else {
+            input.setSelectionRange(1, 1);
+          }
         } else if (key.length === 1) {
           // we want only characters and not command keys
           input.value = ''; // we are clearing the previous value so we can override it with the new value
@@ -5413,13 +5419,15 @@ const observedAttributes = [
   'description',
   'button-label',
   'accept',
+  'readonly',
   'button-mode',
   'button-variant',
   'required',
   'size',
+  'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div.wrapper' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -5431,12 +5439,16 @@ class RawUploadFile extends BaseInputClass {
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
 			<style>
-			.wrapper {
+			:host {
+				display: flex;
+			}
+			:host > div {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				text-align: center;
 				flex-direction: column;
+				width: 100%;
 			}
 			.button-wrapper {
 				position: relative;
@@ -5449,11 +5461,10 @@ class RawUploadFile extends BaseInputClass {
 				opacity: 0;
 			}
 			</style>
-			<div class="wrapper">
+			<div>
 				<div class="icon"></div>
 				<div class="title">
 					<span class="title-text"></span>
-					<span class="required-indicator"></span>
 				</div>
 				<div class="description"></div>
 				<div class="button-wrapper">
@@ -5515,6 +5526,10 @@ class RawUploadFile extends BaseInputClass {
         this.updateButtonSize(newValue);
       } else if (attrName === 'accept') {
         this.updateInputAccept(newValue);
+      } else if (attrName === 'readonly') {
+        this.updateReadOnly(newValue);
+      } else if (attrName === 'icon') {
+        this.updateIcon(newValue);
       }
     }
   }
@@ -5535,6 +5550,10 @@ class RawUploadFile extends BaseInputClass {
     return this.shadowRoot.querySelector('.description');
   }
 
+  get icon() {
+    return this.shadowRoot.querySelector('.icon');
+  }
+
   updateTitle(val) {
     this.title.innerHTML = val;
   }
@@ -5562,10 +5581,23 @@ class RawUploadFile extends BaseInputClass {
   updateInputAccept(val) {
     this.input.setAttribute('accept', val);
   }
+
+  updateReadOnly(val) {
+    if (val === 'true') {
+      this.input.setAttribute('disabled', 'true');
+    } else {
+      this.input.removeAttribute('disabled');
+    }
+  }
+
+  updateIcon(val) {
+    this.icon.style.content = `url(${val})`;
+  }
 }
 
-const { host, icon, title, description, requiredIndicator } = {
-  host: { selector: () => '.wrapper' },
+const { host, wrapper, icon, title, description, requiredIndicator } = {
+  host: { selector: () => ':host' },
+  wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '.icon' },
   title: { selector: () => '.title' },
   description: { selector: () => '.description' },
@@ -5578,15 +5610,15 @@ const UploadFileClass = compose(
     mappings: {
       fontSize: {},
       fontFamily: {},
-      hostWidth: { ...host, property: 'width' },
+      borderColor: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderRadius: {},
       hostHeight: { ...host, property: 'height' },
-      hostPadding: { ...host, property: 'padding' },
-      gap: { ...host },
-      lineHeight: { ...host, property: 'line-height' },
-      borderColor: { ...host, property: 'border-color' },
-      borderWidth: { ...host, property: 'border-width' },
-      borderStyle: { ...host, property: 'border-style' },
-      borderRadius: { ...host, property: 'border-radius' },
+      hostWidth: { ...host, property: 'width' },
+      hostPadding: { property: 'padding' },
+      gap: { ...wrapper },
+      lineHeight: { ...wrapper, property: 'line-height' },
       titleFontSize: { ...title, property: 'font-size' },
       titleFontWeight: { ...title, property: 'font-weight' },
       descriptionFontSize: { ...description, property: 'font-size' },
@@ -5594,7 +5626,6 @@ const UploadFileClass = compose(
         { ...title, property: 'color' },
         { ...description, property: 'color' },
       ],
-      icon: { ...icon, property: 'content' },
       iconSize: { ...icon, property: 'width' },
       requiredIndicator: { ...requiredIndicator, property: 'content' },
     },
@@ -6958,10 +6989,8 @@ const vars$1 = UploadFileClass.cssVarList;
 
 const uploadFile = {
   [vars$1.labelTextColor]: refs.labelTextColor,
-  [vars$1.requiredIndicator]: refs.requiredIndicator,
   [vars$1.fontFamily]: refs.fontFamily,
 
-  [vars$1.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
   [vars$1.iconSize]: '2em',
 
   [vars$1.hostPadding]: '0.75em',
@@ -6976,6 +7005,10 @@ const uploadFile = {
   [vars$1.borderRadius]: refs.borderRadius,
   [vars$1.borderStyle]: 'dashed',
 
+  _required: {
+    [vars$1.requiredIndicator]: refs.requiredIndicator,
+  },
+
   size: {
     xs: {
       [vars$1.hostHeight]: '196px',
@@ -7006,6 +7039,10 @@ const uploadFile = {
       [vars$1.lineHeight]: '1.75em',
     },
   },
+
+  _fullWidth: {
+    [vars$1.hostWidth]: refs.width,
+  },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({