@sankhyalabs/ezui 6.1.0-dev.14 → 6.1.0-dev.16

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -10,7 +10,7 @@ export class EzTextArea {
     this.errorMessage = undefined;
     this.rows = 4;
     this.canShowError = true;
-    this.mode = "regular";
+    this.mode = 'regular';
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
@@ -33,10 +33,10 @@ export class EzTextArea {
     if (this._inputElem) {
       if (newValue != oldValue) {
         if (this.canChangeValue()) {
-          this._inputElem.value = this.value || "";
+          this._inputElem.value = this.value || '';
         }
         this.adjustFloatingLabel();
-        this.errorMessage = "";
+        this.errorMessage = '';
         this.ezChange.emit(this.value);
       }
     }
@@ -45,13 +45,13 @@ export class EzTextArea {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.rows = rows;
     }
   }
   observeRows() {
-    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    const rows = this.rows > 0 ? this.rows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.updateRows(rows);
     }
@@ -84,8 +84,8 @@ export class EzTextArea {
     var _a, _b, _c, _d;
     const selectionStart = this._inputElem.selectionStart;
     const selectionEnd = this._inputElem.selectionEnd;
-    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : "";
-    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : "";
+    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : '';
+    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : '';
     this.value = `${textStart}${text}${textEnd}`;
     const newSelectionEnd = selectionStart + text.length;
     const start = (selectionStart === selectionEnd) ? newSelectionEnd : selectionStart;
@@ -108,28 +108,28 @@ export class EzTextArea {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return typeof this.errorMessage === 'string' && this.errorMessage.trim() !== '';
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   canChangeValue() {
-    return this._inputElem && (this.value || "") !== this._inputElem.value;
+    return this._inputElem && (this.value || '') !== this._inputElem.value;
   }
   adjustFloatingLabel() {
     if (this.forceLabelFloat)
       return;
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      const containsFloatedClass = this._labelElem.classList.contains('textarea__label--floated');
       if (hasValue || this.isFocused()) {
         if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
+          this._labelElem.classList.add('textarea__label--floated');
         }
       }
       else {
         if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
+          this._labelElem.classList.remove('textarea__label--floated');
         }
       }
     }
@@ -178,8 +178,8 @@ export class EzTextArea {
   //---------------------------------------------
   handleFocusout() {
     this.adjustFloatingLabel();
-    if (this._container && this._container.classList.contains("textarea--focus")) {
-      this._container.classList.remove("textarea--focus");
+    if (this._container && this._container.classList.contains('textarea--focus')) {
+      this._container.classList.remove('textarea--focus');
     }
   }
   handleChange() {
@@ -188,11 +188,11 @@ export class EzTextArea {
     }
   }
   handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
+    if (this.label && this._labelElem && !this._labelElem.classList.contains('textarea__label--floated')) {
+      this._labelElem.classList.add('textarea__label--floated');
     }
-    if (this._container && !this._container.classList.contains("textarea--focus")) {
-      this._container.classList.add("textarea--focus");
+    if (this._container && !this._container.classList.contains('textarea--focus')) {
+      this._container.classList.add('textarea--focus');
     }
   }
   connectedCallback() {
@@ -205,7 +205,7 @@ export class EzTextArea {
   buildPlaceholder() {
     if (this.alternativePlaceholder)
       return this.alternativePlaceholder;
-    return (this.mode === "slim" && this.label) ? this.label : '';
+    return (this.mode === 'slim' && this.label) ? this.label : '';
   }
   buildLabelClass() {
     let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
@@ -215,6 +215,19 @@ export class EzTextArea {
       classList = classList + ' textarea__label--floated';
     return classList;
   }
+  renderErrorTooltip() {
+    if (!this.canShowError || this.mode == 'slim' || !this.errorMessage)
+      return;
+    return (h("div", { class: "tooltip-container" }, h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? 'hasError' : ''}`, "data-element-id": ElementIDUtils.getInternalIDInfo('tooltip-icon'), iconName: "alert-circle" }))));
+  }
+  renderLabel() {
+    if (!this.label || this.mode == 'slim')
+      return null;
+    return h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label);
+  }
+  renderTextArea() {
+    return h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo('input'), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: { 'textarea--slim': this.mode === 'slim' }, placeholder: this.buildPlaceholder(), onInput: () => this.handleChange(), onFocusout: () => this.handleFocusout(), rows: this.rows });
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -230,13 +243,7 @@ export class EzTextArea {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
-        "textarea--slim": this.mode === "slim",
-        "textarea--resizable": this.enableResize
-      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? '' : 'textarea--disabled'}`, ref: (el) => this._container = el }, this.renderLabel(), h("div", { class: `input-container ${this.enableResize ? 'textarea--resizable' : ""}` }, this.renderTextArea(), this.renderErrorTooltip()))));
   }
   static get is() { return "ez-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -361,7 +368,7 @@ export class EzTextArea {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"slim\" | \"regular\"",
+          "original": "'slim' | 'regular'",
           "resolved": "\"regular\" | \"slim\"",
           "references": {}
         },
@@ -373,7 +380,7 @@ export class EzTextArea {
         },
         "attribute": "mode",
         "reflect": true,
-        "defaultValue": "\"regular\""
+        "defaultValue": "'regular'"
       },
       "enableResize": {
         "type": "boolean",

package/dist/custom-elements/index.js

@@ -5958,7 +5958,7 @@ const EzForm$1 = class extends HTMLElement$1 {
       }
     };
     this._fieldsProps = new Map();
-    this._singleColumn = true;
+    this._singleColumn = false;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -78163,7 +78163,7 @@ const EzRadioButton$1 = class extends HTMLElement$1 {
   static get style() { return ezRadioButtonCss; }
 };
 
-const ezRichTextCss = ".sc-ez-rich-text-h{display:block;width:100%;font-family:Roboto;--ez-rich-text--box-shadow:0 0 3px 0 #DCE0E8;--ez-rich-text--shadow--outline:var(--shadow--outline) var(--color--strokes)}.editor-container.bordered.sc-ez-rich-text{border-radius:12px;border:1px solid #DCE0E8}.editor-container.sc-ez-rich-text{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}ez-text-area.sc-ez-rich-text{--text-area__input--border:1px solid}.preview.sc-ez-rich-text{min-height:20px;padding:12px;resize:both;overflow:auto;max-width:100%}";
+const ezRichTextCss = ".sc-ez-rich-text-h{display:block;width:100%;font-family:Roboto;--ez-rich-text--box-shadow:0 0 3px 0 #DCE0E8;--ez-rich-text--shadow--outline:var(--shadow--outline) var(--color--strokes)}.editor-container.sc-ez-rich-text{width:100%;overflow:hidden;border-radius:12px;border:1px solid #DCE0E8}ez-text-area.sc-ez-rich-text{--text-area__input--border:1px solid}.preview.sc-ez-rich-text{min-height:20px;padding:12px;resize:both;overflow:auto;max-width:100%;border-top:1px solid #DCE0E8}";
 
 const EzRichText$1 = class extends HTMLElement$1 {
   constructor() {
@@ -78174,12 +78174,13 @@ const EzRichText$1 = class extends HTMLElement$1 {
     this.historyIndex = -1;
     this.previewMode = false;
     this.showPreview = true;
-    this.showBorder = false;
     this.value = '';
     this.label = undefined;
+    this.mode = "regular";
     this.enabled = true;
     this.rows = 6;
     this.errorMessage = undefined;
+    this.canShowError = true;
     this.showConfigs = true;
     this.showTextFormat = true;
     this.showUndoRedo = true;
@@ -78189,6 +78190,11 @@ const EzRichText$1 = class extends HTMLElement$1 {
       return;
     this.ezChange.emit(newValue);
   }
+  observeErrorMessage(newValue) {
+    if (newValue && this.previewMode) {
+      this.previewMode = false;
+    }
+  }
   async handleExecuteToolbarCommand(event) {
     const { command, value } = event.detail;
     await this.executeCommand(command, value);
@@ -78417,14 +78423,15 @@ const EzRichText$1 = class extends HTMLElement$1 {
     if (this.previewMode) {
       return (h("div", { id: 'rich-text-preview-container', class: "preview", innerHTML: this.getSanitizedValue() }));
     }
-    return h("ez-text-area", { ref: (el) => this.textAreaRef = el, label: this.label, value: this.value, enabled: this.enabled, rows: this.rows, mode: 'slim', errorMessage: this.errorMessage, onEzChange: this.handleTextAreaChanged.bind(this) });
+    return h("ez-text-area", { ref: (el) => this.textAreaRef = el, label: this.label, value: this.value, enabled: this.enabled, rows: this.rows, mode: this.mode, canShowError: this.canShowError, errorMessage: this.errorMessage, onEzChange: this.handleTextAreaChanged.bind(this) });
   }
   render() {
-    return (h(Host, null, h("div", { class: `editor-container ${this.showBorder ? 'bordered' : ''}` }, h("ez-rich-toolbar", { isPreviewMode: this.previewMode, showPreview: this.showPreview, showConfigs: this.showConfigs && this.enabled, showTextFormat: this.showTextFormat && this.enabled, showUndoRedo: this.showUndoRedo && this.enabled }), this.renderContent()), h("ez-link-builder", { ref: (el) => this.linkBuilderRef = el }), h("ez-simple-image-uploader", { ref: (el) => this.imageUploaderRef = el })));
+    return (h(Host, null, h("div", { class: 'editor-container bordered' }, h("ez-rich-toolbar", { isPreviewMode: this.previewMode, showPreview: this.showPreview, showConfigs: this.showConfigs && this.enabled, showTextFormat: this.showTextFormat && this.enabled, showUndoRedo: this.showUndoRedo && this.enabled }), this.renderContent()), h("ez-link-builder", { ref: (el) => this.linkBuilderRef = el }), h("ez-simple-image-uploader", { ref: (el) => this.imageUploaderRef = el })));
   }
   get element() { return this; }
   static get watchers() { return {
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "errorMessage": ["observeErrorMessage"]
   }; }
   static get style() { return ezRichTextCss; }
 };
@@ -85093,7 +85100,7 @@ const EzTabselector$1 = class extends HTMLElement$1 {
   static get style() { return ezTabselectorCss; }
 };
 
-const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes,#DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes,#DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800,#BD0025);--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color-alert--error-800,#BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;min-height:42px;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--resizable{resize:vertical}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color);cursor:not-allowed}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}";
+const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes, #DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes, #DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800, #BD0025);--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color-alert--error-800, #BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);--ez-text-area__tooltip-icon--spacing:var(--space--large);--ez-text-area__tooltip-icon---width:var(--space--large);--ez-text-area__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-area__tooltip-icon---vertical-margin:10px;--ez-text-area__tooltip_icon--error--color:var(--color-alert--error-800, #BD0025);display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{display:flex;flex-direction:column;height:calc(100% - 16px);box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;min-height:42px;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color);cursor:not-allowed}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-area__tooltip_icon--error--color)}.input-container{display:flex;align-items:center}.textarea--resizable{resize:vertical;overflow:auto;min-height:42px}";
 
 const EzTextArea$1 = class extends HTMLElement$1 {
   constructor() {
@@ -85109,7 +85116,7 @@ const EzTextArea$1 = class extends HTMLElement$1 {
     this.errorMessage = undefined;
     this.rows = 4;
     this.canShowError = true;
-    this.mode = "regular";
+    this.mode = 'regular';
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
@@ -85132,10 +85139,10 @@ const EzTextArea$1 = class extends HTMLElement$1 {
     if (this._inputElem) {
       if (newValue != oldValue) {
         if (this.canChangeValue()) {
-          this._inputElem.value = this.value || "";
+          this._inputElem.value = this.value || '';
         }
         this.adjustFloatingLabel();
-        this.errorMessage = "";
+        this.errorMessage = '';
         this.ezChange.emit(this.value);
       }
     }
@@ -85144,13 +85151,13 @@ const EzTextArea$1 = class extends HTMLElement$1 {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.rows = rows;
     }
   }
   observeRows() {
-    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    const rows = this.rows > 0 ? this.rows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.updateRows(rows);
     }
@@ -85183,8 +85190,8 @@ const EzTextArea$1 = class extends HTMLElement$1 {
     var _a, _b, _c, _d;
     const selectionStart = this._inputElem.selectionStart;
     const selectionEnd = this._inputElem.selectionEnd;
-    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : "";
-    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : "";
+    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : '';
+    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : '';
     this.value = `${textStart}${text}${textEnd}`;
     const newSelectionEnd = selectionStart + text.length;
     const start = (selectionStart === selectionEnd) ? newSelectionEnd : selectionStart;
@@ -85207,28 +85214,28 @@ const EzTextArea$1 = class extends HTMLElement$1 {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return typeof this.errorMessage === 'string' && this.errorMessage.trim() !== '';
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   canChangeValue() {
-    return this._inputElem && (this.value || "") !== this._inputElem.value;
+    return this._inputElem && (this.value || '') !== this._inputElem.value;
   }
   adjustFloatingLabel() {
     if (this.forceLabelFloat)
       return;
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      const containsFloatedClass = this._labelElem.classList.contains('textarea__label--floated');
       if (hasValue || this.isFocused()) {
         if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
+          this._labelElem.classList.add('textarea__label--floated');
         }
       }
       else {
         if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
+          this._labelElem.classList.remove('textarea__label--floated');
         }
       }
     }
@@ -85277,8 +85284,8 @@ const EzTextArea$1 = class extends HTMLElement$1 {
   //---------------------------------------------
   handleFocusout() {
     this.adjustFloatingLabel();
-    if (this._container && this._container.classList.contains("textarea--focus")) {
-      this._container.classList.remove("textarea--focus");
+    if (this._container && this._container.classList.contains('textarea--focus')) {
+      this._container.classList.remove('textarea--focus');
     }
   }
   handleChange() {
@@ -85287,11 +85294,11 @@ const EzTextArea$1 = class extends HTMLElement$1 {
     }
   }
   handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
+    if (this.label && this._labelElem && !this._labelElem.classList.contains('textarea__label--floated')) {
+      this._labelElem.classList.add('textarea__label--floated');
     }
-    if (this._container && !this._container.classList.contains("textarea--focus")) {
-      this._container.classList.add("textarea--focus");
+    if (this._container && !this._container.classList.contains('textarea--focus')) {
+      this._container.classList.add('textarea--focus');
     }
   }
   connectedCallback() {
@@ -85304,7 +85311,7 @@ const EzTextArea$1 = class extends HTMLElement$1 {
   buildPlaceholder() {
     if (this.alternativePlaceholder)
       return this.alternativePlaceholder;
-    return (this.mode === "slim" && this.label) ? this.label : '';
+    return (this.mode === 'slim' && this.label) ? this.label : '';
   }
   buildLabelClass() {
     let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
@@ -85314,6 +85321,19 @@ const EzTextArea$1 = class extends HTMLElement$1 {
       classList = classList + ' textarea__label--floated';
     return classList;
   }
+  renderErrorTooltip() {
+    if (!this.canShowError || this.mode == 'slim' || !this.errorMessage)
+      return;
+    return (h("div", { class: "tooltip-container" }, h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? 'hasError' : ''}`, "data-element-id": ElementIDUtils.getInternalIDInfo('tooltip-icon'), iconName: "alert-circle" }))));
+  }
+  renderLabel() {
+    if (!this.label || this.mode == 'slim')
+      return null;
+    return h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label);
+  }
+  renderTextArea() {
+    return h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo('input'), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: { 'textarea--slim': this.mode === 'slim' }, placeholder: this.buildPlaceholder(), onInput: () => this.handleChange(), onFocusout: () => this.handleFocusout(), rows: this.rows });
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -85329,13 +85349,7 @@ const EzTextArea$1 = class extends HTMLElement$1 {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
-        "textarea--slim": this.mode === "slim",
-        "textarea--resizable": this.enableResize
-      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? '' : 'textarea--disabled'}`, ref: (el) => this._container = el }, this.renderLabel(), h("div", { class: `input-container ${this.enableResize ? 'textarea--resizable' : ""}` }, this.renderTextArea(), this.renderErrorTooltip()))));
   }
   get _hostElement() { return this; }
   static get watchers() { return {
@@ -87548,7 +87562,7 @@ const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-po
 const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"],"enabledScroll":[4,"enabled-scroll"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
-const EzRichText = /*@__PURE__*/proxyCustomElement(EzRichText$1, [2,"ez-rich-text",{"showPreview":[4,"show-preview"],"showBorder":[1540,"show-border"],"value":[1537],"label":[513],"enabled":[516],"rows":[514],"errorMessage":[1537,"error-message"],"showConfigs":[4,"show-configs"],"showTextFormat":[4,"show-text-format"],"showUndoRedo":[4,"show-undo-redo"],"previewMode":[32]},[[0,"executeToolbarCommand","handleExecuteToolbarCommand"]]]);
+const EzRichText = /*@__PURE__*/proxyCustomElement(EzRichText$1, [2,"ez-rich-text",{"showPreview":[4,"show-preview"],"value":[1537],"label":[513],"mode":[513],"enabled":[516],"rows":[514],"errorMessage":[1537,"error-message"],"canShowError":[516,"can-show-error"],"showConfigs":[4,"show-configs"],"showTextFormat":[4,"show-text-format"],"showUndoRedo":[4,"show-undo-redo"],"previewMode":[32]},[[0,"executeToolbarCommand","handleExecuteToolbarCommand"]]]);
 const EzRichToolbar = /*@__PURE__*/proxyCustomElement(EzRichToolbar$1, [2,"ez-rich-toolbar",{"showPreview":[4,"show-preview"],"isPreviewMode":[4,"is-preview-mode"],"showConfigs":[4,"show-configs"],"showTextFormat":[4,"show-text-format"],"showUndoRedo":[4,"show-undo-redo"]},[[0,"actionTriggered","handleActionTriggered"]]]);
 const EzRichToolbarArrows = /*@__PURE__*/proxyCustomElement(EzRichToolbarArrows$1, [2,"ez-rich-toolbar-arrows"]);
 const EzRichToolbarConfigs = /*@__PURE__*/proxyCustomElement(EzRichToolbarConfigs$1, [2,"ez-rich-toolbar-configs"]);

package/dist/esm/ez-combo-box-list_4.entry.js

@@ -285,7 +285,7 @@ const EzCustomFormInput = class {
   }; }
 };
 
-const ezRichTextCss = ".sc-ez-rich-text-h{display:block;width:100%;font-family:Roboto;--ez-rich-text--box-shadow:0 0 3px 0 #DCE0E8;--ez-rich-text--shadow--outline:var(--shadow--outline) var(--color--strokes)}.editor-container.bordered.sc-ez-rich-text{border-radius:12px;border:1px solid #DCE0E8}.editor-container.sc-ez-rich-text{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}ez-text-area.sc-ez-rich-text{--text-area__input--border:1px solid}.preview.sc-ez-rich-text{min-height:20px;padding:12px;resize:both;overflow:auto;max-width:100%}";
+const ezRichTextCss = ".sc-ez-rich-text-h{display:block;width:100%;font-family:Roboto;--ez-rich-text--box-shadow:0 0 3px 0 #DCE0E8;--ez-rich-text--shadow--outline:var(--shadow--outline) var(--color--strokes)}.editor-container.sc-ez-rich-text{width:100%;overflow:hidden;border-radius:12px;border:1px solid #DCE0E8}ez-text-area.sc-ez-rich-text{--text-area__input--border:1px solid}.preview.sc-ez-rich-text{min-height:20px;padding:12px;resize:both;overflow:auto;max-width:100%;border-top:1px solid #DCE0E8}";
 
 const EzRichText = class {
   constructor(hostRef) {
@@ -295,12 +295,13 @@ const EzRichText = class {
     this.historyIndex = -1;
     this.previewMode = false;
     this.showPreview = true;
-    this.showBorder = false;
     this.value = '';
     this.label = undefined;
+    this.mode = "regular";
     this.enabled = true;
     this.rows = 6;
     this.errorMessage = undefined;
+    this.canShowError = true;
     this.showConfigs = true;
     this.showTextFormat = true;
     this.showUndoRedo = true;
@@ -310,6 +311,11 @@ const EzRichText = class {
       return;
     this.ezChange.emit(newValue);
   }
+  observeErrorMessage(newValue) {
+    if (newValue && this.previewMode) {
+      this.previewMode = false;
+    }
+  }
   async handleExecuteToolbarCommand(event) {
     const { command, value } = event.detail;
     await this.executeCommand(command, value);
@@ -538,14 +544,15 @@ const EzRichText = class {
     if (this.previewMode) {
       return (h("div", { id: 'rich-text-preview-container', class: "preview", innerHTML: this.getSanitizedValue() }));
     }
-    return h("ez-text-area", { ref: (el) => this.textAreaRef = el, label: this.label, value: this.value, enabled: this.enabled, rows: this.rows, mode: 'slim', errorMessage: this.errorMessage, onEzChange: this.handleTextAreaChanged.bind(this) });
+    return h("ez-text-area", { ref: (el) => this.textAreaRef = el, label: this.label, value: this.value, enabled: this.enabled, rows: this.rows, mode: this.mode, canShowError: this.canShowError, errorMessage: this.errorMessage, onEzChange: this.handleTextAreaChanged.bind(this) });
   }
   render() {
-    return (h(Host, null, h("div", { class: `editor-container ${this.showBorder ? 'bordered' : ''}` }, h("ez-rich-toolbar", { isPreviewMode: this.previewMode, showPreview: this.showPreview, showConfigs: this.showConfigs && this.enabled, showTextFormat: this.showTextFormat && this.enabled, showUndoRedo: this.showUndoRedo && this.enabled }), this.renderContent()), h("ez-link-builder", { ref: (el) => this.linkBuilderRef = el }), h("ez-simple-image-uploader", { ref: (el) => this.imageUploaderRef = el })));
+    return (h(Host, null, h("div", { class: 'editor-container bordered' }, h("ez-rich-toolbar", { isPreviewMode: this.previewMode, showPreview: this.showPreview, showConfigs: this.showConfigs && this.enabled, showTextFormat: this.showTextFormat && this.enabled, showUndoRedo: this.showUndoRedo && this.enabled }), this.renderContent()), h("ez-link-builder", { ref: (el) => this.linkBuilderRef = el }), h("ez-simple-image-uploader", { ref: (el) => this.imageUploaderRef = el })));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "errorMessage": ["observeErrorMessage"]
   }; }
 };
 EzRichText.style = ezRichTextCss;

package/dist/esm/ez-form.entry.js

@@ -565,7 +565,7 @@ const EzForm = class {
       }
     };
     this._fieldsProps = new Map();
-    this._singleColumn = true;
+    this._singleColumn = false;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;