@nanahoshi/mona-ui 0.18.0 → 0.18.1

package/fesm2022/nanahoshi-mona-ui-segmented.mjs

@@ -132,6 +132,7 @@ class SegmentedComponent {
     #lastAnimatedIndex;
     #lastOptions;
     #lastSize;
+    #observedOptionElements;
     #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -139,6 +140,7 @@ class SegmentedComponent {
         this.#lastAnimatedIndex = null;
         this.#lastOptions = null;
         this.#lastSize = null;
+        this.#observedOptionElements = [];
         this.#resizeObserver = null;
         this.containerClasses = computed(() => {
             const classes = segmentedContainerThemeVariants({ alignment: this.alignment(), rounded: this.rounded() });
@@ -265,7 +267,7 @@ class SegmentedComponent {
         afterRenderEffect({
             read: () => {
                 this.selectedIndex();
-                this.optionElements();
+                const optionElements = this.optionElements();
                 this.alignment();
                 this.rounded();
                 this.animate();
@@ -276,12 +278,14 @@ class SegmentedComponent {
                 const suppressTransition = isSizeChange || isOptionsChange;
                 this.#lastSize = size;
                 this.#lastOptions = options;
+                this.observeOptionElements(optionElements);
                 this.updateIndicatorGeometry({ suppressTransition });
             }
         });
         afterNextRender({
             read: () => {
                 this.setupResizeObserver();
+                this.scheduleSettledGeometryUpdate();
             }
         });
         this.#destroyRef.onDestroy(() => {
@@ -307,6 +311,39 @@ class SegmentedComponent {
         this.value.set(option.value);
         this.touch.emit();
     }
+    observeOptionElements(optionElements) {
+        if (!this.#resizeObserver) {
+            return;
+        }
+        const elements = optionElements.map(optionElement => optionElement.nativeElement);
+        for (const element of this.#observedOptionElements) {
+            if (!elements.includes(element)) {
+                this.#resizeObserver.unobserve(element);
+            }
+        }
+        for (const element of elements) {
+            if (!this.#observedOptionElements.includes(element)) {
+                this.#resizeObserver.observe(element);
+            }
+        }
+        this.#observedOptionElements = elements;
+    }
+    /**
+     * Guards against a stale indicator snapshot when the control mounts inside a container that is
+     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
+     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
+     */
+    scheduleSettledGeometryUpdate() {
+        const win = this.#hostElementRef.nativeElement.ownerDocument.defaultView;
+        if (!win) {
+            return;
+        }
+        win.requestAnimationFrame(() => {
+            win.requestAnimationFrame(() => {
+                this.updateIndicatorGeometry({ suppressTransition: true });
+            });
+        });
+    }
     setupResizeObserver() {
         if (typeof ResizeObserver === "undefined") {
             return;
@@ -315,6 +352,7 @@ class SegmentedComponent {
             this.updateIndicatorGeometry({ suppressTransition: true });
         });
         this.#resizeObserver.observe(this.#hostElementRef.nativeElement);
+        this.observeOptionElements(this.optionElements());
     }
     updateIndicatorGeometry(options) {
         const selectedIndex = this.selectedIndex();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -148,6 +148,13 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
+    private observeOptionElements;
+    /**
+     * Guards against a stale indicator snapshot when the control mounts inside a container that is
+     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
+     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
+     */
+    private scheduleSettledGeometryUpdate;
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;