14729512507

Committed 29 Apr 2025 10:54AM CUT coverage: 91.654% (+0.05%) from 91.607%

Build # 14729512507

Build Type

Pull #15616

github

Committed by

web-flow

Commit Message

Merge f66caa5a4 into 5f255b263

Pull Request Pull Request #15616: refactor(tests): removing configureTestSuite()

Run Details

13410 of 15685 branches covered (85.5%)

26948 of 29402 relevant lines covered (91.65%)

34451.44 hits per line

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

29.55

/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts

import { Directive, ElementRef, HostListener, Input, NgZone, Renderer2, booleanAttribute } from '@angular/core';
import { AnimationBuilder, style, animate } from '@angular/animations';

@Directive({
    selector: '[igxRipple]',
    standalone: true
})
export class IgxRippleDirective {
    /**
     * Sets/gets the ripple target.
     * ```html
     * <div  #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>
     * ```
     * ```typescript
     * @ViewChild('rippleContainer', {read: IgxRippleDirective})
     * public ripple: IgxRippleDirective;
     * let rippleTarget = this.ripple.rippleTarget;
     * ```
     * Can set the ripple to activate on a child element inside the parent where igxRipple is defined.
     * ```html
     * <div #rippleContainer [igxRippleTarget]="'#child"'>
     *   <button type="button" igxButton id="child">Click</button>
     * </div>
     * ```
     *
     * @memberof IgxRippleDirective
     */
    @Input('igxRippleTarget')
    public rippleTarget = '';
    /**
     * Sets/gets the ripple color.
     * ```html
     * <button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>
     * ```
     * ```typescript
     * @ViewChild('rippleContainer', {read: IgxRippleDirective})
     * public ripple: IgxRippleDirective;
     * let rippleColor = this.ripple.rippleColor;
     * ```
     *
     * @memberof IgxRippleDirective
     */
    @Input('igxRipple')
    public rippleColor: string;
    /**
     * Sets/gets the ripple duration(in milliseconds).
     * Default value is `600`.
     * ```html
     * <button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
     * ```
     * ```typescript
     * @ViewChild('rippleContainer', {read: IgxRippleDirective})
     * public ripple: IgxRippleDirective;
     * let rippleDuration = this.ripple.rippleDuration;
     * ```
     *
     * @memberof IgxRippleDirective
     */
    @Input('igxRippleDuration')
    public rippleDuration = 600;
    /**
     * Enables/disables the ripple to be centered.
     * ```html
     * <button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
     * ```
     *
     * @memberof IgxRippleDirective
     */
    @Input({ alias: 'igxRippleCentered', transform: booleanAttribute })
    public set centered(value: boolean) {
        this._centered = value || this.centered;
    }
    /**
     * Sets/gets whether the ripple is disabled.
     * Default value is `false`.
     * ```html
     * <button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
     * ```
     * ```typescript
     * @ViewChild('rippleContainer', {read: IgxRippleDirective})
     * public ripple: IgxRippleDirective;
     * let isRippleDisabled = this.ripple.rippleDisabled;
     * ```
     *
     * @memberof IgxRippleDirective
     */
    @Input({ alias: 'igxRippleDisabled', transform: booleanAttribute })
    public rippleDisabled = false;

    protected get nativeElement(): HTMLElement {
        return this.elementRef.nativeElement;
    }

    private rippleElementClass = 'igx-ripple__inner';
    private rippleHostClass = 'igx-ripple';
    private _centered = false;
    private animationQueue = [];

    constructor(
        protected builder: AnimationBuilder,
        protected elementRef: ElementRef,
        protected renderer: Renderer2,
        private zone: NgZone) { }
    /**
     * @hidden
     */
    @HostListener('mousedown', ['$event'])
    public onMouseDown(event) {
        this.zone.runOutsideAngular(() => this._ripple(event));
    }

