@arsedizioni/ars-utils 22.0.1 → 22.0.2

package/fesm2022/arsedizioni-ars-utils-ui.application.mjs

@@ -27,7 +27,7 @@ import { FlexModule } from '@ngbracket/ngx-layout/flex';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i9 from '@angular/material/tree';
 import { MatTree, MatTreeModule } from '@angular/material/tree';
-import { BehaviorSubject, Subject, fromEvent, debounceTime } from 'rxjs';
+import { BehaviorSubject, Subject, auditTime, animationFrameScheduler } from 'rxjs';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import * as i2 from '@ngbracket/ngx-layout/extended';
 import { MatOptionModule } from '@angular/material/core';
@@ -2057,6 +2057,8 @@ class ChipsSelectorComponent {
         this.stateChanges = new Subject();
         this.destroyRef = inject(DestroyRef);
         this.changesEnabled = false;
+        /** Debounce bridge for `ResizeObserver` notifications. */
+        this.resize$ = new Subject();
         /** List of available options to display as chips. */
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -2120,15 +2122,25 @@ class ChipsSelectorComponent {
             this.placeholder();
             this.stateChanges.next();
         });
+        // React to container size changes to keep the collapsed state up to date.
+        // `auditTime` on the animation-frame scheduler coalesces ResizeObserver bursts
+        // without adding perceptible latency, and defers the layout read out of the
+        // observer callback to avoid "ResizeObserver loop" warnings.
+        this.resize$
+            .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0, animationFrameScheduler))
+            .subscribe(() => {
+            if (this.collapseAt() > 0) {
+                this.updateContainerWidth();
+            }
+        });
         afterNextRender(() => {
-            // React to window resize to keep the collapsed state up to date
-            fromEvent(window, 'resize')
-                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(250))
-                .subscribe(() => {
-                if (this.collapseAt() > 0) {
-                    this.updateContainerWidth();
+            if (SystemUtils.isBrowser() && typeof ResizeObserver !== 'undefined') {
+                const elem = document.getElementById(this.containerId);
+                if (elem) {
+                    this.resizeObserver = new ResizeObserver(() => this.resize$.next());
+                    this.resizeObserver.observe(elem);
                 }
-            });
+            }
             setTimeout(() => {
                 this.updateContainerWidth();
                 this.changesEnabled = true;
@@ -2136,6 +2148,7 @@ class ChipsSelectorComponent {
         });
     }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
         this.stateChanges.complete();
     }
     /**