@ebuilding/base 2.0.0

package/fesm2022/components.drawer.mjs

@@ -0,0 +1,706 @@
+import * as i0 from '@angular/core';
+import { Directive, InjectionToken, EventEmitter, inject, Type, Injector, TemplateRef, booleanAttribute, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayConfig, CdkScrollable } from '@angular/cdk/overlay';
+import * as i7 from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { drawerMaskMotion } from 'ng-zorro-antd/core/animation';
+import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
+import * as i5 from 'ng-zorro-antd/core/outlet';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { overlayZIndexSetter } from 'ng-zorro-antd/core/overlay';
+import { isTemplateRef, toCssPixel } from 'ng-zorro-antd/core/util';
+import * as i6 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import * as i1 from 'ng-zorro-antd/core/config';
+import * as i3 from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/bidi';
+
+class NzDrawerContentDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: NzDrawerContentDirective, isStandalone: true, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nzDrawerContent]',
+                    exportAs: 'nzDrawerContent'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const DRAWER_DEFAULT_SIZE = 378;
+const DRAWER_LARGE_SIZE = 736;
+const NZ_DRAWER_DATA = new InjectionToken('NZ_DRAWER_DATA');
+
+class NzDrawerRef {
+}
+
+const DRAWER_ANIMATE_DURATION = 300;
+const NZ_CONFIG_MODULE_NAME = 'drawer';
+class NzDrawerComponent extends NzDrawerRef {
+    cdr;
+    nzConfigService;
+    renderer;
+    overlay;
+    injector;
+    changeDetectorRef;
+    focusTrapFactory;
+    viewContainerRef;
+    overlayKeyboardDispatcher;
+    directionality;
+    _nzModuleName = NZ_CONFIG_MODULE_NAME;
+    nzContent;
+    nzCloseIcon = 'close';
+    nzClosable = true;
+    //@WithConfig() 
+    nzMaskClosable = true;
+    //@WithConfig() 
+    nzMask = true;
+    //@WithConfig() 
+    nzCloseOnNavigation = true;
+    nzNoAnimation = false;
+    nzKeyboard = true;
+    nzTitle;
+    nzExtra;
+    nzFooter;
+    nzPlacement = 'right';
+    nzSize = 'default';
+    nzMaskStyle = {};
+    nzBodyStyle = {};
+    nzWrapClassName;
+    nzWidth;
+    nzHeight;
+    nzZIndex = 1000;
+    nzOffsetX = 0;
+    nzOffsetY = 0;
+    componentInstance = null;
+    componentRef = null;
+    set nzVisible(value) {
+        this.isOpen = value;
+    }
+    get nzVisible() {
+        return this.isOpen;
+    }
+    nzOnViewInit = new EventEmitter();
+    nzOnClose = new EventEmitter();
+    nzVisibleChange = new EventEmitter();
+    drawerTemplate;
+    bodyPortalOutlet;
+    contentFromContentChild;
+    destroy$ = new Subject();
+    previouslyFocusedElement;
+    placementChanging = false;
+    placementChangeTimeoutId;
+    nzContentParams; // only service
+    nzData;
+    overlayRef;
+    portal;
+    focusTrap;
+    isOpen = false;
+    inAnimation = false;
+    templateContext = {
+        $implicit: undefined,
+        drawerRef: this
+    };
+    isTemplateRef = isTemplateRef;
+    get offsetTransform() {
+        if (!this.isOpen || this.nzOffsetX + this.nzOffsetY === 0) {
+            return null;
+        }
+        switch (this.nzPlacement) {
+            case 'left':
+                return `translateX(${this.nzOffsetX}px)`;
+            case 'right':
+                return `translateX(-${this.nzOffsetX}px)`;
+            case 'top':
+                return `translateY(${this.nzOffsetY}px)`;
+            case 'bottom':
+                return `translateY(-${this.nzOffsetY}px)`;
+        }
+    }
+    get transform() {
+        if (this.isOpen) {
+            return null;
+        }
+        switch (this.nzPlacement) {
+            case 'left':
+                return `translateX(-100%)`;
+            case 'right':
+                return `translateX(100%)`;
+            case 'top':
+                return `translateY(-100%)`;
+            case 'bottom':
+                return `translateY(100%)`;
+        }
+    }
+    get width() {
+        if (this.isLeftOrRight) {
+            const defaultWidth = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+            return this.nzWidth === undefined ? toCssPixel(defaultWidth) : toCssPixel(this.nzWidth);
+        }
+        return null;
+    }
+    get height() {
+        if (!this.isLeftOrRight) {
+            const defaultHeight = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+            return this.nzHeight === undefined ? toCssPixel(defaultHeight) : toCssPixel(this.nzHeight);
+        }
+        return null;
+    }
+    get isLeftOrRight() {
+        return this.nzPlacement === 'left' || this.nzPlacement === 'right';
+    }
+    nzAfterOpen = new Subject();
+    nzAfterClose = new Subject();
+    get afterOpen() {
+        return this.nzAfterOpen.asObservable();
+    }
+    get afterClose() {
+        return this.nzAfterClose.asObservable();
+    }
+    get isNzContentTemplateRef() {
+        return isTemplateRef(this.nzContent);
+    }
+    // from service config
+    //@WithConfig() 
+    nzDirection = undefined;
+    dir = 'ltr';
+    document = inject(DOCUMENT);
+    constructor(cdr, nzConfigService, renderer, overlay, injector, changeDetectorRef, focusTrapFactory, viewContainerRef, overlayKeyboardDispatcher, directionality) {
+        super();
+        this.cdr = cdr;
+        this.nzConfigService = nzConfigService;
+        this.renderer = renderer;
+        this.overlay = overlay;
+        this.injector = injector;
+        this.changeDetectorRef = changeDetectorRef;
+        this.focusTrapFactory = focusTrapFactory;
+        this.viewContainerRef = viewContainerRef;
+        this.overlayKeyboardDispatcher = overlayKeyboardDispatcher;
+        this.directionality = directionality;
+    }
+    ngOnInit() {
+        this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
+            this.dir = direction;
+            this.cdr.detectChanges();
+        });
+        this.dir = this.nzDirection || this.directionality.value;
+        this.attachOverlay();
+        this.updateOverlayStyle();
+        this.updateBodyOverflow();
+        this.templateContext = { $implicit: this.nzData || this.nzContentParams, drawerRef: this };
+        this.changeDetectorRef.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.attachBodyContent();
+        // The `setTimeout` triggers change detection. There's no sense to schedule the DOM timer if anyone is
+        // listening to the `nzOnViewInit` event inside the template, for instance `<nz-drawer (nzOnViewInit)="...">`.
+        if (this.nzOnViewInit.observers.length) {
+            setTimeout(() => {
+                this.nzOnViewInit.emit();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        const { nzPlacement, nzVisible } = changes;
+        if (nzVisible) {
+            const value = changes["nzVisible"].currentValue;
+            if (value) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+        if (nzPlacement && !nzPlacement.isFirstChange()) {
+            this.triggerPlacementChangeCycleOnce();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        clearTimeout(this.placementChangeTimeoutId);
+        this.disposeOverlay();
+    }
+    getAnimationDuration() {
+        return this.nzNoAnimation ? 0 : DRAWER_ANIMATE_DURATION;
+    }
+    // Disable the transition animation temporarily when the placement changing
+    triggerPlacementChangeCycleOnce() {
+        if (!this.nzNoAnimation) {
+            this.placementChanging = true;
+            this.changeDetectorRef.markForCheck();
+            clearTimeout(this.placementChangeTimeoutId);
+            this.placementChangeTimeoutId = setTimeout(() => {
+                this.placementChanging = false;
+                this.changeDetectorRef.markForCheck();
+            }, this.getAnimationDuration());
+        }
+    }
+    close(result) {
+        this.isOpen = false;
+        this.inAnimation = true;
+        this.nzVisibleChange.emit(false);
+        this.updateOverlayStyle();
+        this.overlayKeyboardDispatcher.remove(this.overlayRef);
+        this.changeDetectorRef.detectChanges();
+        setTimeout(() => {
+            this.updateBodyOverflow();
+            this.restoreFocus();
+            this.inAnimation = false;
+            this.nzAfterClose.next(result);
+            this.nzAfterClose.complete();
+            this.componentInstance = null;
+            this.componentRef = null;
+        }, this.getAnimationDuration());
+    }
+    open() {
+        this.attachOverlay();
+        this.isOpen = true;
+        this.inAnimation = true;
+        this.nzVisibleChange.emit(true);
+        this.overlayKeyboardDispatcher.add(this.overlayRef);
+        this.updateOverlayStyle();
+        this.updateBodyOverflow();
+        this.savePreviouslyFocusedElement();
+        this.trapFocus();
+        this.changeDetectorRef.detectChanges();
+        setTimeout(() => {
+            this.inAnimation = false;
+            this.changeDetectorRef.detectChanges();
+            this.nzAfterOpen.next();
+        }, this.getAnimationDuration());
+    }
+    getContentComponent() {
+        return this.componentInstance;
+    }
+    getContentComponentRef() {
+        return this.componentRef;
+    }
+    closeClick() {
+        this.nzOnClose.emit();
+    }
+    maskClick() {
+        if (this.nzMaskClosable && this.nzMask) {
+            this.nzOnClose.emit();
+        }
+    }
+    attachBodyContent() {
+        this.bodyPortalOutlet.dispose();
+        if (this.nzContent instanceof Type) {
+            const childInjector = Injector.create({
+                parent: this.injector,
+                providers: [
+                    { provide: NzDrawerRef, useValue: this },
+                    { provide: NZ_DRAWER_DATA, useValue: this.nzData }
+                ]
+            });
+            const componentPortal = new ComponentPortal(this.nzContent, null, childInjector);
+            this.componentRef = this.bodyPortalOutlet.attachComponentPortal(componentPortal);
+            this.componentInstance = this.componentRef.instance;
+            /**TODO
+             * When nzContentParam will be remove in the next major version, we have to remove the following line
+             * **/
+            Object.assign(this.componentRef.instance, this.nzData || this.nzContentParams);
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    attachOverlay() {
+        if (!this.overlayRef) {
+            this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
+            this.overlayRef = this.overlay.create(this.getOverlayConfig());
+            overlayZIndexSetter(this.overlayRef, this.nzZIndex);
+        }
+        if (this.overlayRef && !this.overlayRef.hasAttached()) {
+            this.overlayRef.attach(this.portal);
+            this.overlayRef.keydownEvents()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event) => {
+                if (event.keyCode === ESCAPE && this.isOpen && this.nzKeyboard) {
+                    this.nzOnClose.emit();
+                }
+            });
+            this.overlayRef
+                .detachments()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.close();
+                this.disposeOverlay();
+            });
+        }
+    }
+    disposeOverlay() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    getOverlayConfig() {
+        return new OverlayConfig({
+            disposeOnNavigation: this.nzCloseOnNavigation,
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.overlay.scrollStrategies.block()
+        });
+    }
+    updateOverlayStyle() {
+        if (this.overlayRef && this.overlayRef.overlayElement) {
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'pointer-events', this.isOpen ? 'auto' : 'none');
+        }
+    }
+    updateBodyOverflow() {
+        if (this.overlayRef) {
+            if (this.isOpen) {
+                this.overlayRef.getConfig().scrollStrategy.enable();
+            }
+            else {
+                this.overlayRef.getConfig().scrollStrategy.disable();
+            }
+        }
+    }
+    savePreviouslyFocusedElement() {
+        if (this.document && !this.previouslyFocusedElement) {
+            this.previouslyFocusedElement = this.document.activeElement;
+            // We need the extra check, because IE's svg element has no blur method.
+            if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.blur === 'function') {
+                this.previouslyFocusedElement.blur();
+            }
+        }
+    }
+    trapFocus() {
+        if (!this.focusTrap && this.overlayRef && this.overlayRef.overlayElement) {
+            this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+            this.focusTrap.focusInitialElement();
+        }
+    }
+    restoreFocus() {
+        // We need the extra check, because IE can set the `activeElement` to null in some cases.
+        if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
+            this.previouslyFocusedElement.focus();
+            this.previouslyFocusedElement = undefined;
+        }
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NzConfigService }, { token: i0.Renderer2 }, { token: i2.Overlay }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3.FocusTrapFactory }, { token: i0.ViewContainerRef }, { token: i2.OverlayKeyboardDispatcher }, { token: i4.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: NzDrawerComponent, isStandalone: true, selector: "nz-drawer", inputs: { nzContent: "nzContent", nzCloseIcon: "nzCloseIcon", nzClosable: ["nzClosable", "nzClosable", booleanAttribute], nzMaskClosable: ["nzMaskClosable", "nzMaskClosable", booleanAttribute], nzMask: ["nzMask", "nzMask", booleanAttribute], nzCloseOnNavigation: ["nzCloseOnNavigation", "nzCloseOnNavigation", booleanAttribute], nzNoAnimation: ["nzNoAnimation", "nzNoAnimation", booleanAttribute], nzKeyboard: ["nzKeyboard", "nzKeyboard", booleanAttribute], nzTitle: "nzTitle", nzExtra: "nzExtra", nzFooter: "nzFooter", nzPlacement: "nzPlacement", nzSize: "nzSize", nzMaskStyle: "nzMaskStyle", nzBodyStyle: "nzBodyStyle", nzWrapClassName: "nzWrapClassName", nzWidth: "nzWidth", nzHeight: "nzHeight", nzZIndex: "nzZIndex", nzOffsetX: "nzOffsetX", nzOffsetY: "nzOffsetY", nzVisible: ["nzVisible", "nzVisible", booleanAttribute] }, outputs: { nzOnViewInit: "nzOnViewInit", nzOnClose: "nzOnClose", nzVisibleChange: "nzVisibleChange" }, queries: [{ propertyName: "contentFromContentChild", first: true, predicate: NzDrawerContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true, static: true }, { propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], exportAs: ["nzDrawer"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #drawerTemplate>
+      <div
+        class="ant-drawer"
+        [nzNoAnimation]="nzNoAnimation"
+        [class.ant-drawer-rtl]="dir === 'rtl'"
+        [class.ant-drawer-open]="isOpen"
+        [class.no-mask]="!nzMask"
+        [class.ant-drawer-top]="nzPlacement === 'top'"
+        [class.ant-drawer-bottom]="nzPlacement === 'bottom'"
+        [class.ant-drawer-right]="nzPlacement === 'right'"
+        [class.ant-drawer-left]="nzPlacement === 'left'"
+        [style.transform]="offsetTransform"
+        [style.transition]="placementChanging ? 'none' : null"
+        [style.zIndex]="nzZIndex"
+      > 
+        @if (nzMask && isOpen) {
+          <div @drawerMaskMotion class="ant-drawer-mask" (click)="maskClick()" [style]="nzMaskStyle"></div>
+        }
+        <div
+          class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
+          [style.width]="width"
+          [style.height]="height"
+          [style.transform]="transform"
+          [style.transition]="placementChanging ? 'none' : null"
+        >
+          <div class="ant-drawer-content">
+            <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
+              @if (nzTitle || nzClosable) {
+                <div class="ant-drawer-header" [class.ant-drawer-header-close-only]="!nzTitle">
+                  <div class="ant-drawer-header-title">
+                    @if (nzClosable) {
+                      <button (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
+                        <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
+                          <nz-icon [nzType]="closeIcon" />
+                        </ng-container>
+                      </button>
+                    }
+
+                    @if (nzTitle) {
+                      <div class="ant-drawer-title">
+                        <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+                      </div>
+                    }
+                  </div>
+                  @if (nzExtra) {
+                    <div class="ant-drawer-extra">
+                      <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+                    </div>
+                  }
+                </div>
+              }
+              <div class="ant-drawer-body" [style]="nzBodyStyle" cdkScrollable>
+                <ng-template cdkPortalOutlet />
+                @if (nzContent) {
+                  @if (isTemplateRef(nzContent)) {
+                    <ng-container *ngTemplateOutlet="nzContent; context: templateContext" />
+                  }
+                } @else {
+                  @if (contentFromContentChild && (isOpen || inAnimation)) {
+                    <ng-template [ngTemplateOutlet]="contentFromContentChild" />
+                  }
+                }
+              </div>
+              @if (nzFooter) {
+                <div class="ant-drawer-footer">
+                  <ng-container *nzStringTemplateOutlet="nzFooter">{{ nzFooter }}</ng-container>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NzNoAnimationDirective, selector: "[nzNoAnimation]", inputs: ["nzNoAnimation"], exportAs: ["nzNoAnimation"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i5.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i6.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i7.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [drawerMaskMotion], changeDetection: i0.ChangeDetectionStrategy.Default });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nz-drawer',
+                    exportAs: 'nzDrawer',
+                    template: `
+    <ng-template #drawerTemplate>
+      <div
+        class="ant-drawer"
+        [nzNoAnimation]="nzNoAnimation"
+        [class.ant-drawer-rtl]="dir === 'rtl'"
+        [class.ant-drawer-open]="isOpen"
+        [class.no-mask]="!nzMask"
+        [class.ant-drawer-top]="nzPlacement === 'top'"
+        [class.ant-drawer-bottom]="nzPlacement === 'bottom'"
+        [class.ant-drawer-right]="nzPlacement === 'right'"
+        [class.ant-drawer-left]="nzPlacement === 'left'"
+        [style.transform]="offsetTransform"
+        [style.transition]="placementChanging ? 'none' : null"
+        [style.zIndex]="nzZIndex"
+      > 
+        @if (nzMask && isOpen) {
+          <div @drawerMaskMotion class="ant-drawer-mask" (click)="maskClick()" [style]="nzMaskStyle"></div>
+        }
+        <div
+          class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
+          [style.width]="width"
+          [style.height]="height"
+          [style.transform]="transform"
+          [style.transition]="placementChanging ? 'none' : null"
+        >
+          <div class="ant-drawer-content">
+            <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
+              @if (nzTitle || nzClosable) {
+                <div class="ant-drawer-header" [class.ant-drawer-header-close-only]="!nzTitle">
+                  <div class="ant-drawer-header-title">
+                    @if (nzClosable) {
+                      <button (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
+                        <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
+                          <nz-icon [nzType]="closeIcon" />
+                        </ng-container>
+                      </button>
+                    }
+
+                    @if (nzTitle) {
+                      <div class="ant-drawer-title">
+                        <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+                      </div>
+                    }
+                  </div>
+                  @if (nzExtra) {
+                    <div class="ant-drawer-extra">
+                      <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+                    </div>
+                  }
+                </div>
+              }
+              <div class="ant-drawer-body" [style]="nzBodyStyle" cdkScrollable>
+                <ng-template cdkPortalOutlet />
+                @if (nzContent) {
+                  @if (isTemplateRef(nzContent)) {
+                    <ng-container *ngTemplateOutlet="nzContent; context: templateContext" />
+                  }
+                } @else {
+                  @if (contentFromContentChild && (isOpen || inAnimation)) {
+                    <ng-template [ngTemplateOutlet]="contentFromContentChild" />
+                  }
+                }
+              </div>
+              @if (nzFooter) {
+                <div class="ant-drawer-footer">
+                  <ng-container *nzStringTemplateOutlet="nzFooter">{{ nzFooter }}</ng-container>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    animations: [drawerMaskMotion],
+                    imports: [NzNoAnimationDirective, NzOutletModule, NzIconModule, PortalModule, NgTemplateOutlet, CdkScrollable]
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NzConfigService }, { type: i0.Renderer2 }, { type: i2.Overlay }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3.FocusTrapFactory }, { type: i0.ViewContainerRef }, { type: i2.OverlayKeyboardDispatcher }, { type: i4.Directionality }], propDecorators: { nzContent: [{
+                type: Input
+            }], nzCloseIcon: [{
+                type: Input
+            }], nzClosable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], 
+        //@WithConfig() 
+        nzMaskClosable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], 
+        //@WithConfig() 
+        nzMask: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], 
+        //@WithConfig() 
+        nzCloseOnNavigation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], nzNoAnimation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], nzKeyboard: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], nzTitle: [{
+                type: Input
+            }], nzExtra: [{
+                type: Input
+            }], nzFooter: [{
+                type: Input
+            }], nzPlacement: [{
+                type: Input
+            }], nzSize: [{
+                type: Input
+            }], nzMaskStyle: [{
+                type: Input
+            }], nzBodyStyle: [{
+                type: Input
+            }], nzWrapClassName: [{
+                type: Input
+            }], nzWidth: [{
+                type: Input
+            }], nzHeight: [{
+                type: Input
+            }], nzZIndex: [{
+                type: Input
+            }], nzOffsetX: [{
+                type: Input
+            }], nzOffsetY: [{
+                type: Input
+            }], nzVisible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], nzOnViewInit: [{
+                type: Output
+            }], nzOnClose: [{
+                type: Output
+            }], nzVisibleChange: [{
+                type: Output
+            }], drawerTemplate: [{
+                type: ViewChild,
+                args: ['drawerTemplate', { static: true }]
+            }], bodyPortalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
+            }], contentFromContentChild: [{
+                type: ContentChild,
+                args: [NzDrawerContentDirective, { static: true, read: TemplateRef }]
+            }] } });
+
+class DrawerBuilderForService {
+    overlay;
+    options;
+    drawerRef;
+    overlayRef;
+    unsubscribe$ = new Subject();
+    constructor(overlay, options) {
+        this.overlay = overlay;
+        this.options = options;
+        /** pick {@link NzDrawerOptions.nzOnCancel} and omit this option */
+        const { nzOnCancel, ...componentOption } = this.options;
+        this.overlayRef = this.overlay.create();
+        this.drawerRef = this.overlayRef.attach(new ComponentPortal(NzDrawerComponent)).instance;
+        this.updateOptions(componentOption);
+        // Prevent repeatedly open drawer when tap focus element.
+        this.drawerRef.savePreviouslyFocusedElement();
+        this.drawerRef.nzOnViewInit.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.drawerRef.open();
+        });
+        this.drawerRef.nzOnClose.subscribe(() => {
+            if (nzOnCancel) {
+                nzOnCancel().then(canClose => {
+                    if (canClose !== false) {
+                        this.drawerRef.close();
+                    }
+                });
+            }
+            else {
+                this.drawerRef.close();
+            }
+        });
+        this.drawerRef.afterClose.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.overlayRef.dispose();
+            this.drawerRef = null;
+            this.unsubscribe$.next();
+            this.unsubscribe$.complete();
+        });
+    }
+    getInstance() {
+        return this.drawerRef;
+    }
+    updateOptions(options) {
+        Object.assign(this.drawerRef, options);
+    }
+}
+class NzDrawerService {
+    overlay;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    create(options) {
+        return new DrawerBuilderForService(this.overlay, options).getInstance();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerService, deps: [{ token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i2.Overlay }] });
+
+class NzDrawerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerModule, imports: [NzDrawerComponent, NzDrawerContentDirective], exports: [NzDrawerComponent, NzDrawerContentDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerModule, providers: [NzDrawerService], imports: [NzDrawerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NzDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NzDrawerComponent, NzDrawerContentDirective],
+                    providers: [NzDrawerService],
+                    exports: [NzDrawerComponent, NzDrawerContentDirective]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DRAWER_ANIMATE_DURATION, DRAWER_DEFAULT_SIZE, DRAWER_LARGE_SIZE, DrawerBuilderForService, NZ_DRAWER_DATA, NzDrawerComponent, NzDrawerContentDirective, NzDrawerModule, NzDrawerRef, NzDrawerService };
+//# sourceMappingURL=components.drawer.mjs.map