diff --git a/browserslist b/browserslist index 8e09ab4..0ccadaf 100644 --- a/browserslist +++ b/browserslist @@ -1,9 +1,18 @@ -# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries -# For IE 9-11 support, please uncomment the last line of the file and adjust as needed -> 0.5% -last 2 versions + +# For the full list of supported browsers by the Angular framework, please see: +# https://angular.io/guide/browser-support + +# You can see what browsers were selected by your queries by running: +# npx browserslist + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions Firefox ESR -not dead -# IE 9-11 \ No newline at end of file +not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. +not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/package-lock.json b/package-lock.json index 3b9bfba..cbce9d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3455,12 +3455,6 @@ "picomatch": "^2.0.4" } }, - "app-root-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz", - "integrity": "sha512-qMcx+Gy2UZynHjOHOIXPNvpf+9cjvk3cWrBBK7zg4gH9+clobJRb9NGzcT7mQTcV/6Gm/1WelUtqxVXnNlrwcw==", - "dev": true - }, "aproba": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", @@ -3499,16 +3493,6 @@ "sprintf-js": "~1.0.2" } }, - "aria-query": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", - "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", - "dev": true, - "requires": { - "ast-types-flow": "0.0.7", - "commander": "^2.11.0" - } - }, "array-flatten": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", @@ -3548,12 +3532,6 @@ "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", "dev": true }, - "ast-types-flow": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", - "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", - "dev": true - }, "async": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", @@ -3634,15 +3612,6 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, - "axobject-query": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", - "integrity": "sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==", - "dev": true, - "requires": { - "ast-types-flow": "0.0.7" - } - }, "babel-loader": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz", @@ -4201,66 +4170,6 @@ "shallow-clone": "^3.0.0" } }, - "codelyzer": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-6.0.2.tgz", - "integrity": "sha512-v3+E0Ucu2xWJMOJ2fA/q9pDT/hlxHftHGPUay1/1cTgyPV5JTHFdO9hqo837Sx2s9vKBMTt5gO+lhF95PO6J+g==", - "dev": true, - "requires": { - "@angular/compiler": "9.0.0", - "@angular/core": "9.0.0", - "app-root-path": "^3.0.0", - "aria-query": "^3.0.0", - "axobject-query": "2.0.2", - "css-selector-tokenizer": "^0.7.1", - "cssauron": "^1.4.0", - "damerau-levenshtein": "^1.0.4", - "rxjs": "^6.5.3", - "semver-dsl": "^1.0.1", - "source-map": "^0.5.7", - "sprintf-js": "^1.1.2", - "tslib": "^1.10.0", - "zone.js": "~0.10.3" - }, - "dependencies": { - "@angular/compiler": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz", - "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==", - "dev": true - }, - "@angular/core": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz", - "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==", - "dev": true - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - }, - "sprintf-js": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz", - "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==", - "dev": true - }, - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true - }, - "zone.js": { - "version": "0.10.3", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", - "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==", - "dev": true - } - } - }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -4825,31 +4734,12 @@ "nth-check": "^2.0.0" } }, - "css-selector-tokenizer": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", - "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", - "dev": true, - "requires": { - "cssesc": "^3.0.0", - "fastparse": "^1.1.2" - } - }, "css-what": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==", "dev": true }, - "cssauron": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz", - "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=", - "dev": true, - "requires": { - "through": "X.X.X" - } - }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -4874,12 +4764,6 @@ "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=", "dev": true }, - "damerau-levenshtein": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", - "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==", - "dev": true - }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -5680,12 +5564,6 @@ "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", "dev": true }, - "fastparse": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", - "dev": true - }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -10918,15 +10796,6 @@ "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", "dev": true }, - "semver-dsl": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/semver-dsl/-/semver-dsl-1.0.1.tgz", - "integrity": "sha1-02eN5VVeimH2Ke7QJTZq5fJzQKA=", - "dev": true, - "requires": { - "semver": "^5.3.0" - } - }, "send": { "version": "0.17.1", "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", diff --git a/package.json b/package.json index 794b183..d2aefa3 100644 --- a/package.json +++ b/package.json @@ -13,33 +13,32 @@ }, "private": true, "dependencies": { - "@angular/animations": "^13.0.3", - "@angular/cdk": "^13.0.3", - "@angular/common": "^13.0.3", - "@angular/compiler": "^13.0.3", - "@angular/core": "^13.0.3", - "@angular/flex-layout": "^13.0.0-beta.36", - "@angular/forms": "^13.0.3", - "@angular/material": "^13.0.3", - "@angular/platform-browser": "^13.0.3", - "@angular/platform-browser-dynamic": "^13.0.3", - "@angular/router": "^13.0.3", + "@angular/animations": "^13.3.2", + "@angular/cdk": "^13.3.2", + "@angular/common": "^13.3.2", + "@angular/compiler": "^13.3.2", + "@angular/core": "^13.3.2", + "@angular/flex-layout": "^13.0.0-beta.38", + "@angular/forms": "^13.3.2", + "@angular/material": "^13.3.2", + "@angular/platform-browser": "^13.3.2", + "@angular/platform-browser-dynamic": "^13.3.2", + "@angular/router": "^13.3.2", "ngx-highlightjs": "^6.1.0", "rxjs": "^6.5.4", "tslib": "^2.3.1", "zone.js": "~0.11.4" }, "devDependencies": { - "@angular/compiler-cli": "^13.0.3", - "@angular-devkit/build-angular": "~13.0.4", + "@angular/compiler-cli": "^13.3.2", + "@angular-devkit/build-angular": "~13.3.2", "typescript": "~4.4.4", - "@angular/cli": "~13.0.4", - "@angular/language-service": "^13.0.3", + "@angular/cli": "~13.3.2", + "@angular/language-service": "^13.3.2", "@types/jasmine": "~3.10.2", "@types/jasminewd2": "~2.0.10", "@types/node": "^12.11.1", "ng-packagr": "^13.0.8", - "codelyzer": "^6.0.2", "jasmine-core": "~3.10.1", "jasmine-spec-reporter": "~7.0.0", "karma": "~6.3.9", diff --git a/projects/simplemattable/package.json b/projects/simplemattable/package.json index baf6d62..ed1e779 100644 --- a/projects/simplemattable/package.json +++ b/projects/simplemattable/package.json @@ -1,6 +1,6 @@ { "name": "simplemattable", - "version": "13.4.0", + "version": "13.5.0", "description": "A simplified, declarative table-library using @angular/material's MatTable with form capabilities for adding/editing/deleting data", "author": "Henning Wobken", "license": "MIT", diff --git a/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts b/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts index 829f9a8..c170cff 100644 --- a/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts +++ b/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts @@ -368,6 +368,13 @@ export class SimplemattableComponent implements OnInit, DoCheck, OnChanges, A rowStyleMap = new Map(); rowClassMap = new Map(); + /** + * NgDoCheck is directly called after every ngOnChanges + * This flag allows us to know in ngDoCheck if a data change + * was already done in ngOnChanges to avoid duplicate processing + */ + onChangesDetectedDataChange: boolean = false; + constructor( private fb: FormBuilder, ) { @@ -945,6 +952,7 @@ export class SimplemattableComponent implements OnInit, DoCheck, OnChanges, A if (changes.data) { this.onDataChanges(); } + this.onChangesDetectedDataChange = !!changes.data; if (changes.pageSettings && this.pageSettings) { // When using pagination, the user can programmatically select a page and the page size // via the page settings object. The paginator selections are changed here. @@ -1067,10 +1075,17 @@ export class SimplemattableComponent implements OnInit, DoCheck, OnChanges, A this.clearCssCache(); this.clearAddedEntry(); this.turnOffSorting(); // If columns are changed, resorting might cause bugs - this.recreateDataSource(); + // data might have been updated after data change in ngOnChanges + // and that call included the changed table columns already + if (!this.onChangesDetectedDataChange) { + this.recreateDataSource(); + } this.cleanUpAfterColChange(); this.recreateColFilters(); } + if (this.onChangesDetectedDataChange) { + this.onChangesDetectedDataChange = false; + } } private recreateColFilters() { @@ -1130,11 +1145,7 @@ export class SimplemattableComponent implements OnInit, DoCheck, OnChanges, A private recreateDataSource() { if (this.columns && this.data) { - const tmpData = this.data.slice(); - if (this.addedItem) { - tmpData.unshift(this.addedItem); - } - this.dataSource = new MatTableDataSource(tmpData); + this.dataSource = new MatTableDataSource() as MatTableDataSource; // Listen to data changes if (this.renderedDataSubscription) { @@ -1213,6 +1224,23 @@ export class SimplemattableComponent implements OnInit, DoCheck, OnChanges, A }; } + const tmpData = this.data.slice(); + if (this.addedItem) { + tmpData.unshift(this.addedItem); + } + + if (this.paginator && !this.matFrontendPaginator && !this.matBackendPaginator) { + // Paginator might not be assigned yet + // If that is the case, we need to move setting the data to a point + // where the paginator is set on the datasource (usually after view init) + // see also https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows + setTimeout(() => { + this.dataSource.data = tmpData; + }); + } else { + this.dataSource.data = tmpData; + } + // Filter columns to display and footer-detection this.columnIds.clear(); let hasFooter = false; // we only want to display the footer if a visible column has the footer function