UNPKG

ng-zorro-antd

Version:

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

389 lines (382 loc) 13.1 kB
import { __assign } from 'tslib'; import { fromEvent, Subject } from 'rxjs'; import { auditTime, takeUntil, startWith } from 'rxjs/operators'; import { NzUpdateHostClassService, isNotNil } from 'ng-zorro-antd/core'; import { MediaMatcher, LayoutModule } from '@angular/cdk/layout'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CommonModule } from '@angular/common'; import { Directive, ElementRef, Input, NgZone, Renderer2, Host, Optional, NgModule } from '@angular/core'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @enum {number} */ var Breakpoint = { 'xxl': 0, 'xl': 1, 'lg': 2, 'md': 3, 'sm': 4, 'xs': 5, }; Breakpoint[Breakpoint['xxl']] = 'xxl'; Breakpoint[Breakpoint['xl']] = 'xl'; Breakpoint[Breakpoint['lg']] = 'lg'; Breakpoint[Breakpoint['md']] = 'md'; Breakpoint[Breakpoint['sm']] = 'sm'; Breakpoint[Breakpoint['xs']] = 'xs'; /** @type {?} */ var responsiveMap = { xs: '(max-width: 575px)', sm: '(min-width: 576px)', md: '(min-width: 768px)', lg: '(min-width: 992px)', xl: '(min-width: 1200px)', xxl: '(min-width: 1600px)' }; var NzRowDirective = /** @class */ (function () { function NzRowDirective(elementRef, renderer, nzUpdateHostClassService, mediaMatcher, ngZone, platform) { this.elementRef = elementRef; this.renderer = renderer; this.nzUpdateHostClassService = nzUpdateHostClassService; this.mediaMatcher = mediaMatcher; this.ngZone = ngZone; this.platform = platform; this.nzAlign = 'top'; this.nzJustify = 'start'; this.el = this.elementRef.nativeElement; this.prefixCls = 'ant-row'; this.actualGutter$ = new Subject(); this.destroy$ = new Subject(); } /** * @return {?} */ NzRowDirective.prototype.calculateGutter = /** * @return {?} */ function () { if (typeof this.nzGutter !== 'object') { return this.nzGutter; } else if (this.breakPoint && this.nzGutter[this.breakPoint]) { return this.nzGutter[this.breakPoint]; } else { return 0; } }; /** * @return {?} */ NzRowDirective.prototype.updateGutter = /** * @return {?} */ function () { /** @type {?} */ var actualGutter = this.calculateGutter(); if (this.actualGutter !== actualGutter) { this.actualGutter = actualGutter; this.actualGutter$.next(this.actualGutter); this.renderer.setStyle(this.el, 'margin-left', "-" + this.actualGutter / 2 + "px"); this.renderer.setStyle(this.el, 'margin-right', "-" + this.actualGutter / 2 + "px"); } }; /** * @return {?} */ NzRowDirective.prototype.watchMedia = /** * @return {?} */ function () { var _this = this; // @ts-ignore Object.keys(responsiveMap).map((/** * @param {?} screen * @return {?} */ function (screen) { /** @type {?} */ var matchBelow = _this.mediaMatcher.matchMedia(responsiveMap[screen]).matches; if (matchBelow) { _this.breakPoint = screen; } })); this.updateGutter(); }; /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/ /** * temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 * @return {?} */ NzRowDirective.prototype.setClassMap = /** * temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 * @return {?} */ function () { var _a; /** @type {?} */ var classMap = (_a = {}, _a["" + this.prefixCls] = !this.nzType, _a[this.prefixCls + "-" + this.nzType] = this.nzType, _a[this.prefixCls + "-" + this.nzType + "-" + this.nzAlign] = this.nzType && this.nzAlign, _a[this.prefixCls + "-" + this.nzType + "-" + this.nzJustify] = this.nzType && this.nzJustify, _a); this.nzUpdateHostClassService.updateHostClass(this.el, classMap); }; /** * @return {?} */ NzRowDirective.prototype.ngOnInit = /** * @return {?} */ function () { this.setClassMap(); this.watchMedia(); }; /** * @param {?} changes * @return {?} */ NzRowDirective.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.nzType || changes.nzAlign || changes.nzJustify) { this.setClassMap(); } if (changes.nzGutter) { this.updateGutter(); } }; /** * @return {?} */ NzRowDirective.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; if (this.platform.isBrowser) { this.ngZone.runOutsideAngular((/** * @return {?} */ function () { fromEvent(window, 'resize') .pipe(auditTime(16), takeUntil(_this.destroy$)) .subscribe((/** * @return {?} */ function () { return _this.watchMedia(); })); })); } }; /** * @return {?} */ NzRowDirective.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; NzRowDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-row],nz-row', exportAs: 'nzRow', providers: [NzUpdateHostClassService] },] } ]; /** @nocollapse */ NzRowDirective.ctorParameters = function () { return [ { type: ElementRef }, { type: Renderer2 }, { type: NzUpdateHostClassService }, { type: MediaMatcher }, { type: NgZone }, { type: Platform } ]; }; NzRowDirective.propDecorators = { nzType: [{ type: Input }], nzAlign: [{ type: Input }], nzJustify: [{ type: Input }], nzGutter: [{ type: Input }] }; return NzRowDirective; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzColDirective = /** @class */ (function () { function NzColDirective(nzUpdateHostClassService, elementRef, nzRowDirective, renderer) { this.nzUpdateHostClassService = nzUpdateHostClassService; this.elementRef = elementRef; this.nzRowDirective = nzRowDirective; this.renderer = renderer; this.el = this.elementRef.nativeElement; this.prefixCls = 'ant-col'; this.destroy$ = new Subject(); } /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/ // tslint:disable-line:no-any /** * temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 * @return {?} */ NzColDirective.prototype.setClassMap = // tslint:disable-line:no-any /** * temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 * @return {?} */ function () { var _a; /** @type {?} */ var classMap = __assign((_a = {}, _a[this.prefixCls + "-" + this.nzSpan] = isNotNil(this.nzSpan), _a[this.prefixCls + "-order-" + this.nzOrder] = isNotNil(this.nzOrder), _a[this.prefixCls + "-offset-" + this.nzOffset] = isNotNil(this.nzOffset), _a[this.prefixCls + "-pull-" + this.nzPull] = isNotNil(this.nzPull), _a[this.prefixCls + "-push-" + this.nzPush] = isNotNil(this.nzPush), _a), this.generateClass()); this.nzUpdateHostClassService.updateHostClass(this.el, classMap); }; /** * @return {?} */ NzColDirective.prototype.generateClass = /** * @return {?} */ function () { var _this = this; /** @type {?} */ var listOfSizeInputName = ['nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl']; /** @type {?} */ var listClassMap = {}; listOfSizeInputName.forEach((/** * @param {?} name * @return {?} */ function (name) { /** @type {?} */ var sizeName = name.replace('nz', '').toLowerCase(); if (isNotNil(_this[name])) { if (typeof _this[name] === 'number' || typeof _this[name] === 'string') { listClassMap[_this.prefixCls + "-" + sizeName + "-" + _this[name]] = true; } else { listClassMap[_this.prefixCls + "-" + sizeName + "-" + _this[name].span] = _this[name] && isNotNil(_this[name].span); listClassMap[_this.prefixCls + "-" + sizeName + "-pull-" + _this[name].pull] = _this[name] && isNotNil(_this[name].pull); listClassMap[_this.prefixCls + "-" + sizeName + "-push-" + _this[name].push] = _this[name] && isNotNil(_this[name].push); listClassMap[_this.prefixCls + "-" + sizeName + "-offset-" + _this[name].offset] = _this[name] && isNotNil(_this[name].offset); listClassMap[_this.prefixCls + "-" + sizeName + "-order-" + _this[name].order] = _this[name] && isNotNil(_this[name].order); } } })); return listClassMap; }; /** * @return {?} */ NzColDirective.prototype.ngOnChanges = /** * @return {?} */ function () { this.setClassMap(); }; /** * @return {?} */ NzColDirective.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; if (this.nzRowDirective) { this.nzRowDirective.actualGutter$ .pipe(startWith(this.nzRowDirective.actualGutter), takeUntil(this.destroy$)) .subscribe((/** * @param {?} actualGutter * @return {?} */ function (actualGutter) { _this.renderer.setStyle(_this.el, 'padding-left', actualGutter / 2 + "px"); _this.renderer.setStyle(_this.el, 'padding-right', actualGutter / 2 + "px"); })); } }; /** * @return {?} */ NzColDirective.prototype.ngOnInit = /** * @return {?} */ function () { this.setClassMap(); }; /** * @return {?} */ NzColDirective.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; NzColDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-col],nz-col', exportAs: 'nzCol', providers: [NzUpdateHostClassService] },] } ]; /** @nocollapse */ NzColDirective.ctorParameters = function () { return [ { type: NzUpdateHostClassService }, { type: ElementRef }, { type: NzRowDirective, decorators: [{ type: Optional }, { type: Host }] }, { type: Renderer2 } ]; }; NzColDirective.propDecorators = { nzSpan: [{ type: Input }], nzOrder: [{ type: Input }], nzOffset: [{ type: Input }], nzPush: [{ type: Input }], nzPull: [{ type: Input }], nzXs: [{ type: Input }], nzSm: [{ type: Input }], nzMd: [{ type: Input }], nzLg: [{ type: Input }], nzXl: [{ type: Input }], nzXXl: [{ type: Input }] }; return NzColDirective; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzGridModule = /** @class */ (function () { function NzGridModule() { } NzGridModule.decorators = [ { type: NgModule, args: [{ declarations: [NzColDirective, NzRowDirective], exports: [NzColDirective, NzRowDirective], imports: [CommonModule, LayoutModule, PlatformModule] },] } ]; return NzGridModule; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { Breakpoint, NzRowDirective, NzColDirective, NzGridModule }; //# sourceMappingURL=ng-zorro-antd-grid.js.map