From e274004127b6409f74281623e0e0fd3aedc9236f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 3 Nov 2021 09:54:12 +0200 Subject: [PATCH] refactor(multiple): clean up host decorator workarounds We had some workarounds with `HostListener` and `HostBinding` which go against our conventions. They were used to support ViewEngine, but they are no longer necessary. --- .../dialog/dialog-container.ts | 30 ++--------- src/cdk-experimental/menu/menu-bar.ts | 13 +---- src/cdk-experimental/menu/menu-item.ts | 29 +++------- src/cdk-experimental/menu/menu.ts | 13 +---- .../popover-edit/lens-directives.ts | 54 ++++++------------- .../popover-edit/table-directives.ts | 9 ++-- src/cdk/coercion/coercion.md | 2 +- src/cdk/stepper/stepper-button.ts | 24 ++------- src/cdk/text-field/autosize.ts | 7 +-- src/cdk/tree/nested-node.ts | 15 ++---- src/cdk/tree/toggle.ts | 15 +++--- src/cdk/tree/tree.ts | 29 ++-------- .../mdc-button/button-base.ts | 14 +++-- src/material-experimental/mdc-chips/chip.ts | 8 +-- .../mdc-list/interactive-list-base.ts | 23 ++++---- .../mdc-list/list-base.ts | 19 ++++--- src/material/input/input.ts | 18 ++----- src/material/menu/menu-item.ts | 15 +----- src/material/menu/menu-trigger.ts | 32 ++++------- src/material/sidenav/drawer.ts | 30 ++--------- src/material/tree/node.ts | 30 +++-------- src/material/tree/tree.ts | 9 +--- tools/public_api_guard/cdk/stepper.md | 4 -- tools/public_api_guard/cdk/tree.md | 11 +--- tools/public_api_guard/material/menu.md | 6 --- tools/public_api_guard/material/sidenav.md | 4 -- tools/public_api_guard/material/tree.md | 9 +--- 27 files changed, 113 insertions(+), 359 deletions(-) diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts index 57298e0fd86a..aa7744418b8b 100644 --- a/src/cdk-experimental/dialog/dialog-container.ts +++ b/src/cdk-experimental/dialog/dialog-container.ts @@ -24,7 +24,6 @@ import { ComponentRef, ElementRef, EmbeddedViewRef, - HostBinding, Inject, NgZone, OnDestroy, @@ -70,6 +69,11 @@ export function throwDialogContentAlreadyAttachedError() { }`, '(@dialog.start)': '_onAnimationStart($event)', '(@dialog.done)': '_animationDone.next($event)', + 'tabindex': '-1', + '[attr.role]': '_config.role', + 'aria-modal': 'true', + '[attr.aria-label]': '_config.ariaLabel || null', + '[attr.aria-describedby]': '_config.ariaDescribedBy', }, }) export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy { @@ -84,30 +88,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy { /** The class that traps and manages focus within the dialog. */ private _focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); - // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator - // metadata is not inherited by child classes, instead the host binding data is defined in a way - // that can be inherited. - // tslint:disable:no-host-decorator-in-concrete no-private-getters - @HostBinding('attr.aria-label') get _ariaLabel() { - return this._config.ariaLabel || null; - } - - @HostBinding('attr.aria-describedby') - get _ariaDescribedBy() { - return this._config.ariaDescribedBy; - } - - @HostBinding('attr.role') get _role() { - return this._config.role; - } - - @HostBinding('attr.aria-modal') _ariaModal: boolean = true; - - @HostBinding('attr.tabindex') get _tabindex() { - return -1; - } - // tslint:disable:no-host-decorator-in-concrete no-private-getters - /** The portal host inside of this container into which the dialog content will be loaded. */ @ViewChild(CdkPortalOutlet, {static: true}) _portalHost: CdkPortalOutlet; diff --git a/src/cdk-experimental/menu/menu-bar.ts b/src/cdk-experimental/menu/menu-bar.ts index c68a7f006b52..255f8623cfd7 100644 --- a/src/cdk-experimental/menu/menu-bar.ts +++ b/src/cdk-experimental/menu/menu-bar.ts @@ -15,7 +15,6 @@ import { OnDestroy, Optional, NgZone, - HostListener, ElementRef, Inject, Self, @@ -46,6 +45,8 @@ import {MenuAim, MENU_AIM} from './menu-aim'; 'class': 'cdk-menu-bar', 'tabindex': '0', '[attr.aria-orientation]': 'orientation', + '(focus)': 'focusFirstItem()', + '(keydown)': '_handleKeyEvent($event)', }, providers: [ {provide: CdkMenuGroup, useExisting: CdkMenuBar}, @@ -97,11 +98,6 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit, this._menuAim?.initialize(this, this._pointerTracker!); } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('focus') /** Place focus on the first MenuItem in the menu and set the focus origin. */ focusFirstItem(focusOrigin: FocusOrigin = 'program') { this._keyManager.setFocusOrigin(focusOrigin); @@ -114,11 +110,6 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit, this._keyManager.setLastItemActive(); } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('keydown', ['$event']) /** * Handle keyboard events, specifically changing the focused element and/or toggling the active * items menu. diff --git a/src/cdk-experimental/menu/menu-item.ts b/src/cdk-experimental/menu/menu-item.ts index 62ae49e1f5d8..8ae61cf087fa 100644 --- a/src/cdk-experimental/menu/menu-item.ts +++ b/src/cdk-experimental/menu/menu-item.ts @@ -15,7 +15,6 @@ import { Output, EventEmitter, Inject, - HostListener, NgZone, OnDestroy, } from '@angular/core'; @@ -53,6 +52,12 @@ function removeIcons(element: Element) { 'role': 'menuitem', 'class': 'cdk-menu-item', '[attr.aria-disabled]': 'disabled || null', + '(blur)': '_resetTabIndex()', + '(mouseout)': '_resetTabIndex()', + '(focus)': '_setTabIndex()', + '(mouseenter)': '_setTabIndex($event)', + '(click)': 'trigger()', + '(keydown)': '_onKeydown($event)', }, }) export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, OnDestroy { @@ -104,12 +109,6 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, this._elementRef.nativeElement.focus(); } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('blur') - @HostListener('mouseout') /** Reset the _tabindex to -1. */ _resetTabIndex() { if (!this._isStandaloneItem()) { @@ -117,12 +116,6 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, } } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('focus') - @HostListener('mouseenter', ['$event']) /** * Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element * is not in a menu bar. @@ -143,11 +136,6 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, return !this._parentMenu; } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('click') /** * If the menu item is not disabled and the element does not have a menu trigger attached, emit * on the cdkMenuItemTriggered emitter and close all open menus. @@ -192,11 +180,6 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, return clone.textContent?.trim() || ''; } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('keydown', ['$event']) /** * Handles keyboard events for the menu item, specifically either triggering the user defined * callback or opening/closing the current menu based on whether the left or right arrow key was diff --git a/src/cdk-experimental/menu/menu.ts b/src/cdk-experimental/menu/menu.ts index c168940dd213..59d51401ac8d 100644 --- a/src/cdk-experimental/menu/menu.ts +++ b/src/cdk-experimental/menu/menu.ts @@ -18,7 +18,6 @@ import { Optional, OnInit, NgZone, - HostListener, ElementRef, Inject, Self, @@ -60,6 +59,8 @@ import {MENU_AIM, MenuAim} from './menu-aim'; 'class': 'cdk-menu', '[class.cdk-menu-inline]': '_isInline()', '[attr.aria-orientation]': 'orientation', + '(focus)': 'focusFirstItem()', + '(keydown)': '_handleKeyEvent($event)', }, providers: [ {provide: CdkMenuGroup, useExisting: CdkMenu}, @@ -136,11 +137,6 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI this._menuAim?.initialize(this, this._pointerTracker!); } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('focus') /** Place focus on the first MenuItem in the menu and set the focus origin. */ focusFirstItem(focusOrigin: FocusOrigin = 'program') { this._keyManager.setFocusOrigin(focusOrigin); @@ -153,11 +149,6 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI this._keyManager.setLastItemActive(); } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('keydown', ['$event']) /** Handle keyboard events for the Menu. */ _handleKeyEvent(event: KeyboardEvent) { const keyManager = this._keyManager; diff --git a/src/cdk-experimental/popover-edit/lens-directives.ts b/src/cdk-experimental/popover-edit/lens-directives.ts index 312731cded75..7d5670707640 100644 --- a/src/cdk-experimental/popover-edit/lens-directives.ts +++ b/src/cdk-experimental/popover-edit/lens-directives.ts @@ -7,15 +7,7 @@ */ import {Subject} from 'rxjs'; -import { - Directive, - ElementRef, - EventEmitter, - OnDestroy, - OnInit, - Input, - HostListener, -} from '@angular/core'; +import {Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Input} from '@angular/core'; import {hasModifierKey} from '@angular/cdk/keycodes'; import {EDIT_PANE_SELECTOR} from './constants'; import {closest} from './polyfill'; @@ -39,6 +31,11 @@ export type PopoverEditClickOutBehavior = 'close' | 'submit' | 'noop'; ], outputs: ['preservedFormValueChange: cdkEditControlPreservedFormValueChange'], providers: [EditRef], + host: { + '(ngSubmit)': 'handleFormSubmit()', + '(document:click)': 'handlePossibleClickOut($event)', + '(keydown)': '_handleKeydown($event)', + }, }) export class CdkEditControl implements OnDestroy, OnInit { protected readonly destroyed = new Subject(); @@ -81,11 +78,6 @@ export class CdkEditControl implements OnDestroy, OnInit { * the form for validity before proceeding. * Updates the revert state with the latest submitted value then closes the edit. */ - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('ngSubmit') handleFormSubmit(): void { if (this.ignoreSubmitUnlessValid && !this.editRef.isValid()) { return; @@ -106,11 +98,6 @@ export class CdkEditControl implements OnDestroy, OnInit { * Called on click anywhere in the document. * If the click was outside of the lens, trigger the specified click out behavior. */ - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('document:click', ['$event']) handlePossibleClickOut(evt: Event): void { if (closest(evt.target, EDIT_PANE_SELECTOR)) { return; @@ -129,11 +116,6 @@ export class CdkEditControl implements OnDestroy, OnInit { } } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('keydown', ['$event']) _handleKeydown(event: KeyboardEvent) { if (event.key === 'Escape' && !hasModifierKey(event)) { this.close(); @@ -159,6 +141,7 @@ export class CdkEditControl implements OnDestroy, OnInit { selector: 'button[cdkEditRevert]', host: { 'type': 'button', // Prevents accidental form submits. + '(click)': 'revertEdit()', }, }) export class CdkEditRevert { @@ -167,18 +150,20 @@ export class CdkEditRevert { constructor(protected readonly editRef: EditRef) {} - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click') revertEdit(): void { this.editRef.reset(); } } /** Closes the lens on click. */ -@Directive({selector: '[cdkEditClose]'}) +@Directive({ + selector: '[cdkEditClose]', + host: { + '(click)': 'closeEdit()', + '(keydown.enter)': 'closeEdit()', + '(keydown.space)': 'closeEdit()', + }, +}) export class CdkEditClose { constructor( protected readonly elementRef: ElementRef, @@ -192,15 +177,6 @@ export class CdkEditClose { } } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click') - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('keydown.enter') - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('keydown.space') closeEdit(): void { // Note that we use `click` here, rather than a keyboard event, because some screen readers // will emit a fake click event instead of an enter keyboard event on buttons. For the keyboard diff --git a/src/cdk-experimental/popover-edit/table-directives.ts b/src/cdk-experimental/popover-edit/table-directives.ts index 2c128a075afd..05520e727a4b 100644 --- a/src/cdk-experimental/popover-edit/table-directives.ts +++ b/src/cdk-experimental/popover-edit/table-directives.ts @@ -17,7 +17,6 @@ import { OnDestroy, TemplateRef, ViewContainerRef, - HostListener, } from '@angular/core'; import {fromEvent, fromEventPattern, merge, Subject} from 'rxjs'; import { @@ -496,6 +495,9 @@ export class CdkRowHoverContent implements AfterViewInit, OnDestroy { */ @Directive({ selector: '[cdkEditOpen]', + host: { + '(click)': 'openEdit($event)', + }, }) export class CdkEditOpen { constructor( @@ -510,11 +512,6 @@ export class CdkEditOpen { } } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click', ['$event']) openEdit(evt: Event): void { this.editEventDispatcher.editing.next(closest(this.elementRef.nativeElement!, CELL_SELECTOR)); evt.stopPropagation(); diff --git a/src/cdk/coercion/coercion.md b/src/cdk/coercion/coercion.md index 6a6fdd3058c2..de31cf23b359 100644 --- a/src/cdk/coercion/coercion.md +++ b/src/cdk/coercion/coercion.md @@ -3,7 +3,7 @@ Utility functions for coercing `@Input`s into specific types. ### Example ```ts -import {Directive, ElementRef, HostListener} from '@angular/core'; +import {Directive, ElementRef} from '@angular/core'; import { coerceBooleanProperty, BooleanInput, diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts index f58699be07ba..92f73c4e001c 100644 --- a/src/cdk/stepper/stepper-button.ts +++ b/src/cdk/stepper/stepper-button.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, HostListener, Input} from '@angular/core'; +import {Directive, Input} from '@angular/core'; import {CdkStepper} from './stepper'; @@ -15,6 +15,7 @@ import {CdkStepper} from './stepper'; selector: 'button[cdkStepperNext]', host: { '[type]': 'type', + '(click)': '_stepper.next()', }, }) export class CdkStepperNext { @@ -22,16 +23,6 @@ export class CdkStepperNext { @Input() type: string = 'submit'; constructor(public _stepper: CdkStepper) {} - - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click') - _handleClick() { - this._stepper.next(); - } } /** Button that moves to the previous step in a stepper workflow. */ @@ -39,6 +30,7 @@ export class CdkStepperNext { selector: 'button[cdkStepperPrevious]', host: { '[type]': 'type', + '(click)': '_stepper.previous()', }, }) export class CdkStepperPrevious { @@ -46,14 +38,4 @@ export class CdkStepperPrevious { @Input() type: string = 'button'; constructor(public _stepper: CdkStepper) {} - - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click') - _handleClick() { - this._stepper.previous(); - } } diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts index 7a0b6895a724..7ec45ff3bedf 100644 --- a/src/cdk/text-field/autosize.ts +++ b/src/cdk/text-field/autosize.ts @@ -20,7 +20,6 @@ import { DoCheck, OnDestroy, NgZone, - HostListener, Optional, Inject, } from '@angular/core'; @@ -38,6 +37,7 @@ import {DOCUMENT} from '@angular/common'; // Textarea elements that have the directive applied should have a single row by default. // Browsers normally show two rows by default and therefore this limits the minRows binding. 'rows': '1', + '(input)': '_noopInputHandler()', }, }) export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { @@ -335,11 +335,6 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { } } - // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order - // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we - // can move this back into `host`. - // tslint:disable:no-host-decorator-in-concrete - @HostListener('input') _noopInputHandler() { // no-op handler that ensures we're running change detection on input events. } diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts index 3f9c2ce42992..44d62083a620 100644 --- a/src/cdk/tree/nested-node.ts +++ b/src/cdk/tree/nested-node.ts @@ -9,7 +9,6 @@ import { AfterContentInit, ContentChildren, Directive, - DoCheck, ElementRef, IterableDiffer, IterableDiffers, @@ -38,10 +37,13 @@ import {getTreeControlFunctionsMissingError} from './tree-errors'; {provide: CdkTreeNode, useExisting: CdkNestedTreeNode}, {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode}, ], + host: { + 'class': 'cdk-nested-tree-node', + }, }) export class CdkNestedTreeNode extends CdkTreeNode - implements AfterContentInit, DoCheck, OnDestroy, OnInit + implements AfterContentInit, OnDestroy, OnInit { /** Differ used to find the changes in the data provided by the data source. */ private _dataDiffer: IterableDiffer; @@ -63,11 +65,6 @@ export class CdkNestedTreeNode protected _differs: IterableDiffers, ) { super(elementRef, tree); - // The classes are directly added here instead of in the host property because classes on - // the host property are not inherited with View Engine. It is not set as a @HostBinding because - // it is not set by the time it's children nodes try to read the class from it. - // TODO: move to host after View Engine deprecation - elementRef.nativeElement.classList.add('cdk-nested-tree-node'); } ngAfterContentInit() { @@ -94,10 +91,6 @@ export class CdkNestedTreeNode super.ngOnInit(); } - override ngDoCheck() { - super.ngDoCheck(); - } - override ngOnDestroy() { this._clear(); super.ngOnDestroy(); diff --git a/src/cdk/tree/toggle.ts b/src/cdk/tree/toggle.ts index 41bf9bd27e8d..87ffd46d025c 100644 --- a/src/cdk/tree/toggle.ts +++ b/src/cdk/tree/toggle.ts @@ -7,14 +7,19 @@ */ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion'; -import {Directive, HostListener, Input} from '@angular/core'; +import {Directive, Input} from '@angular/core'; import {CdkTree, CdkTreeNode} from './tree'; /** * Node toggle to expand/collapse the node. */ -@Directive({selector: '[cdkTreeNodeToggle]'}) +@Directive({ + selector: '[cdkTreeNodeToggle]', + host: { + '(click)': '_toggle($event)', + }, +}) export class CdkTreeNodeToggle { /** Whether expand/collapse the node recursively. */ @Input('cdkTreeNodeToggleRecursive') @@ -28,12 +33,6 @@ export class CdkTreeNodeToggle { constructor(protected _tree: CdkTree, protected _treeNode: CdkTreeNode) {} - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click', ['$event']) _toggle(event: Event): void { this.recursive ? this._tree.treeControl.toggleDescendants(this._treeNode.data) diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts index 3b443ceb0f14..16a6c0058bd5 100644 --- a/src/cdk/tree/tree.ts +++ b/src/cdk/tree/tree.ts @@ -14,7 +14,6 @@ import { Component, ContentChildren, Directive, - DoCheck, ElementRef, Input, IterableChangeRecord, @@ -316,8 +315,12 @@ export class CdkTree implements AfterContentChecked, CollectionViewer, @Directive({ selector: 'cdk-tree-node', exportAs: 'cdkTreeNode', + host: { + 'class': 'cdk-tree-node', + '[attr.aria-expanded]': 'isExpanded', + }, }) -export class CdkTreeNode implements DoCheck, FocusableOption, OnDestroy, OnInit { +export class CdkTreeNode implements FocusableOption, OnDestroy, OnInit { /** * The role of the tree node. * @deprecated The correct role is 'treeitem', 'group' should not be used. This input will be @@ -364,13 +367,6 @@ export class CdkTreeNode implements DoCheck, FocusableOption, OnDestro return this._tree.treeControl.isExpanded(this._data); } - private _setExpanded(_expanded: boolean) { - this._isAriaExpanded = _expanded; - this._elementRef.nativeElement.setAttribute('aria-expanded', `${_expanded}`); - } - - protected _isAriaExpanded: boolean; - get level(): number { // If the treeControl has a getLevel method, use it to get the level. Otherwise read the // aria-level off the parent node and use it as the level for this node (note aria-level is @@ -382,11 +378,6 @@ export class CdkTreeNode implements DoCheck, FocusableOption, OnDestro constructor(protected _elementRef: ElementRef, protected _tree: CdkTree) { CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode; - // The classes are directly added here instead of in the host property because classes on - // the host property are not inherited with View Engine. It is not set as a @HostBinding because - // it is not set by the time it's children nodes try to read the class from it. - // TODO: move to host after View Engine deprecation - this._elementRef.nativeElement.classList.add('cdk-tree-node'); this.role = 'treeitem'; } @@ -395,16 +386,6 @@ export class CdkTreeNode implements DoCheck, FocusableOption, OnDestro this._elementRef.nativeElement.setAttribute('aria-level', `${this.level + 1}`); } - ngDoCheck() { - // aria-expanded is be set here because the expanded state is stored in the tree control and - // the node isn't aware when the state is changed. - // It is not set using a @HostBinding because they sometimes get lost with Mixin based classes. - // TODO: move to host after View Engine deprecation - if (this.isExpanded != this._isAriaExpanded) { - this._setExpanded(this.isExpanded); - } - } - ngOnDestroy() { // If this is the last tree node being destroyed, // clear out the reference to avoid leaking memory. diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts index f20cd6bec6dc..82df10547557 100644 --- a/src/material-experimental/mdc-button/button-base.ts +++ b/src/material-experimental/mdc-button/button-base.ts @@ -8,7 +8,7 @@ import {BooleanInput} from '@angular/cdk/coercion'; import {Platform} from '@angular/cdk/platform'; -import {Directive, ElementRef, HostListener, NgZone, ViewChild} from '@angular/core'; +import {Directive, ElementRef, NgZone, ViewChild} from '@angular/core'; import { CanColor, CanDisable, @@ -159,7 +159,11 @@ export const MAT_ANCHOR_HOST = { /** * Anchor button base. */ -@Directive() +@Directive({ + host: { + '(click)': '_haltDisabledEvents($event)', + }, +}) export class MatAnchorBase extends MatButtonBase { tabIndex: number; @@ -167,12 +171,6 @@ export class MatAnchorBase extends MatButtonBase { super(elementRef, platform, ngZone, animationMode); } - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(mmalerba): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click', ['$event']) _haltDisabledEvents(event: Event) { // A disabled button shouldn't apply any actions if (this.disabled) { diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts index 27ca314a9273..9016c07d2cc4 100644 --- a/src/material-experimental/mdc-chips/chip.ts +++ b/src/material-experimental/mdc-chips/chip.ts @@ -19,7 +19,6 @@ import { Directive, ElementRef, EventEmitter, - HostListener, Inject, Input, NgZone, @@ -106,6 +105,7 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas '[id]': 'id', '[attr.disabled]': 'disabled || null', '[attr.aria-disabled]': 'disabled.toString()', + '(transitionend)': '_handleTransitionEnd($event)', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -141,12 +141,6 @@ export class MatChip /** Whether animations for the chip are enabled. */ _animationsDisabled: boolean; - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(mmalerba): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('transitionend', ['$event']) _handleTransitionEnd(event: TransitionEvent) { this._chipFoundation.handleTransitionEnd(event); } diff --git a/src/material-experimental/mdc-list/interactive-list-base.ts b/src/material-experimental/mdc-list/interactive-list-base.ts index 805c69246c97..ce1be7fab9b2 100644 --- a/src/material-experimental/mdc-list/interactive-list-base.ts +++ b/src/material-experimental/mdc-list/interactive-list-base.ts @@ -7,33 +7,30 @@ */ import {DOCUMENT} from '@angular/common'; -import { - AfterViewInit, - Directive, - ElementRef, - HostListener, - Inject, - OnDestroy, - QueryList, -} from '@angular/core'; +import {AfterViewInit, Directive, ElementRef, Inject, OnDestroy, QueryList} from '@angular/core'; import {MDCListAdapter, MDCListFoundation} from '@material/list'; import {Subscription} from 'rxjs'; import {startWith} from 'rxjs/operators'; import {MatListBase, MatListItemBase} from './list-base'; -@Directive() +@Directive({ + host: { + '(keydown)': '_handleKeydown($event)', + '(click)': '_handleClick($event)', + '(focusin)': '_handleFocusin($event)', + '(focusout)': '_handleFocusout($event)', + }, +}) /** @docs-private */ export abstract class MatInteractiveListBase extends MatListBase implements AfterViewInit, OnDestroy { - @HostListener('keydown', ['$event']) _handleKeydown(event: KeyboardEvent) { const index = this._indexForElement(event.target as HTMLElement); this._foundation.handleKeydown(event, this._elementAtIndex(index) === event.target, index); } - @HostListener('click', ['$event']) _handleClick(event: MouseEvent) { // The `toggleCheckbox` parameter can always be `true` as it only has an effect if the list // is recognized as checkbox selection list. For such lists, we would always want to toggle @@ -47,7 +44,6 @@ export abstract class MatInteractiveListBase ); } - @HostListener('focusin', ['$event']) _handleFocusin(event: FocusEvent) { const itemIndex = this._indexForElement(event.target as HTMLElement); const tabIndex = this._itemsArr[itemIndex]?._hostElement.tabIndex; @@ -64,7 +60,6 @@ export abstract class MatInteractiveListBase this._foundation.handleFocusIn(itemIndex); } - @HostListener('focusout', ['$event']) _handleFocusout(event: FocusEvent) { this._foundation.handleFocusOut(this._indexForElement(event.target as HTMLElement)); } diff --git a/src/material-experimental/mdc-list/list-base.ts b/src/material-experimental/mdc-list/list-base.ts index 5133c4d7859e..314f028c2cb1 100644 --- a/src/material-experimental/mdc-list/list-base.ts +++ b/src/material-experimental/mdc-list/list-base.ts @@ -13,7 +13,6 @@ import { ContentChildren, Directive, ElementRef, - HostBinding, Inject, Input, NgZone, @@ -42,7 +41,12 @@ function toggleClass(el: Element, className: string, on: boolean) { } } -@Directive() +@Directive({ + host: { + '[class.mdc-list-item--disabled]': 'disabled', + '[attr.aria-disabled]': 'disabled', + }, +}) /** @docs-private */ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget { /** Query list matching list-item line elements. */ @@ -72,8 +76,6 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri private _disableRipple: boolean = false; /** Whether the list-item is disabled. */ - @HostBinding('class.mdc-list-item--disabled') - @HostBinding('attr.aria-disabled') @Input() get disabled(): boolean { return this._disabled || (this._listBase && this._listBase.disabled); @@ -194,10 +196,14 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri static ngAcceptInputType_disableRipple: BooleanInput; } -@Directive() +@Directive({ + host: { + '[class.mat-mdc-list-non-interactive]': '_isNonInteractive', + '[attr.aria-disabled]': 'disabled', + }, +}) /** @docs-private */ export abstract class MatListBase { - @HostBinding('class.mat-mdc-list-non-interactive') _isNonInteractive: boolean = true; /** Whether ripples for all list items is disabled. */ @@ -211,7 +217,6 @@ export abstract class MatListBase { private _disableRipple: boolean = false; /** Whether all list items are disabled. */ - @HostBinding('attr.aria-disabled') @Input() get disabled(): boolean { return this._disabled; diff --git a/src/material/input/input.ts b/src/material/input/input.ts index 761cab242e89..473040a9ba6d 100644 --- a/src/material/input/input.ts +++ b/src/material/input/input.ts @@ -14,7 +14,6 @@ import { Directive, DoCheck, ElementRef, - HostListener, Inject, Input, NgZone, @@ -85,6 +84,9 @@ const _MatInputBase = mixinErrorState( // state usually overlaps with `aria-required` when the input is empty and can be redundant. '[attr.aria-invalid]': '(empty && required) ? null : errorState', '[attr.aria-required]': 'required', + '(focus)': '_focusChanged(true)', + '(blur)': '_focusChanged(false)', + '(input)': '_onInput()', }, providers: [{provide: MatFormFieldControl, useExisting: MatInput}], }) @@ -365,15 +367,7 @@ export class MatInput this._elementRef.nativeElement.focus(options); } - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. /** Callback for the cases where the focused state of the input changes. */ - // tslint:disable:no-host-decorator-in-concrete - @HostListener('focus', ['true']) - @HostListener('blur', ['false']) - // tslint:enable:no-host-decorator-in-concrete _focusChanged(isFocused: boolean) { if (isFocused !== this.focused) { this.focused = isFocused; @@ -381,12 +375,6 @@ export class MatInput } } - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('input') _onInput() { // This is a noop function and is used to let Angular know whenever the value changes. // Angular will run a new change detection each time the `input` event has been dispatched. diff --git a/src/material/menu/menu-item.ts b/src/material/menu/menu-item.ts index c94c292866cc..b165c22b5830 100644 --- a/src/material/menu/menu-item.ts +++ b/src/material/menu/menu-item.ts @@ -17,7 +17,6 @@ import { Inject, Optional, Input, - HostListener, AfterViewInit, ChangeDetectorRef, } from '@angular/core'; @@ -51,6 +50,8 @@ const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {})); '[attr.aria-disabled]': 'disabled.toString()', '[attr.disabled]': 'disabled || null', 'class': 'mat-focus-indicator', + '(click)': '_checkDisabled($event)', + '(mouseenter)': '_handleMouseEnter()', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -142,12 +143,6 @@ export class MatMenuItem } /** Prevents the default element actions if it is disabled. */ - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('click', ['$event']) _checkDisabled(event: Event): void { if (this.disabled) { event.preventDefault(); @@ -156,12 +151,6 @@ export class MatMenuItem } /** Emits to the hover stream. */ - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('mouseenter') _handleMouseEnter() { this._hovered.next(this); } diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts index a046af2c4eb4..0456a2e79ac5 100644 --- a/src/material/menu/menu-trigger.ts +++ b/src/material/menu/menu-trigger.ts @@ -29,8 +29,6 @@ import { Directive, ElementRef, EventEmitter, - HostBinding, - HostListener, Inject, InjectionToken, Input, @@ -74,7 +72,16 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({passive: tr // TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors -@Directive() +@Directive({ + host: { + 'aria-haspopup': 'true', + '[attr.aria-expanded]': 'menuOpen || null', + '[attr.aria-controls]': 'menuOpen ? menu.panelId : null', + '(click)': '_handleClick($event)', + '(mousedown)': '_handleMousedown($event)', + '(keydown)': '_handleKeydown($event)', + }, +}) export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy { private _portal: TemplatePortal; private _overlayRef: OverlayRef | null = null; @@ -104,22 +111,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy // the first item of the list when the menu is opened via the keyboard _openedBy: Exclude | undefined = undefined; - @HostBinding('attr.aria-expanded') - // Need tp use getter for HostBinding - // tslint:disable-next-line:no-private-getters - get _ariaExpanded() { - return this.menuOpen || null; - } - - @HostBinding('attr.aria-controls') - // Need tp use getter for HostBinding - // tslint:disable-next-line:no-private-getters - get _ariaControl() { - return this.menuOpen ? this.menu.panelId : null; - } - - @HostBinding('attr.aria-haspopup') _ariaHaspopup = true; - /** * @deprecated * @breaking-change 8.0.0 @@ -529,7 +520,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy } /** Handles mouse presses on the trigger. */ - @HostListener('mousedown', ['$event']) _handleMousedown(event: MouseEvent): void { if (!isFakeMousedownFromScreenReader(event)) { // Since right or middle button clicks won't trigger the `click` event, @@ -546,7 +536,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy } /** Handles key presses on the trigger. */ - @HostListener('keydown', ['$event']) _handleKeydown(event: KeyboardEvent): void { const keyCode = event.keyCode; @@ -566,7 +555,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy } /** Handles click events on the trigger. */ - @HostListener('click', ['$event']) _handleClick(event: MouseEvent): void { if (this.triggersSubmenu()) { // Stop event propagation to avoid closing the parent menu. diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts index fdd174498e3f..2989dbd1f697 100644 --- a/src/material/sidenav/drawer.ts +++ b/src/material/sidenav/drawer.ts @@ -41,8 +41,6 @@ import { QueryList, ViewChild, ViewEncapsulation, - HostListener, - HostBinding, } from '@angular/core'; import {fromEvent, merge, Observable, Subject} from 'rxjs'; import { @@ -142,6 +140,9 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit '[class.mat-drawer-side]': 'mode === "side"', '[class.mat-drawer-opened]': 'opened', 'tabIndex': '-1', + '[@transform]': '_animationState', + '(@transform.start)': '_animationStarted.next($event)', + '(@transform.done)': '_animationEnd.next($event)', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -244,11 +245,6 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr readonly _animationEnd = new Subject(); /** Current state of the sidenav animation. */ - // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator - // metadata is not inherited by child classes, instead the host binding data is defined in a way - // that can be inherited. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostBinding('@transform') _animationState: 'open-instant' | 'open' | 'void' = 'void'; /** Event emitted when the drawer open state is changed. */ @@ -566,26 +562,6 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr } } - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('@transform.start', ['$event']) - _animationStartListener(event: AnimationEvent) { - this._animationStarted.next(event); - } - - // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. - // In Ivy the `host` bindings will be merged when this class is extended, whereas in - // ViewEngine they're overwritten. - // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. - // tslint:disable-next-line:no-host-decorator-in-concrete - @HostListener('@transform.done', ['$event']) - _animationDoneListener(event: AnimationEvent) { - this._animationEnd.next(event); - } - static ngAcceptInputType_disableClose: BooleanInput; static ngAcceptInputType_autoFocus: AutoFocusTarget | string | BooleanInput; static ngAcceptInputType_opened: BooleanInput; diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts index e9c8eba25c95..ecec48805e84 100644 --- a/src/material/tree/node.ts +++ b/src/material/tree/node.ts @@ -17,7 +17,6 @@ import { AfterContentInit, Attribute, Directive, - DoCheck, ElementRef, Input, IterableDiffers, @@ -37,10 +36,13 @@ const _MatTreeNodeBase = mixinTabIndex(mixinDisabled(CdkTreeNode)); exportAs: 'matTreeNode', inputs: ['role', 'disabled', 'tabIndex'], providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}], + host: { + 'class': 'mat-tree-node', + }, }) export class MatTreeNode extends _MatTreeNodeBase - implements CanDisable, DoCheck, HasTabIndex, OnInit, OnDestroy + implements CanDisable, HasTabIndex, OnInit, OnDestroy { constructor( elementRef: ElementRef, @@ -48,13 +50,7 @@ export class MatTreeNode @Attribute('tabindex') tabIndex: string, ) { super(elementRef, tree); - this.tabIndex = Number(tabIndex) || 0; - // The classes are directly added here instead of in the host property because classes on - // the host property are not inherited with View Engine. It is not set as a @HostBinding because - // it is not set by the time it's children nodes try to read the class from it. - // TODO: move to host after View Engine deprecation - elementRef.nativeElement.classList.add('mat-tree-node'); } // This is a workaround for https://github.com/angular/angular/issues/23091 @@ -63,10 +59,6 @@ export class MatTreeNode super.ngOnInit(); } - override ngDoCheck() { - super.ngDoCheck(); - } - override ngOnDestroy() { super.ngOnDestroy(); } @@ -100,10 +92,13 @@ export class MatTreeNodeDef extends CdkTreeNodeDef { {provide: CdkTreeNode, useExisting: MatNestedTreeNode}, {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode}, ], + host: { + 'class': 'mat-nested-tree-node', + }, }) export class MatNestedTreeNode extends CdkNestedTreeNode - implements AfterContentInit, DoCheck, OnDestroy, OnInit + implements AfterContentInit, OnDestroy, OnInit { @Input('matNestedTreeNode') node: T; @@ -136,11 +131,6 @@ export class MatNestedTreeNode ) { super(elementRef, tree, differs); this.tabIndex = Number(tabIndex) || 0; - // The classes are directly added here instead of in the host property because classes on - // the host property are not inherited with View Engine. It is not set as a @HostBinding because - // it is not set by the time it's children nodes try to read the class from it. - // TODO: move to host after View Engine deprecation - elementRef.nativeElement.classList.add('mat-nested-tree-node'); } // This is a workaround for https://github.com/angular/angular/issues/19145 @@ -150,10 +140,6 @@ export class MatNestedTreeNode super.ngOnInit(); } - override ngDoCheck() { - super.ngDoCheck(); - } - override ngAfterContentInit() { super.ngAfterContentInit(); } diff --git a/src/material/tree/tree.ts b/src/material/tree/tree.ts index f87feb4d2c64..e546cac0b234 100644 --- a/src/material/tree/tree.ts +++ b/src/material/tree/tree.ts @@ -18,14 +18,7 @@ import {MatTreeNodeOutlet} from './outlet'; exportAs: 'matTree', template: ``, host: { - // The 'cdk-tree' class needs to be included here because classes set in the host in the - // parent class are not inherited with View Engine. The 'cdk-tree' class in CdkTreeNode has - // to be set in the host because: - // if it is set as a @HostBinding it is not set by the time the tree nodes try to read the - // class from it. - // the ElementRef is not available in the constructor so the class can't be applied directly - // without a breaking constructor change. - 'class': 'mat-tree cdk-tree', + 'class': 'mat-tree', 'role': 'tree', }, styleUrls: ['tree.css'], diff --git a/tools/public_api_guard/cdk/stepper.md b/tools/public_api_guard/cdk/stepper.md index e5731456d2ca..a94e3e2ad480 100644 --- a/tools/public_api_guard/cdk/stepper.md +++ b/tools/public_api_guard/cdk/stepper.md @@ -163,8 +163,6 @@ export class CdkStepperModule { export class CdkStepperNext { constructor(_stepper: CdkStepper); // (undocumented) - _handleClick(): void; - // (undocumented) _stepper: CdkStepper; type: string; // (undocumented) @@ -177,8 +175,6 @@ export class CdkStepperNext { export class CdkStepperPrevious { constructor(_stepper: CdkStepper); // (undocumented) - _handleClick(): void; - // (undocumented) _stepper: CdkStepper; type: string; // (undocumented) diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md index 652a6e73cabe..f264884d7790 100644 --- a/tools/public_api_guard/cdk/tree.md +++ b/tools/public_api_guard/cdk/tree.md @@ -12,7 +12,6 @@ import { ChangeDetectorRef } from '@angular/core'; import { CollectionViewer } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections'; import { Directionality } from '@angular/cdk/bidi'; -import { DoCheck } from '@angular/core'; import { ElementRef } from '@angular/core'; import { FocusableOption } from '@angular/cdk/a11y'; import * as i0 from '@angular/core'; @@ -56,7 +55,7 @@ export abstract class BaseTreeControl implements TreeControl { export const CDK_TREE_NODE_OUTLET_NODE: InjectionToken<{}>; // @public -export class CdkNestedTreeNode extends CdkTreeNode implements AfterContentInit, DoCheck, OnDestroy, OnInit { +export class CdkNestedTreeNode extends CdkTreeNode implements AfterContentInit, OnDestroy, OnInit { constructor(elementRef: ElementRef, tree: CdkTree, _differs: IterableDiffers); protected _children: T[]; protected _clear(): void; @@ -65,8 +64,6 @@ export class CdkNestedTreeNode extends CdkTreeNode implements Af // (undocumented) ngAfterContentInit(): void; // (undocumented) - ngDoCheck(): void; - // (undocumented) ngOnDestroy(): void; // (undocumented) ngOnInit(): void; @@ -118,7 +115,7 @@ export class CdkTreeModule { } // @public -export class CdkTreeNode implements DoCheck, FocusableOption, OnDestroy, OnInit { +export class CdkTreeNode implements FocusableOption, OnDestroy, OnInit { constructor(_elementRef: ElementRef, _tree: CdkTree); get data(): T; set data(value: T); @@ -130,15 +127,11 @@ export class CdkTreeNode implements DoCheck, FocusableOption, OnDestro protected _elementRef: ElementRef; focus(): void; // (undocumented) - protected _isAriaExpanded: boolean; - // (undocumented) get isExpanded(): boolean; // (undocumented) get level(): number; static mostRecentTreeNode: CdkTreeNode | null; // (undocumented) - ngDoCheck(): void; - // (undocumented) ngOnDestroy(): void; // (undocumented) ngOnInit(): void; diff --git a/tools/public_api_guard/material/menu.md b/tools/public_api_guard/material/menu.md index 2a53f47f5303..31286c5d44c9 100644 --- a/tools/public_api_guard/material/menu.md +++ b/tools/public_api_guard/material/menu.md @@ -288,12 +288,6 @@ export class MatMenuTrigger extends _MatMenuTriggerBase { // @public (undocumented) export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy { constructor(_overlay: Overlay, _element: ElementRef, _viewContainerRef: ViewContainerRef, scrollStrategy: any, parentMenu: MatMenuPanel, _menuItemInstance: MatMenuItem, _dir: Directionality, _focusMonitor?: FocusMonitor | undefined); - // (undocumented) - get _ariaControl(): string | null | undefined; - // (undocumented) - get _ariaExpanded(): true | null; - // (undocumented) - _ariaHaspopup: boolean; closeMenu(): void; // @deprecated (undocumented) get _deprecatedMatMenuTriggerFor(): MatMenuPanel; diff --git a/tools/public_api_guard/material/sidenav.md b/tools/public_api_guard/material/sidenav.md index b1cf9df053e6..29e5b2a47cf2 100644 --- a/tools/public_api_guard/material/sidenav.md +++ b/tools/public_api_guard/material/sidenav.md @@ -50,12 +50,8 @@ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean; // @public export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestroy { constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _interactivityChecker: InteractivityChecker, _doc: any, _container?: MatDrawerContainer | undefined); - // (undocumented) - _animationDoneListener(event: AnimationEvent_2): void; readonly _animationEnd: Subject; readonly _animationStarted: Subject; - // (undocumented) - _animationStartListener(event: AnimationEvent_2): void; _animationState: 'open-instant' | 'open' | 'void'; get autoFocus(): AutoFocusTarget | string | boolean; set autoFocus(value: AutoFocusTarget | string | boolean); diff --git a/tools/public_api_guard/material/tree.md b/tools/public_api_guard/material/tree.md index 1f4149934c5e..10b51b166c38 100644 --- a/tools/public_api_guard/material/tree.md +++ b/tools/public_api_guard/material/tree.md @@ -18,7 +18,6 @@ import { CdkTreeNodeToggle } from '@angular/cdk/tree'; import { CollectionViewer } from '@angular/cdk/collections'; import { _Constructor } from '@angular/material/core'; import { DataSource } from '@angular/cdk/collections'; -import { DoCheck } from '@angular/core'; import { ElementRef } from '@angular/core'; import { FlatTreeControl } from '@angular/cdk/tree'; import { HasTabIndex } from '@angular/material/core'; @@ -34,7 +33,7 @@ import { TreeControl } from '@angular/cdk/tree'; import { ViewContainerRef } from '@angular/core'; // @public -export class MatNestedTreeNode extends CdkNestedTreeNode implements AfterContentInit, DoCheck, OnDestroy, OnInit { +export class MatNestedTreeNode extends CdkNestedTreeNode implements AfterContentInit, OnDestroy, OnInit { constructor(elementRef: ElementRef, tree: CdkTree, differs: IterableDiffers, tabIndex: string); get disabled(): any; set disabled(value: any); @@ -43,8 +42,6 @@ export class MatNestedTreeNode extends CdkNestedTreeNode impleme // (undocumented) ngAfterContentInit(): void; // (undocumented) - ngDoCheck(): void; - // (undocumented) ngOnDestroy(): void; // (undocumented) ngOnInit(): void; @@ -120,15 +117,13 @@ export class MatTreeNestedDataSource extends DataSource { } // @public -export class MatTreeNode extends _MatTreeNodeBase implements CanDisable, DoCheck, HasTabIndex, OnInit, OnDestroy { +export class MatTreeNode extends _MatTreeNodeBase implements CanDisable, HasTabIndex, OnInit, OnDestroy { constructor(elementRef: ElementRef, tree: CdkTree, tabIndex: string); // (undocumented) static ngAcceptInputType_disabled: BooleanInput; // (undocumented) static ngAcceptInputType_tabIndex: NumberInput; // (undocumented) - ngDoCheck(): void; - // (undocumented) ngOnDestroy(): void; // (undocumented) ngOnInit(): void;