ngx-mat-table-multi-sort 18.1.0 → 18.2.0-pre.0

package/fesm2022/ngx-mat-table-multi-sort.mjs

@@ -1,29 +1,83 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, effect, Directive, Component, Inject, Injector, Input, HostListener, inject, ViewEncapsulation, ANIMATION_MODULE_TYPE } from '@angular/core';
+import { InjectionToken, EventEmitter, signal, effect, Directive, Optional, Inject, Output, Injectable, Component, HostListener, inject, ViewEncapsulation, ANIMATION_MODULE_TYPE, Input } from '@angular/core';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatSort, MAT_SORT_DEFAULT_OPTIONS, MatSortHeader } from '@angular/material/sort';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/material/checkbox';
+import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/cdk/overlay';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/cdk/overlay';
 import { MatTableDataSource } from '@angular/material/table';
 import { NgIf } from '@angular/common';
-import * as i1$2 from '@angular/material/chips';
+import * as i1$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
 /**
- * Injection token for providing table column configurations.
+ * Injection token for the storage mechanism used to persist column configuration.
  *
- * This token is used to inject an array of `TableColumn` configurations
- * into Angular components or services. The generic type `unknown` is used
- * to allow for flexibility in the type of data that can be represented
- * by the table columns.
+ * This token can be used to provide a custom storage implementation for saving
+ * and retrieving the state of table column configurations.
+ *
+ */
+const COLUMN_CONFIG_PERSISTENCE_STORAGE = new InjectionToken("COLUMN_CONFIG_PERSISTENCE_STORAGE");
+/**
+ * Injection token used to enable or disable column configuration persistence.
+ *
+ * This token can be provided with a boolean value to indicate whether the
+ * column configurations should be persisted (e.g., in local storage or a database).
+ *
+ */
+const COLUMN_CONFIG_PERSISTENCE_ENABLED = new InjectionToken("COLUMN_CONFIG_PERSISTENCE_ENABLED");
+/**
+ * Injection token for the column configuration persistence key.
+ * This token is used to provide a unique key for persisting column configurations.
  */
-const TABLE_COLUMNS = new InjectionToken("TABLE_COLUMNS");
+const COLUMN_CONFIG_PERSISTENCE_KEY = new InjectionToken("COLUMN_CONFIG_PERSISTENCE_KEY");
 
