@angular/cdk-experimental 16.0.0-next.4 → 16.0.0-rc.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.
Files changed (108) hide show
  1. package/combobox/index.d.ts +2 -2
  2. package/{esm2020 → esm2022}/column-resize/column-resize-directives/column-resize-flex.mjs +4 -4
  3. package/{esm2020 → esm2022}/column-resize/column-resize-directives/column-resize.mjs +4 -4
  4. package/{esm2020 → esm2022}/column-resize/column-resize-directives/default-enabled-column-resize-flex.mjs +7 -7
  5. package/{esm2020 → esm2022}/column-resize/column-resize-directives/default-enabled-column-resize.mjs +7 -7
  6. package/{esm2020 → esm2022}/column-resize/column-resize-module.mjs +9 -9
  7. package/{esm2020 → esm2022}/column-resize/column-resize-notifier.mjs +7 -7
  8. package/{esm2020 → esm2022}/column-resize/column-resize.mjs +4 -4
  9. package/{esm2020 → esm2022}/column-resize/column-size-store.mjs +4 -4
  10. package/{esm2020 → esm2022}/column-resize/event-dispatcher.mjs +4 -4
  11. package/{esm2020 → esm2022}/column-resize/overlay-handle.mjs +4 -4
  12. package/{esm2020 → esm2022}/column-resize/resizable.mjs +4 -4
  13. package/{esm2020 → esm2022}/column-resize/resize-strategy.mjs +10 -10
  14. package/{esm2020 → esm2022}/combobox/combobox-module.mjs +5 -5
  15. package/{esm2020 → esm2022}/combobox/combobox-popup.mjs +4 -4
  16. package/{esm2020 → esm2022}/combobox/combobox.mjs +4 -4
  17. package/{esm2020 → esm2022}/popover-edit/edit-event-dispatcher.mjs +4 -4
  18. package/{esm2020 → esm2022}/popover-edit/edit-ref.mjs +4 -4
  19. package/{esm2020 → esm2022}/popover-edit/edit-services.mjs +4 -4
  20. package/{esm2020 → esm2022}/popover-edit/focus-dispatcher.mjs +4 -4
  21. package/{esm2020 → esm2022}/popover-edit/focus-escape-notifier.mjs +4 -4
  22. package/{esm2020 → esm2022}/popover-edit/lens-directives.mjs +10 -10
  23. package/esm2022/popover-edit/popover-edit-module.mjs +63 -0
  24. package/{esm2020 → esm2022}/popover-edit/popover-edit-position-strategy-factory.mjs +7 -7
  25. package/esm2022/popover-edit/table-directives.mjs +400 -0
  26. package/{esm2020 → esm2022}/scrolling/auto-size-virtual-scroll.mjs +10 -10
  27. package/{esm2020 → esm2022}/scrolling/scrolling-module.mjs +5 -5
  28. package/esm2022/selection/row-selection.mjs +52 -0
  29. package/esm2022/selection/select-all.mjs +101 -0
  30. package/{esm2020 → esm2022}/selection/selection-column.mjs +6 -6
  31. package/{esm2020 → esm2022}/selection/selection-module.mjs +9 -9
  32. package/esm2022/selection/selection-toggle.mjs +101 -0
  33. package/{esm2020 → esm2022}/selection/selection.mjs +4 -4
  34. package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container-module.mjs +5 -5
  35. package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container.mjs +4 -4
  36. package/{esm2020 → esm2022}/version.mjs +1 -1
  37. package/fesm2022/cdk-experimental.mjs +7 -0
  38. package/fesm2022/cdk-experimental.mjs.map +1 -0
  39. package/{fesm2020 → fesm2022}/column-resize.mjs +56 -177
  40. package/fesm2022/column-resize.mjs.map +1 -0
  41. package/{fesm2020 → fesm2022}/combobox.mjs +10 -47
  42. package/fesm2022/combobox.mjs.map +1 -0
  43. package/{fesm2020 → fesm2022}/popover-edit.mjs +70 -164
  44. package/fesm2022/popover-edit.mjs.map +1 -0
  45. package/{fesm2020 → fesm2022}/scrolling.mjs +13 -43
  46. package/fesm2022/scrolling.mjs.map +1 -0
  47. package/{fesm2020 → fesm2022}/selection.mjs +30 -103
  48. package/fesm2022/selection.mjs.map +1 -0
  49. package/{fesm2020 → fesm2022}/table-scroll-container.mjs +7 -37
  50. package/fesm2022/table-scroll-container.mjs.map +1 -0
  51. package/package.json +24 -42
  52. package/popover-edit/index.d.ts +4 -4
  53. package/scrolling/index.d.ts +1 -1
  54. package/selection/index.d.ts +4 -4
  55. package/esm2020/popover-edit/popover-edit-module.mjs +0 -63
  56. package/esm2020/popover-edit/table-directives.mjs +0 -401
  57. package/esm2020/selection/row-selection.mjs +0 -50
  58. package/esm2020/selection/select-all.mjs +0 -110
  59. package/esm2020/selection/selection-toggle.mjs +0 -102
  60. package/fesm2015/cdk-experimental.mjs +0 -30
  61. package/fesm2015/cdk-experimental.mjs.map +0 -1
  62. package/fesm2015/column-resize.mjs +0 -1028
  63. package/fesm2015/column-resize.mjs.map +0 -1
  64. package/fesm2015/combobox.mjs +0 -396
  65. package/fesm2015/combobox.mjs.map +0 -1
  66. package/fesm2015/popover-edit.mjs +0 -1230
  67. package/fesm2015/popover-edit.mjs.map +0 -1
  68. package/fesm2015/scrolling.mjs +0 -464
  69. package/fesm2015/scrolling.mjs.map +0 -1
  70. package/fesm2015/selection.mjs +0 -693
  71. package/fesm2015/selection.mjs.map +0 -1
  72. package/fesm2015/table-scroll-container.mjs +0 -177
  73. package/fesm2015/table-scroll-container.mjs.map +0 -1
  74. package/fesm2020/cdk-experimental.mjs +0 -30
  75. package/fesm2020/cdk-experimental.mjs.map +0 -1
  76. package/fesm2020/column-resize.mjs.map +0 -1
  77. package/fesm2020/combobox.mjs.map +0 -1
  78. package/fesm2020/popover-edit.mjs.map +0 -1
  79. package/fesm2020/scrolling.mjs.map +0 -1
  80. package/fesm2020/selection.mjs.map +0 -1
  81. package/fesm2020/table-scroll-container.mjs.map +0 -1
  82. /package/{esm2020 → esm2022}/column-resize/column-resize-directives/constants.mjs +0 -0
  83. /package/{esm2020 → esm2022}/column-resize/column-resize_public_index.mjs +0 -0
  84. /package/{esm2020 → esm2022}/column-resize/index.mjs +0 -0
  85. /package/{esm2020 → esm2022}/column-resize/public-api.mjs +0 -0
  86. /package/{esm2020 → esm2022}/column-resize/resize-ref.mjs +0 -0
  87. /package/{esm2020 → esm2022}/column-resize/selectors.mjs +0 -0
  88. /package/{esm2020 → esm2022}/combobox/combobox_public_index.mjs +0 -0
  89. /package/{esm2020 → esm2022}/combobox/index.mjs +0 -0
  90. /package/{esm2020 → esm2022}/combobox/public-api.mjs +0 -0
  91. /package/{esm2020 → esm2022}/index.mjs +0 -0
  92. /package/{esm2020 → esm2022}/popover-edit/constants.mjs +0 -0
  93. /package/{esm2020 → esm2022}/popover-edit/form-value-container.mjs +0 -0
  94. /package/{esm2020 → esm2022}/popover-edit/index.mjs +0 -0
  95. /package/{esm2020 → esm2022}/popover-edit/polyfill.mjs +0 -0
  96. /package/{esm2020 → esm2022}/popover-edit/popover-edit_public_index.mjs +0 -0
  97. /package/{esm2020 → esm2022}/popover-edit/public-api.mjs +0 -0
  98. /package/{esm2020 → esm2022}/public-api.mjs +0 -0
  99. /package/{esm2020 → esm2022}/scrolling/index.mjs +0 -0
  100. /package/{esm2020 → esm2022}/scrolling/public-api.mjs +0 -0
  101. /package/{esm2020 → esm2022}/scrolling/scrolling_public_index.mjs +0 -0
  102. /package/{esm2020 → esm2022}/selection/index.mjs +0 -0
  103. /package/{esm2020 → esm2022}/selection/public-api.mjs +0 -0
  104. /package/{esm2020 → esm2022}/selection/selection-set.mjs +0 -0
  105. /package/{esm2020 → esm2022}/selection/selection_public_index.mjs +0 -0
  106. /package/{esm2020 → esm2022}/table-scroll-container/index.mjs +0 -0
  107. /package/{esm2020 → esm2022}/table-scroll-container/public-api.mjs +0 -0
  108. /package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container_public_index.mjs +0 -0
@@ -1,1028 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Directive, Injectable, Inject, NgModule, Injector } from '@angular/core';
3
- import { Subject, fromEvent, merge, combineLatest, Observable } from 'rxjs';
4
- import { map, takeUntil, filter, mapTo, take, startWith, pairwise, distinctUntilChanged, share, skip } from 'rxjs/operators';
5
- import { _closest } from '@angular/cdk-experimental/popover-edit';
6
- import { DOCUMENT } from '@angular/common';
7
- import { coerceCssPixelValue } from '@angular/cdk/coercion';
8
- import * as i3 from '@angular/cdk/table';
9
- import { _COALESCED_STYLE_SCHEDULER } from '@angular/cdk/table';
10
- import { ComponentPortal } from '@angular/cdk/portal';
11
- import { ESCAPE } from '@angular/cdk/keycodes';
12
-
13
- /**
14
- * @license
15
- * Copyright Google LLC All Rights Reserved.
16
- *
17
- * Use of this source code is governed by an MIT-style license that can be
18
- * found in the LICENSE file at https://angular.io/license
19
- */
20
- // TODO: Figure out how to remove `mat-` classes from the CDK part of the
21
- // column resize implementation.
22
- const HEADER_CELL_SELECTOR = '.cdk-header-cell, .mat-header-cell';
23
- const HEADER_ROW_SELECTOR = '.cdk-header-row, .mat-header-row';
24
- const RESIZE_OVERLAY_SELECTOR = '.mat-column-resize-overlay-thumb';
25
-
26
- /**
27
- * @license
28
- * Copyright Google LLC All Rights Reserved.
29
- *
30
- * Use of this source code is governed by an MIT-style license that can be
31
- * found in the LICENSE file at https://angular.io/license
32
- */
33
- const HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';
34
- const WITH_RESIZED_COLUMN_CLASS = 'cdk-column-resize-with-resized-column';
35
- let nextId = 0;
36
- /**
37
- * Base class for ColumnResize directives which attach to mat-table elements to
38
- * provide common events and services for column resizing.
39
- */
40
- class ColumnResize {
41
- constructor() {
42
- this.destroyed = new Subject();
43
- /** Unique ID for this table instance. */
44
- this.selectorId = `${++nextId}`;
45
- }
46
- ngAfterViewInit() {
47
- this.elementRef.nativeElement.classList.add(this.getUniqueCssClass());
48
- this._listenForRowHoverEvents();
49
- this._listenForResizeActivity();
50
- this._listenForHoverActivity();
51
- }
52
- ngOnDestroy() {
53
- this.destroyed.next();
54
- this.destroyed.complete();
55
- }
56
- /** Gets the unique CSS class name for this table instance. */
57
- getUniqueCssClass() {
58
- return `cdk-column-resize-${this.selectorId}`;
59
- }
60
- /** Called when a column in the table is resized. Applies a css class to the table element. */
61
- setResized() {
62
- this.elementRef.nativeElement.classList.add(WITH_RESIZED_COLUMN_CLASS);
63
- }
64
- _listenForRowHoverEvents() {
65
- this.ngZone.runOutsideAngular(() => {
66
- const element = this.elementRef.nativeElement;
67
- fromEvent(element, 'mouseover')
68
- .pipe(map(event => _closest(event.target, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
69
- .subscribe(this.eventDispatcher.headerCellHovered);
70
- fromEvent(element, 'mouseleave')
71
- .pipe(filter(event => !!event.relatedTarget &&
72
- !event.relatedTarget.matches(RESIZE_OVERLAY_SELECTOR)), mapTo(null), takeUntil(this.destroyed))
73
- .subscribe(this.eventDispatcher.headerCellHovered);
74
- });
75
- }
76
- _listenForResizeActivity() {
77
- merge(this.eventDispatcher.overlayHandleActiveForCell.pipe(mapTo(undefined)), this.notifier.triggerResize.pipe(mapTo(undefined)), this.notifier.resizeCompleted.pipe(mapTo(undefined)))
78
- .pipe(take(1), takeUntil(this.destroyed))
79
- .subscribe(() => {
80
- this.setResized();
81
- });
82
- }
83
- _listenForHoverActivity() {
84
- this.eventDispatcher.headerRowHoveredOrActiveDistinct
85
- .pipe(startWith(null), pairwise(), takeUntil(this.destroyed))
86
- .subscribe(([previousRow, hoveredRow]) => {
87
- if (hoveredRow) {
88
- hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);
89
- }
90
- if (previousRow) {
91
- previousRow.classList.remove(HOVER_OR_ACTIVE_CLASS);
92
- }
93
- });
94
- }
95
- }
96
- ColumnResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
97
- ColumnResize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: ColumnResize, ngImport: i0 });
98
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResize, decorators: [{
99
- type: Directive
100
- }] });
101
-
102
- /**
103
- * @license
104
- * Copyright Google LLC All Rights Reserved.
105
- *
106
- * Use of this source code is governed by an MIT-style license that can be
107
- * found in the LICENSE file at https://angular.io/license
108
- */
109
- /**
110
- * Originating source of column resize events within a table.
111
- * @docs-private
112
- */
113
- class ColumnResizeNotifierSource {
114
- constructor() {
115
- /** Emits when an in-progress resize is canceled. */
116
- this.resizeCanceled = new Subject();
117
- /** Emits when a resize is applied. */
118
- this.resizeCompleted = new Subject();
119
- /** Triggers a resize action. */
120
- this.triggerResize = new Subject();
121
- }
122
- }
123
- ColumnResizeNotifierSource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
124
- ColumnResizeNotifierSource.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifierSource });
125
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
126
- type: Injectable
127
- }] });
128
- /** Service for triggering column resizes imperatively or being notified of them. */
129
- class ColumnResizeNotifier {
130
- constructor(_source) {
131
- this._source = _source;
132
- /** Emits whenever a column is resized. */
133
- this.resizeCompleted = this._source.resizeCompleted;
134
- }
135
- /** Instantly resizes the specified column. */
136
- resize(columnId, size) {
137
- this._source.triggerResize.next({
138
- columnId,
139
- size,
140
- completeImmediately: true,
141
- isStickyColumn: true,
142
- });
143
- }
144
- }
145
- ColumnResizeNotifier.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifier, deps: [{ token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Injectable });
146
- ColumnResizeNotifier.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifier });
147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnResizeNotifier, decorators: [{
148
- type: Injectable
149
- }], ctorParameters: function () { return [{ type: ColumnResizeNotifierSource }]; } });
150
-
151
- /**
152
- * @license
153
- * Copyright Google LLC All Rights Reserved.
154
- *
155
- * Use of this source code is governed by an MIT-style license that can be
156
- * found in the LICENSE file at https://angular.io/license
157
- */
158
- /** Coordinates events between the column resize directives. */
159
- class HeaderRowEventDispatcher {
160
- constructor(_ngZone) {
161
- this._ngZone = _ngZone;
162
- /**
163
- * Emits the currently hovered header cell or null when no header cells are hovered.
164
- * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct,
165
- * defined below.
166
- */
167
- this.headerCellHovered = new Subject();
168
- /**
169
- * Emits the header cell for which a user-triggered resize is active or null
170
- * when no resize is in progress.
171
- */
172
- this.overlayHandleActiveForCell = new Subject();
173
- /** Distinct and shared version of headerCellHovered. */
174
- this.headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());
175
- /**
176
- * Emits the header that is currently hovered or hosting an active resize event (with active
177
- * taking precedence).
178
- */
179
- this.headerRowHoveredOrActiveDistinct = combineLatest([
180
- this.headerCellHoveredDistinct.pipe(map(cell => _closest(cell, HEADER_ROW_SELECTOR)), startWith(null), distinctUntilChanged()),
181
- this.overlayHandleActiveForCell.pipe(map(cell => _closest(cell, HEADER_ROW_SELECTOR)), startWith(null), distinctUntilChanged()),
182
- ]).pipe(skip(1), // Ignore initial [null, null] emission.
183
- map(([hovered, active]) => active || hovered), distinctUntilChanged(), share());
184
- this._headerRowHoveredOrActiveDistinctReenterZone = this.headerRowHoveredOrActiveDistinct.pipe(this._enterZone(), share());
185
- // Optimization: Share row events observable with subsequent callers.
186
- // At startup, calls will be sequential by row (and typically there's only one).
187
- this._lastSeenRow = null;
188
- this._lastSeenRowHover = null;
189
- }
190
- /**
191
- * Emits whether the specified row should show its overlay controls.
192
- * Emission occurs within the NgZone.
193
- */
194
- resizeOverlayVisibleForHeaderRow(row) {
195
- if (row !== this._lastSeenRow) {
196
- this._lastSeenRow = row;
197
- this._lastSeenRowHover = this._headerRowHoveredOrActiveDistinctReenterZone.pipe(map(hoveredRow => hoveredRow === row), distinctUntilChanged(), share());
198
- }
199
- return this._lastSeenRowHover;
200
- }
201
- _enterZone() {
202
- return (source) => new Observable(observer => source.subscribe({
203
- next: value => this._ngZone.run(() => observer.next(value)),
204
- error: err => observer.error(err),
205
- complete: () => observer.complete(),
206
- }));
207
- }
208
- }
209
- HeaderRowEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: HeaderRowEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
210
- HeaderRowEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: HeaderRowEventDispatcher });
211
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: HeaderRowEventDispatcher, decorators: [{
212
- type: Injectable
213
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
214
-
215
- /**
216
- * @license
217
- * Copyright Google LLC All Rights Reserved.
218
- *
219
- * Use of this source code is governed by an MIT-style license that can be
220
- * found in the LICENSE file at https://angular.io/license
221
- */
222
- /**
223
- * Provides an implementation for resizing a column.
224
- * The details of how resizing works for tables for flex mat-tables are quite different.
225
- */
226
- class ResizeStrategy {
227
- constructor() {
228
- this._pendingResizeDelta = null;
229
- }
230
- /** Adjusts the width of the table element by the specified delta. */
231
- updateTableWidthAndStickyColumns(delta) {
232
- var _a;
233
- if (this._pendingResizeDelta === null) {
234
- const tableElement = this.columnResize.elementRef.nativeElement;
235
- const tableWidth = getElementWidth(tableElement);
236
- this.styleScheduler.schedule(() => {
237
- tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta);
238
- this._pendingResizeDelta = null;
239
- });
240
- this.styleScheduler.scheduleEnd(() => {
241
- this.table.updateStickyColumnStyles();
242
- });
243
- }
244
- this._pendingResizeDelta = ((_a = this._pendingResizeDelta) !== null && _a !== void 0 ? _a : 0) + delta;
245
- }
246
- }
247
- ResizeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
248
- ResizeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ResizeStrategy });
249
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ResizeStrategy, decorators: [{
250
- type: Injectable
251
- }] });
252
- /**
253
- * The optimally performing resize strategy for <table> elements with table-layout: fixed.
254
- * Tested against and outperformed:
255
- * CSS selector
256
- * CSS selector w/ CSS variable
257
- * Updating all cell nodes
258
- */
259
- class TableLayoutFixedResizeStrategy extends ResizeStrategy {
260
- constructor(columnResize, styleScheduler, table) {
261
- super();
262
- this.columnResize = columnResize;
263
- this.styleScheduler = styleScheduler;
264
- this.table = table;
265
- }
266
- applyColumnSize(_, columnHeader, sizeInPx, previousSizeInPx) {
267
- const delta = sizeInPx - (previousSizeInPx !== null && previousSizeInPx !== void 0 ? previousSizeInPx : getElementWidth(columnHeader));
268
- if (delta === 0) {
269
- return;
270
- }
271
- this.styleScheduler.schedule(() => {
272
- columnHeader.style.width = coerceCssPixelValue(sizeInPx);
273
- });
274
- this.updateTableWidthAndStickyColumns(delta);
275
- }
276
- applyMinColumnSize(_, columnHeader, sizeInPx) {
277
- const currentWidth = getElementWidth(columnHeader);
278
- const newWidth = Math.max(currentWidth, sizeInPx);
279
- this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
280
- }
281
- applyMaxColumnSize(_, columnHeader, sizeInPx) {
282
- const currentWidth = getElementWidth(columnHeader);
283
- const newWidth = Math.min(currentWidth, sizeInPx);
284
- this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
285
- }
286
- }
287
- TableLayoutFixedResizeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: TableLayoutFixedResizeStrategy, deps: [{ token: ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.CdkTable }], target: i0.ɵɵFactoryTarget.Injectable });
288
- TableLayoutFixedResizeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: TableLayoutFixedResizeStrategy });
289
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: TableLayoutFixedResizeStrategy, decorators: [{
290
- type: Injectable
291
- }], ctorParameters: function () {
292
- return [{ type: ColumnResize }, { type: i3._CoalescedStyleScheduler, decorators: [{
293
- type: Inject,
294
- args: [_COALESCED_STYLE_SCHEDULER]
295
- }] }, { type: i3.CdkTable }];
296
- } });
297
- /**
298
- * The optimally performing resize strategy for flex mat-tables.
299
- * Tested against and outperformed:
300
- * CSS selector w/ CSS variable
301
- * Updating all mat-cell nodes
302
- */
303
- class CdkFlexTableResizeStrategy extends ResizeStrategy {
304
- constructor(columnResize, styleScheduler, table, document) {
305
- super();
306
- this.columnResize = columnResize;
307
- this.styleScheduler = styleScheduler;
308
- this.table = table;
309
- this._columnIndexes = new Map();
310
- this._columnProperties = new Map();
311
- this._indexSequence = 0;
312
- this.defaultMinSize = 0;
313
- this.defaultMaxSize = Number.MAX_SAFE_INTEGER;
314
- this._document = document;
315
- }
316
- applyColumnSize(cssFriendlyColumnName, columnHeader, sizeInPx, previousSizeInPx) {
317
- // Optimization: Check applied width first as we probably set it already before reading
318
- // offsetWidth which triggers layout.
319
- const delta = sizeInPx -
320
- (previousSizeInPx !== null && previousSizeInPx !== void 0 ? previousSizeInPx : (this._getAppliedWidth(cssFriendlyColumnName) || columnHeader.offsetWidth));
321
- if (delta === 0) {
322
- return;
323
- }
324
- const cssSize = coerceCssPixelValue(sizeInPx);
325
- this._applyProperty(cssFriendlyColumnName, 'flex', `0 0.01 ${cssSize}`);
326
- this.updateTableWidthAndStickyColumns(delta);
327
- }
328
- applyMinColumnSize(cssFriendlyColumnName, _, sizeInPx) {
329
- const cssSize = coerceCssPixelValue(sizeInPx);
330
- this._applyProperty(cssFriendlyColumnName, 'min-width', cssSize, sizeInPx !== this.defaultMinSize);
331
- this.updateTableWidthAndStickyColumns(0);
332
- }
333
- applyMaxColumnSize(cssFriendlyColumnName, _, sizeInPx) {
334
- const cssSize = coerceCssPixelValue(sizeInPx);
335
- this._applyProperty(cssFriendlyColumnName, 'max-width', cssSize, sizeInPx !== this.defaultMaxSize);
336
- this.updateTableWidthAndStickyColumns(0);
337
- }
338
- getColumnCssClass(cssFriendlyColumnName) {
339
- return `cdk-column-${cssFriendlyColumnName}`;
340
- }
341
- ngOnDestroy() {
342
- var _a;
343
- (_a = this._styleElement) === null || _a === void 0 ? void 0 : _a.remove();
344
- this._styleElement = undefined;
345
- }
346
- _getPropertyValue(cssFriendlyColumnName, key) {
347
- const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
348
- return properties.get(key);
349
- }
350
- _getAppliedWidth(cssFriendslyColumnName) {
351
- return coercePixelsFromFlexValue(this._getPropertyValue(cssFriendslyColumnName, 'flex'));
352
- }
353
- _applyProperty(cssFriendlyColumnName, key, value, enable = true) {
354
- const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
355
- this.styleScheduler.schedule(() => {
356
- if (enable) {
357
- properties.set(key, value);
358
- }
359
- else {
360
- properties.delete(key);
361
- }
362
- this._applySizeCss(cssFriendlyColumnName);
363
- });
364
- }
365
- _getStyleSheet() {
366
- if (!this._styleElement) {
367
- this._styleElement = this._document.createElement('style');
368
- this._styleElement.appendChild(this._document.createTextNode(''));
369
- this._document.head.appendChild(this._styleElement);
370
- }
371
- return this._styleElement.sheet;
372
- }
373
- _getColumnPropertiesMap(cssFriendlyColumnName) {
374
- let properties = this._columnProperties.get(cssFriendlyColumnName);
375
- if (properties === undefined) {
376
- properties = new Map();
377
- this._columnProperties.set(cssFriendlyColumnName, properties);
378
- }
379
- return properties;
380
- }
381
- _applySizeCss(cssFriendlyColumnName) {
382
- const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
383
- const propertyKeys = Array.from(properties.keys());
384
- let index = this._columnIndexes.get(cssFriendlyColumnName);
385
- if (index === undefined) {
386
- if (!propertyKeys.length) {
387
- // Nothing to set or unset.
388
- return;
389
- }
390
- index = this._indexSequence++;
391
- this._columnIndexes.set(cssFriendlyColumnName, index);
392
- }
393
- else {
394
- this._getStyleSheet().deleteRule(index);
395
- }
396
- const columnClassName = this.getColumnCssClass(cssFriendlyColumnName);
397
- const tableClassName = this.columnResize.getUniqueCssClass();
398
- const selector = `.${tableClassName} .${columnClassName}`;
399
- const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');
400
- this._getStyleSheet().insertRule(`${selector} {${body}}`, index);
401
- }
402
- }
403
- CdkFlexTableResizeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkFlexTableResizeStrategy, deps: [{ token: ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.CdkTable }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
404
- CdkFlexTableResizeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkFlexTableResizeStrategy });
405
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkFlexTableResizeStrategy, decorators: [{
406
- type: Injectable
407
- }], ctorParameters: function () {
408
- return [{ type: ColumnResize }, { type: i3._CoalescedStyleScheduler, decorators: [{
409
- type: Inject,
410
- args: [_COALESCED_STYLE_SCHEDULER]
411
- }] }, { type: i3.CdkTable }, { type: undefined, decorators: [{
412
- type: Inject,
413
- args: [DOCUMENT]
414
- }] }];
415
- } });
416
- /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
417
- function coercePixelsFromCssValue(cssValue) {
418
- var _a;
419
- return Number((_a = cssValue.match(/(\d+)px/)) === null || _a === void 0 ? void 0 : _a[1]);
420
- }
421
- /** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */
422
- function getElementWidth(element) {
423
- // Optimization: Check style.width first as we probably set it already before reading
424
- // offsetWidth which triggers layout.
425
- return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
426
- }
427
- /**
428
- * Converts CSS flex values as set in CdkFlexTableResizeStrategy to numbers,
429
- * eg "0 0.01 123px" to 123.
430
- */
431
- function coercePixelsFromFlexValue(flexValue) {
432
- var _a;
433
- return Number((_a = flexValue === null || flexValue === void 0 ? void 0 : flexValue.match(/0 0\.01 (\d+)px/)) === null || _a === void 0 ? void 0 : _a[1]);
434
- }
435
- const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER = {
436
- provide: ResizeStrategy,
437
- useClass: TableLayoutFixedResizeStrategy,
438
- };
439
- const FLEX_RESIZE_STRATEGY_PROVIDER = {
440
- provide: ResizeStrategy,
441
- useClass: CdkFlexTableResizeStrategy,
442
- };
443
-
444
- /**
445
- * @license
446
- * Copyright Google LLC All Rights Reserved.
447
- *
448
- * Use of this source code is governed by an MIT-style license that can be
449
- * found in the LICENSE file at https://angular.io/license
450
- */
451
- const PROVIDERS = [
452
- ColumnResizeNotifier,
453
- HeaderRowEventDispatcher,
454
- ColumnResizeNotifierSource,
455
- ];
456
- const TABLE_PROVIDERS = [
457
- ...PROVIDERS,
458
- TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
459
- ];
460
- const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
461
-
462
- /**
463
- * @license
464
- * Copyright Google LLC All Rights Reserved.
465
- *
466
- * Use of this source code is governed by an MIT-style license that can be
467
- * found in the LICENSE file at https://angular.io/license
468
- */
469
- /**
470
- * Explicitly enables column resizing for a table-based cdk-table.
471
- * Individual columns must be annotated specifically.
472
- */
473
- class CdkColumnResize extends ColumnResize {
474
- constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier, table) {
475
- super();
476
- this.columnResizeNotifier = columnResizeNotifier;
477
- this.elementRef = elementRef;
478
- this.eventDispatcher = eventDispatcher;
479
- this.ngZone = ngZone;
480
- this.notifier = notifier;
481
- this.table = table;
482
- }
483
- }
484
- CdkColumnResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResize, deps: [{ token: ColumnResizeNotifier }, { token: i0.ElementRef }, { token: HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: ColumnResizeNotifierSource }, { token: i3.CdkTable }], target: i0.ɵɵFactoryTarget.Directive });
485
- CdkColumnResize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: CdkColumnResize, selector: "table[cdk-table][columnResize]", providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }], usesInheritance: true, ngImport: i0 });
486
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResize, decorators: [{
487
- type: Directive,
488
- args: [{
489
- selector: 'table[cdk-table][columnResize]',
490
- providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }],
491
- }]
492
- }], ctorParameters: function () { return [{ type: ColumnResizeNotifier }, { type: i0.ElementRef }, { type: HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: ColumnResizeNotifierSource }, { type: i3.CdkTable }]; } });
493
-
494
- /**
495
- * @license
496
- * Copyright Google LLC All Rights Reserved.
497
- *
498
- * Use of this source code is governed by an MIT-style license that can be
499
- * found in the LICENSE file at https://angular.io/license
500
- */
501
- /**
502
- * Explicitly enables column resizing for a flexbox-based cdk-table.
503
- * Individual columns must be annotated specifically.
504
- */
505
- class CdkColumnResizeFlex extends ColumnResize {
506
- constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier, table) {
507
- super();
508
- this.columnResizeNotifier = columnResizeNotifier;
509
- this.elementRef = elementRef;
510
- this.eventDispatcher = eventDispatcher;
511
- this.ngZone = ngZone;
512
- this.notifier = notifier;
513
- this.table = table;
514
- }
515
- }
516
- CdkColumnResizeFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeFlex, deps: [{ token: ColumnResizeNotifier }, { token: i0.ElementRef }, { token: HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: ColumnResizeNotifierSource }, { token: i3.CdkTable }], target: i0.ɵɵFactoryTarget.Directive });
517
- CdkColumnResizeFlex.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: CdkColumnResizeFlex, selector: "cdk-table[columnResize]", providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }], usesInheritance: true, ngImport: i0 });
518
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeFlex, decorators: [{
519
- type: Directive,
520
- args: [{
521
- selector: 'cdk-table[columnResize]',
522
- providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }],
523
- }]
524
- }], ctorParameters: function () { return [{ type: ColumnResizeNotifier }, { type: i0.ElementRef }, { type: HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: ColumnResizeNotifierSource }, { type: i3.CdkTable }]; } });
525
-
526
- /**
527
- * @license
528
- * Copyright Google LLC All Rights Reserved.
529
- *
530
- * Use of this source code is governed by an MIT-style license that can be
531
- * found in the LICENSE file at https://angular.io/license
532
- */
533
- /**
534
- * Implicitly enables column resizing for a table-based cdk-table.
535
- * Individual columns will be resizable unless opted out.
536
- */
537
- class CdkDefaultEnabledColumnResize extends ColumnResize {
538
- constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier, table) {
539
- super();
540
- this.columnResizeNotifier = columnResizeNotifier;
541
- this.elementRef = elementRef;
542
- this.eventDispatcher = eventDispatcher;
543
- this.ngZone = ngZone;
544
- this.notifier = notifier;
545
- this.table = table;
546
- }
547
- }
548
- CdkDefaultEnabledColumnResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkDefaultEnabledColumnResize, deps: [{ token: ColumnResizeNotifier }, { token: i0.ElementRef }, { token: HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: ColumnResizeNotifierSource }, { token: i3.CdkTable }], target: i0.ɵɵFactoryTarget.Directive });
549
- CdkDefaultEnabledColumnResize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: CdkDefaultEnabledColumnResize, selector: "table[cdk-table]", providers: [
550
- ...TABLE_PROVIDERS,
551
- { provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResize },
552
- ], usesInheritance: true, ngImport: i0 });
553
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkDefaultEnabledColumnResize, decorators: [{
554
- type: Directive,
555
- args: [{
556
- selector: 'table[cdk-table]',
557
- providers: [
558
- ...TABLE_PROVIDERS,
559
- { provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResize },
560
- ],
561
- }]
562
- }], ctorParameters: function () { return [{ type: ColumnResizeNotifier }, { type: i0.ElementRef }, { type: HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: ColumnResizeNotifierSource }, { type: i3.CdkTable }]; } });
563
-
564
- /**
565
- * @license
566
- * Copyright Google LLC All Rights Reserved.
567
- *
568
- * Use of this source code is governed by an MIT-style license that can be
569
- * found in the LICENSE file at https://angular.io/license
570
- */
571
- /**
572
- * Implicitly enables column resizing for a flex cdk-table.
573
- * Individual columns will be resizable unless opted out.
574
- */
575
- class CdkDefaultEnabledColumnResizeFlex extends ColumnResize {
576
- constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier, table) {
577
- super();
578
- this.columnResizeNotifier = columnResizeNotifier;
579
- this.elementRef = elementRef;
580
- this.eventDispatcher = eventDispatcher;
581
- this.ngZone = ngZone;
582
- this.notifier = notifier;
583
- this.table = table;
584
- }
585
- }
586
- CdkDefaultEnabledColumnResizeFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkDefaultEnabledColumnResizeFlex, deps: [{ token: ColumnResizeNotifier }, { token: i0.ElementRef }, { token: HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: ColumnResizeNotifierSource }, { token: i3.CdkTable }], target: i0.ɵɵFactoryTarget.Directive });
587
- CdkDefaultEnabledColumnResizeFlex.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: CdkDefaultEnabledColumnResizeFlex, selector: "cdk-table", providers: [
588
- ...FLEX_PROVIDERS,
589
- { provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResizeFlex },
590
- ], usesInheritance: true, ngImport: i0 });
591
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkDefaultEnabledColumnResizeFlex, decorators: [{
592
- type: Directive,
593
- args: [{
594
- selector: 'cdk-table',
595
- providers: [
596
- ...FLEX_PROVIDERS,
597
- { provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResizeFlex },
598
- ],
599
- }]
600
- }], ctorParameters: function () { return [{ type: ColumnResizeNotifier }, { type: i0.ElementRef }, { type: HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: ColumnResizeNotifierSource }, { type: i3.CdkTable }]; } });
601
-
602
- /**
603
- * @license
604
- * Copyright Google LLC All Rights Reserved.
605
- *
606
- * Use of this source code is governed by an MIT-style license that can be
607
- * found in the LICENSE file at https://angular.io/license
608
- */
609
- /**
610
- * One of two NgModules for use with CdkColumnResize.
611
- * When using this module, columns are resizable by default.
612
- */
613
- class CdkColumnResizeDefaultEnabledModule {
614
- }
615
- CdkColumnResizeDefaultEnabledModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeDefaultEnabledModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
616
- CdkColumnResizeDefaultEnabledModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeDefaultEnabledModule, declarations: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex], exports: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex] });
617
- CdkColumnResizeDefaultEnabledModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeDefaultEnabledModule });
618
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeDefaultEnabledModule, decorators: [{
619
- type: NgModule,
620
- args: [{
621
- declarations: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
622
- exports: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
623
- }]
624
- }] });
625
- /**
626
- * One of two NgModules for use with CdkColumnResize.
627
- * When using this module, columns are not resizable by default.
628
- */
629
- class CdkColumnResizeModule {
630
- }
631
- CdkColumnResizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
632
- CdkColumnResizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeModule, declarations: [CdkColumnResize, CdkColumnResizeFlex], exports: [CdkColumnResize, CdkColumnResizeFlex] });
633
- CdkColumnResizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeModule });
634
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: CdkColumnResizeModule, decorators: [{
635
- type: NgModule,
636
- args: [{
637
- declarations: [CdkColumnResize, CdkColumnResizeFlex],
638
- exports: [CdkColumnResize, CdkColumnResizeFlex],
639
- }]
640
- }] });
641
-
642
- /**
643
- * @license
644
- * Copyright Google LLC All Rights Reserved.
645
- *
646
- * Use of this source code is governed by an MIT-style license that can be
647
- * found in the LICENSE file at https://angular.io/license
648
- */
649
- /**
650
- * Can be provided by the host application to enable persistence of column resize state.
651
- */
652
- class ColumnSizeStore {
653
- }
654
- ColumnSizeStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnSizeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
655
- ColumnSizeStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnSizeStore });
656
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ColumnSizeStore, decorators: [{
657
- type: Injectable
658
- }] });
659
-
660
- /**
661
- * @license
662
- * Copyright Google LLC All Rights Reserved.
663
- *
664
- * Use of this source code is governed by an MIT-style license that can be
665
- * found in the LICENSE file at https://angular.io/license
666
- */
667
- /** Tracks state of resize events in progress. */
668
- class ResizeRef {
669
- constructor(origin, overlayRef, minWidthPx, maxWidthPx) {
670
- this.origin = origin;
671
- this.overlayRef = overlayRef;
672
- this.minWidthPx = minWidthPx;
673
- this.maxWidthPx = maxWidthPx;
674
- }
675
- }
676
-
677
- /**
678
- * @license
679
- * Copyright Google LLC All Rights Reserved.
680
- *
681
- * Use of this source code is governed by an MIT-style license that can be
682
- * found in the LICENSE file at https://angular.io/license
683
- */
684
- const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';
685
- /**
686
- * Base class for Resizable directives which are applied to column headers to make those columns
687
- * resizable.
688
- */
689
- class Resizable {
690
- constructor() {
691
- this.minWidthPxInternal = 0;
692
- this.maxWidthPxInternal = Number.MAX_SAFE_INTEGER;
693
- this.destroyed = new Subject();
694
- this._viewInitialized = false;
695
- this._isDestroyed = false;
696
- }
697
- /** The minimum width to allow the column to be sized to. */
698
- get minWidthPx() {
699
- return this.minWidthPxInternal;
700
- }
701
- set minWidthPx(value) {
702
- this.minWidthPxInternal = value;
703
- this.columnResize.setResized();
704
- if (this.elementRef.nativeElement && this._viewInitialized) {
705
- this._applyMinWidthPx();
706
- }
707
- }
708
- /** The maximum width to allow the column to be sized to. */
709
- get maxWidthPx() {
710
- return this.maxWidthPxInternal;
711
- }
712
- set maxWidthPx(value) {
713
- this.maxWidthPxInternal = value;
714
- this.columnResize.setResized();
715
- if (this.elementRef.nativeElement && this._viewInitialized) {
716
- this._applyMaxWidthPx();
717
- }
718
- }
719
- ngAfterViewInit() {
720
- this._listenForRowHoverEvents();
721
- this._listenForResizeEvents();
722
- this._appendInlineHandle();
723
- this.styleScheduler.scheduleEnd(() => {
724
- if (this._isDestroyed)
725
- return;
726
- this._viewInitialized = true;
727
- this._applyMinWidthPx();
728
- this._applyMaxWidthPx();
729
- });
730
- }
731
- ngOnDestroy() {
732
- var _a, _b;
733
- this._isDestroyed = true;
734
- this.destroyed.next();
735
- this.destroyed.complete();
736
- (_a = this.inlineHandle) === null || _a === void 0 ? void 0 : _a.remove();
737
- (_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
738
- }
739
- _createOverlayForHandle() {
740
- // Use of overlays allows us to properly capture click events spanning parts
741
- // of two table cells and is also useful for displaying a resize thumb
742
- // over both cells and extending it down the table as needed.
743
- const isRtl = this.directionality.value === 'rtl';
744
- const positionStrategy = this.overlay
745
- .position()
746
- .flexibleConnectedTo(this.elementRef.nativeElement)
747
- .withFlexibleDimensions(false)
748
- .withGrowAfterOpen(false)
749
- .withPush(false)
750
- .withDefaultOffsetX(isRtl ? 1 : 0)
751
- .withPositions([
752
- {
753
- originX: isRtl ? 'start' : 'end',
754
- originY: 'top',
755
- overlayX: 'center',
756
- overlayY: 'top',
757
- },
758
- ]);
759
- return this.overlay.create({
760
- // Always position the overlay based on left-indexed coordinates.
761
- direction: 'ltr',
762
- disposeOnNavigation: true,
763
- positionStrategy,
764
- scrollStrategy: this.overlay.scrollStrategies.reposition(),
765
- width: '16px',
766
- });
767
- }
768
- _listenForRowHoverEvents() {
769
- const element = this.elementRef.nativeElement;
770
- const takeUntilDestroyed = takeUntil(this.destroyed);
771
- this.eventDispatcher
772
- .resizeOverlayVisibleForHeaderRow(_closest(element, HEADER_ROW_SELECTOR))
773
- .pipe(takeUntilDestroyed)
774
- .subscribe(hoveringRow => {
775
- if (hoveringRow) {
776
- if (!this.overlayRef) {
777
- this.overlayRef = this._createOverlayForHandle();
778
- }
779
- this._showHandleOverlay();
780
- }
781
- else if (this.overlayRef) {
782
- // todo - can't detach during an active resize - need to work that out
783
- this.overlayRef.detach();
784
- }
785
- });
786
- }
787
- _listenForResizeEvents() {
788
- const takeUntilDestroyed = takeUntil(this.destroyed);
789
- merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)
790
- .pipe(takeUntilDestroyed, filter(columnSize => columnSize.columnId === this.columnDef.name))
791
- .subscribe(({ size, previousSize, completeImmediately }) => {
792
- this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
793
- this._applySize(size, previousSize);
794
- if (completeImmediately) {
795
- this._completeResizeOperation();
796
- }
797
- });
798
- merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
799
- .pipe(takeUntilDestroyed)
800
- .subscribe(columnSize => {
801
- this._cleanUpAfterResize(columnSize);
802
- });
803
- }
804
- _completeResizeOperation() {
805
- this.ngZone.run(() => {
806
- this.resizeNotifier.resizeCompleted.next({
807
- columnId: this.columnDef.name,
808
- size: this.elementRef.nativeElement.offsetWidth,
809
- });
810
- });
811
- }
812
- _cleanUpAfterResize(columnSize) {
813
- this.elementRef.nativeElement.classList.remove(OVERLAY_ACTIVE_CLASS);
814
- if (this.overlayRef && this.overlayRef.hasAttached()) {
815
- this._updateOverlayHandleHeight();
816
- this.overlayRef.updatePosition();
817
- if (columnSize.columnId === this.columnDef.name) {
818
- this.inlineHandle.focus();
819
- }
820
- }
821
- }
822
- _createHandlePortal() {
823
- const injector = Injector.create({
824
- parent: this.injector,
825
- providers: [
826
- {
827
- provide: ResizeRef,
828
- useValue: new ResizeRef(this.elementRef, this.overlayRef, this.minWidthPx, this.maxWidthPx),
829
- },
830
- ],
831
- });
832
- return new ComponentPortal(this.getOverlayHandleComponentType(), this.viewContainerRef, injector);
833
- }
834
- _showHandleOverlay() {
835
- this._updateOverlayHandleHeight();
836
- this.overlayRef.attach(this._createHandlePortal());
837
- // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.
838
- this.changeDetectorRef.markForCheck();
839
- }
840
- _updateOverlayHandleHeight() {
841
- this.overlayRef.updateSize({ height: this.elementRef.nativeElement.offsetHeight });
842
- }
843
- _applySize(sizeInPixels, previousSize) {
844
- const sizeToApply = Math.min(Math.max(sizeInPixels, this.minWidthPx, 0), this.maxWidthPx);
845
- this.resizeStrategy.applyColumnSize(this.columnDef.cssClassFriendlyName, this.elementRef.nativeElement, sizeToApply, previousSize);
846
- }
847
- _applyMinWidthPx() {
848
- this.resizeStrategy.applyMinColumnSize(this.columnDef.cssClassFriendlyName, this.elementRef.nativeElement, this.minWidthPx);
849
- }
850
- _applyMaxWidthPx() {
851
- this.resizeStrategy.applyMaxColumnSize(this.columnDef.cssClassFriendlyName, this.elementRef.nativeElement, this.maxWidthPx);
852
- }
853
- _appendInlineHandle() {
854
- this.styleScheduler.schedule(() => {
855
- this.inlineHandle = this.document.createElement('div');
856
- this.inlineHandle.tabIndex = 0;
857
- this.inlineHandle.className = this.getInlineHandleCssClassName();
858
- // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.
859
- this.elementRef.nativeElement.appendChild(this.inlineHandle);
860
- });
861
- }
862
- }
863
- Resizable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: Resizable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
864
- Resizable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: Resizable, ngImport: i0 });
865
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: Resizable, decorators: [{
866
- type: Directive
867
- }] });
868
-
869
- /**
870
- * @license
871
- * Copyright Google LLC All Rights Reserved.
872
- *
873
- * Use of this source code is governed by an MIT-style license that can be
874
- * found in the LICENSE file at https://angular.io/license
875
- */
876
- // TODO: Take another look at using cdk drag drop. IIRC I ran into a couple
877
- // good reasons for not using it but I don't remember what they were at this point.
878
- /**
879
- * Base class for a component shown over the edge of a resizable column that is responsible
880
- * for handling column resize mouse events and displaying any visible UI on the column edge.
881
- */
882
- class ResizeOverlayHandle {
883
- constructor() {
884
- this.destroyed = new Subject();
885
- }
886
- ngAfterViewInit() {
887
- this._listenForMouseEvents();
888
- }
889
- ngOnDestroy() {
890
- this.destroyed.next();
891
- this.destroyed.complete();
892
- }
893
- _listenForMouseEvents() {
894
- this.ngZone.runOutsideAngular(() => {
895
- fromEvent(this.elementRef.nativeElement, 'mouseenter')
896
- .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil(this.destroyed))
897
- .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
898
- fromEvent(this.elementRef.nativeElement, 'mouseleave')
899
- .pipe(map(event => event.relatedTarget && _closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
900
- .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
901
- fromEvent(this.elementRef.nativeElement, 'mousedown')
902
- .pipe(takeUntil(this.destroyed))
903
- .subscribe(mousedownEvent => {
904
- this._dragStarted(mousedownEvent);
905
- });
906
- });
907
- }
908
- _dragStarted(mousedownEvent) {
909
- // Only allow dragging using the left mouse button.
910
- if (mousedownEvent.button !== 0) {
911
- return;
912
- }
913
- const mouseup = fromEvent(this.document, 'mouseup');
914
- const mousemove = fromEvent(this.document, 'mousemove');
915
- const escape = fromEvent(this.document, 'keyup').pipe(filter(event => event.keyCode === ESCAPE));
916
- const startX = mousedownEvent.screenX;
917
- const initialSize = this._getOriginWidth();
918
- let overlayOffset = 0;
919
- let originOffset = this._getOriginOffset();
920
- let size = initialSize;
921
- let overshot = 0;
922
- this.updateResizeActive(true);
923
- mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {
924
- this.styleScheduler.scheduleEnd(() => {
925
- this._notifyResizeEnded(size, screenX !== startX);
926
- });
927
- });
928
- escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {
929
- this._notifyResizeEnded(initialSize);
930
- });
931
- mousemove
932
- .pipe(map(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil(merge(mouseup, escape, this.destroyed)))
933
- .subscribe(([prevX, currX]) => {
934
- let deltaX = currX - prevX;
935
- // If the mouse moved further than the resize was able to match, limit the
936
- // movement of the overlay to match the actual size and position of the origin.
937
- if (overshot !== 0) {
938
- if ((overshot < 0 && deltaX < 0) || (overshot > 0 && deltaX > 0)) {
939
- overshot += deltaX;
940
- return;
941
- }
942
- else {
943
- const remainingOvershot = overshot + deltaX;
944
- overshot =
945
- overshot > 0 ? Math.max(remainingOvershot, 0) : Math.min(remainingOvershot, 0);
946
- deltaX = remainingOvershot - overshot;
947
- if (deltaX === 0) {
948
- return;
949
- }
950
- }
951
- }
952
- let computedNewSize = size + (this._isLtr() ? deltaX : -deltaX);
953
- computedNewSize = Math.min(Math.max(computedNewSize, this.resizeRef.minWidthPx, 0), this.resizeRef.maxWidthPx);
954
- this.resizeNotifier.triggerResize.next({
955
- columnId: this.columnDef.name,
956
- size: computedNewSize,
957
- previousSize: size,
958
- isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,
959
- });
960
- this.styleScheduler.scheduleEnd(() => {
961
- const originNewSize = this._getOriginWidth();
962
- const originNewOffset = this._getOriginOffset();
963
- const originOffsetDeltaX = originNewOffset - originOffset;
964
- const originSizeDeltaX = originNewSize - size;
965
- size = originNewSize;
966
- originOffset = originNewOffset;
967
- overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);
968
- overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);
969
- this._updateOverlayOffset(overlayOffset);
970
- });
971
- });
972
- }
973
- updateResizeActive(active) {
974
- this.eventDispatcher.overlayHandleActiveForCell.next(active ? this.resizeRef.origin.nativeElement : null);
975
- }
976
- _getOriginWidth() {
977
- return this.resizeRef.origin.nativeElement.offsetWidth;
978
- }
979
- _getOriginOffset() {
980
- return this.resizeRef.origin.nativeElement.offsetLeft;
981
- }
982
- _updateOverlayOffset(offset) {
983
- this.resizeRef.overlayRef.overlayElement.style.transform = `translateX(${coerceCssPixelValue(offset)})`;
984
- }
985
- _isLtr() {
986
- return this.directionality.value === 'ltr';
987
- }
988
- _notifyResizeEnded(size, completedSuccessfully = false) {
989
- this.updateResizeActive(false);
990
- this.ngZone.run(() => {
991
- const sizeMessage = { columnId: this.columnDef.name, size };
992
- if (completedSuccessfully) {
993
- this.resizeNotifier.resizeCompleted.next(sizeMessage);
994
- }
995
- else {
996
- this.resizeNotifier.resizeCanceled.next(sizeMessage);
997
- }
998
- });
999
- }
1000
- }
1001
- ResizeOverlayHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ResizeOverlayHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1002
- ResizeOverlayHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.2", type: ResizeOverlayHandle, ngImport: i0 });
1003
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: ResizeOverlayHandle, decorators: [{
1004
- type: Directive
1005
- }] });
1006
-
1007
- /**
1008
- * @license
1009
- * Copyright Google LLC All Rights Reserved.
1010
- *
1011
- * Use of this source code is governed by an MIT-style license that can be
1012
- * found in the LICENSE file at https://angular.io/license
1013
- */
1014
-
1015
- /**
1016
- * @license
1017
- * Copyright Google LLC All Rights Reserved.
1018
- *
1019
- * Use of this source code is governed by an MIT-style license that can be
1020
- * found in the LICENSE file at https://angular.io/license
1021
- */
1022
-
1023
- /**
1024
- * Generated bundle index. Do not edit.
1025
- */
1026
-
1027
- export { CdkColumnResize, CdkColumnResizeDefaultEnabledModule, CdkColumnResizeFlex, CdkColumnResizeModule, CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex, CdkFlexTableResizeStrategy, ColumnResize, ColumnResizeNotifier, ColumnResizeNotifierSource, ColumnSizeStore, FLEX_RESIZE_STRATEGY_PROVIDER, HeaderRowEventDispatcher, Resizable, ResizeOverlayHandle, ResizeRef, ResizeStrategy, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, TableLayoutFixedResizeStrategy };
1028
- //# sourceMappingURL=column-resize.mjs.map