23354069329

Committed 20 Mar 2026 05:11PM UTC coverage: 9.846% (-79.6%) from 89.462%

Build # 23354069329

Build Type

Pull #17071

github

Committed by

web-flow

Commit Message

Merge 742ad5a5c into 0018afe92

Pull Request Pull Request #17071: fix(IgxGrid): Do not apply width constraint to groups.

Coverage Stats

905 of 16404 branches covered (5.52%)

Branch coverage included in aggregate %.

1 of 3 new or added lines in 1 file covered. (33.33%)

24265 existing lines in 328 files now uncovered.

3714 of 30509 relevant lines covered (12.17%)

6.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.9

/projects/igniteui-angular/src/lib/select/select.component.ts

import {
    AfterContentChecked,
    AfterContentInit,
    AfterViewInit,
    booleanAttribute,
    ChangeDetectorRef,
    Component,
    ContentChild,
    ContentChildren,
    Directive,
    ElementRef,
    EventEmitter,
    forwardRef,
    HostBinding,
    Inject,
    Injector,
    Input,
    OnDestroy,
    OnInit,
    Optional,
    Output,
    QueryList,
    TemplateRef,
    ViewChild,
    DOCUMENT,
    ViewChildren
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { AbstractControl, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { noop } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { EditorProvider } from '../core/edit-provider';
import { IgxSelectionAPIService } from '../core/selection';
import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
import { IgxLabelDirective } from '../directives/label/label.directive';
import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base';
import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common';
import { IgxInputGroupComponent } from '../input-group/input-group.component';
import { AbsoluteScrollStrategy } from '../services/overlay/scroll/absolute-scroll-strategy';
import { OverlaySettings } from '../services/overlay/utilities';
import { IgxDropDownComponent } from './../drop-down/drop-down.component';
import { IgxSelectItemComponent } from './select-item.component';
import { SelectPositioningStrategy } from './select-positioning-strategy';
import { IgxSelectBase } from './select.common';
import { IgxHintDirective, IgxInputGroupType, IgxPrefixDirective, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
import { ToggleViewCancelableEventArgs, ToggleViewEventArgs, IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { IgxOverlayService } from '../services/overlay/overlay';
import { IgxIconComponent } from '../icon/icon.component';
import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
import { IgxSelectItemNavigationDirective } from './select-navigation.directive';
import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';

/** @hidden @internal */
@Directive({
    selector: '[igxSelectToggleIcon]',
    standalone: true
})
export class IgxSelectToggleIconDirective {
}

/** @hidden @internal */
@Directive({
    selector: '[igxSelectHeader]',
    standalone: true
})
export class IgxSelectHeaderDirective {
}

/** @hidden @internal */
@Directive({
    selector: '[igxSelectFooter]',
    standalone: true
})
export class IgxSelectFooterDirective {
}

/**
 * **Ignite UI for Angular Select** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)
 *
 * The `igxSelect` provides an input with dropdown list allowing selection of a single item.
 *
 * Example:
 * ```html
 * <igx-select #select1 [placeholder]="'Pick One'">
 *   <label igxLabel>Select Label</label>
 *   <igx-select-item *ngFor="let item of items" [value]="item.field">
 *     {{ item.field }}
 *   </igx-select-item>
 * </igx-select>
 * ```
 */
@Component({
    selector: 'igx-select',
    templateUrl: './select.component.html',
    providers: [
        { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
        { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
    ],
    styles: [`
        :host {
            display: block;
        }
    `],
    imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, IgxReadOnlyInputDirective, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective]
})
export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelectBase, ControlValueAccessor,
    AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider, AfterContentChecked {

    /** @hidden @internal */
    @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true }) public inputGroup: IgxInputGroupComponent;

    /** @hidden @internal */
    @ViewChild('input', { read: IgxInputDirective, static: true }) public input: IgxInputDirective;

    /** @hidden @internal */
    @ContentChildren(forwardRef(() => IgxSelectItemComponent), { descendants: true })
    public override children: QueryList<IgxSelectItemComponent>;

    @ContentChildren(IgxPrefixDirective, { descendants: true })
    protected prefixes: QueryList<IgxPrefixDirective>;

    @ContentChildren(IgxSuffixDirective, { descendants: true })
    protected suffixes: QueryList<IgxSuffixDirective>;

    @ViewChildren(IgxSuffixDirective)
    protected internalSuffixes: QueryList<IgxSuffixDirective>;

    /** @hidden @internal */
    @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;

    /**
     * Sets input placeholder.
     *
     */
    @Input() public placeholder;


    /**
     * Disables the component.
     * ```html
     * <igx-select [disabled]="'true'"></igx-select>
     * ```
     */
    @Input({ transform: booleanAttribute }) public disabled = false;

    /**
     * Sets custom OverlaySettings `IgxSelectComponent`.
     * ```html
     * <igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
     * ```
     */
    @Input()
    public overlaySettings: OverlaySettings;

    /** @hidden @internal */
    @HostBinding('style.maxHeight')
    public override maxHeight = '256px';

    /**
     * Emitted before the dropdown is opened
     *
     * ```html
     * <igx-select opening='handleOpening($event)'></igx-select>
     * ```
     */
    @Output()
    public override opening = new EventEmitter<IBaseCancelableBrowserEventArgs>();

    /**
     * Emitted after the dropdown is opened
     *
     * ```html
     * <igx-select (opened)='handleOpened($event)'></igx-select>
     * ```
     */
    @Output()
    public override opened = new EventEmitter<IBaseEventArgs>();

    /**
     * Emitted before the dropdown is closed
     *
     * ```html
     * <igx-select (closing)='handleClosing($event)'></igx-select>
     * ```
     */
    @Output()
    public override closing = new EventEmitter<IBaseCancelableBrowserEventArgs>();

    /**
     * Emitted after the dropdown is closed
     *
     * ```html
     * <igx-select (closed)='handleClosed($event)'></igx-select>
     * ```
     */
    @Output()
    public override closed = new EventEmitter<IBaseEventArgs>();

    /**
     * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button
     *
     * ```typescript
     * // Set in typescript
     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
     * myComponent.select.toggleIconTemplate = myCustomTemplate;
     * ```
     * ```html
     * <!-- Set in markup -->
     *  <igx-select #select>
     *      ...
     *      <ng-template igxSelectToggleIcon let-collapsed>
     *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     *      </ng-template>
     *  </igx-select>
     * ```
     */
    @ContentChild(IgxSelectToggleIconDirective, { read: TemplateRef })
    public toggleIconTemplate: TemplateRef<any> = null;

    /**
     * The custom template, if any, that should be used when rendering the HEADER for the select items list
     *
     * ```typescript
     * // Set in typescript
     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
     * myComponent.select.headerTemplate = myCustomTemplate;
     * ```
     * ```html
     * <!-- Set in markup -->
     *  <igx-select #select>
     *      ...
     *      <ng-template igxSelectHeader>
     *          <div class="select__header">
     *              This is a custom header
     *          </div>
     *      </ng-template>
     *  </igx-select>
     * ```
     */
    @ContentChild(IgxSelectHeaderDirective, { read: TemplateRef, static: false })
    public headerTemplate: TemplateRef<any> = null;

    /**
     * The custom template, if any, that should be used when rendering the FOOTER for the select items list
     *
     * ```typescript
     * // Set in typescript
     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
     * myComponent.select.footerTemplate = myCustomTemplate;
     * ```
     * ```html
     * <!-- Set in markup -->
     *  <igx-select #select>
     *      ...
     *      <ng-template igxSelectFooter>
     *          <div class="select__footer">
     *              This is a custom footer
     *          </div>
     *      </ng-template>
     *  </igx-select>
     * ```
     */
    @ContentChild(IgxSelectFooterDirective, { read: TemplateRef, static: false })
    public footerTemplate: TemplateRef<any> = null;

    @ContentChild(IgxHintDirective, { read: ElementRef }) private hintElement: ElementRef;

    /** @hidden @internal */
    public override width: string;

    /** @hidden @internal do not use the drop-down container class */
    public override cssClass = false;

    /** @hidden @internal */
    public override allowItemsFocus = false;

    /** @hidden @internal */
    public override height: string;

    private ngControl: NgControl = null;
    private _overlayDefaults: OverlaySettings;
    private _value: any;
    private _type = null;

    /**
     * Gets/Sets the component value.
     *
     * ```typescript
     * // get
     * let selectValue = this.select.value;
     * ```
     *
     * ```typescript
     * // set
     * this.select.value = 'London';
     * ```
     * ```html
     * <igx-select [value]="value"></igx-select>
     * ```
     */
    @Input()
    public get value(): any {
        return this._value;
    }
    public set value(v: any) {
        if (this._value === v) {
            return;
        }
        this._value = v;
        this.setSelection(this.items.find(x => x.value === this.value));
    }

    /**
     * Sets how the select will be styled.
     * The allowed values are `line`, `box` and `border`. The input-group default is `line`.
     * ```html
     * <igx-select [type]="'box'"></igx-select>
     * ```
     */
    @Input()
    public get type(): IgxInputGroupType {
        return this._type || this._inputGroupType || 'line';
    }

    public set type(val: IgxInputGroupType) {
        this._type = val;
    }

    /** @hidden @internal */
    public get selectionValue() {
        const selectedItem = this.selectedItem;
        return selectedItem ? selectedItem.itemText : '';
    }

    /** @hidden @internal */
    public override get selectedItem(): IgxSelectItemComponent {
        return this.selection.first_item(this.id);
    }

    private _onChangeCallback: (_: any) => void = noop;
    private _onTouchedCallback: () => void = noop;

    constructor(
        elementRef: ElementRef,
        cdr: ChangeDetectorRef,
        @Inject(DOCUMENT) document: any,
        selection: IgxSelectionAPIService,
        @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
        @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType,
        private _injector: Injector,
    ) {
        super(elementRef, cdr, document, selection);
    }

    //#region ControlValueAccessor

    /** @hidden @internal */
    public writeValue = (value: any) => {
        this.value = value;
    };

    /** @hidden @internal */
    public registerOnChange(fn: any): void {
        this._onChangeCallback = fn;
    }

    /** @hidden @internal */
    public registerOnTouched(fn: any): void {
        this._onTouchedCallback = fn;
    }

    /** @hidden @internal */
    public setDisabledState(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }
    //#endregion

    /** @hidden @internal */
    public getEditElement(): HTMLInputElement {
        return this.input.nativeElement;
    }

    /** @hidden @internal */
    public override selectItem(newSelection: IgxDropDownItemBaseDirective, event?) {
        const oldSelection = this.selectedItem ?? <IgxDropDownItemBaseDirective>{};

        if (newSelection === null || newSelection.disabled || newSelection.isHeader) {
            return;
        }

        if (newSelection === oldSelection) {
            this.toggleDirective.close();
            return;
        }

        const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false, owner: this };
        this.selectionChanging.emit(args);

        if (args.cancel) {
            return;
        }

        this.setSelection(newSelection);
        this._value = newSelection.value;

        if (event) {
            this.toggleDirective.close();
        }

        this.cdr.detectChanges();
        this._onChangeCallback(this.value);
    }

    /** @hidden @internal */
    public getFirstItemElement(): HTMLElement {
        return this.children.first.element.nativeElement;
    }

    /**
     * Opens the select
     *
     * ```typescript
     * this.select.open();
     * ```
     */
    public override open(overlaySettings?: OverlaySettings) {
        if (this.disabled || this.items.length === 0) {
            return;
        }
        if (!this.selectedItem) {
            this.navigateFirst();
        }

        super.open(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
    }

    public inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings) {
        const targetElement = event.target as HTMLElement;

        if (this.hintElement && targetElement.contains(this.hintElement.nativeElement)) {
            return;
        }
        this.toggle(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
    }

    /** @hidden @internal */
    public ngAfterContentInit() {
        this._overlayDefaults = {
            target: this.getEditElement(),
            modal: false,
            positionStrategy: new SelectPositioningStrategy(this),
            scrollStrategy: new AbsoluteScrollStrategy(),
            excludeFromOutsideClick: [this.inputGroup.element.nativeElement as HTMLElement]
        };
        const changes$ = this.children.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.setSelection(this.items.find(x => x.value === this.value));
            this.cdr.detectChanges();
        });
        Promise.resolve().then(() => {
            if (!changes$.closed) {
                this.children.notifyOnChanges();
            }
        });
    }

    /**
     * Event handlers
     *
     * @hidden @internal
     */
    public handleOpening(e: ToggleViewCancelableEventArgs) {
        const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };
        this.opening.emit(args);

        e.cancel = args.cancel;
        if (args.cancel) {
            return;
        }
    }

    /** @hidden @internal */
    public override onToggleContentAppended(event: ToggleViewEventArgs) {
        const info = this.overlayService.getOverlayById(event.id);
        if (info?.settings?.positionStrategy instanceof SelectPositioningStrategy) {
            return;
        }
        super.onToggleContentAppended(event);
    }

    /** @hidden @internal */
    public handleOpened() {
        this.updateItemFocus();
        this.opened.emit({ owner: this });
    }

    /** @hidden @internal */
    public handleClosing(e: ToggleViewCancelableEventArgs) {
        const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };
        this.closing.emit(args);
        e.cancel = args.cancel;
    }

    /** @hidden @internal */
    public handleClosed() {
        this.focusItem(false);
        this.closed.emit({ owner: this });
    }

    /** @hidden @internal */
    public onBlur(): void {
        this._onTouchedCallback();
        if (this.ngControl && this.ngControl.invalid) {
            this.input.valid = IgxInputState.INVALID;
        } else {
            this.input.valid = IgxInputState.INITIAL;
        }
    }

    /** @hidden @internal */
    public onFocus(): void {
        this._onTouchedCallback();
    }

    /**
     * @hidden @internal
     */
    public override ngOnInit() {
        this.ngControl = this._injector.get<NgControl>(NgControl, null);
    }

    /**
     * @hidden @internal
     */
    public override ngAfterViewInit() {
        super.ngAfterViewInit();

        if (this.ngControl) {
            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged.bind(this));
            this.manageRequiredAsterisk();
        }

        this.cdr.detectChanges();
    }

    /** @hidden @internal */
    public ngAfterContentChecked() {
        if (this.inputGroup && this.prefixes?.length > 0) {
            this.inputGroup.prefixes = this.prefixes;
        }

        if (this.inputGroup) {
            const suffixesArray = this.suffixes?.toArray() ?? [];
            const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];
            const mergedSuffixes = new QueryList<IgxSuffixDirective>();
            mergedSuffixes.reset([
                ...suffixesArray,
                ...internalSuffixesArray
            ]);
            this.inputGroup.suffixes = mergedSuffixes;
        }
    }

    /** @hidden @internal */
    public get toggleIcon(): string {
        return this.collapsed ? 'input_expand' : 'input_collapse';
    }

    /**
     * @hidden @internal
     * Prevent input blur - closing the items container on Header/Footer Template click.
     */
    public mousedownHandler(event) {
        event.preventDefault();
    }

    protected onStatusChanged() {
        this.manageRequiredAsterisk();
        if (this.ngControl && !this.disabled && this.isTouchedOrDirty) {
            if (this.hasValidators && this.inputGroup.isFocused) {
                this.input.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
            } else {
                // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
                this.input.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
            }
        } else {
            this.input.valid = IgxInputState.INITIAL;
        }
    }

    private get isTouchedOrDirty(): boolean {
        return (this.ngControl.control.touched || this.ngControl.control.dirty);
    }

    private get hasValidators(): boolean {
        return (!!this.ngControl.control.validator || !!this.ngControl.control.asyncValidator);
    }

    protected override navigate(direction: Navigate, currentIndex?: number) {
        if (this.collapsed && this.selectedItem) {
            this.navigateItem(this.selectedItem.itemIndex);
        }
        super.navigate(direction, currentIndex);
    }

    protected manageRequiredAsterisk(): void {
        const hasRequiredHTMLAttribute = this.elementRef.nativeElement.hasAttribute('required');
        let isRequired = false;

        if (this.ngControl && this.ngControl.control.validator) {
            const error = this.ngControl.control.validator({} as AbstractControl);
            isRequired = !!(error && error.required);
        }

        this.inputGroup.isRequired = isRequired;

        if (this.input?.nativeElement) {
            this.input.nativeElement.setAttribute('aria-required', isRequired.toString());
        }

        // Handle validator removal case
        if (!isRequired && !hasRequiredHTMLAttribute) {
            this.input.valid = IgxInputState.INITIAL;
        }

        this.cdr.markForCheck();
    }

    private setSelection(item: IgxDropDownItemBaseDirective) {
        if (item && item.value !== undefined && item.value !== null) {
            this.selection.set(this.id, new Set([item]));
        } else {
            this.selection.clear(this.id);
        }
    }
}


