14101962945

Committed 27 Mar 2025 08:22AM UTC coverage: 91.596% (-0.07%) from 91.669%

Build # 14101962945

Build Type

push

github

Committed by

web-flow

Commit Message

fix(circular-progress): make sure that the fill-color-default can be used by the user and flip the gradient for star and end to follow the progressbar progress direction (#15560)

Run Details

13358 of 15619 branches covered (85.52%)

26920 of 29390 relevant lines covered (91.6%)

33937.04 hits per line

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

90.63

/projects/igniteui-angular/src/lib/carousel/carousel-base.ts

import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
import { ChangeDetectorRef, Directive, EventEmitter, Inject, OnDestroy } from '@angular/core';
import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
import { AnimationPlayer, AnimationService } from '../services/animation/animation';
import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
import { CarouselAnimationType } from './enums';

export enum Direction { NONE, NEXT, PREV }

export interface CarouselAnimationSettings {
    enterAnimation: AnimationReferenceMetadata;
    leaveAnimation: AnimationReferenceMetadata;
}

/** @hidden */
export interface IgxSlideComponentBase {
    direction: Direction;
    previous: boolean;
}

/** @hidden */
@Directive()
export abstract class IgxCarouselComponentBase implements OnDestroy {
    /** @hidden */
    public animationType: CarouselAnimationType = CarouselAnimationType.slide;

    /** @hidden @internal */
    public enterAnimationDone = new EventEmitter();
    /** @hidden @internal */
    public leaveAnimationDone = new EventEmitter();

    /** @hidden */
    protected currentItem: IgxSlideComponentBase;
    /** @hidden */
    protected previousItem: IgxSlideComponentBase;
    /** @hidden */
    protected enterAnimationPlayer?: AnimationPlayer;
    /** @hidden */
    protected leaveAnimationPlayer?: AnimationPlayer;
    /** @hidden */
    protected defaultAnimationDuration = 320;
    /** @hidden */
    protected animationPosition = 0;
    /** @hidden */
    protected newDuration = 0;
    /** @hidden */
    protected vertical = false;

    constructor(
        @Inject(IgxAngularAnimationService) private animationService: AnimationService,
        protected cdr: ChangeDetectorRef) {
    }

    public ngOnDestroy(): void {
        this.enterAnimationPlayer?.destroy();
        this.leaveAnimationPlayer?.destroy();
    }

    /** @hidden */
    protected triggerAnimations() {
        if (this.animationType !== CarouselAnimationType.none) {
            if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) {
                requestAnimationFrame(() => {
                    this.resetAnimations();
                    this.playAnimations();
                });
            } else {
                this.playAnimations();
            }
        }
    }

    /** @hidden */
    protected animationStarted(animation: AnimationPlayer): boolean {
        return animation && animation.hasStarted();
    }

    /** @hidden */
    protected playAnimations() {
        this.playLeaveAnimation();
        this.playEnterAnimation();
    }

    private resetAnimations() {
        if (this.animationStarted(this.leaveAnimationPlayer)) {
            this.leaveAnimationPlayer.reset();
            this.leaveAnimationDone.emit();
        }

        if (this.animationStarted(this.enterAnimationPlayer)) {
            this.enterAnimationPlayer.reset();
            this.enterAnimationDone.emit();
            this.cdr.markForCheck();
        }
    }

    private getAnimation(): CarouselAnimationSettings {
        let duration;
        if (this.newDuration) {
            duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;
        } else {
            duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration;
        }

        const trans = this.animationPosition ? this.animationPosition * 100 : 100;
        switch (this.animationType) {
            case CarouselAnimationType.slide:
                return {
                    enterAnimation: useAnimation(slideInLeft,
                        {
                            params: {
                                delay: '0s',
                                duration: `${duration}ms`,
                                endOpacity: 1,
                                startOpacity: 1,
                                fromPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? trans : -trans}%)`,
                                toPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`
                            }
                        }),
                    leaveAnimation: useAnimation(slideInLeft,
                        {
                            params: {
                                delay: '0s',
                                duration: `${duration}ms`,
                                endOpacity: 1,
                                startOpacity: 1,
                                fromPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`,
                                toPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? -trans : trans}%)`,
                            }
                        })
                };
            case CarouselAnimationType.fade:
                return {
                    enterAnimation: useAnimation(fadeIn,
                        { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),
                    leaveAnimation: null
                };
        }
        return {
            enterAnimation: null,
            leaveAnimation: null
        };
    }

    private playEnterAnimation() {
        const animation = this.getAnimation().enterAnimation;
        if (!animation) {
            return;
        }

        this.enterAnimationPlayer = this.animationService.buildAnimation(animation, this.getCurrentElement());
        this.enterAnimationPlayer.animationEnd.subscribe(() => {
            // TODO: animation may never end. Find better way to clean up the player
            if (this.enterAnimationPlayer) {
                this.enterAnimationPlayer.destroy();
                this.enterAnimationPlayer = null;
            }
            this.animationPosition = 0;
            this.newDuration = 0;
            this.previousItem.previous = false;
            this.enterAnimationDone.emit();
            this.cdr.markForCheck();
        });
        this.previousItem.previous = true;
        this.enterAnimationPlayer.play();
    }

    private playLeaveAnimation() {
        const animation = this.getAnimation().leaveAnimation;
        if (!animation) {
            return;
        }

        this.leaveAnimationPlayer = this.animationService.buildAnimation(animation, this.getPreviousElement());
        this.leaveAnimationPlayer.animationEnd.subscribe(() => {
            // TODO: animation may never end. Find better way to clean up the player
            if (this.leaveAnimationPlayer) {
                this.leaveAnimationPlayer.destroy();
                this.leaveAnimationPlayer = null;
            }
            this.animationPosition = 0;
            this.newDuration = 0;
            this.leaveAnimationDone.emit();
        });
        this.leaveAnimationPlayer.play();
    }

    protected abstract getPreviousElement(): HTMLElement;

    protected abstract getCurrentElement(): HTMLElement;
}

