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

2.08

/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts

import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute } from '@angular/core';

/**
 * Represents individual resizable/collapsible panes.
 *
 * @igxModule IgxSplitterModule
 *
 * @igxParent IgxSplitterComponent
 *
 * @igxKeywords pane
 *
 * @igxGroup presentation
 *
 * @remarks
 *  Users can control the resize behavior via the min and max size properties.
 */
@Component({
    selector: 'igx-splitter-pane',
    templateUrl: './splitter-pane.component.html',
    standalone: true
})
export class IgxSplitterPaneComponent {
    private _minSize: string;
    private _maxSize: string;

    /**
     * @hidden @internal
     * Gets/Sets the 'display' property of the current pane.
     */
    @HostBinding('style.display')
    public display = 'flex';

    /**
     * Gets/Sets the minimum allowed size of the current pane.
     *
     * @example
     * ```html
     * <igx-splitter>
     *  <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
     * </igx-splitter>
     * ```
     */
    @Input()
    public get minSize(): string {
        return this._minSize;
    }
    public set minSize(value: string) {
        this._minSize = value;
        if (this.owner) {
            this.owner.panes.notifyOnChanges();
        }
    }

    /**
     * Gets/Set the maximum allowed size of the current pane.
     *
     * @example
     * ```html
     * <igx-splitter>
     *  <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
     * </igx-splitter>
     * ```
     */
    @Input()
    public get maxSize(): string {
        return this._maxSize;
    }
    public set maxSize(value: string) {
        this._maxSize = value;
        if (this.owner) {
            this.owner.panes.notifyOnChanges();
        }
    }

    /**
     * Gets/Sets whether pane is resizable.
     *
     * @example
     * ```html
     * <igx-splitter>
     *  <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane>
     * </igx-splitter>
     * ```
     * @remarks
     * If pane is not resizable its related splitter bar cannot be dragged.
     */
    @Input({ transform: booleanAttribute })
    public resizable = true;

    /**
     * Event fired when collapsed state of pane is changed.
     *
     * @example
     * ```html
     * <igx-splitter>
     *  <igx-splitter-pane (collapsedChange)='paneCollapsedChange($event)'>...</igx-splitter-pane>
     * </igx-splitter>
     * ```
     */
    @Output()
    public collapsedChange = new EventEmitter<boolean>();

    /** @hidden @internal */
    @HostBinding('style.order')
    public order!: number;

    /**
     * @hidden @internal
     * Gets/Sets the `overflow`.
     */
    @HostBinding('style.overflow')
    public overflow = 'auto';

    /**
     * @hidden @internal
     * Get/Sets the `minWidth` properties of the current pane.
     */
    @HostBinding('style.min-width')
    public minWidth = '0';

    /**
     * @hidden @internal
     * Get/Sets the `maxWidth` properties of the current pane.
     */
    @HostBinding('style.max-width')
    public maxWidth = '100%';

    /**
     * @hidden @internal
     * Gets/Sets the `minHeight` properties of the current pane.
     */
    @HostBinding('style.min-height')
    public minHeight = '0';

    /**
     * @hidden @internal
     * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
     */
    @HostBinding('style.max-height')
    public maxHeight = '100%';

    /** @hidden @internal */
    public owner;

    /**
     * Gets/Sets the size of the current pane.
     *  * @example
     * ```html
     * <igx-splitter>
     *  <igx-splitter-pane [size]='size'>...</igx-splitter-pane>
     * </igx-splitter>
     * ```
     */
    @Input()
    public get size() {
        return this._size;
    }

    public set size(value) {
        this._size = value;
        this.el.nativeElement.style.flex = this.flex;
    }

    /** @hidden @internal */
    public get isPercentageSize() {
        return this.size === 'auto' || this.size.indexOf('%') !== -1;
    }

    /** @hidden @internal */
    public get dragSize() {
        return this._dragSize;
    }
    public set dragSize(val) {
        this._dragSize = val;
        this.el.nativeElement.style.flex = this.flex;
    }

    /**
     *
     * @hidden @internal
     * Gets the host native element.
     */
    public get element(): any {
        return this.el.nativeElement;
    }

    /**
     * @hidden @internal
     * Gets the `flex` property of the current `IgxSplitterPaneComponent`.
     */
    @HostBinding('style.flex')
    public get flex() {
        const size = this.dragSize || this.size;
        const grow = this.isPercentageSize && !this.dragSize ? 1 : 0;
        return `${grow} ${grow} ${size}`;
    }

