@sdcorejs/angular 19.0.0-rc.1

package/fesm2022/sdcorejs-angular-components-quick-action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdcorejs-angular-components-quick-action.mjs","sources":["../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.ts","../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.html","../../../projects/sdcorejs-angular/components/quick-action/sdcorejs-angular-components-quick-action.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'sd-quick-action',\n  templateUrl: './quick-action.component.html',\n  styleUrls: ['./quick-action.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdQuickAction {\n  /**\n   * Toggle visibility of the floating toolbar. Bare attribute = true.\n   */\n  readonly opened = input(false, { transform: booleanAttribute });\n}\n","<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n  <div class=\"c-quick-action-message T14R\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <div class=\"c-quick-action-action\">\n    <ng-content select=\"[sdAction]\"></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MASa,aAAa,CAAA;AACxB;;AAEG;IACM,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wGAJpD,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,kNCT1B,uTAQA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDCa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EAGf,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uTAAA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA;;;AEPjD;;AAEG;;;;"}

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

@@ -0,0 +1,64 @@
+import * as i0 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 '@sdcorejs/angular/components/base';
+
+/* eslint-disable @angular-eslint/no-input-rename */
+class SdSection extends SdBaseSecureComponent {
+    #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.set(!this.collapsed());
+        }
+        else {
+            if (this.collapsed()) {
+                this.collapsed.set(false);
+            }
+        }
+    };
+    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();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\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>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\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();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\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>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\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\">\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\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.21", ngImport: i0, type: SdSectionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-section-item', standalone: true, template: "<div class=\"c-item\">\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\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, SdSectionItem };
+//# sourceMappingURL=sdcorejs-angular-components-section.mjs.map

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

@@ -0,0 +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":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { Color } from '@sdcorejs/utils/models';\n\n@Component({\n  selector: 'sd-section',\n  templateUrl: './section.component.html',\n  styleUrls: ['./section.component.scss'],\n  imports: [MatIconModule],\n})\nexport class SdSection extends SdBaseSecureComponent {\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  collapsable = input(false, { transform: booleanAttribute });\n  hideHeader = input(false, { transform: booleanAttribute });\n  noPaddingBody = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.title()) {\n        this.#el.nativeElement.removeAttribute('title');\n      }\n    });\n  }\n\n  toggleCollapse = () => {\n    if (this.collapsable()) {\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 _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\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>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- Nếu header bị ẩn thì không cần border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n  selector: 'sd-section-item',\n  templateUrl: './section-item.component.html',\n  styleUrls: ['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=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>","/**\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

@@ -0,0 +1,129 @@
+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 { viewChild, input, booleanAttribute, computed, output, signal, inject, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
+import { SdLoadingService } from '@sdcorejs/angular/services';
+import * as uuid from 'uuid';
+import { Subject, fromEvent, merge } from 'rxjs';
+import { map, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+class SdSideDrawer extends SdBaseSecureComponent {
+    id = `I${uuid.v4()}`;
+    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;
+    #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();
+    #previousBodyOverflow = null;
+    #viewContainerRef = inject(ViewContainerRef);
+    #ar = inject(ApplicationRef);
+    #injector = inject(Injector);
+    #ref = inject(ChangeDetectorRef);
+    #loadingService = inject(SdLoadingService);
+    #destroyRef = inject(DestroyRef);
+    constructor() {
+        super();
+        // 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.#isOpenedSignal.set(true);
+        // Chặn scroll ở document body
+        this.#previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    };
+    close = () => {
+        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.#isLoadingSignal.set(true);
+        this.#loadingService.stop(`#${this.id}`);
+        this.#loadingService.start(`#${this.id}`);
+    };
+    stopLoading = () => {
+        this.#isLoadingSignal.set(false);
+        this.#loadingService.stop(`#${this.id}`);
+    };
+    preventScroll = (event) => {
+        event.preventDefault();
+    };
+    #setupHoverSubscription() {
+        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$));
+    }
+    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>\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-title\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              {{ title() }}\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-actions\">\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                <svg\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  fill=\"none\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\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          <ng-content select=\"[sdFooter]\"></ng-content>\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{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.21", ngImport: i0, type: SdSideDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\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-title\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              {{ title() }}\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-actions\">\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                <svg\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  fill=\"none\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\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          <ng-content select=\"[sdFooter]\"></ng-content>\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{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.
+ */
+
+export { SdSideDrawer };
+//# sourceMappingURL=sdcorejs-angular-components-side-drawer.mjs.map

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

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