@sankhyalabs/ezui 7.2.0 → 7.3.0

package/dist/collection/components/ez-classic-input/ez-classic-input.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { MaskFormatter } from './utils/maskFormatter';
-import { ElementIDUtils, MaskFormatter as CoreMaskFormatter } from '@sankhyalabs/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
 export class EzClassicInput {
   constructor() {
     this._internalValueChange = false;
@@ -8,13 +8,10 @@ export class EzClassicInput {
     this.value = undefined;
     this.label = undefined;
     this.helpText = undefined;
-    this.errorMessage = undefined;
     this.placeholder = undefined;
     this.enabled = true;
     this.readonly = false;
-    this.required = false;
     this.name = undefined;
-    this.size = "default";
     this.minlength = undefined;
     this.maxlength = undefined;
     this.leftIconName = undefined;
@@ -58,112 +55,29 @@ export class EzClassicInput {
       this._inputElem.value = this.value || '';
     }
   }
-  async observeErrorMessage(newValue) {
-    if (newValue && newValue.trim() !== '') {
-      this.state = "error";
-      return;
-    }
-    this.state = "default";
-  }
   onInput(event) {
     try {
       const inputElement = event.target;
-      const inputValue = inputElement.value;
+      let inputValue = inputElement.value;
       if (this._maskFormatter) {
-        const { formattedValue, cleanValue } = this.processInputWithMask(inputValue);
-        this.updateInputValue(inputElement, formattedValue, cleanValue);
+        const formattedValue = this._maskFormatter.format(inputValue);
+        const cleanValue = this._maskFormatter.removeMask(formattedValue);
+        inputElement.value = formattedValue;
+        this._internalValueChange = true;
+        this.value = cleanValue;
+        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
+        this.ezChange.emit(emitValue);
       }
       else {
-        this.updateInputValueWithoutMask(inputValue);
+        this._internalValueChange = true;
+        this.value = inputValue;
+        this.ezChange.emit(inputValue);
       }
     }
     catch (error) {
       console.error("Error processing input event:", error);
     }
   }
-  processInputWithMask(inputValue) {
-    if (this.mask === "cgc_cpf") {
-      return this.processCgcCpfMask(inputValue);
-    }
-    else {
-      return this.processRegularMask(inputValue);
-    }
-  }
-  processCgcCpfMask(inputValue) {
-    const numericOnly = inputValue.replace(/\D/g, '');
-    if (numericOnly.length === 11 || numericOnly.length === 14) {
-      const maskToUse = numericOnly.length === 11
-        ? CoreMaskFormatter.DEFAULT_MASKS.cpf
-        : CoreMaskFormatter.DEFAULT_MASKS.cnpj;
-      this._maskFormatter = new MaskFormatter(maskToUse);
-      const formattedValue = this._maskFormatter.format(numericOnly);
-      return { formattedValue, cleanValue: numericOnly };
-    }
-    // Se não tem o tamanho correto, mantém apenas os números
-    return { formattedValue: numericOnly, cleanValue: numericOnly };
-  }
-  processRegularMask(inputValue) {
-    const formattedValue = this._maskFormatter.format(inputValue);
-    const cleanValue = this._maskFormatter.removeMask(formattedValue);
-    return { formattedValue, cleanValue };
-  }
-  isDataChar(char) {
-    return /[a-zA-Z0-9]/.test(char);
-  }
-  countDataCharsBefore(value, pos) {
-    let count = 0;
-    for (let i = 0; i < pos && i < value.length; i++) {
-      if (this.isDataChar(value[i]))
-        count++;
-    }
-    return count;
-  }
-  skipLeadingSeparators(value, pos) {
-    while (pos < value.length && !this.isDataChar(value[pos])) {
-      pos++;
-    }
-    return pos;
-  }
-  findPositionAfterDataChars(formattedValue, targetCount) {
-    let count = 0;
-    for (let i = 0; i <= formattedValue.length; i++) {
-      if (count === targetCount) {
-        return this.skipLeadingSeparators(formattedValue, i);
-      }
-      if (i < formattedValue.length && this.isDataChar(formattedValue[i])) {
-        count++;
-      }
-    }
-    return formattedValue.length;
-  }
-  getCursorPositionAfterFormat(rawValue, formattedValue, cursorPos) {
-    const dataCharCount = this.countDataCharsBefore(rawValue, cursorPos);
-    return this.findPositionAfterDataChars(formattedValue, dataCharCount);
-  }
-  restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd) {
-    const newStart = this.getCursorPositionAfterFormat(rawValue, formattedValue, savedStart);
-    const newEnd = savedStart === savedEnd
-      ? newStart
-      : this.getCursorPositionAfterFormat(rawValue, formattedValue, savedEnd);
-    inputElement.setSelectionRange(newStart, newEnd);
-  }
-  updateInputValue(inputElement, formattedValue, cleanValue) {
-    const rawValue = inputElement.value;
-    const savedStart = inputElement.selectionStart;
-    const savedEnd = inputElement.selectionEnd;
-    inputElement.value = formattedValue;
-    if (savedStart !== null && savedEnd !== null) {
-      this.restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd);
-    }
-    this._internalValueChange = true;
-    this.value = cleanValue;
-    this.ezChange.emit(this.emitMaskedValue ? formattedValue : cleanValue);
-  }
-  updateInputValueWithoutMask(inputValue) {
-    this._internalValueChange = true;
-    this.value = inputValue;
-    this.ezChange.emit(inputValue);
-  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -190,59 +104,20 @@ export class EzClassicInput {
       ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
     }
   }
