@sula-tech/webcomponents 0.7.2 → 0.7.4

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-textarea/sula-textarea.d.ts

@@ -48,6 +48,7 @@ export declare class SulaTextarea {
     isActive: boolean;
     textValue: string;
     textareaIsFocused: boolean;
+    watchValueHandler(newValue: string): void;
     textareaElement: HTMLTextAreaElement;
     node?: HTMLElement;
     activeLabelElement: HTMLLabelElement;

package/dist/types/components/sula-textfield/sula-textfield.d.ts

@@ -53,6 +53,7 @@ export declare class SulaTextfield {
     textValue: string;
     showPassword: boolean;
     inputIsFocused: boolean;
+    watchValueHandler(newValue: string): void;
     inputContainer: HTMLDivElement;
     inputElement: HTMLInputElement;
     labelElement: HTMLDivElement;

package/dist/webcomponents/{p-226f8631.entry.js → p-0cad4d30.entry.js}

@@ -21544,6 +21544,22 @@ const SulaTextarea = class {
       this.setLabelUp();
     };
   }
+  watchValueHandler(e) {
+    this.textValue = e;
+    if (this.textareaElement && this.textareaElement.value !== e) {
+      const t = this.textareaElement.selectionStart;
+      this.textareaElement.value = e || "";
+      if (this.textareaIsFocused && t !== null) {
+        const o = Math.min(t, (e || "").length);
+        this.textareaElement.setSelectionRange(o, o);
+      }
+    }
+    if (e && e.trim().length > 0) {
+      this.setLabelUp();
+    } else if (!this.textareaIsFocused) {
+      this.setLabelDown();
+    }
+  }
   handleClick(e) {
     if (!this.node || !this.textareaIsFocused) return;
     const t = this.node.contains(e.target);
@@ -21591,12 +21607,12 @@ const SulaTextarea = class {
   render() {
     const e = this.rows * 24 + 48;
     return h$1(Host, {
-      key: "ed754651792554736de45340f7a2eca30303517e",
+      key: "71e17dbbb92c7a05d8988820c0599b39a0f841a2",
       ref: e => this.node = e
     }, h$1("div", {
-      key: "7c8422829a17136e4f98792da018fa4a4c531de4"
+      key: "9be717191ecd92216c42830dfda5ea14a3c5c939"
     }, h$1("div", {
-      key: "16f16305b5b1a059e8d1e0b956eb78d2443bd9e0",
+      key: "3765ff81f012dce9438d9c00d694fb61864acf79",
       id: "textarea-container",
       class: {
         "relative border rounded-sm px-16 py-12 outline-none caret-brand-primary": true,
@@ -21612,7 +21628,7 @@ const SulaTextarea = class {
       onFocus: this.handleFocus,
       onClick: this.handleTextareaClick
     }, h$1("label", {
-      key: "ca41cf5b404b52684d6597a6976b86a596bb613f",
+      key: "252bc2b94a3a39a478a6c919bc181514eeb13891",
       class: {
         "text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]": true,
         "text-text-primary": !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
@@ -21621,7 +21637,7 @@ const SulaTextarea = class {
       },
       ref: e => this.labelElement = e
     }, this.label), h$1("label", {
-      key: "cfcb85fadb260a530be91f347c55e6f98ae3168b",
+      key: "71505a321c84a6c33668cb0f8e67877943225c99",
       class: {
         "absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down": true,
         "text-sm top-12 left-16": this.isActive,
@@ -21631,7 +21647,7 @@ const SulaTextarea = class {
       },
       ref: e => this.activeLabelElement = e
     }, this.label), h$1("textarea", {
-      key: "b020d47c6e676defc7af5703142bf28b27235b68",
+      key: "55fdbfcf690c8198c62299d884cd85bba5f08346",
       ref: e => this.textareaElement = e,
       placeholder: this.isActive ? this.placeholder : "",
       rows: this.rows,
@@ -21649,10 +21665,10 @@ const SulaTextarea = class {
       onBlur: this.handleBlur,
       value: this.textValue
     })), (this.helpText || this.maxLength) && h$1("div", {
-      key: "5772c4879f4a2e680423a025ddf371b0682fdbfc",
+      key: "a4d90c39f337137a50ac71ffdd1f0b0714761de9",
       class: "flex justify-between items-center px-16 mt-4 text-sm"
     }, this.helpText && h$1("div", {
-      key: "f85f4b9195cf845d110a8f3a9b4a34e8cd522783",
+      key: "a1368830518a465f2d3bec91eec42966a5eee1c0",
       id: "textarea-help-text",
       class: {
         "text-text-primary": this.status === SulaTextareaStatus.Default && !this.disabled,
@@ -21660,7 +21676,7 @@ const SulaTextarea = class {
         "text-text-disabled": this.disabled
       }
     }, this.helpText), this.maxLength && h$1("div", {
-      key: "dffd4ae72ce81a460589f6cbb58f7615529547ea",
+      key: "a53bdb59f7dfab7c276a9fd34921026f25bccf12",
       id: "max-length-container",
       class: {
         "text-text-primary": this.status === SulaTextareaStatus.Default && !this.disabled,
@@ -21669,6 +21685,11 @@ const SulaTextarea = class {
       }
     }, this.textValue ? this.textValue.length : 0, "/", this.maxLength))));
   }
+  static get watchers() {
+    return {
+      value: [ "watchValueHandler" ]
+    };
+  }
 };
 
 SulaTextarea.style = sulaTextareaCss;
@@ -21711,6 +21732,7 @@ const SulaTextfield = class {
     this.handleInputChanges = e => {
       const t = e.target.value;
       this.textValue = t;
+      this.value = t;
       this.valueChanged.emit(t);
     };
     this.handleFocus = () => {
@@ -21734,6 +21756,24 @@ const SulaTextfield = class {
       }
     };
   }
+  watchValueHandler(e) {
+    this.textValue = e;
+    if (this.inputElement && this.inputElement.value !== e) {
+      const t = this.inputElement.selectionStart;
+      this.inputElement.value = e || "";
+      if (this.inputIsFocused && t !== null) {
+        const o = Math.min(t, (e || "").length);
+        this.inputElement.setSelectionRange(o, o);
+      }
+    }
+    if (e && e.trim().length > 0) {
+      this.inputIsOpen = true;
+      this.changeElementsStyle();
+    } else if (!this.inputIsFocused) {
+      this.inputIsOpen = false;
+      this.changeElementsStyle();
+    }
+  }
   handleClick(e) {
     if (!this.node || !this.inputIsFocused) return;
     const t = this.node.contains(e.target);
@@ -21761,6 +21801,7 @@ const SulaTextfield = class {
     this.inputElement.focus();
   }
   changeElementsStyle() {
+    if (!this.inputContainer || !this.labelElement) return;
     this.inputContainer.style.display = this.inputIsOpen ? "flex" : "none";
     this.labelElement.style.display = this.inputIsOpen ? "none" : "block";
     if (!this.inputIsOpen) {
@@ -21786,12 +21827,12 @@ const SulaTextfield = class {
   }
   render() {
     return h$1(Host, {
-      key: "3805ff5fefc6ccc3b903384ac54bcf01ebd9527a",
+      key: "db19982329c8a6aa8989b3a68ef61a7453ee4a99",
       ref: e => this.node = e
     }, h$1("div", {
-      key: "e90a85b46e51d9c0c989bc4e0ff53b5996cc6c49"
+      key: "daf060b490b07b535cb414b11c3c75f307f127aa"
     }, h$1("div", {
-      key: "258fa53c0386cc3cc231a53d5d0e8da483cc51ce",
+      key: "1d84aec41f352537a124311c076eceec3271832a",
       id: "button-container",
       class: {
         "flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary": true,
@@ -21805,26 +21846,26 @@ const SulaTextfield = class {
       onFocus: this.handleFocus,
       onClick: this.handleInputClick
     }, !this.disabled && h$1("div", {
-      key: "0e16b2a5f2bd115b65a6d8e572bde900606fb97c",
+      key: "6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf",
       class: {
         "hidden flex-col w-full": true,
         "pr-12": !!this.icon
       },
       ref: e => this.inputContainer = e
     }, h$1("label", {
-      key: "1a487915bfd317c1f1b3c04917096f402e7cb7ba",
+      key: "001ef2edc750497dc82a65341f98289fd8d28c6d",
       class: "font-bold text-sm text-text-primary from-down"
     }, this.label), h$1("input", {
-      key: "b2cd0285ef6cdaa4956ac1e7dc7a9d2fb850ffed",
+      key: "96c0725c63ed92ddbc164f8efcdc003707eb0115",
       type: this.type,
       ref: e => this.inputElement = e,
       placeholder: this.placeholder,
       class: "outline-none text-base text-text-primary bg-transparent",
       onInput: this.handleInputChanges,
       onFocus: this.handleInputFocus,
-      value: this.value
+      value: this.textValue
     })), h$1("div", {
-      key: "c26f72728243abca768732d758f7a9992c32d146",
+      key: "f65cd97f9ddcadcc07789d8d3dc9421e82e31d78",
       id: "textfield-label",
       class: {
         "text-base flex items-center": true,
@@ -21833,25 +21874,25 @@ const SulaTextfield = class {
       },
       ref: e => this.labelElement = e
     }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && h$1("div", {
-      key: "b1f375f8291a67455ae0e252321e4a0fa577bb64",
+      key: "27596e159d5bcdd52f587350fa7ed619d5a6346e",
       class: "flex items-center justify-center",
       onClick: this.handleIconClick
     }, h$1("sula-icon", {
-      key: "a780572571be2d1b4e754ccb149b768bb9195800",
+      key: "2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7",
       icon: this.getInputIcon(),
       customClass: `text-2xl ${this.disabled ? "text-icon-disabled" : "text-icon-primary"}`
     }))), (this.helpText || this.maxLength) && !this.disabled && h$1("div", {
-      key: "6ac0ac18b014923a1b6a432e181beaea2f557dca",
+      key: "d54b53d64879e9a454a72c7e6726c8b0f5905baa",
       class: "flex justify-between items-center px-16 mt-4 text-sm"
     }, this.helpText && h$1("div", {
-      key: "f8aa196b22755380105da258fa8e218ceb3894c0",
+      key: "7ded73f462e82f41b8766e4654cd47fabf3b3a40",
       id: "textfield-help-text",
       class: {
         "text-text-primary": this.status === SulaTextfieldStatus.Default,
         "text-feedback-error": this.status === SulaTextfieldStatus.Error
       }
     }, this.helpText), this.maxLength && h$1("div", {
-      key: "9a9359a270f5f84175829e2e8347e992c89a2639",
+      key: "c62b62d8b8c99a775a31092479f1e4d8f581908c",
       id: "max-length-container",
       class: {
         "text-text-primary": this.status === SulaTextfieldStatus.Default,
@@ -21859,6 +21900,11 @@ const SulaTextfield = class {
       }
     }, this.textValue ? this.textValue.length : 0, "/", this.maxLength))));
   }
+  static get watchers() {
+    return {
+      value: [ "watchValueHandler" ]
+    };
+  }
 };
 
 SulaTextfield.style = sulaTextfieldCss;
@@ -22135,4 +22181,4 @@ SulaTimelineList.style = sulaTimelineListCss;
 
 export { SulaAvatar as sula_avatar, SulaBadge as sula_badge, SulaButton as sula_button, SulaCheckbox as sula_checkbox, SulaChip as sula_chip, SulaDropdown as sula_dropdown, SulaIcon as sula_icon, SulaLoader as sula_loader, SulaMenuSelectList as sula_menu_select_list, SulaProgressBar as sula_progress_bar, SulaRadioButton as sula_radio_button, SulaSearchBar as sula_search_bar, SulaSwitch as sula_switch, SulaTag as sula_tag, SulaTextarea as sula_textarea, SulaTextfield as sula_textfield, SulaTiles as sula_tiles, SulaTimelineList as sula_timeline_list };
 //# sourceMappingURL=sula-avatar.sula-badge.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-progress-bar.sula-radio-button.sula-search-bar.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.esm.js.map
-//# sourceMappingURL=p-226f8631.entry.js.map
+//# sourceMappingURL=p-0cad4d30.entry.js.map