@sankhyalabs/sankhyablocks 8.3.2 → 8.4.0-dev.2

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

@@ -174,7 +174,7 @@ export class SnkSimpleCrud {
   }
   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 }))))));
   }
@@ -452,6 +452,28 @@ export class SnkSimpleCrud {
           "resolved": "string",
           "references": {}
         }
+      }, {
+        "method": "formItemsReady",
+        "name": "formItemsReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "Array<HTMLElement>",
+          "resolved": "HTMLElement[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -99,16 +99,16 @@ export const buildElem = (element, className, dataElementId, getTitle, action, i
   }
 };
 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) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+  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;
 }

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

@@ -0,0 +1,43 @@
+import { h, Host } from '@stencil/core';
+export class SnkTaskbarCustomElements {
+  constructor() {
+    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 is() { return "snk-taskbar-custom-elements"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-taskbar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-taskbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "slot": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome do slot da Taskbar onde os elementos customizados dever\u00E3o aparecer."
+        },
+        "attribute": "slot",
+        "reflect": false,
+        "defaultValue": "'TASKBAR_CUSTOM_ELEMENTS'"
+      }
+    };
+  }
+}

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

@@ -1,3 +1,7 @@
 :host {
   display: flex;
 }
+
+.taskbar-custom-elements-container{
+  display: none;
+}

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

@@ -1,10 +1,11 @@
 import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import { AuthorizationConfig } from '../snk-configurator/AuthorizationConfig';
-import { TaskbarElement, buildElem, AuthorizationElements, buildCustomButton, VisibleWhenForbidden } from './elements/taskbar-elements';
+import { AuthorizationElements, buildCustomButton, buildElem, TaskbarElement, VisibleWhenForbidden, } from './elements/taskbar-elements';
 import { PresentationMode } from '../../lib/@types';
 export class SnkTaskbar {
   constructor() {
+    this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -22,7 +23,13 @@ export class SnkTaskbar {
       [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;
@@ -161,14 +168,52 @@ export class SnkTaskbar {
       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) {
@@ -180,12 +225,30 @@ export class SnkTaskbar {
     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;
       }
@@ -195,11 +258,14 @@ export class SnkTaskbar {
       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 }))));
   }
   static get is() { return "snk-taskbar"; }
   static get encapsulation() { return "scoped"; }
@@ -215,6 +281,41 @@ export class SnkTaskbar {
   }
   static get properties() {
     return {
+      "customSlotId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para determinar o identificador do slot que recebe elementos personalizados."
+        },
+        "attribute": "custom-slot-id",
+        "reflect": false,
+        "defaultValue": "\"TASKBAR_CUSTOM_ELEMENTS\""
+      },
+      "customContainerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para determinar o identificador do container na DOM que \u00E9 responsavel por guardar os elementos personalizados\nque n\u00E3o podem ser passados por slot.\n\nExemplo: Elementos customizados na Taskbar da aba de detalhes."
+        },
+        "attribute": "custom-container-id",
+        "reflect": false
+      },
       "configName": {
         "type": "string",
         "mutable": false,
@@ -232,6 +333,23 @@ export class SnkTaskbar {
         "attribute": "config-name",
         "reflect": false
       },
+      "resourceID": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Identificador de recursos como configura\u00E7\u00F5es e acesso."
+        },
+        "attribute": "resource-i-d",
+        "reflect": false
+      },
       "buttons": {
         "type": "string",
         "mutable": false,
@@ -396,7 +514,10 @@ export class SnkTaskbar {
   }
   static get states() {
     return {
-      "_permissions": {}
+      "_permissions": {},
+      "_customElements": {},
+      "_customElementsId": {},
+      "_slotContainer": {}
     };
   }
   static get events() {

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

@@ -1,4 +1,3 @@
-import { ApplicationContext } from "@sankhyalabs/core";
 import { FormConfigFetcher } from "../http/data-fetcher/fetchers/form-config-fetcher";
 import GridConfigFetcher from "../http/data-fetcher/fetchers/grid-config-fetcher";
 import FilterBarConfigFetcher from "../http/data-fetcher/fetchers/filter-bar-config-fetcher";
@@ -9,83 +8,73 @@ const CONFIG_SOURCE = {
   filterBar: "filterBar"
 };
 export class ConfigStorage {
-  static async get() {
-    if (!ConfigStorage.instance) {
-      const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-      if (application != undefined) {
-        const configName = application.configName;
-        const resourceID = await application.getResourceID();
-        ConfigStorage.instance = new ConfigStorage();
-        ConfigStorage.resourceID = resourceID;
-        ConfigStorage.instance.loadFormConfig(configName);
-        ConfigStorage.instance.loadGridConfig(configName);
-      }
-    }
-    return this.instance;
+  static preload(resourceID, configName) {
+    ConfigStorage.loadFormConfig(configName, resourceID);
+    ConfigStorage.loadGridConfig(configName, resourceID);
   }
-  async loadFilterBarConfig(name, urlParams) {
-    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.filterBar);
+  static async loadFilterBarConfig(name, resourceID, urlParams) {
+    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.filterBar, resourceID);
     if (!ConfigStorage.configById.has(cacheID)) {
-      ConfigStorage.configById.set(cacheID, ConfigStorage.filterBarConfigFetcher.getConfig(ConfigStorage.resourceID, name, urlParams));
+      ConfigStorage.configById.set(cacheID, ConfigStorage.filterBarConfigFetcher.getConfig(resourceID, name, urlParams));
     }
     return ConfigStorage.configById.get(cacheID);
   }
-  async loadFormConfig(name) {
-    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.form);
+  static async loadFormConfig(name, resourceID) {
+    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.form, resourceID);
     if (!ConfigStorage.configById.has(cacheID)) {
-      ConfigStorage.configById.set(cacheID, ConfigStorage.formConfigFetcher.loadFormConfig(name, ConfigStorage.resourceID));
+      ConfigStorage.configById.set(cacheID, ConfigStorage.formConfigFetcher.loadFormConfig(name, resourceID));
     }
     return ConfigStorage.configById.get(cacheID);
   }
-  async loadGridConfig(name) {
-    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.grid);
+  static async loadGridConfig(name, resourceID) {
+    const cacheID = ConfigStorage.buildCacheID(name, CONFIG_SOURCE.grid, resourceID);
     if (!ConfigStorage.configById.has(cacheID)) {
-      ConfigStorage.configById.set(cacheID, ConfigStorage.gridConfigFetcher.getConfig(name, ConfigStorage.resourceID));
+      ConfigStorage.configById.set(cacheID, ConfigStorage.gridConfigFetcher.getConfig(name, resourceID));
     }
     return ConfigStorage.configById.get(cacheID);
   }
-  static async saveFilterBarConfig(config, name) {
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.filterBar);
+  static async saveFilterBarConfig(config, name, resourceID) {
+    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.filterBar, resourceID);
     this.configById.delete(cacheID);
-    return this.filterBarConfigFetcher.saveConfig(config, this.resourceID, name);
+    return this.filterBarConfigFetcher.saveConfig(config, resourceID, name);
   }
-  static async saveFormConfig(config, name) {
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.form);
+  static async saveFormConfig(config, name, resourceID) {
+    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.form, resourceID);
     this.configById.delete(cacheID);
-    return this.formConfigFetcher.saveConfig(config, name, this.resourceID);
+    return this.formConfigFetcher.saveConfig(config, name, resourceID);
   }
