@sankhyalabs/ezui 6.2.1 → 6.3.0-dev.2

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

@@ -0,0 +1,547 @@
+import { Host, h } from '@stencil/core';
+import { MaskFormatter } from './utils/maskFormatter';
+import { ElementIDUtils } from '@sankhyalabs/core';
+export class EzClassicInput {
+  constructor() {
+    this.type = 'text';
+    this.value = undefined;
+    this.label = undefined;
+    this.helpText = undefined;
+    this.placeholder = undefined;
+    this.enabled = true;
+    this.readonly = false;
+    this.name = undefined;
+    this.minlength = undefined;
+    this.maxlength = undefined;
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.rightIconTooltip = undefined;
+    this.leftIconTooltip = undefined;
+    this.state = "default";
+    this.leftIconClickable = false;
+    this.rightIconClickable = false;
+    this.mask = undefined;
+    this.emitMaskedValue = false;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(option) {
+    if (option === null || option === void 0 ? void 0 : option.selectText) {
+      this._inputElem.select();
+    }
+    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
+      this._inputElem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    this._inputElem.focus({ preventScroll: true });
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  onInput(event) {
+    try {
+      const inputElement = event.target;
+      let inputValue = inputElement.value;
+      if (this._maskFormatter) {
+        const formattedValue = this._maskFormatter.format(inputValue);
+        const cleanValue = this._maskFormatter.removeMask(formattedValue);
+        inputElement.value = formattedValue;
+        this.value = cleanValue;
+        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
+        this.ezChange.emit(emitValue);
+      }
+      else {
+        this.value = inputValue;
+        this.ezChange.emit(inputValue);
+      }
+    }
+    catch (error) {
+      console.error("Error processing input event:", error);
+    }
+  }
+  onBlur() {
+    this.ezBlur.emit(this.value);
+  }
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
+      this.setFocus({ preventScroll: true });
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
+    }
+  }
+  componentWillLoad() {
+    if (this.mask && !this._maskFormatter) {
+      this._maskFormatter = new MaskFormatter(this.mask);
+    }
+    if (!this.placeholder && this._maskFormatter) {
+      this.placeholder = this._maskFormatter.generatePlaceholder();
+    }
+  }
+  componentDidLoad() {
+    if (this.value && this._maskFormatter && this._inputElem) {
+      const formattedValue = this._maskFormatter.format(this.value);
+      this._inputElem.value = formattedValue;
+    }
+    else {
+      this._inputElem.value = this.value || '';
+    }
+    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: this.onInput.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-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-classic-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-classic-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tipo do input (ex: text, password, email, etc)"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Valor do input"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto do label exibido acima do input"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "helpText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto de ajuda exibido abaixo do input"
+        },
+        "attribute": "help-text",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder do input"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o input est\u00E1 habilitado"
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o input \u00E9 somente leitura"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do input"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "minlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho m\u00EDnimo do valor"
+        },
+        "attribute": "minlength",
+        "reflect": false
+      },
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho m\u00E1ximo do valor"
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      },
+      "leftIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone \u00E0 esquerda"
+        },
+        "attribute": "left-icon-name",
+        "reflect": false
+      },
+      "rightIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone \u00E0 direita"
+        },
+        "attribute": "right-icon-name",
+        "reflect": false
+      },
+      "rightIconTooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do \u00EDcone \u00E0 direita (tooltip)"
+        },
+        "attribute": "right-icon-tooltip",
+        "reflect": false
+      },
+      "leftIconTooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do \u00EDcone \u00E0 esquerda (tooltip)"
+        },
+        "attribute": "left-icon-tooltip",
+        "reflect": false
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Estado visual do input: default, error, success ou warning"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "leftIconClickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o \u00EDcone da esquerda \u00E9 clic\u00E1vel"
+        },
+        "attribute": "left-icon-clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rightIconClickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o \u00EDcone da direita \u00E9 clic\u00E1vel"
+        },
+        "attribute": "right-icon-clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mask": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Aplica uma m\u00E1scara no conte\u00FAdo conforme o padr\u00E3o estabelecido. \nPara mais informa\u00E7\u00F5es acesse: \nhttps://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/"
+        },
+        "attribute": "mask",
+        "reflect": false
+      },
+      "emitMaskedValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o valor emitido pelo evento ezChange deve conter a m\u00E1scara aplicada (padr\u00E3o: false)"
+        },
+        "attribute": "emit-masked-value",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando o valor do input muda."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezBlur",
+        "name": "ezBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando o input perde o foco."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "iconClick",
+        "name": "iconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando um \u00EDcone \u00E9 clicado.\nPayload: { icon: \"left\" | \"right\" }"
+        },
+        "complexType": {
+          "original": "{ icon: \"left\" | \"right\" }",
+          "resolved": "{ icon: \"left\" | \"right\"; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(option?: OptionsSetFocus) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "OptionsSetFocus": {
+              "location": "import",
+              "path": "./interfaces/optionsSetFocus"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1 @@
+export {};