\n *\t \n * \n */\n@Directive({\n selector: '[igxComboItem]',\n standalone: true\n})\nexport class IgxComboItemDirective { }\n\n/**\n * Defines the custom template that will be displayed when the combo's list is empty\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @example\n * \n * \n *
\n * There are no items to display\n *
\n * \n * \n */\n@Directive({\n selector: '[igxComboEmpty]',\n standalone: true\n})\nexport class IgxComboEmptyDirective { }\n\n/**\n * Defines the custom template that will be used when rendering header items for groups in the combo's list\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @example\n * \n * \n *
Group header for {{ item[key] }}
\n * \n * \n */\n@Directive({\n selector: '[igxComboHeaderItem]',\n standalone: true\n})\nexport class IgxComboHeaderItemDirective { }\n\n/**\n * Defines the custom template that will be used to display the `ADD` button\n *\n * @remarks To show the `ADD` button, the `allowCustomValues` option must be enabled\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @example\n * \n * \n * \n * \n * \n */\n@Directive({\n selector: '[igxComboAddItem]',\n standalone: true\n})\nexport class IgxComboAddItemDirective { }\n\n/**\n * The custom template that will be used when rendering the combo's toggle button\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @example\n * \n * \n * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}\n * \n * \n */\n@Directive({\n selector: '[igxComboToggleIcon]',\n standalone: true\n})\nexport class IgxComboToggleIconDirective { }\n\n/**\n * Defines the custom template that will be used when rendering the combo's clear icon\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @example\n * \n * \n * clear\n * \n * \n */\n@Directive({\n selector: '[igxComboClearIcon]',\n standalone: true\n})\nexport class IgxComboClearIconDirective { }\n","import {\n AfterContentChecked,\n AfterViewChecked,\n AfterViewInit,\n booleanAttribute,\n ChangeDetectorRef,\n ContentChild,\n ContentChildren,\n Directive,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n InjectionToken,\n Injector,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n TemplateRef,\n ViewChild,\n DOCUMENT,\n ViewChildren,\n inject\n} from '@angular/core';\nimport { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';\nimport { caseSensitive } from '@igniteui/material-icons-extended';\nimport { noop, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport {\n IgxSelectionAPIService,\n SortingDirection,\n CancelableBrowserEventArgs,\n cloneArray,\n IBaseCancelableBrowserEventArgs,\n IBaseEventArgs,\n rem,\n AbsoluteScrollStrategy,\n AutoPositionStrategy,\n OverlaySettings,\n ComboResourceStringsEN,\n IComboResourceStrings,\n getCurrentResourceStrings,\n onResourceChangeHandle\n} from 'igniteui-angular/core';\nimport { IForOfState, IgxForOfDirective } from 'igniteui-angular/directives';\nimport { IgxIconService } from 'igniteui-angular/icon';\nimport { IGX_INPUT_GROUP_TYPE, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';\nimport { IgxComboDropDownComponent } from './combo-dropdown.component';\nimport { IgxComboAPIService } from './combo.api';\nimport {\n IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective,\n IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective\n} from './combo.directives';\nimport { isEqual } from 'lodash-es';\nimport { IComboItemAdditionEvent, IComboSearchInputEventArgs } from './combo.component';\n\nexport const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken('IgxComboComponentToken');\n\n/** @hidden @internal TODO: Evaluate */\nexport interface IgxComboBase {\n id: string;\n data: any[] | null;\n valueKey: string;\n groupKey: string;\n isRemote: boolean;\n filteredData: any[] | null;\n totalItemCount: number;\n itemsMaxHeight: number;\n itemHeight: number;\n searchValue: string;\n searchInput: ElementRef;\n comboInput: ElementRef;\n opened: EventEmitter;\n opening: EventEmitter;\n closing: EventEmitter;\n closed: EventEmitter;\n focusSearchInput(opening?: boolean): void;\n triggerCheck(): void;\n addItemToCollection(): void;\n isAddButtonVisible(): boolean;\n handleInputChange(event?: string): void;\n isItemSelected(itemID: any): boolean;\n select(item: any): void;\n select(itemIDs: any[], clearSelection?: boolean, event?: Event): void;\n deselect(...args: [] | [itemIDs: any[], event?: Event]): void;\n setActiveDescendant(): void;\n}\n\nlet NEXT_ID = 0;\n\n\n/** @hidden @internal */\nexport const enum DataTypes {\n EMPTY = 'empty',\n PRIMITIVE = 'primitive',\n COMPLEX = 'complex',\n PRIMARYKEY = 'valueKey'\n}\n\n/** The filtering criteria to be applied on data search */\nexport interface IComboFilteringOptions {\n /** Defines filtering case-sensitivity */\n caseSensitive?: boolean;\n /** Defines optional key to filter against complex list items. Default to displayKey if provided.*/\n filteringKey?: string;\n}\n\n@Directive()\nexport abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewChecked, OnInit,\n AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor {\n protected elementRef = inject(ElementRef);\n protected cdr = inject(ChangeDetectorRef);\n protected selectionService = inject(IgxSelectionAPIService);\n protected comboAPI = inject(IgxComboAPIService);\n public document = inject(DOCUMENT);\n protected _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true });\n protected _injector = inject(Injector, { optional: true });\n protected _iconService = inject(IgxIconService, { optional: true });\n\n /**\n * Defines whether the caseSensitive icon should be shown in the search input\n *\n * ```typescript\n * // get\n * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input({ transform: booleanAttribute })\n public showSearchCaseIcon = false;\n\n /**\n * Enables/disables filtering in the list. The default is `false`.\n */\n @Input({ transform: booleanAttribute })\n public get disableFiltering(): boolean {\n return this._disableFiltering;\n }\n public set disableFiltering(value: boolean) {\n this._disableFiltering = value;\n }\n\n /**\n * Set custom overlay settings that control how the combo's list of items is displayed.\n * Set:\n * ```html\n * \n * ```\n *\n * ```typescript\n * const customSettings = { positionStrategy: { settings: { target: myTarget } } };\n * combo.overlaySettings = customSettings;\n * ```\n * Get any custom overlay settings used by the combo:\n * ```typescript\n * const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;\n * ```\n */\n @Input()\n public overlaySettings: OverlaySettings = null;\n\n /**\n * Gets/gets combo id.\n *\n * ```typescript\n * // get\n * let id = this.combo.id;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @HostBinding('attr.id')\n @Input()\n public get id(): string {\n return this._id;\n }\n\n public set id(value: string) {\n if (!value) {\n return;\n }\n const selection = this.selectionService.get(this._id);\n this.selectionService.clear(this._id);\n this._id = value;\n if (selection) {\n this.selectionService.set(this._id, selection);\n }\n }\n\n /**\n * Sets the style width of the element\n *\n * ```typescript\n * // get\n * let myComboWidth = this.combo.width;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @HostBinding('style.width')\n @Input()\n public width: string;\n\n /**\n * Controls whether custom values can be added to the collection\n *\n * ```typescript\n * // get\n * let comboAllowsCustomValues = this.combo.allowCustomValues;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input({ transform: booleanAttribute })\n public allowCustomValues = false;\n\n /**\n * Configures the drop down list height\n *\n * ```typescript\n * // get\n * let myComboItemsMaxHeight = this.combo.itemsMaxHeight;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public get itemsMaxHeight(): number {\n if (this.itemHeight && !this._itemsMaxHeight) {\n return this.itemHeight * this.itemsInContainer;\n }\n return this._itemsMaxHeight;\n }\n\n public set itemsMaxHeight(val: number) {\n this._itemsMaxHeight = val;\n }\n\n /** @hidden */\n public get itemsMaxHeightInRem() {\n if (this.itemsMaxHeight) {\n return rem(this.itemsMaxHeight);\n }\n }\n\n /**\n * Configures the drop down list item height\n *\n * ```typescript\n * // get\n * let myComboItemHeight = this.combo.itemHeight;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public get itemHeight(): number {\n return this._itemHeight;\n }\n\n public set itemHeight(val: number) {\n this._itemHeight = val;\n }\n\n /**\n * Configures the drop down list width\n *\n * ```typescript\n * // get\n * let myComboItemsWidth = this.combo.itemsWidth;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public itemsWidth: string;\n\n /**\n * Defines the placeholder value for the combo value field\n *\n * ```typescript\n * // get\n * let myComboPlaceholder = this.combo.placeholder;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public placeholder: string;\n\n /**\n * Combo data source.\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public get data(): any[] | null {\n return this._data;\n }\n public set data(val: any[] | null) {\n // igxFor directive ignores undefined values\n // if the combo uses simple data and filtering is applied\n // an error will occur due to the mismatch of the length of the data\n // this can occur during filtering for the igx-combo and\n // during filtering & selection for the igx-simple-combo\n // since the simple combo's input is both a container for the selection and a filter\n this._data = (val) ? val.filter(x => x !== undefined) : [];\n }\n\n /**\n * Determines which column in the data source is used to determine the value.\n *\n * ```typescript\n * // get\n * let myComboValueKey = this.combo.valueKey;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public valueKey: string = null;\n\n @Input()\n public set displayKey(val: string) {\n this._displayKey = val;\n }\n\n /**\n * Determines which column in the data source is used to determine the display value.\n *\n * ```typescript\n * // get\n * let myComboDisplayKey = this.combo.displayKey;\n *\n * // set\n * this.combo.displayKey = 'val';\n *\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n public get displayKey() {\n return this._displayKey ? this._displayKey : this.valueKey;\n }\n\n /**\n * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].\n *\n * ```html\n * \n * \n * ```\n */\n @Input()\n public set groupKey(val: string) {\n this._groupKey = val;\n }\n\n /**\n * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].\n *\n * ```typescript\n * // get\n * let currentGroupKey = this.combo.groupKey;\n * ```\n */\n public get groupKey(): string {\n return this._groupKey;\n }\n\n /**\n * Sets groups sorting order.\n *\n * @example\n * ```html\n * \n * ```\n * ```typescript\n * public groupSortingDirection = SortingDirection.Asc;\n * ```\n */\n @Input()\n public get groupSortingDirection(): SortingDirection {\n return this._groupSortingDirection;\n }\n public set groupSortingDirection(val: SortingDirection) {\n this._groupSortingDirection = val;\n }\n\n /**\n * Gets/Sets the custom filtering function of the combo.\n *\n * @example\n * ```html\n * \n * ```\n */\n @Input()\n public filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[];\n\n /**\n * Sets aria-labelledby attribute value.\n * ```html\n * \n * ```\n */\n @Input()\n public ariaLabelledBy: string;\n\n /** @hidden @internal */\n @HostBinding('class.igx-combo')\n public cssClass = 'igx-combo'; // Independent of display density for the time being\n\n /**\n * Disables the combo. The default is `false`.\n * ```html\n * \n * ```\n */\n @Input({ transform: booleanAttribute })\n public disabled = false;\n\n /**\n * Sets the visual combo type.\n * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.\n * ```html\n * \n * ```\n */\n @Input()\n public get type(): IgxInputGroupType {\n return this._type || this._inputGroupType || 'box';\n }\n\n public set type(val: IgxInputGroupType) {\n this._type = val;\n }\n\n /**\n * Gets/Sets the resource strings.\n *\n * @remarks\n * By default it uses EN resources.\n */\n @Input()\n public get resourceStrings(): IComboResourceStrings {\n return this._resourceStrings || this._defaultResourceStrings;\n }\n public set resourceStrings(value: IComboResourceStrings) {\n this._resourceStrings = Object.assign({}, this._resourceStrings, value);\n }\n\n /**\n * Emitted before the dropdown is opened\n *\n * ```html\n * \n * ```\n */\n @Output()\n public opening = new EventEmitter();\n\n /**\n * Emitted after the dropdown is opened\n *\n * ```html\n * \n * ```\n */\n @Output()\n public opened = new EventEmitter();\n\n /**\n * Emitted before the dropdown is closed\n *\n * ```html\n * \n * ```\n */\n @Output()\n public closing = new EventEmitter();\n\n /**\n * Emitted after the dropdown is closed\n *\n * ```html\n * \n * ```\n */\n @Output()\n public closed = new EventEmitter();\n\n /**\n * Emitted when an item is being added to the data collection\n *\n * ```html\n * \n * ```\n */\n @Output()\n public addition = new EventEmitter();\n\n /**\n * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)\n *\n * ```html\n * \n * ```\n */\n @Output()\n public searchInputUpdate = new EventEmitter();\n\n /**\n * Emitted when new chunk of data is loaded from the virtualization\n *\n * ```html\n * \n * ```\n */\n @Output()\n public dataPreLoad = new EventEmitter();\n\n /**\n * The custom template, if any, that should be used when rendering ITEMS in the combo list\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.itemTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n *
\n *
{{ item[key] }}
\n *
{{ item.cost }}
\n *
\n * \n * \n * ```\n */\n @ContentChild(IgxComboItemDirective, { read: TemplateRef })\n public itemTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the HEADER for the combo items list\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.headerTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n *
\n * This is a custom header\n *
\n * \n * \n * ```\n */\n @ContentChild(IgxComboHeaderDirective, { read: TemplateRef })\n public headerTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the FOOTER for the combo items list\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.footerTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n * \n * \n * \n * ```\n */\n @ContentChild(IgxComboFooterDirective, { read: TemplateRef })\n public footerTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.headerItemTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n *
Group header for {{ item[key] }}
\n * \n * \n * ```\n */\n @ContentChild(IgxComboHeaderItemDirective, { read: TemplateRef })\n public headerItemTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.addItemTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n * \n * \n * \n * ```\n */\n @ContentChild(IgxComboAddItemDirective, { read: TemplateRef })\n public addItemTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.emptyTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n *
\n * There are no items to display\n *
\n * \n * \n * ```\n */\n @ContentChild(IgxComboEmptyDirective, { read: TemplateRef })\n public emptyTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.toggleIconTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}\n * \n * \n * ```\n */\n @ContentChild(IgxComboToggleIconDirective, { read: TemplateRef })\n public toggleIconTemplate: TemplateRef = null;\n\n /**\n * The custom template, if any, that should be used when rendering the combo CLEAR button\n *\n * ```typescript\n * // Set in typescript\n * const myCustomTemplate: TemplateRef = myComponent.customTemplate;\n * myComponent.combo.clearIconTemplate = myCustomTemplate;\n * ```\n * ```html\n * \n * \n * ...\n * \n * clear\n * \n * \n * ```\n */\n @ContentChild(IgxComboClearIconDirective, { read: TemplateRef })\n public clearIconTemplate: TemplateRef = null;\n\n /** @hidden @internal */\n @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;\n\n /** @hidden @internal */\n @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true })\n public inputGroup: IgxInputGroupComponent;\n\n /** @hidden @internal */\n @ViewChild('comboInput', { read: IgxInputDirective, static: true })\n public comboInput: IgxInputDirective;\n\n /** @hidden @internal */\n @ViewChild('searchInput')\n public searchInput: ElementRef = null;\n\n /** @hidden @internal */\n @ViewChild(IgxForOfDirective, { static: true })\n public virtualScrollContainer: IgxForOfDirective;\n\n @ViewChild(IgxForOfDirective, { read: IgxForOfDirective, static: true })\n protected virtDir: IgxForOfDirective;\n\n @ViewChild('dropdownItemContainer', { static: true })\n protected dropdownContainer: ElementRef = null;\n\n @ViewChild('primitive', { read: TemplateRef, static: true })\n protected primitiveTemplate: TemplateRef;\n\n @ViewChild('complex', { read: TemplateRef, static: true })\n protected complexTemplate: TemplateRef;\n\n @ContentChildren(IgxPrefixDirective, { descendants: true })\n protected prefixes: QueryList;\n\n @ContentChildren(IgxSuffixDirective, { descendants: true })\n protected suffixes: QueryList;\n\n @ViewChildren(IgxSuffixDirective)\n protected internalSuffixes: QueryList;\n\n /** @hidden @internal */\n public get searchValue(): string {\n return this._searchValue;\n }\n public set searchValue(val: string) {\n this.filterValue = val;\n this._searchValue = val;\n }\n\n /** @hidden @internal */\n public get isRemote() {\n return this.totalItemCount > 0 &&\n this.valueKey &&\n this.dataType === DataTypes.COMPLEX;\n }\n\n /** @hidden @internal */\n public get dataType(): string {\n if (this.displayKey) {\n return DataTypes.COMPLEX;\n }\n return DataTypes.PRIMITIVE;\n }\n\n /**\n * Gets if control is valid, when used in a form\n *\n * ```typescript\n * // get\n * let valid = this.combo.valid;\n * ```\n */\n public get valid(): IgxInputState {\n return this._valid;\n }\n\n /**\n * Sets if control is valid, when used in a form\n *\n * ```typescript\n * // set\n * this.combo.valid = IgxInputState.INVALID;\n * ```\n */\n public set valid(valid: IgxInputState) {\n this._valid = valid;\n this.comboInput.valid = valid;\n }\n\n /**\n * The value of the combo\n *\n * ```typescript\n * // get\n * let comboValue = this.combo.value;\n * ```\n */\n public get value(): any[] {\n return this._value;\n }\n\n /**\n * The text displayed in the combo input\n *\n * ```typescript\n * // get\n * let comboDisplayValue = this.combo.displayValue;\n * ```\n */\n public get displayValue(): string {\n return this._displayValue;\n }\n\n /**\n * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`\n *\n * ```typescript\n * // get\n * let state = this.combo.virtualizationState;\n * ```\n */\n public get virtualizationState(): IForOfState {\n return this.virtDir.state;\n }\n /**\n * Sets the current state of the virtualized data.\n *\n * ```typescript\n * // set\n * this.combo.virtualizationState(state);\n * ```\n */\n public set virtualizationState(state: IForOfState) {\n this.virtDir.state = state;\n }\n\n /**\n * Gets drop down state.\n *\n * ```typescript\n * let state = this.combo.collapsed;\n * ```\n */\n public get collapsed(): boolean {\n return this.dropdown.collapsed;\n }\n\n /**\n * Gets total count of the virtual data items, when using remote service.\n *\n * ```typescript\n * // get\n * let count = this.combo.totalItemCount;\n * ```\n */\n public get totalItemCount(): number {\n return this.virtDir.totalItemCount;\n }\n /**\n * Sets total count of the virtual data items, when using remote service.\n *\n * ```typescript\n * // set\n * this.combo.totalItemCount(remoteService.count);\n * ```\n */\n public set totalItemCount(count: number) {\n this.virtDir.totalItemCount = count;\n }\n\n /** @hidden @internal */\n public get template(): TemplateRef {\n this._dataType = this.dataType;\n if (this.itemTemplate) {\n return this.itemTemplate;\n }\n if (this._dataType === DataTypes.COMPLEX) {\n return this.complexTemplate;\n }\n return this.primitiveTemplate;\n }\n\n /** @hidden @internal */\n public customValueFlag = true;\n /** @hidden @internal */\n public filterValue = '';\n /** @hidden @internal */\n public defaultFallbackGroup = 'Other';\n /** @hidden @internal */\n public activeDescendant = '';\n\n /**\n * Configures the way combo items will be filtered.\n *\n * ```typescript\n * // get\n * let myFilteringOptions = this.combo.filteringOptions;\n * ```\n *\n * ```html\n * \n * \n * ```\n */\n\n @Input()\n public get filteringOptions(): IComboFilteringOptions {\n return this._filteringOptions || this._defaultFilteringOptions;\n }\n public set filteringOptions(value: IComboFilteringOptions) {\n this._filteringOptions = value;\n }\n\n protected containerSize = undefined;\n protected itemSize = undefined;\n protected _data = [];\n protected _value = [];\n protected _displayValue = '';\n protected _groupKey = '';\n protected _searchValue = '';\n protected _filteredData = [];\n protected _displayKey: string;\n protected _remoteSelection = {};\n protected _resourceStrings: IComboResourceStrings = null;\n protected _defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN);\n protected _valid = IgxInputState.INITIAL;\n protected ngControl: NgControl = null;\n protected destroy$ = new Subject();\n protected _onTouchedCallback: () => void = noop;\n protected _onChangeCallback: (_: any) => void = noop;\n protected compareCollator = new Intl.Collator();\n protected computedStyles;\n\n private _id: string = `igx-combo-${NEXT_ID++}`;\n private _disableFiltering = false;\n private _type = null;\n private _dataType = '';\n private _itemHeight = undefined;\n private _itemsMaxHeight = null;\n private _overlaySettings: OverlaySettings;\n private _groupSortingDirection: SortingDirection = SortingDirection.Asc;\n private _filteringOptions: IComboFilteringOptions;\n private _defaultFilteringOptions: IComboFilteringOptions = { caseSensitive: false };\n private itemsInContainer = 10;\n\n public abstract dropdown: IgxComboDropDownComponent;\n public abstract selectionChanging: EventEmitter;\n\n constructor() {\n onResourceChangeHandle(this.destroy$, () => {\n this._defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN, false);\n }, this);\n }\n\n public ngAfterViewChecked() {\n const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement;\n\n this._overlaySettings = {\n target: targetElement,\n scrollStrategy: new AbsoluteScrollStrategy(),\n positionStrategy: new AutoPositionStrategy(),\n modal: false,\n closeOnOutsideClick: true,\n excludeFromOutsideClick: [targetElement]\n };\n }\n\n /** @hidden @internal */\n public ngAfterContentChecked(): void {\n if (this.inputGroup && this.prefixes?.length > 0) {\n this.inputGroup.prefixes = this.prefixes;\n }\n\n if (this.inputGroup) {\n const suffixesArray = this.suffixes?.toArray() ?? [];\n const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];\n const mergedSuffixes = new QueryList();\n mergedSuffixes.reset([\n ...suffixesArray,\n ...internalSuffixesArray\n ]);\n this.inputGroup.suffixes = mergedSuffixes;\n }\n }\n\n /** @hidden @internal */\n public ngOnInit() {\n this.ngControl = this._injector.get(NgControl, null);\n this.selectionService.set(this.id, new Set());\n this._iconService?.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');\n this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement);\n }\n\n /** @hidden @internal */\n public ngAfterViewInit(): void {\n this.filteredData = [...this.data];\n if (this.ngControl) {\n this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);\n this.manageRequiredAsterisk();\n this.cdr.detectChanges();\n }\n this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e: IForOfState) => {\n const eventArgs: IForOfState = Object.assign({}, e, { owner: this });\n this.dataPreLoad.emit(eventArgs);\n });\n this.dropdown?.opening.subscribe((_args: IBaseCancelableBrowserEventArgs) => {\n // calculate the container size and item size based on the sizes from the DOM\n const dropdownContainerHeight = this.dropdownContainer.nativeElement.getBoundingClientRect().height;\n if (dropdownContainerHeight) {\n this.containerSize = parseFloat(dropdownContainerHeight);\n }\n if (this.dropdown.children?.first) {\n this.itemSize = this.dropdown.children.first.element.nativeElement.getBoundingClientRect().height;\n }\n });\n }\n\n /** @hidden @internal */\n public ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n this.comboAPI.clear();\n this.selectionService.delete(this.id);\n }\n\n /**\n * A method that opens/closes the combo.\n *\n * ```html\n * \n * \n * ```\n */\n public toggle(): void {\n if (this.collapsed && this._displayValue.length !== 0) {\n this.filterValue = '';\n this.cdr.detectChanges();\n }\n const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);\n this.dropdown.toggle(overlaySettings);\n if (!this.collapsed) {\n this.setActiveDescendant();\n }\n }\n\n /**\n * A method that opens the combo.\n *\n * ```html\n * \n * \n * ```\n */\n public open(): void {\n if (this.collapsed && this._displayValue.length !== 0) {\n this.filterValue = '';\n this.cdr.detectChanges();\n }\n const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);\n this.dropdown.open(overlaySettings);\n this.setActiveDescendant();\n }\n\n /**\n * A method that closes the combo.\n *\n * ```html\n * \n * \n * ```\n */\n public close(): void {\n this.dropdown.close();\n }\n\n /**\n * Triggers change detection on the combo view\n */\n public triggerCheck() {\n this.cdr.detectChanges();\n }\n\n /**\n * Get current selection state\n *\n * @returns Array of selected items\n * ```typescript\n * let mySelection = this.combo.selection;\n * ```\n */\n public get selection(): any[] {\n const serviceRef = this.selectionService.get(this.id);\n return serviceRef ? this.convertKeysToItems(Array.from(serviceRef)) : [];\n }\n\n /**\n * Returns if the specified itemID is selected\n *\n * @hidden\n * @internal\n */\n public isItemSelected(item: any): boolean {\n return this.selectionService.is_item_selected(this.id, item);\n }\n\n /** @hidden @internal */\n public get toggleIcon(): string {\n return this.dropdown.collapsed ? 'input_expand' : 'input_collapse';\n }\n\n /** @hidden @internal */\n public addItemToCollection() {\n if (!this.searchValue) {\n return;\n }\n const addedItem = this.displayKey ? {\n [this.valueKey]: this.searchValue,\n [this.displayKey]: this.searchValue\n } : this.searchValue;\n if (this.groupKey) {\n Object.assign(addedItem, { [this.groupKey]: this.defaultFallbackGroup });\n }\n // expose shallow copy instead of this.data in event args so this.data can't be mutated\n const oldCollection = [...this.data];\n const newCollection = [...this.data, addedItem];\n const args: IComboItemAdditionEvent = {\n oldCollection, addedItem, newCollection, owner: this, cancel: false\n };\n this.addition.emit(args);\n if (args.cancel) {\n return;\n }\n this.data.push(args.addedItem);\n // trigger re-render\n this.data = cloneArray(this.data);\n this.select(this.valueKey !== null && this.valueKey !== undefined ?\n [args.addedItem[this.valueKey]] : [args.addedItem], false);\n this.customValueFlag = false;\n this.searchInput?.nativeElement.focus();\n this.dropdown.focusedItem = null;\n this.virtDir.scrollTo(0);\n }\n\n /** @hidden @internal */\n public isAddButtonVisible(): boolean {\n // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;\n return this.searchValue !== '' && this.customValueFlag;\n }\n\n /** @hidden @internal */\n public handleInputChange(event?: any) {\n if (event !== undefined) {\n const args: IComboSearchInputEventArgs = {\n searchText: typeof event === 'string' ? event : event.target.value,\n owner: this,\n cancel: false\n };\n this.searchInputUpdate.emit(args);\n if (args.cancel) {\n this.filterValue = null;\n }\n }\n this.checkMatch();\n }\n\n /**\n * Event handlers\n *\n * @hidden\n * @internal\n */\n public handleOpening(e: IBaseCancelableBrowserEventArgs) {\n const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };\n this.opening.emit(args);\n e.cancel = args.cancel;\n }\n\n /** @hidden @internal */\n public handleClosing(e: IBaseCancelableBrowserEventArgs) {\n const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };\n this.closing.emit(args);\n e.cancel = args.cancel;\n if (e.cancel) {\n return;\n }\n this.searchValue = '';\n const isTab = (e.event as KeyboardEvent)?.key === 'Tab';\n if (!e.event || isTab) {\n this.comboInput?.nativeElement.focus();\n } else {\n this._onTouchedCallback();\n this.updateValidity();\n }\n }\n\n /** @hidden @internal */\n public handleClosed() {\n this.closed.emit({ owner: this });\n }\n\n /** @hidden @internal */\n public handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowUp' || event.key === 'Up') {\n event.preventDefault();\n event.stopPropagation();\n this.close();\n }\n if (event.key === 'Tab') {\n this.close();\n }\n }\n\n /** @hidden @internal */\n public getAriaLabel(): string {\n return this.displayValue ? this.resourceStrings.igx_combo_aria_label_options : this.resourceStrings.igx_combo_aria_label_no_options;\n }\n\n\n /** @hidden @internal */\n public registerOnChange(fn: any): void {\n this._onChangeCallback = fn;\n }\n\n /** @hidden @internal */\n public registerOnTouched(fn: any): void {\n this._onTouchedCallback = fn;\n }\n\n /** @hidden @internal */\n public setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n /** @hidden @internal */\n public onClick(event: Event) {\n event.stopPropagation();\n event.preventDefault();\n if (!this.disabled) {\n this.toggle();\n }\n }\n\n /** @hidden @internal */\n public onBlur() {\n if (this.collapsed) {\n this._onTouchedCallback();\n this.updateValidity();\n }\n }\n\n /** @hidden @internal */\n public setActiveDescendant(): void {\n this.activeDescendant = this.dropdown.focusedItem?.id || '';\n }\n\n /** @hidden @internal */\n public toggleCaseSensitive() {\n this.filteringOptions = Object.assign({}, this.filteringOptions, { caseSensitive: !this.filteringOptions.caseSensitive });\n }\n\n protected onStatusChanged = () => {\n if (this.ngControl && this.isTouchedOrDirty && !this.disabled) {\n if (this.hasValidators && (!this.collapsed || this.inputGroup.isFocused)) {\n this.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;\n } else {\n this.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;\n }\n } else {\n // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526\n this.valid = IgxInputState.INITIAL;\n }\n this.manageRequiredAsterisk();\n };\n\n private updateValidity() {\n if (this.ngControl && this.ngControl.invalid) {\n this.valid = IgxInputState.INVALID;\n } else {\n this.valid = IgxInputState.INITIAL;\n }\n }\n\n private get isTouchedOrDirty(): boolean {\n return (this.ngControl.control.touched || this.ngControl.control.dirty);\n }\n\n private get hasValidators(): boolean {\n return (!!this.ngControl.control.validator || !!this.ngControl.control.asyncValidator);\n }\n\n /** if there is a valueKey - map the keys to data items, else - just return the keys */\n protected convertKeysToItems(keys: any[]) {\n if (this.valueKey === null || this.valueKey === undefined) {\n return keys;\n }\n\n return keys.map(key => {\n const item = this.data.find(entry => isEqual(entry[this.valueKey], key));\n\n return item !== undefined ? item : { [this.valueKey]: key };\n });\n }\n\n protected checkMatch(): void {\n const itemMatch = this.filteredData.some(this.findMatch);\n this.customValueFlag = this.allowCustomValues && !itemMatch;\n }\n\n protected findMatch = (element: any): boolean => {\n const value = this.displayKey ? element[this.displayKey] : element;\n const searchValue = this.searchValue || this.comboInput?.value;\n return value?.toString().trim().toLowerCase() === searchValue.trim().toLowerCase();\n };\n\n protected manageRequiredAsterisk(): void {\n if (this.ngControl) {\n this.inputGroup.isRequired = this.required;\n }\n }\n\n /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */\n protected registerRemoteEntries(ids: any[], add = true) {\n if (add) {\n const selection = this.getValueDisplayPairs(ids);\n for (const entry of selection) {\n this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];\n }\n } else {\n for (const entry of ids) {\n delete this._remoteSelection[entry];\n }\n }\n }\n\n /**\n * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`\n */\n protected getValueDisplayPairs(ids: any[]) {\n return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({\n [this.valueKey]: e[this.valueKey],\n [this.displayKey]: e[this.displayKey]\n }));\n }\n\n protected getRemoteSelection(newSelection: any[], oldSelection: any[]): string {\n if (!newSelection.length) {\n // If new selection is empty, clear all items\n this.registerRemoteEntries(oldSelection, false);\n return '';\n }\n const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);\n const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);\n this.registerRemoteEntries(addedItems);\n this.registerRemoteEntries(removedItems, false);\n return Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');\n }\n\n protected get required(): boolean {\n if (this.ngControl && this.ngControl.control && this.ngControl.control.validator) {\n // Run the validation with empty object to check if required is enabled.\n const error = this.ngControl.control.validator({} as AbstractControl);\n return error && error.required;\n }\n\n return false;\n }\n\n public abstract get filteredData(): any[] | null;\n public abstract set filteredData(val: any[] | null);\n\n public abstract handleOpened();\n public abstract onArrowDown(event: Event);\n public abstract focusSearchInput(opening?: boolean);\n\n public abstract select(newItem: any): void;\n public abstract select(newItems: Array | any, clearCurrentSelection?: boolean, event?: Event): void;\n\n public abstract deselect(...args: [] | [items: Array, event?: Event]): void;\n\n public abstract writeValue(value: any): void;\n\n protected abstract setSelection(newSelection: Set, event?: Event): void;\n protected abstract createDisplayText(newSelection: any[], oldSelection: any[]);\n}\n","import { IgxComboItemComponent } from './combo-item.component';\nimport { Component, HostBinding } from '@angular/core';\n\n/**\n * @hidden\n */\n@Component({\n selector: 'igx-combo-add-item',\n template: '',\n providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }],\n})\nexport class IgxComboAddItemComponent extends IgxComboItemComponent {\n @HostBinding('class.igx-drop-down__item')\n public get isDropDownItem(): boolean {\n return false;\n }\n\n public override get selected(): boolean {\n return false;\n }\n public override set selected(value: boolean) {\n }\n\n public override clicked(event?) {// eslint-disable-line\n this.comboAPI.disableTransitions = false;\n this.comboAPI.add_custom_item();\n }\n}\n","import { Component, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute, inject } from '@angular/core';\nimport { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common';\nimport { IgxComboAddItemComponent } from './combo-add-item.component';\nimport { IgxComboAPIService } from './combo.api';\nimport { IgxComboItemComponent } from './combo-item.component';\nimport { IgxToggleDirective } from 'igniteui-angular/directives';\nimport { DropDownActionKey, IDropDownBase, IGX_DROPDOWN_BASE, IgxDropDownComponent, IgxDropDownItemBaseDirective } from 'igniteui-angular/drop-down';\n\n/** @hidden */\n@Component({\n selector: 'igx-combo-drop-down',\n templateUrl: '../../../drop-down/src/drop-down/drop-down.component.html',\n providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }],\n imports: [IgxToggleDirective]\n})\nexport class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit {\n public combo = inject(IGX_COMBO_COMPONENT);\n protected comboAPI = inject(IgxComboAPIService);\n\n /** @hidden @internal */\n @Input({ transform: booleanAttribute })\n public singleMode = false;\n\n /**\n * @hidden\n * @internal\n */\n @ContentChildren(IgxComboItemComponent, { descendants: true })\n public override children: QueryList = null;\n\n /** @hidden @internal */\n public override get scrollContainer(): HTMLElement {\n // TODO: Update, use public API if possible:\n return this.virtDir.dc.location.nativeElement;\n }\n\n protected get isScrolledToLast(): boolean {\n const scrollTop = this.virtDir.scrollPosition;\n const scrollHeight = this.virtDir.getScroll().scrollHeight;\n return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;\n }\n\n protected get lastVisibleIndex(): number {\n return this.combo.totalItemCount ?\n Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :\n this.items.length - 1;\n }\n\n protected get sortedChildren(): IgxDropDownItemBaseDirective[] {\n if (this.children !== undefined) {\n return this.children.toArray()\n .sort((a: IgxDropDownItemBaseDirective, b: IgxDropDownItemBaseDirective) => a.index - b.index);\n }\n return null;\n }\n\n /**\n * Get all non-header items\n *\n * ```typescript\n * let myDropDownItems = this.dropdown.items;\n * ```\n */\n public override get items(): IgxComboItemComponent[] {\n const items: IgxComboItemComponent[] = [];\n if (this.children !== undefined) {\n const sortedChildren = this.sortedChildren as IgxComboItemComponent[];\n for (const child of sortedChildren) {\n if (!child.isHeader) {\n items.push(child);\n }\n }\n }\n\n return items;\n }\n\n /**\n * @hidden @internal\n */\n public onFocus() {\n this.focusedItem = this._focusedItem || this.items[0];\n this.combo.setActiveDescendant();\n }\n\n /**\n * @hidden @internal\n */\n public onBlur(_evt?) {\n this.focusedItem = null;\n this.combo.setActiveDescendant();\n }\n\n /**\n * @hidden @internal\n */\n public override onToggleOpened() {\n this.opened.emit();\n }\n\n /**\n * @hidden\n */\n public override navigateFirst() {\n this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e?.isHeader));\n this.combo.setActiveDescendant();\n }\n\n /**\n * @hidden\n */\n public override navigatePrev() {\n if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {\n this.combo.focusSearchInput(false);\n this.focusedItem = null;\n } else {\n super.navigatePrev();\n }\n this.combo.setActiveDescendant();\n }\n\n\n /**\n * @hidden\n */\n public override navigateNext() {\n const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;\n if (this._focusedItem && this._focusedItem.index === lastIndex) {\n this.focusAddItemButton();\n } else {\n super.navigateNext();\n }\n this.combo.setActiveDescendant();\n }\n\n /**\n * @hidden @internal\n */\n public override selectItem(item: IgxDropDownItemBaseDirective) {\n if (item === null || item === undefined) {\n return;\n }\n this.comboAPI.set_selected_item(item.itemID);\n this._focusedItem = item;\n this.combo.setActiveDescendant();\n }\n\n /**\n * @hidden @internal\n */\n public override updateScrollPosition() {\n this.virtDir.getScroll().scrollTop = this._scrollPosition;\n }\n\n /**\n * @hidden @internal\n */\n public override onItemActionKey(key: DropDownActionKey, event?: KeyboardEvent) {\n switch (key) {\n case DropDownActionKey.ENTER:\n this.handleEnter();\n break;\n case DropDownActionKey.SPACE:\n this.handleSpace();\n break;\n case DropDownActionKey.ESCAPE:\n this.close();\n break;\n case DropDownActionKey.TAB:\n this.close(event);\n }\n }\n\n public override ngAfterViewInit() {\n this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);\n }\n\n /**\n * @hidden @internal\n */\n public override ngOnDestroy(): void {\n this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);\n super.ngOnDestroy();\n }\n\n protected override scrollToHiddenItem(_newItem: any): void { }\n\n protected scrollHandler = () => {\n this.comboAPI.disableTransitions = true;\n };\n\n private handleEnter() {\n if (this.isAddItemFocused()) {\n this.combo.addItemToCollection();\n return;\n }\n if (this.singleMode && this.focusedItem) {\n this.combo.select(this.focusedItem.itemID);\n }\n\n this.close();\n }\n\n private handleSpace() {\n if (this.isAddItemFocused()) {\n return;\n } else {\n this.selectItem(this.focusedItem);\n }\n }\n\n private isAddItemFocused(): boolean {\n return this.focusedItem instanceof IgxComboAddItemComponent;\n }\n\n private focusAddItemButton() {\n if (this.combo.isAddButtonVisible()) {\n this.focusedItem = this.items[this.items.length - 1];\n }\n }\n}\n","