@angular/cdk-experimental 16.0.0-next.5 → 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 (93) hide show
  1. package/{esm2020 → esm2022}/column-resize/column-resize-directives/column-resize-flex.mjs +3 -3
  2. package/{esm2020 → esm2022}/column-resize/column-resize-directives/column-resize.mjs +3 -3
  3. package/{esm2020 → esm2022}/column-resize/column-resize-directives/default-enabled-column-resize-flex.mjs +6 -6
  4. package/{esm2020 → esm2022}/column-resize/column-resize-directives/default-enabled-column-resize.mjs +6 -6
  5. package/{esm2020 → esm2022}/column-resize/column-resize-module.mjs +7 -7
  6. package/{esm2020 → esm2022}/column-resize/column-resize-notifier.mjs +5 -5
  7. package/{esm2020 → esm2022}/column-resize/column-resize.mjs +3 -3
  8. package/{esm2020 → esm2022}/column-resize/column-size-store.mjs +3 -3
  9. package/{esm2020 → esm2022}/column-resize/event-dispatcher.mjs +3 -3
  10. package/{esm2020 → esm2022}/column-resize/overlay-handle.mjs +3 -3
  11. package/{esm2020 → esm2022}/column-resize/resizable.mjs +3 -3
  12. package/{esm2020 → esm2022}/column-resize/resize-strategy.mjs +7 -7
  13. package/{esm2020 → esm2022}/combobox/combobox-module.mjs +4 -4
  14. package/{esm2020 → esm2022}/combobox/combobox-popup.mjs +3 -3
  15. package/{esm2020 → esm2022}/combobox/combobox.mjs +3 -3
  16. package/{esm2020 → esm2022}/popover-edit/edit-event-dispatcher.mjs +3 -3
  17. package/{esm2020 → esm2022}/popover-edit/edit-ref.mjs +3 -3
  18. package/{esm2020 → esm2022}/popover-edit/edit-services.mjs +3 -3
  19. package/{esm2020 → esm2022}/popover-edit/focus-dispatcher.mjs +3 -3
  20. package/{esm2020 → esm2022}/popover-edit/focus-escape-notifier.mjs +3 -3
  21. package/{esm2020 → esm2022}/popover-edit/lens-directives.mjs +7 -7
  22. package/esm2022/popover-edit/popover-edit-module.mjs +63 -0
  23. package/{esm2020 → esm2022}/popover-edit/popover-edit-position-strategy-factory.mjs +5 -5
  24. package/{esm2020 → esm2022}/popover-edit/table-directives.mjs +11 -11
  25. package/{esm2020 → esm2022}/scrolling/auto-size-virtual-scroll.mjs +9 -9
  26. package/{esm2020 → esm2022}/scrolling/scrolling-module.mjs +4 -4
  27. package/esm2022/selection/row-selection.mjs +52 -0
  28. package/{esm2020 → esm2022}/selection/select-all.mjs +3 -3
  29. package/{esm2020 → esm2022}/selection/selection-column.mjs +5 -5
  30. package/{esm2020 → esm2022}/selection/selection-module.mjs +8 -8
  31. package/{esm2020 → esm2022}/selection/selection-toggle.mjs +3 -3
  32. package/{esm2020 → esm2022}/selection/selection.mjs +3 -3
  33. package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container-module.mjs +4 -4
  34. package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container.mjs +3 -3
  35. package/{esm2020 → esm2022}/version.mjs +1 -1
  36. package/{fesm2015 → fesm2022}/cdk-experimental.mjs +1 -1
  37. package/{fesm2015 → fesm2022}/cdk-experimental.mjs.map +1 -1
  38. package/{fesm2020 → fesm2022}/column-resize.mjs +40 -40
  39. package/{fesm2020 → fesm2022}/column-resize.mjs.map +1 -1
  40. package/{fesm2020 → fesm2022}/combobox.mjs +7 -7
  41. package/{fesm2020 → fesm2022}/combobox.mjs.map +1 -1
  42. package/{fesm2020 → fesm2022}/popover-edit.mjs +52 -52
  43. package/{fesm2020 → fesm2022}/popover-edit.mjs.map +1 -1
  44. package/{fesm2020 → fesm2022}/scrolling.mjs +11 -11
  45. package/{fesm2020 → fesm2022}/scrolling.mjs.map +1 -1
  46. package/{fesm2020 → fesm2022}/selection.mjs +21 -19
  47. package/{fesm2015 → fesm2022}/selection.mjs.map +1 -1
  48. package/{fesm2020 → fesm2022}/table-scroll-container.mjs +5 -5
  49. package/{fesm2020 → fesm2022}/table-scroll-container.mjs.map +1 -1
  50. package/package.json +24 -42
  51. package/esm2020/popover-edit/popover-edit-module.mjs +0 -63
  52. package/esm2020/selection/row-selection.mjs +0 -50
  53. package/fesm2015/column-resize.mjs +0 -907
  54. package/fesm2015/column-resize.mjs.map +0 -1
  55. package/fesm2015/combobox.mjs +0 -359
  56. package/fesm2015/combobox.mjs.map +0 -1
  57. package/fesm2015/popover-edit.mjs +0 -1151
  58. package/fesm2015/popover-edit.mjs.map +0 -1
  59. package/fesm2015/scrolling.mjs +0 -434
  60. package/fesm2015/scrolling.mjs.map +0 -1
  61. package/fesm2015/selection.mjs +0 -618
  62. package/fesm2015/table-scroll-container.mjs +0 -147
  63. package/fesm2015/table-scroll-container.mjs.map +0 -1
  64. package/fesm2020/cdk-experimental.mjs +0 -7
  65. package/fesm2020/cdk-experimental.mjs.map +0 -1
  66. package/fesm2020/selection.mjs.map +0 -1
  67. /package/{esm2020 → esm2022}/column-resize/column-resize-directives/constants.mjs +0 -0
  68. /package/{esm2020 → esm2022}/column-resize/column-resize_public_index.mjs +0 -0
  69. /package/{esm2020 → esm2022}/column-resize/index.mjs +0 -0
  70. /package/{esm2020 → esm2022}/column-resize/public-api.mjs +0 -0
  71. /package/{esm2020 → esm2022}/column-resize/resize-ref.mjs +0 -0
  72. /package/{esm2020 → esm2022}/column-resize/selectors.mjs +0 -0
  73. /package/{esm2020 → esm2022}/combobox/combobox_public_index.mjs +0 -0
  74. /package/{esm2020 → esm2022}/combobox/index.mjs +0 -0
  75. /package/{esm2020 → esm2022}/combobox/public-api.mjs +0 -0
  76. /package/{esm2020 → esm2022}/index.mjs +0 -0
  77. /package/{esm2020 → esm2022}/popover-edit/constants.mjs +0 -0
  78. /package/{esm2020 → esm2022}/popover-edit/form-value-container.mjs +0 -0
  79. /package/{esm2020 → esm2022}/popover-edit/index.mjs +0 -0
  80. /package/{esm2020 → esm2022}/popover-edit/polyfill.mjs +0 -0
  81. /package/{esm2020 → esm2022}/popover-edit/popover-edit_public_index.mjs +0 -0
  82. /package/{esm2020 → esm2022}/popover-edit/public-api.mjs +0 -0
  83. /package/{esm2020 → esm2022}/public-api.mjs +0 -0
  84. /package/{esm2020 → esm2022}/scrolling/index.mjs +0 -0
  85. /package/{esm2020 → esm2022}/scrolling/public-api.mjs +0 -0
  86. /package/{esm2020 → esm2022}/scrolling/scrolling_public_index.mjs +0 -0
  87. /package/{esm2020 → esm2022}/selection/index.mjs +0 -0
  88. /package/{esm2020 → esm2022}/selection/public-api.mjs +0 -0
  89. /package/{esm2020 → esm2022}/selection/selection-set.mjs +0 -0
  90. /package/{esm2020 → esm2022}/selection/selection_public_index.mjs +0 -0
  91. /package/{esm2020 → esm2022}/table-scroll-container/index.mjs +0 -0
  92. /package/{esm2020 → esm2022}/table-scroll-container/public-api.mjs +0 -0
  93. /package/{esm2020 → esm2022}/table-scroll-container/table-scroll-container_public_index.mjs +0 -0
