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

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

@@ -0,0 +1,412 @@
+import { h, Host } from "@stencil/core";
+import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from "@sankhyalabs/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
+export class EzTimeInput {
+  constructor() {
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.showSeconds = false;
+    this.mode = "regular";
+    this.canShowError = true;
+  }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.prepareValue(this._viewValue);
+        if ((this._textInput.value || '') !== this._viewValue) {
+          this._textInput.value = this._viewValue;
+        }
+      }
+    }
+  }
+  observeShowSeconds() {
+    if (this.showSeconds) {
+      this.prepareMask("##:##:##");
+    }
+    else {
+      this.prepareMask("##:##");
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      let newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        this._viewValue = newValueValidated == undefined ? "" : newValueValidated.toString();
+        this.prepareValue(this._viewValue);
+        if (this._viewValue && !TimeFormatter.validateTime(this._viewValue, this.showSeconds)) {
+          this.setError("Favor inserir um horário válido.");
+          newValueValidated = undefined;
+        }
+        else {
+          this.setError("");
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  prepareMask(mask) {
+    if (this._maskFormatter == undefined) {
+      this._maskFormatter = new MaskFormatter(mask);
+    }
+    else {
+      this._maskFormatter.mask = mask;
+    }
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  setError(msg) {
+    this.errorMessage = msg;
+    if (this._textInput && (msg === null || msg === void 0 ? void 0 : msg.trim())) {
+      this.ezCancelWaitingChange.emit();
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  getViewValue() {
+    return this._viewValue;
+  }
+  prepareValue(value) {
+    try {
+      this._viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
+      if (this._textInput && this._textInput.value !== this._viewValue) {
+        this._textInput.value = this._viewValue;
+      }
+    }
+    catch (e) {
+      this.setError(e.message);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus({ selectText }) {
+    this._textInput.setFocus({ selectText });
+  }
+  /**
+   * 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() !== "";
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleBlur() {
+    if (this._textInput) {
+      this._viewValue = this._textInput.value;
+      this.prepareValue(this._viewValue);
+      const value = NumberUtils.stringToNumber(this._viewValue.replace(/\D/g, ""));
+      this.value = ['string', 'number'].includes(typeof value) ? value : null;
+    }
+  }
+  handleInput() {
+    const textInputValue = this._textInput.value;
+    if (!['string', 'number'].includes(typeof textInputValue))
+      return;
+    const parsedNumber = NumberUtils.stringToNumber(textInputValue.replace(/\D/g, ""));
+    if (parsedNumber !== this.value) {
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  componentWillLoad() {
+    this.observeShowSeconds();
+    if (this.value) {
+      this.prepareValue(this.value.toString());
+    }
+    else if (this._viewValue) {
+      this.prepareValue(this._viewValue);
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+  }
+  static get is() { return "ez-time-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-time-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-time-input.css"]
+    };
+  }
+  static get assetsDirs() { return ["../assets"]; }
+  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": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "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
+      },
+      "showSeconds": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true considera segundos."
+        },
+        "attribute": "show-seconds",
+        "reflect": true,
+        "defaultValue": "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\""
+      },
+      "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"
+      }
+    };
+  }
+  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": "({ selectText }: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
+            }
+          },
+          "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 "_elem"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "showSeconds",
+        "methodName": "observeShowSeconds"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}

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

@@ -0,0 +1,167 @@
+:host {
+
+  /* Buttons */
+  /*@doc Contém o ícone de fechamento do toast.*/
+  --ez-toast__btn__close__image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg%22%3E<path d="M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z"/></svg>');
+
+  /* Container */
+  /*@doc Define a camada em que o container será exibido.*/
+  --ez-toast__container--z-index: var(--most-visible, 3);
+  /*@doc Define a cor de fundo do container.*/
+  --ez-toast__container--background-color: var(--color--secondary, #383c45);
+  /*@doc Define a posição esquerda do container.*/
+  --ez-toast__container--left: var(--space--large, 24px);
+  /*@doc Define a posição inferior do container.*/
+  --ez-toast__container--bottom: var(--space--large, 24px);
+  /*@doc Define a largura do container.*/
+  --ez-toast__container--width: 400px;
+
+  /* Icon */
+  /*@doc Define o espaçamento à esquerda do ícone.*/
+  --ez-toast__icon--padding-left: var(--space--small, 6px);
+}
+
+.toast__container {
+  /*private*/
+  position: fixed;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 6px;
+  align-items: center;
+  padding: 12px;
+  visibility: hidden;
+
+  /*public*/
+  width: var(--ez-toast__container--width);
+  left: var(--ez-toast__container--left);
+  bottom: var(--ez-toast__container--bottom);
+  z-index: var(--ez-toast__container--z-index);
+  background-color: var(--ez-toast__container--background-color);
+}
+
+.message__container {
+  /*private*/
+  text-shadow: 0 0 0 #353535, 0 0 1px transparent;
+  color: #FFFFFF;
+  font-size: 14px;
+  width: 90%;
+  overflow: hidden;
+  hyphens: auto;
+  height: auto;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+
+  /*public*/
+  font-family: var(--font-pattern, "Roboto");
+}
+
+.message__container--icon {
+  /*private*/
+  width: 80%;
+
+  /*public*/
+  padding-left: var(--ez-toast__icon--padding-left);
+}
+
+.btn-close {
+  /*private*/
+  margin-top: 3px;
+  display: flex;
+  justify-content: flex-end;
+  align-self: flex-start;
+  padding: 0;
+  outline: none;
+  width: 10%;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-close::after {
+  /*private*/
+  content: '';
+  display: flex;
+  background-color: #FFFFFF;
+  width: 12px;
+  height: 12px;
+
+  /*public*/
+  -webkit-mask-image: var(--ez-toast__btn__close__image);
+  mask-image: var(--ez-toast__btn__close__image);
+}
+
+.toast__container--opened {
+  /*private*/
+  animation: fadein 0.5s, fadeout 0.5s 3s;
+  visibility: visible;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    /*private*/
+    opacity: 0;
+
+    /*public*/
+    left: calc(var(--ez-toast__container--left) * -1);
+  }
+
+  to {
+    /*private*/
+    opacity: 1;
+
+    /*public*/
+    left: var(--ez-toast__container--left);
+  }
+}
+
+@keyframes fadein {
+  from {
+    /*private*/
+    opacity: 0;
+
+    /*public*/
+    left: calc(var(--ez-toast__container--left) * -1);
+  }
+
+  to {
+    /*private*/
+    opacity: 1;
+
+    /*public*/
+    left: var(--ez-toast__container--left);
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    /*private*/
+    opacity: 1;
+
+    /*public*/
+    left: var(--ez-toast__container--left);
+  }
+
+  to {
+    /*private*/
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    /*private*/
+    opacity: 1;
+
+    /*public*/
+    left: var(--ez-toast__container--left);
+  }
+
+  to {
+    /*private*/
+    bottom: 0;
+    opacity: 0;
+  }
+}