12908449500

Committed 22 Jan 2025 12:42PM CUT coverage: 91.592%. First build

Build # 12908449500

Build Type

Pull #15291

github

Committed by

web-flow

Commit Message

Merge 10331608b into dbe30fc10

Pull Request Pull Request #15291: fix(month-view/year-view): create onMouseDown events

Run Details

12986 of 15224 branches covered (85.3%)

2 of 4 new or added lines in 2 files covered. (50.0%)

26317 of 28733 relevant lines covered (91.59%)

33972.35 hits per line

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

92.31

/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

import {
    Component,
    Input,
    HostBinding,
    ElementRef,
    booleanAttribute,
    Inject,
} from "@angular/core";
import { IgxCalendarMonthDirective } from "../calendar.directives";
import { NgFor, TitleCasePipe } from "@angular/common";
import {
    IgxCalendarViewDirective,
    DAY_INTERVAL_TOKEN,
} from "../common/calendar-view.directive";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { CalendarDay } from "../common/model";
import type { DayInterval } from "../common/model";
import { calendarRange } from "../common/helpers";

let NEXT_ID = 0;

@Component({
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: IgxMonthsViewComponent,
            multi: true,
        },
        {
            provide: DAY_INTERVAL_TOKEN,
            useValue: "month",
        },
    ],
    selector: "igx-months-view",
    templateUrl: "months-view.component.html",
    standalone: true,
    imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe],
})
export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
    #standalone = true;

    /**
     * Sets/gets the `id` of the months view.
     * If not set, the `id` will have value `"igx-months-view-0"`.
     * ```html
     * <igx-months-view id="my-months-view"></igx-months-view>
     * ```
     * ```typescript
     * let monthsViewId =  this.monthsView.id;
     * ```
     *
     * @memberof IgxMonthsViewComponent
     */
    @HostBinding("attr.id")
    @Input()
    public id = `igx-months-view-${NEXT_ID++}`;

    /**
     * The default css class applied to the component.
     *
     * @hidden
     */
    @HostBinding("class.igx-calendar-view")
    public readonly viewClass = true;

    /**
     * @hidden @internal
     */
    @Input()
    @HostBinding("class.igx-calendar-view--standalone")
    public get standalone() {
        return this.#standalone;
    }

    public set standalone(value: boolean) {
        this.#standalone = value;
    }

    /**
     * Gets the month format option of the months view.
     * ```typescript
     * let monthFormat = this.monthsView.monthFormat.
     * ```
     */
    @Input()
    public get monthFormat(): any {
        return this._monthFormat;
    }

    /**
     * Sets the month format option of the months view.
     * ```html
     * <igx-months-view> [monthFormat]="short'"</igx-months-view>
     * ```
     *
     * @memberof IgxMonthsViewComponent
     */
    public set monthFormat(value: any) {
        this._monthFormat = value;
        this.initFormatter();
    }

    /**
     * Gets/sets whether the view should be rendered
     * according to the locale and format, if any.
     */
    @Input({ transform: booleanAttribute })
    public override formatView = true;

    /**
     * Returns an array of date objects which are then used to
     * properly render the month names.
     *
     * Used in the template of the component
     *
     * @hidden @internal
     */
    public get range(): Date[] {
        const start = CalendarDay.from(this.date).set({ date: 1, month: 0 });
        const end = start.add(this.dayInterval, 12);

        return Array.from(
            calendarRange({ start, end, unit: this.dayInterval }),
        ).map((m) => m.native);
    }

    /**
     * @hidden
     */
    private _monthFormat = "short";

    constructor(
        public el: ElementRef,
        @Inject(DAY_INTERVAL_TOKEN) dayInterval: DayInterval,
    ) {
        super(dayInterval);
    }

    /**
     * @hidden
     */
    protected onMouseDown() {
        if (this.tabIndex !== -1) {
            this.el.nativeElement.focus();
        }
    }

    /**
     * Returns the locale representation of the month in the months view.
     *
     * @hidden
     */
    public formattedMonth(value: Date): { long: string; formatted: string } {
        const rawFormatter = new Intl.DateTimeFormat(this.locale, {
            month: "long",
            year: "numeric",
        });

        if (this.formatView) {
            return {
                long: rawFormatter.format(value),
                formatted: this._formatter.format(value),
            };
        }

        return {
            long: rawFormatter.format(value),
            formatted: `${value.getMonth()}`,
        };
    }

    /**
     * @hidden
     */
    public monthTracker(_: number, item: Date): string {
        return `${item.getMonth()}}`;
    }

    /**
     * @hidden
     */
    protected initFormatter() {
        this._formatter = new Intl.DateTimeFormat(this._locale, {
            month: this.monthFormat,
        });
    }
}