-  buildPlaceholder() {
+  componentWillLoad() {
+    if (this.mask && !this._maskFormatter) {
+      this._maskFormatter = new MaskFormatter(this.mask);
+    }
     if (!this.placeholder && this._maskFormatter) {
       this.placeholder = this._maskFormatter.generatePlaceholder();
     }
   }
-  buildMaskFormatter() {
-    if (this.mask && (!this._maskFormatter || this.mask === 'cgc_cpf')) {
-      const maskToBuilder = this.getMaskToBuilder();
-      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
-    }
-  }
-  getMaskToBuilder() {
-    if (this.mask === "cgc_cpf") {
-      return this.getCGCCpfMask();
-    }
-    if (this.mask === 'phone') {
-      return this.getPhoneMask();
-    }
-    if (this.mask in CoreMaskFormatter.DEFAULT_MASKS) {
-      return CoreMaskFormatter.DEFAULT_MASKS[this.mask];
-    }
-    return this.mask;
-  }
-  getPhoneMask() {
-    if (this.value && this.value.length === 10) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
-    }
-    if (this.value && this.value.length === 11) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
-    }
-    return undefined;
-  }
-  getCGCCpfMask() {
-    var _a, _b;
-    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 11) {
-      return CoreMaskFormatter.DEFAULT_MASKS.cpf;
-    }
-    if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === 14) {
-      return CoreMaskFormatter.DEFAULT_MASKS.cnpj;
-    }
-    return undefined;
-  }
-  componentDidRender() {
-    this.buildMaskFormatter();
-    this.buildPlaceholder();
-    this.syncValue();
-  }
   componentDidLoad() {
     this.syncValue();
     this.addInfoId();
   }
   render() {
-    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label, this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "input-container " + (this.size ? `input-container--${this.size}` : ""), "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (h("span", { id: "input_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
+    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
   }
   static get is() { return "ez-classic-input"; }
   static get encapsulation() { return "shadow"; }
@@ -291,7 +166,7 @@ export class EzClassicInput {
           "text": "Valor do input"
         },
         "attribute": "value",
-        "reflect": true
+        "reflect": false
       },
       "label": {
         "type": "string",
@@ -327,23 +202,6 @@ export class EzClassicInput {
         "attribute": "help-text",
         "reflect": false
       },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Texto de erro exibido abaixo do input"
-        },
-        "attribute": "error-message",
-        "reflect": false
-      },
       "placeholder": {
         "type": "string",
         "mutable": true,
@@ -359,7 +217,7 @@ export class EzClassicInput {
           "text": "Placeholder do input"
         },
         "attribute": "placeholder",
-        "reflect": true
+        "reflect": false
       },
       "enabled": {
         "type": "boolean",
@@ -397,24 +255,6 @@ export class EzClassicInput {
         "reflect": false,
         "defaultValue": "false"
       },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Define se o input \u00E9 obrigat\u00F3rio (visualmente)"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -432,24 +272,6 @@ export class EzClassicInput {
         "attribute": "name",
         "reflect": false
       },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"small\" | \"xsmall\"",
-          "resolved": "\"default\" | \"small\" | \"xsmall\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Tamanho do input"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
       "minlength": {
         "type": "number",
         "mutable": false,
@@ -754,9 +576,6 @@ export class EzClassicInput {
     return [{
         "propName": "value",
         "methodName": "syncValue"
-      }, {
-        "propName": "errorMessage",
-        "methodName": "observeErrorMessage"
       }];
   }
 }

package/dist/collection/components/ez-classic-text-area/ez-classic-text-area.css

