ngx-mat-table-multi-sort 19.10.0 → 19.11.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/README.md +1 -1
- package/fesm2022/ngx-mat-table-multi-sort.mjs +18 -18
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -56,7 +56,7 @@ The demo application is hosted on [GitHub pages](https://pgerke.github.io/ngx-ma
|
|
|
56
56
|
|
|
57
57
|
1. Clone the repository to your local machine
|
|
58
58
|
1. Run `pnpm install` to restore the dependencies
|
|
59
|
-
1. Start the demo application by running `pnpm
|
|
59
|
+
1. Start the demo application by running `pnpm start:demo`
|
|
60
60
|
1. When compilation is completed, the application is running on `http://localhost:4200`
|
|
61
61
|
|
|
62
62
|
## License
|
|
@@ -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.16", 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.16", 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.16", 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.16", 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.16", 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.16", 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.16", ngImport: i0, type: MatTableColumnConfigComponent, deps: [{ token: MatTableColumnConfigPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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.16", 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.16", 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.16", 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.16", 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.16", ngImport: i0, type: MatMultiSortHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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.16", 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.16", ngImport: i0, type: MatMultiSortControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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.16", 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.11.0",
|
|
4
4
|
"preview": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"tslib": "^2.8.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@angular/animations": "^19.2.
|
|
33
|
+
"@angular/animations": "^19.2.16",
|
|
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.16",
|
|
36
|
+
"@angular/core": "^19.2.16",
|
|
37
|
+
"@angular/forms": "^19.2.16",
|
|
38
|
+
"@angular/localize": "^19.2.16",
|
|
39
39
|
"@angular/material": "^19.2.19",
|
|
40
40
|
"rxjs": "^7.8.1",
|
|
41
41
|
"zone.js": "^0.15.0"
|