@sd-angular/core 19.0.0-beta.1 → 19.0.0-beta.100

package/fesm2022/sd-angular-core-components-tab-router.mjs

@@ -1,19 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, createNgModule } from '@angular/core';
-import * as i1 from '@angular/router';
-import { RouterModule, RouterEvent, RoutesRecognized, NavigationEnd, ActivatedRoute } from '@angular/router';
-import * as i5 from '@angular/common';
+import { Injectable, Pipe, Input, ChangeDetectionStrategy, Component, viewChild, input, inject, ChangeDetectorRef, ElementRef, HostListener, booleanAttribute, signal, Injector, afterNextRender, NgModuleFactory, createNgModule } from '@angular/core';
+import * as i2 from '@angular/router';
+import { Router, RoutesRecognized, NavigationEnd, RouterOutlet, ActivatedRoute } from '@angular/router';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BehaviorSubject, Subscription, Subject } from 'rxjs';
-import { debounceTime, startWith, map, filter, take } from 'rxjs/operators';
-import * as i2 from '@angular/cdk/drag-drop';
+import { BehaviorSubject, Subscription, from, isObservable, lastValueFrom, Subject } from 'rxjs';
+import { debounceTime, startWith, filter, concatMap, take } from 'rxjs/operators';
+import { SdNotifyService } from '@sd-angular/core/services/notify';
+import { I18nService } from '@sd-angular/core/i18n';
+import { SdUtilities } from '@sd-angular/core/utilities';
+import * as i1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { SdBadge } from '@sd-angular/core/components/badge';
-import { SdUtilities } from '@sd-angular/core/utilities';
-import * as i4 from '@sd-angular/core/services/notify';
 
 class SdTabBase {
     #tab;
@@ -104,16 +105,31 @@ class SdTabRouterService {
     };
     // Gọi hàm này để thực hiện update tab
     updateTab = (tab) => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
+class SdTabDecoratorService {
+    static tabRouterService = new BehaviorSubject(undefined);
+    constructor(tabRouterService) {
+        SdTabDecoratorService.tabRouterService.next(tabRouterService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabDecoratorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: SdTabRouterService }] });
+
 class SdTabInfoPipe {
     tabRouterService;
     constructor(tabRouterService) {
@@ -139,10 +155,10 @@ class SdTabInfoPipe {
             icon: undefined,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdTabInfoPipe, isStandalone: true, name: "sdTabInfo" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdTabInfoPipe, isStandalone: true, name: "sdTabInfo" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabInfoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabInfoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sdTabInfo',
@@ -153,12 +169,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdTabRouterItemComponent {
     cdRef;
     tabRouterService;
+    router;
     tab;
     #subsctiption = new Subscription();
     tabInfo;
-    constructor(cdRef, tabRouterService) {
+    constructor(cdRef, tabRouterService, router) {
         this.cdRef = cdRef;
         this.tabRouterService = tabRouterService;
+        this.router = router;
     }
     ngOnInit() {
         this.#subsctiption.add(this.tabRouterService.events.pipe(debounceTime(100)).subscribe(() => {
@@ -174,6 +192,13 @@ class SdTabRouterItemComponent {
     ngOnDestroy() {
         this.#subsctiption.unsubscribe();
     }
+    onTabClick = (event) => {
+        event.preventDefault();
+        this.router.navigate([this.tab.url], {
+            queryParams: this.tab.queryParams,
+            state: { switchTab: true },
+        });
+    };
     close = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -212,35 +237,35 @@ class SdTabRouterItemComponent {
             this.tabRouterService.close(this.tab);
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\n  [routerLink]=\"[tab.url]\"\n  [queryParams]=\"tab.queryParams\"\n  [state]=\"{ switchTab: true }\"\n  class=\"tab-router__item d-flex align-items-center\"\n  style=\"gap: 8px\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (mousedown)=\"onMousedown($event)\"\n  (mouseup)=\"onMouseup($event)\">\n  @let info = tabInfo | sdTabInfo: tab;\n  @if (info) {\n    <sd-badge\n      style=\"overflow: hidden;white-space: nowrap;\"\n      [icon]=\"info.icon\"\n      [title]=\"info.icon\"\n      [tooltip]=\"info.tooltip || info.name\"\n      [title]=\"info.name\"\n      [color]=\"info.color\"></sd-badge>\n    <button\n      aria-hidden=\"true\"\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\n      (click)=\"close($event)\"\n      (mousedown)=\"$event.stopPropagation()\">\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\n    </button>\n  }\n</a>\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["sdClick"] }, { kind: "pipe", type: SdTabInfoPipe, name: "sdTabInfo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\r\n  [href]=\"[tab.url]\"\r\n  class=\"tab-router__item d-flex align-items-center gap-8\"\r\n  [class.tab-router__item--active]=\"tab.isActive\"\r\n  (click)=\"onTabClick($event)\"\r\n  (mousedown)=\"onMousedown($event)\"\r\n  (mouseup)=\"onMouseup($event)\">\r\n  @let info = tabInfo | sdTabInfo: tab;\r\n  @if (info) {\r\n    <sd-badge\r\n      style=\"overflow: hidden;white-space: nowrap;\"\r\n      [icon]=\"info.icon\"\r\n      [title]=\"info.icon\"\r\n      [tooltip]=\"info.tooltip || info.name\"\r\n      [title]=\"info.name\"\r\n      [color]=\"info.color\"\r\n      (click)=\"onTabClick($event)\"></sd-badge>\r\n    <button\r\n      aria-hidden=\"true\"\r\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\r\n      (click)=\"close($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\">\r\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\r\n    </button>\r\n  }\r\n</a>\r\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdTabInfoPipe, name: "sdTabInfo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, RouterModule, MatIconModule, SdBadge, SdTabInfoPipe], template: "<a\n  [routerLink]=\"[tab.url]\"\n  [queryParams]=\"tab.queryParams\"\n  [state]=\"{ switchTab: true }\"\n  class=\"tab-router__item d-flex align-items-center\"\n  style=\"gap: 8px\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (mousedown)=\"onMousedown($event)\"\n  (mouseup)=\"onMouseup($event)\">\n  @let info = tabInfo | sdTabInfo: tab;\n  @if (info) {\n    <sd-badge\n      style=\"overflow: hidden;white-space: nowrap;\"\n      [icon]=\"info.icon\"\n      [title]=\"info.icon\"\n      [tooltip]=\"info.tooltip || info.name\"\n      [title]=\"info.name\"\n      [color]=\"info.color\"></sd-badge>\n    <button\n      aria-hidden=\"true\"\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\n      (click)=\"close($event)\"\n      (mousedown)=\"$event.stopPropagation()\">\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\n    </button>\n  }\n</a>\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdTabRouterService }], propDecorators: { tab: [{
+            args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, SdBadge, SdTabInfoPipe], template: "<a\r\n  [href]=\"[tab.url]\"\r\n  class=\"tab-router__item d-flex align-items-center gap-8\"\r\n  [class.tab-router__item--active]=\"tab.isActive\"\r\n  (click)=\"onTabClick($event)\"\r\n  (mousedown)=\"onMousedown($event)\"\r\n  (mouseup)=\"onMouseup($event)\">\r\n  @let info = tabInfo | sdTabInfo: tab;\r\n  @if (info) {\r\n    <sd-badge\r\n      style=\"overflow: hidden;white-space: nowrap;\"\r\n      [icon]=\"info.icon\"\r\n      [title]=\"info.icon\"\r\n      [tooltip]=\"info.tooltip || info.name\"\r\n      [title]=\"info.name\"\r\n      [color]=\"info.color\"\r\n      (click)=\"onTabClick($event)\"></sd-badge>\r\n    <button\r\n      aria-hidden=\"true\"\r\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\r\n      (click)=\"close($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\">\r\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\r\n    </button>\r\n  }\r\n</a>\r\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdTabRouterService }, { type: i2.Router }], propDecorators: { tab: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
 class SdTabRouterNavComponent {
-    cdRef;
-    elementRef;
-    tabRouterNav;
-    tabs = [];
+    tabRouterNav = viewChild('tabRouterNav');
+    tabs = input([]);
     mode = 'default';
-    constructor(cdRef, 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    elementRef) {
-        this.cdRef = cdRef;
-        this.elementRef = elementRef;
-    }
+    cdRef = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
     onResize() {
         this.checkUI();
     }
     checkUI = () => {
-        const width = this.tabRouterNav?.nativeElement.clientWidth;
-        const nameWidth = (width - this.tabs.length * 68) / this.tabs.length;
+        const width = this.tabRouterNav()?.nativeElement.clientWidth ?? 0;
+        const tabs = this.tabs();
+        if (tabs.length === 0) {
+            this.mode = 'default';
+            this.cdRef.markForCheck();
+            return;
+        }
+        const nameWidth = (width - tabs.length * 68) / tabs.length;
         if (nameWidth <= 20) {
             this.mode = 'compact';
         }
@@ -250,324 +275,315 @@ class SdTabRouterNavComponent {
         this.cdRef.markForCheck();
     };
     onDrop = (event) => {
-        moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
+        moveItemInArray(this.tabs(), event.previousIndex, event.currentIndex);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterNavComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: "tabs" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true }], ngImport: i0, template: "<div\n  #tabRouterNav\n  cdkDropList\n  cdkDropListLockAxis=\"x\"\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n  [class.d-none]=\"tabs.length > 1\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef?.nativeElement\"></sd-tab-router-item>\n  </ng-container>\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdTabRouterItemComponent, selector: "sd-tab-router-item", inputs: ["tab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #tabRouterNav\r\n  cdkDropList\r\n  cdkDropListLockAxis=\"x\"\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\r\n  [class.d-none]=\"tabs().length > 1\">\r\n  @for (tab of tabs(); track tab.key) {\r\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\r\n  }\r\n</div>\r\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdTabRouterItemComponent, selector: "sd-tab-router-item", inputs: ["tab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-tab-router-nav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, DragDropModule, SdTabRouterItemComponent], template: "<div\n  #tabRouterNav\n  cdkDropList\n  cdkDropListLockAxis=\"x\"\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n  [class.d-none]=\"tabs.length > 1\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef?.nativeElement\"></sd-tab-router-item>\n  </ng-container>\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { tabRouterNav: [{
-                type: ViewChild,
-                args: ['tabRouterNav']
-            }], tabs: [{
-                type: Input
-            }], onResize: [{
+            args: [{ selector: 'sd-tab-router-nav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, DragDropModule, SdTabRouterItemComponent], template: "<div\r\n  #tabRouterNav\r\n  cdkDropList\r\n  cdkDropListLockAxis=\"x\"\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\r\n  [class.d-none]=\"tabs().length > 1\">\r\n  @for (tab of tabs(); track tab.key) {\r\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\r\n  }\r\n</div>\r\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"] }]
+        }], propDecorators: { onResize: [{
                 type: HostListener,
-                args: ['window:resize', ['$event']]
+                args: ['window:resize']
             }] } });
 
-class SdTabDecoratorService {
-    static tabRouterService = new BehaviorSubject(undefined);
-    constructor(tabRouterService) {
-        SdTabDecoratorService.tabRouterService.next(tabRouterService);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: SdTabRouterService }] });
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line @angular-eslint/no-unused-standalone-imports
 class SdTabRouterOutletComponent {
-    router;
-    activatedRoute;
-    cd;
-    injector;
-    tabDecoratorService;
-    tabRouterService;
-    sdNotifyService;
-    tabRouterNav;
-    tabs = [];
+    disabled = input(false, { transform: booleanAttribute });
+    tabRouterNav = viewChild('tabRouterNav');
+    tabs = signal([]);
+    #router = inject(Router);
+    #injector = inject(Injector);
+    #tabRouterService = inject(SdTabRouterService);
+    #sdNotifyService = inject(SdNotifyService);
+    #i18n = inject(I18nService);
+    // Inject để đảm bảo SdTabDecoratorService được khởi tạo (nó register BehaviorSubject
+    // tĩnh để @SdTab decorator có thể truy cập SdTabRouterService). Không dùng trực tiếp ở đây.
+    #tabDecoratorService = inject(SdTabDecoratorService);
     #rootRoute;
     #subscription = new Subscription();
-    #firstLoad = true;
-    constructor(router, activatedRoute, cd, injector, tabDecoratorService, // KHÔNG XÓA
-    tabRouterService, sdNotifyService) {
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this.cd = cd;
-        this.injector = injector;
-        this.tabDecoratorService = tabDecoratorService;
-        this.tabRouterService = tabRouterService;
-        this.sdNotifyService = sdNotifyService;
-        this.#subscription.add(router.events
-            .pipe(map((event) => (event instanceof RouterEvent ? event : event.routerEvent)), filter(event => {
-            return event instanceof RoutesRecognized || event instanceof NavigationEnd;
-        }))
-            .subscribe(async (event) => {
-            if (this.#firstLoad && event instanceof NavigationEnd) {
-                this.#firstLoad = false;
-                const route = this.#getActivatedRouteSnapshot(this.activatedRoute.snapshot);
-                this.#rootRoute = this.router.routerState.root;
-                await this.#activeRoute(event.urlAfterRedirects || event.url, route);
+    // State của navigation hiện tại (replaceTab, switchTab, ...) được capture ở RoutesRecognized
+    // và dùng lại ở NavigationEnd. Lý do: tại NavigationEnd, getCurrentNavigation() đã trả về null,
+    // còn lastSuccessfulNavigation và window.history.state không đáng tin cậy với mọi case.
+    #pendingNavigationState = {};
+    // Serialize mọi #activeRoute (router events + initial sync) để tránh race tạo duplicate tab.
+    #activationQueue = Promise.resolve();
+    constructor() {
+        this.#subscription.add(this.#router.events
+            .pipe(
+        // KHÔNG unwrap event.routerEvent (vd Scroll wrap NavigationEnd):
+        // Angular emit NavigationEnd RAW trước, RouterScroller emit Scroll(NavigationEnd) sau.
+        // Nếu unwrap thêm Scroll → handler fire 2 lần cho 1 nav → race condition tạo duplicate tabs.
+        // Hybrid: cần CẢ HAI event vì mỗi event chứa data khác nhau ở thời điểm khác nhau.
+        // - RoutesRecognized: navigation đang in-flight → getCurrentNavigation().extras.state đọc được
+        // - NavigationEnd: navigation hoàn tất → routerState.root đã update với route mới (cần cho lazy routes)
+        filter((event) => event instanceof RoutesRecognized || event instanceof NavigationEnd), 
+        // Serialize: #handleEvent async (await getBestInjector). 2 nav liên tiếp
+        // không await xen kẽ → tránh race đọc this.tabs() = [] khi tab đầu chưa kịp set.
+        concatMap(event => from(this.#handleEvent(event))))
+            .subscribe());
+        this.#subscription.add(this.#tabRouterService.actions.subscribe((event) => {
+            if (this.disabled())
                 return;
-            }
-            if (!this.#firstLoad && event instanceof RoutesRecognized) {
-                const route = this.#getActivatedRouteSnapshot(event.state.root);
-                this.#rootRoute = this.router.routerState.root;
-                await this.#activeRoute(event.urlAfterRedirects || event.url, route);
-            }
-        }));
-        this.#subscription.add(tabRouterService.actions.subscribe((event) => {
-            if (event && event.type === 'close') {
+            if (event?.type === 'close') {
                 this.#closeTab(event.tab);
             }
         }));
+        // Initial navigation có thể hoàn tất trước khi outlet subscribe router.events
+        // (blocking init hoặc outlet mount muộn). Catch-up sau first render.
+        afterNextRender(() => {
+            void this.#syncCurrentRoute();
+        });
     }
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    tabTrackBy = (index, tab) => {
-        return tab.key;
+    #scheduleActivation = (task) => {
+        const run = this.#activationQueue.then(task);
+        this.#activationQueue = run.catch(() => undefined);
+        return run;
+    };
+    #handleEvent = async (event) => {
+        if (this.disabled()) {
+            this.#pendingNavigationState = {};
+            return;
+        }
+        if (event instanceof RoutesRecognized) {
+            // Capture state ngay lúc nav còn in-flight. Đây là điểm duy nhất chắc chắn
+            // getCurrentNavigation() trả về Navigation object với extras.state nguyên vẹn.
+            this.#pendingNavigationState = this.#router.getCurrentNavigation()?.extras?.state ?? {};
+            return;
+        }
+        // NavigationEnd: dùng routerState.snapshot.root (canonical state tại NavigationEnd),
+        // KHÔNG dùng injected ActivatedRoute.snapshot — có thể chưa sync trên initial load.
+        const navigationState = this.#pendingNavigationState;
+        this.#pendingNavigationState = {};
+        await this.#scheduleActivation(async () => {
+            const route = this.#getActivatedRouteSnapshot(this.#router.routerState.snapshot.root);
+            this.#rootRoute = this.#router.routerState.root;
+            await this.#activeRoute(event.urlAfterRedirects || event.url, route, navigationState);
+        });
+    };
+    // Bù initial navigation nếu NavigationEnd đã fire trước khi outlet subscribe.
+    #syncCurrentRoute = () => {
+        if (this.disabled() || !this.#router.navigated) {
+            return Promise.resolve();
+        }
+        const route = this.#getActivatedRouteSnapshot(this.#router.routerState.snapshot.root);
+        if (!route?.component) {
+            return Promise.resolve();
+        }
+        const [urlPath] = this.#router.url.split('?');
+        const key = SdUtilities.hash({
+            url: urlPath,
+            queryParams: { ...(route.queryParams || {}) },
+        });
+        if (this.tabs().some(tab => tab.key === key)) {
+            return Promise.resolve();
+        }
+        return this.#scheduleActivation(async () => {
+            if (this.tabs().some(tab => tab.key === key)) {
+                return;
+            }
+            this.#rootRoute = this.#router.routerState.root;
+            await this.#activeRoute(this.#router.url, route, {});
+        });
     };
