\n
\n `, isInline: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"18.2.0-next.2\", ngImport: i0, type: MatChipSet, decorators: [{\n type: Component,\n args: [{ selector: 'mat-chip-set', template: `\n \n
\n `, host: {\n 'class': 'mat-mdc-chip-set mdc-evolution-chip-set',\n '(keydown)': '_handleKeydown($event)',\n '[attr.role]': 'role',\n }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"] }]\n }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Directionality, decorators: [{\n type: Optional\n }] }], propDecorators: { disabled: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], role: [{\n type: Input\n }], tabIndex: [{\n type: Input,\n args: [{\n transform: (value) => (value == null ? 0 : numberAttribute(value)),\n }]\n }], _chips: [{\n type: ContentChildren,\n args: [MatChip, {\n // We need to use `descendants: true`, because Ivy will no longer match\n // indirect descendants if it's left as false.\n descendants: true,\n }]\n }] } });\n\n/** Change event object that is emitted when the chip listbox value has changed. */\nclass MatChipListboxChange {\n constructor(\n /** Chip listbox that emitted the event. */\n source, \n /** Value of the chip listbox when the event was emitted. */\n value) {\n this.source = source;\n this.value = value;\n }\n}\n/**\n * Provider Expression that allows mat-chip-listbox to register as a ControlValueAccessor.\n * This allows it to support [(ngModel)].\n * @docs-private\n */\nconst MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MatChipListbox),\n multi: true,\n};\n/**\n * An extension of the MatChipSet component that supports chip selection.\n * Used with MatChipOption chips.\n */\nclass MatChipListbox extends MatChipSet {\n constructor() {\n super(...arguments);\n /**\n * Function when touched. Set as part of ControlValueAccessor implementation.\n * @docs-private\n */\n this._onTouched = () => { };\n /**\n * Function when changed. Set as part of ControlValueAccessor implementation.\n * @docs-private\n */\n this._onChange = () => { };\n // TODO: MDC uses `grid` here\n this._defaultRole = 'listbox';\n /** Default chip options. */\n this._defaultOptions = inject(MAT_CHIPS_DEFAULT_OPTIONS, { optional: true });\n this._multiple = false;\n /** Orientation of the chip list. */\n this.ariaOrientation = 'horizontal';\n this._selectable = true;\n /**\n * A function to compare the option values with the selected values. The first argument\n * is a value from an option. The second is a value from the selection. A boolean\n * should be returned.\n */\n this.compareWith = (o1, o2) => o1 === o2;\n /** Whether this chip listbox is required. */\n this.required = false;\n this._hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;\n /** Event emitted when the selected chip listbox value has been changed by the user. */\n this.change = new EventEmitter();\n this._chips = undefined;\n }\n /** Whether the user should be allowed to select multiple chips. */\n get multiple() {\n return this._multiple;\n }\n set multiple(value) {\n this._multiple = value;\n this._syncListboxProperties();\n }\n /** The array of selected chips inside the chip listbox. */\n get selected() {\n const selectedChips = this._chips.toArray().filter(chip => chip.selected);\n return this.multiple ? selectedChips : selectedChips[0];\n }\n /**\n * Whether or not this chip listbox is selectable.\n *\n * When a chip listbox is not selectable, the selected states for all\n * the chips inside the chip listbox are always ignored.\n */\n get selectable() {\n return this._selectable;\n }\n set selectable(value) {\n this._selectable = value;\n this._syncListboxProperties();\n }\n /** Whether checkmark indicator for single-selection options is hidden. */\n get hideSingleSelectionIndicator() {\n return this._hideSingleSelectionIndicator;\n }\n set hideSingleSelectionIndicator(value) {\n this._hideSingleSelectionIndicator = value;\n this._syncListboxProperties();\n }\n /** Combined stream of all of the child chips' selection change events. */\n get chipSelectionChanges() {\n return this._getChipStream(chip => chip.selectionChange);\n }\n /** Combined stream of all of the child chips' blur events. */\n get chipBlurChanges() {\n return this._getChipStream(chip => chip._onBlur);\n }\n /** The value of the listbox, which is the combined value of the selected chips. */\n get value() {\n return this._value;\n }\n set value(value) {\n this.writeValue(value);\n this._value = value;\n }\n ngAfterContentInit() {\n if (this._pendingInitialValue !== undefined) {\n Promise.resolve().then(() => {\n this._setSelectionByValue(this._pendingInitialValue, false);\n this._pendingInitialValue = undefined;\n });\n }\n this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {\n // Update listbox selectable/multiple properties on chips\n this._syncListboxProperties();\n });\n this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());\n this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {\n if (!this.multiple) {\n this._chips.forEach(chip => {\n if (chip !== event.source) {\n chip._setSelectedState(false, false, false);\n }\n });\n }\n if (event.isUserInput) {\n this._propagateChanges();\n }\n });\n }\n /**\n * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there\n * are no selected chips.\n */\n focus() {\n if (this.disabled) {\n return;\n }\n const firstSelectedChip = this._getFirstSelectedChip();\n if (firstSelectedChip && !firstSelectedChip.disabled) {\n firstSelectedChip.focus();\n }\n else if (this._chips.length > 0) {\n this._keyManager.setFirstItemActive();\n }\n else {\n this._elementRef.nativeElement.focus();\n }\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n writeValue(value) {\n if (this._chips) {\n this._setSelectionByValue(value, false);\n }\n else if (value != null) {\n this._pendingInitialValue = value;\n }\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n registerOnChange(fn) {\n this._onChange = fn;\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n }\n /** Selects all chips with value. */\n _setSelectionByValue(value, isUserInput = true) {\n this._clearSelection();\n if (Array.isArray(value)) {\n value.forEach(currentValue => this._selectValue(currentValue, isUserInput));\n }\n else {\n this._selectValue(value, isUserInput);\n }\n }\n /** When blurred, marks the field as touched when focus moved outside the chip listbox. */\n _blur() {\n if (!this.disabled) {\n // Wait to see if focus moves to an individual chip.\n setTimeout(() => {\n if (!this.focused) {\n this._markAsTouched();\n }\n });\n }\n }\n _keydown(event) {\n if (event.keyCode === TAB) {\n super._allowFocusEscape();\n }\n }\n /** Marks the field as touched */\n _markAsTouched() {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n }\n /** Emits change event to set the model value. */\n _propagateChanges() {\n let valueToEmit = null;\n if (Array.isArray(this.selected)) {\n valueToEmit = this.selected.map(chip => chip.value);\n }\n else {\n valueToEmit = this.selected ? this.selected.value : undefined;\n }\n this._value = valueToEmit;\n this.change.emit(new MatChipListboxChange(this, valueToEmit));\n this._onChange(valueToEmit);\n this._changeDetectorRef.markForCheck();\n }\n /**\n * Deselects every chip in the listbox.\n * @param skip Chip that should not be deselected.\n */\n _clearSelection(skip) {\n this._chips.forEach(chip => {\n if (chip !== skip) {\n chip.deselect();\n }\n });\n }\n /**\n * Finds and selects the chip based on its value.\n * @returns Chip that has the corresponding value.\n */\n _selectValue(value, isUserInput) {\n const correspondingChip = this._chips.find(chip => {\n return chip.value != null && this.compareWith(chip.value, value);\n });\n if (correspondingChip) {\n isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();\n }\n return correspondingChip;\n }\n /** Syncs the chip-listbox selection state with the individual chips. */\n _syncListboxProperties() {\n if (this._chips) {\n // Defer setting the value in order to avoid the \"Expression\n // has changed after it was checked\" errors from Angular.\n Promise.resolve().then(() => {\n this._chips.forEach(chip => {\n chip._chipListMultiple = this.multiple;\n chip.chipListSelectable = this._selectable;\n chip._chipListHideSingleSelectionIndicator = this.hideSingleSelectionIndicator;\n chip._changeDetectorRef.markForCheck();\n });\n });\n }\n }\n /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */\n _getFirstSelectedChip() {\n if (Array.isArray(this.selected)) {\n return this.selected.length ? this.selected[0] : undefined;\n }\n else {\n return this.selected;\n }\n }\n /**\n * Determines if key manager should avoid putting a given chip action in the tab index. Skip\n * non-interactive actions since the user can't do anything with them.\n */\n _skipPredicate(action) {\n // Override the skip predicate in the base class to avoid skipping disabled chips. Allow\n // disabled chip options to receive focus to align with WAI ARIA recommendation. Normally WAI\n // ARIA's instructions are to exclude disabled items from the tab order, but it makes a few\n // exceptions for compound widgets.\n //\n // From [Developing a Keyboard Interface](\n // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):\n // \"For the following composite widget elements, keep them focusable when disabled: Options in a\n // Listbox...\"\n return !action.isInteractive;\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"18.2.0-next.2\", ngImport: i0, type: MatChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"16.1.0\", version: \"18.2.0-next.2\", type: MatChipListbox, isStandalone: true, selector: \"mat-chip-listbox\", inputs: { multiple: [\"multiple\", \"multiple\", booleanAttribute], ariaOrientation: [\"aria-orientation\", \"ariaOrientation\"], selectable: [\"selectable\", \"selectable\", booleanAttribute], compareWith: \"compareWith\", required: [\"required\", \"required\", booleanAttribute], hideSingleSelectionIndicator: [\"hideSingleSelectionIndicator\", \"hideSingleSelectionIndicator\", booleanAttribute], value: \"value\" }, outputs: { change: \"change\" }, host: { listeners: { \"focus\": \"focus()\", \"blur\": \"_blur()\", \"keydown\": \"_keydown($event)\" }, properties: { \"attr.role\": \"role\", \"tabIndex\": \"(disabled || empty) ? -1 : tabIndex\", \"attr.aria-describedby\": \"_ariaDescribedby || null\", \"attr.aria-required\": \"role ? required : null\", \"attr.aria-disabled\": \"disabled.toString()\", \"attr.aria-multiselectable\": \"multiple\", \"attr.aria-orientation\": \"ariaOrientation\", \"class.mat-mdc-chip-list-disabled\": \"disabled\", \"class.mat-mdc-chip-list-required\": \"required\" }, classAttribute: \"mdc-evolution-chip-set mat-mdc-chip-listbox\" }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: \"_chips\", predicate: MatChipOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `\n \n
\n `, isInline: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"18.2.0-next.2\", ngImport: i0, type: MatChipListbox, decorators: [{\n type: Component,\n args: [{ selector: 'mat-chip-listbox', template: `\n \n
\n `, host: {\n 'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',\n '[attr.role]': 'role',\n '[tabIndex]': '(disabled || empty) ? -1 : tabIndex',\n // TODO: replace this binding with use of AriaDescriber\n '[attr.aria-describedby]': '_ariaDescribedby || null',\n '[attr.aria-required]': 'role ? required : null',\n '[attr.aria-disabled]': 'disabled.toString()',\n '[attr.aria-multiselectable]': 'multiple',\n '[attr.aria-orientation]': 'ariaOrientation',\n '[class.mat-mdc-chip-list-disabled]': 'disabled',\n '[class.mat-mdc-chip-list-required]': 'required',\n '(focus)': 'focus()',\n '(blur)': '_blur()',\n '(keydown)': '_keydown($event)',\n }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"] }]\n }], propDecorators: { multiple: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], ariaOrientation: [{\n type: Input,\n args: ['aria-orientation']\n }], selectable: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], compareWith: [{\n type: Input\n }], required: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], hideSingleSelectionIndicator: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], value: [{\n type: Input\n }], change: [{\n type: Output\n }], _chips: [{\n type: ContentChildren,\n args: [MatChipOption, {\n // We need to use `descendants: true`, because Ivy will no longer match\n // indirect descendants if it's left as false.\n descendants: true,\n }]\n }] } });\n\n/** Change event object that is emitted when the chip grid value has changed. */\nclass MatChipGridChange {\n constructor(\n /** Chip grid that emitted the event. */\n source, \n /** Value of the chip grid when the event was emitted. */\n value) {\n this.source = source;\n this.value = value;\n }\n}\n/**\n * An extension of the MatChipSet component used with MatChipRow chips and\n * the matChipInputFor directive.\n */\nclass MatChipGrid extends MatChipSet {\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get disabled() {\n return this.ngControl ? !!this.ngControl.disabled : this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n this._syncChipsState();\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get id() {\n return this._chipInput.id;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get empty() {\n return ((!this._chipInput || this._chipInput.empty) && (!this._chips || this._chips.length === 0));\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get placeholder() {\n return this._chipInput ? this._chipInput.placeholder : this._placeholder;\n }\n set placeholder(value) {\n this._placeholder = value;\n this.stateChanges.next();\n }\n /** Whether any chips or the matChipInput inside of this chip-grid has focus. */\n get focused() {\n return this._chipInput.focused || this._hasFocusedChip();\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get required() {\n return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n }\n set required(value) {\n this._required = value;\n this.stateChanges.next();\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get shouldLabelFloat() {\n return !this.empty || this.focused;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n }\n /** An object used to control when error messages are shown. */\n get errorStateMatcher() {\n return this._errorStateTracker.matcher;\n }\n set errorStateMatcher(value) {\n this._errorStateTracker.matcher = value;\n }\n /** Combined stream of all of the child chips' blur events. */\n get chipBlurChanges() {\n return this._getChipStream(chip => chip._onBlur);\n }\n /** Whether the chip grid is in an error state. */\n get errorState() {\n return this._errorStateTracker.errorState;\n }\n set errorState(value) {\n this._errorStateTracker.errorState = value;\n }\n constructor(elementRef, changeDetectorRef, dir, parentForm, parentFormGroup, defaultErrorStateMatcher, ngControl) {\n super(elementRef, changeDetectorRef, dir);\n this.ngControl = ngControl;\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n this.controlType = 'mat-chip-grid';\n this._defaultRole = 'grid';\n /**\n * List of element ids to propagate to the chipInput's aria-describedby attribute.\n */\n this._ariaDescribedbyIds = [];\n /**\n * Function when touched. Set as part of ControlValueAccessor implementation.\n * @docs-private\n */\n this._onTouched = () => { };\n /**\n * Function when changed. Set as part of ControlValueAccessor implementation.\n * @docs-private\n */\n this._onChange = () => { };\n this._value = [];\n /** Emits when the chip grid value has been changed by the user. */\n this.change = new EventEmitter();\n /**\n * Emits whenever the raw value of the chip-grid changes. This is here primarily\n * to facilitate the two-way binding for the `value` input.\n * @docs-private\n */\n this.valueChange = new EventEmitter();\n this._chips = undefined;\n /**\n * Emits whenever the component state changes and should cause the parent\n * form-field to update. Implemented as part of `MatFormFieldControl`.\n * @docs-private\n */\n this.stateChanges = new Subject();\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, ngControl, parentFormGroup, parentForm, this.stateChanges);\n }\n ngAfterContentInit() {\n this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {\n this._blur();\n this.stateChanges.next();\n });\n merge(this.chipFocusChanges, this._chips.changes)\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => this.stateChanges.next());\n }\n ngAfterViewInit() {\n super.ngAfterViewInit();\n if (!this._chipInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('mat-chip-grid must be used in combination with matChipInputFor.');\n }\n }\n ngDoCheck() {\n if (this.ngControl) {\n // We need to re-evaluate this on every change detection cycle, because there are some\n // error triggers that we can't subscribe to (e.g. parent form submissions). This means\n // that whatever logic is in here has to be super lean or we risk destroying the performance.\n this.updateErrorState();\n }\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this.stateChanges.complete();\n }\n /** Associates an HTML input element with this chip grid. */\n registerInput(inputElement) {\n this._chipInput = inputElement;\n this._chipInput.setDescribedByIds(this._ariaDescribedbyIds);\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n onContainerClick(event) {\n if (!this.disabled && !this._originatesFromChip(event)) {\n this.focus();\n }\n }\n /**\n * Focuses the first chip in this chip grid, or the associated input when there\n * are no eligible chips.\n */\n focus() {\n if (this.disabled || this._chipInput.focused) {\n return;\n }\n if (!this._chips.length || this._chips.first.disabled) {\n // Delay until the next tick, because this can cause a \"changed after checked\"\n // error if the input does something on focus (e.g. opens an autocomplete).\n Promise.resolve().then(() => this._chipInput.focus());\n }\n else if (this._chips.length && this._keyManager.activeItemIndex !== 0) {\n this._keyManager.setFirstItemActive();\n }\n this.stateChanges.next();\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n setDescribedByIds(ids) {\n // We must keep this up to date to handle the case where ids are set\n // before the chip input is registered.\n this._ariaDescribedbyIds = ids;\n this._chipInput?.setDescribedByIds(ids);\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n writeValue(value) {\n // The user is responsible for creating the child chips, so we just store the value.\n this._value = value;\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n registerOnChange(fn) {\n this._onChange = fn;\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n /**\n * Implemented as part of ControlValueAccessor.\n * @docs-private\n */\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n this.stateChanges.next();\n }\n /** Refreshes the error state of the chip grid. */\n updateErrorState() {\n this._errorStateTracker.updateErrorState();\n }\n /** When blurred, mark the field as touched when focus moved outside the chip grid. */\n _blur() {\n if (!this.disabled) {\n // Check whether the focus moved to chip input.\n // If the focus is not moved to chip input, mark the field as touched. If the focus moved\n // to chip input, do nothing.\n // Timeout is needed to wait for the focus() event trigger on chip input.\n setTimeout(() => {\n if (!this.focused) {\n this._propagateChanges();\n this._markAsTouched();\n }\n });\n }\n }\n /**\n * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the\n * user to tab out of it. This prevents the grid from capturing focus and redirecting\n * it back to the first chip, creating a focus trap, if it user tries to tab away.\n */\n _allowFocusEscape() {\n if (!this._chipInput.focused) {\n super._allowFocusEscape();\n }\n }\n /** Handles custom keyboard events. */\n _handleKeydown(event) {\n const keyCode = event.keyCode;\n const activeItem = this._keyManager.activeItem;\n if (keyCode === TAB) {\n if (this._chipInput.focused &&\n hasModifierKey(event, 'shiftKey') &&\n this._chips.length &&\n !this._chips.last.disabled) {\n event.preventDefault();\n if (activeItem) {\n this._keyManager.setActiveItem(activeItem);\n }\n else {\n this._focusLastChip();\n }\n }\n else {\n // Use the super method here since it doesn't check for the input\n // focused state. This allows focus to escape if there's only one\n // disabled chip left in the list.\n super._allowFocusEscape();\n }\n }\n else if (!this._chipInput.focused) {\n // The up and down arrows are supposed to navigate between the individual rows in the grid.\n // We do this by filtering the actions down to the ones that have the same `_isPrimary`\n // flag as the active action and moving focus between them ourseles instead of delegating\n // to the key manager. For more information, see #29359 and:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/#ex2_label\n if ((keyCode === UP_ARROW || keyCode === DOWN_ARROW) && activeItem) {\n const eligibleActions = this._chipActions.filter(action => action._isPrimary === activeItem._isPrimary && !this._skipPredicate(action));\n const currentIndex = eligibleActions.indexOf(activeItem);\n const delta = event.keyCode === UP_ARROW ? -1 : 1;\n event.preventDefault();\n if (currentIndex > -1 && this._isValidIndex(currentIndex + delta)) {\n this._keyManager.setActiveItem(eligibleActions[currentIndex + delta]);\n }\n }\n else {\n super._handleKeydown(event);\n }\n }\n this.stateChanges.next();\n }\n _focusLastChip() {\n if (this._chips.length) {\n this._chips.last.focus();\n }\n }\n /** Emits change event to set the model value. */\n _propagateChanges() {\n const valueToEmit = this._chips.length ? this._chips.toArray().map(chip => chip.value) : [];\n this._value = valueToEmit;\n this.change.emit(new MatChipGridChange(this, valueToEmit));\n this.valueChange.emit(valueToEmit);\n this._onChange(valueToEmit);\n this._changeDetectorRef.markForCheck();\n }\n /** Mark the field as touched */\n _markAsTouched() {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n this.stateChanges.next();\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"18.2.0-next.2\", ngImport: i0, type: MatChipGrid, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Directionality, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"16.1.0\", version: \"18.2.0-next.2\", type: MatChipGrid, isStandalone: true, selector: \"mat-chip-grid\", inputs: { disabled: [\"disabled\", \"disabled\", booleanAttribute], placeholder: \"placeholder\", required: [\"required\", \"required\", booleanAttribute], value: \"value\", errorStateMatcher: \"errorStateMatcher\" }, outputs: { change: \"change\", valueChange: \"valueChange\" }, host: { listeners: { \"focus\": \"focus()\", \"blur\": \"_blur()\" }, properties: { \"attr.role\": \"role\", \"attr.tabindex\": \"(disabled || (_chips && _chips.length === 0)) ? -1 : tabIndex\", \"attr.aria-disabled\": \"disabled.toString()\", \"attr.aria-invalid\": \"errorState\", \"class.mat-mdc-chip-list-disabled\": \"disabled\", \"class.mat-mdc-chip-list-invalid\": \"errorState\", \"class.mat-mdc-chip-list-required\": \"required\" }, classAttribute: \"mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set\" }, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], queries: [{ propertyName: \"_chips\", predicate: MatChipRow, descendants: true }], usesInheritance: true, ngImport: i0, template: `\n \n
\n `, isInline: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"18.2.0-next.2\", ngImport: i0, type: MatChipGrid, decorators: [{\n type: Component,\n args: [{ selector: 'mat-chip-grid', template: `\n \n
\n `, host: {\n 'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',\n '[attr.role]': 'role',\n '[attr.tabindex]': '(disabled || (_chips && _chips.length === 0)) ? -1 : tabIndex',\n '[attr.aria-disabled]': 'disabled.toString()',\n '[attr.aria-invalid]': 'errorState',\n '[class.mat-mdc-chip-list-disabled]': 'disabled',\n '[class.mat-mdc-chip-list-invalid]': 'errorState',\n '[class.mat-mdc-chip-list-required]': 'required',\n '(focus)': 'focus()',\n '(blur)': '_blur()',\n }, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [\".mat-mdc-chip-set{display:flex}.mat-mdc-chip-set:focus{outline:none}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%;margin-left:-8px;margin-right:0}.mat-mdc-chip-set .mdc-evolution-chip{margin:4px 0 4px 8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0;margin-right:-8px}[dir=rtl] .mat-mdc-chip-set .mdc-evolution-chip{margin-left:0;margin-right:8px}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\"] }]\n }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Directionality, decorators: [{\n type: Optional\n }] }, { type: i2.NgForm, decorators: [{\n type: Optional\n }] }, { type: i2.FormGroupDirective, decorators: [{\n type: Optional\n }] }, { type: i3.ErrorStateMatcher }, { type: i2.NgControl, decorators: [{\n type: Optional\n }, {\n type: Self\n }] }], propDecorators: { disabled: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], placeholder: [{\n type: Input\n }], required: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], value: [{\n type: Input\n }], errorStateMatcher: [{\n type: Input\n }], change: [{\n type: Output\n }], valueChange: [{\n type: Output\n }], _chips: [{\n type: ContentChildren,\n args: [MatChipRow, {\n // We need to use `descendants: true`, because Ivy will no longer match\n // indirect descendants if it's left as false.\n descendants: true,\n }]\n }] } });\n\n// Increasing integer for generating unique ids.\nlet nextUniqueId = 0;\n/**\n * Directive that adds chip-specific behaviors to an input element inside `\\n
\\n \\n @if (mode === 'buffer') {\\n \\n }\\n\\n\\n
\\n \\n @if (mode === 'buffer') {\\n \\n }\\n\\n| \n {{headerText}}\n | \n\n {{dataAccessor(data, name)}}\n | \n\n {{headerText}}\n | \n\n {{dataAccessor(data, name)}}\n | \n
|---|
| \n {{headerText}}\n | \n\n {{dataAccessor(data, name)}}\n | \n\n {{headerText}}\n | \n\n {{dataAccessor(data, name)}}\n | \n
|---|
| \\n @if (multiSelectable) {\\n | \\n \\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\\n | \\n \\n | \\n \\n @if (headerTemplate | isTemplateRef) {\\n \\n \\n @if (col.showExpand) {\\n \\n }\\n {{col.header | toObservable | async}}\\n @if (col.sortable) {\\n \\n }\\n \\n | \\n \\n @if (cellTemplate | isTemplateRef) {\\n | \\n \\n @if (col.showExpand) {\\n \\n }\\n @if (summaryTemplate | isTemplateRef) {\\n | \\n
|---|
| \\n \\n \\n | \\n
| \\n @if (multiSelectable) {\\n | \\n \\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\\n | \\n \\n | \\n \\n @if (headerTemplate | isTemplateRef) {\\n \\n \\n @if (col.showExpand) {\\n \\n }\\n {{col.header | toObservable | async}}\\n @if (col.sortable) {\\n \\n }\\n \\n | \\n \\n @if (cellTemplate | isTemplateRef) {\\n | \\n \\n @if (col.showExpand) {\\n \\n }\\n @if (summaryTemplate | isTemplateRef) {\\n | \\n
|---|
| \\n \\n \\n | \\n
\\n @if (noResultTemplate) {\\n
\\n }\\n \\n
\\n}\\n\\n\\n@if (showToolbar) {\\n \\n}\\n\\n\\n \\n
\\n\\n\\n\\n\\n\\n
\\n\\n \\n @if (showSidebar) {\\n \\n }\\n\\n @if (!columnResizable) {\\n \\n @if (rowSelectable && !hideRowSelectionCheckbox) {\\n
\\n } @else {\\n \\n \\n @if (rowSelectable && !hideRowSelectionCheckbox) {\\n
\\n }\\n
\\n\\n \\n @if (_hasNoResult) {\\n | \\n @if (multiSelectable) {\\n | \\n \\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\\n | \\n \\n | \\n \\n @if (headerTemplate | isTemplateRef) {\\n \\n \\n @if (col.showExpand) {\\n \\n }\\n {{col.header | toObservable | async}}\\n @if (col.sortable) {\\n \\n }\\n \\n | \\n \\n @if (cellTemplate | isTemplateRef) {\\n | \\n \\n @if (col.showExpand) {\\n \\n }\\n @if (summaryTemplate | isTemplateRef) {\\n | \\n
|---|
| \\n \\n \\n | \\n
| \\n @if (multiSelectable) {\\n | \\n \\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\\n | \\n \\n | \\n \\n @if (headerTemplate | isTemplateRef) {\\n \\n \\n @if (col.showExpand) {\\n \\n }\\n {{col.header | toObservable | async}}\\n @if (col.sortable) {\\n \\n }\\n \\n | \\n \\n @if (cellTemplate | isTemplateRef) {\\n | \\n \\n @if (col.showExpand) {\\n \\n }\\n @if (summaryTemplate | isTemplateRef) {\\n | \\n
|---|
| \\n \\n \\n | \\n
\\n @if (noResultTemplate) {\\n
\\n }\\n