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

3.77

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

import {
    Component,
    ChangeDetectorRef,
    ElementRef,
    HostBinding,
    HostListener,
    Input,
    Host,
    EventEmitter,
    Output,
    ContentChild,
    Inject,
    ViewChild,
    booleanAttribute
} from '@angular/core';
import { IgxExpansionPanelIconDirective } from './expansion-panel.directives';
import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCancelableEventArgs } from './expansion-panel.common';
import { mkenum } from '../core/utils';
import { IgxIconComponent } from '../icon/icon.component';
import { NgIf } from '@angular/common';

/**
 * @hidden
 */
export const ExpansionPanelHeaderIconPosition = /*@__PURE__*/mkenum({
    LEFT: 'left',
    NONE: 'none',
    RIGHT: 'right'
});
export type ExpansionPanelHeaderIconPosition = (typeof ExpansionPanelHeaderIconPosition)[keyof typeof ExpansionPanelHeaderIconPosition];


@Component({
    selector: 'igx-expansion-panel-header',
    templateUrl: 'expansion-panel-header.component.html',
    imports: [NgIf, IgxIconComponent]
})
export class IgxExpansionPanelHeaderComponent {
    /**
     * Returns a reference to the `igx-expansion-panel-icon` element;
     * If `iconPosition` is `NONE` - return null;
     */
    public get iconRef(): ElementRef {
        const renderedTemplate = this.customIconRef ?? this.defaultIconRef;
        return this.iconPosition !== ExpansionPanelHeaderIconPosition.NONE ? renderedTemplate : null;
    }

    /**
     * @hidden
     */
    @ContentChild(IgxExpansionPanelIconDirective)
    public set iconTemplate(val: boolean) {
        this._iconTemplate = val;
    }

    /**
     * @hidden
     */
    public get iconTemplate(): boolean {
        return this._iconTemplate;
    }

    /**
     * Gets/sets the `aria-level` attribute of the header
     * Get
     * ```typescript
     *  const currentAriaLevel = this.panel.header.lv;
     * ```
     * Set
     * ```typescript
     *  this.panel.header.lv = '5';
     * ```
     * ```html
     *  <igx-expansion-panel-header [lv]="myCustomLevel"></igx-expansion-panel-header>
     * ```
     */
    @HostBinding('attr.aria-level')
    @Input()
    public lv = '3';

    /**
     * Gets/sets the `role` attribute of the header
     * Get
     * ```typescript
     *  const currentRole = this.panel.header.role;
     * ```
     * Set
     * ```typescript
     *  this.panel.header.role = '5';
     * ```
     * ```html
     *  <igx-expansion-panel-header [role]="'custom'"></igx-expansion-panel-header>
     * ```
     */
    @HostBinding('attr.role')
    @Input()
    public role = 'heading';

    /**
     * @hidden
     */
    public get controls(): string {
        return this.panel.id;
    }

    /**
     * @hidden @internal
     */
    public get innerElement() {
        return this.elementRef.nativeElement.children[0];
    }

    /**
     * Gets/sets the position of the expansion-panel-header expand/collapse icon
     * Accepts `left`, `right` or `none`
     * ```typescript
     *  const currentIconPosition = this.panel.header.iconPosition;
     * ```
     * Set
     * ```typescript
     *  this.panel.header.iconPosition = 'left';
     * ```
     * ```html
     *  <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
     * ```
     */
    @Input()
    public iconPosition: ExpansionPanelHeaderIconPosition = ExpansionPanelHeaderIconPosition.LEFT;

    /**
     * Emitted whenever a user interacts with the header host
     * ```typescript
     *  handleInteraction(event: IExpansionPanelCancelableEventArgs) {
     *  ...
     * }
     * ```
     * ```html
     *  <igx-expansion-panel-header (interaction)="handleInteraction($event)">
     *      ...
     *  </igx-expansion-panel-header>
     * ```
     */
    @Output()
    public interaction = new EventEmitter<IExpansionPanelCancelableEventArgs>();

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

    /**
     * @hidden
     */
    @HostBinding('class.igx-expansion-panel__header--expanded')
    public get isExpanded() {
        return !this.panel.collapsed;
    }

    /**
     * Gets/sets the whether the header is disabled
     * When disabled, the header will not handle user events and will stop their propagation
     *
     * ```typescript
     *  const isDisabled = this.panel.header.disabled;
     * ```
     * Set
     * ```typescript
     *  this.panel.header.disabled = true;
     * ```
     * ```html
     *  <igx-expansion-panel-header [disabled]="true">
     *     ...
     *  </igx-expansion-panel-header>
     * ```
     */
    @Input({ transform: booleanAttribute })
    @HostBinding('class.igx-expansion-panel--disabled')
    public get disabled(): boolean {
        return this._disabled;
    }