+    tabTrackBy = (index, tab) => tab.key;
     #closeTab = (tab) => {
+        if (this.disabled())
+            return;
+        const currentTabs = this.tabs();
         const { isActive, key: activeKey } = tab;
         if (isActive) {
-            const activeIndex = this.tabs.findIndex(({ key }) => key === activeKey);
-            const nextTab = this.tabs[activeIndex + 1] || this.tabs[activeIndex - 1];
+            const activeIndex = currentTabs.findIndex(({ key }) => key === activeKey);
+            const nextTab = currentTabs[activeIndex + 1] || currentTabs[activeIndex - 1];
+            this.tabs.set(currentTabs.filter(({ key }) => key !== activeKey));
             if (nextTab) {
-                const { url: nextUrl } = nextTab;
-                const nextQueryParams = {
-                    ...(nextTab.queryParams || {}),
-                };
-                this.tabs = this.tabs.filter(({ key }) => key !== activeKey);
-                this.router.navigate([nextUrl], {
-                    queryParams: nextQueryParams,
-                    state: {
-                        switchTab: true,
-                    },
+                this.#router.navigate([nextTab.url], {
+                    queryParams: { ...(nextTab.queryParams || {}) },
+                    state: { switchTab: true },
                 });
             }
             else {
-                this.tabs = this.tabs.filter(({ key }) => key !== activeKey);
-                this.router.navigateByUrl('/', {
-                    state: {
-                        switchTab: true,
-                    },
-                });
+                this.#router.navigateByUrl('/', { state: { switchTab: true } });
             }
         }
         else {
-            this.tabs = this.tabs.filter(({ key }) => key !== tab.key);
-            this.tabRouterNav?.checkUI();
-            this.cd.markForCheck();
+            this.tabs.set(currentTabs.filter(({ key }) => key !== tab.key));
+            this.tabRouterNav()?.checkUI();
         }
     };