@@ -8,7 +8,6 @@
   color: var(--color--ocean-green-1000, #00281D);
   border: none;
   padding: 0;
-  width: 100%;
 
   /* public */
   --ez-classic-text-area--label-color: var(--color--ocean-green-1000, #00281D);

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

@@ -7,7 +7,6 @@ export class EzClassicTextArea {
     this.placeholder = '';
     this.value = '';
     this.helpText = undefined;
-    this.errorMessage = undefined;
     this.state = "default";
     this.enabled = true;
     this.readonly = false;
@@ -35,13 +34,6 @@ export class EzClassicTextArea {
   async setBlur() {
     this._textAreaElem.blur();
   }
-  async observeErrorMessage(newValue) {
-    if (newValue && newValue.trim() !== '') {
-      this.state = "error";
-      return;
-    }
-    this.state = "default";
-  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -74,7 +66,7 @@ export class EzClassicTextArea {
     this.addInfoId();
   }
   render() {
-    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (h("span", { id: "textArea_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
+    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
   }
   static get is() { return "ez-classic-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -179,23 +171,6 @@ export class EzClassicTextArea {
         "attribute": "help-text",
         "reflect": false
       },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido"
-        },
-        "attribute": "error-message",
-        "reflect": false
-      },
       "state": {
         "type": "string",
         "mutable": false,
@@ -501,10 +476,4 @@ export class EzClassicTextArea {
     };
   }
   static get elementRef() { return "_element"; }
-  static get watchers() {
-    return [{
-        "propName": "errorMessage",
-        "methodName": "observeErrorMessage"
-      }];
-  }
 }

package/dist/collection/components/ez-dropdown/ez-dropdown.css

@@ -3,7 +3,7 @@
   /*@doc Define a posição do componente.*/
   --ez-dropdown--z-index: var(--more-visible, 2);
   /*@doc Define o espaçamento interno do componente.*/
-  --ez-dropdown--padding: var(--space--16, 16px);
+  --ez-dropdown--padding: var(--space--small, 6px);
   /*@doc Define a sombra externa do componente.*/
   --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
   /*@doc Define o raio da borda do componente.*/
@@ -189,7 +189,7 @@
   transition: var(--ez-dropdown__item--transition);
 }
 
-.ez-dropdown__item:not(:has(.ez-dropdown__item-builder)):hover {
+.ez-dropdown__item:hover {
   /*public*/
   background-color: var(--ez-dropdown__item--background-color);
 }

package/dist/collection/components/ez-empty-card/ez-empty-card.js

@@ -16,7 +16,7 @@ export class EzEmptyCard {
     }
   }
   render() {
-    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}${typeof this.height == "number" ? 'px' : ''}` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}${typeof this.width == "number" ? 'px' : ''}` } : {}));
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
     return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
   }
   static get is() { return "ez-empty-card"; }
@@ -52,11 +52,11 @@ export class EzEmptyCard {
         "defaultValue": "\"default\""
       },
       "height": {
-        "type": "any",
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number | string",
-          "resolved": "number | string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
@@ -69,11 +69,11 @@ export class EzEmptyCard {
         "reflect": true
       },
       "width": {
-        "type": "any",
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number | string",
-          "resolved": "number | string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-form/ez-form.js

@@ -19,7 +19,6 @@ export class EzForm {
     };
     this._fieldsProps = new Map();
     this._singleColumn = false;
-    this._formLayout = undefined;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -27,7 +26,6 @@ export class EzForm {
     this.onlyStaticFields = false;
     this.useSearchField = true;
     this.elementFocusSearchField = undefined;
-    this.customUiBuilders = new Map();
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -85,7 +83,7 @@ export class EzForm {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, formLayout: this._formLayout, selectedRecord: this.dataUnit.getSelectedRecord(), customUiBuilders: this.customUiBuilders })));
+    return (h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   renderFieldColumn() {
     if (this._fieldSearch != undefined) {
@@ -169,20 +167,18 @@ export class EzForm {
     this._i18n = await initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
-    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CLASSIC_CASCADE;
-    this._formLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE;
   }
   async registerNotifyListeners(layoutFormConfig) {
     if (!layoutFormConfig)
       return;
     layoutFormConfig.onConfigChange((config) => {
-      if (config === FormLayout.CASCADE || config === FormLayout.CLASSIC_CASCADE) {
+      if (config === FormLayout.CASCADE) {
         this._singleColumn = true;
       }
       else {
         this._singleColumn = false;
       }
-      this._formLayout = config;
     });
   }
   componentDidRender() {
@@ -390,35 +386,13 @@ export class EzForm {
           "tags": [],
           "text": "Define uma ancoragem"
         }
-      },
-      "customUiBuilders": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "UiFieldBuilders",
-          "resolved": "Map<UserInterface, (field: IFormViewField, context?: IFieldBuilderContext) => HTMLElement>",
-          "references": {
-            "UiFieldBuilders": {
-              "location": "import",
-              "path": "../ez-form-view/fieldbuilder/FieldBuilder"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define construtores customizados para tipos de campos espec\u00EDficos"
-        },
-        "defaultValue": "new Map()"
       }
     };
   }
   static get states() {
     return {
       "_fieldsProps": {},
-      "_singleColumn": {},
-      "_formLayout": {}
+      "_singleColumn": {}
     };
   }
   static get events() {