igniteui-angular 22.2.0-rc.1 → 22.2.0

package/fesm2022/igniteui-angular-radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-radio.mjs","sources":["../../../projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts","../../../projects/igniteui-angular/radio/src/radio/radio.component.ts","../../../projects/igniteui-angular/radio/src/radio/radio.component.html","../../../projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts","../../../projects/igniteui-angular/radio/src/radio/radio-group/radio-group.module.ts","../../../projects/igniteui-angular/radio/src/igniteui-angular-radio.ts"],"sourcesContent":["import {\n    ChangeDetectorRef,\n    Directive,\n    DoCheck,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList,\n    booleanAttribute,\n    effect,\n    signal,\n    inject,\n    ElementRef,\n    Injector\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { fromEvent, noop, Subject, Subscription, takeUntil } from 'rxjs';\nimport { IgxRadioComponent } from '../radio.component';\nimport { isLeftToRight, NgControlAdapter } from 'igniteui-angular/core';\nimport { IChangeCheckboxEventArgs } from 'igniteui-angular/directives';\n/**\n * Determines the Radio Group alignment\n */\nexport const RadioGroupAlignment = {\n    horizontal: 'horizontal',\n    vertical: 'vertical'\n} as const;\nexport type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment];\n\nlet nextId = 0;\n\n/**\n * Radio group directive renders set of radio buttons.\n *\n * @igxModule IgxRadioModule\n *\n * @igxTheme igx-radio-theme\n *\n * @igxKeywords radiogroup, radio, button, input\n *\n * @igxGroup Data Entry & Display\n *\n * @remarks\n * The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side.\n *\n * @example:\n * ```html\n * <igx-radio-group name=\"radioGroup\">\n *   <igx-radio *ngFor=\"let item of ['Foo', 'Bar', 'Baz']\" value=\"{{item}}\">\n *      {{item}}\n *   </igx-radio>\n * </igx-radio-group>\n * ```\n */\n@Directive({\n    exportAs: 'igxRadioGroup',\n    selector: '[igxRadioGroup],igx-radio-group',\n    standalone: true\n})\nexport class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck {\n    public ngControl = inject(NgControl, { optional: true, self: true });\n    private control = NgControlAdapter.from(this.ngControl, inject(Injector));\n    private _statusChanges$?: Subscription;\n    private cdr = inject(ChangeDetectorRef);\n    private readonly _element = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    private _radioButtons = signal<IgxRadioComponent[]>([]);\n    private _radioButtonsList = new QueryList<IgxRadioComponent>();\n\n    /**\n     * Returns reference to the child radio buttons.\n     *\n     * @example\n     * ```typescript\n     * let radioButtons =  this.radioGroup.radioButtons;\n     * ```\n     */\n    public get radioButtons(): QueryList<IgxRadioComponent> {\n        this._radioButtonsList.reset(this._radioButtons());\n        return this._radioButtonsList;\n    }\n\n    /**\n     * Sets/gets the value attribute.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [value]=\"'radioButtonValue'\"></igx-radio-group>\n     * ```\n     */\n    @Input()\n    public get value(): any {\n        return this._value;\n    }\n\n    public set value(newValue: any) {\n        if (this._value !== newValue) {\n            this._value = newValue;\n            this._selectRadioButton();\n        }\n    }\n\n    /**\n     * Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group name = \"Radio1\"></igx-radio-group>\n     *  ```\n     */\n    @Input()\n    public get name(): string {\n        return this._name;\n    }\n\n    public set name(newValue: string) {\n        if (this._name !== newValue) {\n            this._name = newValue;\n            this._setRadioButtonNames();\n        }\n    }\n\n    /**\n     * Sets/gets whether the radio group is required.\n     *\n     * @remarks\n     * If not set, `required` will have value `false`.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [required] = \"true\"></igx-radio-group>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get required(): boolean {\n        return this._required;\n    }\n\n    public set required(value: boolean) {\n        this._required = value;\n        this._setRadioButtonsRequired();\n    }\n\n    /**\n     * Sets/gets the selected child radio button.\n     *\n     * @example\n     * ```typescript\n     * let selectedButton = this.radioGroup.selected;\n     * this.radioGroup.selected = selectedButton;\n     * ```\n     */\n    @Input()\n    public get selected() {\n        return this._selected;\n    }\n\n    public set selected(selected: IgxRadioComponent | null) {\n        if (this._selected !== selected) {\n            this._selected = selected;\n            this.value = selected ? selected.value : null;\n        }\n    }\n\n    /**\n     * Sets/gets whether the radio group is invalid.\n     *\n     * @remarks\n     * If not set, `invalid` will have value `false`.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [invalid] = \"true\"></igx-radio-group>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get invalid(): boolean {\n        return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n        this._invalid = value;\n        this._setRadioButtonsInvalid();\n    }\n\n    /**\n     * An event that is emitted after the radio group value is changed.\n     *\n     * @remarks\n     * Provides references to the selected radio and the value property as event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group (change)=\"handler($event)\"></igx-radio-group>\n     * ```\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() public readonly change: EventEmitter<IChangeCheckboxEventArgs> = new EventEmitter<IChangeCheckboxEventArgs>();\n\n    /**\n     * The css class applied to the component.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group')\n    public cssClass = 'igx-radio-group';\n\n    /**\n     * @hidden\n     * @internal\n     * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.\n     * By default the alignment is horizontal.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group alignment=\"vertical\"></igx-radio-group>\n     * ```\n     */\n    @HostBinding('class.igx-radio-group--vertical')\n    protected vertical = false;\n\n    /**\n     * A css class applied to the component if any of the\n     * child radio buttons labelPosition is set to `before`.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group--before')\n    protected get labelBefore() {\n        return this._radioButtons().some((radio) => radio.labelPosition === 'before');\n    }\n\n    /**\n     * A css class applied to the component if all\n     * child radio buttons are disabled.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group--disabled')\n    protected get disabled() {\n        return this._radioButtons().every((radio) => radio.disabled);\n    }\n\n    @HostListener('click', ['$event'])\n    protected handleClick(event: MouseEvent) {\n        event.stopPropagation();\n\n        if (this.selected) {\n            this.selected.nativeElement.focus();\n        }\n    }\n\n    @HostListener('keydown', ['$event'])\n    protected handleKeyDown(event: KeyboardEvent) {\n        const { key } = event;\n        const buttons = this._radioButtons().filter(radio => !radio.disabled);\n        const checked = buttons.find((radio) => radio.checked);\n\n        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n            let index = checked ? buttons.indexOf(checked) : -1;\n            const ltr = isLeftToRight(this._element.nativeElement);\n\n            switch (key) {\n                case 'ArrowUp':\n                    index += -1;\n                    break;\n                case 'ArrowLeft':\n                    index += ltr ? -1 : 1;\n                    break;\n                case 'ArrowRight':\n                    index += ltr ? 1 : -1;\n                    break;\n                default:\n                    index += 1;\n            }\n\n            if (index < 0) index = buttons.length - 1;\n            if (index > buttons.length - 1) index = 0;\n\n            buttons.forEach((radio) => {\n                radio.deselect();\n                radio.nativeElement.blur();\n            });\n\n            buttons[index].focused = true;\n            buttons[index].nativeElement.focus();\n            buttons[index].select();\n            event.preventDefault();\n        }\n\n        if (event.key === \"Tab\") {\n            buttons.forEach((radio) => {\n                if (radio !== checked) {\n                    event.stopPropagation();\n                }\n            });\n        }\n    }\n\n    /**\n     * Returns the alignment of the `igx-radio-group`.\n     * ```typescript\n     * @ViewChild(\"MyRadioGroup\")\n     * public radioGroup: IgxRadioGroupDirective;\n     * ngAfterViewInit(){\n     *    let radioAlignment = this.radioGroup.alignment;\n     * }\n     * ```\n     */\n    @Input()\n    public get alignment(): RadioGroupAlignment {\n        return this.vertical ? RadioGroupAlignment.vertical : RadioGroupAlignment.horizontal;\n    }\n    /**\n     * Allows you to set the radio group alignment.\n     * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`.\n     * ```typescript\n     * public alignment = RadioGroupAlignment.vertical;\n     * //..\n     * ```\n     * ```html\n     * <igx-radio-group [alignment]=\"alignment\"></igx-radio-group>\n     * ```\n     */\n    public set alignment(value: RadioGroupAlignment) {\n        this.vertical = value === RadioGroupAlignment.vertical;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _onChangeCallback: (_: any) => void = noop;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _name = `igx-radio-group-${nextId++}`;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _value: any = null;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selected: IgxRadioComponent | null = null;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _isInitialized = signal(false);\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _required = false;\n    private _disabled = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _invalid = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private destroy$ = new Subject<boolean>();\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private queryChange$ = new Subject<void>();\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private updateValidityOnBlur() {\n        this._radioButtons().forEach((button) => {\n            button.focused = false;\n\n            if (button.invalid) {\n                this.invalid = true;\n            }\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private updateOnKeyUp(event: KeyboardEvent) {\n        const checked = this._radioButtons().find(x => x.checked);\n\n        if (event.key === \"Tab\") {\n            this._radioButtons().forEach((radio) => {\n                if (radio === checked) {\n                    checked.focused = true;\n                }\n            });\n        }\n    }\n\n    public ngDoCheck(): void {\n        this._updateTabIndex();\n    }\n\n    private _updateTabIndex() {\n        // Needed so that the keyboard navigation of a radio group\n        // placed inside a dialog works properly\n        if (this._radioButtons) {\n            const checked = this._radioButtons().find(x => x.checked);\n\n            if (checked) {\n                this._radioButtons().forEach((button) => {\n                    checked.nativeElement.tabIndex = 0;\n\n                    if (button !== checked) {\n                        button.nativeElement.tabIndex = -1;\n                        button.focused = false;\n                    }\n                });\n            }\n        }\n    }\n\n    /**\n     * Sets the \"checked\" property value on the radio input element.\n     *\n     * @remarks\n     * Checks whether the provided value is consistent to the current radio button.\n     * If it is, the checked attribute will have value `true` and selected property will contain the selected radio.\n     *\n     * @example\n     * ```typescript\n     * this.radioGroup.writeValue('radioButtonValue');\n     * ```\n     */\n    public writeValue(value: any) {\n        this.value = value;\n    }\n\n    /**\n     * Registers a function called when the control value changes.\n     *\n     * @hidden\n     * @internal\n     */\n    public registerOnChange(fn: (_: any) => void) {\n        this._onChangeCallback = fn;\n    }\n\n    /**\n     * Registers a function called when the control is touched.\n     *\n     * @hidden\n     * @internal\n     */\n    public registerOnTouched(fn: () => void) {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.registerOnTouched(fn);\n            });\n        }\n    }\n\n    /** @hidden @internal */\n    public setDisabledState(isDisabled: boolean) {\n        this._disabled = isDisabled;\n        this._radioButtons().forEach((button) => button.groupDisabled = isDisabled);\n        this.cdr.markForCheck();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    constructor() {\n        if (this.ngControl !== null) {\n            this.ngControl.valueAccessor = this;\n        }\n\n        effect(() => {\n            this.initialize();\n            this.setRadioButtons();\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private initialize() {\n        // The initial value can possibly be set by NgModel and it is possible that\n        // the OnInit of the NgModel occurs after the OnInit of this class.\n        this._isInitialized.set(true);\n\n        if (this.control) {\n            // Runs inside an effect, so subscribe once.\n            this._statusChanges$ ??= this.control.statusChanges\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.invalid = false;\n                });\n\n            if (this.control.hasValidators) {\n                this._required = this.control.required;\n            }\n\n            // Buttons registered after `setDisabledState` pick the state up here.\n            if (this._disabled) {\n                this._radioButtons().forEach((button) => button.groupDisabled = true);\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private setRadioButtons() {\n        this._radioButtons().forEach((button) => {\n            Promise.resolve().then(() => {\n                button.name = this._name;\n                button.required = this._required;\n            });\n\n            if (button.value === this._value) {\n                button.checked = true;\n                this._selected = button;\n                this.cdr.markForCheck();\n            }\n\n            this._setRadioButtonEvents(button);\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonEvents(button: any) {\n        button.change.pipe(\n            takeUntil(button.destroy$),\n            takeUntil(this.destroy$),\n            takeUntil(this.queryChange$)\n        ).subscribe((ev: IChangeCheckboxEventArgs) => this._selectedRadioButtonChanged(ev));\n\n        button.blurRadio\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.updateValidityOnBlur());\n\n        fromEvent<KeyboardEvent>(button.nativeElement, 'keyup')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((event: KeyboardEvent) => this.updateOnKeyUp(event));\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selectedRadioButtonChanged(args: IChangeCheckboxEventArgs) {\n        this._radioButtons().forEach((button) => {\n            button.checked = button.id === args.owner.id;\n            if (button.checked && button.ngControl) {\n                this.invalid = button.ngControl.invalid!;\n            } else if (button.checked) {\n                this.invalid = false;\n            }\n        });\n\n        this._selected = args.owner;\n        this._value = args.value;\n\n        if (this._isInitialized()) {\n            this.change.emit(args);\n            this._onChangeCallback(this.value);\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonNames() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.name = this._name;\n            });\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selectRadioButton() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                if (this._value === null) {\n                    // no value - uncheck all radio buttons\n                    if (button.checked) {\n                        button.checked = false;\n                    }\n                } else {\n                    if (this._value === button.value) {\n                        // selected button\n                        if (this._selected !== button) {\n                            this._selected = button;\n                        }\n\n                        if (!button.checked) {\n                            button.checked = true;\n                        }\n                    } else {\n                        // non-selected button\n                        if (button.checked) {\n                            button.checked = false;\n                        }\n                    }\n                }\n            });\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonsRequired() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.required = this._required;\n            });\n        }\n    }\n\n\n    /**\n     * Registers a radio button with this radio group.\n     * This method is called by radio button components when they are created.\n     * @hidden @internal\n     */\n    public _addRadioButton(radioButton: IgxRadioComponent): void {\n        this._radioButtons.update(buttons => {\n            if (!buttons.includes(radioButton)) {\n                this._setRadioButtonEvents(radioButton);\n\n                return [...buttons, radioButton];\n            }\n            return buttons;\n        });\n    }\n\n    /**\n     * Unregisters a radio button from this radio group.\n     * This method is called by radio button components when they are destroyed.\n     * @hidden @internal\n     */\n    public _removeRadioButton(radioButton: IgxRadioComponent): void {\n        this._radioButtons.update(buttons =>\n            buttons.filter(btn => btn !== radioButton)\n        );\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonsInvalid() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.invalid = this._invalid;\n            });\n        }\n    }\n}\n","import {\n    AfterViewInit,\n    Component,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    booleanAttribute,\n    OnDestroy,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { EditorProvider, EDITOR_PROVIDER } from 'igniteui-angular/core';\nimport { CheckboxBaseDirective, IgxRippleDirective, IChangeCheckboxEventArgs } from 'igniteui-angular/directives';\nimport { IgxRadioGroupDirective } from './radio-group/radio-group.directive';\n\n/**\n * **Ignite UI for Angular Radio Button** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)\n *\n * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.\n *\n * Example:\n * ```html\n * <igx-radio>\n *   Simple radio button\n * </igx-radio>\n * ```\n */\n@Component({\n    selector: 'igx-radio',\n    providers: [{\n        provide: EDITOR_PROVIDER,\n        useExisting: IgxRadioComponent,\n        multi: true\n    }],\n    templateUrl: 'radio.component.html',\n    styleUrl: 'radio.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxRippleDirective]\n})\n\nexport class IgxRadioComponent\n    extends CheckboxBaseDirective\n    implements AfterViewInit, OnDestroy, ControlValueAccessor, EditorProvider {\n    /** @hidden @internal */\n    public blurRadio = new EventEmitter();\n\n    private radioGroup = inject(IgxRadioGroupDirective, { optional: true, skipSelf: true });\n    private _disabled = false;\n    private _groupDisabled = false;\n\n    /**\n     * Returns the class of the radio component.\n     * ```typescript\n     * let radioClass = this.radio.cssClass;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio')\n    public override cssClass = 'igx-radio';\n\n    /**\n     * Sets/gets  the `checked` attribute.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio [checked]=\"true\"></igx-radio>\n     * ```\n     * ```typescript\n     * let isChecked =  this.radio.checked;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--checked')\n    @Input({ transform: booleanAttribute })\n    public override set checked(value: boolean) {\n        this._checked = value;\n    }\n    public override get checked() {\n        return this._checked;\n    }\n\n    /**\n     * Sets/gets  the `disabled` attribute.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio disabled></igx-radio>\n     * ```\n     * ```typescript\n     * let isDisabled =  this.radio.disabled;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--disabled')\n    @Input({ transform: booleanAttribute })\n    public override get disabled(): boolean {\n        return this._disabled || this._groupDisabled;\n    }\n    public override set disabled(value: boolean) {\n        this._disabled = value;\n    }\n\n    /**\n     * Disabled state of the group's form control. Kept apart from the\n     * `disabled` input so `enable()` does not clear a template-disabled button.\n     *\n     * @hidden @internal\n     */\n    public set groupDisabled(value: boolean) {\n        this._groupDisabled = value;\n    }\n\n    /**\n     * Sets/gets whether the radio button is invalid.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio invalid></igx-radio>\n     * ```\n     * ```typescript\n     * let isInvalid =  this.radio.invalid;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--invalid')\n    @Input({ transform: booleanAttribute })\n    public override invalid = false;\n\n    /**\n     * Sets/gets whether the radio component is on focus.\n     * Default value is `false`.\n     * ```typescript\n     * this.radio.focus = true;\n     * ```\n     * ```typescript\n     * let isFocused =  this.radio.focused;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--focused')\n    public override focused = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @HostListener('change', ['$event'])\n    public _changed(event: IChangeCheckboxEventArgs) {\n        if (event instanceof Event) {\n            event.preventDefault();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    @HostListener('click')\n    public override _onCheckboxClick() {\n        this.select();\n    }\n\n    /**\n     * Selects the current radio button.\n     * ```typescript\n     * this.radio.select();\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    public select() {\n        if (!this.checked) {\n            this.checked = true;\n            this.change.emit({\n                value: this.value,\n                owner: this,\n                checked: this.checked,\n            });\n            this._onChangeCallback(this.value);\n        }\n    }\n\n    /**\n     * Deselects the current radio button.\n     * ```typescript\n     * this.radio.deselect();\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    public deselect() {\n        this.checked = false;\n        this.focused = false;\n        this.cdr.markForCheck();\n    }\n\n    /**\n     * Checks whether the provided value is consistent to the current radio button.\n     * If it is, the checked attribute will have value `true`;\n     * ```typescript\n     * this.radio.writeValue('radioButtonValue');\n     * ```\n     */\n    public override writeValue(value: any) {\n        this.value = this.value ?? value;\n\n        if (value === this.value) {\n            if (!this.checked) {\n                this.checked = true;\n            }\n        } else {\n            this.deselect();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    @HostListener('blur')\n    public override onBlur() {\n        super.onBlur();\n        this.blurRadio.emit();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public override ngAfterViewInit(): void {\n        super.ngAfterViewInit();\n\n        // Register with parent radio group if it exists\n        if (this.radioGroup) {\n            this.radioGroup._addRadioButton(this);\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngOnDestroy(): void {\n        // Unregister from parent radio group if it exists\n        if (this.radioGroup) {\n            this.radioGroup._removeRadioButton(this);\n        }\n    }\n}\n","<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n","import { IgxRadioComponent } from '../../radio/radio.component';\nimport { IgxRadioGroupDirective } from './radio-group.directive';\n\nexport * from './radio-group.directive';\n\n/* NOTE: Radio Group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_RADIO_GROUP_DIRECTIVES = [\n    IgxRadioGroupDirective,\n    IgxRadioComponent\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IgxRadioGroupDirective } from './radio-group.directive';\nimport { IgxRadioComponent } from '../radio.component';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [IgxRadioGroupDirective, IgxRadioComponent],\n    exports: [IgxRadioGroupDirective, IgxRadioComponent]\n})\nexport class IgxRadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-radio.mjs","sources":["../../../projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts","../../../projects/igniteui-angular/radio/src/radio/radio.component.ts","../../../projects/igniteui-angular/radio/src/radio/radio.component.html","../../../projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts","../../../projects/igniteui-angular/radio/src/radio/radio-group/radio-group.module.ts","../../../projects/igniteui-angular/radio/src/igniteui-angular-radio.ts"],"sourcesContent":["import {\n    ChangeDetectorRef,\n    Directive,\n    DoCheck,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList,\n    booleanAttribute,\n    effect,\n    signal,\n    inject,\n    ElementRef,\n    Injector\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { fromEvent, noop, Subject, Subscription, takeUntil } from 'rxjs';\nimport { IgxRadioComponent } from '../radio.component';\nimport { isLeftToRight, NgControlAdapter } from 'igniteui-angular/core';\nimport { IChangeCheckboxEventArgs } from 'igniteui-angular/directives';\n/**\n * Determines the Radio Group alignment\n */\nexport const RadioGroupAlignment = {\n    horizontal: 'horizontal',\n    vertical: 'vertical'\n} as const;\nexport type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment];\n\nlet nextId = 0;\n\n/**\n * Radio group directive renders set of radio buttons.\n *\n * @igxModule IgxRadioModule\n *\n * @igxTheme igx-radio-theme\n *\n * @igxKeywords radiogroup, radio, button, input\n *\n * @igxGroup Data Entry & Display\n *\n * @remarks\n * The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side.\n *\n * @example:\n * ```html\n * <igx-radio-group name=\"radioGroup\">\n *   <igx-radio *ngFor=\"let item of ['Foo', 'Bar', 'Baz']\" value=\"{{item}}\">\n *      {{item}}\n *   </igx-radio>\n * </igx-radio-group>\n * ```\n */\n@Directive({\n    exportAs: 'igxRadioGroup',\n    selector: '[igxRadioGroup],igx-radio-group',\n    standalone: true\n})\nexport class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck {\n    public ngControl = inject(NgControl, { optional: true, self: true });\n    private control = NgControlAdapter.from(this.ngControl, inject(Injector));\n    private _statusChanges$?: Subscription;\n    private cdr = inject(ChangeDetectorRef);\n    private readonly _element = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    private _radioButtons = signal<IgxRadioComponent[]>([]);\n    private _radioButtonsList = new QueryList<IgxRadioComponent>();\n\n    /**\n     * Returns reference to the child radio buttons.\n     *\n     * @example\n     * ```typescript\n     * let radioButtons =  this.radioGroup.radioButtons;\n     * ```\n     */\n    public get radioButtons(): QueryList<IgxRadioComponent> {\n        this._radioButtonsList.reset(this._radioButtons());\n        return this._radioButtonsList;\n    }\n\n    /**\n     * Sets/gets the value attribute.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [value]=\"'radioButtonValue'\"></igx-radio-group>\n     * ```\n     */\n    @Input()\n    public get value(): any {\n        return this._value;\n    }\n\n    public set value(newValue: any) {\n        if (this._value !== newValue) {\n            this._value = newValue;\n            this._selectRadioButton();\n        }\n    }\n\n    /**\n     * Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group name = \"Radio1\"></igx-radio-group>\n     *  ```\n     */\n    @Input()\n    public get name(): string {\n        return this._name;\n    }\n\n    public set name(newValue: string) {\n        if (this._name !== newValue) {\n            this._name = newValue;\n            this._setRadioButtonNames();\n        }\n    }\n\n    /**\n     * Sets/gets whether the radio group is required.\n     *\n     * @remarks\n     * If not set, `required` will have value `false`.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [required] = \"true\"></igx-radio-group>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get required(): boolean {\n        return this._required;\n    }\n\n    public set required(value: boolean) {\n        this._required = value;\n        this._setRadioButtonsRequired();\n    }\n\n    /**\n     * Sets/gets the selected child radio button.\n     *\n     * @example\n     * ```typescript\n     * let selectedButton = this.radioGroup.selected;\n     * this.radioGroup.selected = selectedButton;\n     * ```\n     */\n    @Input()\n    public get selected() {\n        return this._selected;\n    }\n\n    public set selected(selected: IgxRadioComponent | null) {\n        if (this._selected !== selected) {\n            this._selected = selected;\n            this.value = selected ? selected.value : null;\n        }\n    }\n\n    /**\n     * Sets/gets whether the radio group is invalid.\n     *\n     * @remarks\n     * If not set, `invalid` will have value `false`.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group [invalid] = \"true\"></igx-radio-group>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get invalid(): boolean {\n        return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n        this._invalid = value;\n        this._setRadioButtonsInvalid();\n    }\n\n    /**\n     * An event that is emitted after the radio group value is changed.\n     *\n     * @remarks\n     * Provides references to the selected radio and the value property as event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group (change)=\"handler($event)\"></igx-radio-group>\n     * ```\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() public readonly change: EventEmitter<IChangeCheckboxEventArgs> = new EventEmitter<IChangeCheckboxEventArgs>();\n\n    /**\n     * The css class applied to the component.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group')\n    public cssClass = 'igx-radio-group';\n\n    /**\n     * @hidden\n     * @internal\n     * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.\n     * By default the alignment is horizontal.\n     *\n     * @example\n     * ```html\n     * <igx-radio-group alignment=\"vertical\"></igx-radio-group>\n     * ```\n     */\n    @HostBinding('class.igx-radio-group--vertical')\n    protected vertical = false;\n\n    /**\n     * A css class applied to the component if any of the\n     * child radio buttons labelPosition is set to `before`.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group--before')\n    protected get labelBefore() {\n        return this._radioButtons().some((radio) => radio.labelPosition === 'before');\n    }\n\n    /**\n     * A css class applied to the component if all\n     * child radio buttons are disabled.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-radio-group--disabled')\n    protected get disabled() {\n        return this._radioButtons().every((radio) => radio.disabled);\n    }\n\n    @HostListener('click', ['$event'])\n    protected handleClick(event: MouseEvent) {\n        event.stopPropagation();\n\n        if (this.selected) {\n            this.selected.nativeElement.focus();\n        }\n    }\n\n    @HostListener('keydown', ['$event'])\n    protected handleKeyDown(event: KeyboardEvent) {\n        const { key } = event;\n        const buttons = this._radioButtons().filter(radio => !radio.disabled);\n        const checked = buttons.find((radio) => radio.checked);\n\n        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n            let index = checked ? buttons.indexOf(checked) : -1;\n            const ltr = isLeftToRight(this._element.nativeElement);\n\n            switch (key) {\n                case 'ArrowUp':\n                    index += -1;\n                    break;\n                case 'ArrowLeft':\n                    index += ltr ? -1 : 1;\n                    break;\n                case 'ArrowRight':\n                    index += ltr ? 1 : -1;\n                    break;\n                default:\n                    index += 1;\n            }\n\n            if (index < 0) index = buttons.length - 1;\n            if (index > buttons.length - 1) index = 0;\n\n            buttons.forEach((radio) => {\n                radio.deselect();\n                radio.nativeElement.blur();\n            });\n\n            buttons[index].focused = true;\n            buttons[index].nativeElement.focus();\n            buttons[index].select();\n            event.preventDefault();\n        }\n\n        if (event.key === \"Tab\") {\n            buttons.forEach((radio) => {\n                if (radio !== checked) {\n                    event.stopPropagation();\n                }\n            });\n        }\n    }\n\n    /**\n     * Returns the alignment of the `igx-radio-group`.\n     * ```typescript\n     * @ViewChild(\"MyRadioGroup\")\n     * public radioGroup: IgxRadioGroupDirective;\n     * ngAfterViewInit(){\n     *    let radioAlignment = this.radioGroup.alignment;\n     * }\n     * ```\n     */\n    @Input()\n    public get alignment(): RadioGroupAlignment {\n        return this.vertical ? RadioGroupAlignment.vertical : RadioGroupAlignment.horizontal;\n    }\n    /**\n     * Allows you to set the radio group alignment.\n     * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`.\n     * ```typescript\n     * public alignment = RadioGroupAlignment.vertical;\n     * //..\n     * ```\n     * ```html\n     * <igx-radio-group [alignment]=\"alignment\"></igx-radio-group>\n     * ```\n     */\n    public set alignment(value: RadioGroupAlignment) {\n        this.vertical = value === RadioGroupAlignment.vertical;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _onChangeCallback: (_: any) => void = noop;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _onTouchedCallback: () => void = noop;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _name = `igx-radio-group-${nextId++}`;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _value: any = null;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selected: IgxRadioComponent | null = null;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _isInitialized = signal(false);\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _required = false;\n    private _disabled = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _invalid = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private destroy$ = new Subject<boolean>();\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private queryChange$ = new Subject<void>();\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private updateValidityOnBlur() {\n        this._onTouchedCallback();\n\n        this._radioButtons().forEach((button) => {\n            button.focused = false;\n\n            if (button.invalid) {\n                this.invalid = true;\n            }\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private updateOnKeyUp(event: KeyboardEvent) {\n        const checked = this._radioButtons().find(x => x.checked);\n\n        if (event.key === \"Tab\") {\n            this._radioButtons().forEach((radio) => {\n                if (radio === checked) {\n                    checked.focused = true;\n                }\n            });\n        }\n    }\n\n    public ngDoCheck(): void {\n        this._updateTabIndex();\n    }\n\n    private _updateTabIndex() {\n        // Needed so that the keyboard navigation of a radio group\n        // placed inside a dialog works properly\n        if (this._radioButtons) {\n            const checked = this._radioButtons().find(x => x.checked);\n\n            if (checked) {\n                this._radioButtons().forEach((button) => {\n                    checked.nativeElement.tabIndex = 0;\n\n                    if (button !== checked) {\n                        button.nativeElement.tabIndex = -1;\n                        button.focused = false;\n                    }\n                });\n            }\n        }\n    }\n\n    /**\n     * Sets the \"checked\" property value on the radio input element.\n     *\n     * @remarks\n     * Checks whether the provided value is consistent to the current radio button.\n     * If it is, the checked attribute will have value `true` and selected property will contain the selected radio.\n     *\n     * @example\n     * ```typescript\n     * this.radioGroup.writeValue('radioButtonValue');\n     * ```\n     */\n    public writeValue(value: any) {\n        this.value = value;\n    }\n\n    /**\n     * Registers a function called when the control value changes.\n     *\n     * @hidden\n     * @internal\n     */\n    public registerOnChange(fn: (_: any) => void) {\n        this._onChangeCallback = fn;\n    }\n\n    /**\n     * Registers a function called when the control is touched.\n     *\n     * @hidden\n     * @internal\n     */\n    public registerOnTouched(fn: () => void) {\n        // Invoked on child blur, as forms register it before the child radio buttons exist.\n        this._onTouchedCallback = fn;\n    }\n\n    /** @hidden @internal */\n    public setDisabledState(isDisabled: boolean) {\n        this._disabled = isDisabled;\n        this._radioButtons().forEach((button) => button.groupDisabled = isDisabled);\n        this.cdr.markForCheck();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    constructor() {\n        if (this.ngControl !== null) {\n            this.ngControl.valueAccessor = this;\n        }\n\n        effect(() => {\n            this.initialize();\n            this.setRadioButtons();\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private initialize() {\n        // The initial value can possibly be set by NgModel and it is possible that\n        // the OnInit of the NgModel occurs after the OnInit of this class.\n        this._isInitialized.set(true);\n\n        const control = this.control;\n\n        if (control) {\n            // Runs inside an effect, so subscribe once.\n            // Signal Forms also emit on touch, so re-evaluate rather than reset the state set on blur.\n            this._statusChanges$ ??= control.statusChanges\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.invalid = !control.disabled && control.touchedOrDirty && control.invalid;\n                });\n\n            if (control.hasValidators) {\n                this._required = control.required;\n            }\n\n            // Buttons registered after `setDisabledState` pick the state up here.\n            if (this._disabled) {\n                this._radioButtons().forEach((button) => button.groupDisabled = true);\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private setRadioButtons() {\n        this._radioButtons().forEach((button) => {\n            Promise.resolve().then(() => {\n                button.name = this._name;\n                button.required = this._required;\n            });\n\n            if (button.value === this._value) {\n                button.checked = true;\n                this._selected = button;\n                this.cdr.markForCheck();\n            }\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonEvents(button: any) {\n        button.change.pipe(\n            takeUntil(button.destroy$),\n            takeUntil(this.destroy$),\n            takeUntil(this.queryChange$)\n        ).subscribe((ev: IChangeCheckboxEventArgs) => this._selectedRadioButtonChanged(ev));\n\n        button.blurRadio\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.updateValidityOnBlur());\n\n        fromEvent<KeyboardEvent>(button.nativeElement, 'keyup')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((event: KeyboardEvent) => this.updateOnKeyUp(event));\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selectedRadioButtonChanged(args: IChangeCheckboxEventArgs) {\n        this._radioButtons().forEach((button) => {\n            button.checked = button.id === args.owner.id;\n            if (button.checked && button.ngControl) {\n                this.invalid = button.ngControl.invalid!;\n            } else if (button.checked) {\n                this.invalid = false;\n            }\n        });\n\n        this._selected = args.owner;\n        this._value = args.value;\n\n        if (this._isInitialized()) {\n            this.change.emit(args);\n            this._onChangeCallback(this.value);\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonNames() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.name = this._name;\n            });\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _selectRadioButton() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                if (this._value === null) {\n                    // no value - uncheck all radio buttons\n                    if (button.checked) {\n                        button.checked = false;\n                    }\n                } else {\n                    if (this._value === button.value) {\n                        // selected button\n                        if (this._selected !== button) {\n                            this._selected = button;\n                        }\n\n                        if (!button.checked) {\n                            button.checked = true;\n                        }\n                    } else {\n                        // non-selected button\n                        if (button.checked) {\n                            button.checked = false;\n                        }\n                    }\n                }\n            });\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonsRequired() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.required = this._required;\n            });\n        }\n    }\n\n\n    /**\n     * Registers a radio button with this radio group.\n     * This method is called by radio button components when they are created.\n     * @hidden @internal\n     */\n    public _addRadioButton(radioButton: IgxRadioComponent): void {\n        this._radioButtons.update(buttons => {\n            if (!buttons.includes(radioButton)) {\n                this._setRadioButtonEvents(radioButton);\n\n                return [...buttons, radioButton];\n            }\n            return buttons;\n        });\n    }\n\n    /**\n     * Unregisters a radio button from this radio group.\n     * This method is called by radio button components when they are destroyed.\n     * @hidden @internal\n     */\n    public _removeRadioButton(radioButton: IgxRadioComponent): void {\n        this._radioButtons.update(buttons =>\n            buttons.filter(btn => btn !== radioButton)\n        );\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _setRadioButtonsInvalid() {\n        if (this._radioButtons) {\n            this._radioButtons().forEach((button) => {\n                button.invalid = this._invalid;\n            });\n        }\n    }\n}\n","import {\n    AfterViewInit,\n    Component,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    booleanAttribute,\n    OnDestroy,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { EditorProvider, EDITOR_PROVIDER } from 'igniteui-angular/core';\nimport { CheckboxBaseDirective, IgxRippleDirective, IChangeCheckboxEventArgs } from 'igniteui-angular/directives';\nimport { IgxRadioGroupDirective } from './radio-group/radio-group.directive';\n\n/**\n * **Ignite UI for Angular Radio Button** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)\n *\n * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.\n *\n * Example:\n * ```html\n * <igx-radio>\n *   Simple radio button\n * </igx-radio>\n * ```\n */\n@Component({\n    selector: 'igx-radio',\n    providers: [{\n        provide: EDITOR_PROVIDER,\n        useExisting: IgxRadioComponent,\n        multi: true\n    }],\n    templateUrl: 'radio.component.html',\n    styleUrl: 'radio.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxRippleDirective]\n})\n\nexport class IgxRadioComponent\n    extends CheckboxBaseDirective\n    implements AfterViewInit, OnDestroy, ControlValueAccessor, EditorProvider {\n    /** @hidden @internal */\n    public blurRadio = new EventEmitter();\n\n    private radioGroup = inject(IgxRadioGroupDirective, { optional: true, skipSelf: true });\n    private _disabled = false;\n    private _groupDisabled = false;\n\n    /**\n     * Returns the class of the radio component.\n     * ```typescript\n     * let radioClass = this.radio.cssClass;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio')\n    public override cssClass = 'igx-radio';\n\n    /**\n     * Sets/gets  the `checked` attribute.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio [checked]=\"true\"></igx-radio>\n     * ```\n     * ```typescript\n     * let isChecked =  this.radio.checked;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--checked')\n    @Input({ transform: booleanAttribute })\n    public override set checked(value: boolean) {\n        this._checked = value;\n    }\n    public override get checked() {\n        return this._checked;\n    }\n\n    /**\n     * Sets/gets  the `disabled` attribute.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio disabled></igx-radio>\n     * ```\n     * ```typescript\n     * let isDisabled =  this.radio.disabled;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--disabled')\n    @Input({ transform: booleanAttribute })\n    public override get disabled(): boolean {\n        return this._disabled || this._groupDisabled;\n    }\n    public override set disabled(value: boolean) {\n        this._disabled = value;\n    }\n\n    /**\n     * Disabled state of the group's form control. Kept apart from the\n     * `disabled` input so `enable()` does not clear a template-disabled button.\n     *\n     * @hidden @internal\n     */\n    public set groupDisabled(value: boolean) {\n        this._groupDisabled = value;\n    }\n\n    /**\n     * Sets/gets whether the radio button is invalid.\n     * Default value is `false`.\n     * ```html\n     * <igx-radio invalid></igx-radio>\n     * ```\n     * ```typescript\n     * let isInvalid =  this.radio.invalid;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--invalid')\n    @Input({ transform: booleanAttribute })\n    public override invalid = false;\n\n    /**\n     * Sets/gets whether the radio component is on focus.\n     * Default value is `false`.\n     * ```typescript\n     * this.radio.focus = true;\n     * ```\n     * ```typescript\n     * let isFocused =  this.radio.focused;\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    @HostBinding('class.igx-radio--focused')\n    public override focused = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @HostListener('change', ['$event'])\n    public _changed(event: IChangeCheckboxEventArgs) {\n        if (event instanceof Event) {\n            event.preventDefault();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    @HostListener('click')\n    public override _onCheckboxClick() {\n        this.select();\n    }\n\n    /**\n     * Selects the current radio button.\n     * ```typescript\n     * this.radio.select();\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    public select() {\n        if (!this.checked) {\n            this.checked = true;\n            this.change.emit({\n                value: this.value,\n                owner: this,\n                checked: this.checked,\n            });\n            this._onChangeCallback(this.value);\n        }\n    }\n\n    /**\n     * Deselects the current radio button.\n     * ```typescript\n     * this.radio.deselect();\n     * ```\n     *\n     * @memberof IgxRadioComponent\n     */\n    public deselect() {\n        this.checked = false;\n        this.focused = false;\n        this.cdr.markForCheck();\n    }\n\n    /**\n     * Checks whether the provided value is consistent to the current radio button.\n     * If it is, the checked attribute will have value `true`;\n     * ```typescript\n     * this.radio.writeValue('radioButtonValue');\n     * ```\n     */\n    public override writeValue(value: any) {\n        this.value = this.value ?? value;\n\n        if (value === this.value) {\n            if (!this.checked) {\n                this.checked = true;\n            }\n        } else {\n            this.deselect();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    @HostListener('blur')\n    public override onBlur() {\n        super.onBlur();\n        this.blurRadio.emit();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public override ngAfterViewInit(): void {\n        super.ngAfterViewInit();\n\n        // Register with parent radio group if it exists\n        if (this.radioGroup) {\n            this.radioGroup._addRadioButton(this);\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngOnDestroy(): void {\n        // Unregister from parent radio group if it exists\n        if (this.radioGroup) {\n            this.radioGroup._removeRadioButton(this);\n        }\n    }\n}\n","<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n","import { IgxRadioComponent } from '../../radio/radio.component';\nimport { IgxRadioGroupDirective } from './radio-group.directive';\n\nexport * from './radio-group.directive';\n\n/* NOTE: Radio Group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_RADIO_GROUP_DIRECTIVES = [\n    IgxRadioGroupDirective,\n    IgxRadioComponent\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IgxRadioGroupDirective } from './radio-group.directive';\nimport { IgxRadioComponent } from '../radio.component';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [IgxRadioGroupDirective, IgxRadioComponent],\n    exports: [IgxRadioGroupDirective, IgxRadioComponent]\n})\nexport class IgxRadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;AAuBA;;AAEG;AACI,MAAM,mBAAmB,GAAG;AAC/B,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,QAAQ,EAAE;;AAId,IAAI,MAAM,GAAG,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAMU,sBAAsB,CAAA;AAU/B;;;;;;;AAOG;AACH,IAAA,IAAW,YAAY,GAAA;QACnB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC,iBAAiB;IACjC;AAEA;;;;;;;AAOG;AACH,IAAA,IACW,KAAK,GAAA;QACZ,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAW,KAAK,CAAC,QAAa,EAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;AAC1B,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;YACtB,IAAI,CAAC,kBAAkB,EAAE;QAC7B;IACJ;AAEA;;;;;;;AAOG;AACH,IAAA,IACW,IAAI,GAAA;QACX,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAW,IAAI,CAAC,QAAgB,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;YACrB,IAAI,CAAC,oBAAoB,EAAE;QAC/B;IACJ;AAEA;;;;;;;;;;AAUG;AACH,IAAA,IACW,QAAQ,GAAA;QACf,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAW,QAAQ,CAAC,KAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,wBAAwB,EAAE;IACnC;AAEA;;;;;;;;AAQG;AACH,IAAA,IACW,QAAQ,GAAA;QACf,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAW,QAAQ,CAAC,QAAkC,EAAA;AAClD,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI;QACjD;IACJ;AAEA;;;;;;;;;;AAUG;AACH,IAAA,IACW,OAAO,GAAA;QACd,OAAO,IAAI,CAAC,QAAQ;IACxB;IAEA,IAAW,OAAO,CAAC,KAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACrB,IAAI,CAAC,uBAAuB,EAAE;IAClC;AAuCA;;;;;;AAMG;AACH,IAAA,IACc,WAAW,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC;IACjF;AAEA;;;;;;AAMG;AACH,IAAA,IACc,QAAQ,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC;IAChE;AAGU,IAAA,WAAW,CAAC,KAAiB,EAAA;QACnC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE;QACvC;IACJ;AAGU,IAAA,aAAa,CAAC,KAAoB,EAAA;AACxC,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK;AACrB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACrE,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC;AAEtD,QAAA,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACnE,YAAA,IAAI,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACnD,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;YAEtD,QAAQ,GAAG;AACP,gBAAA,KAAK,SAAS;oBACV,KAAK,IAAI,CAAC,CAAC;oBACX;AACJ,gBAAA,KAAK,WAAW;oBACZ,KAAK,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;oBACrB;AACJ,gBAAA,KAAK,YAAY;oBACb,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;oBACrB;AACJ,gBAAA;oBACI,KAAK,IAAI,CAAC;;YAGlB,IAAI,KAAK,GAAG,CAAC;AAAE,gBAAA,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC;AACzC,YAAA,IAAI,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC;gBAAE,KAAK,GAAG,CAAC;AAEzC,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;gBACtB,KAAK,CAAC,QAAQ,EAAE;AAChB,gBAAA,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAC9B,YAAA,CAAC,CAAC;AAEF,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI;YAC7B,OAAO,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;AACpC,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE;QAC1B;AAEA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AACrB,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACtB,gBAAA,IAAI,KAAK,KAAK,OAAO,EAAE;oBACnB,KAAK,CAAC,eAAe,EAAE;gBAC3B;AACJ,YAAA,CAAC,CAAC;QACN;IACJ;AAEA;;;;;;;;;AASG;AACH,IAAA,IACW,SAAS,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,QAAQ,GAAG,mBAAmB,CAAC,QAAQ,GAAG,mBAAmB,CAAC,UAAU;IACxF;AACA;;;;;;;;;;AAUG;IACH,IAAW,SAAS,CAAC,KAA0B,EAAA;QAC3C,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,mBAAmB,CAAC,QAAQ;IAC1D;AA+DA;;;AAGG;IACK,oBAAoB,GAAA;QACxB,IAAI,CAAC,kBAAkB,EAAE;QAEzB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,YAAA,MAAM,CAAC,OAAO,GAAG,KAAK;AAEtB,YAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACvB;AACJ,QAAA,CAAC,CAAC;IACN;AAEA;;;AAGG;AACK,IAAA,aAAa,CAAC,KAAoB,EAAA;AACtC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;AAEzD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACnC,gBAAA,IAAI,KAAK,KAAK,OAAO,EAAE;AACnB,oBAAA,OAAO,CAAC,OAAO,GAAG,IAAI;gBAC1B;AACJ,YAAA,CAAC,CAAC;QACN;IACJ;IAEO,SAAS,GAAA;QACZ,IAAI,CAAC,eAAe,EAAE;IAC1B;IAEQ,eAAe,GAAA;;;AAGnB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;YAEzD,IAAI,OAAO,EAAE;gBACT,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,oBAAA,OAAO,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC;AAElC,oBAAA,IAAI,MAAM,KAAK,OAAO,EAAE;AACpB,wBAAA,MAAM,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;AAClC,wBAAA,MAAM,CAAC,OAAO,GAAG,KAAK;oBAC1B;AACJ,gBAAA,CAAC,CAAC;YACN;QACJ;IACJ;AAEA;;;;;;;;;;;AAWG;AACI,IAAA,UAAU,CAAC,KAAU,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;IACtB;AAEA;;;;;AAKG;AACI,IAAA,gBAAgB,CAAC,EAAoB,EAAA;AACxC,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;IAC/B;AAEA;;;;;AAKG;AACI,IAAA,iBAAiB,CAAC,EAAc,EAAA;;AAEnC,QAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE;IAChC;;AAGO,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU;AAC3B,QAAA,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,aAAa,GAAG,UAAU,CAAC;AAC3E,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IAC3B;AAEA;;;AAGG;IACI,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;IAC5B;AAEA,IAAA,WAAA,GAAA;AAxbO,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC5D,QAAA,IAAA,CAAA,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEjE,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AACtB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAA0B,UAAU,CAAC;QAE/D,IAAA,CAAA,aAAa,GAAG,MAAM,CAAsB,EAAE;0FAAC;AAC/C,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,SAAS,EAAqB;AAsH9D;;;;;;;;;;AAUG;;AAEuB,QAAA,IAAA,CAAA,MAAM,GAA2C,IAAI,YAAY,EAA4B;AAEvH;;;;;AAKG;QAEI,IAAA,CAAA,QAAQ,GAAG,iBAAiB;AAEnC;;;;;;;;;;AAUG;QAEO,IAAA,CAAA,QAAQ,GAAG,KAAK;AA+G1B;;;AAGG;QACK,IAAA,CAAA,iBAAiB,GAAqB,IAAI;AAElD;;;AAGG;QACK,IAAA,CAAA,kBAAkB,GAAe,IAAI;AAE7C;;;AAGG;AACK,QAAA,IAAA,CAAA,KAAK,GAAG,CAAA,gBAAA,EAAmB,MAAM,EAAE,EAAE;AAE7C;;;AAGG;QACK,IAAA,CAAA,MAAM,GAAQ,IAAI;AAE1B;;;AAGG;QACK,IAAA,CAAA,SAAS,GAA6B,IAAI;AAElD;;;AAGG;QACK,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,KAAK;2FAAC;AAEtC;;;AAGG;QACK,IAAA,CAAA,SAAS,GAAG,KAAK;QACjB,IAAA,CAAA,SAAS,GAAG,KAAK;AAEzB;;;AAGG;QACK,IAAA,CAAA,QAAQ,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAW;AAEzC;;;AAGG;AACK,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;AA+GtC,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACvC;QAEA,MAAM,CAAC,MAAK;YACR,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,eAAe,EAAE;AAC1B,QAAA,CAAC,CAAC;IACN;AAEA;;;AAGG;IACK,UAAU,GAAA;;;AAGd,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;AAE7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;QAE5B,IAAI,OAAO,EAAE;;;AAGT,YAAA,IAAI,CAAC,eAAe,KAAK,OAAO,CAAC;AAC5B,iBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC7B,SAAS,CAAC,MAAK;AACZ,gBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO;AACjF,YAAA,CAAC,CAAC;AAEN,YAAA,IAAI,OAAO,CAAC,aAAa,EAAE;AACvB,gBAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ;YACrC;;AAGA,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,gBAAA,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC;YACzE;QACJ;IACJ;AAEA;;;AAGG;IACK,eAAe,GAAA;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AACxB,gBAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK;AACxB,gBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS;AACpC,YAAA,CAAC,CAAC;YAEF,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;AAC9B,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACrB,gBAAA,IAAI,CAAC,SAAS,GAAG,MAAM;AACvB,gBAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;YAC3B;AACJ,QAAA,CAAC,CAAC;IACN;AAEA;;;AAGG;AACK,IAAA,qBAAqB,CAAC,MAAW,EAAA;AACrC,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CACd,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAC1B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAC/B,CAAC,SAAS,CAAC,CAAC,EAA4B,KAAK,IAAI,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC;AAEnF,QAAA,MAAM,CAAC;AACF,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAEjD,QAAA,SAAS,CAAgB,MAAM,CAAC,aAAa,EAAE,OAAO;AACjD,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7B,aAAA,SAAS,CAAC,CAAC,KAAoB,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvE;AAEA;;;AAGG;AACK,IAAA,2BAA2B,CAAC,IAA8B,EAAA;QAC9D,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,YAAA,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE;YAC5C,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,SAAS,EAAE;gBACpC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,OAAQ;YAC5C;AAAO,iBAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AACvB,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;YACxB;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK;AAExB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACtB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC;IACJ;AAEA;;;AAGG;IACK,oBAAoB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,gBAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK;AAC5B,YAAA,CAAC,CAAC;QACN;IACJ;AAEA;;;AAGG;IACK,kBAAkB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,gBAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;;AAEtB,oBAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AAChB,wBAAA,MAAM,CAAC,OAAO,GAAG,KAAK;oBAC1B;gBACJ;qBAAO;oBACH,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE;;AAE9B,wBAAA,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE;AAC3B,4BAAA,IAAI,CAAC,SAAS,GAAG,MAAM;wBAC3B;AAEA,wBAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACjB,4BAAA,MAAM,CAAC,OAAO,GAAG,IAAI;wBACzB;oBACJ;yBAAO;;AAEH,wBAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AAChB,4BAAA,MAAM,CAAC,OAAO,GAAG,KAAK;wBAC1B;oBACJ;gBACJ;AACJ,YAAA,CAAC,CAAC;QACN;IACJ;AAEA;;;AAGG;IACK,wBAAwB,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,gBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS;AACpC,YAAA,CAAC,CAAC;QACN;IACJ;AAGA;;;;AAIG;AACI,IAAA,eAAe,CAAC,WAA8B,EAAA;AACjD,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,IAAG;YAChC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;AAChC,gBAAA,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAC;AAEvC,gBAAA,OAAO,CAAC,GAAG,OAAO,EAAE,WAAW,CAAC;YACpC;AACA,YAAA,OAAO,OAAO;AAClB,QAAA,CAAC,CAAC;IACN;AAEA;;;;AAIG;AACI,IAAA,kBAAkB,CAAC,WAA8B,EAAA;QACpD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,IAC7B,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,WAAW,CAAC,CAC7C;IACL;AAEA;;;AAGG;IACK,uBAAuB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AACpC,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ;AAClC,YAAA,CAAC,CAAC;QACN;IACJ;8GAhoBS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EA0EX,gBAAgB,CAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EA0ChB,gBAAgB,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,+BAAA,EAAA,kBAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FApH3B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,iCAAiC;AAC3C,oBAAA,UAAU,EAAE;AACf,iBAAA;;sBAgCI;;sBAoBA;;sBAuBA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAmBrC;;sBAuBA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAsBrC;;sBAQA,WAAW;uBAAC,uBAAuB;;sBAcnC,WAAW;uBAAC,iCAAiC;;sBAU7C,WAAW;uBAAC,+BAA+B;;sBAY3C,WAAW;uBAAC,iCAAiC;;sBAK7C,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;sBAShC,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC;;sBAyDlC;;;ACzSL;;;;;;;;;;;;AAYG;AAeG,MAAO,iBACT,SAAQ,qBAAqB,CAAA;AAfjC,IAAA,WAAA,GAAA;;;AAkBW,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAE;AAE7B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC/E,IAAA,CAAA,SAAS,GAAG,KAAK;QACjB,IAAA,CAAA,cAAc,GAAG,KAAK;AAE9B;;;;;;;AAOG;QAEa,IAAA,CAAA,QAAQ,GAAG,WAAW;AAsDtC;;;;;;;;;;;AAWG;QAGa,IAAA,CAAA,OAAO,GAAG,KAAK;AAE/B;;;;;;;;;;;AAWG;QAEa,IAAA,CAAA,OAAO,GAAG,KAAK;AA0GlC,IAAA;AA3LG;;;;;;;;;;;AAWG;IACH,IAEoB,OAAO,CAAC,KAAc,EAAA;AACtC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;IACzB;AACA,IAAA,IAAoB,OAAO,GAAA;QACvB,OAAO,IAAI,CAAC,QAAQ;IACxB;AAEA;;;;;;;;;;;AAWG;AACH,IAAA,IAEoB,QAAQ,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc;IAChD;IACA,IAAoB,QAAQ,CAAC,KAAc,EAAA;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;IAC1B;AAEA;;;;;AAKG;IACH,IAAW,aAAa,CAAC,KAAc,EAAA;AACnC,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;IAC/B;AAiCA;;;AAGG;AAEI,IAAA,QAAQ,CAAC,KAA+B,EAAA;AAC3C,QAAA,IAAI,KAAK,YAAY,KAAK,EAAE;YACxB,KAAK,CAAC,cAAc,EAAE;QAC1B;IACJ;AAEA;;AAEG;IAEa,gBAAgB,GAAA;QAC5B,IAAI,CAAC,MAAM,EAAE;IACjB;AAEA;;;;;;;AAOG;IACI,MAAM,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACxB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC;IACJ;AAEA;;;;;;;AAOG;IACI,QAAQ,GAAA;AACX,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IAC3B;AAEA;;;;;;AAMG;AACa,IAAA,UAAU,CAAC,KAAU,EAAA;QACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK;AAEhC,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACf,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACvB;QACJ;aAAO;YACH,IAAI,CAAC,QAAQ,EAAE;QACnB;IACJ;AAEA;;AAEG;IAEa,MAAM,GAAA;QAClB,KAAK,CAAC,MAAM,EAAE;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;IACzB;AAEA;;;AAGG;IACa,eAAe,GAAA;QAC3B,KAAK,CAAC,eAAe,EAAE;;AAGvB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC;QACzC;IACJ;AAEA;;;AAGG;IACI,WAAW,GAAA;;AAEd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC5C;IACJ;8GA/MS,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,uFAkCN,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAqBhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EA+BhB,gBAAgB,gWAlGzB,CAAC;AACR,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,KAAK,EAAE;aACV,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrCN,s2BA4BA,EAAA,MAAA,EAAA,CAAA,o4hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDcc,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAd7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,aACV,CAAC;AACR,4BAAA,OAAO,EAAE,eAAe;AACxB,4BAAA,WAAW,EAAA,iBAAmB;AAC9B,4BAAA,KAAK,EAAE;yBACV,CAAC,EAAA,aAAA,EAGa,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,KAAK,EAAA,OAAA,EACrC,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,s2BAAA,EAAA,MAAA,EAAA,CAAA,o4hBAAA,CAAA,EAAA;;sBAqB5B,WAAW;uBAAC,iBAAiB;;sBAe7B,WAAW;uBAAC,0BAA0B;;sBACtC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAoBrC,WAAW;uBAAC,2BAA2B;;sBACvC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBA8BrC,WAAW;uBAAC,0BAA0B;;sBACtC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAerC,WAAW;uBAAC,0BAA0B;;sBAOtC,YAAY;uBAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;;sBAUjC,YAAY;uBAAC,OAAO;;sBA6DpB,YAAY;uBAAC,MAAM;;;AE3NxB;AACO,MAAM,0BAA0B,GAAG;IACtC,sBAAsB;IACtB;;;ACJJ;;;;AAIG;MAKU,cAAc,CAAA;8GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHb,sBAAsB,EAAE,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACzC,sBAAsB,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA;+GAE1C,cAAc,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;AACpD,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,iBAAiB;AACtD,iBAAA;;;ACZD;;AAEG;;;;"}

package/fesm2022/igniteui-angular-select.mjs

@@ -17,13 +17,13 @@ import { fadeOut, fadeIn } from 'igniteui-angular/animations';
  * a `<igx-select>` container.
  */
 class IgxSelectGroupComponent extends IgxDropDownGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectGroupComponent, isStandalone: true, selector: "igx-select-item-group", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectGroupComponent, isStandalone: true, selector: "igx-select-item-group", usesInheritance: true, ngImport: i0, template: `
         <label id="{{labelId}}">{{ label }}</label>
         <ng-content select="igx-select-item"></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-select-item-group',
@@ -81,10 +81,10 @@ class IgxSelectItemComponent extends IgxDropDownItemComponent {
             this.dropDown.selectItem(this);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectItemComponent, isStandalone: true, selector: "igx-select-item", inputs: { text: "text" }, usesInheritance: true, ngImport: i0, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectItemComponent, isStandalone: true, selector: "igx-select-item", inputs: { text: "text" }, usesInheritance: true, ngImport: i0, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-select-item', changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</span>\n" }]
         }], propDecorators: { text: [{
@@ -194,10 +194,10 @@ class IgxSelectItemNavigationDirective extends IgxDropDownItemNavigationDirectiv
         return items.slice(activeItemIndex + 1).find(x => !x.disabled && (x.itemText.toLowerCase().startsWith(text.toLowerCase()))) ||
             items.slice(0, activeItemIndex).find(x => !x.disabled && (x.itemText.toLowerCase().startsWith(text.toLowerCase())));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectItemNavigationDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectItemNavigationDirective, isStandalone: true, selector: "[igxSelectItemNavigation]", inputs: { target: ["igxSelectItemNavigation", "target"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectItemNavigationDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectItemNavigationDirective, isStandalone: true, selector: "[igxSelectItemNavigation]", inputs: { target: ["igxSelectItemNavigation", "target"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectItemNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectItemNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSelectItemNavigation]',
@@ -210,10 +210,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 /** @hidden @internal */
 class IgxSelectToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectToggleIconDirective, isStandalone: true, selector: "[igxSelectToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectToggleIconDirective, isStandalone: true, selector: "[igxSelectToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSelectToggleIcon]',
@@ -222,10 +222,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }] });
 /** @hidden @internal */
 class IgxSelectHeaderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectHeaderDirective, isStandalone: true, selector: "[igxSelectHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectHeaderDirective, isStandalone: true, selector: "[igxSelectHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSelectHeader]',
@@ -234,10 +234,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }] });
 /** @hidden @internal */
 class IgxSelectFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSelectFooterDirective, isStandalone: true, selector: "[igxSelectFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSelectFooterDirective, isStandalone: true, selector: "[igxSelectFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSelectFooter]',
@@ -661,13 +661,13 @@ class IgxSelectComponent extends IgxDropDownComponent {
             this.selection.clear(this.id);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxSelectComponent, isStandalone: true, selector: "igx-select", inputs: { placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], overlaySettings: "overlaySettings", value: "value", type: "type" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-select": "this.defaultClass", "style.maxHeight": "this.maxHeight" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxSelectComponent, isStandalone: true, selector: "igx-select", inputs: { placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], overlaySettings: "overlaySettings", value: "value", type: "type" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-select": "this.defaultClass", "style.maxHeight": "this.maxHeight" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
             { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
         ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxSelectToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxSelectHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxSelectFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "hintElement", first: true, predicate: IgxHintDirective, descendants: true, read: ElementRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxSelectItemComponent), descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }, { propertyName: "contentHints", predicate: IgxHintDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type === 'search' ? 'line' : type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [igxReadOnlyInput]=\"false\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"labelledBy || label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-input-group__toggle-button\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    @if (headerTemplate) {\n        <div class=\"igx-drop-down__select-header\">\n            <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n        </div>\n    }\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"labelledBy || label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    @if (footerTemplate) {\n        <div class=\"igx-drop-down__select-footer\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-drop-down__group label,.igx-drop-down__header,.igx-drop-down__item{display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;height:var(--size);color:var(--item-text-color)}.igx-drop-down__group label igx-divider,.igx-drop-down__header igx-divider,.igx-drop-down__item igx-divider{position:absolute;width:100%;inset-inline-start:0;bottom:0}.igx-drop-down__group label igx-icon,.igx-drop-down__header igx-icon,.igx-drop-down__item igx-icon{--component-size: 1;justify-content:center}.igx-drop-down__group label,.igx-drop-down__header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--header-text-color);pointer-events:none;padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-drop-down{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);width:-moz-max-content;width:max-content;overflow:hidden;border-radius:var(--border-radius);background:var(--background-color);box-shadow:var(--elevation);min-width:8rem;border:var(--border-width) solid var(--border-color)}.igx-drop-down__list-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.igx-drop-down__list-scroll .igx-display-container--scrollbar{padding-inline-end:var(--vhelper-scrollbar-size)}.igx-drop-down__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--dropdown-size);cursor:pointer;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:var(--item-border-radius)}.igx-drop-down__item igx-icon{color:var(--item-icon-color)}.igx-drop-down__item:hover{background:var(--hover-item-background);color:var(--hover-item-text-color)}.igx-drop-down__item:hover igx-icon{color:var(--hover-item-icon-color)}.igx-drop-down__item:focus{outline:0;outline-color:#0000;background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__inner{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;align-items:center;gap:.5rem;margin-inline-end:auto}.igx-drop-down__inner>div{display:flex;align-items:center;gap:.5rem}.igx-drop-down__content{display:flex;width:100%;align-items:center;gap:.5rem}.igx-drop-down__item--focused{background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__item--selected{background:var(--selected-item-background);color:var(--selected-item-text-color)}.igx-drop-down__item--selected igx-icon{color:var(--selected-item-icon-color)}.igx-drop-down__item--selected:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused{background:var(--selected-focus-item-background);color:var(--selected-focus-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--disabled{background:var(--disabled-item-background);color:var(--disabled-item-text-color);cursor:default;pointer-events:none}.igx-drop-down__item--disabled igx-icon{color:var(--disabled-item-text-color)}.igx-drop-down__group{pointer-events:auto}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-down .igx-drop-down__header,.igx-drop-down .igx-drop-down__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-drop-down .igx-drop-down__header igx-icon,.igx-drop-down .igx-drop-down__item igx-icon{--component-size: inherit}.igx-drop-down{padding:.1875rem}.igx-drop-down__item{margin-block:.125rem}.igx-drop-down__item:first-of-type,.igx-drop-down__item:last-of-type{margin-block:initial}.igx-drop-down__item--focused{outline:.125rem solid var(--focused-item-border-color);outline-offset:-.125rem}.igx-drop-down__header{margin-block-end:.125rem;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-drop-down__group label{padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));margin-block-end:.125rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-drop-down__item--focused{outline:.0625rem solid var(--border-color);outline-offset:-.0625rem}.igx-drop-down__header{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-drop-down__group{pointer-events:auto}.igx-drop-down__group label{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}\n", "@layer ig.base{.igx-select{position:relative;display:block}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSelectItemNavigationDirective, selector: "[igxSelectItemNavigation]", inputs: ["igxSelectItemNavigation"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-select', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
@@ -948,11 +948,11 @@ const IGX_SELECT_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectModule, imports: [IgxSelectComponent, IgxSelectItemComponent, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSelectToggleIconDirective, i4.IgxLabelDirective, i4.IgxPrefixDirective, i4.IgxSuffixDirective, i4.IgxHintDirective], exports: [IgxSelectComponent, IgxSelectItemComponent, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSelectToggleIconDirective, i4.IgxLabelDirective, i4.IgxPrefixDirective, i4.IgxSuffixDirective, i4.IgxHintDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectModule, imports: [IgxSelectComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectModule, imports: [IgxSelectComponent, IgxSelectItemComponent, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSelectToggleIconDirective, i4.IgxLabelDirective, i4.IgxPrefixDirective, i4.IgxSuffixDirective, i4.IgxHintDirective], exports: [IgxSelectComponent, IgxSelectItemComponent, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSelectToggleIconDirective, i4.IgxLabelDirective, i4.IgxPrefixDirective, i4.IgxSuffixDirective, i4.IgxHintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectModule, imports: [IgxSelectComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-simple-combo.mjs

@@ -574,14 +574,14 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         return value !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxSimpleComboComponent, isStandalone: true, selector: "igx-simple-combo", outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($any($event))", "keydown.Alt.ArrowDown": "onArrowDown($any($event))" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxSimpleComboComponent, isStandalone: true, selector: "igx-simple-combo", outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($any($event))", "keydown.Alt.ArrowDown": "onArrowDown($any($event))" } }, providers: [
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n        <!-- The igx-combo class is needed here in order to scope the css variables -->\n        <div class=\"igx-combo\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n                [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n                [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n                [attr.aria-activedescendant]=\"this.activeDescendant\"\n                (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n                <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                    [dataWindow]=\"itemWindow\"\n                                    [estimatedItemSize]=\"estimatedItemSize\"\n                                    [initialViewportSize]=\"viewportSize\"\n                                    (stateChange)=\"handleVirtualStateChange($event)\">\n                    <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n                            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\"\n                            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n                            @if (item?.isHeader) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                                </ng-container>\n                            }\n                            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                            @if (!item?.isHeader) {\n                                <ng-container #listItem\n                                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                                </ng-container>\n                            }\n                        </igx-combo-item>\n                    </ng-template>\n                </igx-virtual-scroll>\n            </div>\n\n            @if (filteredData?.length === 0 || isAddButtonVisible()) {\n                <div class=\"igx-combo__add\">\n                    @if (filteredData?.length === 0) {\n                        <div class=\"igx-combo__empty\">\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                            </ng-container>\n                        </div>\n                    }\n                    @if (isAddButtonVisible()) {\n                        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                            </ng-container>\n                        </igx-combo-add-item>\n                    }\n                </div>\n            }\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxVirtualScrollComponent, selector: "igx-virtual-scroll", inputs: ["data", "orientation", "overScan", "estimatedItemSize", "dataWindow", "initialViewportSize", "itemTemplate"], outputs: ["stateChange", "dataRequest"] }, { kind: "directive", type: IgxVirtualItemDirective, selector: "ng-template[igxVirtualItem]" }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }, { kind: "pipe", type: IgxComboDataWindowPipe, name: "comboDataWindow" }, { kind: "pipe", type: IgxComboRecordWindowPipe, name: "comboRecordWindow" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n        <!-- The igx-combo class is needed here in order to scope the css variables -->\n        <div class=\"igx-combo\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n                [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n                [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n                [attr.aria-activedescendant]=\"this.activeDescendant\"\n                (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n                <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                    [dataWindow]=\"itemWindow\"\n                                    [estimatedItemSize]=\"estimatedItemSize\"\n                                    [overScan]=\"overScan\"\n                                    [initialViewportSize]=\"viewportSize\"\n                                    (stateChange)=\"handleVirtualStateChange($event)\">\n                    <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n                            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\"\n                            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n                            @if (item?.isHeader) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                                </ng-container>\n                            }\n                            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                            @if (!item?.isHeader) {\n                                <ng-container #listItem\n                                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                                </ng-container>\n                            }\n                        </igx-combo-item>\n                    </ng-template>\n                </igx-virtual-scroll>\n            </div>\n\n            @if (filteredData?.length === 0 || isAddButtonVisible()) {\n                <div class=\"igx-combo__add\">\n                    @if (filteredData?.length === 0) {\n                        <div class=\"igx-combo__empty\">\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                            </ng-container>\n                        </div>\n                    }\n                    @if (isAddButtonVisible()) {\n                        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                            </ng-container>\n                        </igx-combo-add-item>\n                    }\n                </div>\n            }\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxVirtualScrollComponent, selector: "igx-virtual-scroll", inputs: ["data", "orientation", "overScan", "estimatedItemSize", "dataWindow", "initialViewportSize", "itemTemplate", "keyFunction"], outputs: ["stateChange", "dataRequest"] }, { kind: "directive", type: IgxVirtualItemDirective, selector: "ng-template[igxVirtualItem]" }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }, { kind: "pipe", type: IgxComboDataWindowPipe, name: "comboDataWindow" }, { kind: "pipe", type: IgxComboRecordWindowPipe, name: "comboRecordWindow" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-simple-combo', providers: [
                         IgxComboAPIService,
@@ -590,7 +590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '(keydown.ArrowDown)': 'onArrowDown($any($event))',
                         '(keydown.Alt.ArrowDown)': 'onArrowDown($any($event))'
-                    }, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxVirtualScrollComponent, IgxVirtualItemDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboDataWindowPipe, IgxComboRecordWindowPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n        <!-- The igx-combo class is needed here in order to scope the css variables -->\n        <div class=\"igx-combo\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n                [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n                [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n                [attr.aria-activedescendant]=\"this.activeDescendant\"\n                (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n                <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                    [dataWindow]=\"itemWindow\"\n                                    [estimatedItemSize]=\"estimatedItemSize\"\n                                    [initialViewportSize]=\"viewportSize\"\n                                    (stateChange)=\"handleVirtualStateChange($event)\">\n                    <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n                            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\"\n                            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n                            @if (item?.isHeader) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                                </ng-container>\n                            }\n                            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                            @if (!item?.isHeader) {\n                                <ng-container #listItem\n                                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                                </ng-container>\n                            }\n                        </igx-combo-item>\n                    </ng-template>\n                </igx-virtual-scroll>\n            </div>\n\n            @if (filteredData?.length === 0 || isAddButtonVisible()) {\n                <div class=\"igx-combo__add\">\n                    @if (filteredData?.length === 0) {\n                        <div class=\"igx-combo__empty\">\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                            </ng-container>\n                        </div>\n                    }\n                    @if (isAddButtonVisible()) {\n                        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                            </ng-container>\n                        </igx-combo-add-item>\n                    }\n                </div>\n            }\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"] }]
+                    }, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxVirtualScrollComponent, IgxVirtualItemDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboDataWindowPipe, IgxComboRecordWindowPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n        <!-- The igx-combo class is needed here in order to scope the css variables -->\n        <div class=\"igx-combo\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n                [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n                [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n                [attr.aria-activedescendant]=\"this.activeDescendant\"\n                (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n                <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                    [dataWindow]=\"itemWindow\"\n                                    [estimatedItemSize]=\"estimatedItemSize\"\n                                    [overScan]=\"overScan\"\n                                    [initialViewportSize]=\"viewportSize\"\n                                    (stateChange)=\"handleVirtualStateChange($event)\">\n                    <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n                            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\"\n                            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n                            @if (item?.isHeader) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                                </ng-container>\n                            }\n                            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                            @if (!item?.isHeader) {\n                                <ng-container #listItem\n                                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                                </ng-container>\n                            }\n                        </igx-combo-item>\n                    </ng-template>\n                </igx-virtual-scroll>\n            </div>\n\n            @if (filteredData?.length === 0 || isAddButtonVisible()) {\n                <div class=\"igx-combo__add\">\n                    @if (filteredData?.length === 0) {\n                        <div class=\"igx-combo__empty\">\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                            </ng-container>\n                        </div>\n                    }\n                    @if (isAddButtonVisible()) {\n                        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                            </ng-container>\n                        </igx-combo-add-item>\n                    }\n                </div>\n            }\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [IgxComboDropDownComponent, { static: true }]
@@ -628,11 +628,11 @@ const IGX_SIMPLE_COMBO_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxSimpleComboModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboModule, imports: [IgxSimpleComboComponent, i2.IgxComboAddItemDirective, i2.IgxComboClearIconDirective, i2.IgxComboEmptyDirective, i2.IgxComboFooterDirective, i2.IgxComboHeaderDirective, i2.IgxComboHeaderItemDirective, i2.IgxComboItemDirective, i2.IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxSimpleComboComponent, i2.IgxComboAddItemDirective, i2.IgxComboClearIconDirective, i2.IgxComboEmptyDirective, i2.IgxComboFooterDirective, i2.IgxComboHeaderDirective, i2.IgxComboHeaderItemDirective, i2.IgxComboItemDirective, i2.IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboModule, imports: [IgxSimpleComboComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboModule, imports: [IgxSimpleComboComponent, i2.IgxComboAddItemDirective, i2.IgxComboClearIconDirective, i2.IgxComboEmptyDirective, i2.IgxComboFooterDirective, i2.IgxComboHeaderDirective, i2.IgxComboHeaderItemDirective, i2.IgxComboItemDirective, i2.IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxSimpleComboComponent, i2.IgxComboAddItemDirective, i2.IgxComboClearIconDirective, i2.IgxComboEmptyDirective, i2.IgxComboFooterDirective, i2.IgxComboHeaderDirective, i2.IgxComboHeaderItemDirective, i2.IgxComboItemDirective, i2.IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboModule, imports: [IgxSimpleComboComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSimpleComboModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSimpleComboModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [