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

package/dist/collection/components/ez-dropdown/structure/DropdownItem.js

@@ -0,0 +1,30 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
+  return (h("div", { class: "ez-dropdown__item-wrapper", title: item.label }, getContentLeft(item, hasIcon), h("span", { class: "ez-dropdown__item-label" }, item.label), getContentRight(item, hasChildren, isLockedLevels, onSubActionClick)));
+};
+const getContentLeft = (item, hasIcon) => {
+  if (item == undefined || !hasIcon) {
+    return;
+  }
+  if (item.iconName) {
+    return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-left", iconName: item.iconName, size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownItemIcon` })));
+  }
+  return (h("ez-icon", { class: "ez-dropdown__icon-left ez-dropdown__hidden", size: "medium" }));
+};
+const getContentRight = (item, hasChildren, isLockedLevels, onClick) => {
+  var _a, _b;
+  if (item == undefined) {
+    return;
+  }
+  if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.subAction != undefined && Object.keys(item.subAction).length > 0) {
+    return (h("span", Object.assign({ onClick: () => onClick(item), title: item.subAction.label, class: `ez-dropdown__link ez-dropdown__link--${item.subAction.type || "primary"}` }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.subAction.id}_ezDropdownItemSubAction` }), item.subAction.label));
+  }
+  if (isLockedLevels || !hasChildren) {
+    return;
+  }
+  if (((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+    return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-right", iconName: "chevron-right", size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownIconOpenChildren` })));
+  }
+  return (h("ez-icon", { class: "ez-dropdown__icon-right ez-dropdown__hidden", size: "medium" }));
+};

package/dist/collection/components/ez-dropdown/structure/SubmenuControl.js