+/**
+ * Injection token for the storage mechanism used to persist sorting state.
+ *
+ * This token can be used to provide a custom storage implementation for persisting
+ * the sorting state of a table. By default, it can be set to use localStorage, sessionStorage,
+ * or any other storage mechanism that implements the Storage interface.
+ *
+ */
+const SORT_PERSISTENCE_STORAGE = new InjectionToken("SORT_PERSISTENCE_STORAGE");
+/**
+ * Injection token used to enable or disable the persistence of sorting state.
+ *
+ * This token can be provided in the application's dependency injection system
+ * to control whether the sorting state of a table should be persisted across
+ * sessions or not.
+ *
+ * @example
+ * // To enable sort persistence:
+ * providers: [
+ *   { provide: SORT_PERSISTENCE_ENABLED, useValue: true }
+ * ]
+ *
+ * @example
+ * // To disable sort persistence:
+ * providers: [
+ *   { provide: SORT_PERSISTENCE_ENABLED, useValue: false }
+ * ]
+ */
+const SORT_PERSISTENCE_ENABLED = new InjectionToken("SORT_PERSISTENCE_ENABLED");
+/**
+ * Injection token for the key used to persist sorting state.
+ *
+ * This token can be used to provide a custom key for storing
+ * the sorting state in a persistence layer, such as local storage
+ * or a database.
+ */
+const SORT_PERSISTENCE_KEY = new InjectionToken("SORT_PERSISTENCE_KEY");
 class MatMultiSortDirective extends MatSort {
+    isPersistenceEnabled;
+    key;
+    storage;
+    persistenceChanged = new EventEmitter();
     /**
      * A writable signal that holds an array of Sort objects.
      * This signal is used to manage the sorting state of the table.
@@ -31,17 +85,26 @@ class MatMultiSortDirective extends MatSort {
      * @readonly
      */
     _sorts = signal([]);
-    constructor() {
-        super();
-        /* We are using an effect to emit the sortChange event whenever the _sorts signal changes.
-         * This is necessary because the sortChange event is not emitted when the _sorts signal is updated directly (e.g., this._sorts.set([])).
-         */
+    constructor(isPersistenceEnabled, key, storage, defaultOptions) {
+        super(defaultOptions);
+        this.isPersistenceEnabled = isPersistenceEnabled;
+        this.key = key;
+        this.storage = storage;
+        this.isPersistenceEnabled ??= true;
+        this.key ??= "mat-table-persistence-sort";
+        this.storage ??= localStorage;
+        if (this.isPersistenceEnabled) {
+            const sortsSerialized = this.storage.getItem(this.key);
+            this._sorts.set(sortsSerialized ? JSON.parse(sortsSerialized) : []);
+        }
+        // This is necessary because the sortChange event is not emitted when the _sorts signal is updated directly (e.g., this._sorts.set([])).
         effect(() => {
             const length = this._sorts().length;
             this.sortChange.emit({
                 active: length ? this._sorts()[length - 1].active : "",
                 direction: length ? this._sorts()[length - 1].direction : "",
             });
+            this.persistSortSettings();
         });
     }
     /**
@@ -83,6 +146,7 @@ class MatMultiSortDirective extends MatSort {
             }
         }
         this.sortChange.emit({ active: this.active, direction: this.direction });
+        this.persistSortSettings();
     }
     /**
      * Removes a sort level by its identifier.
@@ -97,6 +161,7 @@ class MatMultiSortDirective extends MatSort {
             return;
         this._sorts().splice(index, 1);
         this.sortChange.emit();
+        this.persistSortSettings();
     }
     /**
      * Reorders the sort level by moving an item in the sort array from a previous index to a current index.
@@ -110,6 +175,7 @@ class MatMultiSortDirective extends MatSort {
             return;
         moveItemInArray(this._sorts(), previousIndex, currentIndex);
         this.sortChange.emit(this._sorts()[currentIndex]);
+        this.persistSortSettings();
     }
     /**
      * Toggles the sort direction for the given column ID.
@@ -130,6 +196,7 @@ class MatMultiSortDirective extends MatSort {
         });
         this._sorts()[index].direction = this.direction;
         this.sortChange.emit({ active: this.active, direction: this.direction });
+        this.persistSortSettings();
     }
     /**
      * Clears the current sorting state.
@@ -142,9 +209,15 @@ class MatMultiSortDirective extends MatSort {
         this.direction = "";
         this._sorts.set([]);
         this.sortChange.emit();
+        this.persistSortSettings();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatMultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatMultiSortDirective, isStandalone: true, selector: "[matMultiSort]", host: { classAttribute: "mat-sort" }, exportAs: ["matMultiSort"], usesInheritance: true, ngImport: i0 });
+    persistSortSettings() {
+        this.persistenceChanged.emit(this._sorts());
+        if (this.isPersistenceEnabled)
+            this.storage.setItem(this.key, JSON.stringify(this._sorts()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatMultiSortDirective, isStandalone: true, selector: "[matMultiSort]", outputs: { persistenceChanged: "persistenceChanged" }, host: { classAttribute: "mat-sort" }, exportAs: ["matMultiSort"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatMultiSortDirective, decorators: [{
             type: Directive,
@@ -156,12 +229,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     },
                     standalone: true,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SORT_PERSISTENCE_ENABLED]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SORT_PERSISTENCE_KEY]
+                }] }, { type: Storage, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SORT_PERSISTENCE_STORAGE]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_SORT_DEFAULT_OPTIONS]
+                }] }], propDecorators: { persistenceChanged: [{
+                type: Output
+            }] } });
+
+class MatTableColumnConfigPersistenceService {
+    isPersistenceEnabled;
+    key;
+    storage;
+    columns$ = new BehaviorSubject([]);
+    /**
+     * Gets the current table columns configuration.
+     *
+     * @returns {TableColumn<T>[]} An array of table columns.
+     */
+    get columns() {
+        return this.columns$.getValue();
+    }
+    /**
+     * Sets the columns configuration for the table and persists the configuration.
+     *
+     * @param value - An array of `TableColumn<T>` representing the new column configuration.
+     */
+    set columns(value) {
+        this.columns$.next(value);
+        this.persistColumnConfig(value);
+    }
+    constructor(isPersistenceEnabled, key, storage) {
+        this.isPersistenceEnabled = isPersistenceEnabled;
+        this.key = key;
+        this.storage = storage;
+        this.isPersistenceEnabled ??= true;
+        this.key ??= "mat-table-persistence-column-config";
+        this.storage ??= localStorage;
+        if (this.isPersistenceEnabled) {
+            const columnsSerialized = this.storage.getItem(this.key);
+            this.columns$.next(columnsSerialized ? JSON.parse(columnsSerialized) : []);
+        }
+    }
+    /**
+     * Retrieves an observable stream of table columns.
+     *
+     * @returns {Observable<TableColumn<T>[]>} An observable that emits an array of table columns.
+     */
+    getColumns() {
+        return this.columns$.asObservable();
+    }
+    persistColumnConfig(columns) {
+        if (!this.isPersistenceEnabled)
+            return;
+        this.storage.setItem(this.key, JSON.stringify(columns));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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 });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigPersistenceService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigPersistenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [COLUMN_CONFIG_PERSISTENCE_ENABLED]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [COLUMN_CONFIG_PERSISTENCE_KEY]
+                }] }, { type: Storage, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [COLUMN_CONFIG_PERSISTENCE_STORAGE]
+                }] }] });
 
 class MatTableColumnConfigComponent {
-    columns;
-    constructor(columns) {
-        this.columns = columns;
+    persistenceService;
+    subscription;
+    columns = [];
+    constructor(persistenceService) {
+        this.persistenceService = persistenceService;
+    }
+    ngOnInit() {
+        this.subscription = this.persistenceService
+            .getColumns()
+            .subscribe((columns) => {
+            this.columns = columns;
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.subscription = undefined;
     }
     /**
      * Handles the event when a dragged column is dropped.
@@ -171,6 +351,7 @@ class MatTableColumnConfigComponent {
      */
     onColumnDropped(event) {
         moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+        this.persistenceService.columns = this.columns;
     }
     /**
      * Toggles the visibility of a column based on its identifier.
@@ -182,31 +363,21 @@ class MatTableColumnConfigComponent {
         if (index < 0)
             return;
         this.columns[index].visible = !this.columns[index].visible;
+        this.persistenceService.columns = this.columns;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigComponent, deps: [{ token: TABLE_COLUMNS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatTableColumnConfigComponent, isStandalone: true, selector: "mat-table-column-config", ngImport: i0, template: "<div\n  cdkDropList\n  class=\"table-column-list mat-elevation-z4\"\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", 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}.table-column-list{background-color:var(--mat-sys-surface-container, #eeeeee);color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.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: MatCheckboxModule }, { kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigComponent, deps: [{ token: MatTableColumnConfigPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatTableColumnConfigComponent, isStandalone: true, selector: "mat-table-column-config", ngImport: i0, template: "<div\n  cdkDropList\n  class=\"table-column-list mat-elevation-z4\"\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", 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}.table-column-list{background-color:var(--mat-sys-surface-container, #eeeeee);color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.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: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: "mat-table-column-config", imports: [CdkDropList, CdkDrag, MatCheckboxModule, MatIconModule], standalone: true, template: "<div\n  cdkDropList\n  class=\"table-column-list mat-elevation-z4\"\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", 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}.table-column-list{background-color:var(--mat-sys-surface-container, #eeeeee);color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TABLE_COLUMNS]
-                }] }] });
+        }], ctorParameters: () => [{ type: MatTableColumnConfigPersistenceService }] });
 
 class MatTableColumnConfigTriggerDirective {
     elementRef;
     overlay;
     viewContainerRef;
     _componentRef = null;
-    /**
-     * Input property that accepts an array of table column configurations.
-     * The alias for this input property is "matTableColumnConfigTrigger".
-     * This property is required.
-     *
-     * @type {TableColumn<T>[]} columns - The array of table column configurations.
-     */
-    columns;
     /**
      * Gets the reference to the MatTableColumnConfigComponent.
      *
@@ -243,11 +414,7 @@ class MatTableColumnConfigTriggerDirective {
             hasBackdrop: true,
             backdropClass: "cdk-overlay-transparent-backdrop",
         });
-        const injector = Injector.create({
-            providers: [{ provide: TABLE_COLUMNS, useValue: this.columns }],
-            parent: this.viewContainerRef.injector,
-        });
-        const portal = new ComponentPortal((MatTableColumnConfigComponent), this.viewContainerRef, injector);
+        const portal = new ComponentPortal((MatTableColumnConfigComponent), this.viewContainerRef, this.viewContainerRef.injector);
         this._componentRef = overlayRef.attach(portal);
         overlayRef.backdropClick().subscribe(() => {
             overlayRef.detach();
@@ -255,8 +422,8 @@ class MatTableColumnConfigTriggerDirective {
             this._componentRef = null;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatTableColumnConfigTriggerDirective, isStandalone: true, selector: "[matTableColumnConfigTrigger]", inputs: { columns: ["matTableColumnConfigTrigger", "columns"] }, host: { listeners: { "click": "onClick()" } }, exportAs: ["matTableColumnConfigTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatTableColumnConfigTriggerDirective, isStandalone: true, selector: "[matTableColumnConfigTrigger]", host: { listeners: { "click": "onClick()" } }, exportAs: ["matTableColumnConfigTrigger"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTableColumnConfigTriggerDirective, decorators: [{
             type: Directive,
@@ -265,10 +432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     exportAs: "matTableColumnConfigTrigger",
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { columns: [{
-                type: Input,
-                args: [{ alias: "matTableColumnConfigTrigger", required: true }]
-            }], onClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["click"]
             }] } });
@@ -456,7 +620,7 @@ class MatMultiSortControlComponent {
         this.sort?.reorderSortLevel(event.previousIndex, event.currentIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatMultiSortControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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>Clear All</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>\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-listbox.mat-mdc-chip-set.cdk-drop-list .cdk-drop-list-dragging{transition:transform .15s cubic-bezier(0,0,.2,1)}.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}.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-app-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-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 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}.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$2.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$2.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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>Clear All</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>\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-listbox.mat-mdc-chip-set.cdk-drop-list .cdk-drop-list-dragging{transition:transform .15s cubic-bezier(0,0,.2,1)}.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}.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-app-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-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 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}.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatMultiSortControlComponent, decorators: [{
             type: Component,
@@ -468,12 +632,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 /*
- * Public API Surface of lib
+ * Public API surface of the library
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MatMultiSortControlComponent, MatMultiSortDirective, MatMultiSortHeaderComponent, MatMultiSortTableDataSource, MatTableColumnConfigComponent, MatTableColumnConfigTriggerDirective, MultiCriterionSort, TABLE_COLUMNS };
+export { COLUMN_CONFIG_PERSISTENCE_ENABLED, COLUMN_CONFIG_PERSISTENCE_KEY, COLUMN_CONFIG_PERSISTENCE_STORAGE, MatMultiSortControlComponent, MatMultiSortDirective, MatMultiSortHeaderComponent, MatMultiSortTableDataSource, MatTableColumnConfigComponent, MatTableColumnConfigPersistenceService, MatTableColumnConfigTriggerDirective, MultiCriterionSort, SORT_PERSISTENCE_ENABLED, SORT_PERSISTENCE_KEY, SORT_PERSISTENCE_STORAGE };
 //# sourceMappingURL=ngx-mat-table-multi-sort.mjs.map