123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746 |
- 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 { __esDecorate, __runInitializers } from 'tslib';
- 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 * as i1 from 'ng-zorro-antd/core/config';
- import { WithConfig } from 'ng-zorro-antd/core/config';
- 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 i3 from '@angular/cdk/a11y';
- import * as i4 from '@angular/cdk/bidi';
- /**
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
- class NzDrawerContentDirective {
- templateRef;
- constructor(templateRef) {
- this.templateRef = templateRef;
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzDrawerContentDirective, isStandalone: true, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"], ngImport: i0 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerContentDirective, decorators: [{
- type: Directive,
- args: [{
- selector: '[nzDrawerContent]',
- exportAs: 'nzDrawerContent'
- }]
- }], ctorParameters: () => [{ type: i0.TemplateRef }] });
- /**
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
- const DRAWER_DEFAULT_SIZE = 378;
- const DRAWER_LARGE_SIZE = 736;
- const NZ_DRAWER_DATA = new InjectionToken('NZ_DRAWER_DATA');
- /**
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
- class NzDrawerRef {
- }
- const DRAWER_ANIMATE_DURATION = 300;
- const NZ_CONFIG_MODULE_NAME = 'drawer';
- let NzDrawerComponent = (() => {
- let _classSuper = NzDrawerRef;
- let _nzMaskClosable_decorators;
- let _nzMaskClosable_initializers = [];
- let _nzMaskClosable_extraInitializers = [];
- let _nzMask_decorators;
- let _nzMask_initializers = [];
- let _nzMask_extraInitializers = [];
- let _nzCloseOnNavigation_decorators;
- let _nzCloseOnNavigation_initializers = [];
- let _nzCloseOnNavigation_extraInitializers = [];
- let _nzDirection_decorators;
- let _nzDirection_initializers = [];
- let _nzDirection_extraInitializers = [];
- return class NzDrawerComponent extends _classSuper {
- static {
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
- _nzMaskClosable_decorators = [WithConfig()];
- _nzMask_decorators = [WithConfig()];
- _nzCloseOnNavigation_decorators = [WithConfig()];
- _nzDirection_decorators = [WithConfig()];
- __esDecorate(null, null, _nzMaskClosable_decorators, { kind: "field", name: "nzMaskClosable", static: false, private: false, access: { has: obj => "nzMaskClosable" in obj, get: obj => obj.nzMaskClosable, set: (obj, value) => { obj.nzMaskClosable = value; } }, metadata: _metadata }, _nzMaskClosable_initializers, _nzMaskClosable_extraInitializers);
- __esDecorate(null, null, _nzMask_decorators, { kind: "field", name: "nzMask", static: false, private: false, access: { has: obj => "nzMask" in obj, get: obj => obj.nzMask, set: (obj, value) => { obj.nzMask = value; } }, metadata: _metadata }, _nzMask_initializers, _nzMask_extraInitializers);
- __esDecorate(null, null, _nzCloseOnNavigation_decorators, { kind: "field", name: "nzCloseOnNavigation", static: false, private: false, access: { has: obj => "nzCloseOnNavigation" in obj, get: obj => obj.nzCloseOnNavigation, set: (obj, value) => { obj.nzCloseOnNavigation = value; } }, metadata: _metadata }, _nzCloseOnNavigation_initializers, _nzCloseOnNavigation_extraInitializers);
- __esDecorate(null, null, _nzDirection_decorators, { kind: "field", name: "nzDirection", static: false, private: false, access: { has: obj => "nzDirection" in obj, get: obj => obj.nzDirection, set: (obj, value) => { obj.nzDirection = value; } }, metadata: _metadata }, _nzDirection_initializers, _nzDirection_extraInitializers);
- if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
- }
- cdr;
- nzConfigService;
- renderer;
- overlay;
- injector;
- changeDetectorRef;
- focusTrapFactory;
- viewContainerRef;
- overlayKeyboardDispatcher;
- directionality;
- _nzModuleName = NZ_CONFIG_MODULE_NAME;
- nzContent;
- nzCloseIcon = 'close';
- nzClosable = true;
- nzMaskClosable = __runInitializers(this, _nzMaskClosable_initializers, true);
- nzMask = (__runInitializers(this, _nzMaskClosable_extraInitializers), __runInitializers(this, _nzMask_initializers, true));
- nzCloseOnNavigation = (__runInitializers(this, _nzMask_extraInitializers), __runInitializers(this, _nzCloseOnNavigation_initializers, true));
- nzNoAnimation = (__runInitializers(this, _nzCloseOnNavigation_extraInitializers), 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
- nzDirection = __runInitializers(this, _nzDirection_initializers, undefined);
- dir = (__runInitializers(this, _nzDirection_extraInitializers), '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.2", 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.2", 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.OnPush });
- };
- })();
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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.OnPush,
- 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 }]
- }], nzMaskClosable: [{
- type: Input,
- args: [{ transform: booleanAttribute }]
- }], nzMask: [{
- type: Input,
- args: [{ transform: booleanAttribute }]
- }], 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 }]
- }], nzDirection: [] } });
- 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.2", ngImport: i0, type: NzDrawerService, deps: [{ token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerService });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerService, decorators: [{
- type: Injectable
- }], ctorParameters: () => [{ type: i2.Overlay }] });
- /**
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
- class NzDrawerModule {
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, imports: [NzDrawerComponent, NzDrawerContentDirective], exports: [NzDrawerComponent, NzDrawerContentDirective] });
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, providers: [NzDrawerService], imports: [NzDrawerComponent] });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, decorators: [{
- type: NgModule,
- args: [{
- imports: [NzDrawerComponent, NzDrawerContentDirective],
- providers: [NzDrawerService],
- exports: [NzDrawerComponent, NzDrawerContentDirective]
- }]
- }] });
- /**
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
- /**
- * 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=ng-zorro-antd-drawer.mjs.map
|