@@ -0,0 +1,241 @@
+export class SubmenuControl {
+  constructor() { }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Método responsável por fechar submenus abertos e abrir o submenu desejado.
+   * @param menu - Item de menu selecionado para abrir o submenu.
+   */
+  show(menu) {
+    const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
+    if (menu == undefined || submenu == undefined) {
+      return;
+    }
+    submenu.classList.remove("ez-dropdown__submenu--hide");
+    this.setPosition(menu);
+    this.setScrollContainer(menu);
+    this.setMaxHeight(submenu);
+  }
+  /**
+   * Método responsável por fechar um determinado submenu aberto.
+   * @param menu - Item de menu selecionado com o submenu aberto.
+   */
+  hide(menu) {
+    if (menu == undefined) {
+      return;
+    }
+    const submenuSelector = ".ez-dropdown__submenu:not(.ez-dropdown__submenu--hide)";
+    const submenuElement = menu.querySelector(submenuSelector);
+    this.reset(submenuElement);
+    this.hideChild(submenuElement);
+  }
+  /**
+   * Método responsável por fechar todos os submenus filhos de um determinado submenu.
+   * @param submenu - Elemento HTML do submenu pai.
+   */
+  hideChild(submenu) {
+    if (submenu == undefined) {
+      return;
+    }
+    submenu.querySelectorAll(".ez-dropdown__submenu")
+      .forEach((child) => {
+      this.reset(child);
+    });
+  }
+  /**
+   * Método responsável por posicionar o submenu na tela.
+   * @param menu - Item da lista selecionado para abrir o submenu.
+   */
+  setPosition(menu) {
+    const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
+    const dropdown = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown");
+    if (submenu == undefined || dropdown == undefined) {
+      return;
+    }
+    submenu.style.top = this.getPositionTop(menu);
+    submenu.style.left = this.getPositionRight(dropdown);
+    const bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
+    const docWidth = document.body.clientWidth;
+    if ((bounding === null || bounding === void 0 ? void 0 : bounding.right) > docWidth) {
+      this.updatePosition(dropdown, submenu);
+    }
+  }
+  /**
+   * Método responsável por controlar a altura máxima do dropdown.
+   * @param element - Elemento HTML pai do dropdown que será renderizado.
+   */
+  setMaxHeight(element) {
+    var _a;
+    const parentElement = (element === null || element === void 0 ? void 0 : element.shadowRoot) || element;
+    const dropdown = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".ez-dropdown");
+    const docHeight = document.body.clientHeight;
+    let submenu;
+    let bounding;
+    if ((parentElement === null || parentElement === void 0 ? void 0 : parentElement["tagName"]) != undefined) {
+      submenu = parentElement;
+      bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
+    }
+    else {
+      bounding = dropdown === null || dropdown === void 0 ? void 0 : dropdown.getBoundingClientRect();
+    }
+    if (dropdown == undefined || bounding == undefined) {
+      return;
+    }
+    /**
+     * Menu aberto irá ultrapassar a altura da página?
+     */
+    if ((bounding.y + bounding.height) > docHeight) {
+      /**
+       * Menu aberto é um submenu?
+       * Sim: realiza o calculo com base na altura do menu pai
+       * Não: recalcula a altura do menu para atualizar a barra de rolagem
+       */
+      if (submenu != undefined) {
+        const dropdownParent = submenu.closest(".ez-dropdown");
+        const boundingParent = dropdownParent === null || dropdownParent === void 0 ? void 0 : dropdownParent.getBoundingClientRect();
+        const marginTop = parseFloat(((_a = getComputedStyle(submenu)) === null || _a === void 0 ? void 0 : _a.marginTop) || "0");
+        if (dropdownParent == undefined || boundingParent == undefined) {
+          return;
+        }
+        /**
+         * Submenu aberto ao ser reposicionado ficará acima da altura do menu pai?
+         * Sim: posiciona o submenu na altura do menu pai e recalcula a sua altura para atualizar a barra de rolagem
+         * Não: posiciona o submenu entre a altura do menu pai e o rodapé da página
+         */
+        if ((boundingParent.y + bounding.height) > docHeight) {
+          submenu.style.top = (boundingParent.y - marginTop) + "px";
+          dropdown.style.maxHeight = (docHeight - boundingParent.y) + "px";
+        }
+        else {
+          submenu.style.top = (docHeight - bounding.height - marginTop) + "px";
+        }
+      }
+      else {
+        let maxHeight = docHeight - bounding.y;
+        if (maxHeight < 0) {
+          maxHeight = bounding.height - docHeight;
+        }
+        dropdown.style.maxHeight = maxHeight + "px";
+      }
+    }
+    this.setSpacerContainer(dropdown);
+  }
+  /**
+   * Método responsável por atribuir a classe de espaçamento entre o conteúdo e o scroll.
+   * @param dropdown - Elemento HTML pai do container que receberá a classe.
+   */
+  setSpacerContainer(dropdown) {
+    const container = dropdown === null || dropdown === void 0 ? void 0 : dropdown.querySelector(".ez-dropdown__container");
+    if (container == undefined) {
+      return;
+    }
+    if (container.scrollHeight > container.clientHeight) {
+      container.classList.add("ez-dropdown__container--spacer");
+    }
+    else {
+      container.classList.remove("ez-dropdown__container--spacer");
+    }
+  }
+  /**
+   * Método responsável por resetar um determinado submenu aberto.
+   * @param submenu - Elemento HTML do submenu que será resetado.
+   */
+  reset(submenu) {
+    if (submenu == undefined) {
+      return;
+    }
+    submenu.classList.add("ez-dropdown__submenu--hide");
+    submenu.style.left = "";
+    submenu.style.top = "";
+    const dropdown = submenu.querySelector(".ez-dropdown");
+    this.resetDropdown(dropdown);
+  }
+  /**
+   * Método responsável por resetar um determinado dropdown renderizado.
+   * @param dropdown - Elemento HTML do dropdown que será resetado.
+   */
+  resetDropdown(dropdown) {
+    if (dropdown == undefined) {
+      return;
+    }
+    dropdown.style.maxHeight = "";
+    this.setSpacerContainer(dropdown);
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  /**
+   * Método responsável por controlar o scroll do container do submenu aberto.
+   * @param menu - Item da lista selecionado para abrir o submenu.
+   */
+  setScrollContainer(menu) {
+    const container = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown__container");
+    if (container == undefined) {
+      return;
+    }
+    container.onscroll = this.onScrollContainer.bind(this);
+  }
+  /**
+   * Método responsável por fechar os submenus filhos ao movimentar o scroll.
+   * @param event - Evento de scroll disparado pelo Elemento HTML pai.
+   */
+  onScrollContainer(event) {
+    const target = event === null || event === void 0 ? void 0 : event.target;
+    this.hideChild(target);
+  }
+  /**
+   * Método responsável por retornar a posição superior (top) de um elemento HTML na tela.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição superior (top) na tela.
+   * @returns Valor da posição superior (top) de um determinado elemento HTML.
+   */
+  getPositionTop(hostElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return;
+    }
+    return boundingHost.y + "px";
+  }
+  /**
+   * Método responsável por retornar a posição direita (right) de um elemento HTML na tela.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição direita (right) na tela.
+   * @returns Valor da posição direita (right) de um determinado elemento HTML.
+   */
+  getPositionRight(hostElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return;
+    }
+    return (boundingHost.x + boundingHost.width) + "px";
+  }
+  /**
+   * Método responsável por retornar a posição esquerda (left) de um elemento HTML desconsiderando a largura de outro elemento HTML.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição esquerda (left) na tela.
+   * @param targetElement - Elemento HTML que será capturado o valor de sua largura (width).
+   * @returns Valor da posição esquerda (left) de um determinado elemento HTML desconsiderando a largura de outro elemento HTML.
+   */
+  getPositionLeft(hostElement, targetElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
+    if (boundingHost == undefined || boundingTarget == undefined) {
+      return;
+    }
+    return (boundingHost.x - boundingTarget.width) + "px";
+  }
+  /**
+   * Método responsável por atualizar a posição de um elemento HTML que renderizou fora da tela.
+   * @param hostElement - Elemento HTML que será a referência de posição dentro da tela.
+   * @param targetElement - Elemento HTML que será reposicionado na tela.
+   */
+  updatePosition(hostElement, targetElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
+    if (boundingHost == undefined || boundingTarget == undefined) {
+      return;
+    }
+    if (boundingHost.x < boundingTarget.right) {
+      targetElement.style.left = this.getPositionLeft(hostElement, targetElement);
+      this.updatePosition(hostElement, targetElement);
+    }
+  }
+}

