ngx-mat-table-multi-sort 19.12.0 → 19.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +9 -9
- package/fesm2022/ngx-mat-table-multi-sort.mjs +18 -18
- package/package.json +8 -8
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# MIT License
|
|
2
|
+
|
|
3
|
+
Copyright © 2024 Philip Gerke and Michaela Andermann
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
An Angular library that adds multi-sort capability to the Angular Material table.
|
|
4
4
|
|
|
5
|
-
[](https://github.com/lion-and-bear/ngx-mat-table-multi-sort/actions/workflows/ci.yml)
|
|
6
|
+
[](https://codecov.io/gh/lion-and-bear/ngx-mat-table-multi-sort)
|
|
7
|
+
[](https://sonarcloud.io/summary/new_code?id=ngx-mat-table-multi-sort)
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
|
|
11
11
|
|
|
12
12
|
## Features
|
|
13
13
|
|
|
14
14
|
- Extend the Angular Material Table to support multiple sorting
|
|
15
15
|
- Extend the Angular Material Table to allow the user to re-order columns and toggle their visibility.
|
|
16
16
|
- Support persisting the configuration in local, session or custom storage implementations.
|
|
17
|
-
- Supports all actively supported versions of Angular. Currently that is versions
|
|
17
|
+
- Supports all actively supported versions of Angular. Currently that is versions 19, 20 and 21.
|
|
18
18
|
- Batteries included: The repository contains a demo application that can help you integrate the library with your project
|
|
19
19
|
- 100% covered by automated unit tests and secured by static code analysis
|
|
20
20
|
|
|
@@ -52,7 +52,7 @@ Enjoy multi-sorting your Angular Material data table!
|
|
|
52
52
|
|
|
53
53
|
## Demo
|
|
54
54
|
|
|
55
|
-
The demo application is hosted on [GitHub pages](https://
|
|
55
|
+
The demo application is hosted on [GitHub pages](https://lion-and-bear.github.io/ngx-mat-table-multi-sort/). You can also clone the repository and run the demo locally.
|
|
56
56
|
|
|
57
57
|
1. Clone the repository to your local machine
|
|
58
58
|
1. Run `pnpm install` to restore the dependencies
|
|
@@ -65,11 +65,11 @@ The project is subject to the MIT license unless otherwise noted. A copy can be
|
|
|
65
65
|
|
|
66
66
|
## Changelog
|
|
67
67
|
|
|
68
|
-
Please refer to the [changelog](./CHANGELOG.md) document or the [release notes](https://github.com/
|
|
68
|
+
Please refer to the [changelog](./CHANGELOG.md) document or the [release notes](https://github.com/lion-and-bear/ngx-mat-table-multi-sort/releases) in GitHub.
|
|
69
69
|
|
|
70
70
|
## I found a bug, what do I do?
|
|
71
71
|
|
|
72
|
-
We are happy to hear any feedback regarding the library or its implementation, be it critizism, praise or rants. Please create a [GitHub issue](https://github.com/
|
|
72
|
+
We are happy to hear any feedback regarding the library or its implementation, be it critizism, praise or rants. Please create a [GitHub issue](https://github.com/lion-and-bear/ngx-mat-table-multi-sort/issues) if you would like to contact us.
|
|
73
73
|
|
|
74
74
|
We would especially appreciate, if you could report any issues you encounter while using the library. Issues we know about, we can probably fix.
|
|
75
75
|
|
|
@@ -84,7 +84,7 @@ While creating a bug report, please make it easy for us to fix it by giving us a
|
|
|
84
84
|
|
|
85
85
|
## I have a feature request, what do I do?
|
|
86
86
|
|
|
87
|
-
Please create a [GitHub issue](https://github.com/
|
|
87
|
+
Please create a [GitHub issue](https://github.com/lion-and-bear/ngx-mat-table-multi-sort/issues)!
|
|
88
88
|
|
|
89
89
|
## Acknowledgements
|
|
90
90
|
|
|
@@ -267,10 +267,10 @@ class MatMultiSortDirective extends MatSort {
|
|
|
267
267
|
const sortsSerialized = this.storage.getItem(this.key);
|
|
268
268
|
this._sorts.set(sortsSerialized ? JSON.parse(sortsSerialized) : []);
|
|
269
269
|
}
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
271
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortDirective, deps: [{ token: SORT_PERSISTENCE_ENABLED, optional: true }, { token: SORT_PERSISTENCE_KEY, optional: true }, { token: SORT_PERSISTENCE_STORAGE, optional: true }, { token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
271
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: MatMultiSortDirective, isStandalone: true, selector: "[matMultiSort]", outputs: { persistenceChanged: "persistenceChanged" }, host: { classAttribute: "mat-sort" }, exportAs: ["matMultiSort"], usesInheritance: true, ngImport: i0 });
|
|
272
272
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortDirective, decorators: [{
|
|
274
274
|
type: Directive,
|
|
275
275
|
args: [{
|
|
276
276
|
selector: "[matMultiSort]",
|
|
@@ -378,10 +378,10 @@ class MatTableColumnConfigPersistenceService {
|
|
|
378
378
|
const columnsSerialized = this.storage.getItem(this.key);
|
|
379
379
|
this.columns$.next(columnsSerialized ? JSON.parse(columnsSerialized) : []);
|
|
380
380
|
}
|
|
381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
382
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigPersistenceService, deps: [{ token: COLUMN_CONFIG_PERSISTENCE_ENABLED, optional: true }, { token: COLUMN_CONFIG_PERSISTENCE_KEY, optional: true }, { token: COLUMN_CONFIG_PERSISTENCE_STORAGE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
382
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigPersistenceService, providedIn: "root" });
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigPersistenceService, decorators: [{
|
|
385
385
|
type: Injectable,
|
|
386
386
|
args: [{
|
|
387
387
|
providedIn: "root",
|
|
@@ -481,10 +481,10 @@ class MatTableColumnConfigComponent {
|
|
|
481
481
|
}
|
|
482
482
|
this.persistenceService.columns = this.columns;
|
|
483
483
|
}
|
|
484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
484
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigComponent, deps: [{ token: MatTableColumnConfigPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: MatTableColumnConfigComponent, isStandalone: true, selector: "mat-table-column-config", ngImport: i0, template: "<div class=\"container mat-elevation-z4\">\n <div class=\"toolbar\">\n <button\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Select all columns\"\n (click)=\"selectAllColumns()\">\n <mat-icon>select_all</mat-icon>\n </button>\n <button\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Deselect all columns\"\n (click)=\"deselectAllColumns()\">\n <mat-icon>deselect</mat-icon>\n </button>\n <button\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Invert selection\"\n (click)=\"invertColumnSelection()\">\n <mat-icon>flip</mat-icon>\n </button>\n </div>\n <hr />\n <div\n cdkDropList\n class=\"table-column-list\"\n cdkDropListOrientation=\"vertical\"\n (cdkDropListDropped)=\"onColumnDropped($event)\">\n @for (column of columns; track column.id) {\n <div cdkDrag class=\"table-column\">\n <mat-icon cdkDragHandle>drag_indicator</mat-icon>\n <mat-checkbox\n [checked]=\"column.visible\"\n (change)=\"onColumnVisibilityChanged(column.id)\"\n >{{ column.label }}</mat-checkbox\n >\n </div>\n }\n </div>\n</div>\n", styles: [".cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .15s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}div.container{background:var(--mat-sys-surface, #ffffff);color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}div.container>hr{border-color:var(--mat-inverse-on-surface, rgba(0, 0, 0, .87))}div.container>div.toolbar{display:inline}.table-column-list{background-color:var(--mat-sys-surface-container, #eeeeee);max-height:65vh;overflow:auto}.table-column{background:var(--mat-sys-surface, #ffffff);display:flex;justify-content:flex-start;align-items:center;height:48px;padding:0 16px 0 8px}.table-column mat-icon{margin-right:16px}.table-column mat-checkbox{line-height:48px;color:#000000de;font-size:14px;font-weight:400}.table-column:last-child{border:none}.cdk-drop-list-dragging .table-column:not(.cdk-drag-placeholder){transition:transform .15s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
486
486
|
}
|
|
487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigComponent, decorators: [{
|
|
488
488
|
type: Component,
|
|
489
489
|
args: [{ selector: "mat-table-column-config", imports: [
|
|
490
490
|
CdkDropList,
|
|
@@ -545,10 +545,10 @@ class MatTableColumnConfigTriggerDirective {
|
|
|
545
545
|
this._componentRef = null;
|
|
546
546
|
});
|
|
547
547
|
}
|
|
548
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
549
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
548
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
549
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: MatTableColumnConfigTriggerDirective, isStandalone: true, selector: "[matTableColumnConfigTrigger]", host: { listeners: { "click": "onClick()" } }, exportAs: ["matTableColumnConfigTrigger"], ngImport: i0 });
|
|
550
550
|
}
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatTableColumnConfigTriggerDirective, decorators: [{
|
|
552
552
|
type: Directive,
|
|
553
553
|
args: [{
|
|
554
554
|
selector: "[matTableColumnConfigTrigger]",
|
|
@@ -657,10 +657,10 @@ class MatMultiSortHeaderComponent extends MatSortHeader {
|
|
|
657
657
|
this._sort.sort(this);
|
|
658
658
|
this._recentlyCleared.set(wasSorted && !this._isSorted() ? prevDirection : null);
|
|
659
659
|
}
|
|
660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: MatMultiSortHeaderComponent, isStandalone: true, selector: "[mat-multi-sort-header]", providers: [{ provide: MatSort, useExisting: MatMultiSortDirective }], exportAs: ["matMultiSortHeader"], usesInheritance: true, ngImport: i0, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n class=\"mat-sort-header-container mat-focus-indicator\"\n [class.mat-sort-header-sorted]=\"_isSorted()\"\n [class.mat-sort-header-position-before]=\"arrowPosition === 'before'\"\n [class.mat-sort-header-descending]=\"sortDirection === 'desc'\"\n [class.mat-sort-header-ascending]=\"sortDirection === 'asc'\"\n [class.mat-sort-header-recently-cleared-ascending]=\"\n _recentlyCleared() === 'asc'\n \"\n [class.mat-sort-header-recently-cleared-descending]=\"\n _recentlyCleared() === 'desc'\n \"\n [class.mat-sort-header-animations-disabled]=\"\n _animationModule === 'NoopAnimations'\n \"\n [attr.tabindex]=\"_isDisabled() ? null : 0\"\n [attr.role]=\"_isDisabled() ? null : 'button'\">\n <!--\n TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\n number of screenshot diff failures. It should be removed eventually. Note that the difference\n isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"mat-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <!-- Disable animations while a current animation is running -->\n @if (_renderArrow()) {\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path\n d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\" />\n </svg>\n </div>\n }\n <div *ngIf=\"_isSorted()\" class=\"mat-sort-header-counter\">\n {{ sortIndex + 1 }}\n </div>\n</div>\n", styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-container:before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-sort-header-content{display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{0%{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{0%{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(.4,0,.2,1),opacity 225ms cubic-bezier(.4,0,.2,1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%);transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(.4,0,.2,1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(0)}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-counter{color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
662
662
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortHeaderComponent, decorators: [{
|
|
664
664
|
type: Component,
|
|
665
665
|
args: [{ selector: "[mat-multi-sort-header]", exportAs: "matMultiSortHeader", imports: [NgIf], providers: [{ provide: MatSort, useExisting: MatMultiSortDirective }], encapsulation: ViewEncapsulation.None, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n class=\"mat-sort-header-container mat-focus-indicator\"\n [class.mat-sort-header-sorted]=\"_isSorted()\"\n [class.mat-sort-header-position-before]=\"arrowPosition === 'before'\"\n [class.mat-sort-header-descending]=\"sortDirection === 'desc'\"\n [class.mat-sort-header-ascending]=\"sortDirection === 'asc'\"\n [class.mat-sort-header-recently-cleared-ascending]=\"\n _recentlyCleared() === 'asc'\n \"\n [class.mat-sort-header-recently-cleared-descending]=\"\n _recentlyCleared() === 'desc'\n \"\n [class.mat-sort-header-animations-disabled]=\"\n _animationModule === 'NoopAnimations'\n \"\n [attr.tabindex]=\"_isDisabled() ? null : 0\"\n [attr.role]=\"_isDisabled() ? null : 'button'\">\n <!--\n TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\n number of screenshot diff failures. It should be removed eventually. Note that the difference\n isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"mat-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <!-- Disable animations while a current animation is running -->\n @if (_renderArrow()) {\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path\n d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\" />\n </svg>\n </div>\n }\n <div *ngIf=\"_isSorted()\" class=\"mat-sort-header-counter\">\n {{ sortIndex + 1 }}\n </div>\n</div>\n", styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-container:before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-sort-header-content{display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{0%{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{0%{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(.4,0,.2,1),opacity 225ms cubic-bezier(.4,0,.2,1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%);transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(.4,0,.2,1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(0)}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-counter{color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}\n"] }]
|
|
666
666
|
}] });
|
|
@@ -733,10 +733,10 @@ class MatMultiSortControlComponent {
|
|
|
733
733
|
onDrop(event) {
|
|
734
734
|
this.sort?.reorderSortLevel(event.previousIndex, event.currentIndex);
|
|
735
735
|
}
|
|
736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: MatMultiSortControlComponent, isStandalone: true, selector: "mat-multi-sort-control", inputs: { orientation: "orientation", sort: "sort" }, ngImport: i0, template: "<mat-chip-listbox\n cdkDropList\n [cdkDropListOrientation]=\"orientation\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <mat-chip\n [disabled]=\"!sorts.length\"\n [highlighted]=\"true\"\n (click)=\"onClearClick()\"\n ><mat-icon matChipAvatar fontIcon=\"clear_all\"></mat-icon\n ><span i18n>Clear All</span></mat-chip\n >\n @for (column of sorts; track $index) {\n <mat-chip\n class=\"mat-sort-header\"\n cdkDrag\n (click)=\"onChipClick(column.active)\"\n (removed)=\"onChipRemoved(column.active)\">\n <div\n matChipAvatar\n class=\"mat-sort-header-container mat-sort-header-sorted mat-focus-indicator\"\n [class.mat-sort-header-descending]=\"column.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"column.direction === 'asc'\"\n [class.mat-sort-header-animations-disabled]=\"\n _animationModule === 'NoopAnimations'\n \">\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path\n d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\" />\n </svg>\n </div>\n </div>\n {{ column.active }}\n <button matChipRemove i18n-matTooltip matTooltip=\"Clear column sorting\">\n <mat-icon>clear</mat-icon>\n </button>\n </mat-chip>\n }\n</mat-chip-listbox>\n", styles: [".cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .15s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.mat-mdc-chip.mat-sort-header{background-color:var(--mat-sys-surface, #ffffff);transition:background-color .1s cubic-bezier(0,0,.2,1),box-shadow .1s cubic-bezier(0,0,.2,1)}.mat-mdc-chip.mat-sort-header:hover{cursor:move}.mat-mdc-chip.mat-sort-header:hover:after{opacity:0}.mat-mdc-chip.mat-sort-header:focus:after{opacity:0}.mat-mdc-chip.mat-sort-header:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drop-list-dragging .mat-sort-header:not(.cdk-drag-placeholder){background-color:var(--mat-sys-surface-dim, #ffffff);transition:transform .15s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i1$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i1$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
738
738
|
}
|
|
739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MatMultiSortControlComponent, decorators: [{
|
|
740
740
|
type: Component,
|
|
741
741
|
args: [{ selector: "mat-multi-sort-control", imports: [CdkDropList, CdkDrag, MatChipsModule, MatIconModule], template: "<mat-chip-listbox\n cdkDropList\n [cdkDropListOrientation]=\"orientation\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <mat-chip\n [disabled]=\"!sorts.length\"\n [highlighted]=\"true\"\n (click)=\"onClearClick()\"\n ><mat-icon matChipAvatar fontIcon=\"clear_all\"></mat-icon\n ><span i18n>Clear All</span></mat-chip\n >\n @for (column of sorts; track $index) {\n <mat-chip\n class=\"mat-sort-header\"\n cdkDrag\n (click)=\"onChipClick(column.active)\"\n (removed)=\"onChipRemoved(column.active)\">\n <div\n matChipAvatar\n class=\"mat-sort-header-container mat-sort-header-sorted mat-focus-indicator\"\n [class.mat-sort-header-descending]=\"column.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"column.direction === 'asc'\"\n [class.mat-sort-header-animations-disabled]=\"\n _animationModule === 'NoopAnimations'\n \">\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path\n d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\" />\n </svg>\n </div>\n </div>\n {{ column.active }}\n <button matChipRemove i18n-matTooltip matTooltip=\"Clear column sorting\">\n <mat-icon>clear</mat-icon>\n </button>\n </mat-chip>\n }\n</mat-chip-listbox>\n", styles: [".cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .15s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.mat-mdc-chip.mat-sort-header{background-color:var(--mat-sys-surface, #ffffff);transition:background-color .1s cubic-bezier(0,0,.2,1),box-shadow .1s cubic-bezier(0,0,.2,1)}.mat-mdc-chip.mat-sort-header:hover{cursor:move}.mat-mdc-chip.mat-sort-header:hover:after{opacity:0}.mat-mdc-chip.mat-sort-header:focus:after{opacity:0}.mat-mdc-chip.mat-sort-header:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drop-list-dragging .mat-sort-header:not(.cdk-drag-placeholder){background-color:var(--mat-sys-surface-dim, #ffffff);transition:transform .15s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
742
742
|
}], propDecorators: { orientation: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-mat-table-multi-sort",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.14.0",
|
|
4
4
|
"preview": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -21,21 +21,21 @@
|
|
|
21
21
|
],
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|
|
24
|
-
"url": "git+https://github.com/
|
|
24
|
+
"url": "git+https://github.com/lion-and-bear/ngx-mat-table-multi-sort.git"
|
|
25
25
|
},
|
|
26
26
|
"bugs": {
|
|
27
|
-
"url": "https://github.com/
|
|
27
|
+
"url": "https://github.com/lion-and-bear/ngx-mat-table-multi-sort/issues"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.8.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@angular/animations": "^19.2.
|
|
33
|
+
"@angular/animations": "^19.2.22",
|
|
34
34
|
"@angular/cdk": "^19.2.19",
|
|
35
|
-
"@angular/common": "^19.2.
|
|
36
|
-
"@angular/core": "^19.2.
|
|
37
|
-
"@angular/forms": "^19.2.
|
|
38
|
-
"@angular/localize": "^19.2.
|
|
35
|
+
"@angular/common": "^19.2.22",
|
|
36
|
+
"@angular/core": "^19.2.22",
|
|
37
|
+
"@angular/forms": "^19.2.22",
|
|
38
|
+
"@angular/localize": "^19.2.22",
|
|
39
39
|
"@angular/material": "^19.2.19",
|
|
40
40
|
"rxjs": "^7.8.1",
|
|
41
41
|
"zone.js": "^0.15.0"
|