1	import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
2	import { ChangeDetectorRef, Directive, EventEmitter, Inject, OnDestroy } from '@angular/core';
3	import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
4	import { AnimationPlayer, AnimationService } from '../services/animation/animation';
5	import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
6	import { CarouselAnimationType } from './enums';
7
8	export enum Direction { NONE, NEXT, PREV }	3✔
9
10	export interface CarouselAnimationSettings {
11	enterAnimation: AnimationReferenceMetadata;
12	leaveAnimation: AnimationReferenceMetadata;
13	}
14
15	/** @hidden */
16	export interface IgxSlideComponentBase {
17	direction: Direction;
18	previous: boolean;
19	}
20
21	/** @hidden */
22	@Directive()
23	export abstract class IgxCarouselComponentBase implements OnDestroy {	3✔
24	/** @hidden */
25	public animationType: CarouselAnimationType = CarouselAnimationType.slide;	149✔
26
27	/** @hidden @internal */
28	public enterAnimationDone = new EventEmitter();	149✔
29	/** @hidden @internal */
30	public leaveAnimationDone = new EventEmitter();	149✔
31
32	/** @hidden */
33	protected currentItem: IgxSlideComponentBase;
34	/** @hidden */
35	protected previousItem: IgxSlideComponentBase;
36	/** @hidden */
37	protected enterAnimationPlayer?: AnimationPlayer;
38	/** @hidden */
39	protected leaveAnimationPlayer?: AnimationPlayer;
40	/** @hidden */
41	protected defaultAnimationDuration = 320;	149✔
42	/** @hidden */
43	protected animationPosition = 0;	149✔
44	/** @hidden */
45	protected newDuration = 0;	149✔
46	/** @hidden */
47	protected vertical = false;	149✔
48
49	constructor(
50	@Inject(IgxAngularAnimationService) private animationService: AnimationService,	149✔
51	protected cdr: ChangeDetectorRef) {	149✔
52	}
53
54	public ngOnDestroy(): void {
55	this.enterAnimationPlayer?.destroy();	144✔
56	this.leaveAnimationPlayer?.destroy();	144✔
57	}
58
59	/** @hidden */
60	protected triggerAnimations() {
61	if (this.animationType !== CarouselAnimationType.none) {	99✔
62	if (this.animationStarted(this.leaveAnimationPlayer) \|\| this.animationStarted(this.enterAnimationPlayer)) {	62✔
63	requestAnimationFrame(() => {	1✔
64	this.resetAnimations();	1✔
65	this.playAnimations();	1✔
66	});
67	} else {
68	this.playAnimations();	61✔
69	}
70	}
71	}
72
73	/** @hidden */
74	protected animationStarted(animation: AnimationPlayer): boolean {
75	return animation && animation.hasStarted();	149✔
76	}
77
78	/** @hidden */
79	protected playAnimations() {
80	this.playLeaveAnimation();	66✔
81	this.playEnterAnimation();	66✔
82	}
83
84	private resetAnimations() {
85	if (this.animationStarted(this.leaveAnimationPlayer)) {	1!
86	this.leaveAnimationPlayer.reset();	×
87	this.leaveAnimationDone.emit();	×
88	}
89
90	if (this.animationStarted(this.enterAnimationPlayer)) {	1!
91	this.enterAnimationPlayer.reset();	×
92	this.enterAnimationDone.emit();	×
93	this.cdr.markForCheck();	×
94	}
95	}
96
97	private getAnimation(): CarouselAnimationSettings {
98	let duration;
99	if (this.newDuration) {	132!
100	duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;	×
101	} else {
102	duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration;	132✔
103	}
104
105	const trans = this.animationPosition ? this.animationPosition * 100 : 100;	132✔
106	switch (this.animationType) {	132✔
107	case CarouselAnimationType.slide:
108	return {	106✔
109	enterAnimation: useAnimation(slideInLeft,
110	{
111	params: {
112	delay: '0s',
113	duration: `${duration}ms`,
114	endOpacity: 1,
115	startOpacity: 1,
116	fromPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? trans : -trans}%)`,	212!
117	toPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`	106!
118	}
119	}),
120	leaveAnimation: useAnimation(slideInLeft,
121	{
122	params: {
123	delay: '0s',
124	duration: `${duration}ms`,
125	endOpacity: 1,
126	startOpacity: 1,
127	fromPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`,	106!
128	toPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? -trans : trans}%)`,	212!
129	}
130	})
131	};
132	case CarouselAnimationType.fade:
133	return {	6✔
134	enterAnimation: useAnimation(fadeIn,
135	{ params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),
136	leaveAnimation: null
137	};
138	}
139	return {	20✔
140	enterAnimation: null,
141	leaveAnimation: null
142	};
143	}
144
145	private playEnterAnimation() {
146	const animation = this.getAnimation().enterAnimation;	66✔
147	if (!animation) {	66✔
148	return;	10✔
149	}
150
151	this.enterAnimationPlayer = this.animationService.buildAnimation(animation, this.getCurrentElement());	56✔
152	this.enterAnimationPlayer.animationEnd.subscribe(() => {	56✔
153	// TODO: animation may never end. Find better way to clean up the player
154	if (this.enterAnimationPlayer) {	55✔
155	this.enterAnimationPlayer.destroy();	55✔
156	this.enterAnimationPlayer = null;	55✔
157	}
158	this.animationPosition = 0;	55✔
159	this.newDuration = 0;	55✔
160	this.previousItem.previous = false;	55✔
161	this.enterAnimationDone.emit();	55✔
162	this.cdr.markForCheck();	55✔
163	});
164	this.previousItem.previous = true;	56✔
165	this.enterAnimationPlayer.play();	56✔
166	}
167
168	private playLeaveAnimation() {
169	const animation = this.getAnimation().leaveAnimation;	66✔
170	if (!animation) {	66✔
171	return;	13✔
172	}
173
174	this.leaveAnimationPlayer = this.animationService.buildAnimation(animation, this.getPreviousElement());	53✔
175	this.leaveAnimationPlayer.animationEnd.subscribe(() => {	53✔
176	// TODO: animation may never end. Find better way to clean up the player
177	if (this.leaveAnimationPlayer) {	52✔
178	this.leaveAnimationPlayer.destroy();	52✔
179	this.leaveAnimationPlayer = null;	52✔
180	}
181	this.animationPosition = 0;	52✔
182	this.newDuration = 0;	52✔
183	this.leaveAnimationDone.emit();	52✔
184	});
185	this.leaveAnimationPlayer.play();	53✔
186	}
187
188	protected abstract getPreviousElement(): HTMLElement;
189
190	protected abstract getCurrentElement(): HTMLElement;
191	}

IgniteUI / igniteui-angular / 14101962945

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