@@ -1,1151 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Self, EventEmitter, Directive, Input, Inject, NgModule } from '@angular/core';
3
- import { Subject, pipe, combineLatest, Observable, fromEvent, fromEventPattern, merge } from 'rxjs';
4
- import { distinctUntilChanged, startWith, shareReplay, filter, map, auditTime, audit, debounceTime, skip, take, takeUntil, mapTo, throttleTime, share, withLatestFrom } from 'rxjs/operators';
5
- import * as i1 from '@angular/forms';
6
- import { RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
7
- import * as i1$1 from '@angular/cdk/bidi';
8
- import * as i2 from '@angular/cdk/overlay';
9
- import { OverlayModule } from '@angular/cdk/overlay';
10
- import { TemplatePortal } from '@angular/cdk/portal';
11
- import * as i4 from '@angular/cdk/a11y';
12
- import { FocusTrap } from '@angular/cdk/a11y';
13
- import * as i7 from '@angular/cdk/scrolling';
14
- import { DOCUMENT } from '@angular/common';
15
-
16
- /** Selector for finding table cells. */
17
- const CELL_SELECTOR = '.cdk-cell, .mat-cell, td';
18
- /** Selector for finding editable table cells. */
19
- const EDITABLE_CELL_SELECTOR = '.cdk-popover-edit-cell, .mat-popover-edit-cell';
20
- /** Selector for finding table rows. */
21
- const ROW_SELECTOR = '.cdk-row, .mat-row, tr';
22
- /** Selector for finding the table element. */
23
- const TABLE_SELECTOR = 'table, cdk-table, mat-table';
24
- /** CSS class added to the edit lens pane. */
25
- const EDIT_PANE_CLASS = 'cdk-edit-pane';
26
- /** Selector for finding the edit lens pane. */
27
- const EDIT_PANE_SELECTOR = `.${EDIT_PANE_CLASS}, .mat-edit-pane`;
28
-
29
- /** closest implementation that is able to start from non-Element Nodes. */
30
- function closest(element, selector) {
31
- var _a;
32
- if (!(element instanceof Node)) {
33
- return null;
34
- }
35
- let curr = element;
36
- while (curr != null && !(curr instanceof Element)) {
37
- curr = curr.parentNode;
38
- }
39
- return (_a = curr === null || curr === void 0 ? void 0 : curr.closest(selector)) !== null && _a !== void 0 ? _a : null;
40
- }
41
-
42
- /** The delay applied to mouse events before hiding or showing hover content. */
43
- const MOUSE_EVENT_DELAY_MS = 40;
44
- /** The delay for reacting to focus/blur changes. */
45
- const FOCUS_DELAY = 0;
46
- // Note: this class is generic, rather than referencing EditRef directly, in order to avoid
47
- // circular imports. If we were to reference it here, importing the registry into the
48
- // class that is registering itself will introduce a circular import.
49
- /**
50
- * Service for sharing delegated events and state for triggering table edits.
51
- */
52
- class EditEventDispatcher {
53
- /** The EditRef for the currently active edit lens (if any). */
54
- get editRef() {
55
- return this._editRef;
56
- }
57
- constructor(_ngZone) {
58
- this._ngZone = _ngZone;
59
- /** A subject that indicates which table cell is currently editing (unless it is disabled). */
60
- this.editing = new Subject();
61
- /** A subject that indicates which table row is currently hovered. */
62
- this.hovering = new Subject();
63
- /** A subject that indicates which table row currently contains focus. */
64
- this.focused = new Subject();
65
- /** A subject that indicates all elements in the table matching ROW_SELECTOR. */
66
- this.allRows = new Subject();
67
- /** A subject that emits mouse move events from the table indicating the targeted row. */
68
- this.mouseMove = new Subject();
69
- // TODO: Use WeakSet once IE11 support is dropped.
70
- /**
71
- * Tracks the currently disabled editable cells - edit calls will be ignored
72
- * for these cells.
73
- */
74
- this.disabledCells = new WeakMap();
75
- this._editRef = null;
76
- // Optimization: Precompute common pipeable operators used per row/cell.
77
- this._distinctUntilChanged = distinctUntilChanged();
78
- this._startWithNull = startWith(null);
79
- this._distinctShare = pipe(this._distinctUntilChanged, shareReplay(1));
80
- this._startWithNullDistinct = pipe(this._startWithNull, this._distinctUntilChanged);
81
- this.editingAndEnabled = this.editing.pipe(filter(cell => cell == null || !this.disabledCells.has(cell)), shareReplay(1));
82
- /** An observable that emits the row containing focus or an active edit. */
83
- this.editingOrFocused = combineLatest([
84
- this.editingAndEnabled.pipe(map(cell => closest(cell, ROW_SELECTOR)), this._startWithNull),
85
- this.focused.pipe(this._startWithNull),
86
- ]).pipe(map(([editingRow, focusedRow]) => focusedRow || editingRow), this._distinctUntilChanged, auditTime(FOCUS_DELAY), // Use audit to skip over blur events to the next focused element.
87
- this._distinctUntilChanged, shareReplay(1));
88
- /** Tracks rows that contain hover content with a reference count. */
89
- this._rowsWithHoverContent = new WeakMap();
90
- /** The table cell that has an active edit lens (or null). */
91
- this._currentlyEditing = null;
92
- /** The combined set of row hover content states organized by row. */
93
- this._hoveredContentStateDistinct = combineLatest([
94
- this._getFirstRowWithHoverContent(),
95
- this._getLastRowWithHoverContent(),
96
- this.editingOrFocused,
97
- this.hovering.pipe(distinctUntilChanged(), audit(row => this.mouseMove.pipe(filter(mouseMoveRow => row === mouseMoveRow), this._startWithNull, debounceTime(MOUSE_EVENT_DELAY_MS))), this._startWithNullDistinct),
98
- ]).pipe(skip(1), // Skip the initial emission of [null, null, null, null].
99
- map(computeHoverContentState), distinctUntilChanged(areMapEntriesEqual),
100
- // Optimization: Enter the zone before shareReplay so that we trigger a single
101
- // ApplicationRef.tick for all row updates.
102
- this._enterZone(), shareReplay(1));
103
- this._editingAndEnabledDistinct = this.editingAndEnabled.pipe(distinctUntilChanged(), this._enterZone(), shareReplay(1));
104
- // Optimization: Share row events observable with subsequent callers.
105
- // At startup, calls will be sequential by row.
106
- this._lastSeenRow = null;
107
- this._lastSeenRowHoverOrFocus = null;
108
- this._editingAndEnabledDistinct.subscribe(cell => {
109
- this._currentlyEditing = cell;
110
- });
111
- }
112
- /**
113
- * Gets an Observable that emits true when the specified element's cell
114
- * is editing and false when not.
115
- */
116
- editingCell(element) {
117
- let cell = null;
118
- return this._editingAndEnabledDistinct.pipe(map(editCell => editCell === (cell || (cell = closest(element, CELL_SELECTOR)))), this._distinctUntilChanged);
119
- }
120
- /**
121
- * Stops editing for the specified cell. If the specified cell is not the current
122
- * edit cell, does nothing.
123
- */
124
- doneEditingCell(element) {
125
- const cell = closest(element, CELL_SELECTOR);
126
- if (this._currentlyEditing === cell) {
127
- this.editing.next(null);
128
- }
129
- }
130
- /** Sets the currently active EditRef. */
131
- setActiveEditRef(ref) {
132
- this._editRef = ref;
133
- }
134
- /** Unset the currently active EditRef, if the specified editRef is active. */
135
- unsetActiveEditRef(ref) {
136
- if (this._editRef !== ref) {
137
- return;
138
- }
139
- this._editRef = null;
140
- }
141
- /** Adds the specified table row to be tracked for first/last row comparisons. */
142
- registerRowWithHoverContent(row) {
143
- this._rowsWithHoverContent.set(row, (this._rowsWithHoverContent.get(row) || 0) + 1);
144
- }
145
- /**
146
- * Reference decrements and ultimately removes the specified table row from first/last row
147
- * comparisons.
148
- */
149
- deregisterRowWithHoverContent(row) {
150
- const refCount = this._rowsWithHoverContent.get(row) || 0;
151
- if (refCount <= 1) {
152
- this._rowsWithHoverContent.delete(row);
153
- }
154
- else {
155
- this._rowsWithHoverContent.set(row, refCount - 1);
156
- }
157
- }
158
- /**
159
- * Gets an Observable that emits true when the specified element's row
160
- * contains the focused element or is being hovered over and false when not.
161
- * Hovering is defined as when the mouse has momentarily stopped moving over the cell.
162
- */
163
- hoverOrFocusOnRow(row) {
164
- if (row !== this._lastSeenRow) {
165
- this._lastSeenRow = row;
166
- this._lastSeenRowHoverOrFocus = this._hoveredContentStateDistinct.pipe(map(state => state.get(row) || 0 /* HoverContentState.OFF */), this._distinctShare);
167
- }
168
- return this._lastSeenRowHoverOrFocus;
169
- }
170
- /**
171
- * RxJS operator that enters the Angular zone, used to reduce boilerplate in
172
- * re-entering the zone for stream pipelines.
173
- */
174
- _enterZone() {
175
- return (source) => new Observable(observer => source.subscribe({
176
- next: value => this._ngZone.run(() => observer.next(value)),
177
- error: err => observer.error(err),
178
- complete: () => observer.complete(),
179
- }));
180
- }
181
- _getFirstRowWithHoverContent() {
182
- return this._mapAllRowsToSingleRow(rows => {
183
- for (let i = 0, row; (row = rows[i]); i++) {
184
- if (this._rowsWithHoverContent.has(row)) {
185
- return row;
186
- }
187
- }
188
- return null;
189
- });
190
- }
191
- _getLastRowWithHoverContent() {
192
- return this._mapAllRowsToSingleRow(rows => {
193
- for (let i = rows.length - 1, row; (row = rows[i]); i--) {
194
- if (this._rowsWithHoverContent.has(row)) {
195
- return row;
196
- }
197
- }
198
- return null;
199
- });
200
- }
201
- _mapAllRowsToSingleRow(mapper) {
202
- return this.allRows.pipe(map(mapper), this._startWithNullDistinct);
203
- }
204
- }
205
- EditEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
206
- EditEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditEventDispatcher });
207
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditEventDispatcher, decorators: [{
208
- type: Injectable
209
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
210
- function computeHoverContentState([firstRow, lastRow, activeRow, hoverRow,]) {
211
- const hoverContentState = new Map();
212
- // Add focusable rows.
213
- for (const focussableRow of [
214
- firstRow,
215
- lastRow,
216
- activeRow && activeRow.previousElementSibling,
217
- activeRow && activeRow.nextElementSibling,
218
- ]) {
219
- if (focussableRow) {
220
- hoverContentState.set(focussableRow, 1 /* HoverContentState.FOCUSABLE */);
221
- }
222
- }
223
- // Add/overwrite with fully visible rows.
224
- for (const onRow of [activeRow, hoverRow]) {
225
- if (onRow) {
226
- hoverContentState.set(onRow, 2 /* HoverContentState.ON */);
227
- }
228
- }
229
- return hoverContentState;
230
- }
231
- function areMapEntriesEqual(a, b) {
232
- if (a.size !== b.size) {
233
- return false;
234
- }
235
- // TODO: use Map.prototype.entries once we're off IE11.
236
- for (const aKey of Array.from(a.keys())) {
237
- if (b.get(aKey) !== a.get(aKey)) {
238
- return false;
239
- }
240
- }
241
- return true;
242
- }
243
-
244
- /**
245
- * Used for communication between the form within the edit lens and the
246
- * table that launched it. Provided by CdkEditControl within the lens.
247
- */
248
- class EditRef {
249
- constructor(_form, _editEventDispatcher, _ngZone) {
250
- this._form = _form;
251
- this._editEventDispatcher = _editEventDispatcher;
252
- this._ngZone = _ngZone;
253
- /** Emits the final value of this edit instance before closing. */
254
- this._finalValueSubject = new Subject();
255
- this.finalValue = this._finalValueSubject;
256
- /** Emits when the user tabs out of this edit lens before closing. */
257
- this._blurredSubject = new Subject();
258
- this.blurred = this._blurredSubject;
259
- this._editEventDispatcher.setActiveEditRef(this);
260
- }
261
- /**
262
- * Called by the host directive's OnInit hook. Reads the initial state of the
263
- * form and overrides it with persisted state from previous openings, if
264
- * applicable.
265
- */
266
- init(previousFormValue) {
267
- // Wait for the zone to stabilize before caching the initial value.
268
- // This ensures that all form controls have been initialized.
269
- this._ngZone.onStable.pipe(take(1)).subscribe(() => {
270
- this.updateRevertValue();
271
- if (previousFormValue) {
272
- this.reset(previousFormValue);
273
- }
274
- });
275
- }
276
- ngOnDestroy() {
277
- this._editEventDispatcher.unsetActiveEditRef(this);
278
- this._finalValueSubject.next(this._form.value);
279
- this._finalValueSubject.complete();
280
- }
281
- /** Whether the attached form is in a valid state. */
282
- isValid() {
283
- return this._form.valid;
284
- }
285
- /** Set the form's current value as what it will be set to on revert/reset. */
286
- updateRevertValue() {
287
- this._revertFormValue = this._form.value;
288
- }
289
- /** Tells the table to close the edit popup. */
290
- close() {
291
- this._editEventDispatcher.editing.next(null);
292
- }
293
- /** Notifies the active edit that the user has moved focus out of the lens. */
294
- blur() {
295
- this._blurredSubject.next();
296
- }
297
- /**
298
- * Resets the form value to the specified value or the previously set
299
- * revert value.
300
- */
301
- reset(value) {
302
- this._form.reset(value || this._revertFormValue);
303
- }
304
- }
305
- EditRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditRef, deps: [{ token: i1.ControlContainer, self: true }, { token: EditEventDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
306
- EditRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditRef });
307
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditRef, decorators: [{
308
- type: Injectable
309
- }], ctorParameters: function () {
310
- return [{ type: i1.ControlContainer, decorators: [{
311
- type: Self
312
- }] }, { type: EditEventDispatcher }, { type: i0.NgZone }];
313
- } });
314
-
315
- /**
316
- * Service responsible for moving cell focus around in response to keyboard events.
317
- * May be overridden to customize the keyboard behavior of popover edit.
318
- */
319
- class FocusDispatcher {
320
- constructor(directionality) {
321
- this.directionality = directionality;
322
- this.keyObserver = { next: event => this.handleKeyboardEvent(event) };
323
- }
324
- /**
325
- * Moves focus to earlier or later cells (in dom order) by offset cells relative to
326
- * currentCell.
327
- */
328
- moveFocusHorizontally(currentCell, offset) {
329
- const cells = Array.from(closest(currentCell, TABLE_SELECTOR).querySelectorAll(EDITABLE_CELL_SELECTOR));
330
- const currentIndex = cells.indexOf(currentCell);
331
- const newIndex = currentIndex + offset;
332
- if (cells[newIndex]) {
333
- cells[newIndex].focus();
334
- }
335
- }
336
- /** Moves focus to up or down by row by offset cells relative to currentCell. */
337
- moveFocusVertically(currentCell, offset) {
338
- const currentRow = closest(currentCell, ROW_SELECTOR);
339
- const rows = Array.from(closest(currentRow, TABLE_SELECTOR).querySelectorAll(ROW_SELECTOR));
340
- const currentRowIndex = rows.indexOf(currentRow);
341
- const currentIndexWithinRow = Array.from(currentRow.querySelectorAll(EDITABLE_CELL_SELECTOR)).indexOf(currentCell);
342
- const newRowIndex = currentRowIndex + offset;
343
- if (rows[newRowIndex]) {
344
- const rowToFocus = Array.from(rows[newRowIndex].querySelectorAll(EDITABLE_CELL_SELECTOR));
345
- if (rowToFocus[currentIndexWithinRow]) {
346
- rowToFocus[currentIndexWithinRow].focus();
347
- }
348
- }
349
- }
350
- /** Translates arrow keydown events into focus move operations. */
351
- handleKeyboardEvent(event) {
352
- const cell = closest(event.target, EDITABLE_CELL_SELECTOR);
353
- if (!cell) {
354
- return;
355
- }
356
- switch (event.keyCode) {
357
- case UP_ARROW:
358
- this.moveFocusVertically(cell, -1);
359
- break;
360
- case DOWN_ARROW:
361
- this.moveFocusVertically(cell, 1);
362
- break;
363
- case LEFT_ARROW:
364
- this.moveFocusHorizontally(cell, this.directionality.value === 'ltr' ? -1 : 1);
365
- break;
366
- case RIGHT_ARROW:
367
- this.moveFocusHorizontally(cell, this.directionality.value === 'ltr' ? 1 : -1);
368
- break;
369
- default:
370
- // If the keyboard event is not handled, return now so that we don't `preventDefault`.
371
- return;
372
- }
373
- event.preventDefault();
374
- }
375
- }
376
- FocusDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusDispatcher, deps: [{ token: i1$1.Directionality }], target: i0.ɵɵFactoryTarget.Injectable });
377
- FocusDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusDispatcher, providedIn: 'root' });
378
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusDispatcher, decorators: [{
379
- type: Injectable,
380
- args: [{ providedIn: 'root' }]
381
- }], ctorParameters: function () { return [{ type: i1$1.Directionality }]; } });
382
-
383
- /**
384
- * A convenience class for preserving unsaved form state while an edit lens is closed.
385
- *
386
- * Example usage:
387
- * class MyComponent {
388
- * readonly nameEditValues = new FormValueContainer&lt;Item, {name: string}&gt;();
389
- * }
390
- *
391
- * &lt;form cdkEditControl [(cdkEditControlPreservedFormValue)]="nameEditValues.for(item).value"&gt;
392
- */
393
- class FormValueContainer {
394
- constructor() {
395
- this._formValues = new WeakMap();
396
- }
397
- for(key) {
398
- const _formValues = this._formValues;
399
- let entry = _formValues.get(key);
400
- if (!entry) {
401
- // Expose entry as an object so that we can [(two-way)] bind to its value member
402
- entry = {};
403
- _formValues.set(key, entry);
404
- }
405
- return entry;
406
- }
407
- }
408
-
409
- /**
410
- * A directive that attaches to a form within the edit lens.
411
- * It coordinates the form state with the table-wide edit system and handles
412
- * closing the edit lens when the form is submitted or the user clicks
413
- * out.
414
- */
415
- class CdkEditControl {
416
- constructor(elementRef, editRef) {
417
- this.elementRef = elementRef;
418
- this.editRef = editRef;
419
- this.destroyed = new Subject();
420
- /**
421
- * Specifies what should happen when the user clicks outside of the edit lens.
422
- * The default behavior is to close the lens without submitting the form.
423
- */
424
- this.clickOutBehavior = 'close';
425
- this.preservedFormValueChange = new EventEmitter();
426
- /**
427
- * Determines whether the lens will close on form submit if the form is not in a valid
428
- * state. By default the lens will remain open.
429
- */
430
- this.ignoreSubmitUnlessValid = true;
431
- }
432
- ngOnInit() {
433
- this.editRef.init(this.preservedFormValue);
434
- this.editRef.finalValue.subscribe(this.preservedFormValueChange);
435
- this.editRef.blurred.subscribe(() => this._handleBlur());
436
- }
437
- ngOnDestroy() {
438
- this.destroyed.next();
439
- this.destroyed.complete();
440
- }
441
- /**
442
- * Called when the form submits. If ignoreSubmitUnlessValid is true, checks
443
- * the form for validity before proceeding.
444
- * Updates the revert state with the latest submitted value then closes the edit.
445
- */
446
- handleFormSubmit() {
447
- if (this.ignoreSubmitUnlessValid && !this.editRef.isValid()) {
448
- return;
449
- }
450
- this.editRef.updateRevertValue();
451
- this.editRef.close();
452
- }
453
- /** Called on Escape keyup. Closes the edit. */
454
- close() {
455
- // todo - allow this behavior to be customized as well, such as calling
456
- // reset before close
457
- this.editRef.close();
458
- }
459
- /**
460
- * Called on click anywhere in the document.
461
- * If the click was outside of the lens, trigger the specified click out behavior.
462
- */
463
- handlePossibleClickOut(evt) {
464
- if (closest(evt.target, EDIT_PANE_SELECTOR)) {
465
- return;
466
- }
467
- switch (this.clickOutBehavior) {
468
- case 'submit':
469
- // Manually cause the form to submit before closing.
470
- this._triggerFormSubmit();
471
- this.editRef.close();
472
- break;
473
- case 'close':
474
- this.editRef.close();
475
- break;
476
- default:
477
- break;
478
- }
479
- }
480
- _handleKeydown(event) {
481
- if (event.key === 'Escape' && !hasModifierKey(event)) {
482
- this.close();
483
- event.preventDefault();
484
- }
485
- }
486
- /** Triggers submit on tab out if clickOutBehavior is 'submit'. */
487
- _handleBlur() {
488
- if (this.clickOutBehavior === 'submit') {
489
- // Manually cause the form to submit before closing.
490
- this._triggerFormSubmit();
491
- }
492
- }
493
- _triggerFormSubmit() {
494
- this.elementRef.nativeElement.dispatchEvent(new Event('submit'));
495
- }
496
- }
497
- CdkEditControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditControl, deps: [{ token: i0.ElementRef }, { token: EditRef }], target: i0.ɵɵFactoryTarget.Directive });
498
- CdkEditControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkEditControl, selector: "form[cdkEditControl]", inputs: { clickOutBehavior: ["cdkEditControlClickOutBehavior", "clickOutBehavior"], preservedFormValue: ["cdkEditControlPreservedFormValue", "preservedFormValue"], ignoreSubmitUnlessValid: ["cdkEditControlIgnoreSubmitUnlessValid", "ignoreSubmitUnlessValid"] }, outputs: { preservedFormValueChange: "cdkEditControlPreservedFormValueChange" }, host: { listeners: { "ngSubmit": "handleFormSubmit()", "document:click": "handlePossibleClickOut($event)", "keydown": "_handleKeydown($event)" } }, providers: [EditRef], ngImport: i0 });
499
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditControl, decorators: [{
500
- type: Directive,
501
- args: [{
502
- selector: 'form[cdkEditControl]',
503
- inputs: [
504
- 'clickOutBehavior: cdkEditControlClickOutBehavior',
505
- 'preservedFormValue: cdkEditControlPreservedFormValue',
506
- 'ignoreSubmitUnlessValid: cdkEditControlIgnoreSubmitUnlessValid',
507
- ],
508
- outputs: ['preservedFormValueChange: cdkEditControlPreservedFormValueChange'],
509
- providers: [EditRef],
510
- host: {
511
- '(ngSubmit)': 'handleFormSubmit()',
512
- '(document:click)': 'handlePossibleClickOut($event)',
513
- '(keydown)': '_handleKeydown($event)',
514
- },
515
- }]
516
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EditRef }]; } });
517
- /** Reverts the form to its initial or previously submitted state on click. */
518
- class CdkEditRevert {
519
- constructor(editRef) {
520
- this.editRef = editRef;
521
- /** Type of the button. Defaults to `button` to avoid accident form submits. */
522
- this.type = 'button';
523
- }
524
- revertEdit() {
525
- this.editRef.reset();
526
- }
527
- }
528
- CdkEditRevert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditRevert, deps: [{ token: EditRef }], target: i0.ɵɵFactoryTarget.Directive });
529
- CdkEditRevert.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkEditRevert, selector: "button[cdkEditRevert]", inputs: { type: "type" }, host: { attributes: { "type": "button" }, listeners: { "click": "revertEdit()" } }, ngImport: i0 });
530
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditRevert, decorators: [{
531
- type: Directive,
532
- args: [{
533
- selector: 'button[cdkEditRevert]',
534
- host: {
535
- 'type': 'button',
536
- '(click)': 'revertEdit()',
537
- },
538
- }]
539
- }], ctorParameters: function () { return [{ type: EditRef }]; }, propDecorators: { type: [{
540
- type: Input
541
- }] } });
542
- /** Closes the lens on click. */
543
- class CdkEditClose {
544
- constructor(elementRef, editRef) {
545
- this.elementRef = elementRef;
546
- this.editRef = editRef;
547
- const nativeElement = elementRef.nativeElement;
548
- // Prevent accidental form submits.
549
- if (nativeElement.nodeName === 'BUTTON' && !nativeElement.getAttribute('type')) {
550
- nativeElement.setAttribute('type', 'button');
551
- }
552
- }
553
- closeEdit() {
554
- // Note that we use `click` here, rather than a keyboard event, because some screen readers
555
- // will emit a fake click event instead of an enter keyboard event on buttons. For the keyboard
556
- // events we use `keydown`, rather than `keyup`, because we use `keydown` to open the overlay
557
- // as well. If we were to use `keyup`, the user could end up opening and closing within
558
- // the same event sequence if focus was moved quickly.
559
- this.editRef.close();
560
- }
561
- }
562
- CdkEditClose.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditClose, deps: [{ token: i0.ElementRef }, { token: EditRef }], target: i0.ɵɵFactoryTarget.Directive });
563
- CdkEditClose.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkEditClose, selector: "[cdkEditClose]", host: { listeners: { "click": "closeEdit()", "keydown.enter": "closeEdit()", "keydown.space": "closeEdit()" } }, ngImport: i0 });
564
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditClose, decorators: [{
565
- type: Directive,
566
- args: [{
567
- selector: '[cdkEditClose]',
568
- host: {
569
- '(click)': 'closeEdit()',
570
- '(keydown.enter)': 'closeEdit()',
571
- '(keydown.space)': 'closeEdit()',
572
- },
573
- }]
574
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EditRef }]; } });
575
-
576
- /**
577
- * Overridable factory responsible for configuring how cdkPopoverEdit popovers are positioned
578
- * and sized.
579
- */
580
- class PopoverEditPositionStrategyFactory {
581
- }
582
- PopoverEditPositionStrategyFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: PopoverEditPositionStrategyFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
583
- PopoverEditPositionStrategyFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: PopoverEditPositionStrategyFactory });
584
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: PopoverEditPositionStrategyFactory, decorators: [{
585
- type: Injectable
586
- }] });
587
- /**
588
- * Default implementation of PopoverEditPositionStrategyFactory.
589
- * Uses a FlexibleConnectedPositionStrategy anchored to the start + top of the cell.
590
- * Note: This will change to CoverPositionStrategy once it implemented.
591
- */
592
- class DefaultPopoverEditPositionStrategyFactory extends PopoverEditPositionStrategyFactory {
593
- constructor(direction, overlay) {
594
- super();
595
- this.direction = direction;
596
- this.overlay = overlay;
597
- }
598
- positionStrategyForCells(cells) {
599
- return this.overlay
600
- .position()
601
- .flexibleConnectedTo(cells[0])
602
- .withGrowAfterOpen()
603
- .withPush()
604
- .withViewportMargin(16)
605
- .withPositions([
606
- {
607
- originX: 'start',
608
- originY: 'top',
609
- overlayX: 'start',
610
- overlayY: 'top',
611
- },
612
- ]);
613
- }
614
- sizeConfigForCells(cells) {
615
- if (cells.length === 0) {
616
- return {};
617
- }
618
- if (cells.length === 1) {
619
- return { width: cells[0].getBoundingClientRect().width };
620
- }
621
- let firstCell, lastCell;
622
- if (this.direction.value === 'ltr') {
623
- firstCell = cells[0];
624
- lastCell = cells[cells.length - 1];
625
- }
626
- else {
627
- lastCell = cells[0];
628
- firstCell = cells[cells.length - 1];
629
- }
630
- return { width: lastCell.getBoundingClientRect().right - firstCell.getBoundingClientRect().left };
631
- }
632
- }
633
- DefaultPopoverEditPositionStrategyFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: DefaultPopoverEditPositionStrategyFactory, deps: [{ token: i1$1.Directionality }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
634
- DefaultPopoverEditPositionStrategyFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: DefaultPopoverEditPositionStrategyFactory });
635
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: DefaultPopoverEditPositionStrategyFactory, decorators: [{
636
- type: Injectable
637
- }], ctorParameters: function () { return [{ type: i1$1.Directionality }, { type: i2.Overlay }]; } });
638
-
639
- /**
640
- * Optimization
641
- * Collects multiple Injectables into a singleton shared across the table. By reducing the
642
- * number of services injected into each CdkPopoverEdit, this saves about 0.023ms of cpu time
643
- * and 56 bytes of memory per instance.
644
- */
645
- class EditServices {
646
- constructor(directionality, editEventDispatcher, focusDispatcher, focusTrapFactory, ngZone, overlay, positionFactory, scrollDispatcher, viewportRuler) {
647
- this.directionality = directionality;
648
- this.editEventDispatcher = editEventDispatcher;
649
- this.focusDispatcher = focusDispatcher;
650
- this.focusTrapFactory = focusTrapFactory;
651
- this.ngZone = ngZone;
652
- this.overlay = overlay;
653
- this.positionFactory = positionFactory;
654
- this.scrollDispatcher = scrollDispatcher;
655
- this.viewportRuler = viewportRuler;
656
- }
657
- }
658
- EditServices.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditServices, deps: [{ token: i1$1.Directionality }, { token: EditEventDispatcher }, { token: FocusDispatcher }, { token: i4.FocusTrapFactory }, { token: i0.NgZone }, { token: i2.Overlay }, { token: PopoverEditPositionStrategyFactory }, { token: i7.ScrollDispatcher }, { token: i7.ViewportRuler }], target: i0.ɵɵFactoryTarget.Injectable });
659
- EditServices.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditServices });
660
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: EditServices, decorators: [{
661
- type: Injectable
662
- }], ctorParameters: function () { return [{ type: i1$1.Directionality }, { type: EditEventDispatcher }, { type: FocusDispatcher }, { type: i4.FocusTrapFactory }, { type: i0.NgZone }, { type: i2.Overlay }, { type: PopoverEditPositionStrategyFactory }, { type: i7.ScrollDispatcher }, { type: i7.ViewportRuler }]; } });
663
-
664
- /**
665
- * Like FocusTrap, but rather than trapping focus within a dom region, notifies subscribers when
666
- * focus leaves the region.
667
- */
668
- class FocusEscapeNotifier extends FocusTrap {
669
- constructor(element, checker, ngZone, document) {
670
- super(element, checker, ngZone, document, true /* deferAnchors */);
671
- this._escapeSubject = new Subject();
672
- // The focus trap adds "anchors" at the beginning and end of a trapped region that redirect
673
- // focus. We override that redirect behavior here with simply emitting on a stream.
674
- this.startAnchorListener = () => {
675
- this._escapeSubject.next(0 /* FocusEscapeNotifierDirection.START */);
676
- return true;
677
- };
678
- this.endAnchorListener = () => {
679
- this._escapeSubject.next(1 /* FocusEscapeNotifierDirection.END */);
680
- return true;
681
- };
682
- this.attachAnchors();
683
- }
684
- escapes() {
685
- return this._escapeSubject;
686
- }
687
- }
688
- /** Factory that allows easy instantiation of focus escape notifiers. */
689
- class FocusEscapeNotifierFactory {
690
- constructor(_checker, _ngZone, _document) {
691
- this._checker = _checker;
692
- this._ngZone = _ngZone;
693
- this._document = _document;
694
- }
695
- /**
696
- * Creates a focus escape notifier region around the given element.
697
- * @param element The element around which focus will be monitored.
698
- * @returns The created focus escape notifier instance.
699
- */
700
- create(element) {
701
- return new FocusEscapeNotifier(element, this._checker, this._ngZone, this._document);
702
- }
703
- }
704
- FocusEscapeNotifierFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusEscapeNotifierFactory, deps: [{ token: i4.InteractivityChecker }, { token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
705
- FocusEscapeNotifierFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusEscapeNotifierFactory, providedIn: 'root' });
706
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: FocusEscapeNotifierFactory, decorators: [{
707
- type: Injectable,
708
- args: [{ providedIn: 'root' }]
709
- }], ctorParameters: function () {
710
- return [{ type: i4.InteractivityChecker }, { type: i0.NgZone }, { type: undefined, decorators: [{
711
- type: Inject,
712
- args: [DOCUMENT]
713
- }] }];
714
- } });
715
-
716
- /** Used for rate-limiting mousemove events. */
717
- const MOUSE_MOVE_THROTTLE_TIME_MS = 10;
718
- /**
719
- * A directive that must be attached to enable editability on a table.
720
- * It is responsible for setting up delegated event handlers and providing the
721
- * EditEventDispatcher service for use by the other edit directives.
722
- */
723
- class CdkEditable {
724
- constructor(elementRef, editEventDispatcher, focusDispatcher, ngZone) {
725
- this.elementRef = elementRef;
726
- this.editEventDispatcher = editEventDispatcher;
727
- this.focusDispatcher = focusDispatcher;
728
- this.ngZone = ngZone;
729
- this.destroyed = new Subject();
730
- }
731
- ngAfterViewInit() {
732
- this._listenForTableEvents();
733
- }
734
- ngOnDestroy() {
735
- this.destroyed.next();
736
- this.destroyed.complete();
737
- }
738
- _listenForTableEvents() {
739
- const element = this.elementRef.nativeElement;
740
- const toClosest = (selector) => map((event) => closest(event.target, selector));
741
- this.ngZone.runOutsideAngular(() => {
742
- // Track mouse movement over the table to hide/show hover content.
743
- fromEvent(element, 'mouseover')
744
- .pipe(toClosest(ROW_SELECTOR), takeUntil(this.destroyed))
745
- .subscribe(this.editEventDispatcher.hovering);
746
- fromEvent(element, 'mouseleave')
747
- .pipe(mapTo(null), takeUntil(this.destroyed))
748
- .subscribe(this.editEventDispatcher.hovering);
749
- fromEvent(element, 'mousemove')
750
- .pipe(throttleTime(MOUSE_MOVE_THROTTLE_TIME_MS), toClosest(ROW_SELECTOR), takeUntil(this.destroyed))
751
- .subscribe(this.editEventDispatcher.mouseMove);
752
- // Track focus within the table to hide/show/make focusable hover content.
753
- fromEventPattern(handler => element.addEventListener('focus', handler, true), handler => element.removeEventListener('focus', handler, true))
754
- .pipe(toClosest(ROW_SELECTOR), share(), takeUntil(this.destroyed))
755
- .subscribe(this.editEventDispatcher.focused);
756
- merge(fromEventPattern(handler => element.addEventListener('blur', handler, true), handler => element.removeEventListener('blur', handler, true)), fromEvent(element, 'keydown').pipe(filter(event => event.key === 'Escape')))
757
- .pipe(mapTo(null), share(), takeUntil(this.destroyed))
758
- .subscribe(this.editEventDispatcher.focused);
759
- // Keep track of rows within the table. This is used to know which rows with hover content
760
- // are first or last in the table. They are kept focusable in case focus enters from above
761
- // or below the table.
762
- this.ngZone.onStable
763
- .pipe(
764
- // Optimization: ignore dom changes while focus is within the table as we already
765
- // ensure that rows above and below the focused/active row are tabbable.
766
- withLatestFrom(this.editEventDispatcher.editingOrFocused), filter(([_, activeRow]) => activeRow == null), map(() => element.querySelectorAll(ROW_SELECTOR)), share(), takeUntil(this.destroyed))
767
- .subscribe(this.editEventDispatcher.allRows);
768
- fromEvent(element, 'keydown')
769
- .pipe(filter(event => event.key === 'Enter'), toClosest(CELL_SELECTOR), takeUntil(this.destroyed))
770
- .subscribe(this.editEventDispatcher.editing);
771
- // Keydown must be used here or else key auto-repeat does not work properly on some platforms.
772
- fromEvent(element, 'keydown')
773
- .pipe(takeUntil(this.destroyed))
774
- .subscribe(this.focusDispatcher.keyObserver);
775
- });
776
- }
777
- }
778
- CdkEditable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditable, deps: [{ token: i0.ElementRef }, { token: EditEventDispatcher }, { token: FocusDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
779
- CdkEditable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkEditable, selector: "table[editable], cdk-table[editable], mat-table[editable]", providers: [EditEventDispatcher, EditServices], ngImport: i0 });
780
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditable, decorators: [{
781
- type: Directive,
782
- args: [{
783
- selector: 'table[editable], cdk-table[editable], mat-table[editable]',
784
- providers: [EditEventDispatcher, EditServices],
785
- }]
786
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EditEventDispatcher }, { type: FocusDispatcher }, { type: i0.NgZone }]; } });
787
- const POPOVER_EDIT_HOST_BINDINGS = {
788
- '[attr.tabindex]': 'disabled ? null : 0',
789
- 'class': 'cdk-popover-edit-cell',
790
- '[attr.aria-haspopup]': '!disabled',
791
- };
792
- const POPOVER_EDIT_INPUTS = [
793
- 'template: cdkPopoverEdit',
794
- 'context: cdkPopoverEditContext',
795
- 'colspan: cdkPopoverEditColspan',
796
- 'disabled: cdkPopoverEditDisabled',
797
- ];
798
- /**
799
- * Attaches an ng-template to a cell and shows it when instructed to by the
800
- * EditEventDispatcher service.
801
- * Makes the cell focusable.
802
- */
803
- class CdkPopoverEdit {
804
- /**
805
- * Specifies that the popup should cover additional table cells before and/or after
806
- * this one.
807
- */
808
- get colspan() {
809
- return this._colspan;
810
- }
811
- set colspan(value) {
812
- this._colspan = value;
813
- // Recompute positioning when the colspan changes.
814
- if (this.overlayRef) {
815
- this.overlayRef.updatePositionStrategy(this._getPositionStrategy());
816
- if (this.overlayRef.hasAttached()) {
817
- this._updateOverlaySize();
818
- }
819
- }
820
- }
821
- /** Whether popover edit is disabled for this cell. */
822
- get disabled() {
823
- return this._disabled;
824
- }
825
- set disabled(value) {
826
- this._disabled = value;
827
- if (value) {
828
- this.services.editEventDispatcher.doneEditingCell(this.elementRef.nativeElement);
829
- this.services.editEventDispatcher.disabledCells.set(this.elementRef.nativeElement, true);
830
- }
831
- else {
832
- this.services.editEventDispatcher.disabledCells.delete(this.elementRef.nativeElement);
833
- }
834
- }
835
- constructor(services, elementRef, viewContainerRef) {
836
- this.services = services;
837
- this.elementRef = elementRef;
838
- this.viewContainerRef = viewContainerRef;
839
- /** The edit lens template shown over the cell on edit. */
840
- this.template = null;
841
- this._colspan = {};
842
- this._disabled = false;
843
- this.destroyed = new Subject();
844
- }
845
- ngAfterViewInit() {
846
- this._startListeningToEditEvents();
847
- }
848
- ngOnDestroy() {
849
- this.destroyed.next();
850
- this.destroyed.complete();
851
- if (this.focusTrap) {
852
- this.focusTrap.destroy();
853
- this.focusTrap = undefined;
854
- }
855
- if (this.overlayRef) {
856
- this.overlayRef.dispose();
857
- }
858
- }
859
- initFocusTrap() {
860
- this.focusTrap = this.services.focusTrapFactory.create(this.overlayRef.overlayElement);
861
- }
862
- closeEditOverlay() {
863
- this.services.editEventDispatcher.doneEditingCell(this.elementRef.nativeElement);
864
- }
865
- panelClass() {
866
- return EDIT_PANE_CLASS;
867
- }
868
- _startListeningToEditEvents() {
869
- this.services.editEventDispatcher
870
- .editingCell(this.elementRef.nativeElement)
871
- .pipe(takeUntil(this.destroyed))
872
- .subscribe(open => {
873
- if (open && this.template) {
874
- if (!this.overlayRef) {
875
- this._createEditOverlay();
876
- }
877
- this._showEditOverlay();
878
- }
879
- else if (this.overlayRef) {
880
- this._maybeReturnFocusToCell();
881
- this.overlayRef.detach();
882
- }
883
- });
884
- }
885
- _createEditOverlay() {
886
- this.overlayRef = this.services.overlay.create({
887
- disposeOnNavigation: true,
888
- panelClass: this.panelClass(),
889
- positionStrategy: this._getPositionStrategy(),
890
- scrollStrategy: this.services.overlay.scrollStrategies.reposition(),
891
- direction: this.services.directionality,
892
- });
893
- this.initFocusTrap();
894
- this.overlayRef.overlayElement.setAttribute('aria-role', 'dialog');
895
- this.overlayRef.detachments().subscribe(() => this.closeEditOverlay());
896
- }
897
- _showEditOverlay() {
898
- this.overlayRef.attach(new TemplatePortal(this.template, this.viewContainerRef, { $implicit: this.context }));
899
- // We have to defer trapping focus, because doing so too early can cause the form inside
900
- // the overlay to be submitted immediately if it was opened on an Enter keydown event.
901
- this.services.ngZone.runOutsideAngular(() => {
902
- setTimeout(() => {
903
- this.focusTrap.focusInitialElement();
904
- });
905
- });
906
- // Update the size of the popup initially and on subsequent changes to
907
- // scroll position and viewport size.
908
- merge(this.services.scrollDispatcher.scrolled(), this.services.viewportRuler.change())
909
- .pipe(startWith(null), takeUntil(merge(this.overlayRef.detachments(), this.destroyed)))
910
- .subscribe(() => {
911
- this._updateOverlaySize();
912
- });
913
- }
914
- _getOverlayCells() {
915
- const cell = closest(this.elementRef.nativeElement, CELL_SELECTOR);
916
- if (!this._colspan.before && !this._colspan.after) {
917
- return [cell];
918
- }
919
- const row = closest(this.elementRef.nativeElement, ROW_SELECTOR);
920
- const rowCells = Array.from(row.querySelectorAll(CELL_SELECTOR));
921
- const ownIndex = rowCells.indexOf(cell);
922
- return rowCells.slice(ownIndex - (this._colspan.before || 0), ownIndex + (this._colspan.after || 0) + 1);
923
- }
924
- _getPositionStrategy() {
925
- return this.services.positionFactory.positionStrategyForCells(this._getOverlayCells());
926
- }
927
- _updateOverlaySize() {
928
- this.overlayRef.updateSize(this.services.positionFactory.sizeConfigForCells(this._getOverlayCells()));
929
- }
930
- _maybeReturnFocusToCell() {
931
- if (closest(document.activeElement, EDIT_PANE_SELECTOR) === this.overlayRef.overlayElement) {
932
- this.elementRef.nativeElement.focus();
933
- }
934
- }
935
- }
936
- CdkPopoverEdit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEdit, deps: [{ token: EditServices }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
937
- CdkPopoverEdit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkPopoverEdit, selector: "[cdkPopoverEdit]:not([cdkPopoverEditTabOut])", inputs: { template: ["cdkPopoverEdit", "template"], context: ["cdkPopoverEditContext", "context"], colspan: ["cdkPopoverEditColspan", "colspan"], disabled: ["cdkPopoverEditDisabled", "disabled"] }, host: { properties: { "attr.tabindex": "disabled ? null : 0", "attr.aria-haspopup": "!disabled" }, classAttribute: "cdk-popover-edit-cell" }, ngImport: i0 });
938
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEdit, decorators: [{
939
- type: Directive,
940
- args: [{
941
- selector: '[cdkPopoverEdit]:not([cdkPopoverEditTabOut])',
942
- host: POPOVER_EDIT_HOST_BINDINGS,
943
- inputs: POPOVER_EDIT_INPUTS,
944
- }]
945
- }], ctorParameters: function () { return [{ type: EditServices }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
946
- /**
947
- * Attaches an ng-template to a cell and shows it when instructed to by the
948
- * EditEventDispatcher service.
949
- * Makes the cell focusable.
950
- */
951
- class CdkPopoverEditTabOut extends CdkPopoverEdit {
952
- constructor(elementRef, viewContainerRef, services, focusEscapeNotifierFactory) {
953
- super(services, elementRef, viewContainerRef);
954
- this.focusEscapeNotifierFactory = focusEscapeNotifierFactory;
955
- this.focusTrap = undefined;
956
- }
957
- initFocusTrap() {
958
- this.focusTrap = this.focusEscapeNotifierFactory.create(this.overlayRef.overlayElement);
959
- this.focusTrap
960
- .escapes()
961
- .pipe(takeUntil(this.destroyed))
962
- .subscribe(direction => {
963
- var _a;
964
- (_a = this.services.editEventDispatcher.editRef) === null || _a === void 0 ? void 0 : _a.blur();
965
- this.services.focusDispatcher.moveFocusHorizontally(closest(this.elementRef.nativeElement, CELL_SELECTOR), direction === 0 /* FocusEscapeNotifierDirection.START */ ? -1 : 1);
966
- this.closeEditOverlay();
967
- });
968
- }
969
- }
970
- CdkPopoverEditTabOut.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditTabOut, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: EditServices }, { token: FocusEscapeNotifierFactory }], target: i0.ɵɵFactoryTarget.Directive });
971
- CdkPopoverEditTabOut.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkPopoverEditTabOut, selector: "[cdkPopoverEdit][cdkPopoverEditTabOut]", inputs: { template: ["cdkPopoverEdit", "template"], context: ["cdkPopoverEditContext", "context"], colspan: ["cdkPopoverEditColspan", "colspan"], disabled: ["cdkPopoverEditDisabled", "disabled"] }, host: { properties: { "attr.tabindex": "disabled ? null : 0", "attr.aria-haspopup": "!disabled" }, classAttribute: "cdk-popover-edit-cell" }, usesInheritance: true, ngImport: i0 });
972
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditTabOut, decorators: [{
973
- type: Directive,
974
- args: [{
975
- selector: '[cdkPopoverEdit][cdkPopoverEditTabOut]',
976
- host: POPOVER_EDIT_HOST_BINDINGS,
977
- inputs: POPOVER_EDIT_INPUTS,
978
- }]
979
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: EditServices }, { type: FocusEscapeNotifierFactory }]; } });
980
- /**
981
- * A structural directive that shows its contents when the table row containing
982
- * it is hovered or when an element in the row has focus.
983
- */
984
- class CdkRowHoverContent {
985
- constructor(services, elementRef, templateRef, viewContainerRef) {
986
- this.services = services;
987
- this.elementRef = elementRef;
988
- this.templateRef = templateRef;
989
- this.viewContainerRef = viewContainerRef;
990
- this.destroyed = new Subject();
991
- this.viewRef = null;
992
- }
993
- ngAfterViewInit() {
994
- this._row = closest(this.elementRef.nativeElement, ROW_SELECTOR);
995
- this.services.editEventDispatcher.registerRowWithHoverContent(this._row);
996
- this._listenForHoverAndFocusEvents();
997
- }
998
- ngOnDestroy() {
999
- this.destroyed.next();
1000
- this.destroyed.complete();
1001
- if (this.viewRef) {
1002
- this.viewRef.destroy();
1003
- }
1004
- if (this._row) {
1005
- this.services.editEventDispatcher.deregisterRowWithHoverContent(this._row);
1006
- }
1007
- }
1008
- /**
1009
- * Called immediately after the hover content is created and added to the dom.
1010
- * In the CDK version, this is a noop but subclasses such as MatRowHoverContent use this
1011
- * to prepare/style the inserted element.
1012
- */
1013
- initElement(_) { }
1014
- /**
1015
- * Called when the hover content needs to be focusable to preserve a reasonable tab ordering
1016
- * but should not yet be shown.
1017
- */
1018
- makeElementHiddenButFocusable(element) {
1019
- element.style.opacity = '0';
1020
- }
1021
- /**
1022
- * Called when the hover content needs to be focusable to preserve a reasonable tab ordering
1023
- * but should not yet be shown.
1024
- */
1025
- makeElementVisible(element) {
1026
- element.style.opacity = '';
1027
- }
1028
- _listenForHoverAndFocusEvents() {
1029
- this.services.editEventDispatcher
1030
- .hoverOrFocusOnRow(this._row)
1031
- .pipe(takeUntil(this.destroyed))
1032
- .subscribe(eventState => {
1033
- // When in FOCUSABLE state, add the hover content to the dom but make it transparent so
1034
- // that it is in the tab order relative to the currently focused row.
1035
- if (eventState === 2 /* HoverContentState.ON */ || eventState === 1 /* HoverContentState.FOCUSABLE */) {
1036
- if (!this.viewRef) {
1037
- this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef, {});
1038
- this.initElement(this.viewRef.rootNodes[0]);
1039
- this.viewRef.markForCheck();
1040
- }
1041
- else if (this.viewContainerRef.indexOf(this.viewRef) === -1) {
1042
- this.viewContainerRef.insert(this.viewRef);
1043
- this.viewRef.markForCheck();
1044
- }
1045
- if (eventState === 2 /* HoverContentState.ON */) {
1046
- this.makeElementVisible(this.viewRef.rootNodes[0]);
1047
- }
1048
- else {
1049
- this.makeElementHiddenButFocusable(this.viewRef.rootNodes[0]);
1050
- }
1051
- }
1052
- else if (this.viewRef) {
1053
- this.viewContainerRef.detach(this.viewContainerRef.indexOf(this.viewRef));
1054
- }
1055
- });
1056
- }
1057
- }
1058
- CdkRowHoverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkRowHoverContent, deps: [{ token: EditServices }, { token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
1059
- CdkRowHoverContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkRowHoverContent, selector: "[cdkRowHoverContent]", ngImport: i0 });
1060
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkRowHoverContent, decorators: [{
1061
- type: Directive,
1062
- args: [{
1063
- selector: '[cdkRowHoverContent]',
1064
- }]
1065
- }], ctorParameters: function () { return [{ type: EditServices }, { type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
1066
- /**
1067
- * Opens the closest edit popover to this element, whether it's associated with this exact
1068
- * element or an ancestor element.
1069
- */
1070
- class CdkEditOpen {
1071
- constructor(elementRef, editEventDispatcher) {
1072
- this.elementRef = elementRef;
1073
- this.editEventDispatcher = editEventDispatcher;
1074
- const nativeElement = elementRef.nativeElement;
1075
- // Prevent accidental form submits.
1076
- if (nativeElement.nodeName === 'BUTTON' && !nativeElement.getAttribute('type')) {
1077
- nativeElement.setAttribute('type', 'button');
1078
- }
1079
- }
1080
- openEdit(evt) {
1081
- this.editEventDispatcher.editing.next(closest(this.elementRef.nativeElement, CELL_SELECTOR));
1082
- evt.stopPropagation();
1083
- }
1084
- }
1085
- CdkEditOpen.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditOpen, deps: [{ token: i0.ElementRef }, { token: EditEventDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
1086
- CdkEditOpen.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.7", type: CdkEditOpen, selector: "[cdkEditOpen]", host: { listeners: { "click": "openEdit($event)" } }, ngImport: i0 });
1087
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkEditOpen, decorators: [{
1088
- type: Directive,
1089
- args: [{
1090
- selector: '[cdkEditOpen]',
1091
- host: {
1092
- '(click)': 'openEdit($event)',
1093
- },
1094
- }]
1095
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EditEventDispatcher }]; } });
1096
-
1097
- const EXPORTED_DECLARATIONS = [
1098
- CdkPopoverEdit,
1099
- CdkPopoverEditTabOut,
1100
- CdkRowHoverContent,
1101
- CdkEditControl,
1102
- CdkEditRevert,
1103
- CdkEditClose,
1104
- CdkEditable,
1105
- CdkEditOpen,
1106
- ];
1107
- class CdkPopoverEditModule {
1108
- }
1109
- CdkPopoverEditModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1110
- CdkPopoverEditModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditModule, declarations: [CdkPopoverEdit,
1111
- CdkPopoverEditTabOut,
1112
- CdkRowHoverContent,
1113
- CdkEditControl,
1114
- CdkEditRevert,
1115
- CdkEditClose,
1116
- CdkEditable,
1117
- CdkEditOpen], imports: [OverlayModule], exports: [CdkPopoverEdit,
1118
- CdkPopoverEditTabOut,
1119
- CdkRowHoverContent,
1120
- CdkEditControl,
1121
- CdkEditRevert,
1122
- CdkEditClose,
1123
- CdkEditable,
1124
- CdkEditOpen] });
1125
- CdkPopoverEditModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditModule, providers: [
1126
- {
1127
- provide: PopoverEditPositionStrategyFactory,
1128
- useClass: DefaultPopoverEditPositionStrategyFactory,
1129
- },
1130
- ], imports: [OverlayModule] });
1131
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.7", ngImport: i0, type: CdkPopoverEditModule, decorators: [{
1132
- type: NgModule,
1133
- args: [{
1134
- imports: [OverlayModule],
1135
- exports: EXPORTED_DECLARATIONS,
1136
- declarations: EXPORTED_DECLARATIONS,
1137
- providers: [
1138
- {
1139
- provide: PopoverEditPositionStrategyFactory,
1140
- useClass: DefaultPopoverEditPositionStrategyFactory,
1141
- },
1142
- ],
1143
- }]
1144
- }] });
1145
-
1146
- /**
1147
- * Generated bundle index. Do not edit.
1148
- */
1149
-
1150
- export { CdkEditClose, CdkEditControl, CdkEditOpen, CdkEditRevert, CdkEditable, CdkPopoverEdit, CdkPopoverEditModule, CdkPopoverEditTabOut, CdkRowHoverContent, DefaultPopoverEditPositionStrategyFactory, EditEventDispatcher, EditRef, FocusDispatcher, FormValueContainer, PopoverEditPositionStrategyFactory, CELL_SELECTOR as _CELL_SELECTOR, closest as _closest };
1151
- //# sourceMappingURL=popover-edit.mjs.map