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

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js

@@ -0,0 +1,385 @@
+import { h, Host } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
+const ENTER_KEY = "Enter";
+export class EzGuideNavigator {
+  constructor() {
+    this.open = true;
+    this.selectedId = undefined;
+    this.items = [];
+    this.tooltipResolver = undefined;
+    this.filterText = "";
+  }
+  /**
+   * Desabilita um ou mais itens.
+   */
+  async disableItem(id) {
+    [].concat(id).forEach(item => this._tree.disableItem(item));
+  }
+  /**
+   * Habilita um ou mais itens.
+   */
+  async enableItem(id) {
+    [].concat(id).forEach(item => this._tree.enableItem(item));
+  }
+  /**
+   * Atualiza um ou mais items
+   */
+  async updateItem(item) {
+    [].concat(item).forEach(item => this._tree.updateItem(item));
+  }
+  /**
+   * Obtem um item pelo id
+   */
+  async getItem(id) {
+    return this._tree.getItem(id);
+  }
+  /**
+   * Obtem um array do caminho de itens da seleção atual.
+   * @returns Retorna um array do caminho de itens da seleção atual.
+   */
+  async getCurrentPath() {
+    var _a;
+    return (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getCurrentPath();
+  }
+  /**
+   * Seleciona o item desejado pelo ID.
+   * @param id - ID do item que receberá a seleção.
+   */
+  async selectGuide(id) {
+    if (this._tree == undefined || id == undefined) {
+      return;
+    }
+    this._tree.selectItem(id);
+    this.getCurrentPath()
+      .then((currentPath) => {
+      currentPath === null || currentPath === void 0 ? void 0 : currentPath.forEach((item) => {
+        this._tree.openItem(item.id);
+      });
+    });
+  }
+  /**
+   * Obtem o item pai a partir de um id
+   */
+  async getParent(id) {
+    return this._tree.getParent(id);
+  }
+  async handleToggleSidebar() {
+    this.open = !this.open;
+  }
+  handleFilterTree(event) {
+    if (event.key === ENTER_KEY) {
+      this._tree.applyFilter(this.filterText);
+    }
+  }
+  onFilterChanged(event) {
+    this.filterText = event.detail;
+    event.stopPropagation();
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => this.onFilterChanged(event), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver, onEzChange: evt => this.ezSelectionChange.emit(evt.detail), selectedId: this.selectedId })))));
+  }
+  static get is() { return "ez-guide-navigator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-guide-navigator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-guide-navigator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o menu de navega\u00E7\u00E3o est\u00E1 aberto."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "selectedId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o id do item selecionado."
+        },
+        "attribute": "selected-id",
+        "reflect": true
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IGuideItem>",
+          "resolved": "IGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de itens do menu de navega\u00E7\u00E3o."
+        },
+        "defaultValue": "[]"
+      },
+      "tooltipResolver": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: IGuideItem, enabled: boolean, level: number) => string",
+          "resolved": "(item: IGuideItem, enabled: boolean, level: number) => string",
+          "references": {
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma fun\u00E7\u00E3o que vai resolver o `tooltip` ou `title` daquele item."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filterText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezSelectionChange",
+        "name": "ezSelectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando o item selecionado no navigator \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "IGuideItem",
+          "resolved": "IGuideItem",
+          "references": {
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "disableItem": {
+        "complexType": {
+          "signature": "(id: string | Array<string>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Desabilita um ou mais itens.",
+          "tags": []
+        }
+      },
+      "enableItem": {
+        "complexType": {
+          "signature": "(id: string | Array<string>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Habilita um ou mais itens.",
+          "tags": []
+        }
+      },
+      "updateItem": {
+        "complexType": {
+          "signature": "(item: IGuideItem | Array<IGuideItem>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza um ou mais items",
+          "tags": []
+        }
+      },
+      "getItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<IGuideItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<IGuideItem>"
+        },
+        "docs": {
+          "text": "Obtem um item pelo id",
+          "tags": []
+        }
+      },
+      "getCurrentPath": {
+        "complexType": {
+          "signature": "() => Promise<Array<IGuideItem>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<IGuideItem[]>"
+        },
+        "docs": {
+          "text": "Obtem um array do caminho de itens da sele\u00E7\u00E3o atual.",
+          "tags": [{
+              "name": "returns",
+              "text": "Retorna um array do caminho de itens da sele\u00E7\u00E3o atual."
+            }]
+        }
+      },
+      "selectGuide": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "id - ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+                }],
+              "text": "- ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Seleciona o item desejado pelo ID.",
+          "tags": [{
+              "name": "param",
+              "text": "id - ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+            }]
+        }
+      },
+      "getParent": {
+        "complexType": {
+          "signature": "(id: string) => Promise<IGuideItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<IGuideItem>"
+        },
+        "docs": {
+          "text": "Obtem o item pai a partir de um id",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-guide-navigator/interfaces/IGuideItem.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-guide-navigator/interfaces/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,223 @@
+:host {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  /* @doc Define a cor do ícone. */
+  --ez-icon--color: var(--icon--color, #ffffff);
+}
+
+svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: var(--ez-icon--color);
+}
+
+.x-small {
+  width: 12px;
+  height: 12px;
+}
+
+.small {
+  width: 16px;
+  height: 16px;
+}
+
+.medium {
+  width: 20px;
+  height: 20px;
+}
+
+.large {
+  width: 24px;
+  height: 24px;
+}
+
+.x-large {
+  width: 30px;
+  height: 30px;
+}
+
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  color: var(--ez-icon--color);
+}
+
+/*
+  START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
+  WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED
+*/
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  font-family: 'ez-icons' !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ez-icon-2chevron-down:before { content: "\ea01"; }
+.ez-icon-2chevron-up:before { content: "\ea02"; }
+.ez-icon-acao:before { content: "\ea03"; }
+.ez-icon-account-outline:before { content: "\ea04"; }
+.ez-icon-account:before { content: "\ea05"; }
+.ez-icon-actions-sprite-v1:before { content: "\ea06"; }
+.ez-icon-alert-circle-inverted:before { content: "\ea07"; }
+.ez-icon-alert-circle:before { content: "\ea08"; }
+.ez-icon-alert-mail:before { content: "\ea09"; }
+.ez-icon-alert-popup:before { content: "\ea0a"; }
+.ez-icon-anexo:before { content: "\ea0b"; }
+.ez-icon-antecipação:before { content: "\ea0c"; }
+.ez-icon-apps:before { content: "\ea0d"; }
+.ez-icon-arrow_back:before { content: "\ea0e"; }
+.ez-icon-arrow_downward:before { content: "\ea0f"; }
+.ez-icon-baixa:before { content: "\ea10"; }
+.ez-icon-balance:before { content: "\ea11"; }
+.ez-icon-bell-inverted:before { content: "\ea12"; }
+.ez-icon-bell:before { content: "\ea13"; }
+.ez-icon-boleto:before { content: "\ea14"; }
+.ez-icon-boolean:before { content: "\ea15"; }
+.ez-icon-business-center:before { content: "\ea16"; }
+.ez-icon-calendar-clock:before { content: "\ea17"; }
+.ez-icon-calendar:before { content: "\ea18"; }
+.ez-icon-cash-remove:before { content: "\ea19"; }
+.ez-icon-check-circle-inverted:before { content: "\ea1a"; }
+.ez-icon-check-circle:before { content: "\ea1b"; }
+.ez-icon-check:before { content: "\ea1c"; }
+.ez-icon-chevron-down:before { content: "\ea1d"; }
+.ez-icon-chevron-left:before { content: "\ea1e"; }
+.ez-icon-chevron-right:before { content: "\ea1f"; }
+.ez-icon-chevron-up:before { content: "\ea20"; }
+.ez-icon-circle--medium:before { content: "\ea21"; }
+.ez-icon-circle:before { content: "\ea22"; }
+.ez-icon-cleaning:before { content: "\ea23"; }
+.ez-icon-clipboard:before { content: "\ea24"; }
+.ez-icon-close:before { content: "\ea25"; }
+.ez-icon-cobrar:before { content: "\ea26"; }
+.ez-icon-code:before { content: "\ea27"; }
+.ez-icon-configuration:before { content: "\ea28"; }
+.ez-icon-copy:before { content: "\ea29"; }
+.ez-icon-credit_card:before { content: "\ea2a"; }
+.ez-icon-crop:before { content: "\ea2b"; }
+.ez-icon-custom:before { content: "\ea2c"; }
+.ez-icon-delete:before { content: "\ea2d"; }
+.ez-icon-description:before { content: "\ea2e"; }
+.ez-icon-dividir:before { content: "\ea2f"; }
+.ez-icon-docx:before { content: "\ea30"; }
+.ez-icon-dot-notification:before { content: "\ea31"; }
+.ez-icon-dots-horizontal:before { content: "\ea32"; }
+.ez-icon-dots-vertical:before { content: "\ea33"; }
+.ez-icon-drag-indicator:before { content: "\ea34"; }
+.ez-icon-dual-chevron-down:before { content: "\ea35"; }
+.ez-icon-dual-chevron-up:before { content: "\ea36"; }
+.ez-icon-edit-file:before { content: "\ea37"; }
+.ez-icon-edit-table:before { content: "\ea38"; }
+.ez-icon-edit-time:before { content: "\ea39"; }
+.ez-icon-edit:before { content: "\ea3a"; }
+.ez-icon-email:before { content: "\ea3b"; }
+.ez-icon-estorno:before { content: "\ea3c"; }
+.ez-icon-exe:before { content: "\ea3d"; }
+.ez-icon-expand:before { content: "\ea3e"; }
+.ez-icon-expandir_card:before { content: "\ea3f"; }
+.ez-icon-extrato:before { content: "\ea40"; }
+.ez-icon-eye-off:before { content: "\ea41"; }
+.ez-icon-eye:before { content: "\ea42"; }
+.ez-icon-favorite:before { content: "\ea43"; }
+.ez-icon-figma:before { content: "\ea44"; }
+.ez-icon-file-download:before { content: "\ea45"; }
+.ez-icon-file-upload:before { content: "\ea46"; }
+.ez-icon-filter:before { content: "\ea47"; }
+.ez-icon-find-file:before { content: "\ea48"; }
+.ez-icon-find-page:before { content: "\ea49"; }
+.ez-icon-format-color-fill:before { content: "\ea4a"; }
+.ez-icon-generic:before { content: "\ea4b"; }
+.ez-icon-gif:before { content: "\ea4c"; }
+.ez-icon-graph_bar:before { content: "\ea4d"; }
+.ez-icon-handshake:before { content: "\ea4e"; }
+.ez-icon-help-inverted:before { content: "\ea4f"; }
+.ez-icon-help:before { content: "\ea50"; }
+.ez-icon-hide_menu:before { content: "\ea51"; }
+.ez-icon-home:before { content: "\ea52"; }
+.ez-icon-icons104:before { content: "\ea53"; }
+.ez-icon-language:before { content: "\ea54"; }
+.ez-icon-launch:before { content: "\ea55"; }
+.ez-icon-lightbulb:before { content: "\ea56"; }
+.ez-icon-list:before { content: "\ea57"; }
+.ez-icon-location:before { content: "\ea58"; }
+.ez-icon-lock-outline:before { content: "\ea59"; }
+.ez-icon-lock:before { content: "\ea5a"; }
+.ez-icon-menu:before { content: "\ea5b"; }
+.ez-icon-mid:before { content: "\ea5c"; }
+.ez-icon-minus:before { content: "\ea5d"; }
+.ez-icon-money-off:before { content: "\ea5e"; }
+.ez-icon-money:before { content: "\ea5f"; }
+.ez-icon-more:before { content: "\ea60"; }
+.ez-icon-mp3:before { content: "\ea61"; }
+.ez-icon-mp4:before { content: "\ea62"; }
+.ez-icon-north-west:before { content: "\ea63"; }
+.ez-icon-number:before { content: "\ea64"; }
+.ez-icon-ordem-ascendente:before { content: "\ea65"; }
+.ez-icon-ordem-descendente:before { content: "\ea66"; }
+.ez-icon-parcelar:before { content: "\ea67"; }
+.ez-icon-pause:before { content: "\ea68"; }
+.ez-icon-payments:before { content: "\ea69"; }
+.ez-icon-pdf:before { content: "\ea6a"; }
+.ez-icon-play:before { content: "\ea6b"; }
+.ez-icon-plus:before { content: "\ea6c"; }
+.ez-icon-png:before { content: "\ea6d"; }
+.ez-icon-power:before { content: "\ea6e"; }
+.ez-icon-pptx:before { content: "\ea6f"; }
+.ez-icon-print:before { content: "\ea70"; }
+.ez-icon-push-pin:before { content: "\ea71"; }
+.ez-icon-rateio:before { content: "\ea72"; }
+.ez-icon-receipt:before { content: "\ea73"; }
+.ez-icon-recolher_card:before { content: "\ea74"; }
+.ez-icon-restore:before { content: "\ea75"; }
+.ez-icon-return:before { content: "\ea76"; }
+.ez-icon-save:before { content: "\ea77"; }
+.ez-icon-search:before { content: "\ea78"; }
+.ez-icon-settings-inverted:before { content: "\ea79"; }
+.ez-icon-settings:before { content: "\ea7a"; }
+.ez-icon-share:before { content: "\ea7b"; }
+.ez-icon-shield:before { content: "\ea7c"; }
+.ez-icon-show_menu:before { content: "\ea7d"; }
+.ez-icon-south-east:before { content: "\ea7e"; }
+.ez-icon-sync:before { content: "\ea7f"; }
+.ez-icon-table:before { content: "\ea80"; }
+.ez-icon-tag_code:before { content: "\ea81"; }
+.ez-icon-text:before { content: "\ea82"; }
+.ez-icon-timeline:before { content: "\ea83"; }
+.ez-icon-timer-outline:before { content: "\ea84"; }
+.ez-icon-tune:before { content: "\ea85"; }
+.ez-icon-txt:before { content: "\ea86"; }
+.ez-icon-un-pin:before { content: "\ea87"; }
+.ez-icon-unfold_less:before { content: "\ea88"; }
+.ez-icon-unfold_more:before { content: "\ea89"; }
+.ez-icon-user-circle:before { content: "\ea8a"; }
+.ez-icon-warning-outline:before { content: "\ea8b"; }
+.ez-icon-warning_triangle:before { content: "\ea8c"; }
+.ez-icon-whatshot:before { content: "\ea8d"; }
+.ez-icon-xlsx:before { content: "\ea8e"; }
+.ez-icon-zip:before { content: "\ea8f"; }
+
+/*
+  END CSS GENERATED BY EZ-DESIGN ICONS
+*/
+
+.x-small--font {
+  font-size: 12px;
+}
+
+.small--font {
+  font-size: 16px;
+}
+
+.medium--font {
+  font-size: 20px;
+}
+
+.large--font {
+  font-size: 24px;
+}
+
+.x-large--font {
+  font-size: 30px;
+}