1	import {
2	AfterContentChecked,
3	AfterContentInit,
4	AfterViewInit,
5	booleanAttribute,
6	ChangeDetectorRef,
7	Component,
8	ContentChild,
9	ContentChildren,
10	Directive,
11	ElementRef,
12	EventEmitter,
13	forwardRef,
14	HostBinding,
15	Inject,
16	Injector,
17	Input,
18	OnDestroy,
19	OnInit,
20	Optional,
21	Output,
22	QueryList,
23	TemplateRef,
24	ViewChild,
25	DOCUMENT,
26	ViewChildren
27	} from '@angular/core';
28	import { NgTemplateOutlet } from '@angular/common';
29	import { AbstractControl, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
30	import { noop } from 'rxjs';
31	import { takeUntil } from 'rxjs/operators';
32
33	import { EditorProvider } from '../core/edit-provider';
34	import { IgxSelectionAPIService } from '../core/selection';
35	import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
36	import { IgxLabelDirective } from '../directives/label/label.directive';
37	import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base';
38	import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common';
39	import { IgxInputGroupComponent } from '../input-group/input-group.component';
40	import { AbsoluteScrollStrategy } from '../services/overlay/scroll/absolute-scroll-strategy';
41	import { OverlaySettings } from '../services/overlay/utilities';
42	import { IgxDropDownComponent } from './../drop-down/drop-down.component';
43	import { IgxSelectItemComponent } from './select-item.component';
44	import { SelectPositioningStrategy } from './select-positioning-strategy';
45	import { IgxSelectBase } from './select.common';
46	import { IgxHintDirective, IgxInputGroupType, IgxPrefixDirective, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
47	import { ToggleViewCancelableEventArgs, ToggleViewEventArgs, IgxToggleDirective } from '../directives/toggle/toggle.directive';
48	import { IgxOverlayService } from '../services/overlay/overlay';
49	import { IgxIconComponent } from '../icon/icon.component';
50	import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
51	import { IgxSelectItemNavigationDirective } from './select-navigation.directive';
52	import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
53	import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';
54
55	/** @hidden @internal */
56	@Directive({
57	selector: '[igxSelectToggleIcon]',
58	standalone: true
59	})
60	export class IgxSelectToggleIconDirective {	3✔
61	}
62
63	/** @hidden @internal */
64	@Directive({
65	selector: '[igxSelectHeader]',
66	standalone: true
67	})
68	export class IgxSelectHeaderDirective {	3✔
69	}
70
71	/** @hidden @internal */
72	@Directive({
73	selector: '[igxSelectFooter]',
74	standalone: true
75	})
76	export class IgxSelectFooterDirective {	3✔
77	}
78
79	/**
80	* Ignite UI for Angular Select -
81	* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)
82	*
83	* The `igxSelect` provides an input with dropdown list allowing selection of a single item.
84	*
85	* Example:
86	* ```html
87	* <igx-select #select1 [placeholder]="'Pick One'">
88	* <label igxLabel>Select Label</label>
89	* <igx-select-item *ngFor="let item of items" [value]="item.field">
90	* {{ item.field }}
91	* </igx-select-item>
92	* </igx-select>
93	* ```
94	*/
95	@Component({
96	selector: 'igx-select',
97	templateUrl: './select.component.html',
98	providers: [
99	{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
100	{ provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
101	],
102	styles: [`
103	:host {
104	display: block;
105	}
106	`],
107	imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, IgxReadOnlyInputDirective, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective]
108	})
109	export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelectBase, ControlValueAccessor,	3✔
110	AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider, AfterContentChecked {
111
112	/** @hidden @internal */
113	@ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true }) public inputGroup: IgxInputGroupComponent;
114
115	/** @hidden @internal */
116	@ViewChild('input', { read: IgxInputDirective, static: true }) public input: IgxInputDirective;
117
118	/** @hidden @internal */
UNCOV 119	@ContentChildren(forwardRef(() => IgxSelectItemComponent), { descendants: true })	×
120	public override children: QueryList<IgxSelectItemComponent>;
121
122	@ContentChildren(IgxPrefixDirective, { descendants: true })
123	protected prefixes: QueryList<IgxPrefixDirective>;
124
125	@ContentChildren(IgxSuffixDirective, { descendants: true })
126	protected suffixes: QueryList<IgxSuffixDirective>;
127
128	@ViewChildren(IgxSuffixDirective)
129	protected internalSuffixes: QueryList<IgxSuffixDirective>;
130
131	/** @hidden @internal */
UNCOV 132	@ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;	×
133
134	/**
135	* Sets input placeholder.
136	*
137	*/
138	@Input() public placeholder;
139
140
141	/**
142	* Disables the component.
143	* ```html
144	* <igx-select [disabled]="'true'"></igx-select>
145	* ```
146	*/
UNCOV 147	@Input({ transform: booleanAttribute }) public disabled = false;	×
148
149	/**
150	* Sets custom OverlaySettings `IgxSelectComponent`.
151	* ```html
152	* <igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
153	* ```
154	*/
155	@Input()
156	public overlaySettings: OverlaySettings;
157
158	/** @hidden @internal */
159	@HostBinding('style.maxHeight')
UNCOV 160	public override maxHeight = '256px';	×
161
162	/**
163	* Emitted before the dropdown is opened
164	*
165	* ```html
166	* <igx-select opening='handleOpening($event)'></igx-select>
167	* ```
168	*/
169	@Output()
UNCOV 170	public override opening = new EventEmitter<IBaseCancelableBrowserEventArgs>();	×
171
172	/**
173	* Emitted after the dropdown is opened
174	*
175	* ```html
176	* <igx-select (opened)='handleOpened($event)'></igx-select>
177	* ```
178	*/
179	@Output()
UNCOV 180	public override opened = new EventEmitter<IBaseEventArgs>();	×
181
182	/**
183	* Emitted before the dropdown is closed
184	*
185	* ```html
186	* <igx-select (closing)='handleClosing($event)'></igx-select>
187	* ```
188	*/
189	@Output()
UNCOV 190	public override closing = new EventEmitter<IBaseCancelableBrowserEventArgs>();	×
191
192	/**
193	* Emitted after the dropdown is closed
194	*
195	* ```html
196	* <igx-select (closed)='handleClosed($event)'></igx-select>
197	* ```
198	*/
199	@Output()
UNCOV 200	public override closed = new EventEmitter<IBaseEventArgs>();	×
201
202	/**
203	* The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button
204	*
205	* ```typescript
206	* // Set in typescript
207	* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
208	* myComponent.select.toggleIconTemplate = myCustomTemplate;
209	* ```
210	* ```html
211	* <!-- Set in markup -->
212	* <igx-select #select>
213	* ...
214	* <ng-template igxSelectToggleIcon let-collapsed>
215	* <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
216	* </ng-template>
217	* </igx-select>
218	* ```
219	*/
220	@ContentChild(IgxSelectToggleIconDirective, { read: TemplateRef })
UNCOV 221	public toggleIconTemplate: TemplateRef<any> = null;	×
222
223	/**
224	* The custom template, if any, that should be used when rendering the HEADER for the select items list
225	*
226	* ```typescript
227	* // Set in typescript
228	* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
229	* myComponent.select.headerTemplate = myCustomTemplate;
230	* ```
231	* ```html
232	* <!-- Set in markup -->
233	* <igx-select #select>
234	* ...
235	* <ng-template igxSelectHeader>
236	* <div class="select__header">
237	* This is a custom header
238	* </div>
239	* </ng-template>
240	* </igx-select>
241	* ```
242	*/
243	@ContentChild(IgxSelectHeaderDirective, { read: TemplateRef, static: false })
UNCOV 244	public headerTemplate: TemplateRef<any> = null;	×
245
246	/**
247	* The custom template, if any, that should be used when rendering the FOOTER for the select items list
248	*
249	* ```typescript
250	* // Set in typescript
251	* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
252	* myComponent.select.footerTemplate = myCustomTemplate;
253	* ```
254	* ```html
255	* <!-- Set in markup -->
256	* <igx-select #select>
257	* ...
258	* <ng-template igxSelectFooter>
259	* <div class="select__footer">
260	* This is a custom footer
261	* </div>
262	* </ng-template>
263	* </igx-select>
264	* ```
265	*/
266	@ContentChild(IgxSelectFooterDirective, { read: TemplateRef, static: false })
UNCOV 267	public footerTemplate: TemplateRef<any> = null;	×
268
269	@ContentChild(IgxHintDirective, { read: ElementRef }) private hintElement: ElementRef;
270
271	/** @hidden @internal */
272	public override width: string;
273
274	/** @hidden @internal do not use the drop-down container class */
UNCOV 275	public override cssClass = false;	×
276
277	/** @hidden @internal */
UNCOV 278	public override allowItemsFocus = false;	×
279
280	/** @hidden @internal */
281	public override height: string;
282
UNCOV 283	private ngControl: NgControl = null;	×
284	private _overlayDefaults: OverlaySettings;
285	private _value: any;
UNCOV 286	private _type = null;	×
287
288	/**
289	* Gets/Sets the component value.
290	*
291	* ```typescript
292	* // get
293	* let selectValue = this.select.value;
294	* ```
295	*
296	* ```typescript
297	* // set
298	* this.select.value = 'London';
299	* ```
300	* ```html
301	* <igx-select [value]="value"></igx-select>
302	* ```
303	*/
304	@Input()
305	public get value(): any {
UNCOV 306	return this._value;	×
307	}
308	public set value(v: any) {
UNCOV 309	if (this._value === v) {	×
UNCOV 310	return;	×
311	}
UNCOV 312	this._value = v;	×
UNCOV 313	this.setSelection(this.items.find(x => x.value === this.value));	×
314	}
315
316	/**
317	* Sets how the select will be styled.
318	* The allowed values are `line`, `box` and `border`. The input-group default is `line`.
319	* ```html
320	* <igx-select [type]="'box'"></igx-select>
321	* ```
322	*/
323	@Input()
324	public get type(): IgxInputGroupType {
UNCOV 325	return this._type \|\| this._inputGroupType \|\| 'line';	×
326	}
327
328	public set type(val: IgxInputGroupType) {
UNCOV 329	this._type = val;	×
330	}
331
332	/** @hidden @internal */
333	public get selectionValue() {
UNCOV 334	const selectedItem = this.selectedItem;	×
UNCOV 335	return selectedItem ? selectedItem.itemText : '';	×
336	}
337
338	/** @hidden @internal */
339	public override get selectedItem(): IgxSelectItemComponent {
UNCOV 340	return this.selection.first_item(this.id);	×
341	}
342
UNCOV 343	private _onChangeCallback: (_: any) => void = noop;	×
UNCOV 344	private _onTouchedCallback: () => void = noop;	×
345
346	constructor(
347	elementRef: ElementRef,
348	cdr: ChangeDetectorRef,
349	@Inject(DOCUMENT) document: any,
350	selection: IgxSelectionAPIService,
UNCOV 351	@Inject(IgxOverlayService) protected overlayService: IgxOverlayService,	×
UNCOV 352	@Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType,	×
UNCOV 353	private _injector: Injector,	×
354	) {
UNCOV 355	super(elementRef, cdr, document, selection);	×
356	}
357
358	//#region ControlValueAccessor
359
360	/** @hidden @internal */
UNCOV 361	public writeValue = (value: any) => {	×
UNCOV 362	this.value = value;	×
363	};
364
365	/** @hidden @internal */
366	public registerOnChange(fn: any): void {
UNCOV 367	this._onChangeCallback = fn;	×
368	}
369
370	/** @hidden @internal */
371	public registerOnTouched(fn: any): void {
UNCOV 372	this._onTouchedCallback = fn;	×
373	}
374
375	/** @hidden @internal */
376	public setDisabledState(isDisabled: boolean): void {
UNCOV 377	this.disabled = isDisabled;	×
378	}
379	//#endregion
380
381	/** @hidden @internal */
382	public getEditElement(): HTMLInputElement {
UNCOV 383	return this.input.nativeElement;	×
384	}
385
386	/** @hidden @internal */
387	public override selectItem(newSelection: IgxDropDownItemBaseDirective, event?) {
UNCOV 388	const oldSelection = this.selectedItem ?? <IgxDropDownItemBaseDirective>{};	×
389
UNCOV 390	if (newSelection === null \|\| newSelection.disabled \|\| newSelection.isHeader) {	×
UNCOV 391	return;	×
392	}
393
UNCOV 394	if (newSelection === oldSelection) {	×
UNCOV 395	this.toggleDirective.close();	×
UNCOV 396	return;	×
397	}
398
UNCOV 399	const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false, owner: this };	×
UNCOV 400	this.selectionChanging.emit(args);	×
401
UNCOV 402	if (args.cancel) {	×
UNCOV 403	return;	×
404	}
405
UNCOV 406	this.setSelection(newSelection);	×
UNCOV 407	this._value = newSelection.value;	×
408
UNCOV 409	if (event) {	×
UNCOV 410	this.toggleDirective.close();	×
411	}
412
UNCOV 413	this.cdr.detectChanges();	×
UNCOV 414	this._onChangeCallback(this.value);	×
415	}
416
417	/** @hidden @internal */
418	public getFirstItemElement(): HTMLElement {
UNCOV 419	return this.children.first.element.nativeElement;	×
420	}
421
422	/**
423	* Opens the select
424	*
425	* ```typescript
426	* this.select.open();
427	* ```
428	*/
429	public override open(overlaySettings?: OverlaySettings) {
UNCOV 430	if (this.disabled \|\| this.items.length === 0) {	×
UNCOV 431	return;	×
432	}
UNCOV 433	if (!this.selectedItem) {	×
UNCOV 434	this.navigateFirst();	×
435	}
436
UNCOV 437	super.open(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));	×
438	}
439
440	public inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings) {
UNCOV 441	const targetElement = event.target as HTMLElement;	×
442
UNCOV 443	if (this.hintElement && targetElement.contains(this.hintElement.nativeElement)) {	×
444	return;	×
445	}
UNCOV 446	this.toggle(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));	×
447	}
448
449	/** @hidden @internal */
450	public ngAfterContentInit() {
UNCOV 451	this._overlayDefaults = {	×
452	target: this.getEditElement(),
453	modal: false,
454	positionStrategy: new SelectPositioningStrategy(this),
455	scrollStrategy: new AbsoluteScrollStrategy(),
456	excludeFromOutsideClick: [this.inputGroup.element.nativeElement as HTMLElement]
457	};
UNCOV 458	const changes$ = this.children.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {	×
UNCOV 459	this.setSelection(this.items.find(x => x.value === this.value));	×
UNCOV 460	this.cdr.detectChanges();	×
461	});
UNCOV 462	Promise.resolve().then(() => {	×
UNCOV 463	if (!changes$.closed) {	×
UNCOV 464	this.children.notifyOnChanges();	×
465	}
466	});
467	}
468
469	/**
470	* Event handlers
471	*
472	* @hidden @internal
473	*/
474	public handleOpening(e: ToggleViewCancelableEventArgs) {
UNCOV 475	const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };	×
UNCOV 476	this.opening.emit(args);	×
477
UNCOV 478	e.cancel = args.cancel;	×
UNCOV 479	if (args.cancel) {	×
480	return;	×
481	}
482	}
483
484	/** @hidden @internal */
485	public override onToggleContentAppended(event: ToggleViewEventArgs) {
UNCOV 486	const info = this.overlayService.getOverlayById(event.id);	×
UNCOV 487	if (info?.settings?.positionStrategy instanceof SelectPositioningStrategy) {	×
488	return;	×
489	}
UNCOV 490	super.onToggleContentAppended(event);	×
491	}
492
493	/** @hidden @internal */
494	public handleOpened() {
UNCOV 495	this.updateItemFocus();	×
UNCOV 496	this.opened.emit({ owner: this });	×
497	}
498
499	/** @hidden @internal */
500	public handleClosing(e: ToggleViewCancelableEventArgs) {
UNCOV 501	const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel };	×
UNCOV 502	this.closing.emit(args);	×
UNCOV 503	e.cancel = args.cancel;	×
504	}
505
506	/** @hidden @internal */
507	public handleClosed() {
UNCOV 508	this.focusItem(false);	×
UNCOV 509	this.closed.emit({ owner: this });	×
510	}
511
512	/** @hidden @internal */
513	public onBlur(): void {
UNCOV 514	this._onTouchedCallback();	×
UNCOV 515	if (this.ngControl && this.ngControl.invalid) {	×
UNCOV 516	this.input.valid = IgxInputState.INVALID;	×
517	} else {
UNCOV 518	this.input.valid = IgxInputState.INITIAL;	×
519	}
520	}
521
522	/** @hidden @internal */
523	public onFocus(): void {
UNCOV 524	this._onTouchedCallback();	×
525	}
526
527	/**
528	* @hidden @internal
529	*/
530	public override ngOnInit() {
UNCOV 531	this.ngControl = this._injector.get<NgControl>(NgControl, null);	×
532	}
533
534	/**
535	* @hidden @internal
536	*/
537	public override ngAfterViewInit() {
UNCOV 538	super.ngAfterViewInit();	×
539
UNCOV 540	if (this.ngControl) {	×
UNCOV 541	this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged.bind(this));	×
UNCOV 542	this.manageRequiredAsterisk();	×
543	}
544
UNCOV 545	this.cdr.detectChanges();	×
546	}
547
548	/** @hidden @internal */
549	public ngAfterContentChecked() {
UNCOV 550	if (this.inputGroup && this.prefixes?.length > 0) {	×
UNCOV 551	this.inputGroup.prefixes = this.prefixes;	×
552	}
553
UNCOV 554	if (this.inputGroup) {	×
UNCOV 555	const suffixesArray = this.suffixes?.toArray() ?? [];	×
UNCOV 556	const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];	×
UNCOV 557	const mergedSuffixes = new QueryList<IgxSuffixDirective>();	×
UNCOV 558	mergedSuffixes.reset([	×
559	...suffixesArray,
560	...internalSuffixesArray
561	]);
UNCOV 562	this.inputGroup.suffixes = mergedSuffixes;	×
563	}
564	}
565
566	/** @hidden @internal */
567	public get toggleIcon(): string {
UNCOV 568	return this.collapsed ? 'input_expand' : 'input_collapse';	×
569	}
570
571	/**
572	* @hidden @internal
573	* Prevent input blur - closing the items container on Header/Footer Template click.
574	*/
575	public mousedownHandler(event) {
576	event.preventDefault();	×
577	}
578
579	protected onStatusChanged() {
UNCOV 580	this.manageRequiredAsterisk();	×
UNCOV 581	if (this.ngControl && !this.disabled && this.isTouchedOrDirty) {	×
UNCOV 582	if (this.hasValidators && this.inputGroup.isFocused) {	×
UNCOV 583	this.input.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;	×
584	} else {
585	// B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
UNCOV 586	this.input.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;	×
587	}
588	} else {
UNCOV 589	this.input.valid = IgxInputState.INITIAL;	×
590	}
591	}
592
593	private get isTouchedOrDirty(): boolean {
UNCOV 594	return (this.ngControl.control.touched \|\| this.ngControl.control.dirty);	×
595	}
596
597	private get hasValidators(): boolean {
UNCOV 598	return (!!this.ngControl.control.validator \|\| !!this.ngControl.control.asyncValidator);	×
599	}
600
601	protected override navigate(direction: Navigate, currentIndex?: number) {
UNCOV 602	if (this.collapsed && this.selectedItem) {	×
UNCOV 603	this.navigateItem(this.selectedItem.itemIndex);	×
604	}
UNCOV 605	super.navigate(direction, currentIndex);	×
606	}
607
608	protected manageRequiredAsterisk(): void {
UNCOV 609	const hasRequiredHTMLAttribute = this.elementRef.nativeElement.hasAttribute('required');	×
UNCOV 610	let isRequired = false;	×
611
UNCOV 612	if (this.ngControl && this.ngControl.control.validator) {	×
UNCOV 613	const error = this.ngControl.control.validator({} as AbstractControl);	×
UNCOV 614	isRequired = !!(error && error.required);	×
615	}
616
UNCOV 617	this.inputGroup.isRequired = isRequired;	×
618
UNCOV 619	if (this.input?.nativeElement) {	×
UNCOV 620	this.input.nativeElement.setAttribute('aria-required', isRequired.toString());	×
621	}
622
623	// Handle validator removal case
UNCOV 624	if (!isRequired && !hasRequiredHTMLAttribute) {	×
UNCOV 625	this.input.valid = IgxInputState.INITIAL;	×
626	}
627
UNCOV 628	this.cdr.markForCheck();	×
629	}
630
631	private setSelection(item: IgxDropDownItemBaseDirective) {
UNCOV 632	if (item && item.value !== undefined && item.value !== null) {	×
UNCOV 633	this.selection.set(this.id, new Set([item]));	×
634	} else {
UNCOV 635	this.selection.clear(this.id);	×
636	}
637	}
638	}
639

IgniteUI / igniteui-angular / 23354069329

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous