mn-angular-lib 1.0.92 → 1.0.93

package/fesm2022/mn-angular-lib.mjs

@@ -8432,12 +8432,30 @@ class MnTabComponent {
             (this.dataSource.items.length || DEFAULT_SKELETON_TAB_COUNT);
         return Array.from({ length: count }, (_, index) => index);
     }
-    /** Initializes the default active tab based on the data source configuration. */
-    ngOnInit() {
-        if (this.dataSource &&
-            this.dataSource.items.length > this.dataSource.defaultActive) {
-            this.currentActive = this.dataSource.items[this.dataSource.defaultActive];
+    /**
+     * Re-resolves the active tab on every change-detection pass.
+     *
+     * The data source is often populated or rebuilt asynchronously (tabs that
+     * depend on fetched data or permissions). Resolving the active tab only once
+     * at init would leave {@link currentActive} pointing at a stale item — the
+     * tab bar would then highlight nothing and swallow the first click — so the
+     * selection is kept in sync with whatever the data source currently holds.
+     */
+    ngDoCheck() {
+        this.syncActiveTab();
+    }
+    /**
+     * Sets the given tab item as active, invoking deactivate/activate callbacks.
+     * @param item - The tab item to activate.
+     */
+    setActive(item) {
+        if (this.currentActive === item) {
+            return;
         }
+        this.currentActive?.onDeactivate?.();
+        item.onClick?.();
+        this.currentActive = item;
+        this.activeChange.emit(item);
     }
     /**
      * Returns the resolved badge value for a tab item, supporting both plain numbers and Signal<number>.
@@ -8449,16 +8467,22 @@ class MnTabComponent {
         return item.badge;
     }
     /**
-     * Sets the given tab item as active, invoking deactivate/activate callbacks.
-     * @param item - The tab item to activate.
+     * Ensures {@link currentActive} references a tab that still exists in the data
+     * source, falling back to the configured default tab when the current
+     * selection is missing or stale (e.g. after the items array is replaced).
      */
-    setActive(item) {
-        if (this.currentActive && this.currentActive !== item) {
-            this.currentActive.onDeactivate?.();
-            item.onClick?.();
-            this.currentActive = item;
-            this.activeChange.emit(item);
+    syncActiveTab() {
+        const items = this.dataSource?.items;
+        if (!items || items.length === 0) {
+            this.currentActive = undefined;
+            return;
+        }
+        if (this.currentActive && items.includes(this.currentActive)) {
+            return;
         }
+        const defaultIndex = this.dataSource.defaultActive;
+        const index = defaultIndex >= 0 && defaultIndex < items.length ? defaultIndex : 0;
+        this.currentActive = items[index];
     }
     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" }, ngImport: i0, template: "<div class=\"mb-10\">\n  <div\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 (dataSource.isDataLoading) {\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.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 px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\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" }] });