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

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

@@ -0,0 +1,209 @@
+import { h, Host, forceUpdate } from '@stencil/core';
+import { ElementIDUtils } from "@sankhyalabs/core";
+export class EzToast {
+  constructor() {
+    this._nextMessages = [];
+    this._currentMessageInfo = { message: "", fadeTime: undefined, useIcon: undefined };
+    this._toastOpenedClass = "toast__container--opened";
+    this._lastTimeOut = undefined;
+    this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
+    this.message = undefined;
+    this.fadeTime = 5000;
+    this.useIcon = false;
+    this.canClose = true;
+  }
+  /**
+   * Exibe o ez-toast.
+   */
+  async show(message, fadeTime, useIcon, canClose) {
+    const isClosable = (canClose !== undefined) ? canClose : this.canClose;
+    return new Promise(resolve => {
+      var _a;
+      if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains(this._toastOpenedClass)) {
+        if (this.isRepeatedMessage(message)) {
+          return;
+        }
+        this._nextMessages.push({ message, fadeTime, useIcon, canClose: isClosable, callBack: resolve });
+      }
+      else {
+        this._currentMessageInfo.message = message || this.message;
+        this._currentMessageInfo.fadeTime = fadeTime || this.fadeTime;
+        this._currentMessageInfo.useIcon = useIcon || this.useIcon;
+        this._currentMessageInfo.callBack = resolve;
+        if (isClosable) {
+          this._currentMessageInfo.canClose = isClosable;
+        }
+        forceUpdate(this);
+        this.displayToast();
+        this._lastTimeOut = setTimeout(() => {
+          this.hideToast();
+        }, this._currentMessageInfo.fadeTime + 400);
+      }
+    });
+  }
+  hideToast() {
+    this.makeToastInvisible();
+    if (this._nextMessages.length > 0) {
+      if (this._currentMessageInfo.callBack) {
+        this._currentMessageInfo.callBack(true);
+      }
+      setTimeout(() => {
+        let newMessageInfo = this._nextMessages.shift();
+        this.show(newMessageInfo.message, newMessageInfo.fadeTime, newMessageInfo.useIcon);
+      });
+    }
+    if (this._currentMessageInfo.callBack) {
+      this._currentMessageInfo.callBack(true);
+    }
+  }
+  isRepeatedMessage(message) {
+    var _a, _b;
+    return ((_a = this._nextMessages) === null || _a === void 0 ? void 0 : _a.some((info) => info.message === message))
+      || ((_b = this._currentMessageInfo) === null || _b === void 0 ? void 0 : _b.message) === message;
+  }
+  makeToastInvisible() {
+    this.container.classList.remove(this._toastOpenedClass);
+    this.container.style.animation = `none`;
+    if (this._lastTimeOut)
+      clearTimeout(this._lastTimeOut);
+  }
+  displayToast() {
+    this.container.classList.add(this._toastOpenedClass);
+    this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
+  }
+  buildDataElementId() {
+    var _a, _b;
+    const dataElementId = ElementIDUtils.addIDInfo(this._element);
+    const attribute = ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME;
+    (_a = this._elemBtnClose) === null || _a === void 0 ? void 0 : _a.setAttribute(attribute, `${dataElementId}_buttonClose`);
+    (_b = this._elemText) === null || _b === void 0 ? void 0 : _b.setAttribute(attribute, `${dataElementId}_title`);
+  }
+  componentDidLoad() {
+    this.buildDataElementId();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => this.container = el, class: "toast__container" }, this._currentMessageInfo.useIcon &&
+      h("slot", { name: "icon" }), h("div", { lang: this._lang, ref: (el) => this._elemText = el, class: this._currentMessageInfo.useIcon ? "message__container message__container--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }), this._currentMessageInfo.canClose &&
+      h("button", { class: "btn-close", onClick: () => { this.hideToast(); }, ref: (el) => this._elemBtnClose = el }))));
+  }
+  static get is() { return "ez-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-toast.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mensagem a ser exibida no componente."
+        },
+        "attribute": "message",
+        "reflect": false
+      },
+      "fadeTime": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tempo de exibi\u00E7\u00E3o em milissegundos."
+        },
+        "attribute": "fade-time",
+        "reflect": false,
+        "defaultValue": "5000"
+      },
+      "useIcon": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true permite a utiliza\u00E7\u00E3o do slot de \u00EDcone."
+        },
+        "attribute": "use-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "canClose": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false, o usu\u00E1rio n\u00E3o consegue fechar."
+        },
+        "attribute": "can-close",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "(message: string, fadeTime: number, useIcon: boolean, canClose?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe o ez-toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,159 @@
+:host {
+  /* Geral */
+  /*@doc Define o arredondamento dos retangulos.*/
+  --ez-tree--border-radius: var(--border--radius-small, 8px);
+  /*@doc Define a largura da identação de cada nível.*/
+  --ez-tree--padding-inline-start: 20px;
+  /*@doc Define a margem do componente.*/
+  --ez-tree--margin: var(--space--extra-small, 3px);
+  /*@doc Define a margem da direita do componente.*/
+  --ez-tree--margin-right: calc(var(--space--small, 6px) + 2px);
+  
+  /* Fontes e cor de ícones*/
+  /*@doc Define a família da fonte.*/
+  --ez-tree--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho da fonte.*/
+  --ez-tree--font-size: var(--text--medium, 14px);
+  /*@doc Define o peso da fonte.*/
+  --ez-tree--selected--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o peso da fonte.*/
+  --ez-tree--font-weight: var(--text-weight--small, 400);
+  /*@doc Define a cor da fonte e do ícone.*/
+  --ez-tree--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor da fonte e do ícone quando selecionado.*/
+  --ez-tree--selected--color: var(--color--primary, #008561);
+  /*@doc Define a cor da fonte e do ícone quando desabilitado.*/
+  --ez-tree--disabled--color: var(--text--disable, #AFB6C0);
+
+  /* Item */
+  /*@doc Define a altura de cada item.*/
+  --ez-tree__tree-item--height: var(--size-medium, 18px);
+  /*@doc Define o espaçamento interno do item.*/
+  --ez-tree__tree-item--padding: var(--space--small, 6px);
+  /*@doc Define a cor de background.*/
+  --ez-tree__tree-item--background-color: var(--background--xlight, #FFFFFF);
+  /*@doc Define a cor de background quando selecionado.*/
+  --ez-tree__tree-item--selected--background-color: var(--color--primary-300, #E2F4EF);
+  /*@doc Define a cor de background com o mouse sobre o item.*/
+  --ez-tree__tree-item--hover--background-color: var(--background--medium, #F0F3F7);
+  /*@doc Define a cor de background quando deabilitado.*/
+  --ez-tree__tree-item--disabled--background-color: var(--ez-tree__tree-Item--background-color);
+  
+  /* Box do ícone */
+  /*@doc Define a altura do box do ícone.*/
+  --ez-tree__item-icon-box--height: var(--ez-tree__tree-item--height);
+  /*@doc Define a largura do box do ícone.*/
+  --ez-tree__item-icon-box--width: var(--size-medium, 18px);
+  /*@doc Define o espaçamento interno do ícone.*/
+  --ez-tree__item-icon-box--padding: var(--ez-tree__tree-item--padding);
+
+  /*private*/
+  display: flex;
+  flex-direction: column;
+
+  /*public*/
+  margin: 0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);
+  outline: none;
+}
+
+ul {
+  /*private*/
+  list-style-type: none;
+  margin: 0;
+
+  /*public*/
+  padding-inline-start: var(--ez-tree--padding-inline-start);
+}
+
+ul.first-level {
+  /*private*/
+  padding-inline-start: 0;
+}
+
+.tree-item {
+  /*private*/
+  display: flex;
+  align-items: center;
+  
+  /*public*/
+  margin-top: var(--ez-tree--margin);
+  margin-right: var(--ez-tree--margin-right);
+  border-radius: var(--ez-tree--border-radius);
+  height: var(--ez-tree__tree-item--height);
+  padding: var(--ez-tree__tree-item--padding);
+}
+
+.tree-item[selected] {
+  /*public*/
+  background-color: var(--ez-tree__tree-item--selected--background-color);
+}
+
+.tree-item:hover {
+  /*public*/
+  background-color: var(--ez-tree__tree-item--hover--background-color);
+}
+
+.tree-item[disabled], .tree-item[disabled]:hover {
+  /*public*/
+  background-color: var(--ez-tree__tree-item--disabled--background-color);
+}
+
+.item-icon-box {
+  /*private*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /*public*/
+  width: var(--ez-tree__item-icon-box--width);
+  height: var(--ez-tree__item-icon-box--height);
+  padding: var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0;
+}
+
+.item-icon {
+  /*public*/
+  --ez-icon--color: var(--ez-tree--color);
+}
+
+.item-icon:hover {
+  /*private*/
+  cursor: pointer;
+}
+
+.tree-item[selected] .item-icon {
+  /*public*/
+  --ez-icon--color: var(--ez-tree--selected--color);
+}
+
+.tree-item[disabled] .item-icon {
+  /*private*/
+  cursor: unset;
+
+  /*public*/
+  --ez-icon--color: var(--ez-tree--disabled--color);
+}
+
+.item-label {
+  /*private*/
+  cursor: inherit;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  
+  /*public*/
+  font-family: var(--ez-tree--font-family);
+  font-size: var(--ez-tree--font-size);
+  font-weight: var(--ez-tree--font-weight);
+  color: var(--ez-tree--color);
+}
+
+.tree-item[selected] .item-label {
+  /*public*/
+  color: var(--ez-tree--selected--color);
+  font-weight: var(--ez-tree--selected--font-weight);
+}
+
+.tree-item[disabled] .item-label {
+  /*public*/
+  color: var(--ez-tree--disabled--color);
+}