@intellegens/cornerstone-client-angular-material 0.0.45

package/README.md

@@ -0,0 +1,46 @@
+# @intellegens/cornerstone-client-angular-material
+
+Contains directives and overrides which improve `Angular Material UI` if used with `@intellegens/cornerstone-client-angular` and `@intellegens/cornerstone-client` libraries.
+
+## MatPaginatorIntlOverrides
+
+Custom paginator service to adjust the label for the paginator.
+
+Used on `MatTablePaginationDirective`:
+
+```typescript
+@Directive({
+  selector: 'mat-paginator',
+  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlOverrides }],
+  standalone: true,
+})
+```
+
+## MatTableSortDirective
+
+Directive used to pass data to the `CollectionViewAdapter` and reverse the default direction of shown table header sorting arrows.
+
+Usage example:
+
+```html
+<table mat-table matSort [adapter]="_adapter" [dataSource]="_tableDataSource">
+  <!-- table contents -->
+</table>
+```
+
+## MatTablePaginationDirective
+
+Directive used to pass data to the `CollectionViewAdapter`, uses `MatPaginatorIntlOverrides` to change pagination UI.
+
+Usage example:
+
+```html
+<mat-paginator
+  [adapter]="_adapter"
+  [pageSizeOptions]="[10, 20, 50]"
+  [pageSize]="_adapter.pageSize"
+  [pageIndex]="(currentPage ?? 1) - 1"
+  [length]="_totalItemsCount()"
+  (page)="$event"
+></mat-paginator>
+```

package/fesm2022/intellegens-cornerstone-client-angular-material.mjs

