@sankhyalabs/sankhyablocks 8.15.0-dev.2 → 8.15.0-dev.21

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

@@ -14,14 +14,21 @@ export class SnkGrid {
     this._topTaskbarProcessor = new TaskbarProcessor({
       "snkGridTopTaskbar.regular": ["FORM_MODE", "CONFIGURATOR", "INSERT"],
       "snkGridTopTaskbar.regular.secondary": ["FORM_MODE", "CONFIGURATOR", "INSERT"],
+      "snkGridTopTaskbar.regular.singleTaskbar": [],
       "snkGridTopTaskbar.finish_edition": ["CANCEL", "SAVE"],
-      "snkGridTopTaskbar.finish_edition.secondary": []
+      "snkGridTopTaskbar.finish_edition.secondary": [],
+      "snkGridTopTaskbar.finish_edition.singleTaskbar": [],
     });
     this._headerTaskbarProcessor = new TaskbarProcessor({
       "snkGridHeaderTaskbar.unselected": ["REFRESH", "DATA_EXPORTER", "ACTIONS_BUTTON", "MORE_OPTIONS"],
       "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "ATTACH", "REFRESH", "DATA_EXPORTER", "ACTIONS_BUTTON"],
       "snkGridHeaderTaskbar.detail.unselected": ["REFRESH", "MORE_OPTIONS"],
-      "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "ATTACH", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
+      "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "ATTACH", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"],
+      "snkGridHeaderTaskbar.singleTaskbar.unselected": ["INSERT", "FORM_MODE", "CONFIGURATOR", "REFRESH", "DATA_EXPORTER", "ACTIONS_BUTTON", "MORE_OPTIONS"],
+      "snkGridHeaderTaskbar.singleTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "ATTACH", "FORM_MODE", "CONFIGURATOR", "REFRESH", "DATA_EXPORTER", "ACTIONS_BUTTON"],
+      "snkGridHeaderTaskbar.singleTaskbar.detail.unselected": ["INSERT", "FORM_MODE", "CONFIGURATOR", "REFRESH", "MORE_OPTIONS"],
+      "snkGridHeaderTaskbar.singleTaskbar.detail.selected": ["UPDATE", "ATTACH", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "FORM_MODE", "CONFIGURATOR", "REFRESH"],
+      "snkGridHeaderTaskbar.singleTaskbar.finish_edition": ["CANCEL", "SAVE"]
     });
     this._dataUnit = undefined;
     this._dataState = undefined;
