12910003674

Committed 22 Jan 2025 02:10PM CUT coverage: 91.609% (+0.01%) from 91.597%

Build # 12910003674

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #15285 from IgniteUI/mvenkov/use-passed-overlay-settings-18.2

Use provided in show method overlay settings - 18.2

Run Details

12988 of 15222 branches covered (85.32%)

5 of 5 new or added lines in 1 file covered. (100.0%)

46 existing lines in 9 files now uncovered.

26321 of 28732 relevant lines covered (91.61%)

33978.84 hits per line

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

88.33

/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

import {
    Component,
    Directive,
    HostBinding,
    Input,
    Renderer2,
    ViewContainerRef,
    ContentChildren,
    QueryList,
    ViewChild,
    TemplateRef,
    AfterContentInit,
    ChangeDetectorRef,
    AfterViewInit,
    ElementRef,
    booleanAttribute
} from '@angular/core';
import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
import { IgxDropDownComponent } from '../drop-down/drop-down.component';
import { CloseScrollStrategy, OverlaySettings } from '../services/public_api';
import { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.directive';
import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
import { IgxIconComponent } from '../icon/icon.component';
import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { getCurrentResourceStrings } from '../core/i18n/resources';
import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
import { IgxActionStripToken } from './token';

@Directive({
    selector: '[igxActionStripMenuItem]',
    standalone: true
})
export class IgxActionStripMenuItemDirective {
    constructor(public templateRef: TemplateRef<any>) {}
}

/* blazorElement */
/* jsonAPIManageItemInMarkup */
/* jsonAPIManageCollectionInMarkup */
/* wcElementTag: igc-action-strip */
/* blazorIndirectRender */
/* singleInstanceIdentifier */
/* contentParent: GridBaseDirective */
/* contentParent: RowIsland */
/* contentParent: HierarchicalGrid */
/**
 * Action Strip provides templatable area for one or more actions.
 *
 * @igxModule IgxActionStripModule
 *
 * @igxTheme igx-action-strip-theme
 *
 * @igxKeywords action, strip, actionStrip, pinning, editing
 *
 * @igxGroup Data Entry & Display
 *
 * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, *
 *
 * @remarks
 * The Ignite UI Action Strip is a container, overlaying its parent container,
 * and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.
 *
 * @example
 * ```html
 * <igx-action-strip #actionStrip>
 *     <igx-icon (click)="doSomeAction()"></igx-icon>
 * </igx-action-strip>
 */
@Component({
    selector: 'igx-action-strip',
    templateUrl: 'action-strip.component.html',
    standalone: true,
    imports: [
        NgIf,
        NgFor,
        NgTemplateOutlet,
        IgxIconButtonDirective,
        IgxRippleDirective,
        IgxToggleActionDirective,
        IgxDropDownItemNavigationDirective,
        IgxIconComponent,
        IgxDropDownComponent,
        IgxDropDownItemComponent
    ],
    providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
})
export class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit {

    /* blazorSuppress */
    /**
     * Sets the context of an action strip.
     * The context should be an instance of a @Component, that has element property.
     * This element will be the placeholder of the action strip.
     *
     * @example
     * ```html
     * <igx-action-strip [context]="cell"></igx-action-strip>
     * ```
     */
    @Input()
    public context: any;

    /**
     * Menu Items ContentChildren inside the Action Strip
     *
     * @hidden
     * @internal
     */
    @ContentChildren(IgxActionStripMenuItemDirective)
    public _menuItems: QueryList<IgxActionStripMenuItemDirective>;


    /* blazorInclude */
    /* contentChildren */
    /* blazorTreatAsCollection */
    /* blazorCollectionName: GridActionsBaseDirectiveCollection */
    /**
     * ActionButton as ContentChildren inside the Action Strip
     *
     * @hidden
     * @internal
     */
    @ContentChildren(IgxGridActionsBaseDirective)
    public actionButtons: QueryList<IgxGridActionsBaseDirective>;

    /**
     * Gets/Sets the visibility of the Action Strip.
     * Could be used to set if the Action Strip will be initially hidden.
     *
     * @example
     * ```html
     *  <igx-action-strip [hidden]="false">
     * ```
     */
    @Input({ transform: booleanAttribute })
    public hidden = false;


    /**
     * Gets/Sets the resource strings.
     *
     * @remarks
     * By default it uses EN resources.
     */
    @Input()
    public set resourceStrings(value: IActionStripResourceStrings) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }

    public get resourceStrings(): IActionStripResourceStrings {
        return this._resourceStrings;
    }

    /**
     * Hide or not the Action Strip based on if it is a menu.
     *
     * @hidden
     * @internal
     */
    public get hideOnRowLeave(): boolean {
        if (this.menu.items.length === 0) {
            return true;
        } else if (this.menu.items.length > 0) {
            if (this.menu.collapsed) {
                return true;
            } else {
                return false;
            }
        }
    }

    /**
     * Reference to the menu
     *
     * @hidden
     * @internal
     */
    @ViewChild('dropdown')
    public menu: IgxDropDownComponent;

    /**
     * Getter for menu overlay settings
     *
     * @hidden
     * @internal
     */
    public menuOverlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };

    private _hidden = false;
    private _resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
    private _originalParent!: HTMLElement;

    constructor(
        private _viewContainer: ViewContainerRef,
        private renderer: Renderer2,
        protected el: ElementRef,
        /** @hidden @internal **/
        public cdr: ChangeDetectorRef,
    ) { }

    /**
     * Menu Items list.
     *
     * @hidden
     * @internal
     */
    public get menuItems() {
        const actions = [];
        this.actionButtons.forEach(button => {
            if (button.asMenuItems) {
                const children = button.buttons;
                if (children) {
                    children.toArray().forEach(x => actions.push(x));
                }
            }
        });
        return [... this._menuItems.toArray(), ...actions];
    }


    /**
     * Getter for the 'display' property of the current `IgxActionStrip`
     */
    @HostBinding('style.display')
    private get display(): string {
        return this.hidden ? 'none' : 'flex';
    }

    /**
     * Host `attr.class` binding.
     */
    @HostBinding('class.igx-action-strip')
    protected hostClass = 'igx-action-strip';

    /**
     * @hidden
     * @internal
     */
    public ngAfterContentInit() {
        this.actionButtons.forEach(button => {
            button.strip = this;
        });
        this.actionButtons.changes.subscribe(() => {
            this.actionButtons.forEach(button => {
                button.strip = this;
            });
        });
    }

    /**
     * @hidden
     * @internal
     */
    public ngAfterViewInit() {
        this.menu.selectionChanging.subscribe(($event) => {
            const newSelection = ($event.newSelection as any).elementRef.nativeElement;
            let allButtons = [];
            this.actionButtons.forEach(actionButtons => {
                if (actionButtons.asMenuItems) {
                    allButtons = [...allButtons, ...actionButtons.buttons.toArray()];
                }
            });
            const button = allButtons.find(x => newSelection.contains(x.container.nativeElement));
            if (button) {
                button.actionClick.emit();
            }
        });
        this._originalParent = this._viewContainer.element.nativeElement?.parentElement;
    }

    /**
     * Showing the Action Strip and appending it the specified context element.
     *
     * @param context
     * @example
     * ```typescript
     * this.actionStrip.show(row);
     * ```
     */
    public show(context?: any): void {
        this.hidden = false;
        if (!context) {
            return;
        }
        // when shown for different context make sure the menu won't stay opened
        if (this.context !== context) {
            this.closeMenu();
        }
        this.context = context;
        if (this.context && this.context.element) {
            this.renderer.appendChild(context.element.nativeElement, this._viewContainer.element.nativeElement);
        }
        this.cdr.detectChanges();
    }

    /**
     * Hiding the Action Strip and removing it from its current context element.
     *
     * @example
     * ```typescript
     * this.actionStrip.hide();
     * ```
     */
    public hide(): void {
        this.hidden = true;
        this.closeMenu();
        if (this._originalParent) {
            // D.P. fix(elements) don't detach native DOM, instead move back. Might not matter for Angular, but Elements will destroy
            this.renderer.appendChild(this._originalParent, this._viewContainer.element.nativeElement);
        } else if (this.context && this.context.element) {
            this.renderer.removeChild(this.context.element.nativeElement, this._viewContainer.element.nativeElement);
        }
    }

    /**
     * Close the menu if opened
     *
     * @hidden
     * @internal
     */
    private closeMenu(): void {
        if (this.menu && !this.menu.collapsed) {
            this.menu.close();
        }
    }
}

