UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

9 lines 12.9 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/a11y"),require("@angular/common"),require("ng-zorro-antd/core"),require("ng-zorro-antd/icon"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-zorro-antd/drawer",["exports","@angular/cdk/a11y","@angular/common","ng-zorro-antd/core","ng-zorro-antd/icon","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","rxjs","rxjs/operators"],t):t((e["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].drawer={}),e.ng.cdk.a11y,e.ng.common,e["ng-zorro-antd"].core,e["ng-zorro-antd"].icon,e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.rxjs,e.rxjs.operators)}(this,function(e,t,n,r,o,a,i,l,c,s){"use strict";var p=function(e,t){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function u(e,t,n,r){var o,a=arguments.length,i=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;0<=s;s--)(o=e[s])&&(i=(a<3?o(i):3<a?o(t,n,i):o(t,n))||i);return 3<a&&i&&Object.defineProperty(t,n,i),i}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)} /** * @license * Copyright Alibaba.com All Rights Reserved. * * 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 */function y(){}var d,h=(function C(e,t){function n(){this.constructor=e}p(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(g,d=y),Object.defineProperty(g.prototype,"nzVisible",{get:function(){return this.isOpen},set:function(e){this.isOpen=e},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"offsetTransform",{get:function(){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)"}},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"transform",{get:function(){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%)"}},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"width",{get:function(){return this.isLeftOrRight?r.toCssPixel(this.nzWidth):null},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"height",{get:function(){return this.isLeftOrRight?null:r.toCssPixel(this.nzHeight)},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"isLeftOrRight",{get:function(){return"left"===this.nzPlacement||"right"===this.nzPlacement},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"afterOpen",{get:function(){return this.nzAfterOpen.asObservable()},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"afterClose",{get:function(){return this.nzAfterClose.asObservable()},enumerable:!0,configurable:!0}),g.prototype.isTemplateRef=function(e){return e instanceof l.TemplateRef},g.prototype.ngOnInit=function(){this.attachOverlay(),this.updateOverlayStyle(),this.updateBodyOverflow(),this.templateContext={$implicit:this.nzContentParams,drawerRef:this},this.changeDetectorRef.detectChanges()},g.prototype.ngAfterViewInit=function(){var e=this;this.attachBodyContent(),setTimeout(function(){e.nzOnViewInit.emit()})},g.prototype.ngOnChanges=function(e){var t=this;if(e.hasOwnProperty("nzVisible")){var n=e.nzVisible.currentValue;this.updateOverlayStyle(),n?(this.updateBodyOverflow(),this.savePreviouslyFocusedElement(),this.trapFocus()):setTimeout(function(){t.updateBodyOverflow(),t.restoreFocus()},this.getAnimationDuration())}},g.prototype.ngOnDestroy=function(){this.disposeOverlay()},g.prototype.getAnimationDuration=function(){return this.nzNoAnimation?0:300},g.prototype.close=function(e){var t=this;this.isOpen=!1,this.updateOverlayStyle(),this.changeDetectorRef.detectChanges(),setTimeout(function(){t.updateBodyOverflow(),t.restoreFocus(),t.nzAfterClose.next(e),t.nzAfterClose.complete()},this.getAnimationDuration())},g.prototype.open=function(){var e=this;this.isOpen=!0,this.updateOverlayStyle(),this.updateBodyOverflow(),this.savePreviouslyFocusedElement(),this.trapFocus(),this.changeDetectorRef.detectChanges(),setTimeout(function(){e.nzAfterOpen.next()},this.getAnimationDuration())},g.prototype.closeClick=function(){this.nzOnClose.emit()},g.prototype.maskClick=function(){this.nzMaskClosable&&this.nzMask&&this.nzOnClose.emit()},g.prototype.attachBodyContent=function(){if(this.bodyPortalOutlet.dispose(),this.nzContent instanceof l.Type){var e=new i.PortalInjector(this.injector,new WeakMap([[y,this]])),t=new i.ComponentPortal(this.nzContent,null,e),n=this.bodyPortalOutlet.attachComponentPortal(t);Object.assign(n.instance,this.nzContentParams),n.changeDetectorRef.detectChanges()}},g.prototype.attachOverlay=function(){this.overlayRef||(this.portal=new i.TemplatePortal(this.drawerTemplate,this.viewContainerRef),this.overlayRef=this.overlay.create(this.getOverlayConfig())),this.overlayRef&&!this.overlayRef.hasAttached()&&this.overlayRef.attach(this.portal)},g.prototype.disposeOverlay=function(){this.overlayRef&&this.overlayRef.dispose(),this.overlayRef=null},g.prototype.getOverlayConfig=function(){return new a.OverlayConfig({positionStrategy:this.overlay.position().global(),scrollStrategy:this.overlay.scrollStrategies.block()})},g.prototype.updateOverlayStyle=function(){this.overlayRef&&this.overlayRef.overlayElement&&this.renderer.setStyle(this.overlayRef.overlayElement,"pointer-events",this.isOpen?"auto":"none")},g.prototype.updateBodyOverflow=function(){this.overlayRef&&(this.isOpen?this.overlayRef.getConfig().scrollStrategy.enable():this.overlayRef.getConfig().scrollStrategy.disable())},g.prototype.savePreviouslyFocusedElement=function(){this.document&&!this.previouslyFocusedElement&&(this.previouslyFocusedElement=this.document.activeElement,this.previouslyFocusedElement&&"function"==typeof this.previouslyFocusedElement.blur&&this.previouslyFocusedElement.blur())},g.prototype.trapFocus=function(){!this.focusTrap&&this.overlayRef&&this.overlayRef.overlayElement&&(this.focusTrap=this.focusTrapFactory.create(this.overlayRef.overlayElement),this.focusTrap.focusInitialElement())},g.prototype.restoreFocus=function(){this.previouslyFocusedElement&&"function"==typeof this.previouslyFocusedElement.focus&&this.previouslyFocusedElement.focus(),this.focusTrap&&this.focusTrap.destroy()},g.decorators=[{type:l.Component,args:[{selector:"nz-drawer",exportAs:"nzDrawer",template:'<ng-template #drawerTemplate>\n <div\n class="ant-drawer"\n [nzNoAnimation]="nzNoAnimation"\n [class.ant-drawer-open]="isOpen"\n [class.ant-drawer-top]="nzPlacement === \'top\'"\n [class.ant-drawer-bottom]="nzPlacement === \'bottom\'"\n [class.ant-drawer-right]="nzPlacement === \'right\'"\n [class.ant-drawer-left]="nzPlacement === \'left\'"\n [style.transform]="offsetTransform"\n [style.zIndex]="nzZIndex">\n <div class="ant-drawer-mask" (click)="maskClick()" *ngIf="nzMask" [ngStyle]="nzMaskStyle"></div>\n <div class="ant-drawer-content-wrapper {{ nzWrapClassName }}"\n [style.width]="width"\n [style.height]="height"\n [style.transform]="transform">\n <div class="ant-drawer-content">\n <div class="ant-drawer-wrapper-body"\n [style.overflow]="isLeftOrRight ? \'auto\' : null"\n [style.height]="isLeftOrRight ? \'100%\' : null">\n <div *ngIf="nzTitle" class="ant-drawer-header">\n <div class="ant-drawer-title">\n <ng-container *nzStringTemplateOutlet="nzTitle"><div [innerHTML]="nzTitle"></div></ng-container>\n </div>\n </div>\n <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close">\n <span class="ant-drawer-close-x"><i nz-icon type="close"></i></span>\n </button>\n <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container *ngIf="isTemplateRef(nzContent)">\n <ng-container *ngTemplateOutlet="nzContent; context: templateContext"></ng-container>\n </ng-container>\n <ng-content *ngIf="!nzContent"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>',preserveWhitespaces:!1,changeDetection:l.ChangeDetectionStrategy.OnPush}]}],g.ctorParameters=function(){return[{type:undefined,decorators:[{type:l.Optional},{type:l.Inject,args:[n.DOCUMENT]}]},{type:l.Renderer2},{type:a.Overlay},{type:l.Injector},{type:l.ChangeDetectorRef},{type:t.FocusTrapFactory},{type:l.ViewContainerRef}]},g.propDecorators={nzContent:[{type:l.Input}],nzClosable:[{type:l.Input}],nzMaskClosable:[{type:l.Input}],nzMask:[{type:l.Input}],nzNoAnimation:[{type:l.Input}],nzTitle:[{type:l.Input}],nzPlacement:[{type:l.Input}],nzMaskStyle:[{type:l.Input}],nzBodyStyle:[{type:l.Input}],nzWrapClassName:[{type:l.Input}],nzWidth:[{type:l.Input}],nzHeight:[{type:l.Input}],nzZIndex:[{type:l.Input}],nzOffsetX:[{type:l.Input}],nzOffsetY:[{type:l.Input}],nzVisible:[{type:l.Input}],nzOnViewInit:[{type:l.Output}],nzOnClose:[{type:l.Output}],drawerTemplate:[{type:l.ViewChild,args:["drawerTemplate"]}],contentTemplate:[{type:l.ViewChild,args:["contentTemplate"]}],bodyPortalOutlet:[{type:l.ViewChild,args:[i.CdkPortalOutlet]}]},u([r.InputBoolean(),f("design:type",Object)],g.prototype,"nzClosable",void 0),u([r.InputBoolean(),f("design:type",Object)],g.prototype,"nzMaskClosable",void 0),u([r.InputBoolean(),f("design:type",Object)],g.prototype,"nzMask",void 0),u([r.InputBoolean(),f("design:type",Object)],g.prototype,"nzNoAnimation",void 0),g);function g(e,t,n,r,o,a,i){var s=d.call(this)||this;return s.document=e,s.renderer=t,s.overlay=n,s.injector=r,s.changeDetectorRef=o,s.focusTrapFactory=a,s.viewContainerRef=i,s.nzClosable=!0,s.nzMaskClosable=!0,s.nzMask=!0,s.nzNoAnimation=!1,s.nzPlacement="right",s.nzMaskStyle={},s.nzBodyStyle={},s.nzWidth=256,s.nzHeight=256,s.nzZIndex=1e3,s.nzOffsetX=0,s.nzOffsetY=0,s.nzOnViewInit=new l.EventEmitter,s.nzOnClose=new l.EventEmitter,s.isOpen=!1,s.templateContext={$implicit:undefined,drawerRef:s},s.nzAfterOpen=new c.Subject,s.nzAfterClose=new c.Subject,s}var v=(m.prototype.getInstance=function(){return this.drawerRef&&this.drawerRef.instance},m.prototype.createDrawer=function(){this.overlayRef=this.overlay.create(),this.drawerRef=this.overlayRef.attach(new i.ComponentPortal(h))},m.prototype.updateOptions=function(e){Object.assign(this.drawerRef.instance,e)},m);function m(e,t){var n=this;this.overlay=e,this.options=t,this.unsubscribe$=new c.Subject;var r=this.options,o=r.nzOnCancel,a=function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}(r,["nzOnCancel"]);this.createDrawer(),this.updateOptions(a),this.drawerRef.instance.savePreviouslyFocusedElement(),this.drawerRef.instance.nzOnViewInit.pipe(s.takeUntil(this.unsubscribe$)).subscribe(function(){n.drawerRef.instance.open()}),this.drawerRef.instance.nzOnClose.subscribe(function(){o?o().then(function(e){!1!==e&&n.drawerRef.instance.close()}):n.drawerRef.instance.close()}),this.drawerRef.instance.afterClose.pipe(s.takeUntil(this.unsubscribe$)).subscribe(function(){n.overlayRef.dispose(),n.drawerRef=null,n.unsubscribe$.next(),n.unsubscribe$.complete()})}var O=(z.prototype.create=function(e){return new v(this.overlay,e).getInstance()},z.decorators=[{type:l.Injectable,args:[{providedIn:"root"}]}],z.ctorParameters=function(){return[{type:a.Overlay}]},z.ngInjectableDef=l.defineInjectable({factory:function(){return new z(l.inject(a.Overlay))},token:z,providedIn:"root"}),z);function z(e){this.overlay=e}var b=(w.decorators=[{type:l.NgModule,args:[{imports:[n.CommonModule,a.OverlayModule,i.PortalModule,o.NzIconModule,r.NzAddOnModule,r.NzNoAnimationModule],exports:[h],declarations:[h],entryComponents:[h],providers:[O]}]}],w);function w(){}e.DRAWER_ANIMATE_DURATION=300,e.NzDrawerComponent=h,e.NzDrawerModule=b,e.DrawerBuilderForService=v,e.NzDrawerService=O,e.NzDrawerRef=y,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-drawer.umd.min.js.map