duck-dev-lib 0.0.76 → 0.0.77

package/fesm2022/duck-dev-lib.mjs

@@ -5956,6 +5956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class DuckDevSegmentNeobrutal {
     cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
     valueChange = output();
@@ -5967,15 +5969,22 @@ class DuckDevSegmentNeobrutal {
     indicatorPosition = 0;
     indicatorWidth = 0;
     segmentStyle = computed(() => this.getSegmentStyle(this.color()), { ...(ngDevMode ? { debugName: "segmentStyle" } : {}) });
+    resizeObserver = null;
+    intersectionObserver = null;
+    frameId = null;
+    settleFrameId = null;
     constructor() {
         afterNextRender(() => {
             this.rebuildButtons();
             if (!this.selectedValue && this.buttons.length > 0) {
                 this.selectedValue = this.buttons[0].value;
             }
-            this.updateIndicator(this.getSelectedIndex());
+            this.watchContainerSize();
+            this.watchHostVisibility();
+            this.scheduleIndicatorUpdate();
             this.cdr.markForCheck();
         });
+        this.destroyRef.onDestroy(() => this.destroyObservers());
     }
     ngAfterContentInit() {
         this.rebuildButtons();
@@ -5983,7 +5992,7 @@ class DuckDevSegmentNeobrutal {
         this.selectedValue = incoming ?? this.selectedValue;
         this.segmentButtons.changes.subscribe(() => {
             this.rebuildButtons();
-            setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
+            this.scheduleIndicatorUpdate();
         });
     }
     selectButton(value, index) {
@@ -5994,7 +6003,7 @@ class DuckDevSegmentNeobrutal {
         this.selectedValue = value;
         this.valueChange.emit(value);
         this.ionChange.emit({ detail: { value } });
-        this.updateIndicator(index);
+        this.scheduleIndicatorUpdate(index);
     }
     rebuildButtons() {
         const btns = this.segmentButtons?.toArray() ?? [];
@@ -6014,6 +6023,63 @@ class DuckDevSegmentNeobrutal {
             const button = buttonElements[index];
             this.indicatorWidth = button.offsetWidth;
             this.indicatorPosition = button.offsetLeft;
+            this.cdr.markForCheck();
+        }
+    }
+    scheduleIndicatorUpdate(index = this.getSelectedIndex()) {
+        if (this.frameId !== null) {
+            cancelAnimationFrame(this.frameId);
+        }
+        this.frameId = requestAnimationFrame(() => {
+            this.updateIndicator(index);
+            this.frameId = requestAnimationFrame(() => {
+                this.updateIndicator(index);
+                this.frameId = null;
+            });
+        });
+    }
+    watchContainerSize() {
+        const container = this.buttonsContainer().nativeElement;
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleSettledIndicatorUpdate();
+        });
+        this.resizeObserver.observe(container);
+    }
+    watchHostVisibility() {
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry?.isIntersecting) {
+                this.scheduleSettledIndicatorUpdate();
+            }
+        });
+        this.intersectionObserver.observe(this.host.nativeElement);
+    }
+    scheduleSettledIndicatorUpdate() {
+        this.scheduleIndicatorUpdate();
+        if (this.settleFrameId !== null) {
+            cancelAnimationFrame(this.settleFrameId);
+        }
+        this.settleFrameId = requestAnimationFrame(() => {
+            this.settleFrameId = requestAnimationFrame(() => {
+                this.scheduleIndicatorUpdate();
+                this.settleFrameId = null;
+            });
+        });
+    }
+    destroyObservers() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+        if (this.frameId !== null) {
+            cancelAnimationFrame(this.frameId);
+        }
+        if (this.settleFrameId !== null) {
+            cancelAnimationFrame(this.settleFrameId);
         }
     }
     getSegmentStyle(color) {