@@ -45,6 +52,7 @@ export class SnkGrid {
     this.taskbarCustomContainerId = undefined;
     this.gridHeaderCustomSlotId = 'GRID_HEADER_CUSTOM_ELEMENTS';
     this.topTaskbarCustomSlotId = 'GRID_TASKBAR_CUSTOM_ELEMENTS';
+    this.disablePersonalizedFilter = undefined;
   }
   /**
    * Exibe a janela de configurações da grade.
@@ -302,30 +310,46 @@ export class SnkGrid {
     return invisibleButtons;
   }
   componentWillRender() {
-    var _a;
     const invisibleButtons = this.getInvisibleButtons();
-    const hasSelectedRecord = this._dataState && !!((_a = this._dataState.selectionInfo) === null || _a === void 0 ? void 0 : _a.length);
-    let headerTaskbarId;
-    if (hasSelectedRecord) {
-      headerTaskbarId = this.isDetail ? "snkGridHeaderTaskbar.detail.selected" : "snkGridHeaderTaskbar.selected";
-    }
-    else {
-      headerTaskbarId = this.isDetail ? "snkGridHeaderTaskbar.detail.unselected" : "snkGridHeaderTaskbar.unselected";
-    }
-    this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState, this.getHeaderDisabledButtons(), invisibleButtons);
+    this._headerTaskbarProcessor.process(this.getHeaderTaskbarId(), this.taskbarManager, this._dataState, this.getHeaderDisabledButtons(), invisibleButtons);
     this._topTaskbarProcessor.process(this.getTopTaskBarId(), this.taskbarManager, this._dataState, undefined, invisibleButtons);
     this.dataExporterProviderStore();
   }
+  getHeaderTaskbarId() {
+    var _a, _b;
+    const hasSelectedRecord = this._dataState && !!((_a = this._dataState.selectionInfo) === null || _a === void 0 ? void 0 : _a.length);
+    const taskbarIdPrefixLookup = {
+      primary: this.isDetail ? "snkGridHeaderTaskbar.detail" : "snkGridHeaderTaskbar",
+      secondary: this.isDetail ? "snkGridHeaderTaskbar.detail" : "snkGridHeaderTaskbar",
+      singleTaskbar: this.isDetail ? "snkGridHeaderTaskbar.singleTaskbar.detail" : "snkGridHeaderTaskbar.singleTaskbar"
+    };
+    const taskbarIdPrefix = taskbarIdPrefixLookup[this.presentationMode];
+    let headerTaskbarId = hasSelectedRecord ? `${taskbarIdPrefix}.selected` : `${taskbarIdPrefix}.unselected`;
+    if (((_b = this._dataState) === null || _b === void 0 ? void 0 : _b.isDirty) && this.presentationMode === PresentationMode.SINGLE_TASKBAR) {
+      headerTaskbarId = "snkGridHeaderTaskbar.singleTaskbar.finish_edition";
+    }
+    return headerTaskbarId;
+  }
   getTopTaskBarId() {
     var _a;
-    const sufix = this.presentationMode === PresentationMode.SECONDARY ? ".secondary" : "";
+    const suffixLookup = {
+      primary: "",
+      secondary: ".secondary",
+      singleTaskbar: ".singleTaskbar"
+    };
+    const sufix = suffixLookup[this.presentationMode];
     if ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) {
       return `snkGridTopTaskbar.finish_edition${sufix}`;
     }
     return `snkGridTopTaskbar.regular${sufix}`;
   }
   getPrimaryButton() {
-    return this.presentationMode === PresentationMode.PRIMARY ? "INSERT" : "";
+    const primaryButtonLookup = {
+      primary: "INSERT",
+      secondary: "",
+      singleTaskbar: "INSERT"
+    };
+    return primaryButtonLookup[this.presentationMode];
   }
   getColumnSearch(actionButton, item) {
     if (this._columnSearch != undefined) {
@@ -376,7 +400,7 @@ export class SnkGrid {
       return undefined;
     }
     return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, this._showSnkFilterBar &&
-      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail) }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" })), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId }, h("slot", { name: this.gridHeaderCustomSlotId }))), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
+      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" })), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId, overflowStrategy: 'none' }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, presentationMode: this.presentationMode, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId }, h("slot", { name: this.gridHeaderCustomSlotId }))), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -573,7 +597,7 @@ export class SnkGrid {
         "mutable": false,
         "complexType": {
           "original": "PresentationMode",
-          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY",
+          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY | PresentationMode.SINGLE_TASKBAR",
           "references": {
             "PresentationMode": {
               "location": "import",
@@ -719,6 +743,23 @@ export class SnkGrid {
         "attribute": "top-taskbar-custom-slot-id",
         "reflect": false,
         "defaultValue": "'GRID_TASKBAR_CUSTOM_ELEMENTS'"
+      },
+      "disablePersonalizedFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Desabilita a apresenta\u00E7\u00E3o da op\u00E7\u00E3o de filtros personalizados na filter bar (chip de filtros) \ne no modal lateral de filtros (container de filtros personalizados)."
+        },
+        "attribute": "disable-personalized-filter",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.js

@@ -190,7 +190,7 @@ export class SnkPersonalizedFilter {
     return personalizedFilter;
   }
   addFilterGroupCondition(personalizedFilter) {
-    if (!personalizedFilter.assistent.operand) {
+    if (personalizedFilter.assistent && !personalizedFilter.assistent.operand) {
       personalizedFilter.assistent.operand = FilterGroupCondition.AND;
     }
   }

package/dist/collection/components/snk-pesquisa/snk-pesquisa.css

@@ -6,7 +6,7 @@
   --snk-pesquisa--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do componente.*/
   --snk-pesquisa--font-weight: var(--text-weight--medium, 400);
