@sula-tech/webcomponents 0.7.3 → 0.7.5

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

@@ -28239,6 +28239,8 @@ const SulaTextarea = class {
         this.changeElementsStyle();
     }
     changeElementsStyle() {
+        if (!this.labelElement || !this.activeLabelElement)
+            return;
         this.activeLabelElement.style.display = this.isActive ? 'flex' : 'none';
         this.labelElement.style.display = this.isActive ? 'none' : 'block';
         if (!this.isActive) {
@@ -28247,34 +28249,34 @@ const SulaTextarea = class {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h$1(Host, { key: '71e17dbbb92c7a05d8988820c0599b39a0f841a2', ref: node => (this.node = node) }, h$1("div", { key: '9be717191ecd92216c42830dfda5ea14a3c5c939' }, h$1("div", { key: '3765ff81f012dce9438d9c00d694fb61864acf79', id: "textarea-container", class: {
+        return (h$1(Host, { key: '1ec5c0b8f04ea2f32d48301334d2c717327d0b17', ref: node => (this.node = node) }, h$1("div", { key: 'be0e209759746014407a3dc9aa553faea5b4f7f9' }, h$1("div", { key: '238be270fa3cfdbdd0f4a5cda9d99deeb7c9667d', 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 }, h$1("label", { key: '252bc2b94a3a39a478a6c919bc181514eeb13891', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h$1("label", { key: '66812b881d9396ff093cac598e6c64a54e1cdbad', 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), h$1("label", { key: '71505a321c84a6c33668cb0f8e67877943225c99', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h$1("label", { key: 'e0b2a3f1d35b7bd047b6324464772697d565076d', 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), h$1("textarea", { key: '55fdbfcf690c8198c62299d884cd85bba5f08346', 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), h$1("textarea", { key: '77603b5c3bfb9430e5a41f0b219c5f0597f4ab92', 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) && (h$1("div", { key: 'a4d90c39f337137a50ac71ffdd1f0b0714761de9', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: 'a1368830518a465f2d3bec91eec42966a5eee1c0', id: "textarea-help-text", class: {
+            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h$1("div", { key: 'ed5e9397e617eb07241dc26fed75d35f0abd16fd', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: '3ee82fca291f045dcee3c2c29da6ac625ee42d44', 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 && (h$1("div", { key: 'a53bdb59f7dfab7c276a9fd34921026f25bccf12', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h$1("div", { key: 'd4a3503ef45089512b85cf2cb28c32f655f9b17c', 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,
@@ -28396,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) {
@@ -28420,14 +28424,14 @@ const SulaTextfield = class {
         return this.icon;
     }
     render() {
-        return (h$1(Host, { key: '46cd224f63ed98167fd261dc930014a0293ea614', ref: node => (this.node = node) }, h$1("div", { key: 'feb3a3f5fccc779ecab04aae9fb6bf4f86cc6a6a' }, h$1("div", { key: '7afb904201e65f95b1b13f97f6989c8d921afbe3', id: "button-container", class: {
+        return (h$1(Host, { key: 'db19982329c8a6aa8989b3a68ef61a7453ee4a99', ref: node => (this.node = node) }, h$1("div", { key: 'daf060b490b07b535cb414b11c3c75f307f127aa' }, h$1("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 && (h$1("div", { key: '02dc46c38c09147f966017f3e70df530b7ad175c', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h$1("label", { key: '1ecfe54e70ede77ad085d408b71e1d0f3ee53133', class: "font-bold text-sm text-text-primary from-down" }, this.label), h$1("input", { key: 'e08732fbd8fb08a03dfd3eadc7884ad632b8c809', 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 }))), h$1("div", { key: 'e1c37bffee8df5505c2757610b8f5798aded0d59', 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) && (h$1("div", { key: '05a531ae49ea6ab7301ac792f7f8c50dcd366df7', class: "flex items-center justify-center", onClick: this.handleIconClick }, h$1("sula-icon", { key: 'b23ce605c3e496b5bac81b04d4a4d7d08f87c70b', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h$1("div", { key: 'd3a0d8f6de88b5e18da0e7667ec644a3473e29c3', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("div", { key: '0e1027cf8e761bbbc5830242f0cb733c152e5fb6', 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: '8c271af5206a0b44748125bed4456dcb6b357117', 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 && (h$1("div", { key: '6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h$1("label", { key: '001ef2edc750497dc82a65341f98289fd8d28c6d', class: "font-bold text-sm text-text-primary from-down" }, this.label), h$1("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 }))), h$1("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) && (h$1("div", { key: '27596e159d5bcdd52f587350fa7ed619d5a6346e', class: "flex items-center justify-center", onClick: this.handleIconClick }, h$1("sula-icon", { 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: 'd54b53d64879e9a454a72c7e6726c8b0f5905baa', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h$1("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 && (h$1("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"]