@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

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 } from '@sankhyalabs/core';
+import { ElementIDUtils, MaskFormatter as CoreMaskFormatter } from '@sankhyalabs/core';
 export class EzClassicInput {
   constructor() {
     this._internalValueChange = false;
@@ -8,10 +8,13 @@ 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;
@@ -55,29 +58,112 @@ 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;
-      let inputValue = inputElement.value;
+      const inputValue = inputElement.value;
       if (this._maskFormatter) {
-        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);
+        const { formattedValue, cleanValue } = this.processInputWithMask(inputValue);
+        this.updateInputValue(inputElement, formattedValue, cleanValue);
       }
       else {
-        this._internalValueChange = true;
-        this.value = inputValue;
-        this.ezChange.emit(inputValue);
+        this.updateInputValueWithoutMask(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);
   }
@@ -104,20 +190,59 @@ export class EzClassicInput {
       ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
     }
   }
-  componentWillLoad() {
-    if (this.mask && !this._maskFormatter) {
-      this._maskFormatter = new MaskFormatter(this.mask);
-    }
+  buildPlaceholder() {
     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), 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))));
+    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))));
   }
   static get is() { return "ez-classic-input"; }
   static get encapsulation() { return "shadow"; }
@@ -166,7 +291,7 @@ export class EzClassicInput {
           "text": "Valor do input"
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": true
       },
       "label": {
         "type": "string",
@@ -202,6 +327,23 @@ 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,
@@ -217,7 +359,7 @@ export class EzClassicInput {
           "text": "Placeholder do input"
         },
         "attribute": "placeholder",
-        "reflect": false
+        "reflect": true
       },
       "enabled": {
         "type": "boolean",
@@ -255,6 +397,24 @@ 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,
@@ -272,6 +432,24 @@ 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,
@@ -576,6 +754,9 @@ export class EzClassicInput {
     return [{
         "propName": "value",
         "methodName": "syncValue"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
       }];
   }
 }

package/dist/collection/components/ez-classic-number-input/ez-classic-number-input.css

@@ -0,0 +1,16 @@
+:host {
+  /*@doc Define a largura maxima do componente.*/
+  --ez-classic-number-input__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-classic-number-input__max-width: 100%;
+
+  display: block;
+  width: 100%;
+}
+
+.number__input {
+  height: 100%;
+
+  min-width: var(--ez-classic-number-input__min-width);
+  max-width: var(--ez-classic-number-input__max-width);
+}