@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,491 @@
+import { h, Host } from "@stencil/core";
+import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
+export class EzTextInput {
+  constructor() {
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.mask = undefined;
+    this.canShowError = true;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.noBorder = false;
+  }
+  observeErrorMessage() {
+    if (this._inputElem) {
+      this.isInvalid().then((hasError) => {
+        var _a, _b;
+        if (hasError) {
+          this._inputElem.classList.add("hasError");
+          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+        }
+        else {
+          this._inputElem.classList.remove("hasError");
+          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+        }
+      });
+    }
+  }
+  observeMask() {
+    if (this.mask) {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new MaskFormatter(this.mask);
+      }
+      else {
+        this._maskFormatter.mask = this.mask;
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._inputElem) {
+      if (newValue != oldValue) {
+        this._inputElem.value = this.value || "";
+        this.handleChange();
+        this.adjustFloatingLabel();
+        if (!this.isSlaveMode()) {
+          this.errorMessage = "";
+          this.ezChange.emit(this.value);
+        }
+      }
+    }
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  adjustFloatingLabel() {
+    if (this.label && this._labelElem) {
+      if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("input__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("input__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  isSlaveMode() {
+    var _a, _b;
+    return ((_b = (_a = this._hostElement) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.slaveMode) === "true";
+  }
+  adjustColorContentSlot(color = "") {
+    if (this._contentLeftSlot) {
+      this._contentLeftSlot.style.color = color;
+    }
+  }
+  adjustBorderInput() {
+    if (this.noBorder) {
+      this._inputElem.classList.add("input__slim--noborder");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    const { selectText } = options || {};
+    if (selectText)
+      this._inputElem.select();
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    const value = this._inputElem.value;
+    if (value && this._maskFormatter) {
+      try {
+        this._inputElem.value = this._maskFormatter.format(value);
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
+    }
+    this.controlChangeValue();
+    this.adjustFloatingLabel();
+    this.adjustColorContentSlot();
+  }
+  isValidValue(value) {
+    if (this.restrict) {
+      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
+    }
+    return true;
+  }
+  controlChangeValue() {
+    if (this._inputElem && (this.value || '') !== this._inputElem.value) {
+      this.value = this._inputElem.value;
+    }
+  }
+  handleChange() {
+    if (!this._inputElem) {
+      return;
+    }
+    const value = this._inputElem.value;
+    if (this.isValidValue(value)) {
+      this._lastValidValue = value;
+    }
+    else {
+      this._inputElem.value = this._lastValidValue == undefined ? "" : this._lastValidValue;
+    }
+    this.controlChangeValue();
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--ez-text-input__icon--width)";
+      content.style.height = this.mode != "slim" ? "var(--ez-text-input--height)" : "var(--ez-text-input--height--slim)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
+        this._inputElem.classList.add("icon--left");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--left");
+        }
+        this._contentLeftSlot = content;
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
+        this._inputElem.classList.add("icon--right");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--right");
+        }
+      }
+      slot.name && ElementIDUtils.addIDInfo(content, slot.name);
+    }
+    this.observeErrorMessage();
+  }
+  doFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
+      this._labelElem.classList.add("input__label--floated");
+    }
+    this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.observeErrorMessage();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+  }
+  componentWillLoad() {
+    this.observeMask();
+    if (this.value) {
+      if (this._maskFormatter) {
+        try {
+          this.value = this._maskFormatter.format(this.value);
+        }
+        catch (e) {
+          this.errorMessage = e.message;
+        }
+      }
+      if (!this.isValidValue(this.value)) {
+        this._lastValidValue = "";
+        this.value = "";
+      }
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
+      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+  }
+  static get is() { return "ez-text-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-text-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-text-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": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "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": 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
+      },
+      "mask": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aplica uma m\u00E1scara no conte\u00FAdo conforme o padr\u00E3o estabelecido"
+        },
+        "attribute": "mask",
+        "reflect": 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"
+      },
+      "restrict": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Restringe o que o usu\u00E1rio pode digitar."
+        },
+        "attribute": "restrict",
+        "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\""
+      },
+      "noBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo n\u00E3o ter\u00E1 bordas."
+        },
+        "attribute": "no-border",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  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": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "local"
+            }
+          },
+          "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": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "mask",
+        "methodName": "observeMask"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}

package/dist/collection/components/ez-time-input/ez-time-input.css

@@ -0,0 +1,14 @@
+:host {
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
+}
+
+.time__input {
+  height: 100%;
+}