@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.2

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

@@ -0,0 +1,583 @@
+import { ElementIDUtils, NumberUtils, StringUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import initI18n from '../../utils/i18n';
+export class EzClassicNumberInput {
+  constructor() {
+    this._focused = false;
+    this._changePending = false;
+    this._valuePromiseCallbacks = [];
+    this._value = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.required = false;
+    this.canShowError = true;
+    this.errorMessage = undefined;
+    this.allowNegative = true;
+    this.precision = undefined;
+    this.prettyPrecision = undefined;
+    this.mode = "regular";
+    this.size = "default";
+    this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /*
+    * Retorna uma promise com o valor da opção selecionada,
+    * que será resolvida quando o backend devolver este dado.
+    */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this.handleNewValue(newValue, oldValue);
+    }
+    this._changePending = false;
+  }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
+  handleNewValue(newValue, oldValue) {
+    const newValueValidated = this.validateValue(newValue);
+    const oldValueValidated = this.validateValue(oldValue);
+    if (newValueValidated === null) {
+      this._value = '';
+    }
+    if (newValueValidated === oldValueValidated) {
+      return;
+    }
+    const textValue = this.getTextValue(newValueValidated) || '';
+    const parsedNumber = this.getParsedNumber(textValue);
+    if ((this._value || '') !== textValue && (parsedNumber !== undefined || !this._focused)) {
+      this._value = textValue;
+      this._focused = false;
+      this.errorMessage = "";
+    }
+    const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+    this.ezChange.emit(valueEmitted);
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value == undefined)
+      return undefined;
+    let textValue = this.precision >= 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    return (this.precision === 0) ? StringUtils.replaceAll(textValue, ".", "") : textValue;
+  }
+  changeValue(newValue) {
+    this.errorMessage = "";
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
+    }
+    else {
+      this.setInputValue();
+      this.ezCancelWaitingChange.emit();
+    }
+  }
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    if (!this._changePending) {
+      return;
+    }
+    try {
+      const parsedNumber = this.getParsedNumber();
+      if (parsedNumber !== undefined && isNaN(parsedNumber)) {
+        this.setError(this.i18n("ez-classic-number-input.invalidNumber"));
+      }
+      else {
+        try {
+          this.changeValue(parsedNumber);
+        }
+        catch (e) {
+          this.setError(e.message);
+          return;
+        }
+      }
+    }
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
+    }
+  }
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this._changePending = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  getParsedNumber(value = this._textInput.value) {
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._value || '') !== textValue) {
+      this._value = textValue;
+      this._textInput.value = this._value;
+    }
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    let restrict = this.precision > 0 ? "0123456789,." : "0123456789";
+    if (this.allowNegative) {
+      restrict += '-';
+    }
+    return (h("ez-classic-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (elem) => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), enabled: this.enabled, errorMessage: this.errorMessage, size: this.size, value: this._value, required: this.required, onEzChange: (event) => event.stopPropagation() }));
+  }
+  static get is() { return "ez-classic-number-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-classic-number-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-classic-number-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false, o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "allowNegative": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false, o input n\u00E3o aceitar\u00E1 n\u00FAmeros negativos."
+        },
+        "attribute": "allow-negative",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "precision": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define quantas casas decimais ser\u00E3o exibidas. Caso haja mais casas haver\u00E1 arredondamento."
+        },
+        "attribute": "precision",
+        "reflect": false
+      },
+      "prettyPrecision": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define qual \u00E9 o m\u00EDnimo de casas depois da v\u00EDrgula.\nExemplo: 1,1 ser\u00E1 exibido como 1,1000 quando `prettyPrecision = 4`."
+        },
+        "attribute": "pretty-precision",
+        "reflect": false
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"slim\" | \"regular\"",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "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\""
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "* Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_value": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "ezStartChange",
+        "name": "ezStartChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao iniciar a altera\u00E7\u00E3o (digita\u00E7\u00E3o incompleta)."
+        },
+        "complexType": {
+          "original": "WaitingChange",
+          "resolved": "WaitingChange",
+          "references": {
+            "WaitingChange": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        }
+      }, {
+        "method": "ezCancelWaitingChange",
+        "name": "ezCancelWaitingChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando n\u00E3o foi poss\u00EDvel completar a altera\u00E7\u00E3o entre o evento ezStartChange e ezChange."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: OptionsSetFocus) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "OptionsSetFocus": {
+              "location": "import",
+              "path": "../ez-classic-input/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": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      },
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<number>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<number>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_elem"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "observeLabel"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }, {
+        "propName": "precision",
+        "methodName": "observePrecision"
+      }, {
+        "propName": "prettyPrecision",
+        "methodName": "observePrecision"
+      }];
+  }
+}

