ng-prime-tools 1.1.13 → 1.1.15

package/fesm2022/ng-prime-tools.mjs

@@ -9794,6 +9794,7 @@ var PTNewsTickerTrend;
 
 class PTNewsTickerComponent {
     static { this.SCROLL_ANIMATION_NAME = 'pt-news-ticker-scroll'; }
+    static { this.MINIMUM_CYCLE_TIMEOUT_MS = 50; }
     constructor(changeDetectorRef, zone) {
         this.changeDetectorRef = changeDetectorRef;
         this.zone = zone;
@@ -9843,6 +9844,7 @@ class PTNewsTickerComponent {
         this.hovered = false;
         this.pendingNews = null;
         this.animationFrameId = null;
+        this.pendingNewsCycleTimeoutId = null;
         this.viewInitialized = false;
         this.applyingPendingNews = false;
         this.newBadgeTimeouts = new Map();
@@ -9851,11 +9853,15 @@ class PTNewsTickerComponent {
     ngOnChanges(changes) {
         if (changes['news']) {
             const normalizedNews = this.normalizeNews(changes['news'].currentValue ?? []);
-            this.queueInputNewsWithoutRestart(normalizedNews);
+            this.applyInputNewsPreservingAnimation(normalizedNews);
         }
         if (changes['speed'] || changes['minSpeed'] || changes['maxSpeed']) {
             this.speed = this.normalizeSpeed(this.speed);
+            this.clearPendingNewsCycleTimeout();
             this.scheduleAnimationRefresh(true);
+            if (this.pendingNews) {
+                this.schedulePendingNewsAtCurrentCycleEnd();
+            }
         }
         if (changes['defaultSpeed']) {
             this.defaultSpeed = this.normalizeSpeed(this.defaultSpeed);
@@ -9869,12 +9875,19 @@ class PTNewsTickerComponent {
             if (!this.playing) {
                 this.applyPendingNewsImmediately();
             }
+            else if (this.pendingNews) {
+                this.schedulePendingNewsAtCurrentCycleEnd();
+            }
         }
         if (changes['gap'] ||
             changes['height'] ||
             changes['direction'] ||
             changes['loop']) {
+            this.clearPendingNewsCycleTimeout();
             this.scheduleAnimationRefresh(true);
+            if (this.pendingNews) {
+                this.schedulePendingNewsAtCurrentCycleEnd();
+            }
         }
     }
     ngAfterViewInit() {
@@ -9883,6 +9896,9 @@ class PTNewsTickerComponent {
         this.initializeResizeObserver();
         this.scheduleAnimationRefresh(true);
         this.changeDetectorRef.detectChanges();
+        if (this.pendingNews) {
+            this.schedulePendingNewsAtCurrentCycleEnd();
+        }
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
@@ -9891,6 +9907,7 @@ class PTNewsTickerComponent {
             cancelAnimationFrame(this.animationFrameId);
             this.animationFrameId = null;
         }
+        this.clearPendingNewsCycleTimeout();
         this.clearNewBadgeTimeouts();
         this.pendingNews = null;
     }
@@ -9927,6 +9944,7 @@ class PTNewsTickerComponent {
         });
     }
     clearNews() {
+        this.clearPendingNewsCycleTimeout();
         this.pendingNews = null;
         this.internalNews = [];
         this.clearNewBadgeTimeouts();
@@ -9949,6 +9967,9 @@ class PTNewsTickerComponent {
         }
         this.playing = true;
         this.emitPlayStateChange();
+        if (this.pendingNews) {
+            this.schedulePendingNewsAtCurrentCycleEnd();
+        }
     }
     pause() {
         if (!this.playing) {
@@ -9963,6 +9984,10 @@ class PTNewsTickerComponent {
         this.emitPlayStateChange();
         if (!this.playing) {
             this.applyPendingNewsImmediately();
+            return;
+        }
+        if (this.pendingNews) {
+            this.schedulePendingNewsAtCurrentCycleEnd();
         }
     }
     increaseSpeed() {
@@ -9986,16 +10011,24 @@ class PTNewsTickerComponent {
             speed: nextSpeed,
         });
         this.emitPlayStateChange();
+        this.clearPendingNewsCycleTimeout();
         this.scheduleAnimationRefresh(true);
+        if (this.pendingNews) {
+            this.schedulePendingNewsAtCurrentCycleEnd();
+        }
     }
     onMouseEnter() {
         if (!this.pauseOnHover) {
             return;
         }
         this.hovered = true;
+        this.clearPendingNewsCycleTimeout();
     }
     onMouseLeave() {
         this.hovered = false;
+        if (this.pendingNews && this.playing) {
+            this.schedulePendingNewsAtCurrentCycleEnd();
+        }
     }
     onTrackAnimationIteration(event) {
         if (!this.isTickerScrollEvent(event)) {
@@ -10179,34 +10212,138 @@ class PTNewsTickerComponent {
             ? 0
             : -1;
     }
-    queueInputNewsWithoutRestart(news) {
+    applyInputNewsPreservingAnimation(news) {
         const clonedNews = this.cloneNews(news);
         this.scheduleNewBadges(clonedNews);
-        if (!this.viewInitialized ||
-            !this.loop ||
-            !this.playing ||
-            this.internalNews.length === 0 ||
-            this.prefersReducedMotion()) {
+        this.clearPendingNewsCycleTimeout();
+        if (!this.viewInitialized) {
             this.pendingNews = null;
             this.internalNews = clonedNews;
-            if (this.viewInitialized) {
-                this.changeDetectorRef.detectChanges();
-                this.scheduleAnimationRefresh(true);
+            return;
+        }
+        if (this.areNewsListsEquivalent(this.internalNews, clonedNews)) {
+            return;
+        }
+        const animationState = this.captureTrackAnimationState();
+        this.pendingNews = null;
+        this.internalNews = clonedNews;
+        this.changeDetectorRef.detectChanges();
+        this.zone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.zone.run(() => {
+                        this.calculateAnimationDuration();
+                        this.restoreTrackAnimationState(animationState);
+                    });
+                });
+            });
+        });
+    }
+    captureTrackAnimationState() {
+        const animation = this.findTrackAnimation();
+        if (!animation) {
+            return {
+                progress: null,
+                playbackRate: 1,
+                wasPaused: !this.playing || (this.pauseOnHover && this.hovered),
+            };
+        }
+        const timing = animation.effect?.getComputedTiming();
+        const duration = typeof timing?.duration === 'number' ? timing.duration : null;
+        const currentTime = typeof animation.currentTime === 'number' ? animation.currentTime : null;
+        const progress = duration !== null && duration > 0 && currentTime !== null
+            ? (currentTime % duration) / duration
+            : null;
+        return {
+            progress,
+            playbackRate: Number.isFinite(animation.playbackRate)
+                ? animation.playbackRate
+                : 1,
+            wasPaused: animation.playState === 'paused' ||
+                !this.playing ||
+                (this.pauseOnHover && this.hovered),
+        };
+    }
+    restoreTrackAnimationState(state) {
+        const animation = this.findTrackAnimation();
+        if (!animation) {
+            return;
+        }
+        if (Number.isFinite(state.playbackRate)) {
+            animation.playbackRate = state.playbackRate;
+        }
+        if (state.progress !== null) {
+            const timing = animation.effect?.getComputedTiming();
+            const duration = typeof timing?.duration === 'number' ? timing.duration : null;
+            if (duration !== null && duration > 0) {
+                animation.currentTime = state.progress * duration;
             }
+        }
+        if (state.wasPaused) {
+            animation.pause();
             return;
         }
-        this.pendingNews = clonedNews;
+        animation.play();
+    }
+    findTrackAnimation() {
+        const trackElement = this.tickerTrack?.nativeElement;
+        if (!trackElement || typeof trackElement.getAnimations !== 'function') {
+            return null;
+        }
+        const animations = trackElement.getAnimations();
+        const tickerAnimation = animations.find((animation) => {
+            const animationName = animation.animationName;
+            return animationName === PTNewsTickerComponent.SCROLL_ANIMATION_NAME;
+        });
+        return (tickerAnimation ??
+            animations.find((animation) => animation.playState !== 'idle') ??
+            null);
+    }
+    areNewsListsEquivalent(currentNews, nextNews) {
+        if (currentNews.length !== nextNews.length) {
+            return false;
+        }
+        return currentNews.every((currentItem, index) => {
+            const nextItem = nextNews[index];
+            if (!nextItem) {
+                return false;
+            }
+            return (String(currentItem.id) === String(nextItem.id) &&
+                currentItem.text === nextItem.text &&
+                currentItem.type === nextItem.type &&
+                currentItem.link === nextItem.link &&
+                this.areSegmentsEquivalent(currentItem.segments, nextItem.segments));
+        });
+    }
+    areSegmentsEquivalent(currentSegments, nextSegments) {
+        const safeCurrentSegments = currentSegments ?? [];
+        const safeNextSegments = nextSegments ?? [];
+        if (safeCurrentSegments.length !== safeNextSegments.length) {
+            return false;
+        }
+        return safeCurrentSegments.every((currentSegment, index) => {
+            const nextSegment = safeNextSegments[index];
+            if (!nextSegment) {
+                return false;
+            }
+            return (currentSegment.label === nextSegment.label &&
+                currentSegment.value === nextSegment.value &&
+                currentSegment.trend === nextSegment.trend &&
+                currentSegment.icon === nextSegment.icon);
+        });
     }
     queueOrApplyNews(news) {
         const clonedNews = this.cloneNews(news);
         this.scheduleNewBadges(clonedNews);
         if (this.shouldApplyNewsImmediately()) {
+            this.clearPendingNewsCycleTimeout();
             this.pendingNews = null;
             this.internalNews = clonedNews;
             this.scheduleAnimationRefresh(true);
             return;
         }
         this.pendingNews = clonedNews;
+        this.schedulePendingNewsAtCurrentCycleEnd();
     }
     shouldApplyNewsImmediately() {
         return (!this.viewInitialized ||
@@ -10215,10 +10352,63 @@ class PTNewsTickerComponent {
             this.internalNews.length === 0 ||
             this.prefersReducedMotion());
     }
+    schedulePendingNewsAtCurrentCycleEnd() {
+        if (!this.pendingNews ||
+            this.pendingNewsCycleTimeoutId !== null ||
+            !this.viewInitialized ||
+            !this.playing ||
+            this.hovered) {
+            return;
+        }
+        const remainingDuration = this.resolveCurrentCycleRemainingDuration();
+        this.zone.runOutsideAngular(() => {
+            this.pendingNewsCycleTimeoutId = setTimeout(() => {
+                this.zone.run(() => {
+                    this.pendingNewsCycleTimeoutId = null;
+                    if (!this.playing || this.hovered) {
+                        return;
+                    }
+                    this.applyPendingNewsAtCycleBoundary();
+                });
+            }, remainingDuration);
+        });
+    }
+    resolveCurrentCycleRemainingDuration() {
+        const trackElement = this.tickerTrack?.nativeElement;
+        const fallbackDuration = Math.max(PTNewsTickerComponent.MINIMUM_CYCLE_TIMEOUT_MS, this.animationDurationSeconds * 1000);
+        if (!trackElement || typeof trackElement.getAnimations !== 'function') {
+            return fallbackDuration;
+        }
+        const animation = trackElement
+            .getAnimations()
+            .find((candidate) => candidate.playState !== 'idle');
+        if (!animation) {
+            return fallbackDuration;
+        }
+        const computedTiming = animation.effect?.getComputedTiming();
+        const animationDuration = typeof computedTiming?.duration === 'number'
+            ? computedTiming.duration
+            : fallbackDuration;
+        const currentTime = typeof animation.currentTime === 'number' ? animation.currentTime : 0;
+        if (!Number.isFinite(animationDuration) || animationDuration <= 0) {
+            return fallbackDuration;
+        }
+        const elapsedInCurrentCycle = currentTime % animationDuration;
+        const remainingDuration = animationDuration - elapsedInCurrentCycle;
+        return Math.max(PTNewsTickerComponent.MINIMUM_CYCLE_TIMEOUT_MS, Math.ceil(remainingDuration));
+    }
+    clearPendingNewsCycleTimeout() {
+        if (this.pendingNewsCycleTimeoutId === null) {
+            return;
+        }
+        clearTimeout(this.pendingNewsCycleTimeoutId);
+        this.pendingNewsCycleTimeoutId = null;
+    }
     applyPendingNewsAtCycleBoundary() {
         if (!this.pendingNews || this.applyingPendingNews) {
             return;
         }
+        this.clearPendingNewsCycleTimeout();
         this.applyingPendingNews = true;
         const nextNews = this.cloneNews(this.pendingNews);
         this.pendingNews = null;
@@ -10230,6 +10420,9 @@ class PTNewsTickerComponent {
                     this.zone.run(() => {
                         this.calculateAnimationDuration();
                         this.applyingPendingNews = false;
+                        if (this.pendingNews) {
+                            this.schedulePendingNewsAtCurrentCycleEnd();
+                        }
                     });
                 });
             });
@@ -10239,6 +10432,7 @@ class PTNewsTickerComponent {
         if (!this.pendingNews) {
             return;
         }
+        this.clearPendingNewsCycleTimeout();
         const nextNews = this.cloneNews(this.pendingNews);
         this.pendingNews = null;
         this.internalNews = nextNews;
@@ -10361,7 +10555,11 @@ class PTNewsTickerComponent {
         this.zone.runOutsideAngular(() => {
             this.resizeObserver = new ResizeObserver(() => {
                 this.zone.run(() => {
+                    this.clearPendingNewsCycleTimeout();
                     this.scheduleAnimationRefresh(true);
+                    if (this.pendingNews) {
+                        this.schedulePendingNewsAtCurrentCycleEnd();
+                    }
                 });
             });
             this.resizeObserver.observe(viewportElement);