@sd-angular/core 19.0.0-beta.6 → 19.0.0-beta.60

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

@@ -1,125 +1,119 @@
-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, output, 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('');
+    sdClosed = output();
     #embeddedViewRef;
     isOpened = false;
     isLoading = 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.isOpened) {
+                if (this.#previousBodyOverflow !== null) {
+                    document.body.style.overflow = this.#previousBodyOverflow;
+                }
+                else {
+                    document.body.style.overflow = '';
+                }
+            }
+        });
     }
     open = () => {
-        this.ref.markForCheck();
+        this.#ref.markForCheck();
         this.isOpened = true;
+        // Chặn scroll ở document body
+        this.#previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
     };
     close = () => {
-        this.ref.markForCheck();
+        this.#ref.markForCheck();
         this.isOpened = 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.#loadingService.stop(`#${this.id}`);
+        this.#loadingService.start(`#${this.id}`);
     };
     stopLoading = () => {
         this.isLoading = false;
-        this.loadingService.stop(`#${this.id}`);
+        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.17", ngImport: i0, type: SdSideDrawer, deps: [], 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: { 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 } }, 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    #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            {{ title() }}\r\n            <ng-content select=\"[sdHeaderLeft]\"></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 viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" 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    <button \r\n      type=\"button\"\r\n      class=\"sd-side-drawer-backdrop\" \r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"\r\n      >\r\n    </button>\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 0}.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: [{
             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    #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            {{ title() }}\r\n            <ng-content select=\"[sdHeaderLeft]\"></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 viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" 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    <button \r\n      type=\"button\"\r\n      class=\"sd-side-drawer-backdrop\" \r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"\r\n      >\r\n    </button>\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 0}.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  inject,\r\n  input,\r\n  output,\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  sdClosed = output<void>();\r\n\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  #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.isOpened) {\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.isOpened = 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.isOpened = 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.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  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    #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            {{ title() }}\r\n            <ng-content select=\"[sdHeaderLeft]\"></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 viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" 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    <button \r\n      type=\"button\"\r\n      class=\"sd-side-drawer-backdrop\" \r\n      (click)=\"disableBackdropClose() ? null : close()\"\r\n      (wheel)=\"preventScroll($event)\"\r\n      (touchmove)=\"preventScroll($event)\"\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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"}