13331632524

Committed 14 Feb 2025 02:51PM CUT coverage: 22.015% (-69.6%) from 91.622%

Build # 13331632524

Build Type

Pull #15372

github

Committed by

web-flow

Commit Message

Merge d52d57714 into bcb78ae0a

Pull Request Pull Request #15372: chore(*): test ci passing

Run Details

1990 of 15592 branches covered (12.76%)

431 of 964 new or added lines in 18 files covered. (44.71%)

19956 existing lines in 307 files now uncovered.

6452 of 29307 relevant lines covered (22.02%)

249.17 hits per line

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

74.36

/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

import {
    AfterContentChecked,
    AfterViewInit, booleanAttribute, ContentChildren, Directive, ElementRef, EventEmitter,
    Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList, ViewChild
} from '@angular/core';
import { getLocaleFirstDayOfWeek } from "@angular/common";

import { merge, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { EditorProvider } from '../core/edit-provider';
import { IToggleView } from '../core/navigation';
import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
import { OverlaySettings } from '../services/overlay/utilities';
import { IgxPickerToggleComponent } from './picker-icons.common';
import { PickerInteractionMode } from './types';
import { WEEKDAYS } from '../calendar/calendar';
import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from '../input-group/inputGroupType';
import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
import { IgxInputGroupComponent } from '../input-group/input-group.component';

@Directive()
export abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy {
    /**
     * The editor's input mask.
     *
     * @remarks
     * Also used as a placeholder when none is provided.
     *
     * @example
     * ```html
     * <igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>
     * ```
     */
    @Input()
    public inputFormat: string;

    /**
     * The format used to display the picker's value when it's not being edited.
     *
     * @remarks
     * Uses Angular's DatePipe.
     *
     * @example
     * ```html
     * <igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
     * ```
     *
     */
    @Input()
    public displayFormat: string;

    /**
     * Sets the `placeholder` of the picker's input.
     *
     * @example
     * ```html
     * <igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
     * ```
     */
    @Input()
    public placeholder = '';

    /**
     * Can be `dropdown` with editable input field or `dialog` with readonly input field.
     *
     * @remarks
     * Default mode is `dropdown`
     *
     * @example
     * ```html
     * <igx-date-picker mode="dialog"></igx-date-picker>
     * ```
     */
    @Input()
    public mode: PickerInteractionMode = PickerInteractionMode.DropDown;

    /**
     * Overlay settings used to display the pop-up element.
     *
     * @example
     * ```html
     * <igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
     * ```
     */
    @Input()
    public overlaySettings: OverlaySettings;

    /**
     * Enables or disables the picker.
     *
     * @example
     * ```html
     * <igx-date-picker [disabled]="'true'"></igx-date-picker>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public disabled = false;

    /**
     * @example
     * ```html
     * <igx-date-picker locale="jp"></igx-date-picker>
     * ```
     */
    /**
     * Gets the `locale` of the date-picker.
     * If not set, defaults to applciation's locale..
     */
    @Input()
    public get locale(): string {
        return this._locale;
    }

    /**
     * Sets the `locale` of the date-picker.
     * Expects a valid BCP 47 language tag.
     */
    public set locale(value: string) {
        this._locale = value;
        // if value is invalid, set it back to _localeId
        try {
            getLocaleFirstDayOfWeek(this._locale);
        } catch (e) {
            this._locale = this._localeId;
        }
    }

    /**
     * Gets the start day of the week.
     * Can return a numeric or an enum representation of the week day.
     * If not set, defaults to the first day of the week for the application locale.
     */
    @Input()
    public get weekStart(): WEEKDAYS | number {
        return this._weekStart ?? getLocaleFirstDayOfWeek(this._locale);
    }

    /**
     * Sets the start day of the week.
     * Can be assigned to a numeric value or to `WEEKDAYS` enum value.
     */
    public set weekStart(value: WEEKDAYS | number) {
        this._weekStart = value;
    }

    /**
     * The container used for the pop-up element.
     *
     * @example
     * ```html
     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
     * <!-- ... -->
     * <igx-date-picker [outlet]="outlet"></igx-date-picker>
     * <!-- ... -->
     * ```
     */
    @Input()
    public outlet: IgxOverlayOutletDirective | ElementRef;

    /**
     * Determines how the picker's input will be styled.
     *
     * @remarks
     * Default is `box`.
     *
     * @example
     * ```html
     * <igx-date-picker [type]="'line'"></igx-date-picker>
     * ```
     */
    @Input()
    public set type(val: IgxInputGroupType) {
        this._type = val;
    }
    public get type(): IgxInputGroupType {
        return this._type || this._inputGroupType;
    }

    /**
     * Gets/Sets the default template editor's tabindex.
     *
     * @example
     * ```html
     * <igx-date-picker [tabIndex]="1"></igx-date-picker>
     * ```
     */
    @Input()
    public tabIndex: number | string;

    /**
     * Emitted when the calendar has started opening, cancelable.
     *
     * @example
     * ```html
     * <igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
     * ```
     */
    @Output()
    public opening = new EventEmitter<IBaseCancelableBrowserEventArgs>();

    /**
     * Emitted after the calendar has opened.
     *
     * @example
     * ```html
     * <igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
     * ```
     */
    @Output()
    public opened = new EventEmitter<IBaseEventArgs>();

    /**
     * Emitted when the calendar has started closing, cancelable.
     *
     * @example
     * ```html
     * <igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
     * ```
     */
    @Output()
    public closing = new EventEmitter<IBaseCancelableBrowserEventArgs>();

    /**
     * Emitted after the calendar has closed.
     *
     * @example
     * ```html
     * <igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
     * ```
     */
    @Output()
    public closed = new EventEmitter<IBaseEventArgs>();

    /** @hidden @internal */
    @ContentChildren(IgxPickerToggleComponent, { descendants: true })
    public toggleComponents: QueryList<IgxPickerToggleComponent>;

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

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

    @ViewChild(IgxInputGroupComponent)
    protected inputGroup: IgxInputGroupComponent;

    protected _locale: string;
    protected _collapsed = true;
    protected _type: IgxInputGroupType;
    protected _minValue: Date | string;
    protected _maxValue: Date | string;
    protected _weekStart: WEEKDAYS | number;
    protected abstract get toggleContainer(): HTMLElement | undefined;

    /**
     * Gets the picker's pop-up state.
     *
     * @example
     * ```typescript
     * const state = this.picker.collapsed;
     * ```
     */
    public get collapsed(): boolean {
        return this._collapsed;
    }

    /** @hidden @internal */
    public get isDropdown(): boolean {
        return this.mode === PickerInteractionMode.DropDown;
    }

    /**
     * Returns if there's focus within the picker's element OR popup container
     * @hidden @internal
     */
    public get isFocused(): boolean {
        const document = this.element.nativeElement?.getRootNode() as Document | ShadowRoot;
        if (!document?.activeElement) return false;

        return this.element.nativeElement.contains(document.activeElement)
            || !this.collapsed && this.toggleContainer.contains(document.activeElement);
    }

    protected _destroy$ = new Subject<void>();

    // D.P. EventEmitter<string | Date | DateRange | null> throws on strict checks for more restrictive overrides
    // w/ TS2416 Type 'string | Date ...' not assignable to type 'DateRange' due to observer method check
    public abstract valueChange: EventEmitter<any>;

    constructor(public element: ElementRef,
        @Inject(LOCALE_ID) protected _localeId: string,
        @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
        this.locale = this.locale || this._localeId;
    }

    /** @hidden @internal */
    public ngAfterViewInit(): void {
        this.subToIconsClicked(this.toggleComponents, () => this.open());
        this.toggleComponents.changes.pipe(takeUntil(this._destroy$))
            .subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));
    }

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

        if (this.inputGroup && this.suffixes?.length > 0) {
            this.inputGroup.suffixes = this.suffixes;
        }
    }

    /** @hidden @internal */
    public ngOnDestroy(): void {
        this._destroy$.next();
        this._destroy$.complete();
    }

    /** Subscribes to the click events of toggle/clear icons in a query */
    protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any): void {
        components.forEach(toggle => {
            toggle.clicked
                .pipe(takeUntil(merge(components.changes, this._destroy$)))
                .subscribe(next);
        });
    }

    public abstract select(value: Date | DateRange | string): void;
    public abstract open(settings?: OverlaySettings): void;
    public abstract toggle(settings?: OverlaySettings): void;
    public abstract close(): void;
    public abstract getEditElement(): HTMLInputElement;
}

