13331632524

Committed 14 Feb 2025 02:51PM UTC 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

3.85

/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts

import {
    AfterContentInit,
    ChangeDetectorRef,
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    HostBinding,
    Inject,
    Input,
    Output,
    booleanAttribute
} from '@angular/core';
import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
import { AnimationService } from '../services/animation/animation';
import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
import {
    IExpansionPanelCancelableEventArgs,
    IExpansionPanelEventArgs,
    IgxExpansionPanelBase,
    IGX_EXPANSION_PANEL_COMPONENT
} from './expansion-panel.common';
import { ToggleAnimationPlayer, ToggleAnimationSettings } from './toggle-animation-component';
import { NgIf } from '@angular/common';

let NEXT_ID = 0;

@Component({
    selector: 'igx-expansion-panel',
    templateUrl: 'expansion-panel.component.html',
    providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }],
    imports: [NgIf]
})
export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements IgxExpansionPanelBase, AfterContentInit {
    /**
     * Sets/gets the animation settings of the expansion panel component
     * Open and Close animation should be passed
     *
     * Get
     * ```typescript
     *  const currentAnimations = this.panel.animationSettings;
     * ```
     * Set
     * ```typescript
     *  import { slideInLeft, slideOutRight } from 'igniteui-angular';
     *  ...
     *  this.panel.animationsSettings = {
     *      openAnimation: slideInLeft,
     *      closeAnimation: slideOutRight
     * };
     * ```
     * or via template
     * ```typescript
     *  import { slideInLeft, slideOutRight } from 'igniteui-angular';
     *  ...
     *  myCustomAnimationObject = {
     *      openAnimation: slideInLeft,
     *      closeAnimation: slideOutRight
     * };
     * ```html
     *  <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
     *  ...
     *  </igx-expansion-panel>
     * ```
     */
    @Input()
    public override get animationSettings(): ToggleAnimationSettings {
        return this._animationSettings;
    }
    public override set animationSettings(value: ToggleAnimationSettings) {
        this._animationSettings = value;
    }

    /**
     * Sets/gets the `id` of the expansion panel component.
     * If not set, `id` will have value `"igx-expansion-panel-0"`;
     * ```html
     * <igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
     * ```
     * ```typescript
     * let panelId =  this.panel.id;
     * ```
     *
     * @memberof IgxExpansionPanelComponent
     */
    @HostBinding('attr.id')
    @Input()
    public id = `igx-expansion-panel-${NEXT_ID++}`;

    /**
     * @hidden
     */
    @HostBinding('class.igx-expansion-panel')
    public cssClass = 'igx-expansion-panel';

    /**
     * @hidden
     */
    @HostBinding('class.igx-expansion-panel--expanded')
    private opened = false;

    /**
     * @hidden @internal
     */
    @HostBinding('attr.aria-expanded')
    public get panelExpanded() {
        return !this.collapsed;
    }

    /**
     * Gets/sets whether the component is collapsed (its content is hidden)
     * Get
     * ```typescript
     *  const myPanelState: boolean = this.panel.collapsed;
     * ```
     * Set
     * ```html
     *  this.panel.collapsed = true;
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public collapsed = true;

    /**
     * @hidden
     */
    @Output()
    public collapsedChange = new EventEmitter<boolean>();

    /**
     * Emitted when the expansion panel starts collapsing
     * ```typescript
     *  handleCollapsing(event: IExpansionPanelCancelableEventArgs)
     * ```
     * ```html
     *  <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
     *      ...
     *  </igx-expansion-panel>
     * ```
     */
    @Output()
    public contentCollapsing = new EventEmitter<IExpansionPanelCancelableEventArgs>();

    /**
     * Emitted when the expansion panel finishes collapsing
     * ```typescript
     *  handleCollapsed(event: IExpansionPanelEventArgs)
     * ```
     * ```html
     *  <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
     *      ...
     *  </igx-expansion-panel>
     * ```
     */
    @Output()
    public contentCollapsed = new EventEmitter<IExpansionPanelEventArgs>();

    /**
     * Emitted when the expansion panel starts expanding
     * ```typescript
     *  handleExpanding(event: IExpansionPanelCancelableEventArgs)
     * ```
     * ```html
     *  <igx-expansion-panel (contentExpanding)="handleExpanding($event)">
     *      ...
     *  </igx-expansion-panel>
     * ```
     */
    @Output()
    public contentExpanding = new EventEmitter<IExpansionPanelCancelableEventArgs>();

    /**
     * Emitted when the expansion panel finishes expanding
     * ```typescript
     *  handleExpanded(event: IExpansionPanelEventArgs)
     * ```
     * ```html
     *  <igx-expansion-panel (contentExpanded)="handleExpanded($event)">
     *      ...
     *  </igx-expansion-panel>
     * ```
     */
    @Output()
    public contentExpanded = new EventEmitter<IExpansionPanelEventArgs>();

    /**
     * @hidden
     */
    public get headerId() {
        return this.header ? `${this.id}-header` : '';
    }

    /**
     * @hidden @internal
     */
    public get nativeElement() {
        return this.elementRef.nativeElement;
    }

    /**
     * @hidden
     */
    @ContentChild(IgxExpansionPanelBodyComponent, { read: IgxExpansionPanelBodyComponent })
    public body: IgxExpansionPanelBodyComponent;

    /**
     * @hidden
     */
    @ContentChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent })
    public header: IgxExpansionPanelHeaderComponent;

    constructor(
        @Inject(IgxAngularAnimationService) animationService: AnimationService,
        private cdr: ChangeDetectorRef,
        private elementRef?: ElementRef) {
        super(animationService);
    }

    /** @hidden */
    public ngAfterContentInit(): void {
        if (this.body && this.header) {
            // schedule at end of turn:
            Promise.resolve().then(() => {
                this.body.labelledBy = this.body.labelledBy || this.headerId;
                this.body.label = this.body.label || this.id + '-region';
            });
        }
    }

    /**
     * Collapses the panel
     *
     * ```html
     *  <igx-expansion-panel #myPanel>
     *      ...
     *  </igx-expansion-panel>
     *  <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
     * ```
     */
    public collapse(evt?: Event) {
        // If expansion panel is already collapsed or is collapsing, do nothing
        if (this.collapsed || this.closeAnimationPlayer) {
            return;
        }
        const args = { event: evt, panel: this, owner: this, cancel: false };
        this.contentCollapsing.emit(args);
        if (args.cancel === true) {
            return;
        }
        this.opened = false;
        this.playCloseAnimation(
            this.body?.element,
            () => {
                this.contentCollapsed.emit({ event: evt, owner: this });
                this.collapsed = true;
                this.collapsedChange.emit(true);
                this.cdr.markForCheck();
            }
        );
    }

    /**
     * Expands the panel
     *
     * ```html
     *  <igx-expansion-panel #myPanel>
     *      ...
     *  </igx-expansion-panel>
     *  <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
     * ```
     */
    public expand(evt?: Event) {
        if (!this.collapsed && !this.closeAnimationPlayer) { // Check if the panel is currently collapsing or already expanded
            return;
        }
        const args = { event: evt, panel: this, owner: this, cancel: false };
        this.contentExpanding.emit(args);
        if (args.cancel === true) {
            return;
        }
        this.collapsed = false;
        this.opened = true;
        this.collapsedChange.emit(false);
        this.cdr.detectChanges();
        this.playOpenAnimation(
            this.body?.element,
            () => {
                this.contentExpanded.emit({ event: evt, owner: this });
            }
        );
    }

    /**
     * Toggles the panel
     *
     * ```html
     *  <igx-expansion-panel #myPanel>
     *      ...
     *  </igx-expansion-panel>
     *  <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
     * ```
     */
    public toggle(evt?: Event) {
        if (this.collapsed) {
            this.open(evt);
        } else {
            this.close(evt);
        }
    }

    public open(evt?: Event) {
        this.expand(evt);
    }

    public close(evt?: Event) {
        this.collapse(evt);
    }
}