-  
+
   /* records */
   /*@doc Define a cor da fonte do indicador de registros do componente.*/
   --snk-pesquisa__records--color: var(--text--primary, #626e82);
@@ -39,7 +39,6 @@
   /*@doc Define a largura da barra de rolagem do componente.*/
   --snk-pesquisa__scrollbar--width: var(--space--medium, 12px);
 
-  max-height: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -70,7 +69,6 @@
 .snk-pesquisa__content {
   display: flex;
   flex-direction: column;
-  height: 100%;
   overflow-y: auto;
   scrollbar-width: thin;
 
@@ -148,4 +146,4 @@
 .snk-pesquisa__btn:hover {
   /*public*/
   color: var(--snk-pesquisa__btn-hover--color);
-}
+}

package/dist/collection/components/snk-simple-crud/snk-simple-crud.js

@@ -34,6 +34,8 @@ export class SnkSimpleCrud {
     this.taskbarManager = undefined;
     this.messagesBuilder = undefined;
     this.useEnterLikeTab = false;
+    this.actionsList = undefined;
+    this.configName = undefined;
   }
   resolveInMemoryBtns(taskbarButtons) {
     const newTaskBarConfig = [...taskbarButtons];
@@ -232,7 +234,7 @@ export class SnkSimpleCrud {
   }
   getActionsList() {
     var _a, _b;
-    return [{
+    const hardList = [{
         value: StringUtils.generateUUID(),
         label: (_b = (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage("snkSimpleCrud.findColumn", undefined)) !== null && _b !== void 0 ? _b : "Buscar",
         disableCloseOnSelect: true,
@@ -241,6 +243,16 @@ export class SnkSimpleCrud {
           ? this.getColumnSearch(actionButton, item)
           : this.getFieldSearch(actionButton, item)
       }];
+    if (this.taskbarManager != undefined && this.taskbarManager.getMoreOptions != undefined) {
+      const taskbarID = this.getTopTaskBarId();
+      return hardList.concat(this.taskbarManager.getMoreOptions(taskbarID, this.configName, this.dataState, this.actionsList));
+    }
+    return hardList.concat(this.actionsList);
+  }
+  getTopTaskBarId() {
+    var _a;
+    return ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? `snkGridTopTaskbar.finish_edition${PresentationMode.PRIMARY}` :
+      `snkGridTopTaskbar.regular${PresentationMode.PRIMARY}`;
   }
   async keyDownListener(event) {
     if (!event.ctrlKey || event.key == undefined || event.key.toUpperCase() !== "F") {
@@ -494,6 +506,46 @@ export class SnkSimpleCrud {
         "attribute": "use-enter-like-tab",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "actionsList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Action>",
+          "resolved": "Action[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Action": {
+              "location": "import",
+              "path": "../snk-taskbar/snk-taskbar"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00F5es a serem colocadas no bot\u00E3o \"Mais op\u00E7\u00F5es\" do componente snk-taskbar."
+        }
+      },
+      "configName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para salvar as configura\u00E7\u00F5es dos blocos de constru\u00E7\u00E3o."
+        },
+        "attribute": "config-name",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/snk-taskbar/elements/taskbar-actions-button/taskbar-actions-button.js

@@ -11,6 +11,9 @@ export class TaskbarActionsButton {
       await this.hideActions();
     }
   }
+  async handleClose() {
+    await this.hideActions();
+  }
   /**
    * Exibe a lista de ações.
    */
@@ -56,12 +59,28 @@ export class TaskbarActionsButton {
     return this._showDropdown && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   onSelectAction(iAction) {
-    const selectedAction = this.actions.find(action => action.value === iAction.id);
+    const actions = this.actions.map(action => (Object.assign(Object.assign({}, action), { id: action.value })));
+    const selectedAction = this.getSelectedAction(iAction.id, actions);
     this.taskbarActionSelected.emit(selectedAction);
     if (!selectedAction.disableCloseOnSelect) {
       this._showDropdown = false;
     }
   }
+  getSelectedAction(id, actions) {
+    let selectedItem = null;
+    for (const item of actions) {
+      if (item.id === id) {
+        selectedItem = item;
+        break;
+      }
+      if (!(item === null || item === void 0 ? void 0 : item.children))
+        continue;
+      selectedItem = this.getSelectedAction(id, item.children);
+      if (selectedItem)
+        break;
+    }
+    return selectedItem;
+  }
   dropdownItemBuilder(item, _level) {
     const itemAction = this.actions.find(action => action.value === item.id);
     if (!itemAction || !itemAction.itemBuilder) {
@@ -296,6 +315,12 @@ export class TaskbarActionsButton {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "ezOpenModal",
+        "method": "handleClose",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/snk-taskbar/snk-taskbar.css

@@ -1,3 +1,20 @@
 :host {
   display: flex;
+  flex-wrap: wrap;
+}
+
+:host.no-wrap {
+  flex-wrap: nowrap;
+}
+
+:host.full-width{
+  width: 100%;
+}
+
+:host.align-right{
+  justify-content: flex-end;
+}
+
+.overflowed {
+  display: none;
 }

package/dist/collection/components/snk-taskbar/snk-taskbar.js

@@ -1,4 +1,4 @@
-import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, OverflowDirection, OverflowWatcher, StringUtils, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import { AuthorizationConfig } from '../snk-configurator/AuthorizationConfig';
 import { AuthorizationElements, buildCustomButton, buildElem, TaskbarElement, VisibleWhenForbidden, } from './elements/taskbar-elements';
@@ -6,6 +6,8 @@ import { PresentationMode } from '../../lib/@types';
 export class SnkTaskbar {
   constructor() {
     this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
+    this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME = 'taskbar-custom-elements-container';
+    this.ACTIONS_BUTTON_TAG = 'TASKBAR-ACTIONS-BUTTON';
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -23,11 +25,14 @@ export class SnkTaskbar {
       [TaskbarElement.ATTACH]: "snkTaskbar.titleAttach",
     };
     this._permissions = undefined;
+    this._overFlowedElements = [];
     this._customElements = undefined;
     this._customElementsId = undefined;
     this._slotContainer = undefined;
+    this.alignRigth = false;
     this.customSlotId = "TASKBAR_CUSTOM_ELEMENTS";
     this.customContainerId = undefined;
+    this.overflowStrategy = 'hiddenItems';
     this.configName = undefined;
     this.resourceID = undefined;
     this.buttons = undefined;
@@ -41,6 +46,7 @@ export class SnkTaskbar {
   }
   observeButtons() {
     this._definitions = undefined;
+    requestAnimationFrame(() => { var _a; return (_a = this._overFlowWatcher) === null || _a === void 0 ? void 0 : _a.forceUpdate(); });
   }
   // Internal methods
   elementsFromString(strButtons) {
@@ -221,15 +227,52 @@ export class SnkTaskbar {
     }
     this.validatePresentationMode();
   }
+  handleOverFlow(overFlowingElements) {
+    const elementsToHandle = overFlowingElements.filter(element => !this.hasToIgnoreOverFlow(element));
+    this.resetOverFlowedElements();
+    this.doOverFlowElements(elementsToHandle);
+  }
+  resetOverFlowedElements() {
+    this._overFlowedElements.forEach(element => {
+      element.classList.remove(OVERFLOWED_CLASS_NAME);
+    });
+    this._overFlowedElements = [];
+  }
+  doOverFlowElements(overFlowedElements) {
+    overFlowedElements.forEach(element => {
+      element.classList.add(OVERFLOWED_CLASS_NAME);
+      this._overFlowedElements.push(element);
+    });
+  }
+  hasToIgnoreOverFlow(element) {
+    return element.classList.contains(this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME);
+  }
+  handleOverFlowStrategy() {
+    if (this.overflowStrategy === 'hiddenItems') {
+      this._overFlowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
+    }
+  }
+  buildOverFlowWatcherParams() {
+    return {
+      element: this._element,
+      callback: this.handleOverFlow.bind(this),
+      overFlowDirection: OverflowDirection.HORIZONTAL,
+      deltaSize: 1,
+      notOverFlow: ["moreOptions"]
+    };
+  }
   componentDidLoad() {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    this.handleOverFlowStrategy();
   }
   componentDidRender() {
     this.appendCustomElementsInTaskbar();
   }
   disconnectedCallback() {
+    var _a;
     this.unlinkAllCustomElements();
+    (_a = this._overFlowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   unlinkAllCustomElements() {
     var _a;
@@ -247,7 +290,7 @@ export class SnkTaskbar {
       return undefined;
     }
     let index = 0;
-    return (h(Host, null, this.removeEmpty(this._definitions.map((elem) => {
+    return (h(Host, { class: this.getHostClasses() }, this.removeEmpty(this._definitions.map((elem) => {
       var _a;
       if (elem === TaskbarElement.DIVIDER) {
         index = 0;
@@ -265,7 +308,12 @@ export class SnkTaskbar {
         return this.addCustomElementContainer(elem);
       }
       return h("slot", { name: elem });
-    })), h("div", { class: "taskbar-custom-elements-container" }, h("slot", { name: this.customSlotId }))));
+    })), h("div", { class: this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME }, h("slot", { name: this.customSlotId }))));
+  }
+  getHostClasses() {
+    if (this.overflowStrategy !== 'hiddenItems')
+      return 'no-wrap';
+    return `full-width ${this.alignRigth ? 'align-right' : ""}`;
   }
   static get is() { return "snk-taskbar"; }
   static get encapsulation() { return "scoped"; }
@@ -281,6 +329,24 @@ export class SnkTaskbar {
   }
   static get properties() {
     return {
+      "alignRigth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para determinar O alinhamento dos items na taskbar."
+        },
+        "attribute": "align-rigth",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "customSlotId": {
         "type": "string",
         "mutable": false,
@@ -316,6 +382,24 @@ export class SnkTaskbar {
         "attribute": "custom-container-id",
         "reflect": false
       },
+      "overflowStrategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'hiddenItems' | 'none'",
+          "resolved": "\"hiddenItems\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define como ser\u00E1 o comportamento da taskbar quando ocorrer overflow"
+        },
+        "attribute": "overflow-strategy",
+        "reflect": false,
+        "defaultValue": "'hiddenItems'"
+      },
       "configName": {
         "type": "string",
         "mutable": false,
@@ -472,7 +556,7 @@ export class SnkTaskbar {
         "mutable": true,
         "complexType": {
           "original": "PresentationMode",
-          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY",
+          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY | PresentationMode.SINGLE_TASKBAR",
           "references": {
             "PresentationMode": {
               "location": "import",
@@ -515,6 +599,7 @@ export class SnkTaskbar {
   static get states() {
     return {
       "_permissions": {},
+      "_overFlowedElements": {},
       "_customElements": {},
       "_customElementsId": {},
       "_slotContainer": {}

package/dist/collection/lib/@types/index.js

@@ -2,6 +2,7 @@ export var PresentationMode;
 (function (PresentationMode) {
   PresentationMode["PRIMARY"] = "primary";
   PresentationMode["SECONDARY"] = "secondary";
+  PresentationMode["SINGLE_TASKBAR"] = "singleTaskbar";
 })(PresentationMode || (PresentationMode = {}));
 export var DataExporterOption;
 (function (DataExporterOption) {

package/dist/collection/lib/configs/ConfigStorage.js

@@ -2,11 +2,12 @@ import { FormConfigFetcher } from "../http/data-fetcher/fetchers/form-config-fet
 import GridConfigFetcher from "../http/data-fetcher/fetchers/grid-config-fetcher";
 import FilterBarConfigFetcher from "../http/data-fetcher/fetchers/filter-bar-config-fetcher";
 import PersonalizedFilterFetcher from "../http/data-fetcher/fetchers/personalized-filter-fetcher";
-const CONFIG_SOURCE = {
-  form: "form",
-  grid: "grid",
-  filterBar: "filterBar"
-};
+var CONFIG_SOURCE;
+(function (CONFIG_SOURCE) {
+  CONFIG_SOURCE["form"] = "form";
+  CONFIG_SOURCE["grid"] = "grid";
+  CONFIG_SOURCE["filterBar"] = "filterBar";
+})(CONFIG_SOURCE || (CONFIG_SOURCE = {}));
 export class ConfigStorage {
   static preload(resourceID, configName) {
     ConfigStorage.loadFormConfig(configName, resourceID);
@@ -34,13 +35,11 @@ export class ConfigStorage {
     return ConfigStorage.configById.get(cacheID);
   }
   static async saveFilterBarConfig(config, name, resourceID) {
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.filterBar, resourceID);
-    this.configById.delete(cacheID);
+    await this.deleteFilterBarConfigCache(name, resourceID);
     return this.filterBarConfigFetcher.saveConfig(config, resourceID, name);
   }
   static async saveFormConfig(config, name, resourceID) {
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.form, resourceID);
-    this.configById.delete(cacheID);
+    await this.deleteFormConfigCache(name, resourceID);
     return this.formConfigFetcher.saveConfig(config, name, resourceID);
   }
   static async saveCardState(config, name, resourceID) {
@@ -50,18 +49,16 @@ export class ConfigStorage {
     if (config == undefined) {
       return;
     }
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.grid, resourceID);
-    this.configById.delete(cacheID);
+    await this.deleteGridConfigCache(name, resourceID);
     return this.gridConfigFetcher.saveConfig(config, name, resourceID);
   }
   static async loadPersonalizedFilter(filterId, resourceID, configName) {
     return this.personalizedFilterFetcher.loadPersonalizedFilter(resourceID, filterId, configName);
   }
   static async savePersonalizedFilter(personalizedFilter, resourceID, configName) {
-    //Ao criar ou alterar um filtro personalizado, 
+    //Ao criar ou alterar um filtro personalizado,
     //precisamos remover o cache do status da filterbar.
-    const cacheID = this.buildCacheID(configName, CONFIG_SOURCE.filterBar, resourceID);
-    this.configById.delete(cacheID);
+    await this.deleteFilterBarConfigCache(configName, resourceID);
     return this.personalizedFilterFetcher.savePersonalizedFilter(personalizedFilter, resourceID, configName);
   }
   static async removePersonalizedFilter(personalizedFilter, resourceID, configName) {
@@ -70,6 +67,19 @@ export class ConfigStorage {
   static async validatePersonalizedFilter(dataUnitName, expression) {
     return this.personalizedFilterFetcher.validatePersonalizedFilter(dataUnitName, expression);
   }
+  static async deleteGridConfigCache(name, resourceID) {
+    await this.deleteConfigCache(name, resourceID, CONFIG_SOURCE.grid);
+  }
+  static async deleteFormConfigCache(name, resourceID) {
+    await this.deleteConfigCache(name, resourceID, CONFIG_SOURCE.form);
+  }
+  static async deleteFilterBarConfigCache(name, resourceID) {
+    await this.deleteConfigCache(name, resourceID, CONFIG_SOURCE.filterBar);
+  }
+  static async deleteConfigCache(name, resourceID, source) {
+    const cacheID = ConfigStorage.buildCacheID(name, source, resourceID);
+    this.configById.delete(cacheID);
+  }
   static buildCacheID(name, source, resourceID) {
     if (name == undefined) {
       return `req_${source}_${resourceID}`;

package/dist/collection/lib/dataUnit/InMemoryLoader.js

@@ -13,7 +13,7 @@ export default class InMemoryLoader {
     this.dataUnit.loadMetadata().then(() => this.dataUnit.loadData());
   }
   getRecordsToLoad() {
-    if (this._initialRecords == undefined && this.dataUnit.records.length > 0) {
+    if (this._initialRecords == undefined || this.dataUnit.records.length > 0) {
       this._initialRecords = this.dataUnit.records;
     }
     return this._initialRecords;