mn-angular-lib 1.0.137 → 1.0.139

package/fesm2022/mn-angular-lib.mjs

@@ -10542,6 +10542,26 @@ const DEFAULT_SKELETON_TAB_COUNT = 3;
 class MnTabComponent {
     /** The horizontally-scrolling wrapper the edge fade is painted onto. */
     scrollContainer;
+    /** The tab row; queried for the active tab so the indicator can measure it. */
+    tabList;
+    /** The shared underline that slides to the active tab. */
+    indicator;
+    /** Pending indicator remeasure, cancelled on destroy so a post-destroy frame can't read a detached ref. */
+    indicatorFrame;
+    /**
+     * True while a click-initiated slide is animating. The active tab's
+     * `font-bold` widens the row, which fires {@link resizeObserver}; without
+     * this guard the observer's snap ({@link updateIndicator} with `animate:
+     * false`) would land the indicator at its target the same frame the slide
+     * starts, so the transition never paints. Set synchronously in
+     * {@link setActive} — before the frame runs — so the guard doesn't depend on
+     * rAF-vs-ResizeObserver callback ordering.
+     */
+    sliding = false;
+    /** Clears {@link sliding} after the slide finishes; re-armed per click, cancelled on destroy. */
+    slidingTimer;
+    /** Slide duration in ms; matches the indicator's `duration-300` transition. */
+    static SLIDE_MS = 300;
     /** How far the fade reaches in from each overflowing edge. */
     static FADE = '2rem';
     /** Data source containing tab items and default active index. */
@@ -10605,14 +10625,28 @@ class MnTabComponent {
         const el = this.scrollContainer?.nativeElement;
         if (!el)
             return;
-        this.resizeObserver = new ResizeObserver(() => this.updateEdgeFades());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateEdgeFades();
+            // Tabs may have reflowed (viewport change, justified widths); snap the
+            // indicator to the new geometry — animating a resize tick reads as jank.
+            // But skip the snap mid-slide: a click's own `font-bold` resizes the row
+            // and fires this observer, and snapping there kills the slide it triggered.
+            if (!this.sliding)
+                this.updateIndicator(false);
+        });
         this.resizeObserver.observe(el);
         if (el.firstElementChild)
             this.resizeObserver.observe(el.firstElementChild);
         this.updateEdgeFades();
+        // Place the indicator on the default tab without a slide-in from zero.
+        this.updateIndicator(false);
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        if (this.indicatorFrame !== undefined)
+            cancelAnimationFrame(this.indicatorFrame);
+        if (this.slidingTimer !== undefined)
+            clearTimeout(this.slidingTimer);
     }
     /**
      * Paints a fade over whichever edge has tabs scrolled out of view — a soft
@@ -10652,6 +10686,68 @@ class MnTabComponent {
         item.onClick?.();
         this.currentActive = item;
         this.activeChange.emit(item);
+        // Slide the underline to the new tab. Measure on the next frame, after
+        // change detection has applied the active tab's `font-bold` (which widens
+        // it) so the indicator lands on the final, bolded geometry. Guard the slide
+        // against the resize snap the same `font-bold` triggers (see {@link sliding}).
+        this.beginSlide();
+        this.scheduleIndicator(true);
+    }
+    /**
+     * Marks a click-driven slide as in progress and schedules the guard to lift
+     * once the transition has finished. A timeout (not `transitionend`) so the
+     * flag still clears under `motion-reduce`, where no transition event fires.
+     */
+    beginSlide() {
+        this.sliding = true;
+        if (this.slidingTimer !== undefined)
+            clearTimeout(this.slidingTimer);
+        this.slidingTimer = setTimeout(() => {
+            this.slidingTimer = undefined;
+            this.sliding = false;
+        }, MnTabComponent.SLIDE_MS);
+    }
+    /**
+     * Moves the shared underline to the active tab. When `animate` is false the
+     * move is snapped (no slide) by disabling the transition for one reflow —
+     * used on init, async selection and resize, where a slide would read as jank.
+     * @param animate - Whether the move should slide (true) or snap (false).
+     */
+    updateIndicator(animate) {
+        const bar = this.indicator?.nativeElement;
+        const list = this.tabList?.nativeElement;
+        if (!bar || !list)
+            return;
+        const active = list.querySelector('[role="tab"][aria-selected="true"]');
+        if (!active) {
+            bar.style.opacity = '0';
+            return;
+        }
+        if (!animate)
+            bar.style.transition = 'none';
+        bar.style.opacity = '1';
+        bar.style.width = `${active.offsetWidth}px`;
+        bar.style.transform = `translateX(${active.offsetLeft}px)`;
+        if (!animate) {
+            // Force a reflow so the snapped values apply before the transition is
+            // restored, then hand animation back to the CSS class.
+            void bar.offsetWidth;
+            bar.style.transition = '';
+        }
+    }
+    /**
+     * Remeasures the indicator on the next animation frame, so the read happens
+     * after layout reflects the latest active-tab classes. Coalesces bursts and
+     * is cancellable on destroy.
+     * @param animate - Whether the resulting move should slide.
+     */
+    scheduleIndicator(animate) {
+        if (this.indicatorFrame !== undefined)
+            cancelAnimationFrame(this.indicatorFrame);
+        this.indicatorFrame = requestAnimationFrame(() => {
+            this.indicatorFrame = undefined;
+            this.updateIndicator(animate);
+        });
     }
     /**
      * Returns the resolved badge value for a tab item, supporting both plain numbers and Signal<number>.
@@ -10670,7 +10766,10 @@ class MnTabComponent {
     syncActiveTab() {
         const items = this.dataSource?.items;
         if (!items || items.length === 0) {
-            this.currentActive = undefined;
+            if (this.currentActive !== undefined) {
+                this.currentActive = undefined;
+                this.scheduleIndicator(false);
+            }
             return;
         }
         if (this.currentActive && items.includes(this.currentActive)) {
@@ -10679,16 +10778,24 @@ class MnTabComponent {
         const defaultIndex = this.dataSource.defaultActive;
         const index = defaultIndex >= 0 && defaultIndex < items.length ? defaultIndex : 0;
         this.currentActive = items[index];
+        // Selection resolved from data (not a user click): snap, don't slide.
+        this.scheduleIndicator(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
+            }], tabList: [{
+                type: ViewChild,
+                args: ['tabList']
+            }], indicator: [{
+                type: ViewChild,
+                args: ['indicator']
             }], dataSource: [{
                 type: Input
             }], scrollable: [{