package/dist/collection/components/ez-file-item/ez-file-item.css

@@ -0,0 +1,125 @@
+:host {
+  /*private*/
+  display: flex;
+  width: 100%;
+  
+  /* Dimensões */
+  /*@doc Define a altura do componente.*/
+  --ez-file-item--height: 42px;
+  /*@doc Define espaçamento interno do componente.*/
+  --ez-file-item--padding: 9px;
+
+  /* Borda */
+  /*@doc Define o arredondamento dos retangulos.*/
+  --ez-file-item--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a cor da borda.*/
+  --ez-file-item--border-color: var(--color--strokes, #DCE0E8);
+  /*@doc Define largura e estilo da borda.*/
+  --ez-file-item--border-style: var(--border--small, 1px solid);
+  
+  /* Textos */
+  /*@doc Define a família da fonte.*/
+  --ez-file-item--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho da fonte.*/
+  --ez-file-item--font-size: var(--text--medium, 14px);
+  /*@doc Define o peso da fonte.*/
+  --ez-file-item--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte.*/
+  --ez-file-item--color: var(--title--primary, #2B3A54);
+  
+  /* Label File size */
+  /*@doc Define o peso da fonte do tamanho do arquivo.*/
+  --ez-file-item__file-size--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o peso da fonte do tamanho do arquivo.*/
+  --ez-file-item__file-size--color: var(--color--primary, #008561);
+
+  /* Barra de progresso */
+  --ez-file-item__background-progress--color: var(--color--primary-300, E2F4EF);
+
+  /* Ícone remover */
+  /*@doc Define a cor do ícone.*/
+  --ez-file-item--icon-color: var(--title--primary, #2B3A54);
+}
+
+.box {
+  /*private*/
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  
+  /*public*/
+  padding: var(--ez-file-item--padding);
+  border: var(--ez-file-item--border-color) var(--ez-file-item--border-style);
+  border-radius: var(--ez-file-item--border-radius);
+  height: var(--ez-file-item--height);
+}
+
+.box::before {
+  /*private*/
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  clip-path: inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));
+  
+  /*public*/
+  background-color: var(--ez-file-item__background-progress--color);
+}
+
+.content {
+  /*private*/
+  display: flex;
+  align-items: center;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.file-name {
+  /*private*/
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--ez-file-item--font-family);
+  font-size: var(--ez-file-item--font-size);
+  font-weight: var(--ez-file-item--font-weight);
+  color: var(--ez-file-item--color);
+}
+
+.file-type-icon {
+  /*private*/
+  flex-shrink: 0;
+
+  /*public*/
+  --ez-icon--color: var(--ez-file-item--icon-color);
+  padding-right: var(--ez-file-item--padding) ;
+}
+
+.file-size {
+  /*private*/
+  padding-left: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--ez-file-item--font-family);
+  font-size: var(--ez-file-item--font-size);
+  font-weight: var(--ez-file-item__file-size--font-weight);
+  color: var(--ez-file-item__file-size--color);
+}
+
+.btn-remove {
+  /*private*/
+  cursor: pointer;
+  flex-shrink: 0;
+
+  /*public*/
+  --ez-icon--color: var(--ez-file-item--icon-color);
+}

package/dist/collection/components/ez-file-item/ez-file-item.js

@@ -0,0 +1,200 @@
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export class EzFileItem {
+  constructor() {
+    this.canRemove = true;
+    this.fileName = undefined;
+    this.iconName = undefined;
+    this.fileSize = undefined;
+    this.progress = 100;
+  }
+  observeProgress(newProgress) {
+    if (newProgress < 0 || newProgress > 100) {
+      throw new Error("O progresso de upload deve ser um número entre 0 e 100.");
+    }
+    this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
+  }
+  getFileSize() {
+    if (!this.fileSize || this.fileSize === 0) {
+      return "";
+    }
+    return `(${StringUtils.formatBytes(this.fileSize)})`;
+  }
+  getIconName() {
+    let extension;
+    if (this.iconName) {
+      return this.iconName;
+    }
+    if (this.fileName.indexOf(".") > -1) {
+      const index = this.fileName.lastIndexOf(".");
+      extension = this.fileName.substring(index);
+    }
+    return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
+  }
+  render() {
+    this._element.title = `${this.fileName} ${this.getFileSize()}`;
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
+    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ?
+      h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
+          this.ezRemove.emit(this.fileName);
+          evt.stopPropagation();
+        } }) : undefined));
+  }
+  static get is() { return "ez-file-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-file-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-file-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "canRemove": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o usu\u00E1rio pode remover o arquivo que est\u00E1 sendo apresentado."
+        },
+        "attribute": "can-remove",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "fileName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o nome do arquivo, com extens\u00E3o."
+        },
+        "attribute": "file-name",
+        "reflect": false
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define qual \u00EDcone que representa o arquivo."
+        },
+        "attribute": "icon-name",
+        "reflect": false
+      },
+      "fileSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho do arquivo (em bytes)."
+        },
+        "attribute": "file-size",
+        "reflect": false
+      },
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Percentual de carregamento do arquivo para o servidor."
+        },
+        "attribute": "progress",
+        "reflect": false,
+        "defaultValue": "100"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezClick",
+        "name": "ezClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao clicar no ez-file-input (exceto no bot\u00E3o de remover)."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezRemove",
+        "name": "ezRemove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao clicar no bot\u00E3o de remover."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "progress",
+        "methodName": "observeProgress"
+      }];
+  }
+}
+const FILE_TYPE_ICONS = {
+  ".exe": "exe",
+  ".gif": "gif",
+  ".mp3": "mp3",
+  ".mp4": "mp4",
+  ".pdf": "pdf",
+  ".png": "png",
+  ".txt": "txt",
+  ".zip": "zip",
+  ".docx": "docx",
+  ".xlsx": "xlsx",
+  ".pptx": "pptx"
+};
+const DEFAULT_FILE_TYPE_ICON = "generic";

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}