-    #activeRoute = async (fullUrl, route) => {
-        if (!route?.component) {
+    #activeRoute = async (fullUrl, route, state = {}) => {
+        if (this.disabled())
+            return;
+        if (!route?.component)
             return;
-        }
         const component = route.component;
-        const queryParams = {
-            ...(route.queryParams || {}),
-        };
-        const params = {
-            ...(route.params || {}),
-        };
-        const data = {
-            ...(route.data || {}),
-        };
+        const queryParams = { ...(route.queryParams || {}) };
+        const params = { ...(route.params || {}) };
+        const data = { ...(route.data || {}) };
         const [url] = fullUrl.split('?');
+        // Tab identity = hash(url + queryParams). Cùng key = cùng tab, không tạo lại.
         const key = SdUtilities.hash({ url, queryParams });
         let existedIndex = -1;
         let activatedIndex = -1;
-        this.tabs.forEach((tab, index) => {
+        const currentTabs = this.tabs();
+        // QUAN TRỌNG: scan READ-ONLY, KHÔNG mutate tab.isActive trong loop này.
+        //
+        // Lý do: NavigationEnd có thể fire nhiều lần cho 1 user-action (do nested outlets,
+        // redirect, hoặc Angular internal). Vì #activeRoute là async (await getBestInjector),
+        // 2 invocations có thể chạy concurrent và interleave với nhau.
+        //
+        // Nếu mutate tab.isActive = false ở đây, call thứ 2 sẽ thấy isActive đã bị call 1
+        // set false rồi → không tìm thấy active tab → activatedIndex stay -1 → splice bỏ qua
+        // → tab cũ không bị remove → xuất hiện duplicate tabs.
+        //
+        // Cách fix: chỉ ĐỌC isActive, sau đó dùng .map() ở dưới để tạo tab objects mới qua spread.
+        for (let i = 0; i < currentTabs.length; i++) {
+            const tab = currentTabs[i];
             if (tab.key === key) {
-                tab.isActive = true;
-                existedIndex = index;
+                existedIndex = i;
             }
-            else {
-                if (tab.isActive) {
-                    activatedIndex = index;
-                    this.tabRouterService.pushEvent(tab, SdTabDeactivated);
-                }
-                tab.isActive = false;
+            else if (tab.isActive) {
+                activatedIndex = i;
+                this.#tabRouterService.pushEvent(tab, SdTabDeactivated);
             }
-        });
-        const currentNavigation = this.router.getCurrentNavigation();
-        // Switch tab sẽ ko re-render lại trang
-        const switchTab = currentNavigation?.extras?.state?.['switchTab'];
-        // Replace tab sẽ close trang hiện tại
-        const replaceTab = currentNavigation?.extras?.state?.['replaceTab'];
-        if (existedIndex >= 0) {
-            const existedTab = this.tabs[existedIndex];
-            if (replaceTab && activatedIndex >= 0) {
-                if (activatedIndex >= 0) {
-                    this.tabs.splice(activatedIndex, 1);
+        }
+        const replaceTab = state['replaceTab'];
+        // Resolve injector phù hợp với route. Cần xử lý 3 trường hợp:
+        // - Standalone route (Angular đã set _injector trên routeConfig sau khi activate)
+        // - NgModule lazy load (cần createNgModule từ class)
+        // - Fallback: root injector
+        const getBestInjector = async (snapshot) => {
+            // Standalone route: Angular tự lưu environment injector trên routeConfig._injector
+            const routeInjector = snapshot._resolvedGui || snapshot.routeConfig?._injector;
+            if (routeInjector)
+                return routeInjector;
+            // NgModule lazy: phải gọi lại loadChildren() để lấy module class rồi createNgModule
+            const loadChildren = snapshot.parent?.routeConfig?.loadChildren;
+            if (typeof loadChildren === 'function') {
+                let loaded = await loadChildren();
+                if (isObservable(loaded)) {
+                    loaded = await lastValueFrom(loaded);
                 }
-            }
-            if (switchTab) {
-                this.tabRouterService.setCurrentTab(existedTab);
-                this.tabRouterService.pushEvent(existedTab, SdTabActivated);
-            }
-            else {
-                if (typeof route?.parent?.routeConfig?.loadChildren === 'function') {
-                    const module = (await route.parent.routeConfig.loadChildren());
-                    const moduleRef = createNgModule(module, this.injector);
-                    const activatedRoute = this.#getActivatedRoute(this.#rootRoute, component);
-                    const tab = {
-                        key,
-                        component,
-                        injector: new SdOutletInjector(activatedRoute, moduleRef),
-                        isActive: true,
-                        url,
-                        params,
-                        queryParams,
-                        data,
-                        tabInfoChanges: new Subject(),
-                    };
-                    this.tabs[this.tabs.indexOf(existedTab)] = tab;
+                // ES module có thể export default
+                if (loaded && typeof loaded === 'object' && 'default' in loaded) {
+                    loaded = loaded.default;
+                }
+                // Angular cũ: NgModuleFactory
+                if (loaded instanceof NgModuleFactory) {
+                    return loaded.create(this.#injector).injector;
+                }
+                // Angular mới: NgModule class. Bọc try/catch vì createNgModule throw nếu không phải NgModule.
+                if (typeof loaded === 'function' && !Array.isArray(loaded)) {
+                    try {
+                        return createNgModule(loaded, this.#injector).injector;
+                    }
+                    catch {
+                        return this.#injector;
+                    }
                 }
             }
+            return this.#injector;
+        };
+        const finalInjector = await getBestInjector(route);
+        // Refresh root sau await: lazy route tree có thể hoàn tất trong lúc resolve injector.
+        this.#rootRoute = this.#router.routerState.root;
+        const activatedRoute = this.#findActivatedRouteForSnapshot(this.#rootRoute, route);
+        const newTab = {
+            key,
+            component,
+            injector: new SdOutletInjector(activatedRoute, finalInjector),
+            isActive: true,
+            url,
+            params,
+            queryParams,
+            data,
+            tabInfoChanges: new Subject(),
+        };
+        // Tạo updatedTabs qua spread thay vì mutate (xem lý do ở for loop phía trên).
+        // Với tab có isActive không đổi: giữ nguyên reference (tránh trigger ngComponentOutlet
+        // re-evaluate không cần thiết). Với tab cần đổi isActive: tạo object mới qua spread,
+        // các nested fields (component, injector) vẫn giữ same reference nên component không bị recreate.
+        let updatedTabs = currentTabs.map(tab => {
+            if (tab.key === key)
+                return tab.isActive ? tab : { ...tab, isActive: true };
+            return tab.isActive ? { ...tab, isActive: false } : tab;
+        });
+        // replaceTab: thay vì mở tab mới song song, xoá tab đang active rồi mở tab mới ở cuối.
+        // Use case: từ tab "chi tiết" bấm "chỉnh sửa" với replaceTab → tab chi tiết bị xoá,
+        // tab chỉnh sửa thay thế (giữ số tab không tăng).
+        if (replaceTab && activatedIndex >= 0) {
+            updatedTabs = updatedTabs.filter((_, i) => i !== activatedIndex);
+        }
+        if (existedIndex >= 0) {
+            // Tab đã tồn tại (cùng url + queryParams) → CHỈ activate, KHÔNG thay tab object.
+            // Lý do: thay tab object = đổi reference của tab.injector → ngComponentOutlet recreate
+            // component → tab bị "reload" mỗi khi click lại hoặc navigate cùng URL.
+            //
+            // splice phía trên có thể đã shift index nếu activatedIndex < existedIndex.
+            const idx = replaceTab && activatedIndex >= 0 && activatedIndex < existedIndex
+                ? existedIndex - 1
+                : existedIndex;
+            this.#tabRouterService.setCurrentTab(updatedTabs[idx]);
+            this.#tabRouterService.pushEvent(updatedTabs[idx], SdTabActivated);
+            this.tabs.set(updatedTabs);
         }
         else {
-            if (typeof route?.parent?.routeConfig?.loadChildren === 'function') {
-                const module = (await route.parent.routeConfig.loadChildren());
-                const moduleRef = createNgModule(module, this.injector);
-                const activatedRoute = this.#getActivatedRoute(this.#rootRoute, component);
-                const tab = {
-                    key,
-                    component,
-                    injector: new SdOutletInjector(activatedRoute, moduleRef),
-                    isActive: true,
-                    url,
-                    params,
-                    queryParams,
-                    data,
-                    tabInfoChanges: new Subject(),
-                };
-                this.tabRouterService.setCurrentTab(tab);
-                if (activatedIndex >= 0 && replaceTab) {
-                    this.tabs.splice(activatedIndex, 1);
-                }
-                this.tabs.push(tab);
-                // if (existedIndex >= 0 && !switchTab) {
-                //   this.tabs[existedIndex] = tab;
-                // } else {
-                //   this.tabs.push(tab);
-                // }
-            }
-            this.tabRouterNav?.checkUI();
-            if (this.tabs.length > 10) {
-                this.sdNotifyService.warning('Bạn đã mở quá nhiều tab. Vui lòng tắt các tab không dùng để hệ thống hoạt động tốt hơn.');
+            // Tab chưa tồn tại → thêm mới ở cuối.
+            this.#tabRouterService.setCurrentTab(newTab);
+            this.tabs.set([...updatedTabs, newTab]);
+            if (this.tabs().length > 30) {
+                this.#sdNotifyService.warning(this.#i18n.t('core.component.tab-router.too-many-tabs'));
             }
-            // if (this.tabs.length > 15) {
-            //   this.tabs.splice(0, this.tabs.length - 10);
-            // }
         }
-        // if (existedIndex >= 0 && switchTab) {
-        //   const existedTab = this.tabs[existedIndex];
-        //   this.tabRouterService.setCurrentTab(existedTab);
-        //   this.tabRouterService.pushEvent(existedTab, SdTabActivated);
-        // } else {
-        //   if (typeof route?.parent?.routeConfig?.loadChildren === 'function') {
-        //     const module = await route.parent.routeConfig.loadChildren();
-        //     const factory = await this.compiler.compileModuleAsync(module);
-        //     const injector = factory.create(this.injector);
-        //     const activatedRoute = this.#getActivatedRoute(
-        //       this.#rootRoute,
-        //       component
-        //     );
-        //     const tab = {
-        //       key,
-        //       component,
-        //       injector: new SdOutletInjector(activatedRoute, injector),
-        //       isActive: true,
-        //       name: url,
-        //       url,
-        //       params,
-        //       queryParams,
-        //       data
-        //     };
-        //     this.tabRouterService.setCurrentTab(tab);
-        //     if (activatedIndex >= 0 && replaceTab) {
-        //       this.tabs.splice(activatedIndex, 1);
-        //     }
-        //     if (existedIndex >= 0 && !switchTab) {
-        //       this.tabs[existedIndex] = tab;
-        //     } else {
-        //       this.tabs.push(tab);
-        //     }
-        //   }
-        //   this.tabRouterNav?.checkUI();
-        //   if (this.tabs.length > 10) {
-        //     this.sdNotifyService.notify.warning(
-        //       'Bạn đã mở quá nhiều tab. Vui lòng tắt các tab không dùng để hệ thống hoạt động tốt hơn.'
-        //     );
-        //   }
-        //   if (this.tabs.length > 15) {
-        //     this.tabs.splice(0, this.tabs.length - 10);
-        //   }
-        // }
-        this.cd.markForCheck();
+        this.tabRouterNav()?.checkUI();
     };
-    #getActivatedRouteSnapshot = (activatedRouteSnapshot) => {
-        if (!activatedRouteSnapshot) {
-            return null;
-        }
-        while (activatedRouteSnapshot.firstChild) {
-            activatedRouteSnapshot = activatedRouteSnapshot.firstChild;
-        }
-        return activatedRouteSnapshot;
+    // Lần xuống deepest firstChild để lấy snapshot của route lá (route thực sự render component).
+    #getActivatedRouteSnapshot = (snapshot) => {
+        let node = snapshot;
+        while (node.firstChild)
+            node = node.firstChild;
+        return node;
     };
-    #getActivatedRoute = (activatedRoute, component) => {
-        if (!activatedRoute) {
-            return null;
-        }
-        if (activatedRoute.component && activatedRoute.component === component) {
+    // DFS match leaf snapshot → ActivatedRoute instance (ổn định hơn so với so sánh component class).
+    #findActivatedRouteForSnapshot = (activatedRoute, targetSnapshot) => {
+        if (activatedRoute.snapshot === targetSnapshot) {
             return activatedRoute;
         }
-        while (activatedRoute.firstChild) {
-            activatedRoute = activatedRoute.firstChild;
-            if (activatedRoute.component && activatedRoute.component === component) {
-                return activatedRoute;
+        for (const child of activatedRoute.children) {
+            const result = this.#findActivatedRouteForSnapshot(child, targetSnapshot);
+            if (result) {
+                return result;
             }
         }
         return null;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterOutletComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SdTabDecoratorService }, { token: SdTabRouterService }, { token: i4.SdNotifyService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdTabRouterOutletComponent, isStandalone: true, selector: "sd-tab-router-outlet", viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true }], ngImport: i0, template: "<sd-tab-router-nav [tabs]=\"tabs\" #tabRouterNav></sd-tab-router-nav>\n\n<div class=\"tab-router__list\">\n  <ng-container *ngFor=\"let tab of tabs; trackBy: tabTrackBy\">\n    <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n      <div class=\"tab-router__content\">\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:calc(100vh - 64px)}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdTabRouterNavComponent, selector: "sd-tab-router-nav", inputs: ["tabs"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdTabRouterOutletComponent, isStandalone: true, selector: "sd-tab-router-outlet", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disabled()) {\r\n  <div class=\"tab-router__disabled-outlet\">\r\n    <router-outlet></router-outlet>\r\n  </div>\r\n} @else {\r\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\r\n  <div class=\"tab-router__list\">\r\n    @for (tab of tabs(); track tab.key) {\r\n      <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\r\n        <div class=\"tab-router__content\">\r\n          <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <div class=\"tab-router__empty\">\r\n      </div>\r\n    }\r\n  </div>\r\n}", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;height:100vh}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1;min-height:0}.tab-router__disabled-outlet{flex:1;width:100%;min-height:0;overflow:auto}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SdTabRouterNavComponent, selector: "sd-tab-router-nav", inputs: ["tabs"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, SdTabRouterNavComponent], template: "<sd-tab-router-nav [tabs]=\"tabs\" #tabRouterNav></sd-tab-router-nav>\n\n<div class=\"tab-router__list\">\n  <ng-container *ngFor=\"let tab of tabs; trackBy: tabTrackBy\">\n    <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n      <div class=\"tab-router__content\">\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:calc(100vh - 64px)}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SdTabDecoratorService }, { type: SdTabRouterService }, { type: i4.SdNotifyService }], propDecorators: { tabRouterNav: [{
-                type: ViewChild,
-                args: ['tabRouterNav']
-            }] } });
+            args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, RouterOutlet, SdTabRouterNavComponent], template: "@if (disabled()) {\r\n  <div class=\"tab-router__disabled-outlet\">\r\n    <router-outlet></router-outlet>\r\n  </div>\r\n} @else {\r\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\r\n  <div class=\"tab-router__list\">\r\n    @for (tab of tabs(); track tab.key) {\r\n      <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\r\n        <div class=\"tab-router__content\">\r\n          <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <div class=\"tab-router__empty\">\r\n      </div>\r\n    }\r\n  </div>\r\n}", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;height:100vh}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1;min-height:0}.tab-router__disabled-outlet{flex:1;width:100%;min-height:0;overflow:auto}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+// Custom Injector cho từng tab: override ActivatedRoute thành route của TAB ĐÓ
+// (không phải route hiện tại của router). Nếu không override, mọi tab sẽ inject ActivatedRoute
+// của route đang active → component cũ trong tab inactive nhận data sai khi user navigate.
 class SdOutletInjector {
     route;
-    parent;
-    constructor(route, 
-    // private childContexts: ChildrenOutletContexts,
-    parent) {
+    parentInjector;
+    constructor(route, parentInjector) {
         this.route = route;
-        this.parent = parent;
+        this.parentInjector = parentInjector;
     }
     get(token, notFoundValue) {
-        if (token === ActivatedRoute && this.route) {
-            return this.route;
+        if (token === ActivatedRoute) {
+            return this.route || notFoundValue;
         }
-        // if (token === ChildrenOutletContexts) {
-        //   return this.childContexts;
-        // }
-        return this.parent.injector.get(token, notFoundValue);
+        return this.parentInjector.get(token, notFoundValue);
     }
 }