    /**
     * Gets/Sets whether current pane is collapsed.
     *
     * @example
     * ```typescript
     * const isCollapsed = pane.collapsed;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public set collapsed(value) {
        if (this.owner) {
            // reset sibling sizes when pane collapse state changes.
            this._getSiblings().forEach(sibling => {
                sibling.size = 'auto'
                sibling.dragSize = null;
            });
        }
        this._collapsed = value;
        this.display = this._collapsed ? 'none' : 'flex';
        this.collapsedChange.emit(this._collapsed);
    }

    public get collapsed() {
        return this._collapsed;
    }

    private _size = 'auto';
    private _dragSize;
    private _collapsed = false;


    constructor(private el: ElementRef) { }

    /**
     * Toggles the collapsed state of the pane.
     *
     * @example
     * ```typescript
     * pane.toggle();
     * ```
     */
    public toggle() {
        this.collapsed = !this.collapsed;
    }

    /** @hidden @internal */
    private _getSiblings() {
        const panes = this.owner.panes.toArray();
        const index = panes.indexOf(this);
        const siblings = [];
        if (index !== 0) {
            siblings.push(panes[index - 1]);
        }
        if (index !== panes.length - 1) {
            siblings.push(panes[index + 1]);
        }
        return siblings;
    }
}

1	import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute } from '@angular/core';
2
3	/**
4	* Represents individual resizable/collapsible panes.
5	*
6	* @igxModule IgxSplitterModule
7	*
8	* @igxParent IgxSplitterComponent
9	*
10	* @igxKeywords pane
11	*
12	* @igxGroup presentation
13	*
14	* @remarks
15	* Users can control the resize behavior via the min and max size properties.
16	*/
17	@Component({
18	selector: 'igx-splitter-pane',
19	templateUrl: './splitter-pane.component.html',
20	standalone: true
21	})
22	export class IgxSplitterPaneComponent {	2✔
23	private _minSize: string;
24	private _maxSize: string;
25
26	/**
27	* @hidden @internal
28	* Gets/Sets the 'display' property of the current pane.
29	*/
30	@HostBinding('style.display')
UNCOV 31	public display = 'flex';	×
32
33	/**
34	* Gets/Sets the minimum allowed size of the current pane.
35	*
36	* @example
37	* ```html
38	* <igx-splitter>
39	* <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
40	* </igx-splitter>
41	* ```
42	*/
43	@Input()
44	public get minSize(): string {
UNCOV 45	return this._minSize;	×
46	}
47	public set minSize(value: string) {
UNCOV 48	this._minSize = value;	×
UNCOV 49	if (this.owner) {	×
UNCOV 50	this.owner.panes.notifyOnChanges();	×
51	}
52	}
53
54	/**
55	* Gets/Set the maximum allowed size of the current pane.
56	*
57	* @example
58	* ```html
59	* <igx-splitter>
60	* <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
61	* </igx-splitter>
62	* ```
63	*/
64	@Input()
65	public get maxSize(): string {
UNCOV 66	return this._maxSize;	×
67	}
68	public set maxSize(value: string) {
UNCOV 69	this._maxSize = value;	×
UNCOV 70	if (this.owner) {	×
UNCOV 71	this.owner.panes.notifyOnChanges();	×
72	}
73	}
74
75	/**
76	* Gets/Sets whether pane is resizable.
77	*
78	* @example
79	* ```html
80	* <igx-splitter>
81	* <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane>
82	* </igx-splitter>
83	* ```
84	* @remarks
85	* If pane is not resizable its related splitter bar cannot be dragged.
86	*/
87	@Input({ transform: booleanAttribute })
UNCOV 88	public resizable = true;	×
89
90	/**
91	* Event fired when collapsed state of pane is changed.
92	*
93	* @example
94	* ```html
95	* <igx-splitter>
96	* <igx-splitter-pane (collapsedChange)='paneCollapsedChange($event)'>...</igx-splitter-pane>
97	* </igx-splitter>
98	* ```
99	*/
100	@Output()
UNCOV 101	public collapsedChange = new EventEmitter<boolean>();	×
102
103	/** @hidden @internal */
104	@HostBinding('style.order')
105	public order!: number;
106
107	/**
108	* @hidden @internal
109	* Gets/Sets the `overflow`.
110	*/
111	@HostBinding('style.overflow')
UNCOV 112	public overflow = 'auto';	×
113
114	/**
115	* @hidden @internal
116	* Get/Sets the `minWidth` properties of the current pane.
117	*/
118	@HostBinding('style.min-width')
UNCOV 119	public minWidth = '0';	×
120
121	/**
122	* @hidden @internal
123	* Get/Sets the `maxWidth` properties of the current pane.
124	*/
125	@HostBinding('style.max-width')
UNCOV 126	public maxWidth = '100%';	×
127
128	/**
129	* @hidden @internal
130	* Gets/Sets the `minHeight` properties of the current pane.
131	*/
132	@HostBinding('style.min-height')
UNCOV 133	public minHeight = '0';	×
134
135	/**
136	* @hidden @internal
137	* Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
138	*/
139	@HostBinding('style.max-height')
UNCOV 140	public maxHeight = '100%';	×
141
142	/** @hidden @internal */
143	public owner;
144
145	/**
146	* Gets/Sets the size of the current pane.
147	* * @example
148	* ```html
149	* <igx-splitter>
150	* <igx-splitter-pane [size]='size'>...</igx-splitter-pane>
151	* </igx-splitter>
152	* ```
153	*/
154	@Input()
155	public get size() {
UNCOV 156	return this._size;	×
157	}
158
159	public set size(value) {
UNCOV 160	this._size = value;	×
UNCOV 161	this.el.nativeElement.style.flex = this.flex;	×
162	}
163
164	/** @hidden @internal */
165	public get isPercentageSize() {
UNCOV 166	return this.size === 'auto' \|\| this.size.indexOf('%') !== -1;	×
167	}
168
169	/** @hidden @internal */
170	public get dragSize() {
UNCOV 171	return this._dragSize;	×
172	}
173	public set dragSize(val) {
UNCOV 174	this._dragSize = val;	×
UNCOV 175	this.el.nativeElement.style.flex = this.flex;	×
176	}
177
178	/**
179	*
180	* @hidden @internal
181	* Gets the host native element.
182	*/
183	public get element(): any {
UNCOV 184	return this.el.nativeElement;	×
185	}
186
187	/**
188	* @hidden @internal
189	* Gets the `flex` property of the current `IgxSplitterPaneComponent`.
190	*/
191	@HostBinding('style.flex')
192	public get flex() {
UNCOV 193	const size = this.dragSize \|\| this.size;	×
UNCOV 194	const grow = this.isPercentageSize && !this.dragSize ? 1 : 0;	×
UNCOV 195	return `${grow} ${grow} ${size}`;	×
196	}
197
198	/**
199	* Gets/Sets whether current pane is collapsed.
200	*
201	* @example
202	* ```typescript
203	* const isCollapsed = pane.collapsed;
204	* ```
205	*/
206	@Input({ transform: booleanAttribute })
207	public set collapsed(value) {
UNCOV 208	if (this.owner) {	×
209	// reset sibling sizes when pane collapse state changes.
UNCOV 210	this._getSiblings().forEach(sibling => {	×
UNCOV 211	sibling.size = 'auto'	×
UNCOV 212	sibling.dragSize = null;	×
213	});
214	}
UNCOV 215	this._collapsed = value;	×
UNCOV 216	this.display = this._collapsed ? 'none' : 'flex';	×
UNCOV 217	this.collapsedChange.emit(this._collapsed);	×
218	}
219
220	public get collapsed() {
UNCOV 221	return this._collapsed;	×
222	}
223
UNCOV 224	private _size = 'auto';	×
225	private _dragSize;
UNCOV 226	private _collapsed = false;	×
227
228
UNCOV 229	constructor(private el: ElementRef) { }	×
230
231	/**
232	* Toggles the collapsed state of the pane.
233	*
234	* @example
235	* ```typescript
236	* pane.toggle();
237	* ```
238	*/
239	public toggle() {
UNCOV 240	this.collapsed = !this.collapsed;	×
241	}
242
243	/** @hidden @internal */
244	private _getSiblings() {
UNCOV 245	const panes = this.owner.panes.toArray();	×
UNCOV 246	const index = panes.indexOf(this);	×
UNCOV 247	const siblings = [];	×
UNCOV 248	if (index !== 0) {	×
UNCOV 249	siblings.push(panes[index - 1]);	×
250	}
UNCOV 251	if (index !== panes.length - 1) {	×
UNCOV 252	siblings.push(panes[index + 1]);	×
253	}
UNCOV 254	return siblings;	×
255	}
256	}

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