-  static async saveCardState(config, name) {
-    return this.formConfigFetcher.saveCardState(config, name, this.resourceID);
+  static async saveCardState(config, name, resourceID) {
+    return this.formConfigFetcher.saveCardState(config, name, resourceID);
   }
-  static async saveGridConfig(config, name) {
+  static async saveGridConfig(config, name, resourceID) {
     if (config == undefined) {
       return;
     }
-    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.grid);
+    const cacheID = this.buildCacheID(name, CONFIG_SOURCE.grid, resourceID);
     this.configById.delete(cacheID);
-    return this.gridConfigFetcher.saveConfig(config, name, this.resourceID);
+    return this.gridConfigFetcher.saveConfig(config, name, resourceID);
   }
-  static async loadPersonalizedFilter(filterId, configName) {
-    return this.personalizedFilterFetcher.loadPersonalizedFilter(this.resourceID, filterId, configName);
+  static async loadPersonalizedFilter(filterId, resourceID, configName) {
+    return this.personalizedFilterFetcher.loadPersonalizedFilter(resourceID, filterId, configName);
   }
-  static async savePersonalizedFilter(personalizedFilter, configName) {
+  static async savePersonalizedFilter(personalizedFilter, resourceID, configName) {
     //Ao criar ou alterar um filtro personalizado, 
     //precisamos remover o cache do status da filterbar.
-    const cacheID = this.buildCacheID(configName, CONFIG_SOURCE.filterBar);
+    const cacheID = this.buildCacheID(configName, CONFIG_SOURCE.filterBar, resourceID);
     this.configById.delete(cacheID);
-    return this.personalizedFilterFetcher.savePersonalizedFilter(personalizedFilter, this.resourceID, configName);
+    return this.personalizedFilterFetcher.savePersonalizedFilter(personalizedFilter, resourceID, configName);
   }
-  static async removePersonalizedFilter(personalizedFilter, configName) {
-    return this.personalizedFilterFetcher.removePersonalizedFilter(personalizedFilter, this.resourceID, configName);
+  static async removePersonalizedFilter(personalizedFilter, resourceID, configName) {
+    return this.personalizedFilterFetcher.removePersonalizedFilter(personalizedFilter, resourceID, configName);
   }
   static async validatePersonalizedFilter(dataUnitName, expression) {
     return this.personalizedFilterFetcher.validatePersonalizedFilter(dataUnitName, expression);
   }
-  static buildCacheID(name, source) {
+  static buildCacheID(name, source, resourceID) {
     if (name == undefined) {
-      return `req_${source}_${this.resourceID}`;
+      return `req_${source}_${resourceID}`;
     }
-    return `req_${source}_${name}_${this.resourceID}`;
+    return `req_${source}_${name}_${resourceID}`;
   }
 }
 ConfigStorage.configById = new Map();

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

@@ -1,31 +1,44 @@
-import { ChangeOperation, DataType, DataUnit, SortMode, StringUtils, } from '@sankhyalabs/core';
-import { DISTINCT_FILTER_NAME_PREFIX } from "@sankhyalabs/ezui/dist/collection/utils/constants";
+import { ChangeOperation, DataUnit, defaultDataLoader, StringUtils, } from '@sankhyalabs/core';
 export default 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() {
@@ -43,76 +56,16 @@ export default 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 {
@@ -126,7 +79,6 @@ export default class InMemoryLoader {
   }
   removeLoader(_dataUnit, recordIds) {
     return new Promise((resolve) => {
-      this._records = this._records.filter(record => !recordIds.includes(record["__record__id__"]));
       resolve(recordIds);
     });
   }