@sd-angular/core 19.0.0-beta.10 → 19.0.0-beta.101

package/fesm2022/sd-angular-core-components-section.mjs

@@ -1,66 +1,64 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdSection extends SdBaseSecureComponent {
-    title; // Tiêu đề của section
-    subTitle; // sub Tiêu đề của section
-    icon;
-    iconColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'
-    collapsed = false;
-    set _collapsed(val) {
-        this.collapsed = val === '' || !!val;
-    }
-    collapsable = false;
-    set _collapsable(val) {
-        this.collapsable = val === '' || !!val;
-    }
-    hideHeader = false;
-    set _hideHeader(val) {
-        this.hideHeader = val === '' || !!val;
+    #el = inject(ElementRef);
+    title = input(undefined);
+    subTitle = input(undefined);
+    icon = input(undefined);
+    iconColor = input('primary', { alias: 'iconColor' });
+    collapsed = model(false, { alias: 'collapsed' });
+    collapsable = input(false, { transform: booleanAttribute });
+    hideHeader = input(false, { transform: booleanAttribute });
+    noPaddingBody = input(false, { transform: booleanAttribute });
+    constructor() {
+        super();
+        effect(() => {
+            if (this.title()) {
+                this.#el.nativeElement.removeAttribute('title');
+            }
+        });
     }
     toggleCollapse = () => {
-        if (this.collapsable) {
-            this.collapsed = !this.collapsed;
+        if (this.collapsable()) {
+            this.collapsed.set(!this.collapsed());
         }
         else {
-            if (this.collapsed) {
-                this.collapsed = false;
+            if (this.collapsed()) {
+                this.collapsed.set(false);
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: "title", subTitle: "subTitle", icon: "icon", iconColor: "iconColor", _collapsed: ["collapsed", "_collapsed"], _collapsable: ["collapsable", "_collapsable"], _hideHeader: ["hideHeader", "_hideHeader"] }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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 }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, noPaddingBody: { classPropertyName: "noPaddingBody", publicName: "noPaddingBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n  @if (!_hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"_iconColor === 'primary'\"\r\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n              [class.text-error]=\"_iconColor === 'error'\"\r\n              [class.text-warning]=\"_iconColor === 'warning'\"\r\n              [class.text-success]=\"_iconColor === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (_title) {\r\n              <div class=\"T16M\">{{ _title }}</div>\r\n            }\r\n            @if (_subTitle) {\r\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (_collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (_collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!_collapsed || _hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n  @if (!_hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"_iconColor === 'primary'\"\r\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n              [class.text-error]=\"_iconColor === 'error'\"\r\n              [class.text-warning]=\"_iconColor === 'warning'\"\r\n              [class.text-success]=\"_iconColor === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (_title) {\r\n              <div class=\"T16M\">{{ _title }}</div>\r\n            }\r\n            @if (_subTitle) {\r\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (_collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (_collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!_collapsed || _hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.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 {
+    label = input.required();
+    labelWidth = input('150px', {
+        transform: (val) => {
+            return val || '150px';
+        },
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdSectionItem, isStandalone: true, selector: "sd-section-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-item\">\r\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSectionItem, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.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"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], subTitle: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], _collapsed: [{
-                type: Input,
-                args: ['collapsed']
-            }], _collapsable: [{
-                type: Input,
-                args: ['collapsable']
-            }], _hideHeader: [{
-                type: Input,
-                args: ['hideHeader']
-            }] } });
+            args: [{ selector: 'sd-section-item', standalone: true, template: "<div class=\"c-item\">\r\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SdSection };
+export { SdSection, SdSectionItem };
 //# sourceMappingURL=sd-angular-core-components-section.mjs.map

package/fesm2022/sd-angular-core-components-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { Component, Input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n  selector: 'sd-section',\r\n  templateUrl: './section.component.html',\r\n  styleUrls: ['./section.component.scss'],\r\n  imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n  @Input({ required: true }) title?: string | null; // Tiêu đề của section\r\n  @Input() subTitle?: string; // sub Tiêu đề của section\r\n\r\n  @Input() icon?: string | null;\r\n  @Input() iconColor?: SdColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'\r\n  collapsed = false;\r\n  @Input('collapsed') set _collapsed(val: boolean | '' | undefined | null) {\r\n    this.collapsed = val === '' || !!val;\r\n  }\r\n  collapsable = false;\r\n  @Input('collapsable') set _collapsable(val: boolean | '' | undefined | null) {\r\n    this.collapsable = val === '' || !!val;\r\n  }\r\n\r\n  hideHeader = false;\r\n  @Input('hideHeader') set _hideHeader(val: boolean | '' | undefined | null) {\r\n    this.hideHeader = val === '' || !!val;\r\n  }\r\n  toggleCollapse = () => {\r\n    if (this.collapsable) {\r\n      this.collapsed = !this.collapsed;\r\n    } else {\r\n      if (this.collapsed) {\r\n        this.collapsed = false;\r\n      }\r\n    }\r\n  };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- Nếu header bị ẩn thì không cần border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;IACvB,KAAK,CAAiB;IACxC,QAAQ,CAAU;AAElB,IAAA,IAAI;AACJ,IAAA,SAAS,GAAa,SAAS,CAAC;IACzC,SAAS,GAAG,KAAK;IACjB,IAAwB,UAAU,CAAC,GAAoC,EAAA;QACrE,IAAI,CAAC,SAAS,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACtC;IACA,WAAW,GAAG,KAAK;IACnB,IAA0B,YAAY,CAAC,GAAoC,EAAA;QACzE,IAAI,CAAC,WAAW,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACxC;IAEA,UAAU,GAAG,KAAK;IAClB,IAAyB,WAAW,CAAC,GAAoC,EAAA;QACvE,IAAI,CAAC,UAAU,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACvC;IACA,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAClC;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACxB;QACF;AACF,IAAA,CAAC;wGA3BU,SAAS,EAAA,IAAA,EAAA,IAAA,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,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,CAAA,WAAA,EAAA,YAAA,CAAA,EAAA,YAAA,EAAA,CAAA,aAAA,EAAA,cAAA,CAAA,EAAA,WAAA,EAAA,CAAA,YAAA,EAAA,aAAA,CAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtB,ixDAgDA,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDtCY,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAEZ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAGb,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,ixDAAA,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA;8BAGG,KAAK,EAAA,CAAA;sBAA/B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBAEuB,UAAU,EAAA,CAAA;sBAAjC,KAAK;uBAAC,WAAW;gBAIQ,YAAY,EAAA,CAAA;sBAArC,KAAK;uBAAC,aAAa;gBAKK,WAAW,EAAA,CAAA;sBAAnC,KAAK;uBAAC,YAAY;;;AE5BrB;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n  selector: 'sd-section',\r\n  templateUrl: './section.component.html',\r\n  styleUrls: ['./section.component.scss'],\r\n  imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n  #el = inject(ElementRef);\r\n\r\n  title = input<string | undefined | null>(undefined);\r\n  subTitle = input<string | undefined | null>(undefined);\r\n  icon = input<string | undefined | null>(undefined);\r\n  iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n  collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n  collapsable = input(false, { transform: booleanAttribute });\r\n  hideHeader = input(false, { transform: booleanAttribute });\r\n  noPaddingBody = input(false, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this.title()) {\r\n        this.#el.nativeElement.removeAttribute('title');\r\n      }\r\n    });\r\n  }\r\n\r\n  toggleCollapse = () => {\r\n    if (this.collapsable()) {\r\n      this.collapsed.set(!this.collapsed());\r\n    } else {\r\n      if (this.collapsed()) {\r\n        this.collapsed.set(false);\r\n      }\r\n    }\r\n  };\r\n}\r\n","@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n  @if (!_hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"_iconColor === 'primary'\"\r\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n              [class.text-error]=\"_iconColor === 'error'\"\r\n              [class.text-warning]=\"_iconColor === 'warning'\"\r\n              [class.text-success]=\"_iconColor === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (_title) {\r\n              <div class=\"T16M\">{{ _title }}</div>\r\n            }\r\n            @if (_subTitle) {\r\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (_collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (_collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!_collapsed || _hideHeader) {\r\n    <!-- Nếu header bị ẩn thì không cần border top -->\r\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n","import { Component, input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-section-item',\r\n  templateUrl: './section-item.component.html',\r\n  styleUrls: ['section-item.component.scss'],\r\n  standalone: true,\r\n})\r\nexport class SdSectionItem {\r\n  label = input.required<string>();\r\n  labelWidth = input<string, string | null | undefined>('150px', {\r\n    transform: (val: any): string => {\r\n      return val || '150px';\r\n    },\r\n  });\r\n}\r\n","<div class=\"c-item\">\r\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-side-drawer.mjs

@@ -1,125 +1,125 @@
-import * as i5 from '@angular/cdk/portal';
-import { DomPortalOutlet, PortalModule, CdkPortal } from '@angular/cdk/portal';
-import * as i2 from '@angular/common';
+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 * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { viewChild, input, booleanAttribute, computed, output, signal, inject, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
+import { SdLoadingService } from '@sd-angular/core/services';
 import * as uuid from 'uuid';
 import { Subject, fromEvent, merge } from 'rxjs';
 import { map, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import * as i1 from '@sd-angular/core/services';
 
 class SdSideDrawer extends SdBaseSecureComponent {
-    viewContainerRef;
-    ar;
-    injector;
-    ref;
-    loadingService;
     id = `I${uuid.v4()}`;
-    portal;
-    drawerContainerRef;
-    title = '';
-    set _title(val) {
-        if (val) {
-            this.title = val;
-        }
-    }
-    width = '480px';
-    set _width(val) {
-        if (val) {
-            this.width = val;
-        }
-    }
-    hideClose = false;
-    set _hideClose(val) {
-        this.hideClose = val === '' || !!val;
-    }
-    disableClose = false;
-    set _disableClose(val) {
-        this.disableClose = val === '' || !!val;
-    }
-    sdClosed = new EventEmitter();
+    portal = viewChild.required(CdkPortal);
+    title = input('');
+    width = input('480px');
+    hideClose = input(false, { transform: booleanAttribute });
+    disableBackdropClose = input(false, { transform: booleanAttribute });
+    // Custom CSS class added to the root side-drawer container
+    drawerClass = input('');
+    autoIdInput = input(undefined, { alias: 'autoId' });
+    autoId = computed(() => this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined);
+    sdClosed = output();
     #embeddedViewRef;
-    isOpened = false;
-    isLoading = false;
+    #isOpenedSignal = signal(false);
+    #isLoadingSignal = signal(false);
+    isOpened = this.#isOpenedSignal.asReadonly();
+    isLoading = this.#isLoadingSignal.asReadonly();
+    dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));
+    dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));
     isHovered$;
     #destroy$ = new Subject();
-    constructor(viewContainerRef, ar, injector, ref, loadingService) {
+    #previousBodyOverflow = null;
+    #viewContainerRef = inject(ViewContainerRef);
+    #ar = inject(ApplicationRef);
+    #injector = inject(Injector);
+    #ref = inject(ChangeDetectorRef);
+    #loadingService = inject(SdLoadingService);
+    #destroyRef = inject(DestroyRef);
+    constructor() {
         super();
-        this.viewContainerRef = viewContainerRef;
-        this.ar = ar;
-        this.injector = injector;
-        this.ref = ref;
-        this.loadingService = loadingService;
-    }
-    ngAfterViewInit() {
-        this.#embeddedViewRef = new DomPortalOutlet(document.body, this.viewContainerRef, this.ar, this.injector).attachTemplatePortal(this.portal);
-        this.#setupHoverSubscription();
+        // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render
+        afterNextRender(() => {
+            // 1. Gắn portal vào body và lưu lại EmbeddedViewRef
+            const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);
+            this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());
+            // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra
+            this.#setupHoverSubscription();
+        });
+        // Thay thế ngOnDestroy bằng logic destroy trực tiếp 
+        this.#destroyRef.onDestroy(() => {
+            this.#destroy$.next();
+            this.#destroy$.complete();
+            if (this.#embeddedViewRef) {
+                this.#embeddedViewRef.destroy();
+            }
+            if (this.#isOpenedSignal()) {
+                if (this.#previousBodyOverflow !== null) {
+                    document.body.style.overflow = this.#previousBodyOverflow;
+                }
+                else {
+                    document.body.style.overflow = '';
+                }
+            }
+        });
     }
     open = () => {
-        this.ref.markForCheck();
-        this.isOpened = true;
+        this.#ref.markForCheck();
+        this.#isOpenedSignal.set(true);
+        // Chặn scroll ở document body
+        this.#previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
     };
     close = () => {
-        this.ref.markForCheck();
-        this.isOpened = false;
+        this.#ref.markForCheck();
+        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 = '';
+        }
     };
     startLoading = () => {
-        this.isLoading = true;
-        this.loadingService.stop(`#${this.id}`);
-        this.loadingService.start(`#${this.id}`);
+        this.#isLoadingSignal.set(true);
+        this.#loadingService.stop(`#${this.id}`);
+        this.#loadingService.start(`#${this.id}`);
     };
     stopLoading = () => {
-        this.isLoading = false;
-        this.loadingService.stop(`#${this.id}`);
+        this.#isLoadingSignal.set(false);
+        this.#loadingService.stop(`#${this.id}`);
+    };
+    preventScroll = (event) => {
+        event.preventDefault();
     };
-    ngOnDestroy() {
-        this.#embeddedViewRef.destroy();
-    }
     #setupHoverSubscription() {
-        const element = this.drawerContainerRef.nativeElement;
+        if (!this.#embeddedViewRef)
+            return;
+        // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef
+        const rootNodes = this.#embeddedViewRef.rootNodes;
+        const element = rootNodes.find((node) => node.nodeType === Node.ELEMENT_NODE && node.classList?.contains('sd-side-drawer'));
+        if (!element) {
+            console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');
+            return;
+        }
+        // 4. Gắn event listeners trực tiếp lên element thật
         const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));
         const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));
         this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
     }
