ng-zorro-antd-drawer.mjs 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. import * as i0 from '@angular/core';
  2. import { Directive, InjectionToken, EventEmitter, inject, Type, Injector, TemplateRef, booleanAttribute, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
  3. import { __esDecorate, __runInitializers } from 'tslib';
  4. import { ESCAPE } from '@angular/cdk/keycodes';
  5. import * as i2 from '@angular/cdk/overlay';
  6. import { OverlayConfig, CdkScrollable } from '@angular/cdk/overlay';
  7. import * as i7 from '@angular/cdk/portal';
  8. import { ComponentPortal, TemplatePortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
  9. import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
  10. import { Subject } from 'rxjs';
  11. import { takeUntil } from 'rxjs/operators';
  12. import { drawerMaskMotion } from 'ng-zorro-antd/core/animation';
  13. import * as i1 from 'ng-zorro-antd/core/config';
  14. import { WithConfig } from 'ng-zorro-antd/core/config';
  15. import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
  16. import * as i5 from 'ng-zorro-antd/core/outlet';
  17. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  18. import { overlayZIndexSetter } from 'ng-zorro-antd/core/overlay';
  19. import { isTemplateRef, toCssPixel } from 'ng-zorro-antd/core/util';
  20. import * as i6 from 'ng-zorro-antd/icon';
  21. import { NzIconModule } from 'ng-zorro-antd/icon';
  22. import * as i3 from '@angular/cdk/a11y';
  23. import * as i4 from '@angular/cdk/bidi';
  24. /**
  25. * Use of this source code is governed by an MIT-style license that can be
  26. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  27. */
  28. class NzDrawerContentDirective {
  29. templateRef;
  30. constructor(templateRef) {
  31. this.templateRef = templateRef;
  32. }
  33. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
  34. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzDrawerContentDirective, isStandalone: true, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"], ngImport: i0 });
  35. }
  36. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerContentDirective, decorators: [{
  37. type: Directive,
  38. args: [{
  39. selector: '[nzDrawerContent]',
  40. exportAs: 'nzDrawerContent'
  41. }]
  42. }], ctorParameters: () => [{ type: i0.TemplateRef }] });
  43. /**
  44. * Use of this source code is governed by an MIT-style license that can be
  45. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  46. */
  47. const DRAWER_DEFAULT_SIZE = 378;
  48. const DRAWER_LARGE_SIZE = 736;
  49. const NZ_DRAWER_DATA = new InjectionToken('NZ_DRAWER_DATA');
  50. /**
  51. * Use of this source code is governed by an MIT-style license that can be
  52. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  53. */
  54. class NzDrawerRef {
  55. }
  56. const DRAWER_ANIMATE_DURATION = 300;
  57. const NZ_CONFIG_MODULE_NAME = 'drawer';
  58. let NzDrawerComponent = (() => {
  59. let _classSuper = NzDrawerRef;
  60. let _nzMaskClosable_decorators;
  61. let _nzMaskClosable_initializers = [];
  62. let _nzMaskClosable_extraInitializers = [];
  63. let _nzMask_decorators;
  64. let _nzMask_initializers = [];
  65. let _nzMask_extraInitializers = [];
  66. let _nzCloseOnNavigation_decorators;
  67. let _nzCloseOnNavigation_initializers = [];
  68. let _nzCloseOnNavigation_extraInitializers = [];
  69. let _nzDirection_decorators;
  70. let _nzDirection_initializers = [];
  71. let _nzDirection_extraInitializers = [];
  72. return class NzDrawerComponent extends _classSuper {
  73. static {
  74. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
  75. _nzMaskClosable_decorators = [WithConfig()];
  76. _nzMask_decorators = [WithConfig()];
  77. _nzCloseOnNavigation_decorators = [WithConfig()];
  78. _nzDirection_decorators = [WithConfig()];
  79. __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);
  80. __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);
  81. __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);
  82. __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);
  83. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  84. }
  85. cdr;
  86. nzConfigService;
  87. renderer;
  88. overlay;
  89. injector;
  90. changeDetectorRef;
  91. focusTrapFactory;
  92. viewContainerRef;
  93. overlayKeyboardDispatcher;
  94. directionality;
  95. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  96. nzContent;
  97. nzCloseIcon = 'close';
  98. nzClosable = true;
  99. nzMaskClosable = __runInitializers(this, _nzMaskClosable_initializers, true);
  100. nzMask = (__runInitializers(this, _nzMaskClosable_extraInitializers), __runInitializers(this, _nzMask_initializers, true));
  101. nzCloseOnNavigation = (__runInitializers(this, _nzMask_extraInitializers), __runInitializers(this, _nzCloseOnNavigation_initializers, true));
  102. nzNoAnimation = (__runInitializers(this, _nzCloseOnNavigation_extraInitializers), false);
  103. nzKeyboard = true;
  104. nzTitle;
  105. nzExtra;
  106. nzFooter;
  107. nzPlacement = 'right';
  108. nzSize = 'default';
  109. nzMaskStyle = {};
  110. nzBodyStyle = {};
  111. nzWrapClassName;
  112. nzWidth;
  113. nzHeight;
  114. nzZIndex = 1000;
  115. nzOffsetX = 0;
  116. nzOffsetY = 0;
  117. componentInstance = null;
  118. componentRef = null;
  119. set nzVisible(value) {
  120. this.isOpen = value;
  121. }
  122. get nzVisible() {
  123. return this.isOpen;
  124. }
  125. nzOnViewInit = new EventEmitter();
  126. nzOnClose = new EventEmitter();
  127. nzVisibleChange = new EventEmitter();
  128. drawerTemplate;
  129. bodyPortalOutlet;
  130. contentFromContentChild;
  131. destroy$ = new Subject();
  132. previouslyFocusedElement;
  133. placementChanging = false;
  134. placementChangeTimeoutId;
  135. nzContentParams; // only service
  136. nzData;
  137. overlayRef;
  138. portal;
  139. focusTrap;
  140. isOpen = false;
  141. inAnimation = false;
  142. templateContext = {
  143. $implicit: undefined,
  144. drawerRef: this
  145. };
  146. isTemplateRef = isTemplateRef;
  147. get offsetTransform() {
  148. if (!this.isOpen || this.nzOffsetX + this.nzOffsetY === 0) {
  149. return null;
  150. }
  151. switch (this.nzPlacement) {
  152. case 'left':
  153. return `translateX(${this.nzOffsetX}px)`;
  154. case 'right':
  155. return `translateX(-${this.nzOffsetX}px)`;
  156. case 'top':
  157. return `translateY(${this.nzOffsetY}px)`;
  158. case 'bottom':
  159. return `translateY(-${this.nzOffsetY}px)`;
  160. }
  161. }
  162. get transform() {
  163. if (this.isOpen) {
  164. return null;
  165. }
  166. switch (this.nzPlacement) {
  167. case 'left':
  168. return `translateX(-100%)`;
  169. case 'right':
  170. return `translateX(100%)`;
  171. case 'top':
  172. return `translateY(-100%)`;
  173. case 'bottom':
  174. return `translateY(100%)`;
  175. }
  176. }
  177. get width() {
  178. if (this.isLeftOrRight) {
  179. const defaultWidth = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
  180. return this.nzWidth === undefined ? toCssPixel(defaultWidth) : toCssPixel(this.nzWidth);
  181. }
  182. return null;
  183. }
  184. get height() {
  185. if (!this.isLeftOrRight) {
  186. const defaultHeight = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
  187. return this.nzHeight === undefined ? toCssPixel(defaultHeight) : toCssPixel(this.nzHeight);
  188. }
  189. return null;
  190. }
  191. get isLeftOrRight() {
  192. return this.nzPlacement === 'left' || this.nzPlacement === 'right';
  193. }
  194. nzAfterOpen = new Subject();
  195. nzAfterClose = new Subject();
  196. get afterOpen() {
  197. return this.nzAfterOpen.asObservable();
  198. }
  199. get afterClose() {
  200. return this.nzAfterClose.asObservable();
  201. }
  202. get isNzContentTemplateRef() {
  203. return isTemplateRef(this.nzContent);
  204. }
  205. // from service config
  206. nzDirection = __runInitializers(this, _nzDirection_initializers, undefined);
  207. dir = (__runInitializers(this, _nzDirection_extraInitializers), 'ltr');
  208. document = inject(DOCUMENT);
  209. constructor(cdr, nzConfigService, renderer, overlay, injector, changeDetectorRef, focusTrapFactory, viewContainerRef, overlayKeyboardDispatcher, directionality) {
  210. super();
  211. this.cdr = cdr;
  212. this.nzConfigService = nzConfigService;
  213. this.renderer = renderer;
  214. this.overlay = overlay;
  215. this.injector = injector;
  216. this.changeDetectorRef = changeDetectorRef;
  217. this.focusTrapFactory = focusTrapFactory;
  218. this.viewContainerRef = viewContainerRef;
  219. this.overlayKeyboardDispatcher = overlayKeyboardDispatcher;
  220. this.directionality = directionality;
  221. }
  222. ngOnInit() {
  223. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  224. this.dir = direction;
  225. this.cdr.detectChanges();
  226. });
  227. this.dir = this.nzDirection || this.directionality.value;
  228. this.attachOverlay();
  229. this.updateOverlayStyle();
  230. this.updateBodyOverflow();
  231. this.templateContext = { $implicit: this.nzData || this.nzContentParams, drawerRef: this };
  232. this.changeDetectorRef.detectChanges();
  233. }
  234. ngAfterViewInit() {
  235. this.attachBodyContent();
  236. // The `setTimeout` triggers change detection. There's no sense to schedule the DOM timer if anyone is
  237. // listening to the `nzOnViewInit` event inside the template, for instance `<nz-drawer (nzOnViewInit)="...">`.
  238. if (this.nzOnViewInit.observers.length) {
  239. setTimeout(() => {
  240. this.nzOnViewInit.emit();
  241. });
  242. }
  243. }
  244. ngOnChanges(changes) {
  245. const { nzPlacement, nzVisible } = changes;
  246. if (nzVisible) {
  247. const value = changes.nzVisible.currentValue;
  248. if (value) {
  249. this.open();
  250. }
  251. else {
  252. this.close();
  253. }
  254. }
  255. if (nzPlacement && !nzPlacement.isFirstChange()) {
  256. this.triggerPlacementChangeCycleOnce();
  257. }
  258. }
  259. ngOnDestroy() {
  260. this.destroy$.next();
  261. this.destroy$.complete();
  262. clearTimeout(this.placementChangeTimeoutId);
  263. this.disposeOverlay();
  264. }
  265. getAnimationDuration() {
  266. return this.nzNoAnimation ? 0 : DRAWER_ANIMATE_DURATION;
  267. }
  268. // Disable the transition animation temporarily when the placement changing
  269. triggerPlacementChangeCycleOnce() {
  270. if (!this.nzNoAnimation) {
  271. this.placementChanging = true;
  272. this.changeDetectorRef.markForCheck();
  273. clearTimeout(this.placementChangeTimeoutId);
  274. this.placementChangeTimeoutId = setTimeout(() => {
  275. this.placementChanging = false;
  276. this.changeDetectorRef.markForCheck();
  277. }, this.getAnimationDuration());
  278. }
  279. }
  280. close(result) {
  281. this.isOpen = false;
  282. this.inAnimation = true;
  283. this.nzVisibleChange.emit(false);
  284. this.updateOverlayStyle();
  285. this.overlayKeyboardDispatcher.remove(this.overlayRef);
  286. this.changeDetectorRef.detectChanges();
  287. setTimeout(() => {
  288. this.updateBodyOverflow();
  289. this.restoreFocus();
  290. this.inAnimation = false;
  291. this.nzAfterClose.next(result);
  292. this.nzAfterClose.complete();
  293. this.componentInstance = null;
  294. this.componentRef = null;
  295. }, this.getAnimationDuration());
  296. }
  297. open() {
  298. this.attachOverlay();
  299. this.isOpen = true;
  300. this.inAnimation = true;
  301. this.nzVisibleChange.emit(true);
  302. this.overlayKeyboardDispatcher.add(this.overlayRef);
  303. this.updateOverlayStyle();
  304. this.updateBodyOverflow();
  305. this.savePreviouslyFocusedElement();
  306. this.trapFocus();
  307. this.changeDetectorRef.detectChanges();
  308. setTimeout(() => {
  309. this.inAnimation = false;
  310. this.changeDetectorRef.detectChanges();
  311. this.nzAfterOpen.next();
  312. }, this.getAnimationDuration());
  313. }
  314. getContentComponent() {
  315. return this.componentInstance;
  316. }
  317. getContentComponentRef() {
  318. return this.componentRef;
  319. }
  320. closeClick() {
  321. this.nzOnClose.emit();
  322. }
  323. maskClick() {
  324. if (this.nzMaskClosable && this.nzMask) {
  325. this.nzOnClose.emit();
  326. }
  327. }
  328. attachBodyContent() {
  329. this.bodyPortalOutlet.dispose();
  330. if (this.nzContent instanceof Type) {
  331. const childInjector = Injector.create({
  332. parent: this.injector,
  333. providers: [
  334. { provide: NzDrawerRef, useValue: this },
  335. { provide: NZ_DRAWER_DATA, useValue: this.nzData }
  336. ]
  337. });
  338. const componentPortal = new ComponentPortal(this.nzContent, null, childInjector);
  339. this.componentRef = this.bodyPortalOutlet.attachComponentPortal(componentPortal);
  340. this.componentInstance = this.componentRef.instance;
  341. /**TODO
  342. * When nzContentParam will be remove in the next major version, we have to remove the following line
  343. * **/
  344. Object.assign(this.componentRef.instance, this.nzData || this.nzContentParams);
  345. this.componentRef.changeDetectorRef.detectChanges();
  346. }
  347. }
  348. attachOverlay() {
  349. if (!this.overlayRef) {
  350. this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
  351. this.overlayRef = this.overlay.create(this.getOverlayConfig());
  352. overlayZIndexSetter(this.overlayRef, this.nzZIndex);
  353. }
  354. if (this.overlayRef && !this.overlayRef.hasAttached()) {
  355. this.overlayRef.attach(this.portal);
  356. this.overlayRef.keydownEvents()
  357. .pipe(takeUntil(this.destroy$))
  358. .subscribe((event) => {
  359. if (event.keyCode === ESCAPE && this.isOpen && this.nzKeyboard) {
  360. this.nzOnClose.emit();
  361. }
  362. });
  363. this.overlayRef
  364. .detachments()
  365. .pipe(takeUntil(this.destroy$))
  366. .subscribe(() => {
  367. this.close();
  368. this.disposeOverlay();
  369. });
  370. }
  371. }
  372. disposeOverlay() {
  373. this.overlayRef?.dispose();
  374. this.overlayRef = null;
  375. }
  376. getOverlayConfig() {
  377. return new OverlayConfig({
  378. disposeOnNavigation: this.nzCloseOnNavigation,
  379. positionStrategy: this.overlay.position().global(),
  380. scrollStrategy: this.overlay.scrollStrategies.block()
  381. });
  382. }
  383. updateOverlayStyle() {
  384. if (this.overlayRef && this.overlayRef.overlayElement) {
  385. this.renderer.setStyle(this.overlayRef.overlayElement, 'pointer-events', this.isOpen ? 'auto' : 'none');
  386. }
  387. }
  388. updateBodyOverflow() {
  389. if (this.overlayRef) {
  390. if (this.isOpen) {
  391. this.overlayRef.getConfig().scrollStrategy.enable();
  392. }
  393. else {
  394. this.overlayRef.getConfig().scrollStrategy.disable();
  395. }
  396. }
  397. }
  398. savePreviouslyFocusedElement() {
  399. if (this.document && !this.previouslyFocusedElement) {
  400. this.previouslyFocusedElement = this.document.activeElement;
  401. // We need the extra check, because IE's svg element has no blur method.
  402. if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.blur === 'function') {
  403. this.previouslyFocusedElement.blur();
  404. }
  405. }
  406. }
  407. trapFocus() {
  408. if (!this.focusTrap && this.overlayRef && this.overlayRef.overlayElement) {
  409. this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
  410. this.focusTrap.focusInitialElement();
  411. }
  412. }
  413. restoreFocus() {
  414. // We need the extra check, because IE can set the `activeElement` to null in some cases.
  415. if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
  416. this.previouslyFocusedElement.focus();
  417. this.previouslyFocusedElement = undefined;
  418. }
  419. if (this.focusTrap) {
  420. this.focusTrap.destroy();
  421. }
  422. }
  423. 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 });
  424. 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: `
  425. <ng-template #drawerTemplate>
  426. <div
  427. class="ant-drawer"
  428. [nzNoAnimation]="nzNoAnimation"
  429. [class.ant-drawer-rtl]="dir === 'rtl'"
  430. [class.ant-drawer-open]="isOpen"
  431. [class.no-mask]="!nzMask"
  432. [class.ant-drawer-top]="nzPlacement === 'top'"
  433. [class.ant-drawer-bottom]="nzPlacement === 'bottom'"
  434. [class.ant-drawer-right]="nzPlacement === 'right'"
  435. [class.ant-drawer-left]="nzPlacement === 'left'"
  436. [style.transform]="offsetTransform"
  437. [style.transition]="placementChanging ? 'none' : null"
  438. [style.zIndex]="nzZIndex"
  439. >
  440. @if (nzMask && isOpen) {
  441. <div @drawerMaskMotion class="ant-drawer-mask" (click)="maskClick()" [style]="nzMaskStyle"></div>
  442. }
  443. <div
  444. class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
  445. [style.width]="width"
  446. [style.height]="height"
  447. [style.transform]="transform"
  448. [style.transition]="placementChanging ? 'none' : null"
  449. >
  450. <div class="ant-drawer-content">
  451. <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
  452. @if (nzTitle || nzClosable) {
  453. <div class="ant-drawer-header" [class.ant-drawer-header-close-only]="!nzTitle">
  454. <div class="ant-drawer-header-title">
  455. @if (nzClosable) {
  456. <button (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
  457. <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
  458. <nz-icon [nzType]="closeIcon" />
  459. </ng-container>
  460. </button>
  461. }
  462. @if (nzTitle) {
  463. <div class="ant-drawer-title">
  464. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  465. </div>
  466. }
  467. </div>
  468. @if (nzExtra) {
  469. <div class="ant-drawer-extra">
  470. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  471. </div>
  472. }
  473. </div>
  474. }
  475. <div class="ant-drawer-body" [style]="nzBodyStyle" cdkScrollable>
  476. <ng-template cdkPortalOutlet />
  477. @if (nzContent) {
  478. @if (isTemplateRef(nzContent)) {
  479. <ng-container *ngTemplateOutlet="nzContent; context: templateContext" />
  480. }
  481. } @else {
  482. @if (contentFromContentChild && (isOpen || inAnimation)) {
  483. <ng-template [ngTemplateOutlet]="contentFromContentChild" />
  484. }
  485. }
  486. </div>
  487. @if (nzFooter) {
  488. <div class="ant-drawer-footer">
  489. <ng-container *nzStringTemplateOutlet="nzFooter">{{ nzFooter }}</ng-container>
  490. </div>
  491. }
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. </ng-template>
  497. `, 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 });
  498. };
  499. })();
  500. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerComponent, decorators: [{
  501. type: Component,
  502. args: [{
  503. selector: 'nz-drawer',
  504. exportAs: 'nzDrawer',
  505. template: `
  506. <ng-template #drawerTemplate>
  507. <div
  508. class="ant-drawer"
  509. [nzNoAnimation]="nzNoAnimation"
  510. [class.ant-drawer-rtl]="dir === 'rtl'"
  511. [class.ant-drawer-open]="isOpen"
  512. [class.no-mask]="!nzMask"
  513. [class.ant-drawer-top]="nzPlacement === 'top'"
  514. [class.ant-drawer-bottom]="nzPlacement === 'bottom'"
  515. [class.ant-drawer-right]="nzPlacement === 'right'"
  516. [class.ant-drawer-left]="nzPlacement === 'left'"
  517. [style.transform]="offsetTransform"
  518. [style.transition]="placementChanging ? 'none' : null"
  519. [style.zIndex]="nzZIndex"
  520. >
  521. @if (nzMask && isOpen) {
  522. <div @drawerMaskMotion class="ant-drawer-mask" (click)="maskClick()" [style]="nzMaskStyle"></div>
  523. }
  524. <div
  525. class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
  526. [style.width]="width"
  527. [style.height]="height"
  528. [style.transform]="transform"
  529. [style.transition]="placementChanging ? 'none' : null"
  530. >
  531. <div class="ant-drawer-content">
  532. <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
  533. @if (nzTitle || nzClosable) {
  534. <div class="ant-drawer-header" [class.ant-drawer-header-close-only]="!nzTitle">
  535. <div class="ant-drawer-header-title">
  536. @if (nzClosable) {
  537. <button (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
  538. <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
  539. <nz-icon [nzType]="closeIcon" />
  540. </ng-container>
  541. </button>
  542. }
  543. @if (nzTitle) {
  544. <div class="ant-drawer-title">
  545. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  546. </div>
  547. }
  548. </div>
  549. @if (nzExtra) {
  550. <div class="ant-drawer-extra">
  551. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  552. </div>
  553. }
  554. </div>
  555. }
  556. <div class="ant-drawer-body" [style]="nzBodyStyle" cdkScrollable>
  557. <ng-template cdkPortalOutlet />
  558. @if (nzContent) {
  559. @if (isTemplateRef(nzContent)) {
  560. <ng-container *ngTemplateOutlet="nzContent; context: templateContext" />
  561. }
  562. } @else {
  563. @if (contentFromContentChild && (isOpen || inAnimation)) {
  564. <ng-template [ngTemplateOutlet]="contentFromContentChild" />
  565. }
  566. }
  567. </div>
  568. @if (nzFooter) {
  569. <div class="ant-drawer-footer">
  570. <ng-container *nzStringTemplateOutlet="nzFooter">{{ nzFooter }}</ng-container>
  571. </div>
  572. }
  573. </div>
  574. </div>
  575. </div>
  576. </div>
  577. </ng-template>
  578. `,
  579. preserveWhitespaces: false,
  580. changeDetection: ChangeDetectionStrategy.OnPush,
  581. animations: [drawerMaskMotion],
  582. imports: [NzNoAnimationDirective, NzOutletModule, NzIconModule, PortalModule, NgTemplateOutlet, CdkScrollable]
  583. }]
  584. }], 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: [{
  585. type: Input
  586. }], nzCloseIcon: [{
  587. type: Input
  588. }], nzClosable: [{
  589. type: Input,
  590. args: [{ transform: booleanAttribute }]
  591. }], nzMaskClosable: [{
  592. type: Input,
  593. args: [{ transform: booleanAttribute }]
  594. }], nzMask: [{
  595. type: Input,
  596. args: [{ transform: booleanAttribute }]
  597. }], nzCloseOnNavigation: [{
  598. type: Input,
  599. args: [{ transform: booleanAttribute }]
  600. }], nzNoAnimation: [{
  601. type: Input,
  602. args: [{ transform: booleanAttribute }]
  603. }], nzKeyboard: [{
  604. type: Input,
  605. args: [{ transform: booleanAttribute }]
  606. }], nzTitle: [{
  607. type: Input
  608. }], nzExtra: [{
  609. type: Input
  610. }], nzFooter: [{
  611. type: Input
  612. }], nzPlacement: [{
  613. type: Input
  614. }], nzSize: [{
  615. type: Input
  616. }], nzMaskStyle: [{
  617. type: Input
  618. }], nzBodyStyle: [{
  619. type: Input
  620. }], nzWrapClassName: [{
  621. type: Input
  622. }], nzWidth: [{
  623. type: Input
  624. }], nzHeight: [{
  625. type: Input
  626. }], nzZIndex: [{
  627. type: Input
  628. }], nzOffsetX: [{
  629. type: Input
  630. }], nzOffsetY: [{
  631. type: Input
  632. }], nzVisible: [{
  633. type: Input,
  634. args: [{ transform: booleanAttribute }]
  635. }], nzOnViewInit: [{
  636. type: Output
  637. }], nzOnClose: [{
  638. type: Output
  639. }], nzVisibleChange: [{
  640. type: Output
  641. }], drawerTemplate: [{
  642. type: ViewChild,
  643. args: ['drawerTemplate', { static: true }]
  644. }], bodyPortalOutlet: [{
  645. type: ViewChild,
  646. args: [CdkPortalOutlet, { static: false }]
  647. }], contentFromContentChild: [{
  648. type: ContentChild,
  649. args: [NzDrawerContentDirective, { static: true, read: TemplateRef }]
  650. }], nzDirection: [] } });
  651. class DrawerBuilderForService {
  652. overlay;
  653. options;
  654. drawerRef;
  655. overlayRef;
  656. unsubscribe$ = new Subject();
  657. constructor(overlay, options) {
  658. this.overlay = overlay;
  659. this.options = options;
  660. /** pick {@link NzDrawerOptions.nzOnCancel} and omit this option */
  661. const { nzOnCancel, ...componentOption } = this.options;
  662. this.overlayRef = this.overlay.create();
  663. this.drawerRef = this.overlayRef.attach(new ComponentPortal(NzDrawerComponent)).instance;
  664. this.updateOptions(componentOption);
  665. // Prevent repeatedly open drawer when tap focus element.
  666. this.drawerRef.savePreviouslyFocusedElement();
  667. this.drawerRef.nzOnViewInit.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
  668. this.drawerRef.open();
  669. });
  670. this.drawerRef.nzOnClose.subscribe(() => {
  671. if (nzOnCancel) {
  672. nzOnCancel().then(canClose => {
  673. if (canClose !== false) {
  674. this.drawerRef.close();
  675. }
  676. });
  677. }
  678. else {
  679. this.drawerRef.close();
  680. }
  681. });
  682. this.drawerRef.afterClose.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
  683. this.overlayRef.dispose();
  684. this.drawerRef = null;
  685. this.unsubscribe$.next();
  686. this.unsubscribe$.complete();
  687. });
  688. }
  689. getInstance() {
  690. return this.drawerRef;
  691. }
  692. updateOptions(options) {
  693. Object.assign(this.drawerRef, options);
  694. }
  695. }
  696. class NzDrawerService {
  697. overlay;
  698. constructor(overlay) {
  699. this.overlay = overlay;
  700. }
  701. create(options) {
  702. return new DrawerBuilderForService(this.overlay, options).getInstance();
  703. }
  704. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerService, deps: [{ token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
  705. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerService });
  706. }
  707. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerService, decorators: [{
  708. type: Injectable
  709. }], ctorParameters: () => [{ type: i2.Overlay }] });
  710. /**
  711. * Use of this source code is governed by an MIT-style license that can be
  712. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  713. */
  714. class NzDrawerModule {
  715. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  716. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, imports: [NzDrawerComponent, NzDrawerContentDirective], exports: [NzDrawerComponent, NzDrawerContentDirective] });
  717. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, providers: [NzDrawerService], imports: [NzDrawerComponent] });
  718. }
  719. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDrawerModule, decorators: [{
  720. type: NgModule,
  721. args: [{
  722. imports: [NzDrawerComponent, NzDrawerContentDirective],
  723. providers: [NzDrawerService],
  724. exports: [NzDrawerComponent, NzDrawerContentDirective]
  725. }]
  726. }] });
  727. /**
  728. * Use of this source code is governed by an MIT-style license that can be
  729. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  730. */
  731. /**
  732. * Generated bundle index. Do not edit.
  733. */
  734. export { DRAWER_ANIMATE_DURATION, DRAWER_DEFAULT_SIZE, DRAWER_LARGE_SIZE, DrawerBuilderForService, NZ_DRAWER_DATA, NzDrawerComponent, NzDrawerContentDirective, NzDrawerModule, NzDrawerRef, NzDrawerService };
  735. //# sourceMappingURL=ng-zorro-antd-drawer.mjs.map