@@ -0,0 +1,107 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, Directive } from '@angular/core';
+import { MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { ReadSelectedOrderingDirection } from '@intellegens/cornerstone-client-angular';
+
+/**
+ * Custom paginator service to adjust the label for the paginator.
+ */
+class MatPaginatorIntlOverrides extends MatPaginatorIntl {
+    getRangeLabel = (page, pageSize, length) => {
+        if (length === 0) {
+            return 'Page 1 of 1';
+        }
+        const isLengthValid = length && length !== Infinity;
+        return isLengthValid ? `Page ${page + 1} of ${Math.ceil(length / pageSize)}` : `Page ${page + 1}`;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatPaginatorIntlOverrides, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatPaginatorIntlOverrides });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatPaginatorIntlOverrides, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Directive used to pass data to the `CollectionViewAdapter`, uses `MatPaginatorIntlOverrides` to change pagination UI.
+ */
+class MatTablePaginationDirective {
+    _matPaginator = inject(MatPaginator);
+    adapter = input(...(ngDevMode ? [undefined, { debugName: "adapter" }] : []));
+    _subscription;
+    ngOnInit() {
+        this._subscription = this._matPaginator.page.subscribe((event) => {
+            const adapter = this.adapter();
+            if (!adapter)
+                return;
+            const targetPage = event.pageIndex + 1;
+            if (event.pageSize !== adapter.pageSize) {
+                adapter.setPageSize(event.pageSize);
+            }
+            else if (targetPage !== adapter.currentPage) {
+                adapter.jumpToPage(targetPage);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatTablePaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: MatTablePaginationDirective, isStandalone: true, selector: "mat-paginator", inputs: { adapter: { classPropertyName: "adapter", publicName: "adapter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlOverrides }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatTablePaginationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-paginator',
+                    providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlOverrides }],
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Directive used to pass data to the `CollectionViewAdapter` and reverse the default direction of shown table header sorting arrows
+ */
+class MatTableSortDirective {
+    _matSort = inject(MatSort);
+    adapter = input(...(ngDevMode ? [undefined, { debugName: "adapter" }] : []));
+    ngOnInit() {
+        this._matSort.disableClear = true; // removes "unsorted" option, syncs column header arrows with actual current sort direction
+        // tell MatSort our starting sort direction
+        const adapter = this.adapter();
+        if (adapter) {
+            const initialSort = adapter.getCurrentSort();
+            this._matSort.active = (initialSort.sortByPath && initialSort.sortByPath[0]) || '';
+            this._matSort.direction = initialSort.sortDirection === ReadSelectedOrderingDirection.Ascending ? 'desc' : 'asc'; // show reverse arrows
+        }
+    }
+    _subscription = this._matSort.sortChange.subscribe((event) => {
+        const adapter = this.adapter();
+        if (adapter && event?.active) {
+            const newDirection = event.direction == 'desc' ? ReadSelectedOrderingDirection.Ascending : ReadSelectedOrderingDirection.Descending; // show reverse arrows
+            adapter.setSorting([event.active], newDirection);
+        }
+    });
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatTableSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: MatTableSortDirective, isStandalone: true, selector: "mat-table[matSort], table[mat-table][matSort]", inputs: { adapter: { classPropertyName: "adapter", publicName: "adapter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatTableSortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-table[matSort], table[mat-table][matSort]',
+                    standalone: true,
+                }]
+        }] });
+
+/*
+ * Public API Surface of cornerstone-client-angular-material
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatPaginatorIntlOverrides, MatTablePaginationDirective, MatTableSortDirective };
+//# sourceMappingURL=intellegens-cornerstone-client-angular-material.mjs.map

package/fesm2022/intellegens-cornerstone-client-angular-material.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"intellegens-cornerstone-client-angular-material.mjs","sources":["../../../../projects/intellegens/cornerstone-client-angular-material/src/lib/overrides/MatPaginatorIntlOverrides/index.ts","../../../../projects/intellegens/cornerstone-client-angular-material/src/lib/directives/MatTablePaginationDirective/index.ts","../../../../projects/intellegens/cornerstone-client-angular-material/src/lib/directives/MatTableSortDirective/index.ts","../../../../projects/intellegens/cornerstone-client-angular-material/src/public-api.ts","../../../../projects/intellegens/cornerstone-client-angular-material/src/intellegens-cornerstone-client-angular-material.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { MatPaginatorIntl } from '@angular/material/paginator';\n\n/**\n * Custom paginator service to adjust the label for the paginator.\n */\n@Injectable()\nexport class MatPaginatorIntlOverrides extends MatPaginatorIntl {\n  override getRangeLabel = (page: number, pageSize: number, length: number) => {\n    if (length === 0) {\n      return 'Page 1 of 1';\n    }\n    const isLengthValid = length && length !== Infinity;\n    return isLengthValid ? `Page ${page + 1} of ${Math.ceil(length / pageSize)}` : `Page ${page + 1}`;\n  };\n}\n","import { Directive, InputSignal, inject, input } from '@angular/core';\nimport { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/paginator';\nimport { MatPaginatorIntlOverrides } from '../../overrides'; // using path alias results in `Could not resolve \"@overrides\"` in app\nimport { Subscription } from 'rxjs';\nimport { CollectionViewAdapter } from '@intellegens/cornerstone-client-angular';\n\n/**\n * Directive used to pass data to the `CollectionViewAdapter`, uses `MatPaginatorIntlOverrides` to change pagination UI.\n */\n@Directive({\n  selector: 'mat-paginator',\n  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlOverrides }],\n  standalone: true,\n})\nexport class MatTablePaginationDirective {\n  private _matPaginator = inject(MatPaginator);\n  public adapter: InputSignal<CollectionViewAdapter<any, any> | undefined> = input();\n  private _subscription?: Subscription;\n  ngOnInit() {\n    this._subscription = this._matPaginator.page.subscribe((event: PageEvent) => {\n      const adapter = this.adapter();\n      if (!adapter) return;\n      const targetPage = event.pageIndex + 1;\n      if (event.pageSize !== adapter.pageSize) {\n        adapter.setPageSize(event.pageSize);\n      } else if (targetPage !== adapter.currentPage) {\n        adapter.jumpToPage(targetPage);\n      }\n    });\n  }\n  ngOnDestroy() {\n    this._subscription?.unsubscribe();\n  }\n}\n","import { Directive, inject, input, InputSignal } from '@angular/core';\nimport { MatSort, Sort } from '@angular/material/sort';\nimport { CollectionViewAdapter, ReadSelectedOrderingDirection } from '@intellegens/cornerstone-client-angular';\n\n/**\n * Directive used to pass data to the `CollectionViewAdapter` and reverse the default direction of shown table header sorting arrows\n */\n@Directive({\n  selector: 'mat-table[matSort], table[mat-table][matSort]',\n  standalone: true,\n})\nexport class MatTableSortDirective {\n  private _matSort = inject(MatSort);\n  public adapter: InputSignal<CollectionViewAdapter<any, any> | undefined> = input();\n  ngOnInit() {\n    this._matSort.disableClear = true; // removes \"unsorted\" option, syncs column header arrows with actual current sort direction\n    // tell MatSort our starting sort direction\n    const adapter = this.adapter();\n    if (adapter) {\n      const initialSort = adapter.getCurrentSort();\n      this._matSort.active = (initialSort.sortByPath && initialSort.sortByPath[0]) || '';\n      this._matSort.direction = initialSort.sortDirection === ReadSelectedOrderingDirection.Ascending ? 'desc' : 'asc'; // show reverse arrows\n    }\n  }\n  private _subscription = this._matSort.sortChange.subscribe((event: Sort) => {\n    const adapter = this.adapter();\n    if (adapter && event?.active) {\n      const newDirection = event.direction == 'desc' ? ReadSelectedOrderingDirection.Ascending : ReadSelectedOrderingDirection.Descending; // show reverse arrows\n      adapter.setSorting([event.active], newDirection);\n    }\n  });\n  ngOnDestroy() {\n    this._subscription.unsubscribe();\n  }\n}\n","/*\n * Public API Surface of cornerstone-client-angular-material\n */\n\nexport * from './lib/';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,41 @@
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import * as i0 from '@angular/core';
+import { InputSignal } from '@angular/core';
+import { CollectionViewAdapter } from '@intellegens/cornerstone-client-angular';
+
+/**
+ * Custom paginator service to adjust the label for the paginator.
+ */
+declare class MatPaginatorIntlOverrides extends MatPaginatorIntl {
+    getRangeLabel: (page: number, pageSize: number, length: number) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginatorIntlOverrides, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatPaginatorIntlOverrides>;
+}
+
+/**
+ * Directive used to pass data to the `CollectionViewAdapter`, uses `MatPaginatorIntlOverrides` to change pagination UI.
+ */
+declare class MatTablePaginationDirective {
+    private _matPaginator;
+    adapter: InputSignal<CollectionViewAdapter<any, any> | undefined>;
+    private _subscription?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTablePaginationDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTablePaginationDirective, "mat-paginator", never, { "adapter": { "alias": "adapter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive used to pass data to the `CollectionViewAdapter` and reverse the default direction of shown table header sorting arrows
+ */
+declare class MatTableSortDirective {
+    private _matSort;
+    adapter: InputSignal<CollectionViewAdapter<any, any> | undefined>;
+    ngOnInit(): void;
+    private _subscription;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTableSortDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTableSortDirective, "mat-table[matSort], table[mat-table][matSort]", never, { "adapter": { "alias": "adapter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MatPaginatorIntlOverrides, MatTablePaginationDirective, MatTableSortDirective };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@intellegens/cornerstone-client-angular-material",
+  "version": "0.0.45",
+  "private": false,
+  "publishable": true,
+  "sideEffects": false,
+  "module": "fesm2022/intellegens-cornerstone-client-angular-material.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/intellegens-cornerstone-client-angular-material.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}