@sdcorejs/angular 19.1.2 → 19.1.4

package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-side-drawer.mjs","sources":["../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sdcorejs-angular/components/side-drawer/sdcorejs-angular-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n  ApplicationRef,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  Injector,\n  ViewContainerRef,\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n  selector: 'sd-side-drawer',\n  templateUrl: './side-drawer.component.html',\n  styleUrl: './side-drawer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, PortalModule],\n})\nexport class SdSideDrawer {\n  id = `I${Utilities.generateUuid()}`;\n\n  portal = viewChild.required(CdkPortal);\n\n  title = input<string>('');\n  width = input<string>('480px');\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n\n  // Custom CSS class added to the root side-drawer container\n  drawerClass = input<any>('');\n\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined));\n\n  sdClosed = output<void>();\n\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n\n  readonly #isOpenedSignal = signal(false);\n  readonly #isLoadingSignal = signal(false);\n  readonly isOpened = this.#isOpenedSignal.asReadonly();\n  readonly isLoading = this.#isLoadingSignal.asReadonly();\n  readonly dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));\n  readonly dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));\n\n  isHovered$!: Observable<boolean>;\n  #destroy$ = new Subject<void>();\n  #previousBodyOverflow: string | null = null;\n\n  #viewContainerRef = inject(ViewContainerRef);\n  #ar = inject(ApplicationRef);\n  #injector = inject(Injector);\n  #ref = inject(ChangeDetectorRef);\n  #loadingService = inject(SdLoadingService);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\n    afterNextRender(() => {\n      // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\n      const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n\n      // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\n      this.#setupHoverSubscription();\n    });\n\n    // Thay thế ngOnDestroy bằng logic destroy trực tiếp\n    this.#destroyRef.onDestroy(() => {\n      this.#destroy$.next();\n      this.#destroy$.complete();\n\n      if (this.#embeddedViewRef) {\n        this.#embeddedViewRef.destroy();\n      }\n\n      if (this.#isOpenedSignal()) {\n        if (this.#previousBodyOverflow !== null) {\n          document.body.style.overflow = this.#previousBodyOverflow;\n        } else {\n          document.body.style.overflow = '';\n        }\n      }\n    });\n  }\n\n  open = () => {\n    this.#ref.markForCheck();\n    this.#isOpenedSignal.set(true);\n\n    // Chặn scroll ở document body\n    this.#previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  };\n\n  close = () => {\n    this.#ref.markForCheck();\n    this.#isOpenedSignal.set(false);\n    this.sdClosed.emit();\n    this.stopLoading();\n\n    // Khôi phục lại scroll ở document body\n    if (this.#previousBodyOverflow !== null) {\n      document.body.style.overflow = this.#previousBodyOverflow;\n      this.#previousBodyOverflow = null;\n    } else {\n      document.body.style.overflow = '';\n    }\n  };\n\n  startLoading = () => {\n    this.#isLoadingSignal.set(true);\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  stopLoading = () => {\n    this.#isLoadingSignal.set(false);\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  preventScroll = (event: Event) => {\n    event.preventDefault();\n  };\n\n  #setupHoverSubscription(): void {\n    if (!this.#embeddedViewRef) return;\n\n    // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\n    const rootNodes = this.#embeddedViewRef.rootNodes;\n    const element = rootNodes.find(\n      node => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\n    );\n\n    if (!element) {\n      console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\n      return;\n    }\n\n    // 4. Gắn event listeners trực tiếp lên element thật\n    const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\n    const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\n\n    this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));\n  }\n}\n","<ng-template cdkPortal>\n  @let _isOpened = isOpened();\n  <div\n    [id]=\"id\"\n    class=\"sd-side-drawer\"\n    [ngStyle]=\"{ width: width() }\"\n    [ngClass]=\"drawerClass()\"\n    [class.sd-side-drawer-active]=\"_isOpened\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\"\n    [attr.data-loading]=\"dataLoading()\"\n    #drawerContainer>\n    @if (_isOpened) {\n      <ng-container>\n        <div class=\"sd-side-drawer-header\">\n          <div class=\"sd-side-drawer-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-side-drawer-title\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n        @if (_isOpened) {\n          <div class=\"sd-side-drawer-body\">\n            <div class=\"sd-side-drawer-content\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n        <div class=\"sd-side-drawer-footer\">\n          <div class=\"sd-side-drawer-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n          <div class=\"sd-side-drawer-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n        </div>\n      </ng-container>\n    }\n  </div>\n  @if (_isOpened) {\n    <div\n      aria-hidden=\"true\"\n      class=\"sd-side-drawer-backdrop\"\n      (click)=\"disableBackdropClose() ? null : close()\"\n      (wheel)=\"preventScroll($event)\"\n      (touchmove)=\"preventScroll($event)\"></div>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-components-side-drawer.mjs","sources":["../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sdcorejs-angular/components/side-drawer/sdcorejs-angular-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n  ApplicationRef,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  Injector,\n  ViewContainerRef,\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\nexport type SdSideDrawerBeforeClose = () => boolean | Promise<boolean>;\n\n@Component({\n  selector: 'sd-side-drawer',\n  templateUrl: './side-drawer.component.html',\n  styleUrl: './side-drawer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, PortalModule],\n})\nexport class SdSideDrawer {\n  id = `I${Utilities.generateUuid()}`;\n\n  portal = viewChild.required(CdkPortal);\n\n  title = input<string>('');\n  width = input<string>('480px');\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  beforeClose = input<SdSideDrawerBeforeClose | undefined>(undefined);\n\n  // Custom CSS class added to the root side-drawer container\n  drawerClass = input<any>('');\n\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined));\n\n  sdClosed = output<void>();\n  sdCloseError = output<unknown>();\n\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n\n  readonly #isOpenedSignal = signal(false);\n  readonly #isLoadingSignal = signal(false);\n  readonly isOpened = this.#isOpenedSignal.asReadonly();\n  readonly isLoading = this.#isLoadingSignal.asReadonly();\n  readonly dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));\n  readonly dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));\n\n  isHovered$!: Observable<boolean>;\n  #destroy$ = new Subject<void>();\n  #previousBodyOverflow: string | null = null;\n  #closeRequest?: Promise<boolean>;\n\n  #viewContainerRef = inject(ViewContainerRef);\n  #ar = inject(ApplicationRef);\n  #injector = inject(Injector);\n  #ref = inject(ChangeDetectorRef);\n  #loadingService = inject(SdLoadingService);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\n    afterNextRender(() => {\n      // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\n      const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n\n      // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\n      this.#setupHoverSubscription();\n    });\n\n    // Thay thế ngOnDestroy bằng logic destroy trực tiếp\n    this.#destroyRef.onDestroy(() => {\n      this.#destroy$.next();\n      this.#destroy$.complete();\n\n      if (this.#embeddedViewRef) {\n        this.#embeddedViewRef.destroy();\n      }\n\n      if (this.#isOpenedSignal()) {\n        if (this.#previousBodyOverflow !== null) {\n          document.body.style.overflow = this.#previousBodyOverflow;\n        } else {\n          document.body.style.overflow = '';\n        }\n      }\n    });\n  }\n\n  open = () => {\n    this.#ref.markForCheck();\n    this.#isOpenedSignal.set(true);\n\n    // Chặn scroll ở document body\n    this.#previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  };\n\n  close = () => {\n    if (this.beforeClose()) {\n      void this.requestClose();\n      return;\n    }\n    this.forceClose();\n  };\n\n  requestClose = (): Promise<boolean> => {\n    const guard = this.beforeClose();\n    if (!guard) {\n      this.forceClose();\n      return Promise.resolve(true);\n    }\n    if (this.#closeRequest) return this.#closeRequest;\n\n    const request = Promise.resolve()\n      .then(() => guard())\n      .then(canClose => {\n        if (!canClose) return false;\n        this.forceClose();\n        return true;\n      })\n      .catch((error: unknown) => {\n        this.sdCloseError.emit(error);\n        return false;\n      });\n\n    this.#closeRequest = request;\n    void request.finally(() => {\n      if (this.#closeRequest === request) this.#closeRequest = undefined;\n    });\n    return request;\n  };\n\n  forceClose = () => {\n    this.#ref.markForCheck();\n    this.#isOpenedSignal.set(false);\n    this.sdClosed.emit();\n    this.stopLoading();\n\n    // Khôi phục lại scroll ở document body\n    if (this.#previousBodyOverflow !== null) {\n      document.body.style.overflow = this.#previousBodyOverflow;\n      this.#previousBodyOverflow = null;\n    } else {\n      document.body.style.overflow = '';\n    }\n  };\n\n  startLoading = () => {\n    this.#isLoadingSignal.set(true);\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  stopLoading = () => {\n    this.#isLoadingSignal.set(false);\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  preventScroll = (event: Event) => {\n    event.preventDefault();\n  };\n\n  #setupHoverSubscription(): void {\n    if (!this.#embeddedViewRef) return;\n\n    // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\n    const rootNodes = this.#embeddedViewRef.rootNodes;\n    const element = rootNodes.find(\n      node => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\n    );\n\n    if (!element) {\n      console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\n      return;\n    }\n\n    // 4. Gắn event listeners trực tiếp lên element thật\n    const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\n    const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\n\n    this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));\n  }\n}\n","<ng-template cdkPortal>\n  @let _isOpened = isOpened();\n  <div\n    [id]=\"id\"\n    class=\"sd-side-drawer\"\n    [ngStyle]=\"{ width: width() }\"\n    [ngClass]=\"drawerClass()\"\n    [class.sd-side-drawer-active]=\"_isOpened\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\"\n    [attr.data-loading]=\"dataLoading()\"\n    #drawerContainer>\n    @if (_isOpened) {\n      <ng-container>\n        <div class=\"sd-side-drawer-header\">\n          <div class=\"sd-side-drawer-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-side-drawer-title\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n        @if (_isOpened) {\n          <div class=\"sd-side-drawer-body\">\n            <div class=\"sd-side-drawer-content\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n        <div class=\"sd-side-drawer-footer\">\n          <div class=\"sd-side-drawer-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n          <div class=\"sd-side-drawer-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n        </div>\n      </ng-container>\n    }\n  </div>\n  @if (_isOpened) {\n    <div\n      aria-hidden=\"true\"\n      class=\"sd-side-drawer-backdrop\"\n      (click)=\"disableBackdropClose() ? null : close()\"\n      (wheel)=\"preventScroll($event)\"\n      (touchmove)=\"preventScroll($event)\"></div>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-tab-router.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, 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 { InjectionToken, Injectable, inject, Pipe, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, viewChild, input, ElementRef, HostListener, booleanAttribute, signal, Injector, afterNextRender, NgModuleFactory, createNgModule } from '@angular/core';
+import { Router, RoutesRecognized, NavigationEnd, NavigationSkipped, NavigationCancel, NavigationError, NavigationSkippedCode, RouterOutlet, ActivatedRoute } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { BehaviorSubject, Subscription, from, isObservable, lastValueFrom, Subject } from 'rxjs';
-import { debounceTime, startWith, filter, concatMap, take } from 'rxjs/operators';
+import { debounceTime, startWith, filter, map, concatMap, take } from 'rxjs/operators';
 import { SdNotifyService } from '@sdcorejs/angular/services/notify';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { Utilities } from '@sdcorejs/utils/fns';
@@ -117,10 +116,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class SdTabDecoratorService {
     static tabRouterService = new BehaviorSubject(undefined);
-    constructor(tabRouterService) {
+    constructor() {
+        const tabRouterService = inject(SdTabRouterService);
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabDecoratorService, deps: [], 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: [{
@@ -128,13 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: SdTabRouterService }] });
+        }], ctorParameters: () => [] });
 
 class SdTabInfoPipe {
-    tabRouterService;
-    constructor(tabRouterService) {
-        this.tabRouterService = tabRouterService;
-    }
+    tabRouterService = inject(SdTabRouterService);
+    constructor() { }
     transform(tabInfo, tab) {
         if (tabInfo) {
             return tabInfo;
@@ -155,7 +153,7 @@ class SdTabInfoPipe {
             icon: undefined,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabInfoPipe, deps: [], 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.21", ngImport: i0, type: SdTabInfoPipe, decorators: [{
@@ -164,20 +162,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     name: 'sdTabInfo',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: SdTabRouterService }] });
+        }], ctorParameters: () => [] });
 
 class SdTabRouterItemComponent {
-    cdRef;
-    tabRouterService;
-    router;
+    cdRef = inject(ChangeDetectorRef);
+    tabRouterService = inject(SdTabRouterService);
+    router = inject(Router);
     tab;
     #subsctiption = new Subscription();
     tabInfo;
-    constructor(cdRef, tabRouterService, router) {
-        this.cdRef = cdRef;
-        this.tabRouterService = tabRouterService;
-        this.router = router;
-    }
+    constructor() { }
     ngOnInit() {
         this.#subsctiption.add(this.tabRouterService.events.pipe(debounceTime(100)).subscribe(() => {
             this.cdRef.markForCheck();
@@ -219,13 +213,13 @@ class SdTabRouterItemComponent {
     #closeTab = () => {
         this.tabRouterService.close(this.tab);
     };
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabRouterItemComponent, deps: [], 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\n  [href]=\"[tab.url]\"\n  class=\"tab-router__item d-flex align-items-center gap-8\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (click)=\"onTabClick($event)\"\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\"\n      (click)=\"onTabClick($event)\"></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      <sd-icon aria-hidden=\"true\" fontIcon=\"close\"></sd-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 sd-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 sd-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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { 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.21", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, SdBadge, SdTabInfoPipe], template: "<a\n  [href]=\"[tab.url]\"\n  class=\"tab-router__item d-flex align-items-center gap-8\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (click)=\"onTabClick($event)\"\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\"\n      (click)=\"onTabClick($event)\"></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      <sd-icon aria-hidden=\"true\" fontIcon=\"close\"></sd-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 sd-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 sd-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: [{
+        }], ctorParameters: () => [], propDecorators: { tab: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -260,11 +254,11 @@ class SdTabRouterNavComponent {
         moveItemInArray(this.tabs(), event.previousIndex, event.currentIndex);
     };
     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\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  @for (tab of tabs(); track tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\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: "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 });
+    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\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  @for (tab of tabs(); track tab.injector ?? tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\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: "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.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  @for (tab of tabs(); track tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\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"] }]
+            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  @for (tab of tabs(); track tab.injector ?? tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\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"] }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -284,10 +278,8 @@ class SdTabRouterOutletComponent {
     #tabDecoratorService = inject(SdTabDecoratorService);
     #rootRoute;
     #subscription = new Subscription();
-    // 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 = {};
+    // Lưu state theo navigation id để các navigation chồng lấn không ghi đè lẫn nhau.
+    #pendingNavigationStates = new Map();
     // Serialize mọi #activeRoute (router events + initial sync) để tránh race tạo duplicate tab.
     #activationQueue = Promise.resolve();
     constructor() {
@@ -296,13 +288,23 @@ class SdTabRouterOutletComponent {
         // 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.
+        // Navigation thành công cần CẢ HAI event vì mỗi event chứa data ở 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), 
+        // Các terminal event khác chỉ xử lý same-URL forceReload hoặc dọn state theo navigation id.
+        filter((event) => event instanceof RoutesRecognized ||
+            event instanceof NavigationEnd ||
+            event instanceof NavigationSkipped ||
+            event instanceof NavigationCancel ||
+            event instanceof NavigationError), 
+        // Chụp getCurrentNavigation đồng bộ vì concatMap có thể chạy sau khi Angular đã xoá navigation hiện tại.
+        map((event) => ({
+            event,
+            navigationState: this.#router.getCurrentNavigation()?.extras?.state ?? {},
+        })), 
         // 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))))
+        concatMap(context => from(this.#handleEvent(context))))
             .subscribe());
         this.#subscription.add(this.#tabRouterService.actions.subscribe((event) => {
             if (this.disabled())
@@ -319,31 +321,45 @@ class SdTabRouterOutletComponent {
     }
     ngOnDestroy() {
         this.#subscription.unsubscribe();
+        this.#pendingNavigationStates.clear();
     }
     #scheduleActivation = (task) => {
         const run = this.#activationQueue.then(task);
         this.#activationQueue = run.catch(() => undefined);
         return run;
     };
-    #handleEvent = async (event) => {
+    #handleEvent = async ({ event, navigationState }) => {
         if (this.disabled()) {
-            this.#pendingNavigationState = {};
+            this.#pendingNavigationStates.clear();
             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 ?? {};
+            this.#pendingNavigationStates.set(event.id, navigationState);
+            return;
+        }
+        if (event instanceof NavigationCancel || event instanceof NavigationError) {
+            this.#pendingNavigationStates.delete(event.id);
             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 = {};
+        let state;
+        let fullUrl;
+        if (event instanceof NavigationSkipped) {
+            this.#pendingNavigationStates.delete(event.id);
+            if (event.code !== NavigationSkippedCode.IgnoredSameUrlNavigation || navigationState['forceReload'] !== true) {
+                return;
+            }
+            state = navigationState;
+            fullUrl = event.url;
+        }
+        else {
+            state = this.#pendingNavigationStates.get(event.id) ?? navigationState;
+            this.#pendingNavigationStates.delete(event.id);
+            fullUrl = event.urlAfterRedirects || event.url;
+        }
         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);
+            await this.#activeRoute(fullUrl, route, state);
         });
     };
     // Bù initial navigation nếu NavigationEnd đã fire trước khi outlet subscribe.