    private setStyles(rippleElement: HTMLElement, styleParams: any) {
        this.renderer.addClass(rippleElement, this.rippleElementClass);
        this.renderer.setStyle(rippleElement, 'width', `${styleParams.radius}px`);
        this.renderer.setStyle(rippleElement, 'height', `${styleParams.radius}px`);
        this.renderer.setStyle(rippleElement, 'top', `${styleParams.top}px`);
        this.renderer.setStyle(rippleElement, 'left', `${styleParams.left}px`);
        if (this.rippleColor) {
            this.renderer.setStyle(rippleElement, 'background', this.rippleColor);
        }
    }

    private _ripple(event) {
        if (this.rippleDisabled) {
            return;
        }

        const target = (this.rippleTarget ? this.nativeElement.querySelector(this.rippleTarget) || this.nativeElement : this.nativeElement);

        const rectBounds = target.getBoundingClientRect();
        const radius = Math.max(rectBounds.width, rectBounds.height);
        let left = Math.round(event.clientX - rectBounds.left - radius / 2);
        let top = Math.round(event.clientY - rectBounds.top - radius / 2);

        if (this._centered) {
            left = top = 0;
        }

        const dimensions = {
            radius,
            top,
            left
        };

        const rippleElement = this.renderer.createElement('span');

        this.setStyles(rippleElement, dimensions);
        this.renderer.addClass(target, this.rippleHostClass);
        this.renderer.appendChild(target, rippleElement);

        const animation = this.builder.build([
            style({ opacity: 0.5, transform: 'scale(.3)' }),
            animate(this.rippleDuration, style({ opacity: 0, transform: 'scale(2)' }))
        ]).create(rippleElement);

        this.animationQueue.push(animation);

        animation.onDone(() => {
            this.animationQueue.splice(this.animationQueue.indexOf(animation), 1);
            target.removeChild(rippleElement);
            if (this.animationQueue.length < 1) {
                this.renderer.removeClass(target, this.rippleHostClass);
            }
        });

        animation.play();

    }
}

