@descope/web-components-ui 1.0.163 → 1.0.165

package/dist/index.esm.js

@@ -2233,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 },
@@ -2356,7 +2356,7 @@ customElements.define(componentName$e, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
-  ele?.setSelectionRange(1, 1);
+  ele?.setSelectionRange?.(1, 1);
 };
 
 const getSanitizedCharacters = (str) => {
@@ -5419,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() {
@@ -5437,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;
@@ -5455,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">
@@ -5521,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);
       }
     }
   }
@@ -5541,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;
   }
@@ -5568,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' },
@@ -5584,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' },
@@ -5600,7 +5626,6 @@ const UploadFileClass = compose(
         { ...title, property: 'color' },
         { ...description, property: 'color' },
       ],
-      icon: { ...icon, property: 'content' },
       iconSize: { ...icon, property: 'width' },
       requiredIndicator: { ...requiredIndicator, property: 'content' },
     },
@@ -6964,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',
@@ -6982,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',
@@ -7012,6 +7039,10 @@ const uploadFile = {
       [vars$1.lineHeight]: '1.75em',
     },
   },
+
+  _fullWidth: {
+    [vars$1.hostWidth]: refs.width,
+  },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({