@den4ik92/ng2-smart-table 19.0.3 → 19.0.4

package/README.md

@@ -0,0 +1,167 @@
+# Angular Smart Table Component
+
+ng2-smart-table component made with :heart:  by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get latest news about this component first!
+
+## ⚠ Low Maintenance
+Due to project priority and resource constraints, this project is currently on low maintenance. We recognize that there are a lot of activities around this package. However, we are unable to accommodate the maintenance this project requires.
+
+### Demo
+
+<a target="_blank" href="https://akveo.github.io/ng2-smart-table/">Live Demo</a>
+
+![alt tag](projects/demo/src/assets/demo.gif)
+
+## Installation
+
+The library is available as npm package, so all you need to do is to run the following command:
+
+```
+npm install --save ng2-smart-table
+```
+
+This command will create a record in your `package.json` file and install the package into the npm modules folder.
+
+## Minimal Setup Example
+
+First thing you need to do is to import the ng2-smart-table directives into your component.
+
+```
+
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+```
+
+Then register it by adding to the list of directives of your module:
+
+```
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    
+    Ng2SmartTableModule,
+    
+    // ...
+  ],
+  declarations: [ ... ]
+})
+// ...
+```
+
+Now, we need to configure the table and add it into the template. The only <strong>required</strong> setting for the component to start working is a columns configuration.
+Let's register <i>settings</i> property inside of the component where we want to have the table and configure some columns [Settings documentation](https://akveo.github.io/ng2-smart-table/#/documentation):
+    
+```
+settings = {
+  columns: {
+    id: {
+      title: 'ID'
+    },
+    name: {
+      title: 'Full Name'
+    },
+    username: {
+      title: 'User Name'
+    },
+    email: {
+      title: 'Email'
+    }
+  }
+};
+```
+
+Finally let's put the ng2-smart-table component inside of the template:
+
+```
+// ...
+
+@Component({
+  template: `
+    <ng2-smart-table [settings]="settings"></ng2-smart-table>
+  `
+})
+// ...
+```
+At this step you will have a minimal configured table. All functions are available by default and you don't need to configure them anyhow, so now you can add/edit/delete rows, sort or filter the table, etc.
+ 
+Still it seems like something is missing... Right, there is no data in the table by default. To add some, let's create an array property with a list of objects in the component. Please note that object keys are the same as in the columns configuration.
+
+```
+data = [
+  {
+    id: 1,
+    name: "Leanne Graham",
+    username: "Bret",
+    email: "Sincere@april.biz"
+  },
+  {
+    id: 2,
+    name: "Ervin Howell",
+    username: "Antonette",
+    email: "Shanna@melissa.tv"
+  },
+  
+  // ... list of items
+  
+  {
+    id: 11,
+    name: "Nicholas DuBuque",
+    username: "Nicholas.Stanton",
+    email: "Rey.Padberg@rosamond.biz"
+  }
+];
+```
+
+And pass the data to the table:
+
+```
+// ...
+
+@Component({
+  template: `
+    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
+  `
+})
+// ...
+```
+
+Now you have some data in the table.
+ 
+## Further Documentation
+Installation, customization and other useful articles: https://akveo.github.io/ng2-smart-table/
+
+## UI Bakery
+Try low-code internal tool builder for free
+<a href="https://uibakery.io/?utm_source=github&utm_medium=clicks&utm_campaign=banner"><img src="https://user-images.githubusercontent.com/6151971/125071660-41f84900-e0c2-11eb-882a-0c675eb1e5e3.png"></a>
+
+## How can I support developers?
+- Star our GitHub repo :star:
+- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
+- Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:
+- Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
+
+## Can I hire you guys?
+Yes!  Visit [our homepage](http://akveo.com/) or simply leave us a note to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
+
+## Features
+* Local data source (Server/API LocalDataSource is on its way)
+* Filtering
+* Sorting
+* Pagination
+* Inline Add/Edit/Delete
+* Flexible event model
+
+## License
+[MIT](LICENSE.txt) license.
+
+## Special thanks to our awesome contributors!
+
+[<img alt="nnixaa" src="https://avatars0.githubusercontent.com/u/230527?v=3&s=60" width="60">](https://github.com/nnixaa)[<img alt="lexzhukov" src="https://avatars0.githubusercontent.com/u/12192373?v=3&s=60" width="60">](https://github.com/lexzhukov)[<img alt="damnko" src="https://avatars2.githubusercontent.com/u/680205?v=3&s=60" width="60">](https://github.com/damnko)[<img alt="Tibing" src="https://avatars2.githubusercontent.com/u/17410089?v=3&s=60" width="60">](https://github.com/Tibing)[<img alt="Ezeon" src="https://avatars0.githubusercontent.com/u/21973741?v=3&s=60" width="60">](https://github.com/Ezeon)[<img alt="Deilan" src="https://avatars1.githubusercontent.com/u/4777512?v=3&s=60" width="60">](https://github.com/Deilan)[<img alt="hoswey" src="https://avatars0.githubusercontent.com/u/3689445?v=3&s=60" width="60">](https://github.com/hoswey)[<img alt="stacyakveo" src="https://avatars2.githubusercontent.com/u/27723447?v=3&s=60" width="60">](https://github.com/stacyakveo)[<img alt="Akshaymisal5" src="https://avatars3.githubusercontent.com/u/15906551?v=3&s=60" width="60">](https://github.com/Akshaymisal5)[<img alt="geneeblack" src="https://avatars0.githubusercontent.com/u/282525?v=3&s=60" width="60">](https://github.com/geneeblack)[<img alt="vvandoorne" src="https://avatars2.githubusercontent.com/u/26658175?v=3&s=60" width="60">](https://github.com/vvandoorne)[<img alt="ananthhh" src="https://avatars1.githubusercontent.com/u/3583234?v=3&s=60" width="60">](https://github.com/ananthhh)[<img alt="bis-sb" src="https://avatars1.githubusercontent.com/u/22668001?v=3&s=60" width="60">](https://github.com/bis-sb)[<img alt="tadashi-aikawa" src="https://avatars1.githubusercontent.com/u/9500018?v=3&s=60" width="60">](https://github.com/tadashi-aikawa)
+
+[<img alt="nureha" src="https://avatars2.githubusercontent.com/u/7064537?v=3&s=60" width="60">](https://github.com/nureha)[<img alt="vlupu10" src="https://avatars1.githubusercontent.com/u/3597512?v=3&s=60" width="60">](https://github.com/vlupu10)[<img alt="zhouhao27" src="https://avatars1.githubusercontent.com/u/8099731?v=3&s=60" width="60">](https://github.com/zhouhao27)[<img alt="hkb1990" src="https://avatars1.githubusercontent.com/u/2637138?v=3&s=60" width="60">](https://github.com/hkb1990)[<img alt="liaosong" src="https://avatars0.githubusercontent.com/u/3927282?v=3&s=60" width="60">](https://github.com/liaosong)[<img alt="ktriek" src="https://avatars2.githubusercontent.com/u/4461059?v=3&s=60" width="60">](https://github.com/ktriek)
+
+### From akveo
+
+Enjoy :metal:
+We're always happy to hear your feedback!

package/fesm2022/den4ik92-ng2-smart-table.mjs

@@ -430,20 +430,44 @@ class Deferred {
 }
 // getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1
 function getDeepFromObject(object = {}, name, defaultValue = null) {
-    const keys = name.split('.');
-    // clone the object
-    let level = deepExtend({}, object);
-    keys.forEach((k) => {
-        if (level && typeof level[k] !== 'undefined') {
-            level = level[k];
-        }
-    });
-    return typeof level === 'undefined' ? defaultValue : level;
+    try {
+        let level = deepExtend({}, object);
+        const keys = name.split('.');
+        if (keys.length === 1) {
+            return level[keys[0]] ?? defaultValue;
+        }
+        keys.forEach((k) => {
+            if (level && typeof level[k] !== 'undefined') {
+                level = level[k];
+            }
+        });
+    }
+    catch {
+        return defaultValue;
+    }
 }
 function getPageForRowIndex(index, perPage) {
     // we need to add 1 to convert 0-based index to 1-based page number.
     return Math.floor(index / perPage) + 1;
 }
+function cloneArrayOfObject(array) {
+    return array.map((obj) => Object.assign({}, obj));
+}
+function setLocalStorage(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+}
+function getLocalStorage(key) {
+    const valueString = localStorage.getItem(key);
+    if (!valueString) {
+        return null;
+    }
+    try {
+        return JSON.parse(valueString);
+    }
+    catch {
+        return null;
+    }
+}
 
 class LocalDataSource extends DataSource {
     constructor(data = []) {
@@ -1100,9 +1124,13 @@ class Grid {
         this.createFormShown = false;
         this.onSelectRowSource = new Subject();
         this.onDeselectRowSource = new Subject();
+        this.currentColumnsSortState = [];
         this.setSettings(settings);
         this.setSource(source);
     }
+    setColumnsSortedEmitter(emitter) {
+        this.columnsSortedEmitter = emitter;
+    }
     detach() {
         if (this.sourceOnChangedSubscription) {
             this.sourceOnChangedSubscription.unsubscribe();
@@ -1130,6 +1158,12 @@ class Grid {
         return this.dataSet.newRow;
     }
     setSettings(settings) {
+        this.updateSettingsAndDataSet(settings);
+        if (this.getSetting('withColumnSort', false)) {
+            this.setColumnsSortState(settings.columns);
+        }
+    }
+    updateSettingsAndDataSet(settings) {
         this.settings = settings;
         this.dataSet = new DataSet([], this.getSetting("columns"));
         if (this.source) {
@@ -1308,6 +1342,72 @@ class Grid {
     getLastRow() {
         return this.dataSet.getLastRow();
     }
+    // ------------------------------- column sort
+    async getSortedTableColumns(newState, columns) {
+        const sortedArray = [];
+        newState.forEach((item2) => {
+            const index = columns.findIndex((item1) => item1.key === item2.key && item1.title === item2.title);
+            if (index > -1) {
+                sortedArray.push({ ...columns[index], hide: !!item2.hide });
+            }
+        });
+        return Promise.resolve(sortedArray);
+    }
+    async applyColumnsSortState(state, emitEvent = true) {
+        this.currentColumnsSortState = this.getMergedColumnStates(state);
+        this.updateSettingsAndDataSet({
+            ...this.settings,
+            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings?.columns),
+        });
+        if (this.columnStateStorageKey) {
+            setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
+        }
+        if (emitEvent) {
+            this.columnsSortedEmitter.emit(this.currentColumnsSortState);
+        }
+    }
+    setColumnsSortState(columns) {
+        const columnsState = this.getColumnsStateFromSettings(columns);
+        if (this.columnStateStorageKey) {
+            const storageState = getLocalStorage(this.columnStateStorageKey);
+            if (!storageState) {
+                this.currentColumnsSortState = columnsState;
+                setLocalStorage(this.columnStateStorageKey, columnsState);
+                return;
+            }
+            const merged = this.getMergedColumnStates(storageState, columnsState);
+            this.applyColumnsSortState(merged, false);
+            return;
+        }
+        this.applyColumnsSortState(columnsState, false);
+    }
+    getColumnsStateFromSettings(columns) {
+        return (columns || this.settings.columns || []).map((column) => ({
+            key: column.key,
+            title: column.title,
+            hide: !!column.hide,
+            sortDisabled: !!column.sortDisabled,
+        }));
+    }
+    getMergedColumnStates(newState, columnsState) {
+        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
+        // merge new columns state with state from storage
+        const filtered = [];
+        newState.forEach((state) => {
+            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
+            if (fined) {
+                filtered.push({ ...fined, hide: fined.sortDisabled ? fined.hide : state.hide });
+            }
+        });
+        // find new columns witch not exist in storage state
+        const newColumns = columnsSettings.filter((state) => {
+            return !filtered.some((column) => column.title === state.title && column.key === state.key);
+        });
+        return [...filtered, ...newColumns];
+    }
+    get columnStateStorageKey() {
+        return this.settings.columnSortStorageKey;
+    }
 }
 
 class EditCellDefault {
@@ -3285,6 +3385,7 @@ class Ng2SmartTableComponent {
     constructor() {
         this.multiRowSelect = output();
         this.rowClicked = output();
+        this.columnsSorted = output();
         this.delete = output();
         this.edit = output();
         this.editCancel = output();
@@ -3373,7 +3474,6 @@ class Ng2SmartTableComponent {
         this.emitUserSelectRow(row);
     }
     onSelectAllRows() {
-        this.grid.dataSet.isAllSelected;
         this.grid.selectAllRows(!this.grid.dataSet.isAllSelected);
         this.emitUserSelectRow(null);
     }
@@ -3389,6 +3489,7 @@ class Ng2SmartTableComponent {
     initGrid() {
         this.source = this.prepareSource();
         this.grid = new Grid(this.source, this.prepareSettings());
+        this.grid.setColumnsSortedEmitter(this.columnsSorted);
     }
     prepareSource() {
         if (this.source instanceof LocalDataSource) {
@@ -3408,7 +3509,7 @@ class Ng2SmartTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,