1	import { Directive, ElementRef, HostListener, Input, NgZone, Renderer2, booleanAttribute } from '@angular/core';
2	import { AnimationBuilder, style, animate } from '@angular/animations';
3
4	@Directive({
5	selector: '[igxRipple]',
6	standalone: true
7	})
8	export class IgxRippleDirective {	3✔
9	/**
10	* Sets/gets the ripple target.
11	* ```html
12	* <div #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>
13	* ```
14	* ```typescript
15	* @ViewChild('rippleContainer', {read: IgxRippleDirective})
16	* public ripple: IgxRippleDirective;
17	* let rippleTarget = this.ripple.rippleTarget;
18	* ```
19	* Can set the ripple to activate on a child element inside the parent where igxRipple is defined.
20	* ```html
21	* <div #rippleContainer [igxRippleTarget]="'#child"'>
22	* <button type="button" igxButton id="child">Click</button>
23	* </div>
24	* ```
25	*
26	* @memberof IgxRippleDirective
27	*/
28	@Input('igxRippleTarget')
29	public rippleTarget = '';	11,661✔
30	/**
31	* Sets/gets the ripple color.
32	* ```html
33	* <button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>
34	* ```
35	* ```typescript
36	* @ViewChild('rippleContainer', {read: IgxRippleDirective})
37	* public ripple: IgxRippleDirective;
38	* let rippleColor = this.ripple.rippleColor;
39	* ```
40	*
41	* @memberof IgxRippleDirective
42	*/
43	@Input('igxRipple')
44	public rippleColor: string;
45	/**
46	* Sets/gets the ripple duration(in milliseconds).
47	* Default value is `600`.
48	* ```html
49	* <button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
50	* ```
51	* ```typescript
52	* @ViewChild('rippleContainer', {read: IgxRippleDirective})
53	* public ripple: IgxRippleDirective;
54	* let rippleDuration = this.ripple.rippleDuration;
55	* ```
56	*
57	* @memberof IgxRippleDirective
58	*/
59	@Input('igxRippleDuration')
60	public rippleDuration = 600;	11,661✔
61	/**
62	* Enables/disables the ripple to be centered.
63	* ```html
64	* <button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
65	* ```
66	*
67	* @memberof IgxRippleDirective
68	*/
69	@Input({ alias: 'igxRippleCentered', transform: booleanAttribute })
70	public set centered(value: boolean) {
71	this._centered = value \|\| this.centered;	10,219!
72	}
73	/**
74	* Sets/gets whether the ripple is disabled.
75	* Default value is `false`.
76	* ```html
77	* <button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
78	* ```
79	* ```typescript
80	* @ViewChild('rippleContainer', {read: IgxRippleDirective})
81	* public ripple: IgxRippleDirective;
82	* let isRippleDisabled = this.ripple.rippleDisabled;
83	* ```
84	*
85	* @memberof IgxRippleDirective
86	*/
87	@Input({ alias: 'igxRippleDisabled', transform: booleanAttribute })
88	public rippleDisabled = false;	11,661✔
89
90	protected get nativeElement(): HTMLElement {
91	return this.elementRef.nativeElement;	×
92	}
93
94	private rippleElementClass = 'igx-ripple__inner';	11,661✔
95	private rippleHostClass = 'igx-ripple';	11,661✔
96	private _centered = false;	11,661✔
97	private animationQueue = [];	11,661✔
98
99	constructor(
100	protected builder: AnimationBuilder,	11,661✔
101	protected elementRef: ElementRef,	11,661✔
102	protected renderer: Renderer2,	11,661✔
103	private zone: NgZone) { }	11,661✔
104	/**
105	* @hidden
106	*/
107	@HostListener('mousedown', ['$event'])
108	public onMouseDown(event) {
109	this.zone.runOutsideAngular(() => this._ripple(event));	×
110	}
111
112	private setStyles(rippleElement: HTMLElement, styleParams: any) {
113	this.renderer.addClass(rippleElement, this.rippleElementClass);	×
114	this.renderer.setStyle(rippleElement, 'width', `${styleParams.radius}px`);	×
115	this.renderer.setStyle(rippleElement, 'height', `${styleParams.radius}px`);	×
116	this.renderer.setStyle(rippleElement, 'top', `${styleParams.top}px`);	×
117	this.renderer.setStyle(rippleElement, 'left', `${styleParams.left}px`);	×
118	if (this.rippleColor) {	×
119	this.renderer.setStyle(rippleElement, 'background', this.rippleColor);	×
120	}
121	}
122
123	private _ripple(event) {
124	if (this.rippleDisabled) {	×
125	return;	×
126	}
127
128	const target = (this.rippleTarget ? this.nativeElement.querySelector(this.rippleTarget) \|\| this.nativeElement : this.nativeElement);	×
129
130	const rectBounds = target.getBoundingClientRect();	×
131	const radius = Math.max(rectBounds.width, rectBounds.height);	×
132	let left = Math.round(event.clientX - rectBounds.left - radius / 2);	×
133	let top = Math.round(event.clientY - rectBounds.top - radius / 2);	×
134
135	if (this._centered) {	×
136	left = top = 0;	×
137	}
138
139	const dimensions = {	×
140	radius,
141	top,
142	left
143	};
144
145	const rippleElement = this.renderer.createElement('span');	×
146
147	this.setStyles(rippleElement, dimensions);	×
148	this.renderer.addClass(target, this.rippleHostClass);	×
149	this.renderer.appendChild(target, rippleElement);	×
150
151	const animation = this.builder.build([	×
152	style({ opacity: 0.5, transform: 'scale(.3)' }),
153	animate(this.rippleDuration, style({ opacity: 0, transform: 'scale(2)' }))
154	]).create(rippleElement);
155
156	this.animationQueue.push(animation);	×
157
158	animation.onDone(() => {	×
159	this.animationQueue.splice(this.animationQueue.indexOf(animation), 1);	×
160	target.removeChild(rippleElement);	×
161	if (this.animationQueue.length < 1) {	×
162	this.renderer.removeClass(target, this.rippleHostClass);	×
163	}
164	});
165
166	animation.play();	×
167
168	}
169	}

IgniteUI / igniteui-angular / 14729512507

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