src/material/chips/chip-icons.ts - main - githubmirror/components

src/material/chips/chip-icons.ts
134 строки4 KB
Matthieu Riegler
Set generic on some `InjectionToken`. (#32753)
04 апр 2026, 09:10
04 апр 2026, 09:108d5a896
/**
 * @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.dev/license
 */

import {ENTER, SPACE} from '@angular/cdk/keycodes';
import {Directive} from '@angular/core';
import {MatChipAction, MatChipContent} from './chip-action';
import {MAT_CHIP_AVATAR, MAT_CHIP_EDIT, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';

/** Avatar image within a chip. */
@Directive({
  selector: 'mat-chip-avatar, [matChipAvatar]',
  host: {
    'class': 'mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
    'role': 'img',
  },
  providers: [{provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar}],
})
export class MatChipAvatar {}

/** Non-interactive trailing icon in a chip. */
@Directive({
  selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
  host: {
    'class':
      'mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
    'aria-hidden': 'true',
  },
  providers: [{provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon}],
})
export class MatChipTrailingIcon extends MatChipContent {
  override _isPrimary = false;
}

/**
 * Directive to edit the parent chip when the leading action icon is clicked or
 * when the ENTER key is pressed on it.
 *
 * Recommended for use with the Material Design "edit" icon
 * available at https://material.io/icons/#ic_edit.
 *
 * Example:
 *
 * ```
 * <mat-chip>
 *   <button matChipEdit aria-label="Edit">
 *     <mat-icon>edit</mat-icon>
 *   </button>
 * </mat-chip>
 * ```
 */

@Directive({
  selector: '[matChipEdit]',
  host: {
    'class':
      'mat-mdc-chip-edit mat-mdc-chip-avatar mat-focus-indicator ' +
      'mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
    'role': 'button',
    '[attr.aria-hidden]': 'null',
  },
  providers: [{provide: MAT_CHIP_EDIT, useExisting: MatChipEdit}],
})
export class MatChipEdit extends MatChipAction {
  override _isPrimary = false;
  override _isLeading = true;

  override _handleClick(event: MouseEvent): void {
    if (!this.disabled) {
      event.stopPropagation();
      event.preventDefault();
      this._parentChip._edit(event);
    }
  }

  override _handleKeydown(event: KeyboardEvent) {
    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
      event.stopPropagation();
      event.preventDefault();
      this._parentChip._edit(event);
    }
  }
}

/**
 * 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>
 * </mat-chip>
 * ```
 */

@Directive({
  selector: '[matChipRemove]',
  host: {
    'class':
      'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-focus-indicator ' +
      'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
    'role': 'button',
    '[attr.aria-hidden]': 'null',
  },
  providers: [{provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove}],
})
export class MatChipRemove extends MatChipAction {
  override _isPrimary = false;

  override _handleClick(event: MouseEvent): void {
    if (!this.disabled) {
      event.stopPropagation();
      event.preventDefault();
      this._parentChip.remove();
    }
  }

  override _handleKeydown(event: KeyboardEvent) {
    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
      event.stopPropagation();
      event.preventDefault();
      this._parentChip.remove();
    }
  }
}