1	import {
2	AfterContentChecked,
3	AfterViewInit, booleanAttribute, ContentChildren, Directive, ElementRef, EventEmitter,
4	Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList, ViewChild
5	} from '@angular/core';
6	import { getLocaleFirstDayOfWeek } from "@angular/common";
7
8	import { merge, Subject } from 'rxjs';
9	import { takeUntil } from 'rxjs/operators';
10
11	import { EditorProvider } from '../core/edit-provider';
12	import { IToggleView } from '../core/navigation';
13	import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
14	import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
15	import { OverlaySettings } from '../services/overlay/utilities';
16	import { IgxPickerToggleComponent } from './picker-icons.common';
17	import { PickerInteractionMode } from './types';
18	import { WEEKDAYS } from '../calendar/calendar';
19	import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
20	import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from '../input-group/inputGroupType';
21	import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
22	import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
23	import { IgxInputGroupComponent } from '../input-group/input-group.component';
24
25	@Directive()
26	export abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy {	2✔
27	/**
28	* The editor's input mask.
29	*
30	* @remarks
31	* Also used as a placeholder when none is provided.
32	*
33	* @example
34	* ```html
35	* <igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>
36	* ```
37	*/
38	@Input()
39	public inputFormat: string;
40
41	/**
42	* The format used to display the picker's value when it's not being edited.
43	*
44	* @remarks
45	* Uses Angular's DatePipe.
46	*
47	* @example
48	* ```html
49	* <igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
50	* ```
51	*
52	*/
53	@Input()
54	public displayFormat: string;
55
56	/**
57	* Sets the `placeholder` of the picker's input.
58	*
59	* @example
60	* ```html
61	* <igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
62	* ```
63	*/
64	@Input()
65	public placeholder = '';	2✔
66
67	/**
68	* Can be `dropdown` with editable input field or `dialog` with readonly input field.
69	*
70	* @remarks
71	* Default mode is `dropdown`
72	*
73	* @example
74	* ```html
75	* <igx-date-picker mode="dialog"></igx-date-picker>
76	* ```
77	*/
78	@Input()
79	public mode: PickerInteractionMode = PickerInteractionMode.DropDown;	2✔
80
81	/**
82	* Overlay settings used to display the pop-up element.
83	*
84	* @example
85	* ```html
86	* <igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
87	* ```
88	*/
89	@Input()
90	public overlaySettings: OverlaySettings;
91
92	/**
93	* Enables or disables the picker.
94	*
95	* @example
96	* ```html
97	* <igx-date-picker [disabled]="'true'"></igx-date-picker>
98	* ```
99	*/
100	@Input({ transform: booleanAttribute })
101	public disabled = false;	2✔
102
103	/**
104	* @example
105	* ```html
106	* <igx-date-picker locale="jp"></igx-date-picker>
107	* ```
108	*/
109	/**
110	* Gets the `locale` of the date-picker.
111	* If not set, defaults to applciation's locale..
112	*/
113	@Input()
114	public get locale(): string {
115	return this._locale;	24✔
116	}
117
118	/**
119	* Sets the `locale` of the date-picker.
120	* Expects a valid BCP 47 language tag.
121	*/
122	public set locale(value: string) {
123	this._locale = value;	6✔
124	// if value is invalid, set it back to _localeId
125	try {	6✔
126	getLocaleFirstDayOfWeek(this._locale);	6✔
127	} catch (e) {
UNCOV 128	this._locale = this._localeId;	×
129	}
130	}
131
132	/**
133	* Gets the start day of the week.
134	* Can return a numeric or an enum representation of the week day.
135	* If not set, defaults to the first day of the week for the application locale.
136	*/
137	@Input()
138	public get weekStart(): WEEKDAYS \| number {
UNCOV 139	return this._weekStart ?? getLocaleFirstDayOfWeek(this._locale);	×
140	}
141
142	/**
143	* Sets the start day of the week.
144	* Can be assigned to a numeric value or to `WEEKDAYS` enum value.
145	*/
146	public set weekStart(value: WEEKDAYS \| number) {
UNCOV 147	this._weekStart = value;	×
148	}
149
150	/**
151	* The container used for the pop-up element.
152	*
153	* @example
154	* ```html
155	* <div igxOverlayOutlet #outlet="overlay-outlet"></div>
156	* <!-- ... -->
157	* <igx-date-picker [outlet]="outlet"></igx-date-picker>
158	* <!-- ... -->
159	* ```
160	*/
161	@Input()
162	public outlet: IgxOverlayOutletDirective \| ElementRef;
163
164	/**
165	* Determines how the picker's input will be styled.
166	*
167	* @remarks
168	* Default is `box`.
169	*
170	* @example
171	* ```html
172	* <igx-date-picker [type]="'line'"></igx-date-picker>
173	* ```
174	*/
175	@Input()
176	public set type(val: IgxInputGroupType) {
177	this._type = val;	2✔
178	}
179	public get type(): IgxInputGroupType {
180	return this._type \|\| this._inputGroupType;	20!
181	}
182
183	/**
184	* Gets/Sets the default template editor's tabindex.
185	*
186	* @example
187	* ```html
188	* <igx-date-picker [tabIndex]="1"></igx-date-picker>
189	* ```
190	*/
191	@Input()
192	public tabIndex: number \| string;
193
194	/**
195	* Emitted when the calendar has started opening, cancelable.
196	*
197	* @example
198	* ```html
199	* <igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
200	* ```
201	*/
202	@Output()
203	public opening = new EventEmitter<IBaseCancelableBrowserEventArgs>();	2✔
204
205	/**
206	* Emitted after the calendar has opened.
207	*
208	* @example
209	* ```html
210	* <igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
211	* ```
212	*/
213	@Output()
214	public opened = new EventEmitter<IBaseEventArgs>();	2✔
215
216	/**
217	* Emitted when the calendar has started closing, cancelable.
218	*
219	* @example
220	* ```html
221	* <igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
222	* ```
223	*/
224	@Output()
225	public closing = new EventEmitter<IBaseCancelableBrowserEventArgs>();	2✔
226
227	/**
228	* Emitted after the calendar has closed.
229	*
230	* @example
231	* ```html
232	* <igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
233	* ```
234	*/
235	@Output()
236	public closed = new EventEmitter<IBaseEventArgs>();	2✔
237
238	/** @hidden @internal */
239	@ContentChildren(IgxPickerToggleComponent, { descendants: true })
240	public toggleComponents: QueryList<IgxPickerToggleComponent>;
241
242	@ContentChildren(IgxPrefixDirective, { descendants: true })
243	protected prefixes: QueryList<IgxPrefixDirective>;
244
245	@ContentChildren(IgxSuffixDirective, { descendants: true })
246	protected suffixes: QueryList<IgxSuffixDirective>;
247
248	@ViewChild(IgxInputGroupComponent)
249	protected inputGroup: IgxInputGroupComponent;
250
251	protected _locale: string;
252	protected _collapsed = true;	2✔
253	protected _type: IgxInputGroupType;
254	protected _minValue: Date \| string;
255	protected _maxValue: Date \| string;
256	protected _weekStart: WEEKDAYS \| number;
257	protected abstract get toggleContainer(): HTMLElement \| undefined;
258
259	/**
260	* Gets the picker's pop-up state.
261	*
262	* @example
263	* ```typescript
264	* const state = this.picker.collapsed;
265	* ```
266	*/
267	public get collapsed(): boolean {
UNCOV 268	return this._collapsed;	×
269	}
270
271	/** @hidden @internal */
272	public get isDropdown(): boolean {
273	return this.mode === PickerInteractionMode.DropDown;	80✔
274	}
275
276	/**
277	* Returns if there's focus within the picker's element OR popup container
278	* @hidden @internal
279	*/
280	public get isFocused(): boolean {
UNCOV 281	const document = this.element.nativeElement?.getRootNode() as Document \| ShadowRoot;	×
UNCOV 282	if (!document?.activeElement) return false;	×
283
UNCOV 284	return this.element.nativeElement.contains(document.activeElement)	×
285	\|\| !this.collapsed && this.toggleContainer.contains(document.activeElement);
286	}
287
288	protected _destroy$ = new Subject<void>();	2✔
289
290	// D.P. EventEmitter<string \| Date \| DateRange \| null> throws on strict checks for more restrictive overrides
291	// w/ TS2416 Type 'string \| Date ...' not assignable to type 'DateRange' due to observer method check
292	public abstract valueChange: EventEmitter<any>;
293
294	constructor(public element: ElementRef,	2✔
295	@Inject(LOCALE_ID) protected _localeId: string,	2✔
296	@Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {	2✔
297	this.locale = this.locale \|\| this._localeId;	2✔
298	}
299
300	/** @hidden @internal */
301	public ngAfterViewInit(): void {
302	this.subToIconsClicked(this.toggleComponents, () => this.open());	2✔
303	this.toggleComponents.changes.pipe(takeUntil(this._destroy$))	2✔
UNCOV 304	.subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));	×
305	}
306
307	/** @hidden @internal */
308	public ngAfterContentChecked(): void {
309	if (this.inputGroup && this.prefixes?.length > 0) {	10!
UNCOV 310	this.inputGroup.prefixes = this.prefixes;	×
311	}
312
313	if (this.inputGroup && this.suffixes?.length > 0) {	10!
UNCOV 314	this.inputGroup.suffixes = this.suffixes;	×
315	}
316	}
317
318	/** @hidden @internal */
319	public ngOnDestroy(): void {
320	this._destroy$.next();	2✔
321	this._destroy$.complete();	2✔
322	}
323
324	/** Subscribes to the click events of toggle/clear icons in a query */
325	protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any): void {
326	components.forEach(toggle => {	4✔
327	toggle.clicked	4✔
328	.pipe(takeUntil(merge(components.changes, this._destroy$)))
329	.subscribe(next);
330	});
331	}
332
333	public abstract select(value: Date \| DateRange \| string): void;
334	public abstract open(settings?: OverlaySettings): void;
335	public abstract toggle(settings?: OverlaySettings): void;
336	public abstract close(): void;
337	public abstract getEditElement(): HTMLInputElement;
338	}

IgniteUI / igniteui-angular / 13331632524

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