@sula-tech/webcomponents 0.7.2 → 0.7.4

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-Bbryl0vg.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["sula-avatar_18.cjs",[[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 index.bootstrapLazy([["sula-avatar_18.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/sula-avatar_18.cjs.entry.js

@@ -28185,6 +28185,23 @@ const SulaTextarea = class {
             this.setLabelUp();
         };
     }
+    watchValueHandler(newValue) {
+        this.textValue = newValue;
+        if (this.textareaElement && this.textareaElement.value !== newValue) {
+            const cursorPosition = this.textareaElement.selectionStart;
+            this.textareaElement.value = newValue || '';
+            if (this.textareaIsFocused && cursorPosition !== null) {
+                const newPosition = Math.min(cursorPosition, (newValue || '').length);
+                this.textareaElement.setSelectionRange(newPosition, newPosition);
+            }
+        }
+        if (newValue && newValue.trim().length > 0) {
+            this.setLabelUp();
+        }
+        else if (!this.textareaIsFocused) {
+            this.setLabelDown();
+        }
+    }
     handleClick(event) {
         if (!this.node || !this.textareaIsFocused)
             return;
@@ -28232,39 +28249,42 @@ const SulaTextarea = class {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (index.h(index.Host, { key: 'ed754651792554736de45340f7a2eca30303517e', ref: node => (this.node = node) }, index.h("div", { key: '7c8422829a17136e4f98792da018fa4a4c531de4' }, index.h("div", { key: '16f16305b5b1a059e8d1e0b956eb78d2443bd9e0', id: "textarea-container", class: {
+        return (index.h(index.Host, { key: '71e17dbbb92c7a05d8988820c0599b39a0f841a2', ref: node => (this.node = node) }, index.h("div", { key: '9be717191ecd92216c42830dfda5ea14a3c5c939' }, index.h("div", { key: '3765ff81f012dce9438d9c00d694fb61864acf79', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, index.h("label", { key: 'ca41cf5b404b52684d6597a6976b86a596bb613f', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, index.h("label", { 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),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), index.h("label", { key: 'cfcb85fadb260a530be91f347c55e6f98ae3168b', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), index.h("label", { 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,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), index.h("textarea", { key: 'b020d47c6e676defc7af5703142bf28b27235b68', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), index.h("textarea", { key: '55fdbfcf690c8198c62299d884cd85bba5f08346', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'pt-6': this.isActive,
                 'pt-0': !this.isActive,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (index.h("div", { key: '5772c4879f4a2e680423a025ddf371b0682fdbfc', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: 'f85f4b9195cf845d110a8f3a9b4a34e8cd522783', id: "textarea-help-text", class: {
+            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (index.h("div", { key: 'a4d90c39f337137a50ac71ffdd1f0b0714761de9', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: 'a1368830518a465f2d3bec91eec42966a5eee1c0', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (index.h("div", { key: 'dffd4ae72ce81a460589f6cbb58f7615529547ea', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (index.h("div", { key: 'a53bdb59f7dfab7c276a9fd34921026f25bccf12', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
             } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
 };
 SulaTextarea.style = sulaTextareaCss;
 
@@ -28305,6 +28325,7 @@ const SulaTextfield = class {
         this.handleInputChanges = (event) => {
             const newValue = event.target.value;
             this.textValue = newValue;
+            this.value = newValue;
             this.valueChanged.emit(newValue);
         };
         this.handleFocus = () => {
@@ -28329,6 +28350,25 @@ const SulaTextfield = class {
             }
         };
     }
+    watchValueHandler(newValue) {
+        this.textValue = newValue;
+        if (this.inputElement && this.inputElement.value !== newValue) {
+            const cursorPosition = this.inputElement.selectionStart;
+            this.inputElement.value = newValue || '';
+            if (this.inputIsFocused && cursorPosition !== null) {
+                const newPosition = Math.min(cursorPosition, (newValue || '').length);
+                this.inputElement.setSelectionRange(newPosition, newPosition);
+            }
+        }
+        if (newValue && newValue.trim().length > 0) {
+            this.inputIsOpen = true;
+            this.changeElementsStyle();
+        }
+        else if (!this.inputIsFocused) {
+            this.inputIsOpen = false;
+            this.changeElementsStyle();
+        }
+    }
     handleClick(event) {
         if (!this.node || !this.inputIsFocused)
             return;
@@ -28358,6 +28398,8 @@ 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) {
@@ -28382,15 +28424,18 @@ const SulaTextfield = class {
         return this.icon;
     }
     render() {
-        return (index.h(index.Host, { key: '3805ff5fefc6ccc3b903384ac54bcf01ebd9527a', ref: node => (this.node = node) }, index.h("div", { key: 'e90a85b46e51d9c0c989bc4e0ff53b5996cc6c49' }, index.h("div", { key: '258fa53c0386cc3cc231a53d5d0e8da483cc51ce', id: "button-container", class: {
+        return (index.h(index.Host, { key: 'db19982329c8a6aa8989b3a68ef61a7453ee4a99', ref: node => (this.node = node) }, index.h("div", { key: 'daf060b490b07b535cb414b11c3c75f307f127aa' }, index.h("div", { key: '1d84aec41f352537a124311c076eceec3271832a', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '0e16b2a5f2bd115b65a6d8e572bde900606fb97c', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: '1a487915bfd317c1f1b3c04917096f402e7cb7ba', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: 'b2cd0285ef6cdaa4956ac1e7dc7a9d2fb850ffed', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.value }))), index.h("div", { key: 'c26f72728243abca768732d758f7a9992c32d146', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (index.h("div", { key: 'b1f375f8291a67455ae0e252321e4a0fa577bb64', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: 'a780572571be2d1b4e754ccb149b768bb9195800', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: '6ac0ac18b014923a1b6a432e181beaea2f557dca', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: 'f8aa196b22755380105da258fa8e218ceb3894c0', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (index.h("div", { key: '9a9359a270f5f84175829e2e8347e992c89a2639', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: '001ef2edc750497dc82a65341f98289fd8d28c6d', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: '96c0725c63ed92ddbc164f8efcdc003707eb0115', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), index.h("div", { key: 'f65cd97f9ddcadcc07789d8d3dc9421e82e31d78', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (index.h("div", { key: '27596e159d5bcdd52f587350fa7ed619d5a6346e', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: '2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: 'd54b53d64879e9a454a72c7e6726c8b0f5905baa', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { 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 && (index.h("div", { key: 'c62b62d8b8c99a775a31092479f1e4d8f581908c', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
 };
 SulaTextfield.style = sulaTextfieldCss;