codexly-ui 0.10.40 → 0.10.42

package/fesm2022/codexly-ui.mjs

@@ -12395,6 +12395,18 @@ class ClxCarouselComponent {
     _autoPlayTimer = null;
     _touchStartX = 0;
     _zone;
+    /** True while the window is actively being resized — suppresses the track's transition so the
+     *  browser doesn't re-trigger a 500ms transform animation on every resize frame (translateX uses
+     *  a % value, which resolves to a new pixel value on each frame and reads as a "change"). */
+    _resizing = signal(false, ...(ngDevMode ? [{ debugName: "_resizing" }] : /* istanbul ignore next */ []));
+    _resizeEndTimer = null;
+    _resizeListener = () => {
+        if (!this._resizing())
+            this._zone.run(() => this._resizing.set(true));
+        if (this._resizeEndTimer)
+            clearTimeout(this._resizeEndTimer);
+        this._resizeEndTimer = setTimeout(() => this._zone.run(() => this._resizing.set(false)), 400);
+    };
     _aspectClass = computed(() => CAROUSEL_ASPECT_RATIO_MAP[this.aspectRatio()] ?? '', ...(ngDevMode ? [{ debugName: "_aspectClass" }] : /* istanbul ignore next */ []));
     _viewportClass = computed(() => {
         const base = this._aspectClass();
@@ -12420,6 +12432,9 @@ class ClxCarouselComponent {
             if (active)
                 this._startTimer(ms);
         });
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            this._zone.runOutsideAngular(() => window.addEventListener('resize', this._resizeListener));
+        }
     }
     ngAfterContentInit() {
         if (this.autoPlay())
@@ -12427,6 +12442,10 @@ class ClxCarouselComponent {
     }
     ngOnDestroy() {
         this._clearTimer();
+        if (typeof window !== 'undefined')
+            window.removeEventListener('resize', this._resizeListener);
+        if (this._resizeEndTimer)
+            clearTimeout(this._resizeEndTimer);
     }
     next() {
         const total = this._slides().length;
@@ -12495,7 +12514,9 @@ class ClxCarouselComponent {
          (touchend)="_onTouchEnd($event)">
 
       <!-- Track -->
-      <div class="flex h-full transition-transform duration-500 ease-in-out will-change-transform"
+      <div class="flex h-full ease-in-out will-change-transform"
+           [class.transition-transform]="!_resizing()"
+           [class.duration-500]="!_resizing()"
            [style.transform]="'translateX(-' + currentPageIndex() * 100 + '%)'">
         @for (slide of _slides(); track slide) {
           <div class="flex-none w-full h-full">
@@ -12563,7 +12584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
          (touchend)="_onTouchEnd($event)">
 
       <!-- Track -->
-      <div class="flex h-full transition-transform duration-500 ease-in-out will-change-transform"
+      <div class="flex h-full ease-in-out will-change-transform"
+           [class.transition-transform]="!_resizing()"
+           [class.duration-500]="!_resizing()"
            [style.transform]="'translateX(-' + currentPageIndex() * 100 + '%)'">
         @for (slide of _slides(); track slide) {
           <div class="flex-none w-full h-full">