    public set disabled(val: boolean) {
        this._disabled = val;
        if (val) {
            // V.S. June 11th, 2021: #9696 TabIndex should be removed when panel is disabled
            delete this.tabIndex;
        } else {
            this.tabIndex = 0;
        }
    }

    /** @hidden @internal */
    @ContentChild(IgxExpansionPanelIconDirective, { read: ElementRef })
    private customIconRef: ElementRef;

    /** @hidden @internal */
    @ViewChild(IgxIconComponent, { read: ElementRef })
    private defaultIconRef: ElementRef;

    /**
     * Sets/gets the `id` of the expansion panel header.
     * ```typescript
     * let panelHeaderId =  this.panel.header.id;
     * ```
     *
     * @memberof IgxExpansionPanelComponent
     */
    public id = '';

    /** @hidden @internal */
    public tabIndex = 0;

    // properties section
    private _iconTemplate = false;
    private _disabled = false;

    constructor(
        @Host() @Inject(IGX_EXPANSION_PANEL_COMPONENT)
        public panel: IgxExpansionPanelBase,
        public cdr: ChangeDetectorRef,
        public elementRef: ElementRef,
    ) {
        this.id = `${this.panel.id}-header`;
    }

    /**
     * @hidden
     */
    @HostListener('keydown.Enter', ['$event'])
    @HostListener('keydown.Space', ['$event'])
    @HostListener('keydown.Spacebar', ['$event'])
    @HostListener('click', ['$event'])
    public onAction(evt?: Event) {
        if (this.disabled) {
            evt.stopPropagation();
            return;
        }
        const eventArgs: IExpansionPanelCancelableEventArgs = { event: evt, owner: this.panel, cancel: false };
        this.interaction.emit(eventArgs);
        if (eventArgs.cancel === true) {
            return;
        }
        this.panel.toggle(evt);
        evt.preventDefault();
    }

    /** @hidden @internal */
    @HostListener('keydown.Alt.ArrowDown', ['$event'])
    public openPanel(event: KeyboardEvent) {
        if (event.altKey) {
            const eventArgs: IExpansionPanelCancelableEventArgs = { event, owner: this.panel, cancel: false };
            this.interaction.emit(eventArgs);
            if (eventArgs.cancel === true) {
                return;
            }
            this.panel.expand(event);
        }
    }

    /** @hidden @internal */
    @HostListener('keydown.Alt.ArrowUp', ['$event'])
    public closePanel(event: KeyboardEvent) {
        if (event.altKey) {
            const eventArgs: IExpansionPanelCancelableEventArgs = { event, owner: this.panel, cancel: false };
            this.interaction.emit(eventArgs);
            if (eventArgs.cancel === true) {
                return;
            }
            this.panel.collapse(event);
        }
    }

    /**
     * @hidden
     */
    public get iconPositionClass(): string {
        switch (this.iconPosition) {
            case (ExpansionPanelHeaderIconPosition.LEFT):
                return `igx-expansion-panel__header-icon--start`;
            case (ExpansionPanelHeaderIconPosition.RIGHT):
                return `igx-expansion-panel__header-icon--end`;
            case (ExpansionPanelHeaderIconPosition.NONE):
                return `igx-expansion-panel__header-icon--none`;
            default:
                return '';
        }
    }
}

