@sdcorejs/angular 21.1.2 → 21.1.4

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

@@ -17,11 +17,13 @@ class SdSideDrawer {
     width = input('480px', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disableBackdropClose = input(false, { ...(ngDevMode ? { debugName: "disableBackdropClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    beforeClose = input(undefined, ...(ngDevMode ? [{ debugName: "beforeClose" }] : /* istanbul ignore next */ []));
     // Custom CSS class added to the root side-drawer container
     drawerClass = input('', ...(ngDevMode ? [{ debugName: "drawerClass" }] : /* istanbul ignore next */ []));
     autoIdInput = input(undefined, { ...(ngDevMode ? { debugName: "autoIdInput" } : /* istanbul ignore next */ {}), alias: 'autoId' });
     autoId = computed(() => (this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
     sdClosed = output();
+    sdCloseError = output();
     #embeddedViewRef;
     #isOpenedSignal = signal(false, ...(ngDevMode ? [{ debugName: "#isOpenedSignal" }] : /* istanbul ignore next */ []));
     #isLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "#isLoadingSignal" }] : /* istanbul ignore next */ []));
@@ -32,6 +34,7 @@ class SdSideDrawer {
     isHovered$;
     #destroy$ = new Subject();
     #previousBodyOverflow = null;
+    #closeRequest;
     #viewContainerRef = inject(ViewContainerRef);
     #ar = inject(ApplicationRef);
     #injector = inject(Injector);
@@ -72,6 +75,40 @@ class SdSideDrawer {
         document.body.style.overflow = 'hidden';
     };
     close = () => {
+        if (this.beforeClose()) {
+            void this.requestClose();
+            return;
+        }
+        this.forceClose();
+    };
+    requestClose = () => {
+        const guard = this.beforeClose();
+        if (!guard) {
+            this.forceClose();
+            return Promise.resolve(true);
+        }
+        if (this.#closeRequest)
+            return this.#closeRequest;
+        const request = Promise.resolve()
+            .then(() => guard())
+            .then(canClose => {
+            if (!canClose)
+                return false;
+            this.forceClose();
+            return true;
+        })
+            .catch((error) => {
+            this.sdCloseError.emit(error);
+            return false;
+        });
+        this.#closeRequest = request;
+        void request.finally(() => {
+            if (this.#closeRequest === request)
+                this.#closeRequest = undefined;
+        });
+        return request;
+    };
+    forceClose = () => {
         this.#ref.markForCheck();
         this.#isOpenedSignal.set(false);
         this.sdClosed.emit();
@@ -113,12 +150,12 @@ class SdSideDrawer {
         this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<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", styles: [".sd-side-drawer{--sd-side-drawer-inset: 10px;--sd-side-drawer-radius: var(--sd-overlay-radius, 24px);--sd-side-drawer-surface: var(--sd-surface, #fff);--sd-side-drawer-border: var(--sd-border, #dde0e5);--sd-side-drawer-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);position:fixed;right:var(--sd-side-drawer-inset);top:var(--sd-side-drawer-inset);bottom:var(--sd-side-drawer-inset);max-width:calc(100vw - var(--sd-side-drawer-inset) - var(--sd-side-drawer-inset));background-color:var(--sd-side-drawer-surface);color:var(--sd-text);z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(calc(100% + var(--sd-side-drawer-inset)),0,0);transition:all .3s ease-in-out;pointer-events:none;overflow:hidden;border-radius:var(--sd-side-drawer-radius);box-shadow:var(--sd-side-drawer-shadow)}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-side-drawer-header-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;min-width:0}.sd-side-drawer-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-side-drawer-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-side-drawer-close-btn:active{background:var(--sd-border)}.sd-side-drawer-close-btn:focus{outline:none}.sd-side-drawer-close-btn:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-side-drawer-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid var(--sd-side-drawer-border);padding:16px;background-color:var(--sd-side-drawer-surface);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-footer-left,.sd-side-drawer-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-side-drawer-footer-left{flex:1 1 auto}.sd-side-drawer-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-side-drawer-footer-left:empty,.sd-side-drawer-footer-right:empty{display:none}.sd-side-drawer-footer:has(.sd-side-drawer-footer-left:empty):has(.sd-side-drawer-footer-right:empty){display:none}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdCloseError: "sdCloseError" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<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", styles: [".sd-side-drawer{--sd-side-drawer-inset: 10px;--sd-side-drawer-radius: var(--sd-overlay-radius, 24px);--sd-side-drawer-surface: var(--sd-surface, #fff);--sd-side-drawer-border: var(--sd-border, #dde0e5);--sd-side-drawer-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);position:fixed;right:var(--sd-side-drawer-inset);top:var(--sd-side-drawer-inset);bottom:var(--sd-side-drawer-inset);max-width:calc(100vw - var(--sd-side-drawer-inset) - var(--sd-side-drawer-inset));background-color:var(--sd-side-drawer-surface);color:var(--sd-text);z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(calc(100% + var(--sd-side-drawer-inset)),0,0);transition:all .3s ease-in-out;pointer-events:none;overflow:hidden;border-radius:var(--sd-side-drawer-radius);box-shadow:var(--sd-side-drawer-shadow)}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-side-drawer-header-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;min-width:0}.sd-side-drawer-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-side-drawer-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-side-drawer-close-btn:active{background:var(--sd-border)}.sd-side-drawer-close-btn:focus{outline:none}.sd-side-drawer-close-btn:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-side-drawer-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid var(--sd-side-drawer-border);padding:16px;background-color:var(--sd-side-drawer-surface);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-footer-left,.sd-side-drawer-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-side-drawer-footer-left{flex:1 1 auto}.sd-side-drawer-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-side-drawer-footer-left:empty,.sd-side-drawer-footer-right:empty{display:none}.sd-side-drawer-footer:has(.sd-side-drawer-footer-left:empty):has(.sd-side-drawer-footer-right:empty){display:none}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSideDrawer, decorators: [{
             type: Component,
             args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, PortalModule], template: "<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", styles: [".sd-side-drawer{--sd-side-drawer-inset: 10px;--sd-side-drawer-radius: var(--sd-overlay-radius, 24px);--sd-side-drawer-surface: var(--sd-surface, #fff);--sd-side-drawer-border: var(--sd-border, #dde0e5);--sd-side-drawer-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);position:fixed;right:var(--sd-side-drawer-inset);top:var(--sd-side-drawer-inset);bottom:var(--sd-side-drawer-inset);max-width:calc(100vw - var(--sd-side-drawer-inset) - var(--sd-side-drawer-inset));background-color:var(--sd-side-drawer-surface);color:var(--sd-text);z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(calc(100% + var(--sd-side-drawer-inset)),0,0);transition:all .3s ease-in-out;pointer-events:none;overflow:hidden;border-radius:var(--sd-side-drawer-radius);box-shadow:var(--sd-side-drawer-shadow)}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-side-drawer-header-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;min-width:0}.sd-side-drawer-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-side-drawer-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-side-drawer-close-btn:active{background:var(--sd-border)}.sd-side-drawer-close-btn:focus{outline:none}.sd-side-drawer-close-btn:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-side-drawer-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid var(--sd-side-drawer-border);padding:16px;background-color:var(--sd-side-drawer-surface);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-side-drawer-footer-left,.sd-side-drawer-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-side-drawer-footer-left{flex:1 1 auto}.sd-side-drawer-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-side-drawer-footer-left:empty,.sd-side-drawer-footer-right:empty{display:none}.sd-side-drawer-footer:has(.sd-side-drawer-footer-left:empty):has(.sd-side-drawer-footer-right:empty){display:none}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { portal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortal), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], drawerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerClass", required: false }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { portal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortal), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], beforeClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeClose", required: false }] }], drawerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerClass", required: false }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }], sdCloseError: [{ type: i0.Output, args: ["sdCloseError"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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.#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.#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: "21.2.17", 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: "21.2.17", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTabDecoratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTabDecoratorService, decorators: [{
@@ -128,13 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: "21.2.17", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTabInfoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SdTabInfoPipe, isStandalone: true, name: "sdTabInfo" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTabInfoPipe, decorators: [{
@@ -164,20 +162,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: "21.2.17", 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: "21.2.17", ngImport: i0, type: SdTabRouterItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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: "21.2.17", 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: "21.2.17", ngImport: i0, type: SdTabRouterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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", "cdkDropListHasAnchor"], 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: "21.2.17", 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", "cdkDropListHasAnchor"], 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: "21.2.17", 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: { tabRouterNav: [{ type: i0.ViewChild, args: ['tabRouterNav', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], 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;
         }
-        // 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 = {};
+        if (event instanceof NavigationCancel || event instanceof NavigationError) {
+            this.#pendingNavigationStates.delete(event.id);
+            return;
+        }
+        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: "21.2.17", ngImport: i0, type: SdTabRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], 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: "21.2.17", 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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], 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: "21.2.17", 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: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabRouterNav: [{ type: i0.ViewChild, args: ['tabRouterNav', { isSignal: true }] }] } });
 // 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