feature(material-experimental/chips) Add grid keyboard shortcuts #16384
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| import { | ||
| ChangeDetectorRef, | ||
| Directive, | ||
| ElementRef, | ||
| } from '@angular/core'; | ||
| import { | ||
| CanDisable, | ||
| CanDisableCtor, | ||
| HasTabIndex, | ||
| HasTabIndexCtor, | ||
| mixinDisabled, | ||
| mixinTabIndex, | ||
| } from '@angular/material/core'; | ||
| import {Subject} from 'rxjs'; | ||
|
|
||
|
|
||
| /** | ||
| * Directive to add CSS classes to chip leading icon. | ||
| * @docs-private | ||
| */ | ||
| @Directive({ | ||
| selector: 'mat-chip-avatar, [matChipAvatar]', | ||
| host: { | ||
| 'class': 'mat-mdc-chip-avatar mdc-chip__icon mdc-chip__icon--leading', | ||
| 'role': 'img' | ||
| } | ||
| }) | ||
| export class MatChipAvatar { | ||
| constructor(private _changeDetectorRef: ChangeDetectorRef, | ||
| private _elementRef: ElementRef) {} | ||
|
|
||
| /** Sets whether the given CSS class should be applied to the leading icon. */ | ||
| setClass(cssClass: string, active: boolean) { | ||
| const element = this._elementRef.nativeElement; | ||
| active ? element.addClass(cssClass) : element.removeClass(cssClass); | ||
mmalerba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| this._changeDetectorRef.markForCheck(); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Directive to add CSS classes to and configure attributes for chip trailing icon. | ||
| * @docs-private | ||
| */ | ||
| @Directive({ | ||
| selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]', | ||
| host: { | ||
| 'class': 'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing', | ||
| 'tabindex': '-1', | ||
| 'aria-hidden': 'true', | ||
| } | ||
| }) | ||
| export class MatChipTrailingIcon { | ||
| } | ||
|
|
||
| /** | ||
| * Boilerplate for applying mixins to MatChipRemove. | ||
| * @docs-private | ||
| */ | ||
| class MatChipRemoveBase extends MatChipTrailingIcon { | ||
| constructor(public _elementRef: ElementRef) { | ||
| super(); | ||
| } | ||
| } | ||
|
|
||
| const _MatChipRemoveMixinBase: | ||
| CanDisableCtor & | ||
| HasTabIndexCtor & | ||
| typeof MatChipRemoveBase = | ||
| mixinTabIndex(mixinDisabled(MatChipRemoveBase)); | ||
|
|
||
| /** | ||
| * Directive to remove the parent chip when the trailing icon is clicked or | ||
| * when the ENTER key is pressed on it. | ||
| * | ||
| * Recommended for use with the Material Design "cancel" icon | ||
| * available at https://material.io/icons/#ic_cancel. | ||
| * | ||
| * Example: | ||
| * | ||
| * `<mat-chip> | ||
| * <mat-icon matChipRemove>cancel</mat-icon> | ||
|
There was a problem hiding this comment. I just noticed this example (copied from the old implementation) is wrong. The element should be a button. There was a problem hiding this comment. The mat-icon element should be a button? This example matches the demo, which seems to work well: https://github.com/angular/components/blob/master/src/dev-app/chips/chips-demo.html#L47 I did put 'role': 'button' on the host element for matChipRemove: There was a problem hiding this comment. Adding the role also works, it's just a style thing. We typically tell people to do <button mat-icon-button aria-label="...">
<mat-icon>...</mat-icon>
</button>rather than putting click handlers on icons directly; it's mostly about setting a good example There was a problem hiding this comment. That makes sense! The mdc classes right now don't play nicely with mat-icon-button. Can I fix this in a follow up PR? @jelbourn |
||
| * </mat-chip>` | ||
| */ | ||
| @Directive({ | ||
| selector: '[matChipRemove]', | ||
| inputs: ['disabled', 'tabIndex'], | ||
| host: { | ||
| 'class': 'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing', | ||
| '[tabIndex]': 'tabIndex', | ||
| 'role': 'button', | ||
| '(click)': 'interaction.next($event)', | ||
| '(keydown)': 'interaction.next($event)', | ||
| } | ||
| }) | ||
| export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex { | ||
| /** | ||
| * Emits when the user interacts with the icon. | ||
| * @docs-private | ||
| */ | ||
| interaction: Subject<MouseEvent | KeyboardEvent> = new Subject<MouseEvent | KeyboardEvent>(); | ||
|
|
||
| constructor(_elementRef: ElementRef) { | ||
| super(_elementRef); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.