index.d.ts 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907
  1. import * as i0 from '@angular/core';
  2. import { ElementRef, OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy, ChangeDetectorRef, NgZone, QueryList, EventEmitter, Injector, OnChanges, InjectionToken } from '@angular/core';
  3. import { Subject, Observable } from 'rxjs';
  4. import { FocusKeyManager } from '@angular/cdk/a11y';
  5. import { ControlValueAccessor, NgControl } from '@angular/forms';
  6. import { E as ErrorStateMatcher } from '../error-options.d-CGdTZUYk.js';
  7. import { M as MatFormFieldControl } from '../form-field-control.d-QxD-9xJ3.js';
  8. import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
  9. import { M as MatRippleModule } from '../index.d-DG9eDM2-.js';
  10. import '@angular/cdk/bidi';
  11. import '../ripple.d-BxTUZJt7.js';
  12. import '@angular/cdk/platform';
  13. /**
  14. * Section within a chip.
  15. * @docs-private
  16. */
  17. declare class MatChipAction {
  18. _elementRef: ElementRef<HTMLElement>;
  19. protected _parentChip: {
  20. _handlePrimaryActionInteraction(): void;
  21. remove(): void;
  22. disabled: boolean;
  23. _isEditing?: boolean;
  24. };
  25. /** Whether the action is interactive. */
  26. isInteractive: boolean;
  27. /** Whether this is the primary action in the chip. */
  28. _isPrimary: boolean;
  29. /** Whether the action is disabled. */
  30. get disabled(): boolean;
  31. set disabled(value: boolean);
  32. private _disabled;
  33. /** Tab index of the action. */
  34. tabIndex: number;
  35. /**
  36. * Private API to allow focusing this chip when it is disabled.
  37. */
  38. private _allowFocusWhenDisabled;
  39. /**
  40. * Determine the value of the disabled attribute for this chip action.
  41. */
  42. protected _getDisabledAttribute(): string | null;
  43. /**
  44. * Determine the value of the tabindex attribute for this chip action.
  45. */
  46. protected _getTabindex(): string | null;
  47. constructor(...args: unknown[]);
  48. focus(): void;
  49. _handleClick(event: MouseEvent): void;
  50. _handleKeydown(event: KeyboardEvent): void;
  51. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
  52. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "isInteractive": { "alias": "isInteractive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
  53. static ngAcceptInputType_disabled: unknown;
  54. static ngAcceptInputType_tabIndex: unknown;
  55. }
  56. /** Avatar image within a chip. */
  57. declare class MatChipAvatar {
  58. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAvatar, never>;
  59. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never, never, true, never>;
  60. }
  61. /** Non-interactive trailing icon in a chip. */
  62. declare class MatChipTrailingIcon extends MatChipAction {
  63. /**
  64. * MDC considers all trailing actions as a remove icon,
  65. * but we support non-interactive trailing icons.
  66. */
  67. isInteractive: boolean;
  68. _isPrimary: boolean;
  69. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
  70. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, true, never>;
  71. }
  72. /**
  73. * Directive to remove the parent chip when the trailing icon is clicked or
  74. * when the ENTER key is pressed on it.
  75. *
  76. * Recommended for use with the Material Design "cancel" icon
  77. * available at https://material.io/icons/#ic_cancel.
  78. *
  79. * Example:
  80. *
  81. * ```
  82. * <mat-chip>
  83. * <mat-icon matChipRemove>cancel</mat-icon>
  84. * </mat-chip>
  85. * ```
  86. */
  87. declare class MatChipRemove extends MatChipAction {
  88. _isPrimary: boolean;
  89. _handleClick(event: MouseEvent): void;
  90. _handleKeydown(event: KeyboardEvent): void;
  91. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRemove, never>;
  92. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipRemove, "[matChipRemove]", never, {}, {}, never, never, true, never>;
  93. }
  94. /** Represents an event fired on an individual `mat-chip`. */
  95. interface MatChipEvent {
  96. /** The chip the event was fired on. */
  97. chip: MatChip;
  98. }
  99. /**
  100. * Material design styled Chip base component. Used inside the MatChipSet component.
  101. *
  102. * Extended by MatChipOption and MatChipRow for different interaction patterns.
  103. */
  104. declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
  105. _changeDetectorRef: ChangeDetectorRef;
  106. _elementRef: ElementRef<HTMLElement>;
  107. protected _ngZone: NgZone;
  108. private _focusMonitor;
  109. private _globalRippleOptions;
  110. protected _document: Document;
  111. /** Emits when the chip is focused. */
  112. readonly _onFocus: Subject<MatChipEvent>;
  113. /** Emits when the chip is blurred. */
  114. readonly _onBlur: Subject<MatChipEvent>;
  115. /** Whether this chip is a basic (unstyled) chip. */
  116. _isBasicChip: boolean;
  117. /** Role for the root of the chip. */
  118. role: string | null;
  119. /** Whether the chip has focus. */
  120. private _hasFocusInternal;
  121. /** Whether moving focus into the chip is pending. */
  122. private _pendingFocus;
  123. /** Subscription to changes in the chip's actions. */
  124. private _actionChanges;
  125. /** Whether animations for the chip are enabled. */
  126. _animationsDisabled: boolean;
  127. /** All avatars present in the chip. */
  128. protected _allLeadingIcons: QueryList<MatChipAvatar>;
  129. /** All trailing icons present in the chip. */
  130. protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
  131. /** All remove icons present in the chip. */
  132. protected _allRemoveIcons: QueryList<MatChipRemove>;
  133. _hasFocus(): boolean;
  134. /** A unique id for the chip. If none is supplied, it will be auto-generated. */
  135. id: string;
  136. /** ARIA label for the content of the chip. */
  137. ariaLabel: string | null;
  138. /** ARIA description for the content of the chip. */
  139. ariaDescription: string | null;
  140. /** Id of a span that contains this chip's aria description. */
  141. _ariaDescriptionId: string;
  142. /** Whether the chip list is disabled. */
  143. _chipListDisabled: boolean;
  144. private _textElement;
  145. /**
  146. * The value of the chip. Defaults to the content inside
  147. * the `mat-mdc-chip-action-label` element.
  148. */
  149. get value(): any;
  150. set value(value: any);
  151. protected _value: any;
  152. /**
  153. * Theme color of the chip. This API is supported in M2 themes only, it has no
  154. * effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling.
  155. *
  156. * For information on applying color variants in M3, see
  157. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  158. */
  159. color?: string | null;
  160. /**
  161. * Determines whether or not the chip displays the remove styling and emits (removed) events.
  162. */
  163. removable: boolean;
  164. /**
  165. * Colors the chip for emphasis as if it were selected.
  166. */
  167. highlighted: boolean;
  168. /** Whether the ripple effect is disabled or not. */
  169. disableRipple: boolean;
  170. /** Whether the chip is disabled. */
  171. get disabled(): boolean;
  172. set disabled(value: boolean);
  173. private _disabled;
  174. /** Emitted when a chip is to be removed. */
  175. readonly removed: EventEmitter<MatChipEvent>;
  176. /** Emitted when the chip is destroyed. */
  177. readonly destroyed: EventEmitter<MatChipEvent>;
  178. /** The unstyled chip selector for this component. */
  179. protected basicChipAttrName: string;
  180. /** The chip's leading icon. */
  181. leadingIcon: MatChipAvatar;
  182. /** The chip's trailing icon. */
  183. trailingIcon: MatChipTrailingIcon;
  184. /** The chip's trailing remove icon. */
  185. removeIcon: MatChipRemove;
  186. /** Action receiving the primary set of user interactions. */
  187. primaryAction: MatChipAction;
  188. /**
  189. * Handles the lazy creation of the MatChip ripple.
  190. * Used to improve initial load time of large applications.
  191. */
  192. private _rippleLoader;
  193. protected _injector: Injector;
  194. constructor(...args: unknown[]);
  195. ngOnInit(): void;
  196. ngAfterViewInit(): void;
  197. ngAfterContentInit(): void;
  198. ngDoCheck(): void;
  199. ngOnDestroy(): void;
  200. /**
  201. * Allows for programmatic removal of the chip.
  202. *
  203. * Informs any listeners of the removal request. Does not remove the chip from the DOM.
  204. */
  205. remove(): void;
  206. /** Whether or not the ripple should be disabled. */
  207. _isRippleDisabled(): boolean;
  208. /** Returns whether the chip has a trailing icon. */
  209. _hasTrailingIcon(): boolean;
  210. /** Handles keyboard events on the chip. */
  211. _handleKeydown(event: KeyboardEvent): void;
  212. /** Allows for programmatic focusing of the chip. */
  213. focus(): void;
  214. /** Gets the action that contains a specific target node. */
  215. _getSourceAction(target: Node): MatChipAction | undefined;
  216. /** Gets all of the actions within the chip. */
  217. _getActions(): MatChipAction[];
  218. /** Handles interactions with the primary action of the chip. */
  219. _handlePrimaryActionInteraction(): void;
  220. /** Starts the focus monitoring process on the chip. */
  221. private _monitorFocus;
  222. static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, never>;
  223. static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
  224. static ngAcceptInputType_removable: unknown;
  225. static ngAcceptInputType_highlighted: unknown;
  226. static ngAcceptInputType_disableRipple: unknown;
  227. static ngAcceptInputType_disabled: unknown;
  228. }
  229. /** Event object emitted by MatChipOption when selected or deselected. */
  230. declare class MatChipSelectionChange {
  231. /** Reference to the chip that emitted the event. */
  232. source: MatChipOption;
  233. /** Whether the chip that emitted the event is selected. */
  234. selected: boolean;
  235. /** Whether the selection change was a result of a user interaction. */
  236. isUserInput: boolean;
  237. constructor(
  238. /** Reference to the chip that emitted the event. */
  239. source: MatChipOption,
  240. /** Whether the chip that emitted the event is selected. */
  241. selected: boolean,
  242. /** Whether the selection change was a result of a user interaction. */
  243. isUserInput?: boolean);
  244. }
  245. /**
  246. * An extension of the MatChip component that supports chip selection. Used with MatChipListbox.
  247. *
  248. * Unlike other chips, the user can focus on disabled chip options inside a MatChipListbox. The
  249. * user cannot click disabled chips.
  250. */
  251. declare class MatChipOption extends MatChip implements OnInit {
  252. /** Default chip options. */
  253. private _defaultOptions;
  254. /** Whether the chip list is selectable. */
  255. chipListSelectable: boolean;
  256. /** Whether the chip list is in multi-selection mode. */
  257. _chipListMultiple: boolean;
  258. /** Whether the chip list hides single-selection indicator. */
  259. _chipListHideSingleSelectionIndicator: boolean;
  260. /**
  261. * Whether or not the chip is selectable.
  262. *
  263. * When a chip is not selectable, changes to its selected state are always
  264. * ignored. By default an option chip is selectable, and it becomes
  265. * non-selectable if its parent chip list is not selectable.
  266. */
  267. get selectable(): boolean;
  268. set selectable(value: boolean);
  269. protected _selectable: boolean;
  270. /** Whether the chip is selected. */
  271. get selected(): boolean;
  272. set selected(value: boolean);
  273. private _selected;
  274. /**
  275. * The ARIA selected applied to the chip. Conforms to WAI ARIA best practices for listbox
  276. * interaction patterns.
  277. *
  278. * From [WAI ARIA Listbox authoring practices guide](
  279. * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/):
  280. * "If any options are selected, each selected option has either aria-selected or aria-checked
  281. * set to true. All options that are selectable but not selected have either aria-selected or
  282. * aria-checked set to false."
  283. *
  284. * Set `aria-selected="false"` on not-selected listbox options that are selectable to fix
  285. * VoiceOver reading every option as "selected" (#25736).
  286. */
  287. get ariaSelected(): string | null;
  288. /** The unstyled chip selector for this component. */
  289. protected basicChipAttrName: string;
  290. /** Emitted when the chip is selected or deselected. */
  291. readonly selectionChange: EventEmitter<MatChipSelectionChange>;
  292. ngOnInit(): void;
  293. /** Selects the chip. */
  294. select(): void;
  295. /** Deselects the chip. */
  296. deselect(): void;
  297. /** Selects this chip and emits userInputSelection event */
  298. selectViaInteraction(): void;
  299. /** Toggles the current selected state of this chip. */
  300. toggleSelected(isUserInput?: boolean): boolean;
  301. _handlePrimaryActionInteraction(): void;
  302. _hasLeadingGraphic(): boolean;
  303. _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean): void;
  304. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipOption, never>;
  305. static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", never, { "selectable": { "alias": "selectable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
  306. static ngAcceptInputType_selectable: unknown;
  307. static ngAcceptInputType_selected: unknown;
  308. }
  309. /**
  310. * A directive that makes a span editable and exposes functions to modify and retrieve the
  311. * element's contents.
  312. */
  313. declare class MatChipEditInput {
  314. private readonly _elementRef;
  315. private readonly _document;
  316. constructor(...args: unknown[]);
  317. initialize(initialValue: string): void;
  318. getNativeElement(): HTMLElement;
  319. setValue(value: string): void;
  320. getValue(): string;
  321. private _moveCursorToEndOfInput;
  322. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipEditInput, never>;
  323. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipEditInput, "span[matChipEditInput]", never, {}, {}, never, never, true, never>;
  324. }
  325. /** Represents an event fired on an individual `mat-chip` when it is edited. */
  326. interface MatChipEditedEvent extends MatChipEvent {
  327. /** The final edit value. */
  328. value: string;
  329. }
  330. /**
  331. * An extension of the MatChip component used with MatChipGrid and
  332. * the matChipInputFor directive.
  333. */
  334. declare class MatChipRow extends MatChip implements AfterViewInit {
  335. protected basicChipAttrName: string;
  336. /**
  337. * The editing action has to be triggered in a timeout. While we're waiting on it, a blur
  338. * event might occur which will interrupt the editing. This flag is used to avoid interruptions
  339. * while the editing action is being initialized.
  340. */
  341. private _editStartPending;
  342. editable: boolean;
  343. /** Emitted when the chip is edited. */
  344. readonly edited: EventEmitter<MatChipEditedEvent>;
  345. /** The default chip edit input that is used if none is projected into this chip row. */
  346. defaultEditInput?: MatChipEditInput;
  347. /** The projected chip edit input. */
  348. contentEditInput?: MatChipEditInput;
  349. _isEditing: boolean;
  350. constructor(...args: unknown[]);
  351. _hasTrailingIcon(): boolean;
  352. /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
  353. _handleFocus(): void;
  354. _handleKeydown(event: KeyboardEvent): void;
  355. _handleDoubleclick(event: MouseEvent): void;
  356. private _startEditing;
  357. private _onEditFinish;
  358. _isRippleDisabled(): boolean;
  359. /**
  360. * Gets the projected chip edit input, or the default input if none is projected in. One of these
  361. * two values is guaranteed to be defined.
  362. */
  363. private _getEditInput;
  364. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;
  365. static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
  366. }
  367. /**
  368. * Basic container component for the MatChip component.
  369. *
  370. * Extended by MatChipListbox and MatChipGrid for different interaction patterns.
  371. */
  372. declare class MatChipSet implements AfterViewInit, OnDestroy {
  373. protected _elementRef: ElementRef<HTMLElement>;
  374. protected _changeDetectorRef: ChangeDetectorRef;
  375. private _dir;
  376. /** Index of the last destroyed chip that had focus. */
  377. private _lastDestroyedFocusedChipIndex;
  378. /** Used to manage focus within the chip list. */
  379. protected _keyManager: FocusKeyManager<MatChipAction>;
  380. /** Subject that emits when the component has been destroyed. */
  381. protected _destroyed: Subject<void>;
  382. /** Role to use if it hasn't been overwritten by the user. */
  383. protected _defaultRole: string;
  384. /** Combined stream of all of the child chips' focus events. */
  385. get chipFocusChanges(): Observable<MatChipEvent>;
  386. /** Combined stream of all of the child chips' destroy events. */
  387. get chipDestroyedChanges(): Observable<MatChipEvent>;
  388. /** Combined stream of all of the child chips' remove events. */
  389. get chipRemovedChanges(): Observable<MatChipEvent>;
  390. /** Whether the chip set is disabled. */
  391. get disabled(): boolean;
  392. set disabled(value: boolean);
  393. protected _disabled: boolean;
  394. /** Whether the chip list contains chips or not. */
  395. get empty(): boolean;
  396. /** The ARIA role applied to the chip set. */
  397. get role(): string | null;
  398. /** Tabindex of the chip set. */
  399. tabIndex: number;
  400. set role(value: string | null);
  401. private _explicitRole;
  402. /** Whether any of the chips inside of this chip-set has focus. */
  403. get focused(): boolean;
  404. /** The chips that are part of this chip set. */
  405. _chips: QueryList<MatChip>;
  406. /** Flat list of all the actions contained within the chips. */
  407. _chipActions: QueryList<MatChipAction>;
  408. constructor(...args: unknown[]);
  409. ngAfterViewInit(): void;
  410. ngOnDestroy(): void;
  411. /** Checks whether any of the chips is focused. */
  412. protected _hasFocusedChip(): boolean;
  413. /** Syncs the chip-set's state with the individual chips. */
  414. protected _syncChipsState(): void;
  415. /** Dummy method for subclasses to override. Base chip set cannot be focused. */
  416. focus(): void;
  417. /** Handles keyboard events on the chip set. */
  418. _handleKeydown(event: KeyboardEvent): void;
  419. /**
  420. * Utility to ensure all indexes are valid.
  421. *
  422. * @param index The index to be checked.
  423. * @returns True if the index is valid for our list of chips.
  424. */
  425. protected _isValidIndex(index: number): boolean;
  426. /**
  427. * Removes the `tabindex` from the chip set and resets it back afterwards, allowing the
  428. * user to tab out of it. This prevents the set from capturing focus and redirecting
  429. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  430. */
  431. protected _allowFocusEscape(): void;
  432. /**
  433. * Gets a stream of events from all the chips within the set.
  434. * The stream will automatically incorporate any newly-added chips.
  435. */
  436. protected _getChipStream<T, C extends MatChip = MatChip>(mappingFunction: (chip: C) => Observable<T>): Observable<T>;
  437. /** Checks whether an event comes from inside a chip element. */
  438. protected _originatesFromChip(event: Event): boolean;
  439. /** Sets up the chip set's focus management logic. */
  440. private _setUpFocusManagement;
  441. /**
  442. * Determines if key manager should avoid putting a given chip action in the tab index. Skip
  443. * non-interactive and disabled actions since the user can't do anything with them.
  444. */
  445. protected _skipPredicate(action: MatChipAction): boolean;
  446. /** Listens to changes in the chip set and syncs up the state of the individual chips. */
  447. private _trackChipSetChanges;
  448. /** Starts tracking the destroyed chips in order to capture the focused one. */
  449. private _trackDestroyedFocusedChip;
  450. /**
  451. * Finds the next appropriate chip to move focus to,
  452. * if the currently-focused chip is destroyed.
  453. */
  454. private _redirectDestroyedChipFocus;
  455. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, never>;
  456. static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["_chips"], ["*"], true, never>;
  457. static ngAcceptInputType_disabled: unknown;
  458. static ngAcceptInputType_tabIndex: unknown;
  459. }
  460. /** Change event object that is emitted when the chip listbox value has changed. */
  461. declare class MatChipListboxChange {
  462. /** Chip listbox that emitted the event. */
  463. source: MatChipListbox;
  464. /** Value of the chip listbox when the event was emitted. */
  465. value: any;
  466. constructor(
  467. /** Chip listbox that emitted the event. */
  468. source: MatChipListbox,
  469. /** Value of the chip listbox when the event was emitted. */
  470. value: any);
  471. }
  472. /**
  473. * Provider Expression that allows mat-chip-listbox to register as a ControlValueAccessor.
  474. * This allows it to support [(ngModel)].
  475. * @docs-private
  476. */
  477. declare const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any;
  478. /**
  479. * An extension of the MatChipSet component that supports chip selection.
  480. * Used with MatChipOption chips.
  481. */
  482. declare class MatChipListbox extends MatChipSet implements AfterContentInit, OnDestroy, ControlValueAccessor {
  483. /**
  484. * Function when touched. Set as part of ControlValueAccessor implementation.
  485. * @docs-private
  486. */
  487. _onTouched: () => void;
  488. /**
  489. * Function when changed. Set as part of ControlValueAccessor implementation.
  490. * @docs-private
  491. */
  492. _onChange: (value: any) => void;
  493. protected _defaultRole: string;
  494. /** Default chip options. */
  495. private _defaultOptions;
  496. /** Whether the user should be allowed to select multiple chips. */
  497. get multiple(): boolean;
  498. set multiple(value: boolean);
  499. private _multiple;
  500. /** The array of selected chips inside the chip listbox. */
  501. get selected(): MatChipOption[] | MatChipOption;
  502. /** Orientation of the chip list. */
  503. ariaOrientation: 'horizontal' | 'vertical';
  504. /**
  505. * Whether or not this chip listbox is selectable.
  506. *
  507. * When a chip listbox is not selectable, the selected states for all
  508. * the chips inside the chip listbox are always ignored.
  509. */
  510. get selectable(): boolean;
  511. set selectable(value: boolean);
  512. protected _selectable: boolean;
  513. /**
  514. * A function to compare the option values with the selected values. The first argument
  515. * is a value from an option. The second is a value from the selection. A boolean
  516. * should be returned.
  517. */
  518. compareWith: (o1: any, o2: any) => boolean;
  519. /** Whether this chip listbox is required. */
  520. required: boolean;
  521. /** Whether checkmark indicator for single-selection options is hidden. */
  522. get hideSingleSelectionIndicator(): boolean;
  523. set hideSingleSelectionIndicator(value: boolean);
  524. private _hideSingleSelectionIndicator;
  525. /** Combined stream of all of the child chips' selection change events. */
  526. get chipSelectionChanges(): Observable<MatChipSelectionChange>;
  527. /** Combined stream of all of the child chips' blur events. */
  528. get chipBlurChanges(): Observable<MatChipEvent>;
  529. /** The value of the listbox, which is the combined value of the selected chips. */
  530. get value(): any;
  531. set value(value: any);
  532. protected _value: any;
  533. /** Event emitted when the selected chip listbox value has been changed by the user. */
  534. readonly change: EventEmitter<MatChipListboxChange>;
  535. _chips: QueryList<MatChipOption>;
  536. ngAfterContentInit(): void;
  537. /**
  538. * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
  539. * are no selected chips.
  540. */
  541. focus(): void;
  542. /**
  543. * Implemented as part of ControlValueAccessor.
  544. * @docs-private
  545. */
  546. writeValue(value: any): void;
  547. /**
  548. * Implemented as part of ControlValueAccessor.
  549. * @docs-private
  550. */
  551. registerOnChange(fn: (value: any) => void): void;
  552. /**
  553. * Implemented as part of ControlValueAccessor.
  554. * @docs-private
  555. */
  556. registerOnTouched(fn: () => void): void;
  557. /**
  558. * Implemented as part of ControlValueAccessor.
  559. * @docs-private
  560. */
  561. setDisabledState(isDisabled: boolean): void;
  562. /** Selects all chips with value. */
  563. _setSelectionByValue(value: any, isUserInput?: boolean): void;
  564. /** When blurred, marks the field as touched when focus moved outside the chip listbox. */
  565. _blur(): void;
  566. _keydown(event: KeyboardEvent): void;
  567. /** Marks the field as touched */
  568. private _markAsTouched;
  569. /** Emits change event to set the model value. */
  570. private _propagateChanges;
  571. /**
  572. * Deselects every chip in the listbox.
  573. * @param skip Chip that should not be deselected.
  574. */
  575. private _clearSelection;
  576. /**
  577. * Finds and selects the chip based on its value.
  578. * @returns Chip that has the corresponding value.
  579. */
  580. private _selectValue;
  581. /** Syncs the chip-listbox selection state with the individual chips. */
  582. private _syncListboxProperties;
  583. /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
  584. private _getFirstSelectedChip;
  585. /**
  586. * Determines if key manager should avoid putting a given chip action in the tab index. Skip
  587. * non-interactive actions since the user can't do anything with them.
  588. */
  589. protected _skipPredicate(action: MatChipAction): boolean;
  590. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, never>;
  591. static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "multiple": { "alias": "multiple"; "required": false; }; "ariaOrientation": { "alias": "aria-orientation"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["_chips"], ["*"], true, never>;
  592. static ngAcceptInputType_multiple: unknown;
  593. static ngAcceptInputType_selectable: unknown;
  594. static ngAcceptInputType_required: unknown;
  595. static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
  596. }
  597. /** Interface for a text control that is used to drive interaction with a mat-chip-list. */
  598. interface MatChipTextControl {
  599. /** Unique identifier for the text control. */
  600. id: string;
  601. /** The text control's placeholder text. */
  602. placeholder: string;
  603. /** Whether the text control has browser focus. */
  604. focused: boolean;
  605. /** Whether the text control is empty. */
  606. empty: boolean;
  607. /** Focuses the text control. */
  608. focus(): void;
  609. /** Sets the list of ids the input is described by. */
  610. setDescribedByIds(ids: string[]): void;
  611. }
  612. /** Change event object that is emitted when the chip grid value has changed. */
  613. declare class MatChipGridChange {
  614. /** Chip grid that emitted the event. */
  615. source: MatChipGrid;
  616. /** Value of the chip grid when the event was emitted. */
  617. value: any;
  618. constructor(
  619. /** Chip grid that emitted the event. */
  620. source: MatChipGrid,
  621. /** Value of the chip grid when the event was emitted. */
  622. value: any);
  623. }
  624. /**
  625. * An extension of the MatChipSet component used with MatChipRow chips and
  626. * the matChipInputFor directive.
  627. */
  628. declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy {
  629. ngControl: NgControl;
  630. /**
  631. * Implemented as part of MatFormFieldControl.
  632. * @docs-private
  633. */
  634. readonly controlType: string;
  635. /** The chip input to add more chips */
  636. protected _chipInput: MatChipTextControl;
  637. protected _defaultRole: string;
  638. private _errorStateTracker;
  639. /**
  640. * List of element ids to propagate to the chipInput's aria-describedby attribute.
  641. */
  642. private _ariaDescribedbyIds;
  643. /**
  644. * Function when touched. Set as part of ControlValueAccessor implementation.
  645. * @docs-private
  646. */
  647. _onTouched: () => void;
  648. /**
  649. * Function when changed. Set as part of ControlValueAccessor implementation.
  650. * @docs-private
  651. */
  652. _onChange: (value: any) => void;
  653. /**
  654. * Implemented as part of MatFormFieldControl.
  655. * @docs-private
  656. */
  657. get disabled(): boolean;
  658. set disabled(value: boolean);
  659. /**
  660. * Implemented as part of MatFormFieldControl.
  661. * @docs-private
  662. */
  663. get id(): string;
  664. /**
  665. * Implemented as part of MatFormFieldControl.
  666. * @docs-private
  667. */
  668. get empty(): boolean;
  669. /**
  670. * Implemented as part of MatFormFieldControl.
  671. * @docs-private
  672. */
  673. get placeholder(): string;
  674. set placeholder(value: string);
  675. protected _placeholder: string;
  676. /** Whether any chips or the matChipInput inside of this chip-grid has focus. */
  677. get focused(): boolean;
  678. /**
  679. * Implemented as part of MatFormFieldControl.
  680. * @docs-private
  681. */
  682. get required(): boolean;
  683. set required(value: boolean);
  684. protected _required: boolean | undefined;
  685. /**
  686. * Implemented as part of MatFormFieldControl.
  687. * @docs-private
  688. */
  689. get shouldLabelFloat(): boolean;
  690. /**
  691. * Implemented as part of MatFormFieldControl.
  692. * @docs-private
  693. */
  694. get value(): any;
  695. set value(value: any);
  696. protected _value: any[];
  697. /** An object used to control when error messages are shown. */
  698. get errorStateMatcher(): ErrorStateMatcher;
  699. set errorStateMatcher(value: ErrorStateMatcher);
  700. /** Combined stream of all of the child chips' blur events. */
  701. get chipBlurChanges(): Observable<MatChipEvent>;
  702. /** Emits when the chip grid value has been changed by the user. */
  703. readonly change: EventEmitter<MatChipGridChange>;
  704. /**
  705. * Emits whenever the raw value of the chip-grid changes. This is here primarily
  706. * to facilitate the two-way binding for the `value` input.
  707. * @docs-private
  708. */
  709. readonly valueChange: EventEmitter<any>;
  710. _chips: QueryList<MatChipRow>;
  711. /**
  712. * Emits whenever the component state changes and should cause the parent
  713. * form-field to update. Implemented as part of `MatFormFieldControl`.
  714. * @docs-private
  715. */
  716. readonly stateChanges: Subject<void>;
  717. /** Whether the chip grid is in an error state. */
  718. get errorState(): boolean;
  719. set errorState(value: boolean);
  720. constructor(...args: unknown[]);
  721. ngAfterContentInit(): void;
  722. ngAfterViewInit(): void;
  723. ngDoCheck(): void;
  724. ngOnDestroy(): void;
  725. /** Associates an HTML input element with this chip grid. */
  726. registerInput(inputElement: MatChipTextControl): void;
  727. /**
  728. * Implemented as part of MatFormFieldControl.
  729. * @docs-private
  730. */
  731. onContainerClick(event: MouseEvent): void;
  732. /**
  733. * Focuses the first chip in this chip grid, or the associated input when there
  734. * are no eligible chips.
  735. */
  736. focus(): void;
  737. /**
  738. * Implemented as part of MatFormFieldControl.
  739. * @docs-private
  740. */
  741. setDescribedByIds(ids: string[]): void;
  742. /**
  743. * Implemented as part of ControlValueAccessor.
  744. * @docs-private
  745. */
  746. writeValue(value: any): void;
  747. /**
  748. * Implemented as part of ControlValueAccessor.
  749. * @docs-private
  750. */
  751. registerOnChange(fn: (value: any) => void): void;
  752. /**
  753. * Implemented as part of ControlValueAccessor.
  754. * @docs-private
  755. */
  756. registerOnTouched(fn: () => void): void;
  757. /**
  758. * Implemented as part of ControlValueAccessor.
  759. * @docs-private
  760. */
  761. setDisabledState(isDisabled: boolean): void;
  762. /** Refreshes the error state of the chip grid. */
  763. updateErrorState(): void;
  764. /** When blurred, mark the field as touched when focus moved outside the chip grid. */
  765. _blur(): void;
  766. /**
  767. * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
  768. * user to tab out of it. This prevents the grid from capturing focus and redirecting
  769. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  770. */
  771. protected _allowFocusEscape(): void;
  772. /** Handles custom keyboard events. */
  773. _handleKeydown(event: KeyboardEvent): void;
  774. _focusLastChip(): void;
  775. /** Emits change event to set the model value. */
  776. private _propagateChanges;
  777. /** Mark the field as touched */
  778. private _markAsTouched;
  779. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, never>;
  780. static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], true, never>;
  781. static ngAcceptInputType_disabled: unknown;
  782. static ngAcceptInputType_required: unknown;
  783. }
  784. /** Represents an input event on a `matChipInput`. */
  785. interface MatChipInputEvent {
  786. /**
  787. * The native `<input>` element that the event is being fired for.
  788. * @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
  789. * @breaking-change 13.0.0 This property will be removed.
  790. */
  791. input: HTMLInputElement;
  792. /** The value of the input. */
  793. value: string;
  794. /** Reference to the chip input that emitted the event. */
  795. chipInput: MatChipInput;
  796. }
  797. /**
  798. * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
  799. * May be placed inside or outside of a `<mat-chip-grid>`.
  800. */
  801. declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
  802. protected _elementRef: ElementRef<HTMLInputElement>;
  803. /** Whether the control is focused. */
  804. focused: boolean;
  805. /** Register input for chip list */
  806. get chipGrid(): MatChipGrid;
  807. set chipGrid(value: MatChipGrid);
  808. private _chipGrid;
  809. /**
  810. * Whether or not the chipEnd event will be emitted when the input is blurred.
  811. */
  812. addOnBlur: boolean;
  813. /**
  814. * The list of key codes that will trigger a chipEnd event.
  815. *
  816. * Defaults to `[ENTER]`.
  817. */
  818. separatorKeyCodes: readonly number[] | ReadonlySet<number>;
  819. /** Emitted when a chip is to be added. */
  820. readonly chipEnd: EventEmitter<MatChipInputEvent>;
  821. /** The input's placeholder text. */
  822. placeholder: string;
  823. /** Unique id for the input. */
  824. id: string;
  825. /** Whether the input is disabled. */
  826. get disabled(): boolean;
  827. set disabled(value: boolean);
  828. private _disabled;
  829. /** Whether the input is empty. */
  830. get empty(): boolean;
  831. /** The native input element to which this directive is attached. */
  832. readonly inputElement: HTMLInputElement;
  833. constructor(...args: unknown[]);
  834. ngOnChanges(): void;
  835. ngOnDestroy(): void;
  836. /** Utility method to make host definition/tests more clear. */
  837. _keydown(event: KeyboardEvent): void;
  838. /** Checks to see if the blur should emit the (chipEnd) event. */
  839. _blur(): void;
  840. _focus(): void;
  841. /** Checks to see if the (chipEnd) event needs to be emitted. */
  842. _emitChipEnd(event?: KeyboardEvent): void;
  843. _onInput(): void;
  844. /** Focuses the input. */
  845. focus(): void;
  846. /** Clears the input */
  847. clear(): void;
  848. setDescribedByIds(ids: string[]): void;
  849. /** Checks whether a keycode is one of the configured separators. */
  850. private _isSeparatorKey;
  851. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
  852. static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
  853. static ngAcceptInputType_addOnBlur: unknown;
  854. static ngAcceptInputType_disabled: unknown;
  855. }
  856. declare class MatChipsModule {
  857. static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
  858. static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
  859. static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
  860. }
  861. /** Default options, for the chips module, that can be overridden. */
  862. interface MatChipsDefaultOptions {
  863. /** The list of key codes that will trigger a chipEnd event. */
  864. separatorKeyCodes: readonly number[] | ReadonlySet<number>;
  865. /** Whether icon indicators should be hidden for single-selection. */
  866. hideSingleSelectionIndicator?: boolean;
  867. }
  868. /** Injection token to be used to override the default options for the chips module. */
  869. declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;
  870. /**
  871. * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
  872. * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
  873. * retention of the class and its directive metadata.
  874. */
  875. declare const MAT_CHIP_AVATAR: InjectionToken<unknown>;
  876. /**
  877. * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
  878. * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
  879. * retention of the class and its directive metadata.
  880. */
  881. declare const MAT_CHIP_TRAILING_ICON: InjectionToken<unknown>;
  882. /**
  883. * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
  884. * alternative token to the actual `MatChipRemove` class which could cause unnecessary
  885. * retention of the class and its directive metadata.
  886. */
  887. declare const MAT_CHIP_REMOVE: InjectionToken<unknown>;
  888. /**
  889. * Injection token used to avoid a circular dependency between the `MatChip` and `MatChipAction`.
  890. */
  891. declare const MAT_CHIP: InjectionToken<unknown>;
  892. export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
  893. export type { MatChipEditedEvent, MatChipEvent, MatChipInputEvent, MatChipTextControl, MatChipsDefaultOptions };