|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.io/license |
| 7 | + */ |
| 8 | + |
| 9 | +import {Directive, Inject, isDevMode, OnDestroy, OnInit, Optional, Self} from '@angular/core'; |
| 10 | +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; |
| 11 | +import {Observable, of as observableOf, Subject} from 'rxjs'; |
| 12 | +import {switchMap, takeUntil} from 'rxjs/operators'; |
| 13 | + |
| 14 | +import {CdkSelection} from './selection'; |
| 15 | + |
| 16 | +/** |
| 17 | + * Makes the element a select-all toggle. |
| 18 | + * |
| 19 | + * Must be used within a parent `CdkSelection` directive. It toggles the selection states |
| 20 | + * of all the selection toggles connected with the `CdkSelection` directive. |
| 21 | + * If the element implements `ControlValueAccessor`, e.g. `MatCheckbox`, the directive |
| 22 | + * automatically connects it with the select-all state provided by the `CdkSelection` directive. If |
| 23 | + * not, use `checked$` to get the checked state, `indeterminate$` to get the indeterminate state, |
| 24 | + * and `toggle()` to change the selection state. |
| 25 | + */ |
| 26 | +@Directive({ |
| 27 | + selector: '[cdkSelectAll]', |
| 28 | + exportAs: 'cdkSelectAll', |
| 29 | +}) |
| 30 | +export class CdkSelectAll<T> implements OnDestroy, OnInit { |
| 31 | + /** |
| 32 | + * The checked state of the toggle. |
| 33 | + * Resolves to `true` if all the values are selected, `false` if no value is selected. |
| 34 | + */ |
| 35 | + readonly checked: Observable<boolean> = this._selection.change.pipe( |
| 36 | + switchMap(() => observableOf(this._selection.isAllSelected())), |
| 37 | + ); |
| 38 | + |
| 39 | + /** |
| 40 | + * The indeterminate state of the toggle. |
| 41 | + * Resolves to `true` if part (not all) of the values are selected, `false` if all values or no |
| 42 | + * value at all are selected. |
| 43 | + */ |
| 44 | + readonly indeterminate: Observable<boolean> = this._selection.change.pipe( |
| 45 | + switchMap(() => observableOf(this._selection.isPartialSelected())), |
| 46 | + ); |
| 47 | + |
| 48 | + /** |
| 49 | + * Toggles the select-all state. |
| 50 | + * @param event The click event if the toggle is triggered by a (mouse or keyboard) click. If |
| 51 | + * using with a native `<input type="checkbox">`, the parameter is required for the |
| 52 | + * indeterminate state to work properly. |
| 53 | + */ |
| 54 | + toggle(event?: MouseEvent) { |
| 55 | + // This is needed when applying the directive on a native <input type="checkbox"> |
| 56 | + // checkbox. The default behavior needs to be prevented in order to support the indeterminate |
| 57 | + // state. The timeout is also needed so the checkbox can show the latest state. |
| 58 | + if (event) { |
| 59 | + event.preventDefault(); |
| 60 | + } |
| 61 | + |
| 62 | + setTimeout(() => { |
| 63 | + this._selection.toggleSelectAll(); |
| 64 | + }); |
| 65 | + } |
| 66 | + |
| 67 | + private readonly _destroyed = new Subject<void>(); |
| 68 | + |
| 69 | + constructor( |
| 70 | + @Optional() @Inject(CdkSelection) private readonly _selection: CdkSelection<T>, |
| 71 | + @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) private readonly _controlValueAccessor: |
| 72 | + ControlValueAccessor[]) {} |
| 73 | + |
| 74 | + ngOnInit() { |
| 75 | + this._assertValidParentSelection(); |
| 76 | + this._configureControlValueAccessor(); |
| 77 | + } |
| 78 | + |
| 79 | + private _configureControlValueAccessor() { |
| 80 | + if (this._controlValueAccessor && this._controlValueAccessor.length) { |
| 81 | + this._controlValueAccessor[0].registerOnChange((e: unknown) => { |
| 82 | + if (e === true || e === false) { |
| 83 | + this.toggle(); |
| 84 | + } |
| 85 | + }); |
| 86 | + this.checked.pipe(takeUntil(this._destroyed)).subscribe((state) => { |
| 87 | + this._controlValueAccessor[0].writeValue(state); |
| 88 | + }); |
| 89 | + } |
| 90 | + } |
| 91 | + |
| 92 | + private _assertValidParentSelection() { |
| 93 | + if (!this._selection && isDevMode()) { |
| 94 | + throw Error('CdkSelectAll: missing CdkSelection in the parent'); |
| 95 | + } |
| 96 | + |
| 97 | + if (!this._selection.multiple && isDevMode()) { |
| 98 | + throw Error('CdkSelectAll: CdkSelection must have cdkSelectionMultiple set to true'); |
| 99 | + } |
| 100 | + } |
| 101 | + |
| 102 | + ngOnDestroy() { |
| 103 | + this._destroyed.next(); |
| 104 | + this._destroyed.complete(); |
| 105 | + } |
| 106 | +} |
0 commit comments