@sankhyalabs/ezui 6.1.0-dev.2 → 6.1.0-dev.21

package/dist/collection/components/ez-grid/controller/ag-grid/utils/buildLocaleText.js

@@ -0,0 +1,67 @@
+export function buildLocaleText(i18n) {
+  return ({
+    page: i18n("ez-grid.pageLabel"),
+    more: i18n("ez-grid.remainingPageLabel"),
+    to: i18n("ez-grid.remainingTotalLabel"),
+    of: i18n("ez-grid.remainingTotalLabel"),
+    next: i18n("ez-grid.nextPage"),
+    previous: i18n("ez-grid.previousPage"),
+    loadingOoo: i18n("app.loading"),
+    noRowsToShow: i18n("ez-grid.noRowsToShow"),
+    pinColumn: i18n("ez-grid.pinColumn"),
+    unpinColumn: i18n("ez-grid.unpinColumn"),
+    filterOoo: i18n("ez-grid.filter"),
+    sortAscending: i18n("ez-grid.sortAscending"),
+    sortDescending: i18n("ez-grid.sortDescending"),
+    last: i18n("ez-grid.last"),
+    first: i18n("ez-grid.first"),
+    selectAll: i18n("ez-grid.selectAll"),
+    searchOoo: i18n("ez-grid.searchOoo"),
+    blanks: i18n("ez-grid.blanks"),
+    applyFilter: i18n("ez-grid.applyFilter"),
+    equals: i18n("ez-grid.equals"),
+    lessThan: i18n("ez-grid.lessThan"),
+    greaterThan: i18n("ez-grid.greaterThan"),
+    contains: i18n("ez-grid.contains"),
+    startsWith: i18n("ez-grid.startsWith"),
+    endsWith: i18n("ez-grid.endsWith"),
+    group: i18n("ez-grid.group"),
+    columns: i18n("ez-grid.columns"),
+    rowGroupColumns: i18n("ez-grid.rowGroupColumns"),
+    rowGroupColumnsEmptyMessage: i18n("ez-grid.rowGroupColumnsEmptyMessage"),
+    valueColumns: i18n("ez-grid.valueColumns"),
+    pivotMode: i18n("ez-grid.pivotMode"),
+    groups: i18n("ez-grid.groups"),
+    values: i18n("ez-grid.values"),
+    pivots: i18n("ez-grid.pivots"),
+    valueColumnsEmptyMessage: i18n("ez-grid.valueColumnsEmptyMessage"),
+    pivotColumnsEmptyMessage: i18n("ez-grid.pivotColumnsEmptyMessage"),
+    toolPanelButton: i18n("ez-grid.toolPanelButton"),
+    valueAggregation: i18n("ez-grid.valueAggregation"),
+    autosizeThiscolumn: i18n("ez-grid.autosizeThiscolumn"),
+    autosizeAllColumns: i18n("ez-grid.autosizeAllColumns"),
+    groupBy: i18n("ez-grid.groupBy"),
+    ungroupBy: i18n("ez-grid.ungroupBy"),
+    resetColumns: i18n("ez-grid.resetColumns"),
+    expandAll: i18n("ez-grid.expandAll"),
+    collapseAll: i18n("ez-grid.collapseAll"),
+    toolPanel: i18n("ez-grid.toolPanel"),
+    export: i18n("ez-grid.export"),
+    csvExport: i18n("ez-grid.csvExport"),
+    excelExport: i18n("ez-grid.excelExport"),
+    pinLeft: i18n("ez-grid.pinLeft"),
+    pinRight: i18n("ez-grid.pinRight"),
+    noPin: i18n("ez-grid.noPin"),
+    sum: i18n("ez-grid.sum"),
+    min: i18n("ez-grid.min"),
+    max: i18n("ez-grid.max"),
+    none: i18n("ez-grid.none"),
+    count: i18n("ez-grid.count"),
+    average: i18n("ez-grid.average"),
+    copy: i18n("ez-grid.copy"),
+    copyWithHeaders: i18n("ez-grid.copyWithHeaders"),
+    ctrlC: i18n("ez-grid.ctrlC"),
+    paste: i18n("ez-grid.paste"),
+    ctrlV: i18n("ez-grid.ctrlV"),
+  });
+}

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

