npm - @sdcorejs/angular - Versions diffs - 19.1.5 → 19.2.0 - Mend

@sdcorejs/angular 19.1.5 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/fesm2022/sdcorejs-angular-components-section.mjs CHANGED Viewed

@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
+// why: id tăng dần để nối aria-controls từ header sang body — mỗi instance cần một id duy nhất.
+let sectionBodyIdSeq = 0;
 class SdSection {
     #el = inject(ElementRef);
     title = input(undefined);
@@ -11,6 +13,8 @@ class SdSection {
     collapsed = model(false, { alias: 'collapsed' });
     collapsible = input(false, { transform: booleanAttribute });
     hideHeader = input(false, { transform: booleanAttribute });
+    /** Id của vùng body, để header `aria-controls` trỏ tới khi section collapsible. */
+    bodyId = `sd-section-body-${++sectionBodyIdSeq}`;
     constructor() {
         effect(() => {
             if (this.title()) {
@@ -28,12 +32,22 @@ class SdSection {
             }
         }
     };
+    // why: header là div[role=button] nhưng consumer chiếu nội dung tuỳ ý vào [sdHeaderRight]
+    // (thường là nút bấm). Nếu không lọc theo target thì Enter/Space trên nút của consumer vừa
+    // kích hoạt nút vừa gập section. Chỉ xử lý khi chính header đang giữ focus.
+    onHeaderKeydown = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        // why: chặn Space cuộn trang trước khi toggle.
+        event.preventDefault();
+        this.toggleCollapse();
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <!-- why: b\u1ECF aria-hidden=\"true\" \u2014 header ch\u1EE9a title/subTitle v\u00E0 to\u00E0n b\u1ED9 n\u1ED9i dung chi\u1EBFu\n         [sdHeaderLeft]/[sdHeaderRight] (th\u01B0\u1EDDng c\u00F3 n\u00FAt b\u1EA5m). aria-hidden xo\u00E1 t\u1EA5t c\u1EA3 kh\u1ECFi\n         accessibility tree trong khi v\u00F9ng n\u00E0y v\u1EABn nh\u1EADn click. Khi collapsible, header tr\u1EDF th\u00E0nh\n         n\u00FAt th\u1EADt: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      [attr.role]=\"_collapsible ? 'button' : null\"\n      [attr.tabindex]=\"_collapsible ? 0 : null\"\n      [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n      [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n      (click)=\"toggleCollapse()\"\n      (keydown.enter)=\"onHeaderKeydown($event)\"\n      (keydown.space)=\"onHeaderKeydown($event)\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header[role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px;border-radius:8px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [SdIcon], template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'sd-section', imports: [SdIcon], template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <!-- why: b\u1ECF aria-hidden=\"true\" \u2014 header ch\u1EE9a title/subTitle v\u00E0 to\u00E0n b\u1ED9 n\u1ED9i dung chi\u1EBFu\n         [sdHeaderLeft]/[sdHeaderRight] (th\u01B0\u1EDDng c\u00F3 n\u00FAt b\u1EA5m). aria-hidden xo\u00E1 t\u1EA5t c\u1EA3 kh\u1ECFi\n         accessibility tree trong khi v\u00F9ng n\u00E0y v\u1EABn nh\u1EADn click. Khi collapsible, header tr\u1EDF th\u00E0nh\n         n\u00FAt th\u1EADt: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      [attr.role]=\"_collapsible ? 'button' : null\"\n      [attr.tabindex]=\"_collapsible ? 0 : null\"\n      [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n      [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n      (click)=\"toggleCollapse()\"\n      (keydown.enter)=\"onHeaderKeydown($event)\"\n      (keydown.space)=\"onHeaderKeydown($event)\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header[role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px;border-radius:8px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
 class SdSectionItem {

package/fesm2022/sdcorejs-angular-components-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrl: './section.component.scss',\n imports: [SdIcon],\n})\nexport class SdSection {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsible = input(false, { transform: booleanAttribute });\n\n hideHeader = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsible()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n @if (!_hideHeader) {\n <div\n class=\"sd-section-header cursor-pointer\"\n (click)=\"toggleCollapse()\"\n ~~aria-hidden~~=\"~~true~~\">\n <div class=\"sd-section-header-left\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (_icon) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ _icon }}\n </span>\n }\n <div class=\"sd-section-title-block\">\n @if (_title) {\n <div class=\"sd-section-title T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"sd-section-header-right\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsible) {\n <div class=\"d-flex align-items-center\">\n @if (_collapsed) {\n <sd-icon name=\"expand_more\"></sd-icon>\n } @else {\n <sd-icon name=\"expand_less\"></sd-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <div class=\"sd-section-body\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n <ng-content></ng-content>\n </div>\n }\n <div class=\"sd-section-footer\">\n <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n </div>\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrl: 'section-item.component.scss',\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"c-item-label T14R text-secondary\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div class=\"c-item-content\"><ng-content></ng-content></div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;~~MAUa~~,SAAS,CAAA;AACpB,IAAA,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;AAExB,IAAA,KAAK,GAAG,KAAK,CAA4B,SAAS,CAAC;AACnD,IAAA,QAAQ,GAAG,KAAK,CAA4B,SAAS,CAAC;AACtD,IAAA,IAAI,GAAG,KAAK,CAA4B,SAAS,CAAC;IAClD,SAAS,GAAG,KAAK,CAAQ,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAE3D,SAAS,GAAG,KAAK,CAAU,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IACzD,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAE3D,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;~~AAE1D~~,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YACjD;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B;QACF;AACF,IAAA,CAAC;~~wGA7BU~~,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECVtB~~,~~sqEA4DA~~,EAAA,MAAA,EAAA,CAAA,~~8jCAAA,~~CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDpDY~~,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAEL,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAGb,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,~~sqEAAA~~,EAAA,MAAA,EAAA,CAAA,~~8jCAAA,~~CAAA,EAAA;;;~~MEAN~~,aAAa,CAAA;AACxB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAU;AAChC,IAAA,UAAU,GAAG,KAAK,CAAoC,OAAO,EAAE;AAC7D,QAAA,SAAS,EAAE,CAAC,GAAQ,KAAY;YAC9B,OAAO,GAAG,IAAI,OAAO;QACvB,CAAC;AACF,KAAA,CAAC;wGANS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,qVCR1B,yMAIA,EAAA,MAAA,EAAA,CAAA,iMAAA,CAAA,EAAA,CAAA;;4FDIa,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,cAGf,IAAI,EAAA,QAAA,EAAA,yMAAA,EAAA,MAAA,EAAA,CAAA,iMAAA,CAAA,EAAA;;;AENlB;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n// why: id tăng dần để nối aria-controls từ header sang body — mỗi instance cần một id duy nhất.\nlet sectionBodyIdSeq = 0;\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrl: './section.component.scss',\n imports: [SdIcon],\n})\nexport class SdSection {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsible = input(false, { transform: booleanAttribute });\n\n hideHeader = input(false, { transform: booleanAttribute });\n\n /** Id của vùng body, để header `aria-controls` trỏ tới khi section collapsible. /\n readonly bodyId = `sd-section-body-${++sectionBodyIdSeq}`;\n\n constructor() {\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsible()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n\n // why: header là div[role=button] nhưng consumer chiếu nội dung tuỳ ý vào [sdHeaderRight]\n // (thường là nút bấm). Nếu không lọc theo target thì Enter/Space trên nút của consumer vừa\n // kích hoạt nút vừa gập section. Chỉ xử lý khi chính header đang giữ focus.\n onHeaderKeydown = (event: KeyboardEvent) => {\n if (event.target !== event.currentTarget) return;\n // why: chặn Space cuộn trang trước khi toggle.\n event.preventDefault();\n this.toggleCollapse();\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n @if (!_hideHeader) {\n <!-- why: bỏ aria-hidden=\"true\" — header chứa title/subTitle và toàn bộ nội dung chiếu\n [sdHeaderLeft]/[sdHeaderRight] (thường có nút bấm). aria-hidden xoá tất cả khỏi\n accessibility tree trong khi vùng này vẫn nhận click. Khi collapsible, header trở thành\n nút thật: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n <div\n class=\"sd-section-header cursor-pointer\"\n [attr.role]=\"_collapsible ? 'button' : null\"\n [attr.tabindex]=\"_collapsible ? 0 : null\"\n [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n (click)=\"toggleCollapse()\"\n (keydown.enter)=\"onHeaderKeydown($event)\"\n (keydown.space)=\"onHeaderKeydown($event)\">\n <div class=\"sd-section-header-left\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (_icon) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ _icon }}\n </span>\n }\n <div class=\"sd-section-title-block\">\n @if (_title) {\n <div class=\"sd-section-title T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"sd-section-header-right\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsible) {\n <div class=\"d-flex align-items-center\">\n @if (_collapsed) {\n <sd-icon name=\"expand_more\"></sd-icon>\n } @else {\n <sd-icon name=\"expand_less\"></sd-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n <ng-content></ng-content>\n </div>\n }\n <div class=\"sd-section-footer\">\n <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n </div>\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrl: 'section-item.component.scss',\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"c-item-label T14R text-secondary\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div class=\"c-item-content\"><ng-content></ng-content></div>\n</div>\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-side-drawer.mjs CHANGED Viewed

@@ -1,14 +1,71 @@
 import * as i2 from '@angular/cdk/portal';
 import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChild, input, booleanAttribute, computed, output, signal, inject, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injectable, viewChild, input, booleanAttribute, computed, output, signal, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SdLoadingService } from '@sdcorejs/angular/services';
 import { Utilities } from '@sdcorejs/utils/fns';
 import { Subject, fromEvent, merge } from 'rxjs';
 import { map, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
+import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+/**
+ * why: state nằm ở MODULE, khoá theo `Document`, KHÔNG nằm trong instance service.
+ * `providedIn: 'root'` cho một instance mỗi *ứng dụng Angular*, không phải mỗi *document*. Hai app
+ * bootstrap độc lập trên cùng một trang (micro-frontend, widget nhúng) sẽ có hai bộ đếm riêng, mỗi
+ * bên chụp lại `overflow` mà bên kia vừa ghi — tái lập đúng bug khoá-scroll-vĩnh-viễn mà service
+ * này sinh ra để sửa, chỉ dịch lên một tầng. Khoá theo `Document` thì mọi instance trong cùng
+ * document dùng chung một bộ đếm, bất kể injector nào tạo ra chúng.
+ */
+const scrollLockStates = new WeakMap();
+const stateFor = (doc) => {
+    let state = scrollLockStates.get(doc);
+    if (!state) {
+        state = { count: 0, previousOverflow: null };
+        scrollLockStates.set(doc, state);
+    }
+    return state;
+};
+class SdBodyScrollLockService {
+    #document = inject(DOCUMENT);
+    /** Số lượng khoá đang giữ trên document này — phục vụ chẩn đoán/test. */
+    get count() {
+        return stateFor(this.#document).count;
+    }
+    lock() {
+        const state = stateFor(this.#document);
+        const body = this.#document.body;
+        if (!body)
+            return;
+        if (state.count === 0) {
+            state.previousOverflow = body.style.overflow;
+            body.style.overflow = 'hidden';
+        }
+        state.count++;
+    }
+    release() {
+        const state = stateFor(this.#document);
+        // Nhả nhiều hơn khoá (double close, destroy sau close) không được đẩy count xuống âm,
+        // nếu không lần khoá kế tiếp sẽ không ghi DOM.
+        if (state.count === 0)
+            return;
+        state.count--;
+        if (state.count > 0)
+            return;
+        const body = this.#document.body;
+        if (body)
+            body.style.overflow = state.previousOverflow ?? '';
+        state.previousOverflow = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBodyScrollLockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBodyScrollLockService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBodyScrollLockService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 class SdSideDrawer {
     id = `I${Utilities.generateUuid()}`;
@@ -33,7 +90,9 @@ class SdSideDrawer {
     dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));
     isHovered$;
     #destroy$ = new Subject();
-    #previousBodyOverflow = null;
+    // Instance này có đang giữ 1 khoá scroll hay không — giữ cho lock/release luôn cân bằng
+    // dù open()/close() bị gọi lặp.
+    #holdsScrollLock = false;
     #closeRequest;
     #viewContainerRef = inject(ViewContainerRef);
     #ar = inject(ApplicationRef);
@@ -41,6 +100,7 @@ class SdSideDrawer {
     #ref = inject(ChangeDetectorRef);
     #loadingService = inject(SdLoadingService);
     #destroyRef = inject(DestroyRef);
+    #scrollLock = inject(SdBodyScrollLockService);
     constructor() {
         // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render
         afterNextRender(() => {
@@ -57,22 +117,15 @@ class SdSideDrawer {
             if (this.#embeddedViewRef) {
                 this.#embeddedViewRef.destroy();
             }
-            if (this.#isOpenedSignal()) {
-                if (this.#previousBodyOverflow !== null) {
-                    document.body.style.overflow = this.#previousBodyOverflow;
-                }
-                else {
-                    document.body.style.overflow = '';
-                }
-            }
+            // Destroy khi đang mở cũng phải nhả khoá, nếu không ref-count kẹt > 0 và trang khoá scroll mãi.
+            this.#releaseScrollLock();
         });
     }
     open = () => {
         this.#ref.markForCheck();
         this.#isOpenedSignal.set(true);
-        // Chặn scroll ở document body
-        this.#previousBodyOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
+        // Chặn scroll ở document body qua khoá ref-count dùng chung (stack-safe với drawer lồng nhau)
+        this.#acquireScrollLock();
     };
     close = () => {
         if (this.beforeClose()) {
@@ -113,15 +166,21 @@ class SdSideDrawer {
         this.#isOpenedSignal.set(false);
         this.sdClosed.emit();
         this.stopLoading();
-        // Khôi phục lại scroll ở document body
-        if (this.#previousBodyOverflow !== null) {
-            document.body.style.overflow = this.#previousBodyOverflow;
-            this.#previousBodyOverflow = null;
-        }
-        else {
-            document.body.style.overflow = '';
-        }
+        // Khôi phục lại scroll ở document body (chỉ thật sự khôi phục khi drawer cuối cùng nhả khoá)
+        this.#releaseScrollLock();
     };
+    #acquireScrollLock() {
+        if (this.#holdsScrollLock)
+            return;
+        this.#holdsScrollLock = true;
+        this.#scrollLock.lock();
+    }
+    #releaseScrollLock() {
+        if (!this.#holdsScrollLock)
+            return;
+        this.#holdsScrollLock = false;
+        this.#scrollLock.release();
+    }
     startLoading = () => {
         this.#isLoadingSignal.set(true);
         this.#loadingService.stop(`#${this.id}`);
@@ -150,11 +209,11 @@ class SdSideDrawer {
         this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"title() || null\"\n    (keydown.escape)=\"disableBackdropClose() ? null : close()\"\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              <!-- why: aria-label=\"Close\" l\u00E0 chu\u1ED7i ti\u1EBFng Anh c\u1EE9ng trong m\u1ED9t th\u01B0 vi\u1EC7n \u0111\u00E3 c\u00F3 i18n. -->\n              <button\n                type=\"button\"\n                class=\"sd-side-drawer-close-btn\"\n                (click)=\"close()\"\n                [attr.aria-label]=\"'core.common.close' | sdTranslate\">\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  <!-- why: backdrop l\u00E0 l\u1EDBp ph\u1EE7 b\u1EAFt click thu\u1EA7n trang tr\u00ED, kh\u00F4ng c\u00F3 n\u1ED9i dung \u2014 nh\u01B0ng aria-hidden\n       kh\u00F4ng ph\u1EA3i l\u00E0 c\u00E1ch khai b\u00E1o \u0111\u00FAng cho n\u00F3. `role=\"presentation\"` m\u1EDBi l\u00E0 t\u00EDn hi\u1EC7u ch\u00EDnh x\u00E1c\n       (ph\u1EA7n t\u1EED n\u00E0y kh\u00F4ng mang ng\u1EEF ngh\u0129a), v\u00E0 quan tr\u1ECDng h\u01A1n: tr\u01B0\u1EDBc \u0111\u00E2y \"\u0111\u00F3ng b\u1EB1ng c\u00E1ch click ra\n       ngo\u00E0i\" KH\u00D4NG c\u00F3 t\u01B0\u01A1ng \u0111\u01B0\u01A1ng b\u00E0n ph\u00EDm n\u00E0o c\u1EA3. Escape \u0111\u01B0\u1EE3c th\u00EAm \u1EDF drawer container. -->\n  @if (_isOpened) {\n    <div\n      role=\"presentation\"\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"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+            args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, PortalModule, SdTranslatePipe], 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    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"title() || null\"\n    (keydown.escape)=\"disableBackdropClose() ? null : close()\"\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              <!-- why: aria-label=\"Close\" l\u00E0 chu\u1ED7i ti\u1EBFng Anh c\u1EE9ng trong m\u1ED9t th\u01B0 vi\u1EC7n \u0111\u00E3 c\u00F3 i18n. -->\n              <button\n                type=\"button\"\n                class=\"sd-side-drawer-close-btn\"\n                (click)=\"close()\"\n                [attr.aria-label]=\"'core.common.close' | sdTranslate\">\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  <!-- why: backdrop l\u00E0 l\u1EDBp ph\u1EE7 b\u1EAFt click thu\u1EA7n trang tr\u00ED, kh\u00F4ng c\u00F3 n\u1ED9i dung \u2014 nh\u01B0ng aria-hidden\n       kh\u00F4ng ph\u1EA3i l\u00E0 c\u00E1ch khai b\u00E1o \u0111\u00FAng cho n\u00F3. `role=\"presentation\"` m\u1EDBi l\u00E0 t\u00EDn hi\u1EC7u ch\u00EDnh x\u00E1c\n       (ph\u1EA7n t\u1EED n\u00E0y kh\u00F4ng mang ng\u1EEF ngh\u0129a), v\u00E0 quan tr\u1ECDng h\u01A1n: tr\u01B0\u1EDBc \u0111\u00E2y \"\u0111\u00F3ng b\u1EB1ng c\u00E1ch click ra\n       ngo\u00E0i\" KH\u00D4NG c\u00F3 t\u01B0\u01A1ng \u0111\u01B0\u01A1ng b\u00E0n ph\u00EDm n\u00E0o c\u1EA3. Escape \u0111\u01B0\u1EE3c th\u00EAm \u1EDF drawer container. -->\n  @if (_isOpened) {\n    <div\n      role=\"presentation\"\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: () => [] });
 /**

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

	@@ -1 +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\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":";;;;;;;;;;;;MAoCa,YAAY,CAAA;AACvB,IAAA,EAAE,GAAG,CAAA,CAAA,EAAI,SAAS,CAAC,YAAY,EAAE,EAAE;AAEnC,IAAA,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;AAEtC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AACzB,IAAA,KAAK,GAAG,KAAK,CAAS,OAAO,CAAC;IAC9B,SAAS,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAChF,oBAAoB,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAC3F,IAAA,WAAW,GAAG,KAAK,CAAsC,SAAS,CAAC;;AAGnE,IAAA,WAAW,GAAG,KAAK,CAAM,EAAE,CAAC;IAEnB,WAAW,GAAG,KAAK,CAA4B,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAC9E,MAAM,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,CAAA,uBAAA,EAA0B,IAAI,CAAC,WAAW,EAAE,CAAA,CAAE,GAAG,SAAS,CAAC,CAAC;IAEnH,QAAQ,GAAG,MAAM,EAAQ;IACzB,YAAY,GAAG,MAAM,EAAW;AAEhC,IAAA,gBAAgB;AAEP,IAAA,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC;AAC/B,IAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AAChC,IAAA,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;AAC5C,IAAA,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;IAC9C,UAAU,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxE,WAAW,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEnF,IAAA,UAAU;AACV,IAAA,SAAS,GAAG,IAAI,OAAO,EAAQ;IAC/B,qBAAqB,GAAkB,IAAI;AAC3C,IAAA,aAAa;AAEb,IAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC5C,IAAA,GAAG,GAAG,MAAM,CAAC,cAAc,CAAC;AAC5B,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAEhC,IAAA,WAAA,GAAA;;QAEE,eAAe,CAAC,MAAK;;YAEnB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;AACnG,YAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;;YAGlE,IAAI,CAAC,uBAAuB,EAAE;AAChC,QAAA,CAAC,CAAC;;AAGF,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;AAEzB,YAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACjC;AAEA,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;AAC1B,gBAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE;oBACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB;gBAC3D;qBAAO;oBACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;gBACnC;YACF;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;;QAG9B,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACzD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AACzC,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACtB,YAAA,KAAK,IAAI,CAAC,YAAY,EAAE;YACxB;QACF;QACA,IAAI,CAAC,UAAU,EAAE;AACnB,IAAA,CAAC;IAED,YAAY,GAAG,MAAuB;AACpC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;QAChC,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B;QACA,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO,IAAI,CAAC,aAAa;AAEjD,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO;AAC5B,aAAA,IAAI,CAAC,MAAM,KAAK,EAAE;aAClB,IAAI,CAAC,QAAQ,IAAG;AACf,YAAA,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,KAAK;YAC3B,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,OAAO,IAAI;AACb,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,CAAC,KAAc,KAAI;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CAAC;AAEJ,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO;AAC5B,QAAA,KAAK,OAAO,CAAC,OAAO,CAAC,MAAK;AACxB,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO;AAAE,gBAAA,IAAI,CAAC,aAAa,GAAG,SAAS;AACpE,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC;IAED,UAAU,GAAG,MAAK;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QACpB,IAAI,CAAC,WAAW,EAAE;;AAGlB,QAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE;YACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB;AACzD,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;QACnC;aAAO;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;QACnC;AACF,IAAA,CAAC;IAED,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;QACxC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC3C,IAAA,CAAC;IAED,WAAW,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC1C,IAAA,CAAC;AAED,IAAA,aAAa,GAAG,CAAC,KAAY,KAAI;QAC/B,KAAK,CAAC,cAAc,EAAE;AACxB,IAAA,CAAC;IAED,uBAAuB,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE;;AAG5B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS;QACjD,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAC5B,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAK,IAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAC3G;QAED,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,IAAI,CAAC,wEAAwE,CAAC;YACtF;QACF;;AAGA,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAC1E,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;QAE3E,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC7H;wGApKW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGK,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvCvC,i3DAoDA,6hGDlBY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAEjC,YAAY,EAAA,UAAA,EAAA,CAAA;kBARxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,i3DAAA,EAAA,MAAA,EAAA,CAAA,q+FAAA,CAAA,EAAA;;;AElC/C;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-side-drawer.mjs","sources":["../../../projects/sdcorejs-angular/components/side-drawer/src/body-scroll-lock.service.ts","../../../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 { DOCUMENT } from '@angular/common';\nimport { Injectable, inject } from '@angular/core';\n\n/*\n Khoá scroll của `document.body` theo kiểu đếm tham chiếu (ref-count).\n \n why: mỗi drawer tự lưu/khôi phục `document.body.style.overflow` là KHÔNG stack-safe. Với hai\n * drawer chồng nhau: drawer ngoài lưu `''` rồi set `'hidden'`; drawer trong lưu `'hidden'` (giá trị\n * do drawer ngoài vừa ghi) rồi cũng set `'hidden'`. Đóng drawer ngoài trước → khôi phục `''` →\n * trang scroll lại được dù drawer trong vẫn mở; đóng drawer trong sau → khôi phục `'hidden'` →\n * trang KHOÁ SCROLL VĨNH VIỄN dù không còn drawer nào. Ref-count chỉ ghi DOM ở lần khoá đầu và\n * lần nhả cuối, nên thứ tự đóng không còn ảnh hưởng.\n /\ninterface SdBodyScrollLockState {\n count: number;\n previousOverflow: string \| null;\n}\n\n/\n why: state nằm ở MODULE, khoá theo `Document`, KHÔNG nằm trong instance service.\n * `providedIn: 'root'` cho một instance mỗi ứng dụng Angular, không phải mỗi document. Hai app\n * bootstrap độc lập trên cùng một trang (micro-frontend, widget nhúng) sẽ có hai bộ đếm riêng, mỗi\n * bên chụp lại `overflow` mà bên kia vừa ghi — tái lập đúng bug khoá-scroll-vĩnh-viễn mà service\n * này sinh ra để sửa, chỉ dịch lên một tầng. Khoá theo `Document` thì mọi instance trong cùng\n * document dùng chung một bộ đếm, bất kể injector nào tạo ra chúng.\n /\nconst scrollLockStates = new WeakMap<Document, SdBodyScrollLockState>();\n\nconst stateFor = (doc: Document): SdBodyScrollLockState => {\n let state = scrollLockStates.get(doc);\n if (!state) {\n state = { count: 0, previousOverflow: null };\n scrollLockStates.set(doc, state);\n }\n return state;\n};\n\n@Injectable({ providedIn: 'root' })\nexport class SdBodyScrollLockService {\n readonly #document = inject(DOCUMENT);\n\n /* Số lượng khoá đang giữ trên document này — phục vụ chẩn đoán/test. /\n get count(): number {\n return stateFor(this.#document).count;\n }\n\n lock(): void {\n const state = stateFor(this.#document);\n const body = this.#document.body;\n if (!body) return;\n if (state.count === 0) {\n state.previousOverflow = body.style.overflow;\n body.style.overflow = 'hidden';\n }\n state.count++;\n }\n\n release(): void {\n const state = stateFor(this.#document);\n // Nhả nhiều hơn khoá (double close, destroy sau close) không được đẩy count xuống âm,\n // nếu không lần khoá kế tiếp sẽ không ghi DOM.\n if (state.count === 0) return;\n state.count--;\n if (state.count > 0) return;\n const body = this.#document.body;\n if (body) body.style.overflow = state.previousOverflow ?? '';\n state.previousOverflow = null;\n }\n}\n","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';\nimport { SdTranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdBodyScrollLockService } from './body-scroll-lock.service';\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, SdTranslatePipe],\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 // Instance này có đang giữ 1 khoá scroll hay không — giữ cho lock/release luôn cân bằng\n // dù open()/close() bị gọi lặp.\n #holdsScrollLock = false;\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 #scrollLock = inject(SdBodyScrollLockService);\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 // Destroy khi đang mở cũng phải nhả khoá, nếu không ref-count kẹt > 0 và trang khoá scroll mãi.\n this.#releaseScrollLock();\n });\n }\n\n open = () => {\n this.#ref.markForCheck();\n this.#isOpenedSignal.set(true);\n\n // Chặn scroll ở document body qua khoá ref-count dùng chung (stack-safe với drawer lồng nhau)\n this.#acquireScrollLock();\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 (chỉ thật sự khôi phục khi drawer cuối cùng nhả khoá)\n this.#releaseScrollLock();\n };\n\n #acquireScrollLock(): void {\n if (this.#holdsScrollLock) return;\n this.#holdsScrollLock = true;\n this.#scrollLock.lock();\n }\n\n #releaseScrollLock(): void {\n if (!this.#holdsScrollLock) return;\n this.#holdsScrollLock = false;\n this.#scrollLock.release();\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 role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title() \|\| null\"\n (keydown.escape)=\"disableBackdropClose() ? null : close()\"\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 <!-- why: aria-label=\"Close\" là chuỗi tiếng Anh cứng trong một thư viện đã có i18n. -->\n <button\n type=\"button\"\n class=\"sd-side-drawer-close-btn\"\n (click)=\"close()\"\n [attr.aria-label]=\"'core.common.close' \| sdTranslate\">\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 <!-- why: backdrop là lớp phủ bắt click thuần trang trí, không có nội dung — nhưng aria-hidden\n không phải là cách khai báo đúng cho nó. `role=\"presentation\"` mới là tín hiệu chính xác\n (phần tử này không mang ngữ nghĩa), và quan trọng hơn: trước đây \"đóng bằng cách click ra\n ngoài\" KHÔNG có tương đương bàn phím nào cả. Escape được thêm ở drawer container. -->\n @if (_isOpened) {\n <div\n role=\"presentation\"\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-splitter.mjs CHANGED Viewed

@@ -1,9 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, numberAttribute, output, HostListener, Component, model, signal, Injectable, EnvironmentInjector, Injector, DestroyRef, computed, contentChildren, effect, afterNextRender, createComponent } from '@angular/core';
+import { inject, ElementRef, DestroyRef, input, booleanAttribute, numberAttribute, output, HostListener, Component, model, signal, Injectable, EnvironmentInjector, Injector, computed, contentChildren, effect, afterNextRender, untracked, createComponent } from '@angular/core';
 import { SdStorageService } from '@sdcorejs/angular/services/storage';
 class SdSplitterHandleComponent {
     elementRef = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    constructor() {
+        // why: destroy giữa lúc drag (splitter re-sync handle, panel bị @if gỡ…) thì pointerup
+        // KHÔNG bao giờ tới → frame đang chờ vẫn chạy và emit dragMove từ component đã tháo.
+        // Huỷ frame ở cả destroy chứ không chỉ ở pointerup.
+        this.#destroyRef.onDestroy(() => this.#cancelPendingFrame());
+    }
     orientation = input('horizontal');
     disabled = input(false, { transform: booleanAttribute });
     keyboardStep = input(10, { transform: numberAttribute });
@@ -92,12 +99,15 @@ class SdSplitterHandleComponent {
         this.elementRef.nativeElement.releasePointerCapture(ev.pointerId);
         this.#pointerId = null;
         // Hủy rAF đang chờ để tránh emit dragMove sau khi drag kết thúc
-        if (this.#rafPending != null) {
-            cancelAnimationFrame(this.#rafPending);
-            this.#rafPending = null;
-        }
+        this.#cancelPendingFrame();
         this.dragEnd.emit();
     }
+    #cancelPendingFrame() {
+        if (this.#rafPending == null)
+            return;
+        cancelAnimationFrame(this.#rafPending);
+        this.#rafPending = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSplitterHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdSplitterHandleComponent, isStandalone: true, selector: "sd-splitter-handle", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "ariaValueMin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "ariaValueMax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "ariaValueNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", toggleRequest: "toggleRequest" }, host: { listeners: { "dblclick": "onDblClick()", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class.sd-splitter__handle--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter__handle--vertical": "orientation() === \"vertical\"", "class.sd-splitter__handle--disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-valuemin": "ariaValueMin() ?? null", "attr.aria-valuemax": "ariaValueMax() ?? null", "attr.aria-valuenow": "ariaValueNow() ?? null" }, classAttribute: "sd-splitter__handle" }, ngImport: i0, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-primary-light, #d7e3ff);--sd-splitter-handle-hover-color: var(--sd-primary, #005cbb);--sd-splitter-handle-active-color: var(--sd-primary, #005cbb);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] });
 }
@@ -116,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.aria-valuemax]': 'ariaValueMax() ?? null',
                         '[attr.aria-valuenow]': 'ariaValueNow() ?? null',
                     }, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-primary-light, #d7e3ff);--sd-splitter-handle-hover-color: var(--sd-primary, #005cbb);--sd-splitter-handle-active-color: var(--sd-primary, #005cbb);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] }]
-        }], propDecorators: { onDblClick: [{
+        }], ctorParameters: () => [], propDecorators: { onDblClick: [{
                 type: HostListener,
                 args: ['dblclick']
             }], onKeyDown: [{
@@ -405,6 +415,8 @@ class SdSplitterComponent {
     #dragStartSize = null;
     #dragLastDelta = 0;
     #prevCollapsedMap = new Map();
+    // Lật true sau lần render đầu → effect sync handle mới được phép chạm DOM.
+    #firstRenderDone = signal(false);
     constructor() {
         // 1. Reconcile state khi panels signal đổi (panel add/remove qua @if/@for)
         effect(() => {
@@ -476,14 +488,26 @@ class SdSplitterComponent {
                 panel.elementRef.nativeElement.style.flex = flex;
             }
         });
-        // Sync handles sau khi DOM render xong (panels đã projected vào host)
+        // Sync handles sau khi DOM render xong (panels đã projected vào host).
+        // why: afterNextRender đăng ký BÊN TRONG effect() sẽ tạo MỘT hook one-shot mới cho MỖI lần
+        // panels/orientation/disabled/keyboardStep tick — cùng với đó là một sequence + một
+        // DestroyRef.onDestroy mới xếp hàng trong AfterRenderManager. Đăng ký ĐÚNG MỘT lần ở
+        // constructor (chỉ để mở cổng sau lần render đầu), rồi đọc reactive value trong effect.
+        afterNextRender(() => this.#firstRenderDone.set(true), { injector: this.#injector });
         effect(() => {
-            const panelCount = this.panels().length;
+            const panels = this.panels();
             const orientation = this.resolvedOrientation();
             const disabled = this.resolvedDisabled();
             const keyboardStep = this.resolvedKeyboardStep();
-            afterNextRender(() => this.#syncHandles(panelCount, orientation, disabled, keyboardStep), { injector: this.#injector } // component-scoped → auto-cancel khi component destroy
-            );
+            // why: #syncHandles đọc panel.resizable() để tính handleDisabled. Khi nó còn chạy TRỰC TIẾP
+            // trong effect thì mỗi resizable() là một dependency ngầm — không rõ ràng, và trộn lẫn với
+            // các signal mà #syncHandles tình cờ đọc (panels(), state…). Đọc TƯỜNG MINH ở đây rồi gọi
+            // #syncHandles trong untracked(): dependency set của effect là đúng 5 dòng này, không hơn.
+            const resizables = panels.map(panel => panel.resizable());
+            // Lần CD đầu tiên panel chưa render xong → chờ afterNextRender mở cổng rồi effect tự chạy lại.
+            if (!this.#firstRenderDone())
+                return;
+            untracked(() => this.#syncHandles(panels, orientation, disabled, keyboardStep, resizables));
         });
         // Destroy handle ComponentRef khi container bị destroy (tránh leak)
         this.#destroyRef.onDestroy(() => {
@@ -505,9 +529,8 @@ class SdSplitterComponent {
             lastSize: panel.size(),
         };
     }
-    #syncHandles(panelCount, orientation, disabled, keyboardStep) {
-        const panels = this.panels();
-        const needed = Math.max(0, panelCount - 1);
+    #syncHandles(panels, orientation, disabled, keyboardStep, resizables) {
+        const needed = Math.max(0, panels.length - 1);
         // Remove excess
         while (this.#handleRefs.length > needed) {
             this.#handleRefs.pop().destroy();
@@ -522,24 +545,37 @@ class SdSplitterComponent {
             ref.instance.toggleRequest.subscribe(() => this.#onHandleToggle(handleIndex));
             this.#handleRefs.push(ref);
         }
-        // Apply inputs với disabled tính theo per-panel resizable
+        // Apply inputs với disabled tính theo per-panel resizable (đã đọc sẵn ở effect)
         for (let i = 0; i < this.#handleRefs.length; i++) {
             const ref = this.#handleRefs[i];
-            const prev = panels[i];
-            const next = panels[i + 1];
-            const handleDisabled = disabled || !prev.resizable() || !next.resizable();
+            const handleDisabled = disabled || !resizables[i] || !resizables[i + 1];
             ref.setInput('orientation', orientation);
             ref.setInput('disabled', handleDisabled);
             ref.setInput('keyboardStep', keyboardStep);
             ref.changeDetectorRef.detectChanges();
         }
-        // Re-arrange DOM: panel0, handle0, panel1, handle1, ..., panelN
-        const host = this.#host.nativeElement;
+        // Thứ tự DOM mong muốn: panel0, handle0, panel1, handle1, ..., panelN
+        const desired = [];
         for (let i = 0; i < panels.length; i++) {
-            host.appendChild(panels[i].elementRef.nativeElement);
+            desired.push(panels[i].elementRef.nativeElement);
             if (i < this.#handleRefs.length)
-                host.appendChild(this.#handleRefs[i].location.nativeElement);
+                desired.push(this.#handleRefs[i].location.nativeElement);
         }
+        // why: appendChild trên một node ĐANG ở đúng vị trí vẫn là một move thật — trình duyệt tháo
+        // rồi gắn lại element, nên iframe/video/audio bên trong reload từ đầu và focus/scroll trong
+        // panel bị mất. Effect này chạy lại mỗi khi orientation/disabled/keyboardStep/resizable đổi,
+        // tức đổi [resizable] của MỘT panel cũng đủ để xáo tung DOM sống. Chỉ sắp xếp lại khi trình
+        // tự panel/handle THỰC SỰ khác với DOM hiện tại.
+        const host = this.#host.nativeElement;
+        if (this.#matchesDomOrder(host, desired))
+            return;
+        for (const node of desired)
+            host.appendChild(node);
+    }
+    #matchesDomOrder(host, desired) {
+        const tracked = new Set(desired);
+        const actual = Array.from(host.children).filter(child => tracked.has(child));
+        return actual.length === desired.length && desired.every((node, index) => actual[index] === node);
     }
     #onDragStart(handleIndex) {
         const rect = this.#host.nativeElement.getBoundingClientRect();