ngx-mat-table-multi-sort 19.7.1 → 20.0.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/fesm2022/ngx-mat-table-multi-sort.mjs +59 -110
- package/fesm2022/ngx-mat-table-multi-sort.mjs.map +1 -1
- package/index.d.ts +394 -3
- package/package.json +8 -8
- package/lib/mat-multi-sort-control/mat-multi-sort-control.component.d.ts +0 -65
- package/lib/mat-multi-sort-header/mat-multi-sort-header.component.d.ts +0 -23
- package/lib/mat-multi-sort-table-data-source.d.ts +0 -30
- package/lib/mat-multi-sort.directive.d.ts +0 -139
- package/lib/mat-table-column-config/mat-table-column-config.component.d.ts +0 -51
- package/lib/mat-table-column-config-persistence.service.d.ts +0 -49
- package/lib/mat-table-column-config-trigger.directive.d.ts +0 -21
- package/lib/mat-table-column-config.d.ts +0 -32
- package/public-api.d.ts +0 -8
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, EventEmitter, signal, effect, Output,
|
|
2
|
+
import { InjectionToken, inject, EventEmitter, signal, effect, Output, Directive, Injectable, Component, ElementRef, ViewContainerRef, HostListener, ViewEncapsulation, ANIMATION_MODULE_TYPE, Input } from '@angular/core';
|
|
3
3
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
4
4
|
import { MatSort, MAT_SORT_DEFAULT_OPTIONS, MatSortHeader } from '@angular/material/sort';
|
|
5
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
5
6
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
6
|
-
import * as
|
|
7
|
+
import * as i1 from '@angular/material/button';
|
|
7
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
8
|
-
import * as
|
|
9
|
+
import * as i2 from '@angular/material/checkbox';
|
|
9
10
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
10
|
-
import * as
|
|
11
|
+
import * as i3 from '@angular/material/icon';
|
|
11
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
12
|
-
import * as
|
|
13
|
+
import * as i4 from '@angular/material/tooltip';
|
|
13
14
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
14
15
|
import { BehaviorSubject } from 'rxjs';
|
|
15
|
-
import * as i1 from '@angular/cdk/overlay';
|
|
16
16
|
import { MatTableDataSource } from '@angular/material/table';
|
|
17
|
-
import { NgIf } from '@angular/common';
|
|
18
17
|
import * as i1$1 from '@angular/material/chips';
|
|
19
18
|
import { MatChipsModule } from '@angular/material/chips';
|
|
20
19
|
|
|
@@ -78,9 +77,11 @@ const SORT_PERSISTENCE_ENABLED = new InjectionToken("SORT_PERSISTENCE_ENABLED");
|
|
|
78
77
|
*/
|
|
79
78
|
const SORT_PERSISTENCE_KEY = new InjectionToken("SORT_PERSISTENCE_KEY");
|
|
80
79
|
class MatMultiSortDirective extends MatSort {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
storage = inject(SORT_PERSISTENCE_STORAGE, { optional: true }) ??
|
|
81
|
+
localStorage;
|
|
82
|
+
persistenceKey = inject(SORT_PERSISTENCE_KEY, { optional: true }) ??
|
|
83
|
+
"mat-table-persistence-sort";
|
|
84
|
+
isPersistenceEnabled = inject(SORT_PERSISTENCE_ENABLED, { optional: true }) ?? true;
|
|
84
85
|
/**
|
|
85
86
|
* Event emitter that fires when the persistence state changes.
|
|
86
87
|
*
|
|
@@ -103,7 +104,6 @@ class MatMultiSortDirective extends MatSort {
|
|
|
103
104
|
* ```
|
|
104
105
|
*/
|
|
105
106
|
persistenceChanged = new EventEmitter();
|
|
106
|
-
_key;
|
|
107
107
|
/**
|
|
108
108
|
* A writable signal that holds an array of Sort objects.
|
|
109
109
|
* This signal is used to manage the sorting state of the table.
|
|
@@ -117,16 +117,13 @@ class MatMultiSortDirective extends MatSort {
|
|
|
117
117
|
* @returns {string} The key used for column configuration persistence.
|
|
118
118
|
*/
|
|
119
119
|
get key() {
|
|
120
|
-
return this.
|
|
120
|
+
return this.persistenceKey;
|
|
121
121
|
}
|
|
122
|
-
constructor(
|
|
122
|
+
constructor() {
|
|
123
|
+
const defaultOptions = inject(MAT_SORT_DEFAULT_OPTIONS, {
|
|
124
|
+
optional: true,
|
|
125
|
+
}) ?? undefined;
|
|
123
126
|
super(defaultOptions);
|
|
124
|
-
this.isPersistenceEnabled = isPersistenceEnabled;
|
|
125
|
-
this.initialKey = initialKey;
|
|
126
|
-
this.storage = storage;
|
|
127
|
-
this.isPersistenceEnabled ??= true;
|
|
128
|
-
this._key = initialKey ?? "mat-table-persistence-sort";
|
|
129
|
-
this.storage ??= localStorage;
|
|
130
127
|
if (this.isPersistenceEnabled) {
|
|
131
128
|
const sortsSerialized = this.storage.getItem(this.key);
|
|
132
129
|
this._sorts.set(sortsSerialized ? JSON.parse(sortsSerialized) : []);
|
|
@@ -259,7 +256,7 @@ class MatMultiSortDirective extends MatSort {
|
|
|
259
256
|
* @returns void
|
|
260
257
|
*/
|
|
261
258
|
setPersistenceKey(key, overwritePersistedValue = false) {
|
|
262
|
-
this.
|
|
259
|
+
this.persistenceKey = key;
|
|
263
260
|
if (overwritePersistedValue) {
|
|
264
261
|
this.persistSortSettings();
|
|
265
262
|
return;
|
|
@@ -267,10 +264,10 @@ class MatMultiSortDirective extends MatSort {
|
|
|
267
264
|
const sortsSerialized = this.storage.getItem(this.key);
|
|
268
265
|
this._sorts.set(sortsSerialized ? JSON.parse(sortsSerialized) : []);
|
|
269
266
|
}
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
271
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
268
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: MatMultiSortDirective, isStandalone: true, selector: "[matMultiSort]", outputs: { persistenceChanged: "persistenceChanged" }, host: { classAttribute: "mat-sort" }, exportAs: ["matMultiSort"], usesInheritance: true, ngImport: i0 });
|
|
272
269
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortDirective, decorators: [{
|
|
274
271
|
type: Directive,
|
|
275
272
|
args: [{
|
|
276
273
|
selector: "[matMultiSort]",
|
|
@@ -279,36 +276,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
279
276
|
class: "mat-sort",
|
|
280
277
|
},
|
|
281
278
|
}]
|
|
282
|
-
}], ctorParameters: () => [
|
|
283
|
-
type: Optional
|
|
284
|
-
}, {
|
|
285
|
-
type: Inject,
|
|
286
|
-
args: [SORT_PERSISTENCE_ENABLED]
|
|
287
|
-
}] }, { type: undefined, decorators: [{
|
|
288
|
-
type: Optional
|
|
289
|
-
}, {
|
|
290
|
-
type: Inject,
|
|
291
|
-
args: [SORT_PERSISTENCE_KEY]
|
|
292
|
-
}] }, { type: Storage, decorators: [{
|
|
293
|
-
type: Optional
|
|
294
|
-
}, {
|
|
295
|
-
type: Inject,
|
|
296
|
-
args: [SORT_PERSISTENCE_STORAGE]
|
|
297
|
-
}] }, { type: undefined, decorators: [{
|
|
298
|
-
type: Optional
|
|
299
|
-
}, {
|
|
300
|
-
type: Inject,
|
|
301
|
-
args: [MAT_SORT_DEFAULT_OPTIONS]
|
|
302
|
-
}] }], propDecorators: { persistenceChanged: [{
|
|
279
|
+
}], ctorParameters: () => [], propDecorators: { persistenceChanged: [{
|
|
303
280
|
type: Output
|
|
304
281
|
}] } });
|
|
305
282
|
|
|
306
283
|
class MatTableColumnConfigPersistenceService {
|
|
307
|
-
isPersistenceEnabled;
|
|
308
|
-
initialKey;
|
|
309
|
-
storage;
|
|
310
284
|
columns$ = new BehaviorSubject([]);
|
|
311
|
-
|
|
285
|
+
storage = inject(COLUMN_CONFIG_PERSISTENCE_STORAGE, { optional: true }) ??
|
|
286
|
+
localStorage;
|
|
287
|
+
persistenceKey = inject(COLUMN_CONFIG_PERSISTENCE_KEY, { optional: true }) ??
|
|
288
|
+
"mat-table-persistence-column-config";
|
|
289
|
+
isPersistenceEnabled = inject(COLUMN_CONFIG_PERSISTENCE_ENABLED, { optional: true }) ?? true;
|
|
312
290
|
/**
|
|
313
291
|
* Gets the current table columns configuration.
|
|
314
292
|
*
|
|
@@ -332,19 +310,13 @@ class MatTableColumnConfigPersistenceService {
|
|
|
332
310
|
* @returns {string} The key used for column configuration persistence.
|
|
333
311
|
*/
|
|
334
312
|
get key() {
|
|
335
|
-
return this.
|
|
336
|
-
}
|
|
337
|
-
constructor(
|
|
338
|
-
this.isPersistenceEnabled
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
this.
|
|
342
|
-
this._key = initialKey ?? "mat-table-persistence-column-config";
|
|
343
|
-
this.storage ??= localStorage;
|
|
344
|
-
if (this.isPersistenceEnabled) {
|
|
345
|
-
const columnsSerialized = this.storage.getItem(this.key);
|
|
346
|
-
this.columns$.next(columnsSerialized ? JSON.parse(columnsSerialized) : []);
|
|
347
|
-
}
|
|
313
|
+
return this.persistenceKey;
|
|
314
|
+
}
|
|
315
|
+
constructor() {
|
|
316
|
+
if (!this.isPersistenceEnabled)
|
|
317
|
+
return;
|
|
318
|
+
const columnsSerialized = this.storage.getItem(this.key);
|
|
319
|
+
this.columns$.next(columnsSerialized ? JSON.parse(columnsSerialized) : []);
|
|
348
320
|
}
|
|
349
321
|
/**
|
|
350
322
|
* Retrieves an observable stream of table columns.
|
|
@@ -357,7 +329,7 @@ class MatTableColumnConfigPersistenceService {
|
|
|
357
329
|
persistColumnConfig(columns) {
|
|
358
330
|
if (!this.isPersistenceEnabled)
|
|
359
331
|
return;
|
|
360
|
-
this.storage.setItem(this.
|
|
332
|
+
this.storage.setItem(this.persistenceKey, JSON.stringify(columns));
|
|
361
333
|
}
|
|
362
334
|
/**
|
|
363
335
|
* Sets the persistence key for storing column configurations.
|
|
@@ -370,46 +342,28 @@ class MatTableColumnConfigPersistenceService {
|
|
|
370
342
|
* @returns void
|
|
371
343
|
*/
|
|
372
344
|
setPersistenceKey(key, overwritePersistedValue = false) {
|
|
373
|
-
this.
|
|
345
|
+
this.persistenceKey = key;
|
|
374
346
|
if (overwritePersistedValue) {
|
|
375
347
|
this.persistColumnConfig(this.columns);
|
|
376
348
|
return;
|
|
377
349
|
}
|
|
378
|
-
const columnsSerialized = this.storage.getItem(this.
|
|
350
|
+
const columnsSerialized = this.storage.getItem(this.persistenceKey);
|
|
379
351
|
this.columns$.next(columnsSerialized ? JSON.parse(columnsSerialized) : []);
|
|
380
352
|
}
|
|
381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
382
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
353
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
354
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigPersistenceService, providedIn: "root" });
|
|
383
355
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigPersistenceService, decorators: [{
|
|
385
357
|
type: Injectable,
|
|
386
358
|
args: [{
|
|
387
359
|
providedIn: "root",
|
|
388
360
|
}]
|
|
389
|
-
}], ctorParameters: () => [
|
|
390
|
-
type: Optional
|
|
391
|
-
}, {
|
|
392
|
-
type: Inject,
|
|
393
|
-
args: [COLUMN_CONFIG_PERSISTENCE_ENABLED]
|
|
394
|
-
}] }, { type: undefined, decorators: [{
|
|
395
|
-
type: Optional
|
|
396
|
-
}, {
|
|
397
|
-
type: Inject,
|
|
398
|
-
args: [COLUMN_CONFIG_PERSISTENCE_KEY]
|
|
399
|
-
}] }, { type: Storage, decorators: [{
|
|
400
|
-
type: Optional
|
|
401
|
-
}, {
|
|
402
|
-
type: Inject,
|
|
403
|
-
args: [COLUMN_CONFIG_PERSISTENCE_STORAGE]
|
|
404
|
-
}] }] });
|
|
361
|
+
}], ctorParameters: () => [] });
|
|
405
362
|
|
|
406
363
|
class MatTableColumnConfigComponent {
|
|
407
|
-
persistenceService;
|
|
364
|
+
persistenceService = inject(MatTableColumnConfigPersistenceService);
|
|
408
365
|
subscription;
|
|
409
366
|
columns = [];
|
|
410
|
-
constructor(persistenceService) {
|
|
411
|
-
this.persistenceService = persistenceService;
|
|
412
|
-
}
|
|
413
367
|
ngOnInit() {
|
|
414
368
|
this.subscription = this.persistenceService
|
|
415
369
|
.getColumns()
|
|
@@ -481,10 +435,10 @@ class MatTableColumnConfigComponent {
|
|
|
481
435
|
}
|
|
482
436
|
this.persistenceService.columns = this.columns;
|
|
483
437
|
}
|
|
484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
438
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
486
440
|
}
|
|
487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigComponent, decorators: [{
|
|
488
442
|
type: Component,
|
|
489
443
|
args: [{ selector: "mat-table-column-config", imports: [
|
|
490
444
|
CdkDropList,
|
|
@@ -494,12 +448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
494
448
|
MatIconModule,
|
|
495
449
|
MatTooltipModule,
|
|
496
450
|
], 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"] }]
|
|
497
|
-
}]
|
|
451
|
+
}] });
|
|
498
452
|
|
|
499
453
|
class MatTableColumnConfigTriggerDirective {
|
|
500
|
-
elementRef;
|
|
501
|
-
overlay;
|
|
502
|
-
viewContainerRef;
|
|
454
|
+
elementRef = inject(ElementRef);
|
|
455
|
+
overlay = inject(Overlay);
|
|
456
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
503
457
|
_componentRef = null;
|
|
504
458
|
/**
|
|
505
459
|
* Gets the reference to the MatTableColumnConfigComponent.
|
|
@@ -510,11 +464,6 @@ class MatTableColumnConfigTriggerDirective {
|
|
|
510
464
|
get componentRef() {
|
|
511
465
|
return this._componentRef;
|
|
512
466
|
}
|
|
513
|
-
constructor(elementRef, overlay, viewContainerRef) {
|
|
514
|
-
this.elementRef = elementRef;
|
|
515
|
-
this.overlay = overlay;
|
|
516
|
-
this.viewContainerRef = viewContainerRef;
|
|
517
|
-
}
|
|
518
467
|
onClick() {
|
|
519
468
|
// Create the component portal
|
|
520
469
|
const positionStrategy = this.overlay
|
|
@@ -545,16 +494,16 @@ class MatTableColumnConfigTriggerDirective {
|
|
|
545
494
|
this._componentRef = null;
|
|
546
495
|
});
|
|
547
496
|
}
|
|
548
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
549
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
497
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
498
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: MatTableColumnConfigTriggerDirective, isStandalone: true, selector: "[matTableColumnConfigTrigger]", host: { listeners: { "click": "onClick()" } }, exportAs: ["matTableColumnConfigTrigger"], ngImport: i0 });
|
|
550
499
|
}
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatTableColumnConfigTriggerDirective, decorators: [{
|
|
552
501
|
type: Directive,
|
|
553
502
|
args: [{
|
|
554
503
|
selector: "[matTableColumnConfigTrigger]",
|
|
555
504
|
exportAs: "matTableColumnConfigTrigger",
|
|
556
505
|
}]
|
|
557
|
-
}],
|
|
506
|
+
}], propDecorators: { onClick: [{
|
|
558
507
|
type: HostListener,
|
|
559
508
|
args: ["click"]
|
|
560
509
|
}] } });
|
|
@@ -657,12 +606,12 @@ class MatMultiSortHeaderComponent extends MatSortHeader {
|
|
|
657
606
|
this._sort.sort(this);
|
|
658
607
|
this._recentlyCleared.set(wasSorted && !this._isSorted() ? prevDirection : null);
|
|
659
608
|
}
|
|
660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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]=\"_animationsDisabled\"\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 @if (_isSorted()) {\n <div class=\"mat-sort-header-counter\">\n {{ sortIndex + 1 }}\n </div>\n }\n</div>\n", styles: [".mat-sort-header{cursor:pointer}.mat-sort-header-disabled{cursor:default}.mat-sort-header-container{display:flex;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-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-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}.mat-sort-header-counter{color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
662
611
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortHeaderComponent, decorators: [{
|
|
664
613
|
type: Component,
|
|
665
|
-
args: [{ selector: "[mat-multi-sort-header]", exportAs: "matMultiSortHeader",
|
|
614
|
+
args: [{ selector: "[mat-multi-sort-header]", exportAs: "matMultiSortHeader", 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]=\"_animationsDisabled\"\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 @if (_isSorted()) {\n <div class=\"mat-sort-header-counter\">\n {{ sortIndex + 1 }}\n </div>\n }\n</div>\n", styles: [".mat-sort-header{cursor:pointer}.mat-sort-header-disabled{cursor:default}.mat-sort-header-container{display:flex;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-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-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}.mat-sort-header-counter{color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}\n"] }]
|
|
666
615
|
}] });
|
|
667
616
|
|
|
668
617
|
class MatMultiSortControlComponent {
|
|
@@ -733,10 +682,10 @@ class MatMultiSortControlComponent {
|
|
|
733
682
|
onDrop(event) {
|
|
734
683
|
this.sort?.reorderSortLevel(event.previousIndex, event.currentIndex);
|
|
735
684
|
}
|
|
736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
685
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
738
687
|
}
|
|
739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MatMultiSortControlComponent, decorators: [{
|
|
740
689
|
type: Component,
|
|
741
690
|
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
691
|
}], propDecorators: { orientation: [{
|