@descope/web-components-ui 1.0.162 → 1.0.164

package/dist/cjs/index.cjs.js

@@ -1241,7 +1241,7 @@ const proxyInputMixin = (superclass) =>
     }
 
     get inputElement() {
-      if (this.#inputElement) return this.#inputElement
+      if (this.#inputElement) return this.#inputElement;
 
       this.warnIfInputElementIsMissing();
 
@@ -1278,7 +1278,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
@@ -1322,7 +1322,6 @@ const proxyInputMixin = (superclass) =>
         forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
       });
     }
-
   };
 
 const composedProxyInputMixin = compose(
@@ -3353,13 +3352,13 @@ const selectors$1 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$1, host: host$7, wrapper } = selectors$1;
+const { anchor, text: text$1, host: host$7, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$7, property: 'width' },
-      textAlign: wrapper,
+      textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
         { ...text$1, property: TextClass.cssVarList.textColor },
@@ -5899,13 +5898,15 @@ const observedAttributes$1 = [
   '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() {
@@ -5917,12 +5918,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;
@@ -5935,11 +5940,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">
@@ -6001,6 +6005,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);
       }
     }
   }
@@ -6021,6 +6029,10 @@ class RawUploadFile extends BaseInputClass {
     return this.shadowRoot.querySelector('.description');
   }
 
+  get icon() {
+    return this.shadowRoot.querySelector('.icon');
+  }
+
   updateTitle(val) {
     this.title.innerHTML = val;
   }
@@ -6048,10 +6060,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' },
@@ -6064,15 +6089,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' },
@@ -6080,7 +6105,6 @@ const UploadFileClass = compose(
         { ...title, property: 'color' },
         { ...description, property: 'color' },
       ],
-      icon: { ...icon, property: 'content' },
       iconSize: { ...icon, property: 'width' },
       requiredIndicator: { ...requiredIndicator, property: 'content' },
     },
@@ -6093,10 +6117,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',
@@ -6111,6 +6133,10 @@ const uploadFile = {
   [vars$1.borderRadius]: refs.borderRadius,
   [vars$1.borderStyle]: 'dashed',
 
+  _required: {
+    [vars$1.requiredIndicator]: refs.requiredIndicator,
+  },
+
   size: {
     xs: {
       [vars$1.hostHeight]: '196px',
@@ -6141,6 +6167,10 @@ const uploadFile = {
       [vars$1.lineHeight]: '1.75em',
     },
   },
+
+  _fullWidth: {
+    [vars$1.hostWidth]: refs.width,
+  },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({