1	import {
2	AfterContentInit,
3	ChangeDetectorRef,
4	Component,
5	ContentChild,
6	ElementRef,
7	EventEmitter,
8	HostBinding,
9	Inject,
10	Input,
11	Output,
12	booleanAttribute
13	} from '@angular/core';
14	import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
15	import { AnimationService } from '../services/animation/animation';
16	import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
17	import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
18	import {
19	IExpansionPanelCancelableEventArgs,
20	IExpansionPanelEventArgs,
21	IgxExpansionPanelBase,
22	IGX_EXPANSION_PANEL_COMPONENT
23	} from './expansion-panel.common';
24	import { ToggleAnimationPlayer, ToggleAnimationSettings } from './toggle-animation-component';
25	import { NgIf } from '@angular/common';
26
27	let NEXT_ID = 0;	2✔
28
29	@Component({
30	selector: 'igx-expansion-panel',
31	templateUrl: 'expansion-panel.component.html',
32	providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }],
33	imports: [NgIf]
34	})
35	export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements IgxExpansionPanelBase, AfterContentInit {	2✔
36	/**
37	* Sets/gets the animation settings of the expansion panel component
38	* Open and Close animation should be passed
39	*
40	* Get
41	* ```typescript
42	* const currentAnimations = this.panel.animationSettings;
43	* ```
44	* Set
45	* ```typescript
46	* import { slideInLeft, slideOutRight } from 'igniteui-angular';
47	* ...
48	* this.panel.animationsSettings = {
49	* openAnimation: slideInLeft,
50	* closeAnimation: slideOutRight
51	* };
52	* ```
53	* or via template
54	* ```typescript
55	* import { slideInLeft, slideOutRight } from 'igniteui-angular';
56	* ...
57	* myCustomAnimationObject = {
58	* openAnimation: slideInLeft,
59	* closeAnimation: slideOutRight
60	* };
61	* ```html
62	* <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
63	* ...
64	* </igx-expansion-panel>
65	* ```
66	*/
67	@Input()
68	public override get animationSettings(): ToggleAnimationSettings {
UNCOV 69	return this._animationSettings;	×
70	}
71	public override set animationSettings(value: ToggleAnimationSettings) {
UNCOV 72	this._animationSettings = value;	×
73	}
74
75	/**
76	* Sets/gets the `id` of the expansion panel component.
77	* If not set, `id` will have value `"igx-expansion-panel-0"`;
78	* ```html
79	* <igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
80	* ```
81	* ```typescript
82	* let panelId = this.panel.id;
83	* ```
84	*
85	* @memberof IgxExpansionPanelComponent
86	*/
87	@HostBinding('attr.id')
88	@Input()
UNCOV 89	public id = `igx-expansion-panel-${NEXT_ID++}`;	×
90
91	/**
92	* @hidden
93	*/
94	@HostBinding('class.igx-expansion-panel')
UNCOV 95	public cssClass = 'igx-expansion-panel';	×
96
97	/**
98	* @hidden
99	*/
100	@HostBinding('class.igx-expansion-panel--expanded')
UNCOV 101	private opened = false;	×
102
103	/**
104	* @hidden @internal
105	*/
106	@HostBinding('attr.aria-expanded')
107	public get panelExpanded() {
UNCOV 108	return !this.collapsed;	×
109	}
110
111	/**
112	* Gets/sets whether the component is collapsed (its content is hidden)
113	* Get
114	* ```typescript
115	* const myPanelState: boolean = this.panel.collapsed;
116	* ```
117	* Set
118	* ```html
119	* this.panel.collapsed = true;
120	* ```
121	*
122	* Two-way data binding:
123	* ```html
124	* <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
125	* ```
126	*/
127	@Input({ transform: booleanAttribute })
UNCOV 128	public collapsed = true;	×
129
130	/**
131	* @hidden
132	*/
133	@Output()
UNCOV 134	public collapsedChange = new EventEmitter<boolean>();	×
135
136	/**
137	* Emitted when the expansion panel starts collapsing
138	* ```typescript
139	* handleCollapsing(event: IExpansionPanelCancelableEventArgs)
140	* ```
141	* ```html
142	* <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
143	* ...
144	* </igx-expansion-panel>
145	* ```
146	*/
147	@Output()
UNCOV 148	public contentCollapsing = new EventEmitter<IExpansionPanelCancelableEventArgs>();	×
149
150	/**
151	* Emitted when the expansion panel finishes collapsing
152	* ```typescript
153	* handleCollapsed(event: IExpansionPanelEventArgs)
154	* ```
155	* ```html
156	* <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
157	* ...
158	* </igx-expansion-panel>
159	* ```
160	*/
161	@Output()
UNCOV 162	public contentCollapsed = new EventEmitter<IExpansionPanelEventArgs>();	×
163
164	/**
165	* Emitted when the expansion panel starts expanding
166	* ```typescript
167	* handleExpanding(event: IExpansionPanelCancelableEventArgs)
168	* ```
169	* ```html
170	* <igx-expansion-panel (contentExpanding)="handleExpanding($event)">
171	* ...
172	* </igx-expansion-panel>
173	* ```
174	*/
175	@Output()
UNCOV 176	public contentExpanding = new EventEmitter<IExpansionPanelCancelableEventArgs>();	×
177
178	/**
179	* Emitted when the expansion panel finishes expanding
180	* ```typescript
181	* handleExpanded(event: IExpansionPanelEventArgs)
182	* ```
183	* ```html
184	* <igx-expansion-panel (contentExpanded)="handleExpanded($event)">
185	* ...
186	* </igx-expansion-panel>
187	* ```
188	*/
189	@Output()
UNCOV 190	public contentExpanded = new EventEmitter<IExpansionPanelEventArgs>();	×
191
192	/**
193	* @hidden
194	*/
195	public get headerId() {
UNCOV 196	return this.header ? `${this.id}-header` : '';	×
197	}
198
199	/**
200	* @hidden @internal
201	*/
202	public get nativeElement() {
203	return this.elementRef.nativeElement;	×
204	}
205
206	/**
207	* @hidden
208	*/
209	@ContentChild(IgxExpansionPanelBodyComponent, { read: IgxExpansionPanelBodyComponent })
210	public body: IgxExpansionPanelBodyComponent;
211
212	/**
213	* @hidden
214	*/
215	@ContentChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent })
216	public header: IgxExpansionPanelHeaderComponent;
217
218	constructor(
219	@Inject(IgxAngularAnimationService) animationService: AnimationService,
UNCOV 220	private cdr: ChangeDetectorRef,	×
UNCOV 221	private elementRef?: ElementRef) {	×
UNCOV 222	super(animationService);	×
223	}
224
225	/** @hidden */
226	public ngAfterContentInit(): void {
UNCOV 227	if (this.body && this.header) {	×
228	// schedule at end of turn:
UNCOV 229	Promise.resolve().then(() => {	×
UNCOV 230	this.body.labelledBy = this.body.labelledBy \|\| this.headerId;	×
UNCOV 231	this.body.label = this.body.label \|\| this.id + '-region';	×
232	});
233	}
234	}
235
236	/**
237	* Collapses the panel
238	*
239	* ```html
240	* <igx-expansion-panel #myPanel>
241	* ...
242	* </igx-expansion-panel>
243	* <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
244	* ```
245	*/
246	public collapse(evt?: Event) {
247	// If expansion panel is already collapsed or is collapsing, do nothing
UNCOV 248	if (this.collapsed \|\| this.closeAnimationPlayer) {	×
UNCOV 249	return;	×
250	}
UNCOV 251	const args = { event: evt, panel: this, owner: this, cancel: false };	×
UNCOV 252	this.contentCollapsing.emit(args);	×
UNCOV 253	if (args.cancel === true) {	×
UNCOV 254	return;	×
255	}
UNCOV 256	this.opened = false;	×
UNCOV 257	this.playCloseAnimation(	×
258	this.body?.element,
259	() => {
UNCOV 260	this.contentCollapsed.emit({ event: evt, owner: this });	×
UNCOV 261	this.collapsed = true;	×
UNCOV 262	this.collapsedChange.emit(true);	×
UNCOV 263	this.cdr.markForCheck();	×
264	}
265	);
266	}
267
268	/**
269	* Expands the panel
270	*
271	* ```html
272	* <igx-expansion-panel #myPanel>
273	* ...
274	* </igx-expansion-panel>
275	* <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
276	* ```
277	*/
278	public expand(evt?: Event) {
UNCOV 279	if (!this.collapsed && !this.closeAnimationPlayer) { // Check if the panel is currently collapsing or already expanded	×
UNCOV 280	return;	×
281	}
UNCOV 282	const args = { event: evt, panel: this, owner: this, cancel: false };	×
UNCOV 283	this.contentExpanding.emit(args);	×
UNCOV 284	if (args.cancel === true) {	×
UNCOV 285	return;	×
286	}
UNCOV 287	this.collapsed = false;	×
UNCOV 288	this.opened = true;	×
UNCOV 289	this.collapsedChange.emit(false);	×
UNCOV 290	this.cdr.detectChanges();	×
UNCOV 291	this.playOpenAnimation(	×
292	this.body?.element,
293	() => {
UNCOV 294	this.contentExpanded.emit({ event: evt, owner: this });	×
295	}
296	);
297	}
298
299	/**
300	* Toggles the panel
301	*
302	* ```html
303	* <igx-expansion-panel #myPanel>
304	* ...
305	* </igx-expansion-panel>
306	* <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
307	* ```
308	*/
309	public toggle(evt?: Event) {
UNCOV 310	if (this.collapsed) {	×
UNCOV 311	this.open(evt);	×
312	} else {
UNCOV 313	this.close(evt);	×
314	}
315	}
316
317	public open(evt?: Event) {
UNCOV 318	this.expand(evt);	×
319	}
320
321	public close(evt?: Event) {
UNCOV 322	this.collapse(evt);	×
323	}
324	}

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