package/dist/collection/components/ez-classic-search/ez-classic-search.css

@@ -0,0 +1,126 @@
+:host {
+  /* dimensions */
+  /*@doc Define altura do input.*/
+  --ez-classic-search--height: 42px;
+  /*@doc Define largura do input.*/
+  --ez-classic-search--width: 100%;
+  /*@doc Define largura do slot do ícone do input.*/
+  --ez-classic-search__icon--width: 48px;
+
+  /* general */
+  /*@doc Define o raio da borda do input.*/
+  --ez-classic-search--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o raio da borda do input quando pequeno.*/
+  --ez-classic-search--border-radius-small: var(--border--radius-small, 6px);
+  /*@doc Define o tamanho da fonte dentro do input.*/
+  --ez-classic-search--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte dentro do input.*/
+  --ez-classic-search--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte dentro do input quando pesada.*/
+  --ez-classic-search--font-weight--large: var(--text-weight--large, 500);
+  /*@doc Define o peso da fonte dentro do input quando média.*/
+  --ez-classic-search--font-weight--medium: var(--text-weight--medium, 400);
+  /*@doc Define a cor de fundo da lista de opções.*/
+  --ez-classic-search--background-color--xlight: var(--background--xlight, #fff);
+  /*@doc Define a cor de fundo dos itens da lista de opções.*/
+  --ez-classic-search--background-medium: var(--background--medium, #f0f3f7);
+  /*@doc Define a altura da linha do texto dentro do input.*/
+  --ez-classic-search--line-height: calc(var(--text--medium, 14px) + 4px);
+
+  /* input */
+  /*@doc Define a cor de fundo do input.*/
+  --ez-classic-search__input--background-color: var(--background--medium, #e0e0e0);
+  /*@doc Define o estilo da borda do input.*/
+  --ez-classic-search__input--border: var(--border--medium, 2px solid);
+  /*@doc Define a cor da borda do input.*/
+  --ez-classic-search__input--border-color: var(--ez-classic-search__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  /*@doc Define a cor da borda do input quando focado.*/
+  --ez-classic-search__input--focus--border-color: var(--color--primary, #008561);
+  /*@doc Define a cor de fundo do input quando desabilitado.*/
+  --ez-classic-search__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor do texto dentro do input quando desabilitado.*/
+  --ez-classic-search__input--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda do input quando com erro.*/
+  --ez-classic-search__input--error--border-color: #CC2936;
+
+  /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
+  --ez-classic-search__btn--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
+  --ez-classic-search__btn-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
+  --ez-classic-search__btn-hover--color: var(--color--primary, #4e4e4e);
+
+  /* label */
+  /*@doc Define a cor do label.*/
+  --ez-classic-search__label--color: var(--title--primary, #2B3A54);
+
+  /* espaçamento */
+  /*@doc Define um espaçamento mediano entre elementos do componente.*/
+  --ez-classic-search--space--medium: var(--space--medium, 12px);
+  /*@doc Define um espaçamento pequeno entre elementos do componente.*/
+  --ez-classic-search--space--small: var(--space--small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
+  /*public*/
+  width: var(--ez-classic-search--width);
+}
+
+ez-icon {
+  --ez-icon--color: inherit;
+
+  /*public*/
+  font-weight: var(--text-weight--large, 600);
+}
+
+.suppressed-search-input{
+  /*public*/
+  --ez-classic-input__input--border-color: var(--color--strokes, #dce0e8);
+  --ez-classic-input__input--disabled--background-color: var(--background--xlight, #fff);
+  --ez-classic-input__input--disabled--color: var(--title--primary, #2B3A54);
+}
+
+.btn {
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  /*public*/
+  color: var(--ez-classic-search__btn--color);
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+
+  /*public*/
+  color: var(--ez-classic-search__btn-disabled--color);
+}
+
+.btn:disabled:hover {
+  cursor: not-allowed;
+
+  /*public*/
+  color: var(--ez-classic-search__btn-disabled--color);
+}
+
+.btn:hover {
+  /*public*/
+  color: var(--ez-classic-search__btn-hover--color);
+}
+
+.btn__close {
+  visibility: hidden;
+}
+
+ez-classic-input:hover .btn__close, ez-classic-input:focus .btn__close {
+  visibility: visible;
+}