1	import {
2	Component,
3	Input,
4	HostBinding,
5	ElementRef,
6	booleanAttribute,
7	Inject,
8	} from "@angular/core";
9	import { IgxCalendarMonthDirective } from "../calendar.directives";
10	import { NgFor, TitleCasePipe } from "@angular/common";
11	import {
12	IgxCalendarViewDirective,
13	DAY_INTERVAL_TOKEN,
14	} from "../common/calendar-view.directive";
15	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
16	import { CalendarDay } from "../common/model";
17	import type { DayInterval } from "../common/model";
18	import { calendarRange } from "../common/helpers";
19
20	let NEXT_ID = 0;	2✔
21
22	@Component({
23	providers: [
24	{
25	provide: NG_VALUE_ACCESSOR,
26	useExisting: IgxMonthsViewComponent,
27	multi: true,
28	},
29	{
30	provide: DAY_INTERVAL_TOKEN,
31	useValue: "month",
32	},
33	],
34	selector: "igx-months-view",
35	templateUrl: "months-view.component.html",
36	standalone: true,
37	imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe],
38	})
39	export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {	2✔
40	#standalone = true;	32✔
41
42	/**
43	* Sets/gets the `id` of the months view.
44	* If not set, the `id` will have value `"igx-months-view-0"`.
45	* ```html
46	* <igx-months-view id="my-months-view"></igx-months-view>
47	* ```
48	* ```typescript
49	* let monthsViewId = this.monthsView.id;
50	* ```
51	*
52	* @memberof IgxMonthsViewComponent
53	*/
54	@HostBinding("attr.id")
55	@Input()
56	public id = `igx-months-view-${NEXT_ID++}`;	32✔
57
58	/**
59	* The default css class applied to the component.
60	*
61	* @hidden
62	*/
63	@HostBinding("class.igx-calendar-view")
64	public readonly viewClass = true;	32✔
65
66	/**
67	* @hidden @internal
68	*/
69	@Input()
70	@HostBinding("class.igx-calendar-view--standalone")
71	public get standalone() {
72	return this.#standalone;	140✔
73	}
74
75	public set standalone(value: boolean) {
76	this.#standalone = value;	32✔
77	}
78
79	/**
80	* Gets the month format option of the months view.
81	* ```typescript
82	* let monthFormat = this.monthsView.monthFormat.
83	* ```
84	*/
85	@Input()
86	public get monthFormat(): any {
87	return this._monthFormat;	100✔
88	}
89
90	/**
91	* Sets the month format option of the months view.
92	* ```html
93	* <igx-months-view> [monthFormat]="short'"</igx-months-view>
94	* ```
95	*
96	* @memberof IgxMonthsViewComponent
97	*/
98	public set monthFormat(value: any) {
99	this._monthFormat = value;	34✔
100	this.initFormatter();	34✔
101	}
102
103	/**
104	* Gets/sets whether the view should be rendered
105	* according to the locale and format, if any.
106	*/
107	@Input({ transform: booleanAttribute })
108	public override formatView = true;	32✔
109
110	/**
111	* Returns an array of date objects which are then used to
112	* properly render the month names.
113	*
114	* Used in the template of the component
115	*
116	* @hidden @internal
117	*/
118	public get range(): Date[] {
119	const start = CalendarDay.from(this.date).set({ date: 1, month: 0 });	171✔
120	const end = start.add(this.dayInterval, 12);	171✔
121
122	return Array.from(	171✔
123	calendarRange({ start, end, unit: this.dayInterval }),
124	).map((m) => m.native);	2,052✔
125	}
126
127	/**
128	* @hidden
129	*/
130	private _monthFormat = "short";	32✔
131
132	constructor(
133	public el: ElementRef,	32✔
134	@Inject(DAY_INTERVAL_TOKEN) dayInterval: DayInterval,
135	) {
136	super(dayInterval);	32✔
137	}
138
139	/**
140	* @hidden
141	*/
142	protected onMouseDown() {
143	if (this.tabIndex !== -1) {	3!
NEW 144	this.el.nativeElement.focus();	×
145	}
146	}
147
148	/**
149	* Returns the locale representation of the month in the months view.
150	*
151	* @hidden
152	*/
153	public formattedMonth(value: Date): { long: string; formatted: string } {
154	const rawFormatter = new Intl.DateTimeFormat(this.locale, {	3,360✔
155	month: "long",
156	year: "numeric",
157	});
158
159	if (this.formatView) {	3,360✔
160	return {	3,360✔
161	long: rawFormatter.format(value),
162	formatted: this._formatter.format(value),
163	};
164	}
165
166	return {	×
167	long: rawFormatter.format(value),
168	formatted: `${value.getMonth()}`,
169	};
170	}
171
172	/**
173	* @hidden
174	*/
175	public monthTracker(_: number, item: Date): string {
176	return `${item.getMonth()}}`;	888✔
177	}
178
179	/**
180	* @hidden
181	*/
182	protected initFormatter() {
183	this._formatter = new Intl.DateTimeFormat(this._locale, {	100✔
184	month: this.monthFormat,
185	});
186	}
187	}

IgniteUI / igniteui-angular / 12908449500

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