@@ -382,7 +398,7 @@ class SdTabRouterOutletComponent {
                 canClose = typeof result === 'boolean' ? result : await result;
             }
             catch {
-                canClose = true;
+                canClose = false;
             }
             if (!canClose)
                 return;
@@ -418,7 +434,7 @@ class SdTabRouterOutletComponent {
         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.
+        // Tab identity = hash(url + queryParams). Cùng key mặc định giữ tab cũ; forceReload mới tạo lại.
         const key = Utilities.hash({ url, queryParams });
         let existedIndex = -1;
         let activatedIndex = -1;
@@ -445,6 +461,7 @@ class SdTabRouterOutletComponent {
             }
         }
         const replaceTab = state['replaceTab'];
+        const forceReload = state['forceReload'] === true;
         // 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)
@@ -514,15 +531,22 @@ class SdTabRouterOutletComponent {
             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.
+            // Mặc định tab đã tồn tại chỉ được activate, không thay tab object. forceReload là nhánh
+            // explicit duy nhất thay SdTab + injector để body và nav item được tạo lại.
             //
             // 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);
+            if (forceReload) {
+                updatedTabs = updatedTabs.map((tab, index) => (index === idx ? newTab : tab));
+                this.#tabRouterService.setCurrentTab(newTab);
+                this.#tabRouterService.pushEvent(newTab, SdTabActivated);
+                this.tabs.set(updatedTabs);
+            }
+            else {
+                this.#tabRouterService.setCurrentTab(updatedTabs[idx]);
+                this.#tabRouterService.pushEvent(updatedTabs[idx], SdTabActivated);
+                this.tabs.set(updatedTabs);
+            }
         }
         else {
             // Tab chưa tồn tại → thêm mới ở cuối.
@@ -555,11 +579,11 @@ class SdTabRouterOutletComponent {
         return null;
     };
     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()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.key) {\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    } @empty {\n      <div class=\"tab-router__empty\">\n      </div>\n    }\n  </div>\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: 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"] }] });
+    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()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.injector ?? tab.key) {\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    } @empty {\n      <div class=\"tab-router__empty\"></div>\n    }\n  </div>\n}\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: 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.21", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatTooltipModule, RouterOutlet, SdTabRouterNavComponent], template: "@if (disabled()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.key) {\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    } @empty {\n      <div class=\"tab-router__empty\">\n      </div>\n    }\n  </div>\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"] }]
+            args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatTooltipModule, RouterOutlet, SdTabRouterNavComponent], template: "@if (disabled()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.injector ?? tab.key) {\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    } @empty {\n      <div class=\"tab-router__empty\"></div>\n    }\n  </div>\n}\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