1	import {
2	Component,
3	ChangeDetectorRef,
4	ElementRef,
5	HostBinding,
6	HostListener,
7	Input,
8	Host,
9	EventEmitter,
10	Output,
11	ContentChild,
12	Inject,
13	ViewChild,
14	booleanAttribute
15	} from '@angular/core';
16	import { IgxExpansionPanelIconDirective } from './expansion-panel.directives';
17	import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCancelableEventArgs } from './expansion-panel.common';
18	import { mkenum } from '../core/utils';
19	import { IgxIconComponent } from '../icon/icon.component';
20	import { NgIf } from '@angular/common';
21
22	/**
23	* @hidden
24	*/
25	export const ExpansionPanelHeaderIconPosition = /@__PURE__/mkenum({	2✔
26	LEFT: 'left',
27	NONE: 'none',
28	RIGHT: 'right'
29	});
30	export type ExpansionPanelHeaderIconPosition = (typeof ExpansionPanelHeaderIconPosition)[keyof typeof ExpansionPanelHeaderIconPosition];
31
32
33	@Component({
34	selector: 'igx-expansion-panel-header',
35	templateUrl: 'expansion-panel-header.component.html',
36	imports: [NgIf, IgxIconComponent]
37	})
38	export class IgxExpansionPanelHeaderComponent {	2✔
39	/**
40	* Returns a reference to the `igx-expansion-panel-icon` element;
41	* If `iconPosition` is `NONE` - return null;
42	*/
43	public get iconRef(): ElementRef {
UNCOV 44	const renderedTemplate = this.customIconRef ?? this.defaultIconRef;	×
UNCOV 45	return this.iconPosition !== ExpansionPanelHeaderIconPosition.NONE ? renderedTemplate : null;	×
46	}
47
48	/**
49	* @hidden
50	*/
51	@ContentChild(IgxExpansionPanelIconDirective)
52	public set iconTemplate(val: boolean) {
UNCOV 53	this._iconTemplate = val;	×
54	}
55
56	/**
57	* @hidden
58	*/
59	public get iconTemplate(): boolean {
UNCOV 60	return this._iconTemplate;	×
61	}
62
63	/**
64	* Gets/sets the `aria-level` attribute of the header
65	* Get
66	* ```typescript
67	* const currentAriaLevel = this.panel.header.lv;
68	* ```
69	* Set
70	* ```typescript
71	* this.panel.header.lv = '5';
72	* ```
73	* ```html
74	* <igx-expansion-panel-header [lv]="myCustomLevel"></igx-expansion-panel-header>
75	* ```
76	*/
77	@HostBinding('attr.aria-level')
78	@Input()
UNCOV 79	public lv = '3';	×
80
81	/**
82	* Gets/sets the `role` attribute of the header
83	* Get
84	* ```typescript
85	* const currentRole = this.panel.header.role;
86	* ```
87	* Set
88	* ```typescript
89	* this.panel.header.role = '5';
90	* ```
91	* ```html
92	* <igx-expansion-panel-header [role]="'custom'"></igx-expansion-panel-header>
93	* ```
94	*/
95	@HostBinding('attr.role')
96	@Input()
UNCOV 97	public role = 'heading';	×
98
99	/**
100	* @hidden
101	*/
102	public get controls(): string {
UNCOV 103	return this.panel.id;	×
104	}
105
106	/**
107	* @hidden @internal
108	*/
109	public get innerElement() {
UNCOV 110	return this.elementRef.nativeElement.children[0];	×
111	}
112
113	/**
114	* Gets/sets the position of the expansion-panel-header expand/collapse icon
115	* Accepts `left`, `right` or `none`
116	* ```typescript
117	* const currentIconPosition = this.panel.header.iconPosition;
118	* ```
119	* Set
120	* ```typescript
121	* this.panel.header.iconPosition = 'left';
122	* ```
123	* ```html
124	* <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
125	* ```
126	*/
127	@Input()
UNCOV 128	public iconPosition: ExpansionPanelHeaderIconPosition = ExpansionPanelHeaderIconPosition.LEFT;	×
129
130	/**
131	* Emitted whenever a user interacts with the header host
132	* ```typescript
133	* handleInteraction(event: IExpansionPanelCancelableEventArgs) {
134	* ...
135	* }
136	* ```
137	* ```html
138	* <igx-expansion-panel-header (interaction)="handleInteraction($event)">
139	* ...
140	* </igx-expansion-panel-header>
141	* ```
142	*/
143	@Output()
UNCOV 144	public interaction = new EventEmitter<IExpansionPanelCancelableEventArgs>();	×
145
146	/**
147	* @hidden
148	*/
149	@HostBinding('class.igx-expansion-panel__header')
UNCOV 150	public cssClass = 'igx-expansion-panel__header';	×
151
152	/**
153	* @hidden
154	*/
155	@HostBinding('class.igx-expansion-panel__header--expanded')
156	public get isExpanded() {
UNCOV 157	return !this.panel.collapsed;	×
158	}
159
160	/**
161	* Gets/sets the whether the header is disabled
162	* When disabled, the header will not handle user events and will stop their propagation
163	*
164	* ```typescript
165	* const isDisabled = this.panel.header.disabled;
166	* ```
167	* Set
168	* ```typescript
169	* this.panel.header.disabled = true;
170	* ```
171	* ```html
172	* <igx-expansion-panel-header [disabled]="true">
173	* ...
174	* </igx-expansion-panel-header>
175	* ```
176	*/
177	@Input({ transform: booleanAttribute })
178	@HostBinding('class.igx-expansion-panel--disabled')
179	public get disabled(): boolean {
UNCOV 180	return this._disabled;	×
181	}
182
183	public set disabled(val: boolean) {
UNCOV 184	this._disabled = val;	×
UNCOV 185	if (val) {	×
186	// V.S. June 11th, 2021: #9696 TabIndex should be removed when panel is disabled
UNCOV 187	delete this.tabIndex;	×
188	} else {
UNCOV 189	this.tabIndex = 0;	×
190	}
191	}
192
193	/** @hidden @internal */
194	@ContentChild(IgxExpansionPanelIconDirective, { read: ElementRef })
195	private customIconRef: ElementRef;
196
197	/** @hidden @internal */
198	@ViewChild(IgxIconComponent, { read: ElementRef })
199	private defaultIconRef: ElementRef;
200
201	/**
202	* Sets/gets the `id` of the expansion panel header.
203	* ```typescript
204	* let panelHeaderId = this.panel.header.id;
205	* ```
206	*
207	* @memberof IgxExpansionPanelComponent
208	*/
UNCOV 209	public id = '';	×
210
211	/** @hidden @internal */
UNCOV 212	public tabIndex = 0;	×
213
214	// properties section
UNCOV 215	private _iconTemplate = false;	×
UNCOV 216	private _disabled = false;	×
217
218	constructor(
219	@Host() @Inject(IGX_EXPANSION_PANEL_COMPONENT)
UNCOV 220	public panel: IgxExpansionPanelBase,	×
UNCOV 221	public cdr: ChangeDetectorRef,	×
UNCOV 222	public elementRef: ElementRef,	×
223	) {
UNCOV 224	this.id = `${this.panel.id}-header`;	×
225	}
226
227	/**
228	* @hidden
229	*/
230	@HostListener('keydown.Enter', ['$event'])
231	@HostListener('keydown.Space', ['$event'])
232	@HostListener('keydown.Spacebar', ['$event'])
233	@HostListener('click', ['$event'])
234	public onAction(evt?: Event) {
UNCOV 235	if (this.disabled) {	×
UNCOV 236	evt.stopPropagation();	×
UNCOV 237	return;	×
238	}
UNCOV 239	const eventArgs: IExpansionPanelCancelableEventArgs = { event: evt, owner: this.panel, cancel: false };	×
UNCOV 240	this.interaction.emit(eventArgs);	×
UNCOV 241	if (eventArgs.cancel === true) {	×
UNCOV 242	return;	×
243	}
UNCOV 244	this.panel.toggle(evt);	×
UNCOV 245	evt.preventDefault();	×
246	}
247
248	/** @hidden @internal */
249	@HostListener('keydown.Alt.ArrowDown', ['$event'])
250	public openPanel(event: KeyboardEvent) {
UNCOV 251	if (event.altKey) {	×
UNCOV 252	const eventArgs: IExpansionPanelCancelableEventArgs = { event, owner: this.panel, cancel: false };	×
UNCOV 253	this.interaction.emit(eventArgs);	×
UNCOV 254	if (eventArgs.cancel === true) {	×
UNCOV 255	return;	×
256	}
UNCOV 257	this.panel.expand(event);	×
258	}
259	}
260
261	/** @hidden @internal */
262	@HostListener('keydown.Alt.ArrowUp', ['$event'])
263	public closePanel(event: KeyboardEvent) {
UNCOV 264	if (event.altKey) {	×
UNCOV 265	const eventArgs: IExpansionPanelCancelableEventArgs = { event, owner: this.panel, cancel: false };	×
UNCOV 266	this.interaction.emit(eventArgs);	×
UNCOV 267	if (eventArgs.cancel === true) {	×
UNCOV 268	return;	×
269	}
UNCOV 270	this.panel.collapse(event);	×
271	}
272	}
273
274	/**
275	* @hidden
276	*/
277	public get iconPositionClass(): string {
UNCOV 278	switch (this.iconPosition) {	×
279	case (ExpansionPanelHeaderIconPosition.LEFT):
UNCOV 280	return `igx-expansion-panel__header-icon--start`;	×
281	case (ExpansionPanelHeaderIconPosition.RIGHT):
UNCOV 282	return `igx-expansion-panel__header-icon--end`;	×
283	case (ExpansionPanelHeaderIconPosition.NONE):
UNCOV 284	return `igx-expansion-panel__header-icon--none`;	×
285	default:
286	return '';	×
287	}
288	}
289	}

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