-    getHoverStatusStream() {
-        return this.isHovered$;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.SdLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { _title: ["title", "_title"], _width: ["width", "_width"], _hideClose: ["hideClose", "_hideClose"], _disableClose: ["disableClose", "_disableClose"] }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }, { propertyName: "drawerContainerRef", first: true, predicate: ["drawerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"side-drawer\"\r\n    [ngStyle]=\"{ width: width }\"\r\n    [ngClass]=\"{\r\n      'side-drawer--active': isOpened,\r\n      'side-drawer--loading': isLoading\r\n    }\"\r\n    #drawerContainer>\r\n    @if (isOpened) {\r\n      <ng-container>\r\n        <div class=\"side-drawer__header media align-items-center\">\r\n          <div class=\"side-drawer__title media-body\">\r\n            <ng-content select=\"[sdTitle]\"></ng-content>\r\n          </div>\r\n          @if (hideClose) {\r\n            <button type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        @if (isOpened) {\r\n          <div class=\"side-drawer__body\">\r\n            <div class=\"side-drawer__content\">\r\n              <ng-content select=\"[sdBody]\"></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"side-drawer__footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened) {\r\n    <button \r\n      type=\"button\"\r\n      class=\"side-drawer-backdrop\" \r\n      (click)=\"disableClose ? null : close()\"\r\n      >\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.side-drawer__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.side-drawer__icon .mat-icon{float:left}.side-drawer__header{min-height:64px;padding:12px 16px;display:flex;justify-content:space-between}.side-drawer__body{flex:1;position:relative}.side-drawer__content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.side-drawer__footer{border-top:1px solid #dde0e5;padding:8px 0}.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}.side-drawer--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.side-drawer__title{font-size:20px;line-height:28px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i5.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"sd-side-drawer\"\r\n    [ngStyle]=\"{ width: width() }\"\r\n    [ngClass]=\"drawerClass()\"\r\n    [class.sd-side-drawer-active]=\"isOpened()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [attr.data-opened]=\"dataOpened()\"\r\n    [attr.data-loading]=\"dataLoading()\"\r\n    #drawerContainer>\r\n    @if (isOpened()) {\r\n      <ng-container>\r\n        <div class=\"sd-side-drawer-header\">\r\n          <div class=\"sd-side-drawer-title\">\r\n            <ng-content select=\"[sdHeaderLeft]\">\r\n              {{ title() }}\r\n            </ng-content>\r\n          </div>\r\n          <div class=\"sd-side-drawer-header-actions\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n                <svg\r\n                  viewBox=\"0 0 24 24\"\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  fill=\"none\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\">\r\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n                </svg>\r\n              </button>\r\n            }\r\n          </div>\r\n        </div>\r\n        @if (isOpened()) {\r\n          <div class=\"sd-side-drawer-body\">\r\n            <div class=\"sd-side-drawer-content\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"sd-side-drawer-footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened()) {\r\n    <div\r\n      aria-hidden=\"true\"\r\n      class=\"sd-side-drawer-backdrop\"\r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"></div>\r\n  }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, decorators: [{
+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: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"side-drawer\"\r\n    [ngStyle]=\"{ width: width }\"\r\n    [ngClass]=\"{\r\n      'side-drawer--active': isOpened,\r\n      'side-drawer--loading': isLoading\r\n    }\"\r\n    #drawerContainer>\r\n    @if (isOpened) {\r\n      <ng-container>\r\n        <div class=\"side-drawer__header media align-items-center\">\r\n          <div class=\"side-drawer__title media-body\">\r\n            <ng-content select=\"[sdTitle]\"></ng-content>\r\n          </div>\r\n          @if (hideClose) {\r\n            <button type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        @if (isOpened) {\r\n          <div class=\"side-drawer__body\">\r\n            <div class=\"side-drawer__content\">\r\n              <ng-content select=\"[sdBody]\"></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"side-drawer__footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened) {\r\n    <button \r\n      type=\"button\"\r\n      class=\"side-drawer-backdrop\" \r\n      (click)=\"disableClose ? null : close()\"\r\n      >\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.side-drawer__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.side-drawer__icon .mat-icon{float:left}.side-drawer__header{min-height:64px;padding:12px 16px;display:flex;justify-content:space-between}.side-drawer__body{flex:1;position:relative}.side-drawer__content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.side-drawer__footer{border-top:1px solid #dde0e5;padding:8px 0}.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}.side-drawer--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.side-drawer__title{font-size:20px;line-height:28px;font-weight:500}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.SdLoadingService }], propDecorators: { portal: [{
-                type: ViewChild,
-                args: [CdkPortal]
-            }], drawerContainerRef: [{
-                type: ViewChild,
-                args: ['drawerContainer']
-            }], _title: [{
-                type: Input,
-                args: ['title']
-            }], _width: [{
-                type: Input,
-                args: ['width']
-            }], _hideClose: [{
-                type: Input,
-                args: ['hideClose']
-            }], _disableClose: [{
-                type: Input,
-                args: ['disableClose']
-            }], sdClosed: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"sd-side-drawer\"\r\n    [ngStyle]=\"{ width: width() }\"\r\n    [ngClass]=\"drawerClass()\"\r\n    [class.sd-side-drawer-active]=\"isOpened()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [attr.data-opened]=\"dataOpened()\"\r\n    [attr.data-loading]=\"dataLoading()\"\r\n    #drawerContainer>\r\n    @if (isOpened()) {\r\n      <ng-container>\r\n        <div class=\"sd-side-drawer-header\">\r\n          <div class=\"sd-side-drawer-title\">\r\n            <ng-content select=\"[sdHeaderLeft]\">\r\n              {{ title() }}\r\n            </ng-content>\r\n          </div>\r\n          <div class=\"sd-side-drawer-header-actions\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n                <svg\r\n                  viewBox=\"0 0 24 24\"\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  fill=\"none\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\">\r\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n                </svg>\r\n              </button>\r\n            }\r\n          </div>\r\n        </div>\r\n        @if (isOpened()) {\r\n          <div class=\"sd-side-drawer-body\">\r\n            <div class=\"sd-side-drawer-content\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"sd-side-drawer-footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened()) {\r\n    <div\r\n      aria-hidden=\"true\"\r\n      class=\"sd-side-drawer-backdrop\"\r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"></div>\r\n  }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sd-angular-core-components-side-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-side-drawer.mjs","sources":["../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sd-angular/components/side-drawer/sd-angular-core-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  AfterViewInit,\r\n  ApplicationRef,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  EmbeddedViewRef,\r\n  EventEmitter,\r\n  Injector,\r\n  Input,\r\n  OnDestroy,\r\n  Output,\r\n  ViewChild,\r\n  ElementRef,\r\n  ViewContainerRef,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\r\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\r\n\r\n@Component({\r\n  selector: 'sd-side-drawer',\r\n  templateUrl: './side-drawer.component.html',\r\n  styleUrls: ['./side-drawer.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule],\r\n})\r\nexport class SdSideDrawer extends SdBaseSecureComponent implements AfterViewInit, OnDestroy {\r\n  id = `I${uuid.v4()}`;\r\n  @ViewChild(CdkPortal) portal!: CdkPortal;\r\n  @ViewChild('drawerContainer') drawerContainerRef!: ElementRef;\r\n  title = '';\r\n  @Input('title') set _title(val: string | null | undefined) {\r\n    if (val) {\r\n      this.title = val;\r\n    }\r\n  }\r\n  width = '480px';\r\n  @Input('width') set _width(val: string | null | undefined) {\r\n    if (val) {\r\n      this.width = val;\r\n    }\r\n  }\r\n  hideClose = false;\r\n  @Input('hideClose') set _hideClose(val: boolean | '' | null | undefined) {\r\n    this.hideClose = val === '' || !!val;\r\n  }\r\n  disableClose = false;\r\n  @Input('disableClose') set _disableClose(val: boolean | '' | null | undefined) {\r\n    this.disableClose = val === '' || !!val;\r\n  }\r\n  @Output() sdClosed = new EventEmitter();\r\n  #embeddedViewRef!: EmbeddedViewRef<any>;\r\n  isOpened = false;\r\n  isLoading = false;\r\n  isHovered$!: Observable<boolean>;\r\n  #destroy$ = new Subject<void>();\r\n\r\n  constructor(\r\n    private viewContainerRef: ViewContainerRef,\r\n    private ar: ApplicationRef,\r\n    private injector: Injector,\r\n    private ref: ChangeDetectorRef,\r\n    private loadingService: SdLoadingService\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#embeddedViewRef = new DomPortalOutlet(document.body, this.viewContainerRef, this.ar, this.injector).attachTemplatePortal(this.portal);\r\n    this.#setupHoverSubscription();\r\n  }\r\n\r\n  open = () => {\r\n    this.ref.markForCheck();\r\n    this.isOpened = true;\r\n  };\r\n\r\n  close = () => {\r\n    this.ref.markForCheck();\r\n    this.isOpened = false;\r\n    this.sdClosed.emit();\r\n    this.stopLoading();\r\n  };\r\n\r\n  startLoading = () => {\r\n    this.isLoading = true;\r\n    this.loadingService.stop(`#${this.id}`);\r\n    this.loadingService.start(`#${this.id}`);\r\n  };\r\n\r\n  stopLoading = () => {\r\n    this.isLoading = false;\r\n    this.loadingService.stop(`#${this.id}`);\r\n  };\r\n\r\n  ngOnDestroy() {\r\n    this.#embeddedViewRef.destroy();\r\n  }\r\n\r\n  #setupHoverSubscription(): void {\r\n    const element = this.drawerContainerRef.nativeElement;\r\n\r\n    const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\r\n\r\n    const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\r\n\r\n    this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));\r\n  }\r\n\r\n  getHoverStatusStream(): Observable<boolean> {\r\n    return this.isHovered$;\r\n  }\r\n}\r\n","<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"side-drawer\"\r\n    [ngStyle]=\"{ width: width }\"\r\n    [ngClass]=\"{\r\n      'side-drawer--active': isOpened,\r\n      'side-drawer--loading': isLoading\r\n    }\"\r\n    #drawerContainer>\r\n    @if (isOpened) {\r\n      <ng-container>\r\n        <div class=\"side-drawer__header media align-items-center\">\r\n          <div class=\"side-drawer__title media-body\">\r\n            <ng-content select=\"[sdTitle]\"></ng-content>\r\n          </div>\r\n          @if (hideClose) {\r\n            <button type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        @if (isOpened) {\r\n          <div class=\"side-drawer__body\">\r\n            <div class=\"side-drawer__content\">\r\n              <ng-content select=\"[sdBody]\"></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"side-drawer__footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened) {\r\n    <button \r\n      type=\"button\"\r\n      class=\"side-drawer-backdrop\" \r\n      (click)=\"disableClose ? null : close()\"\r\n      >\r\n    </button>\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-side-drawer.mjs","sources":["../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sd-angular/components/side-drawer/sd-angular-core-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ApplicationRef,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  DestroyRef,\r\n  EmbeddedViewRef,\r\n  Injector,\r\n  ViewContainerRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild\r\n} from '@angular/core';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\r\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\r\n\r\n@Component({\r\n  selector: 'sd-side-drawer',\r\n  templateUrl: './side-drawer.component.html',\r\n  styleUrls: ['./side-drawer.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, PortalModule],\r\n})\r\nexport class SdSideDrawer extends SdBaseSecureComponent {\r\n  id = `I${uuid.v4()}`;\r\n  \r\n  portal = viewChild.required(CdkPortal);\r\n  \r\n  title = input<string>('');\r\n  width = input<string>('480px');\r\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  disableBackdropClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n\r\n  // Custom CSS class added to the root side-drawer container\r\n  drawerClass = input<any>('');\r\n\r\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  readonly autoId = computed(() =>\r\n    this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined\r\n  );\r\n\r\n  sdClosed = output<void>();\r\n\r\n  #embeddedViewRef!: EmbeddedViewRef<any>;\r\n\r\n  readonly #isOpenedSignal = signal(false);\r\n  readonly #isLoadingSignal = signal(false);\r\n  readonly isOpened = this.#isOpenedSignal.asReadonly();\r\n  readonly isLoading = this.#isLoadingSignal.asReadonly();\r\n  readonly dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));\r\n  readonly dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));\r\n\r\n  isHovered$!: Observable<boolean>;\r\n  #destroy$ = new Subject<void>();\r\n  #previousBodyOverflow: string | null = null;\r\n\r\n  #viewContainerRef = inject(ViewContainerRef);\r\n  #ar = inject(ApplicationRef);\r\n  #injector = inject(Injector);\r\n  #ref = inject(ChangeDetectorRef);\r\n  #loadingService = inject(SdLoadingService);\r\n  #destroyRef = inject(DestroyRef);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\r\n    afterNextRender(() => {\r\n      // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\r\n      const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\r\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n      \r\n      // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\r\n      this.#setupHoverSubscription();\r\n    });\r\n\r\n    // Thay thế ngOnDestroy bằng logic destroy trực tiếp \r\n    this.#destroyRef.onDestroy(() => {\r\n      this.#destroy$.next();\r\n      this.#destroy$.complete();\r\n      \r\n      if (this.#embeddedViewRef) {\r\n        this.#embeddedViewRef.destroy();\r\n      }\r\n      \r\n      if (this.#isOpenedSignal()) {\r\n        if (this.#previousBodyOverflow !== null) {\r\n          document.body.style.overflow = this.#previousBodyOverflow;\r\n        } else {\r\n          document.body.style.overflow = '';\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  open = () => {\r\n    this.#ref.markForCheck();\r\n    this.#isOpenedSignal.set(true);\r\n\r\n    // Chặn scroll ở document body\r\n    this.#previousBodyOverflow = document.body.style.overflow;\r\n    document.body.style.overflow = 'hidden';\r\n  };\r\n\r\n  close = () => {\r\n    this.#ref.markForCheck();\r\n    this.#isOpenedSignal.set(false);\r\n    this.sdClosed.emit();\r\n    this.stopLoading();\r\n    \r\n    // Khôi phục lại scroll ở document body\r\n    if (this.#previousBodyOverflow !== null) {\r\n      document.body.style.overflow = this.#previousBodyOverflow;\r\n      this.#previousBodyOverflow = null;\r\n    } else {\r\n      document.body.style.overflow = '';\r\n    }\r\n  };\r\n\r\n  startLoading = () => {\r\n    this.#isLoadingSignal.set(true);\r\n    this.#loadingService.stop(`#${this.id}`);\r\n    this.#loadingService.start(`#${this.id}`);\r\n  };\r\n\r\n  stopLoading = () => {\r\n    this.#isLoadingSignal.set(false);\r\n    this.#loadingService.stop(`#${this.id}`);\r\n  };\r\n\r\n  preventScroll = (event: Event) => {\r\n    event.preventDefault();\r\n  };\r\n\r\n  #setupHoverSubscription(): void {\r\n    if (!this.#embeddedViewRef) return;\r\n\r\n    // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\r\n    const rootNodes = this.#embeddedViewRef.rootNodes;\r\n    const element = rootNodes.find(\r\n      (node) => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\r\n    );\r\n\r\n    if (!element) {\r\n      console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\r\n      return;\r\n    }\r\n\r\n    // 4. Gắn event listeners trực tiếp lên element thật\r\n    const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\r\n    const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\r\n\r\n    this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(\r\n      startWith(false),\r\n      distinctUntilChanged(),\r\n      takeUntil(this.#destroy$)\r\n    );\r\n  }\r\n}","<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"sd-side-drawer\"\r\n    [ngStyle]=\"{ width: width() }\"\r\n    [ngClass]=\"drawerClass()\"\r\n    [class.sd-side-drawer-active]=\"isOpened()\"\r\n    [attr.data-autoId]=\"autoId()\"\r\n    [attr.data-opened]=\"dataOpened()\"\r\n    [attr.data-loading]=\"dataLoading()\"\r\n    #drawerContainer>\r\n    @if (isOpened()) {\r\n      <ng-container>\r\n        <div class=\"sd-side-drawer-header\">\r\n          <div class=\"sd-side-drawer-title\">\r\n            <ng-content select=\"[sdHeaderLeft]\">\r\n              {{ title() }}\r\n            </ng-content>\r\n          </div>\r\n          <div class=\"sd-side-drawer-header-actions\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n                <svg\r\n                  viewBox=\"0 0 24 24\"\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  fill=\"none\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\">\r\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n                </svg>\r\n              </button>\r\n            }\r\n          </div>\r\n        </div>\r\n        @if (isOpened()) {\r\n          <div class=\"sd-side-drawer-body\">\r\n            <div class=\"sd-side-drawer-content\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"sd-side-drawer-footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened()) {\r\n    <div\r\n      aria-hidden=\"true\"\r\n      class=\"sd-side-drawer-backdrop\"\r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"></div>\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}