1	import {
2	Component,
3	Directive,
4	HostBinding,
5	Input,
6	Renderer2,
7	ViewContainerRef,
8	ContentChildren,
9	QueryList,
10	ViewChild,
11	TemplateRef,
12	AfterContentInit,
13	ChangeDetectorRef,
14	AfterViewInit,
15	ElementRef,
16	booleanAttribute
17	} from '@angular/core';
18	import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
19	import { IgxDropDownComponent } from '../drop-down/drop-down.component';
20	import { CloseScrollStrategy, OverlaySettings } from '../services/public_api';
21	import { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.directive';
22	import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
23	import { IgxIconComponent } from '../icon/icon.component';
24	import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
25	import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
26	import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
27	import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
28	import { getCurrentResourceStrings } from '../core/i18n/resources';
29	import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
30	import { IgxActionStripToken } from './token';
31
32	@Directive({
33	selector: '[igxActionStripMenuItem]',
34	standalone: true
35	})
36	export class IgxActionStripMenuItemDirective {	2✔
37	constructor(public templateRef: TemplateRef<any>) {}	7✔
38	}
39
40	/* blazorElement */
41	/* jsonAPIManageItemInMarkup */
42	/* jsonAPIManageCollectionInMarkup */
43	/* wcElementTag: igc-action-strip */
44	/* blazorIndirectRender */
45	/* singleInstanceIdentifier */
46	/* contentParent: GridBaseDirective */
47	/* contentParent: RowIsland */
48	/* contentParent: HierarchicalGrid */
49	/**
50	* Action Strip provides templatable area for one or more actions.
51	*
52	* @igxModule IgxActionStripModule
53	*
54	* @igxTheme igx-action-strip-theme
55	*
56	* @igxKeywords action, strip, actionStrip, pinning, editing
57	*
58	* @igxGroup Data Entry & Display
59	*
60	* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, *
61	*
62	* @remarks
63	* The Ignite UI Action Strip is a container, overlaying its parent container,
64	* and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.
65	*
66	* @example
67	* ```html
68	* <igx-action-strip #actionStrip>
69	* <igx-icon (click)="doSomeAction()"></igx-icon>
70	* </igx-action-strip>
71	*/
72	@Component({
73	selector: 'igx-action-strip',
74	templateUrl: 'action-strip.component.html',
75	standalone: true,
76	imports: [
77	NgIf,
78	NgFor,
79	NgTemplateOutlet,
80	IgxIconButtonDirective,
81	IgxRippleDirective,
82	IgxToggleActionDirective,
83	IgxDropDownItemNavigationDirective,
84	IgxIconComponent,
85	IgxDropDownComponent,
86	IgxDropDownItemComponent
87	],
88	providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
89	})
90	export class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit {	2✔
91
92	/* blazorSuppress */
93	/**
94	* Sets the context of an action strip.
95	* The context should be an instance of a @Component, that has element property.
96	* This element will be the placeholder of the action strip.
97	*
98	* @example
99	* ```html
100	* <igx-action-strip [context]="cell"></igx-action-strip>
101	* ```
102	*/
103	@Input()
104	public context: any;
105
106	/**
107	* Menu Items ContentChildren inside the Action Strip
108	*
109	* @hidden
110	* @internal
111	*/
112	@ContentChildren(IgxActionStripMenuItemDirective)
113	public _menuItems: QueryList<IgxActionStripMenuItemDirective>;
114
115
116	/* blazorInclude */
117	/* contentChildren */
118	/* blazorTreatAsCollection */
119	/* blazorCollectionName: GridActionsBaseDirectiveCollection */
120	/**
121	* ActionButton as ContentChildren inside the Action Strip
122	*
123	* @hidden
124	* @internal
125	*/
126	@ContentChildren(IgxGridActionsBaseDirective)
127	public actionButtons: QueryList<IgxGridActionsBaseDirective>;
128
129	/**
130	* Gets/Sets the visibility of the Action Strip.
131	* Could be used to set if the Action Strip will be initially hidden.
132	*
133	* @example
134	* ```html
135	* <igx-action-strip [hidden]="false">
136	* ```
137	*/
138	@Input({ transform: booleanAttribute })
139	public hidden = false;	122✔
140
141
142	/**
143	* Gets/Sets the resource strings.
144	*
145	* @remarks
146	* By default it uses EN resources.
147	*/
148	@Input()
149	public set resourceStrings(value: IActionStripResourceStrings) {
UNCOV 150	this._resourceStrings = Object.assign({}, this._resourceStrings, value);	×
151	}
152
153	public get resourceStrings(): IActionStripResourceStrings {
154	return this._resourceStrings;	34✔
155	}
156
157	/**
158	* Hide or not the Action Strip based on if it is a menu.
159	*
160	* @hidden
161	* @internal
162	*/
163	public get hideOnRowLeave(): boolean {
164	if (this.menu.items.length === 0) {	1!
165	return true;	1✔
UNCOV 166	} else if (this.menu.items.length > 0) {	×
UNCOV 167	if (this.menu.collapsed) {	×
168	return true;	×
169	} else {
170	return false;	×
171	}
172	}
173	}
174
175	/**
176	* Reference to the menu
177	*
178	* @hidden
179	* @internal
180	*/
181	@ViewChild('dropdown')
182	public menu: IgxDropDownComponent;
183
184	/**
185	* Getter for menu overlay settings
186	*
187	* @hidden
188	* @internal
189	*/
190	public menuOverlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };	122✔
191
192	private _hidden = false;	122✔
193	private _resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);	122✔
194	private _originalParent!: HTMLElement;
195
196	constructor(
197	private _viewContainer: ViewContainerRef,	122✔
198	private renderer: Renderer2,	122✔
199	protected el: ElementRef,	122✔
200	/ @hidden @internal /
201	public cdr: ChangeDetectorRef,	122✔
202	) { }
203
204	/**
205	* Menu Items list.
206	*
207	* @hidden
208	* @internal
209	*/
210	public get menuItems() {
211	const actions = [];	1,954✔
212	this.actionButtons.forEach(button => {	1,954✔
213	if (button.asMenuItems) {	2,202✔
214	const children = button.buttons;	176✔
215	if (children) {	176✔
216	children.toArray().forEach(x => actions.push(x));	156✔
217	}
218	}
219	});
220	return [... this._menuItems.toArray(), ...actions];	1,954✔
221	}
222
223
224	/**
225	* Getter for the 'display' property of the current `IgxActionStrip`
226	*/
227	@HostBinding('style.display')
228	private get display(): string {
229	return this.hidden ? 'none' : 'flex';	936✔
230	}
231
232	/**
233	* Host `attr.class` binding.
234	*/
235	@HostBinding('class.igx-action-strip')
236	protected hostClass = 'igx-action-strip';	122✔
237
238	/**
239	* @hidden
240	* @internal
241	*/
242	public ngAfterContentInit() {
243	this.actionButtons.forEach(button => {	122✔
244	button.strip = this;	134✔
245	});
246	this.actionButtons.changes.subscribe(() => {	122✔
UNCOV 247	this.actionButtons.forEach(button => {	×
UNCOV 248	button.strip = this;	×
249	});
250	});
251	}
252
253	/**
254	* @hidden
255	* @internal
256	*/
257	public ngAfterViewInit() {
258	this.menu.selectionChanging.subscribe(($event) => {	122✔
259	const newSelection = ($event.newSelection as any).elementRef.nativeElement;	3✔
260	let allButtons = [];	3✔
261	this.actionButtons.forEach(actionButtons => {	3✔
262	if (actionButtons.asMenuItems) {	3✔
263	allButtons = [...allButtons, ...actionButtons.buttons.toArray()];	3✔
264	}
265	});
266	const button = allButtons.find(x => newSelection.contains(x.container.nativeElement));	4✔
267	if (button) {	3✔
268	button.actionClick.emit();	3✔
269	}
270	});
271	this._originalParent = this._viewContainer.element.nativeElement?.parentElement;	122✔
272	}
273
274	/**
275	* Showing the Action Strip and appending it the specified context element.
276	*
277	* @param context
278	* @example
279	* ```typescript
280	* this.actionStrip.show(row);
281	* ```
282	*/
283	public show(context?: any): void {
284	this.hidden = false;	36✔
285	if (!context) {	36✔
286	return;	1✔
287	}
288	// when shown for different context make sure the menu won't stay opened
289	if (this.context !== context) {	35✔
290	this.closeMenu();	33✔
291	}
292	this.context = context;	35✔
293	if (this.context && this.context.element) {	35✔
294	this.renderer.appendChild(context.element.nativeElement, this._viewContainer.element.nativeElement);	30✔
295	}
296	this.cdr.detectChanges();	35✔
297	}
298
299	/**
300	* Hiding the Action Strip and removing it from its current context element.
301	*
302	* @example
303	* ```typescript
304	* this.actionStrip.hide();
305	* ```
306	*/
307	public hide(): void {
308	this.hidden = true;	41✔
309	this.closeMenu();	41✔
310	if (this._originalParent) {	41✔
311	// D.P. fix(elements) don't detach native DOM, instead move back. Might not matter for Angular, but Elements will destroy
312	this.renderer.appendChild(this._originalParent, this._viewContainer.element.nativeElement);	2✔
313	} else if (this.context && this.context.element) {	39✔
314	this.renderer.removeChild(this.context.element.nativeElement, this._viewContainer.element.nativeElement);	28✔
315	}
316	}
317
318	/**
319	* Close the menu if opened
320	*
321	* @hidden
322	* @internal
323	*/
324	private closeMenu(): void {
325	if (this.menu && !this.menu.collapsed) {	74✔
326	this.menu.close();	4✔
327	}
328	}
329	}

IgniteUI / igniteui-angular / 12910003674

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