@@ -6,6 +6,7 @@ import AgGridController from './controller/ag-grid/AgGridController';
 import { SelectionCounter } from './subcomponents/selection-counter';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 import { focusOnFieldSerch, LABEL_SEARCH_COLUMN, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from '../../utils/searchColumn/search-column';
+import initI18n from '../../utils/i18n';
 const windowInstace = window;
 const matches = (text, filter) => {
   const normalizedText = StringUtils.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
@@ -15,7 +16,6 @@ const matches = (text, filter) => {
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
-    this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
     this._customEditor = new Map();
     this._customRenders = new Map();
     this._paginationInfo = undefined;
@@ -409,7 +409,7 @@ export class EzGrid {
     await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
   }
   renderCancelPagination() {
-    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, "Cancelar pagina\u00E7\u00E3o"))));
+    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n("ez-grid.cancelPagination")))));
   }
   handleShowCancelPagination() {
     var _a, _b, _c;
@@ -425,7 +425,7 @@ export class EzGrid {
     if (!this._paginationInfo)
       return null;
     const { currentPage, hasMore } = this._paginationInfo;
-    return (h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    return (h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: this.i18n("ez-grid.previousPage") }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: this.i18n("ez-grid.nextPage") }))));
   }
   shouldPresentPaginationLabel() {
     return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
@@ -465,7 +465,8 @@ export class EzGrid {
       enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick,
       enableLockManagerLoadingComp: this.enableLockManagerLoadingComp,
       enableRowTableStriped: this.enableRowTableStriped,
-      suppressHorizontalScroll: this.suppressHorizontalScroll
+      suppressHorizontalScroll: this.suppressHorizontalScroll,
+      i18n: this.i18n
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -498,7 +499,7 @@ export class EzGrid {
   }
   _getRemainingPageLabel() {
     const { total, count } = this._paginationInfo;
-    return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
+    return `${total == undefined ? this.i18n("ez-grid.remainingPageLabel", { count: count + 1 }) : this.i18n("ez-grid.remainingTotalLabel", { total })}`;
   }
   _hasToShowCancelPagination() {
     var _a;
@@ -574,10 +575,11 @@ export class EzGrid {
   }
   componentDidRender() {
     windowInstace.addEventListener('onSubmitFilter', () => {
-      ApplicationUtils.info(this._messageFilterAppliedSuccess);
+      ApplicationUtils.info(this.i18n("ez-grid.filterAppliedSuccess"));
     });
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
@@ -616,12 +618,12 @@ export class EzGrid {
       if (!this._paginationInfo)
         return;
       this.nextRecord();
-    }, { description: "Avança para o próximo registro.", element: this._element })
+    }, { description: this.i18n("ez-grid.nextRecord"), element: this._element })
       .bind("ctrl + ,", () => {
       if (!this._paginationInfo)
         return;
       this.previousRecord();
-    }, { description: "Retorna ao registro anterior.", element: this._element })
+    }, { description: this.i18n("ez-grid.previousRecord"), element: this._element })
       .bind("ctrl + alt + ArrowLeft", () => {
       if (!this._paginationInfo)
         return;
@@ -629,7 +631,7 @@ export class EzGrid {
       if (currentPage > 0) {
         this.previousPage();
       }
-    }, { description: "Retorna a pagina anterior.", element: this._element })
+    }, { description: this.i18n("ez-grid.previousPage"), element: this._element })
       .bind("ctrl + alt + ArrowRight", () => {
       if (!this._paginationInfo)
         return;
@@ -637,7 +639,7 @@ export class EzGrid {
       if (hasMore) {
         this.nextPage();
       }
-    }, { description: "Avança para a próxima página.", element: this._element });
+    }, { description: this.i18n("ez-grid.nextPage"), element: this._element });
     if (this.useSearchColumn) {
       this._keyboardManager.bind(SHORTCUT_SEARCH_FIELD, async () => {
         if (!this._container || !this._ezPopoverSearchColumn)
@@ -645,7 +647,7 @@ export class EzGrid {
         const container = this._container.getBoundingClientRect();
         await focusOnFieldSerch(this._columnSearch);
         this._ezPopoverSearchColumn.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
-      }, { description: LABEL_SEARCH_COLUMN, element: this._element });
+      }, { description: this.i18n("ez-grid.searchColumn"), element: this._element });
     }
   }
   async removeShortcuts() {
@@ -690,7 +692,7 @@ export class EzGrid {
         'shadow-mode': !this.outlineMode && !this.hideHeader(),
       }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, i18n: this.i18n, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -1,6 +1,7 @@
 import { UserInterface } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import { PRESENTATION_FROM_COL_PROP_NAME } from '../../../utils/constants';
+import initI18n from '../../../utils/i18n';
 const windowInstace = window;
 const onSubmitFilter = new CustomEvent('onSubmitFilter', {
   detail: {
@@ -107,8 +108,8 @@ export class FilterColumn {
     }
     if (this.isCheckBoxOrSwitch()) {
       return [
-        { label: 'Sim', value: 'true', check: true },
-        { label: 'Não', value: 'false', check: true },
+        { label: this.i18n("app.yes"), value: 'true', check: true },
+        { label: this.i18n("app.no"), value: 'false', check: true },
       ];
     }
     const options = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options;
@@ -128,8 +129,11 @@ export class FilterColumn {
       this.clearConfigs();
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
-    return (h("ez-popover-plus", { ref: (element) => (this.ezPopoverElement = element), class: 'filter-column__popover', "overlay-type": 'none', autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { id: 'filter-column-selection-list', columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover-plus", { ref: (element) => (this.ezPopoverElement = element), class: 'filter-column__popover', "overlay-type": 'none', autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, this.i18n("ez-grid.filterColumnHeader", { columnLabel: this.columnLabel })), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { id: 'filter-column-selection-list', columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: this.i18n("app.apply"), class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
   }
   static get is() { return "filter-column"; }
   static get originalStyleUrls() {

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -2,7 +2,7 @@ import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import { buildSelectAllLabel, buildSelectAllTitle, enableSelectAll, getText } from './utils/selectionCounterUtils';
 export const SelectionCounter = (props) => {
-  const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
+  const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose, i18n } = props;
   const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
@@ -12,7 +12,7 @@ export const SelectionCounter = (props) => {
     return !!paginationInfo && (currentPageSelected || allRecordSelected);
   };
   return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, shouldRenderSelectionButton() &&
-    h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+    h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: i18n("app.close"), onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
 };
 function getElementID(sufix) {
   return {

package/dist/collection/components/ez-grid/subcomponents/utils/selectionCounterUtils.js

@@ -1,22 +1,26 @@
+import { getI18n } from "../../../../utils/i18n";
 export function enableSelectAll(total) {
   return total !== undefined;
 }
 export function buildSelectAllLabel(allRecordSelected, count, total) {
+  const i18n = getI18n();
   if (allRecordSelected)
-    return 'Selecionar apenas a página atual';
+    return i18n('utils.selectAllPage');
   if (total === undefined)
-    return `Carregando todos os ${count} registros`;
-  return `Selecionar todos os ${total} registros`;
+    return i18n('utils.loadingAllRecords', { count });
+  return i18n('utils.selectAllRecords', { total });
 }
 export function buildSelectAllTitle(total) {
   if (enableSelectAll(total))
     return '';
-  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+  const i18n = getI18n();
+  return i18n('utils.waitForLoad');
 }
 export function getText(selectionCount, allSelectedRecords) {
+  const i18n = getI18n();
   if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+    return i18n('utils.allRecordsSelected', { selectionCount });
   }
-  const pluralCharacter = selectionCount > 1 ? "s" : "";
-  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
+  const plural = selectionCount > 1 ? "s" : "";
+  return i18n('utils.selectedRecords', { selectionCount, plural });
 }

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
+import initI18n from '../../utils/i18n';
 const ENTER_KEY = "Enter";
 export class EzGuideNavigator {
   constructor() {
@@ -70,6 +71,9 @@ export class EzGuideNavigator {
   async getParent(id) {
     return this._tree.getParent(id);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleToggleSidebar() {
     this.open = !this.open;
   }
@@ -84,7 +88,7 @@ export class EzGuideNavigator {
   }
   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 })))));
+    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: this.i18n("ez-guide-navigator.searchGuide"), "aria-placeholder": this.i18n("ez-guide-navigator.searchGuide"), 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: this.i18n("ez-guide-navigator.hideMenu"), "aria-label": this.i18n("ez-guide-navigator.hideMenu"), "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"; }

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

@@ -76,146 +76,153 @@ svg {
 .ez-icon-balance:before { content: "\ea13"; }
 .ez-icon-bell-inverted:before { content: "\ea14"; }
 .ez-icon-bell:before { content: "\ea15"; }
-.ez-icon-boleto:before { content: "\ea16"; }
-.ez-icon-boolean:before { content: "\ea17"; }
-.ez-icon-business-center:before { content: "\ea18"; }
-.ez-icon-calendar-clock:before { content: "\ea19"; }
-.ez-icon-calendar:before { content: "\ea1a"; }
-.ez-icon-cart-history:before { content: "\ea1b"; }
-.ez-icon-cash-remove:before { content: "\ea1c"; }
-.ez-icon-check-circle-inverted:before { content: "\ea1d"; }
-.ez-icon-check-circle:before { content: "\ea1e"; }
-.ez-icon-check:before { content: "\ea1f"; }
-.ez-icon-chevron-down:before { content: "\ea20"; }
-.ez-icon-chevron-left:before { content: "\ea21"; }
-.ez-icon-chevron-right:before { content: "\ea22"; }
-.ez-icon-chevron-up:before { content: "\ea23"; }
-.ez-icon-circle--medium:before { content: "\ea24"; }
-.ez-icon-circle:before { content: "\ea25"; }
-.ez-icon-clean-cart:before { content: "\ea26"; }
-.ez-icon-cleaning:before { content: "\ea27"; }
-.ez-icon-clipboard:before { content: "\ea28"; }
-.ez-icon-clock-rotate-left:before { content: "\ea29"; }
-.ez-icon-close:before { content: "\ea2a"; }
-.ez-icon-cobrar:before { content: "\ea2b"; }
-.ez-icon-code:before { content: "\ea2c"; }
-.ez-icon-configuration:before { content: "\ea2d"; }
-.ez-icon-content-cut:before { content: "\ea2e"; }
-.ez-icon-copy:before { content: "\ea2f"; }
-.ez-icon-credit_card:before { content: "\ea30"; }
-.ez-icon-crop:before { content: "\ea31"; }
-.ez-icon-custom:before { content: "\ea32"; }
-.ez-icon-delete-file:before { content: "\ea33"; }
-.ez-icon-delete:before { content: "\ea34"; }
-.ez-icon-description:before { content: "\ea35"; }
-.ez-icon-dividir:before { content: "\ea36"; }
-.ez-icon-docx:before { content: "\ea37"; }
-.ez-icon-dot-notification:before { content: "\ea38"; }
-.ez-icon-dots-horizontal:before { content: "\ea39"; }
-.ez-icon-dots-vertical:before { content: "\ea3a"; }
-.ez-icon-drag-indicator:before { content: "\ea3b"; }
-.ez-icon-dual-chevron-down:before { content: "\ea3c"; }
-.ez-icon-dual-chevron-left:before { content: "\ea3d"; }
-.ez-icon-dual-chevron-right:before { content: "\ea3e"; }
-.ez-icon-dual-chevron-up:before { content: "\ea3f"; }
-.ez-icon-edit-file:before { content: "\ea40"; }
-.ez-icon-edit-table:before { content: "\ea41"; }
-.ez-icon-edit-time:before { content: "\ea42"; }
-.ez-icon-edit-value:before { content: "\ea43"; }
-.ez-icon-edit:before { content: "\ea44"; }
-.ez-icon-email:before { content: "\ea45"; }
-.ez-icon-estorno:before { content: "\ea46"; }
-.ez-icon-exe:before { content: "\ea47"; }
-.ez-icon-expand:before { content: "\ea48"; }
-.ez-icon-expandir_card:before { content: "\ea49"; }
-.ez-icon-extrato:before { content: "\ea4a"; }
-.ez-icon-eye-off:before { content: "\ea4b"; }
-.ez-icon-eye:before { content: "\ea4c"; }
-.ez-icon-favorite:before { content: "\ea4d"; }
-.ez-icon-figma:before { content: "\ea4e"; }
-.ez-icon-file-download:before { content: "\ea4f"; }
-.ez-icon-file-upload:before { content: "\ea50"; }
-.ez-icon-filter:before { content: "\ea51"; }
-.ez-icon-find-file:before { content: "\ea52"; }
-.ez-icon-find-page:before { content: "\ea53"; }
-.ez-icon-format-color-fill:before { content: "\ea54"; }
-.ez-icon-generic:before { content: "\ea55"; }
-.ez-icon-gif:before { content: "\ea56"; }
-.ez-icon-graph_bar:before { content: "\ea57"; }
-.ez-icon-handshake:before { content: "\ea58"; }
-.ez-icon-help-inverted:before { content: "\ea59"; }
-.ez-icon-help:before { content: "\ea5a"; }
-.ez-icon-hide-list:before { content: "\ea5b"; }
-.ez-icon-hide_menu:before { content: "\ea5c"; }
-.ez-icon-hierarchical-tree:before { content: "\ea5d"; }
-.ez-icon-home:before { content: "\ea5e"; }
-.ez-icon-icons104:before { content: "\ea5f"; }
-.ez-icon-language:before { content: "\ea60"; }
-.ez-icon-launch:before { content: "\ea61"; }
-.ez-icon-lightbulb:before { content: "\ea62"; }
-.ez-icon-list:before { content: "\ea63"; }
-.ez-icon-location:before { content: "\ea64"; }
-.ez-icon-lock-outline:before { content: "\ea65"; }
-.ez-icon-lock:before { content: "\ea66"; }
-.ez-icon-menu:before { content: "\ea67"; }
-.ez-icon-mid:before { content: "\ea68"; }
-.ez-icon-minus:before { content: "\ea69"; }
-.ez-icon-money-off:before { content: "\ea6a"; }
-.ez-icon-money:before { content: "\ea6b"; }
-.ez-icon-more:before { content: "\ea6c"; }
-.ez-icon-mp3:before { content: "\ea6d"; }
-.ez-icon-mp4:before { content: "\ea6e"; }
-.ez-icon-multiple-files:before { content: "\ea6f"; }
-.ez-icon-north-west:before { content: "\ea70"; }
-.ez-icon-number:before { content: "\ea71"; }
-.ez-icon-ordem-ascendente:before { content: "\ea72"; }
-.ez-icon-ordem-descendente:before { content: "\ea73"; }
-.ez-icon-parcelar:before { content: "\ea74"; }
-.ez-icon-pause:before { content: "\ea75"; }
-.ez-icon-payments:before { content: "\ea76"; }
-.ez-icon-pdf:before { content: "\ea77"; }
-.ez-icon-play:before { content: "\ea78"; }
-.ez-icon-plus:before { content: "\ea79"; }
-.ez-icon-png:before { content: "\ea7a"; }
-.ez-icon-power:before { content: "\ea7b"; }
-.ez-icon-pptx:before { content: "\ea7c"; }
-.ez-icon-preview:before { content: "\ea7d"; }
-.ez-icon-print:before { content: "\ea7e"; }
-.ez-icon-push-pin:before { content: "\ea7f"; }
-.ez-icon-rateio:before { content: "\ea80"; }
-.ez-icon-receipt:before { content: "\ea81"; }
-.ez-icon-recolher_card:before { content: "\ea82"; }
-.ez-icon-remove-from-cart:before { content: "\ea83"; }
-.ez-icon-restore:before { content: "\ea84"; }
-.ez-icon-return:before { content: "\ea85"; }
-.ez-icon-sankhya-place:before { content: "\ea86"; }
-.ez-icon-save:before { content: "\ea87"; }
-.ez-icon-search:before { content: "\ea88"; }
-.ez-icon-settings-inverted:before { content: "\ea89"; }
-.ez-icon-settings:before { content: "\ea8a"; }
-.ez-icon-share:before { content: "\ea8b"; }
-.ez-icon-shield:before { content: "\ea8c"; }
-.ez-icon-show-list:before { content: "\ea8d"; }
-.ez-icon-show_menu:before { content: "\ea8e"; }
-.ez-icon-south-east:before { content: "\ea8f"; }
-.ez-icon-sync:before { content: "\ea90"; }
-.ez-icon-table:before { content: "\ea91"; }
-.ez-icon-tag_code:before { content: "\ea92"; }
-.ez-icon-text:before { content: "\ea93"; }
-.ez-icon-timeline:before { content: "\ea94"; }
-.ez-icon-timer-outline:before { content: "\ea95"; }
-.ez-icon-trending-up:before { content: "\ea96"; }
-.ez-icon-tune:before { content: "\ea97"; }
-.ez-icon-txt:before { content: "\ea98"; }
-.ez-icon-un-pin:before { content: "\ea99"; }
-.ez-icon-unfold_less:before { content: "\ea9a"; }
-.ez-icon-unfold_more:before { content: "\ea9b"; }
-.ez-icon-user-circle:before { content: "\ea9c"; }
-.ez-icon-warning-outline:before { content: "\ea9d"; }
-.ez-icon-warning_triangle:before { content: "\ea9e"; }
-.ez-icon-whatshot:before { content: "\ea9f"; }
-.ez-icon-xlsx:before { content: "\eaa0"; }
-.ez-icon-zip:before { content: "\eaa1"; }
+.ez-icon-bold:before { content: "\ea16"; }
+.ez-icon-boleto:before { content: "\ea17"; }
+.ez-icon-boolean:before { content: "\ea18"; }
+.ez-icon-business-center:before { content: "\ea19"; }
+.ez-icon-calendar-clock:before { content: "\ea1a"; }
+.ez-icon-calendar:before { content: "\ea1b"; }
+.ez-icon-cart-history:before { content: "\ea1c"; }
+.ez-icon-cash-remove:before { content: "\ea1d"; }
+.ez-icon-check-circle-inverted:before { content: "\ea1e"; }
+.ez-icon-check-circle:before { content: "\ea1f"; }
+.ez-icon-check:before { content: "\ea20"; }
+.ez-icon-chevron-down:before { content: "\ea21"; }
+.ez-icon-chevron-left:before { content: "\ea22"; }
+.ez-icon-chevron-right:before { content: "\ea23"; }
+.ez-icon-chevron-up:before { content: "\ea24"; }
+.ez-icon-circle--medium:before { content: "\ea25"; }
+.ez-icon-circle:before { content: "\ea26"; }
+.ez-icon-clean-cart:before { content: "\ea27"; }
+.ez-icon-cleaning:before { content: "\ea28"; }
+.ez-icon-clipboard:before { content: "\ea29"; }
+.ez-icon-clock-rotate-left:before { content: "\ea2a"; }
+.ez-icon-close:before { content: "\ea2b"; }
+.ez-icon-cobrar:before { content: "\ea2c"; }
+.ez-icon-code:before { content: "\ea2d"; }
+.ez-icon-configuration:before { content: "\ea2e"; }
+.ez-icon-content-cut:before { content: "\ea2f"; }
+.ez-icon-copy:before { content: "\ea30"; }
+.ez-icon-credit_card:before { content: "\ea31"; }
+.ez-icon-crop:before { content: "\ea32"; }
+.ez-icon-custom:before { content: "\ea33"; }
+.ez-icon-delete-file:before { content: "\ea34"; }
+.ez-icon-delete:before { content: "\ea35"; }
+.ez-icon-description:before { content: "\ea36"; }
+.ez-icon-dividir:before { content: "\ea37"; }
+.ez-icon-docx:before { content: "\ea38"; }
+.ez-icon-dot-notification:before { content: "\ea39"; }
+.ez-icon-dots-horizontal:before { content: "\ea3a"; }
+.ez-icon-dots-vertical:before { content: "\ea3b"; }
+.ez-icon-drag-indicator:before { content: "\ea3c"; }
+.ez-icon-dual-chevron-down:before { content: "\ea3d"; }
+.ez-icon-dual-chevron-left:before { content: "\ea3e"; }
+.ez-icon-dual-chevron-right:before { content: "\ea3f"; }
+.ez-icon-dual-chevron-up:before { content: "\ea40"; }
+.ez-icon-edit-file:before { content: "\ea41"; }
+.ez-icon-edit-table:before { content: "\ea42"; }
+.ez-icon-edit-time:before { content: "\ea43"; }
+.ez-icon-edit-value:before { content: "\ea44"; }
+.ez-icon-edit:before { content: "\ea45"; }
+.ez-icon-email:before { content: "\ea46"; }
+.ez-icon-estorno:before { content: "\ea47"; }
+.ez-icon-exe:before { content: "\ea48"; }
+.ez-icon-expand:before { content: "\ea49"; }
+.ez-icon-expandir_card:before { content: "\ea4a"; }
+.ez-icon-extrato:before { content: "\ea4b"; }
+.ez-icon-eye-off:before { content: "\ea4c"; }
+.ez-icon-eye:before { content: "\ea4d"; }
+.ez-icon-favorite:before { content: "\ea4e"; }
+.ez-icon-figma:before { content: "\ea4f"; }
+.ez-icon-file-download:before { content: "\ea50"; }
+.ez-icon-file-upload:before { content: "\ea51"; }
+.ez-icon-filter:before { content: "\ea52"; }
+.ez-icon-find-file:before { content: "\ea53"; }
+.ez-icon-find-page:before { content: "\ea54"; }
+.ez-icon-format-color-fill:before { content: "\ea55"; }
+.ez-icon-generic:before { content: "\ea56"; }
+.ez-icon-gif:before { content: "\ea57"; }
+.ez-icon-graph_bar:before { content: "\ea58"; }
+.ez-icon-handshake:before { content: "\ea59"; }
+.ez-icon-help-inverted:before { content: "\ea5a"; }
+.ez-icon-help:before { content: "\ea5b"; }
+.ez-icon-hide-list:before { content: "\ea5c"; }
+.ez-icon-hide_menu:before { content: "\ea5d"; }
+.ez-icon-hierarchical-tree:before { content: "\ea5e"; }
+.ez-icon-home:before { content: "\ea5f"; }
+.ez-icon-icons104:before { content: "\ea60"; }
+.ez-icon-image-plus:before { content: "\ea61"; }
+.ez-icon-italic:before { content: "\ea62"; }
+.ez-icon-language:before { content: "\ea63"; }
+.ez-icon-launch:before { content: "\ea64"; }
+.ez-icon-lightbulb:before { content: "\ea65"; }
+.ez-icon-link:before { content: "\ea66"; }
+.ez-icon-list:before { content: "\ea67"; }
+.ez-icon-location:before { content: "\ea68"; }
+.ez-icon-lock-outline:before { content: "\ea69"; }
+.ez-icon-lock:before { content: "\ea6a"; }
+.ez-icon-menu:before { content: "\ea6b"; }
+.ez-icon-mid:before { content: "\ea6c"; }
+.ez-icon-minus:before { content: "\ea6d"; }
+.ez-icon-money-off:before { content: "\ea6e"; }
+.ez-icon-money:before { content: "\ea6f"; }
+.ez-icon-more:before { content: "\ea70"; }
+.ez-icon-mp3:before { content: "\ea71"; }
+.ez-icon-mp4:before { content: "\ea72"; }
+.ez-icon-multiple-files:before { content: "\ea73"; }
+.ez-icon-north-west:before { content: "\ea74"; }
+.ez-icon-number:before { content: "\ea75"; }
+.ez-icon-ordem-ascendente:before { content: "\ea76"; }
+.ez-icon-ordem-descendente:before { content: "\ea77"; }
+.ez-icon-parcelar:before { content: "\ea78"; }
+.ez-icon-pause:before { content: "\ea79"; }
+.ez-icon-payments:before { content: "\ea7a"; }
+.ez-icon-pdf:before { content: "\ea7b"; }
+.ez-icon-play:before { content: "\ea7c"; }
+.ez-icon-plus:before { content: "\ea7d"; }
+.ez-icon-png:before { content: "\ea7e"; }
+.ez-icon-power:before { content: "\ea7f"; }
+.ez-icon-pptx:before { content: "\ea80"; }
+.ez-icon-preview:before { content: "\ea81"; }
+.ez-icon-print:before { content: "\ea82"; }
+.ez-icon-push-pin:before { content: "\ea83"; }
+.ez-icon-rateio:before { content: "\ea84"; }
+.ez-icon-receipt:before { content: "\ea85"; }
+.ez-icon-recolher_card:before { content: "\ea86"; }
+.ez-icon-redo:before { content: "\ea87"; }
+.ez-icon-remove-from-cart:before { content: "\ea88"; }
+.ez-icon-restore:before { content: "\ea89"; }
+.ez-icon-return:before { content: "\ea8a"; }
+.ez-icon-sankhya-place:before { content: "\ea8b"; }
+.ez-icon-save:before { content: "\ea8c"; }
+.ez-icon-search:before { content: "\ea8d"; }
+.ez-icon-settings-inverted:before { content: "\ea8e"; }
+.ez-icon-settings:before { content: "\ea8f"; }
+.ez-icon-share:before { content: "\ea90"; }
+.ez-icon-shield:before { content: "\ea91"; }
+.ez-icon-show-list:before { content: "\ea92"; }
+.ez-icon-show_menu:before { content: "\ea93"; }
+.ez-icon-south-east:before { content: "\ea94"; }
+.ez-icon-sync:before { content: "\ea95"; }
+.ez-icon-table:before { content: "\ea96"; }
+.ez-icon-tag_code:before { content: "\ea97"; }
+.ez-icon-text:before { content: "\ea98"; }
+.ez-icon-timeline:before { content: "\ea99"; }
+.ez-icon-timer-outline:before { content: "\ea9a"; }
+.ez-icon-trending-up:before { content: "\ea9b"; }
+.ez-icon-tune:before { content: "\ea9c"; }
+.ez-icon-txt:before { content: "\ea9d"; }
+.ez-icon-un-pin:before { content: "\ea9e"; }
+.ez-icon-underline:before { content: "\ea9f"; }
+.ez-icon-undo:before { content: "\eaa0"; }
+.ez-icon-unfold_less:before { content: "\eaa1"; }
+.ez-icon-unfold_more:before { content: "\eaa2"; }
+.ez-icon-user-circle:before { content: "\eaa3"; }
+.ez-icon-warning-outline:before { content: "\eaa4"; }
+.ez-icon-warning_triangle:before { content: "\eaa5"; }
+.ez-icon-whatshot:before { content: "\eaa6"; }
+.ez-icon-xlsx:before { content: "\eaa7"; }
+.ez-icon-zip:before { content: "\eaa8"; }
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */