@angular/cdk-experimental 16.0.0-next.5 → 16.0.0-rc.1

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