@sankhyalabs/sankhyablocks 8.2.0-rc.1 → 8.2.0-rc.2

package/dist/components/snk-grid2.js

@@ -4,7 +4,7 @@ import { UserInterface } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMeta
 import { d as defineCustomElement$1, T as TaskbarElement } from './snk-taskbar2.js';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { P as PresentationMode } from './index2.js';
-import { S as SnkMultiSelectionListDataSource, T as TaskbarProcessor } from './SnkMultiSelectionListDataSource.js';
+import { T as TaskbarProcessor, S as SnkMultiSelectionListDataSource } from './SnkMultiSelectionListDataSource.js';
 import { s as store } from './index3.js';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { d as defineCustomElement$h } from './snk-actions-button2.js';
@@ -32,7 +32,6 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
     this.gridDoubleClick = createEvent(this, "gridDoubleClick", 7);
-    this._multiSelectionListDataSource = new SnkMultiSelectionListDataSource();
     this._topTaskbarProcessor = new TaskbarProcessor({
       "snkGridTopTaskbar.regular": ["FORM_MODE", "CONFIGURATOR", "INSERT"],
       "snkGridTopTaskbar.regular.secondary": ["FORM_MODE", "CONFIGURATOR", "INSERT"],
@@ -49,7 +48,9 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._dataState = undefined;
     this._gridConfig = undefined;
     this._popUpGridConfig = false;
+    this.columnFilterDataSource = new SnkMultiSelectionListDataSource();
     this.configName = undefined;
+    this.resourceID = undefined;
     this.selectionToastConfig = undefined;
     this.actionsList = undefined;
     this.isDetail = undefined;
@@ -61,6 +62,9 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.useEnterLikeTab = false;
     this.recordsValidator = undefined;
     this.canEdit = true;
+    this.taskbarCustomContainerId = undefined;
+    this.gridHeaderCustomSlotId = 'GRID_HEADER_CUSTOM_ELEMENTS';
+    this.topTaskbarCustomSlotId = 'GRID_TASKBAR_CUSTOM_ELEMENTS';
   }
   /**
    * Exibe a janela de configurações da grade.
@@ -108,20 +112,17 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._gridConfig = config;
   }
   loadConfig() {
-    ConfigStorage.get()
-      .then((instance) => {
-      instance.loadGridConfig(this.configName)
-        .then((config) => {
-        this.setGridConfig(config);
-      })
-        .catch((error) => {
-        console.warn(error);
-      });
+    ConfigStorage.loadGridConfig(this.configName, this.resourceID)
+      .then((config) => {
+      this.setGridConfig(config);
+    })
+      .catch((error) => {
+      console.warn(error);
     });
   }
   gridConfigChangeHandler(evt) {
     const config = evt.detail;
-    ConfigStorage.saveGridConfig(config, this.configName);
+    ConfigStorage.saveGridConfig(config, this.configName, this.resourceID);
     evt.stopPropagation();
   }
   modalConfigChangeHandler(evt) {
@@ -234,10 +235,11 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   finshLoading() {
+    var _a, _b;
     this._dataUnitLoadLockerResolver = this._dataUnit.addLoadingLocker();
     this.addElementID();
-    this._multiSelectionListDataSource.setApplication(this._application);
-    this._multiSelectionListDataSource.setDataUnit(this._dataUnit);
+    (_a = this.columnFilterDataSource) === null || _a === void 0 ? void 0 : _a.setApplication(this._application);
+    (_b = this.columnFilterDataSource) === null || _b === void 0 ? void 0 : _b.setDataUnit(this._dataUnit);
   }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -290,7 +292,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this._dataUnit || this._dataUnit.records.length === 0)
       invisibleButtons.push("DATA_EXPORTER");
     if (this._dataState && this._dataState.selectionInfo.mode === SelectionMode.ALL_RECORDS)
-      invisibleButtons.push("ACTIONS_BUTTON");
+      invisibleButtons.push("ACTIONS_BUTTON", TaskbarElement.UPDATE);
     return invisibleButtons;
   }
   componentWillRender() {
@@ -328,13 +330,15 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this._dataUnit) {
       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" }, 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 }), ((_b = (_a = this._snkFilterBar) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-      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() })), 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: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, onComponentReady: () => this.onEzGridReady(), columnfilterDataSource: this._multiSelectionListDataSource, 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.actionsList })), 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() }))));
+    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" }, 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 }), ((_b = (_a = this._snkFilterBar) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+      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: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, onComponentReady: () => this.onEzGridReady(), 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.actionsList, 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 }))));
   }
   get _element() { return this; }
   static get style() { return snkGridCss; }
 }, [6, "snk-grid", {
+    "columnFilterDataSource": [1040],
     "configName": [1, "config-name"],
+    "resourceID": [1, "resource-i-d"],
     "selectionToastConfig": [16],
     "actionsList": [16],
     "isDetail": [4, "is-detail"],
@@ -346,6 +350,9 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "useEnterLikeTab": [4, "use-enter-like-tab"],
     "recordsValidator": [16],
     "canEdit": [4, "can-edit"],
+    "taskbarCustomContainerId": [1, "taskbar-custom-container-id"],
+    "gridHeaderCustomSlotId": [1, "grid-header-custom-slot-id"],
+    "topTaskbarCustomSlotId": [1, "top-taskbar-custom-slot-id"],
     "_dataUnit": [32],
     "_dataState": [32],
     "_gridConfig": [32],

package/dist/components/snk-personalized-filter2.js

@@ -41,6 +41,7 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.entityUri = undefined;
     this.filterId = undefined;
     this.configName = undefined;
+    this.resourceID = undefined;
   }
   /*
    * Cria um novo filtro se não houver nenhum filtro existente
@@ -77,17 +78,15 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this._filterAssistent = ObjectUtils.copy(newPersonalizedFilter);
   }
   loadFilter(newValue, oldValue) {
-    if (newValue == null || oldValue == newValue) {
+    if (newValue == null || oldValue == newValue || this.resourceID == undefined) {
       return;
     }
-    ConfigStorage.get().then((_instance) => {
-      ConfigStorage.loadPersonalizedFilter(newValue, this.configName)
-        .then((resp) => {
-        const personalizedFilter = this.addLabelToItems(resp);
-        this._filterAssistent = personalizedFilter;
-        this._originalFilterAssistent = ObjectUtils.copy(personalizedFilter);
-        this._filterAssistentMode = this._filterAssistent.hasOwnProperty("assistent") && this._filterAssistent.assistent != undefined;
-      });
+    ConfigStorage.loadPersonalizedFilter(newValue, this.resourceID, this.configName)
+      .then((resp) => {
+      const personalizedFilter = this.addLabelToItems(resp);
+      this._filterAssistent = personalizedFilter;
+      this._originalFilterAssistent = ObjectUtils.copy(personalizedFilter);
+      this._filterAssistentMode = this._filterAssistent.hasOwnProperty("assistent") && this._filterAssistent.assistent != undefined;
     });
   }
   componentWillLoad() {
@@ -112,7 +111,7 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return this._application.messagesBuilder.getMessage(key, params);
   }
   saveFilter() {
-    ConfigStorage.savePersonalizedFilter(this._filterAssistent, this.configName).then((personalizedFilter) => {
+    ConfigStorage.savePersonalizedFilter(this._filterAssistent, this.resourceID, this.configName).then((personalizedFilter) => {
       this._elButtonSave.enabled = false;
       const messageToken = !!this._filterAssistent.id ? 'confirmEdit' : 'confirmSave';
       ApplicationUtils.info(this.getMessage(`snkPersonalizedFilter.${messageToken}.title`), { iconName: "check" });
@@ -123,7 +122,7 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     });
   }
   removeFilter() {
-    ConfigStorage.removePersonalizedFilter(this._filterAssistent, this.configName);
+    ConfigStorage.removePersonalizedFilter(this._filterAssistent, this.resourceID, this.configName);
   }
   hasChangesToSave() {
     return JSON.stringify(this._filterAssistent) === JSON.stringify(this._originalFilterAssistent);
@@ -301,6 +300,7 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "entityUri": [1025, "entity-uri"],
     "filterId": [1025, "filter-id"],
     "configName": [1025, "config-name"],
+    "resourceID": [1, "resource-i-d"],
     "_filterAssistentMode": [32],
     "_filterAssistent": [32],
     "createPersonalizedFilter": [64]

package/dist/components/snk-print-selector.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { P as PrintUtils } from './DataFetcher.js';
+import { P as PrintUtils } from './PrintUtils.js';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import ModalButtonStatus from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container/modal-button-status';

package/dist/components/snk-simple-crud2.js

@@ -1,43 +1,60 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { DataUnit, StringUtils, SortMode, DataType, ChangeOperation, ObjectUtils, ApplicationContext, UserInterface } from '@sankhyalabs/core';
+import { DataUnit, defaultDataLoader, StringUtils, ChangeOperation, ObjectUtils, ApplicationContext, DataType, UserInterface } from '@sankhyalabs/core';
 import { V as VIEW_MODE, S as SIMPLE_CRUD_MODE } from './constants.js';
 import { T as TaskbarElement, d as defineCustomElement$1 } from './snk-taskbar2.js';
 import './DataFetcher.js';
 import './pesquisa-fetcher.js';
 import { P as PresentationMode } from './index2.js';
-import { S as SnkMultiSelectionListDataSource, T as TaskbarProcessor } from './SnkMultiSelectionListDataSource.js';
-import { DISTINCT_FILTER_NAME_PREFIX } from '@sankhyalabs/ezui/dist/collection/utils/constants';
 import { d as defineCustomElement$5 } from './snk-actions-button2.js';
+import '@sankhyalabs/ezui/dist/collection/utils/constants';
+import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
+import './filter-item-type.enum.js';
+import './form-config-fetcher.js';
+import { S as SnkMultiSelectionListDataSource, T as TaskbarProcessor } from './SnkMultiSelectionListDataSource.js';
 import { d as defineCustomElement$4 } from './snk-data-exporter2.js';
 import { d as defineCustomElement$3 } from './snk-data-unit2.js';
 import { d as defineCustomElement$2 } from './snk-exporter-email-sender2.js';
 
 class InMemoryLoader {
   constructor(metadata, records) {
-    this.records = records || [];
+    this.records = records;
     this.metadata = metadata;
     this._dataUnit = new DataUnit(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME);
     this._dataUnit.metadataLoader = () => this.metadaLoader();
-    this._dataUnit.dataLoader = (dataUnit, request) => this.dataLoader(dataUnit, request);
+    this._dataUnit.dataLoader = (dataUnit, request) => defaultDataLoader(dataUnit, request, this.getRecordsToLoad());
     this._dataUnit.saveLoader = (_dataUnit, changes) => this.saveLoader(_dataUnit, changes);
     this._dataUnit.removeLoader = (_dataUnit, recordIds) => this.removeLoader(_dataUnit, recordIds);
     this.dataUnit.loadMetadata().then(() => this.dataUnit.loadData());
   }
+  getRecordsToLoad() {
+    if (this._initialRecords) {
+      try {
+        return this._initialRecords;
+      }
+      finally {
+        this._initialRecords = undefined;
+      }
+    }
+    return this.dataUnit.records;
+  }
   get dataUnit() {
     return this._dataUnit;
   }
   get records() {
-    return this._records;
+    return this.dataUnit.records;
   }
   set records(records) {
-    this._records = records === null || records === void 0 ? void 0 : records.map(record => {
+    const newRecords = records === null || records === void 0 ? void 0 : records.map(record => {
       if (!record["__record__id__"]) {
         record["__record__id__"] = this.generateUniqueId();
       }
       return record;
     });
     if (this._dataUnit) {
-      this._dataUnit.records = [...this._records];
+      this._dataUnit.records = newRecords;
+    }
+    else {
+      this._initialRecords = newRecords;
     }
   }
   get metadata() {
@@ -55,76 +72,16 @@ class InMemoryLoader {
   metadaLoader() {
     return Promise.resolve(this._metadata);
   }
-  dataLoader(dataUnit, request) {
-    const filters = this.getColumnFilters(dataUnit);
-    let records = this.applyFilters(filters);
-    if (request.sort) {
-      request.sort.forEach(sort => {
-        records = records.sort((recordA, recordB) => {
-          const fieldA = recordA[sort.field];
-          const fieldB = recordB[sort.field];
-          const sortFn = this.getSortFn(sort.dataType);
-          return sortFn(fieldA, fieldB) * (sort.mode == SortMode.ASC ? 1 : -1);
-        });
-      });
-    }
-    return Promise.resolve({ records: records });
-  }
-  applyFilters(filters) {
-    let records = [...this._records];
-    filters.forEach(filter => {
-      records = records.filter(record => { var _a; return filter.values.includes((_a = record[filter.column]) === null || _a === void 0 ? void 0 : _a.toString()); });
-    });
-    return records;
-  }
-  getColumnFilters(dataUnit) {
-    var _a, _b;
-    const allFilters = (_a = dataUnit.getFilters()) !== null && _a !== void 0 ? _a : [];
-    const columnFilters = (_b = allFilters.filter(filter => { var _a; return (_a = filter.name) === null || _a === void 0 ? void 0 : _a.includes(DISTINCT_FILTER_NAME_PREFIX); })) !== null && _b !== void 0 ? _b : [];
-    return columnFilters.map(filter => {
-      var _a, _b;
-      return {
-        column: (_b = (_a = filter.name) === null || _a === void 0 ? void 0 : _a.replace(DISTINCT_FILTER_NAME_PREFIX, "")) !== null && _b !== void 0 ? _b : "",
-        values: filter.params.map(param => param.value),
-      };
-    });
-  }
-  getSortFn(type) {
-    switch (type) {
-      case DataType.NUMBER:
-        return this.sortNumber;
-      case DataType.DATE:
-        return this.sortDate;
-      case DataType.OBJECT:
-        return this.sortObject;
-      default:
-        return StringUtils.compare;
-    }
-  }
-  sortObject(a, b) {
-    return StringUtils.compare(a === null || a === void 0 ? void 0 : a["label"], b === null || b === void 0 ? void 0 : b["label"]);
-  }
-  sortNumber(a, b) {
-    return a - b;
-  }
-  sortDate(a, b) {
-    let timeA = a.getTime(), timeB = b.getTime();
-    return timeA === timeB ? 0 : (timeA < timeB ? -1 : 1);
-  }
   saveLoader(_dataUnit, changes) {
     return new Promise((resolve) => {
       let dataUnitRecords = [];
       changes.forEach(change => {
         let { record, updatingFields, operation } = change;
-        let isAdd = false;
+        const changedRecord = Object.assign(Object.assign({}, record), updatingFields);
         if (operation === ChangeOperation.INSERT ||
           operation === ChangeOperation.COPY) {
-          record["__old__id__"] = record["__record__id__"];
-          record["__record__id__"] = this.generateUniqueId();
-          isAdd = true;
-        }
-        const changedRecord = Object.assign(Object.assign({}, record), updatingFields);
-        if (isAdd) {
+          changedRecord["__old__id__"] = record["__record__id__"];
+          changedRecord["__record__id__"] = this.generateUniqueId();
           this.records.push(changedRecord);
         }
         else {
@@ -138,7 +95,6 @@ class InMemoryLoader {
   }
   removeLoader(_dataUnit, recordIds) {
     return new Promise((resolve) => {
-      this._records = this._records.filter(record => !recordIds.includes(record["__record__id__"]));
       resolve(recordIds);
     });
   }
@@ -154,6 +110,7 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.dataStateChange = createEvent(this, "dataStateChange", 3);
     this.dataUnitReady = createEvent(this, "dataUnitReady", 3);
     this.actionClick = createEvent(this, "actionClick", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.REGULAR_DEFAULT_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER"];
     this.REGULAR_SELECTED_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "DIVIDER"];
     this._multiSelectionListDataSource = new SnkMultiSelectionListDataSource();
@@ -320,7 +277,7 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     var _a;
-    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-flex ez-box ez-box--shadow" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }), h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
+    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-flex ez-box ez-box--shadow" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }, h("slot", { name: "TASKBAR_CUSTOM_ELEMENTS" })), h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
         ? undefined
         : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab }, h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
   }

package/dist/components/snk-taskbar-custom-elements.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkTaskbarCustomElements extends Components.SnkTaskbarCustomElements, HTMLElement {}
+export const SnkTaskbarCustomElements: {
+  prototype: SnkTaskbarCustomElements;
+  new (): SnkTaskbarCustomElements;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-taskbar-custom-elements.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const snkTaskbarCss = ".sc-snk-taskbar-custom-elements-h{display:flex}.taskbar-custom-elements-container.sc-snk-taskbar-custom-elements{display:none}";
+
+const SnkTaskbarCustomElements$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.slot = 'TASKBAR_CUSTOM_ELEMENTS';
+  }
+  render() {
+    return (h(Host, { slot: this.slot }, h("div", { id: this.slot, class: "taskbar-custom-elements-container" }, h("slot", null))));
+  }
+  static get style() { return snkTaskbarCss; }
+}, [6, "snk-taskbar-custom-elements", {
+    "slot": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-taskbar-custom-elements"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-taskbar-custom-elements":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkTaskbarCustomElements$1);
+      }
+      break;
+  } });
+}
+
+const SnkTaskbarCustomElements = SnkTaskbarCustomElements$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkTaskbarCustomElements, defineCustomElement };

package/dist/components/snk-taskbar2.js

@@ -105,28 +105,29 @@ const buildElem = (element, className, dataElementId, getTitle, action, isEnable
   }
 };
 function textButton(name, className, dataElementId, text, title, action, isEnabled) {
-  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
+  return h("ez-button", { key: dataElementId, title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
 }
 function iconButton(iconName, name, className, dataElementId, title, action, isEnabled) {
-  return h("ez-button", { title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
+  return h("ez-button", { key: dataElementId, title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
 }
 function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
-  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
+  return h("ez-button", { key: dataElementId, title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
     h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
 function actionButton(element, className, dataElementId, title, action, isEnabled, actions) {
   return actions && actions.length > 0
-    ? h("ez-actions-button", { title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    ? h("ez-actions-button", { key: dataElementId, title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
     : undefined;
 }
 
-const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";
+const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}.taskbar-custom-elements-container.sc-snk-taskbar{display:none}";
 
 const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
+    this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -144,7 +145,13 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       [TaskbarElement.ATTACH]: "snkTaskbar.titleAttach",
     };
     this._permissions = undefined;
+    this._customElements = undefined;
+    this._customElementsId = undefined;
+    this._slotContainer = undefined;
+    this.customSlotId = "TASKBAR_CUSTOM_ELEMENTS";
+    this.customContainerId = undefined;
     this.configName = undefined;
+    this.resourceID = undefined;
     this.buttons = undefined;
     this.customButtons = undefined;
     this.actionsList = undefined;
@@ -283,14 +290,52 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return true;
     });
   }
+  appendCustomElementsInTaskbar() {
+    this._customElementsId.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      const container = this._element.querySelector(`#${id}`);
+      if (container) {
+        container === null || container === void 0 ? void 0 : container.appendChild(customElement);
+      }
+      else {
+        this.unlinkCustomElementFromTaskbar(customElement);
+      }
+    });
+  }
+  addCustomElementContainer(elem) {
+    const elementId = `${this.TASKBAR_ITEM_ID_PREFIX}${elem}`;
+    if (!this._customElementsId.includes(elementId)) {
+      this._customElementsId.push(elementId);
+    }
+    return h("span", { key: elementId, id: elementId });
+  }
+  getCustomElements() {
+    var _a, _b;
+    this._customElementsId = [];
+    this._customElements = new Map();
+    this._slotContainer = this.buildSlotContainer();
+    const customElementsArray = Array.from((_b = (_a = this._slotContainer) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+    customElementsArray.forEach(item => this._customElements.set(item.id, item));
+  }
+  buildSlotContainer() {
+    if (this.customContainerId) {
+      const container = document.querySelector(`#${this.customContainerId}`);
+      return container === null || container === void 0 ? void 0 : container.querySelector(`#${this.customSlotId}`);
+    }
+    else {
+      return this._element.querySelector(`#${this.customSlotId}`);
+    }
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     if (this._application) {
-      this._application.getAllAccess().then(access => this._permissions = access);
+      this._application.getAllAccess(this.resourceID).then(access => this._permissions = access);
     }
     else {
       this._permissions = {};
     }
+    this.getCustomElements();
   }
   componentWillRender() {
     if (this._definitions == undefined && this._permissions) {
@@ -302,12 +347,30 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
+  componentDidRender() {
+    this.appendCustomElementsInTaskbar();
+  }
+  disconnectedCallback() {
+    this.unlinkAllCustomElements();
+  }
+  unlinkAllCustomElements() {
+    var _a;
+    (_a = this._customElementsId) === null || _a === void 0 ? void 0 : _a.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      this.unlinkCustomElementFromTaskbar(customElement);
+    });
+  }
+  unlinkCustomElementFromTaskbar(customElement) {
+    this._slotContainer.appendChild(customElement);
+  }
   render() {
     if (this._definitions === undefined) {
       return undefined;
     }
     let index = 0;
     return (h(Host, null, this.removeEmpty(this._definitions.map((elem) => {
+      var _a;
       if (elem === TaskbarElement.DIVIDER) {
         index = 0;
       }
@@ -317,11 +380,14 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (TaskbarElement[elem]) {
         return this.getElement(index, TaskbarElement[elem]);
       }
-      if (this.customButtons.has(elem)) {
+      if ((_a = this.customButtons) === null || _a === void 0 ? void 0 : _a.has(elem)) {
         return this.getElement(index, this.customButtons.get(elem));
       }
+      if (this._customElements.has(elem)) {
+        return this.addCustomElementContainer(elem);
+      }
       return h("slot", { name: elem });
-    }))));
+    })), h("div", { class: "taskbar-custom-elements-container" }, h("slot", { name: this.customSlotId }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -329,7 +395,10 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return snkTaskbarCss; }
 }, [6, "snk-taskbar", {
+    "customSlotId": [1, "custom-slot-id"],
+    "customContainerId": [1, "custom-container-id"],
     "configName": [1, "config-name"],
+    "resourceID": [1, "resource-i-d"],
     "buttons": [1],
     "customButtons": [16],
     "actionsList": [16],
@@ -338,7 +407,10 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "dataUnit": [16],
     "presentationMode": [1537, "presentation-mode"],
     "messagesBuilder": [1040],
-    "_permissions": [32]
+    "_permissions": [32],
+    "_customElements": [32],
+    "_customElementsId": [32],
+    "_slotContainer": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {