ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
539 lines (532 loc) • 17 kB
JavaScript
import { __read, __assign } from 'tslib';
import { MediaMatcher, LayoutModule } from '@angular/cdk/layout';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Directive, ElementRef, Renderer2, NgZone, Input, Optional, Host, NgModule } from '@angular/core';
import { gridResponsiveMap, NzBreakpointService } from 'ng-zorro-antd/core/services';
import { ReplaySubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { isNotNil } from 'ng-zorro-antd/core/util';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: row.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRowDirective = /** @class */ (function () {
function NzRowDirective(elementRef, renderer, mediaMatcher, ngZone, platform, breakpointService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.mediaMatcher = mediaMatcher;
this.ngZone = ngZone;
this.platform = platform;
this.breakpointService = breakpointService;
this.nzAlign = null;
this.nzJustify = null;
this.nzGutter = null;
this.actualGutter$ = new ReplaySubject(1);
this.destroy$ = new Subject();
}
/**
* @return {?}
*/
NzRowDirective.prototype.getGutter = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var results = [0, 0];
/** @type {?} */
var gutter = this.nzGutter || 0;
/** @type {?} */
var normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
normalizedGutter.forEach((/**
* @param {?} g
* @param {?} index
* @return {?}
*/
function (g, index) {
if (typeof g === 'object') {
results[index] = 0;
Object.keys(gridResponsiveMap).map((/**
* @param {?} screen
* @return {?}
*/
function (screen) {
/** @type {?} */
var bp = (/** @type {?} */ (screen));
if (_this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches && g[bp]) {
results[index] = (/** @type {?} */ ((/** @type {?} */ (g))[bp]));
}
}));
}
else {
results[index] = g || 0;
}
}));
return results;
};
/**
* @return {?}
*/
NzRowDirective.prototype.setGutterStyle = /**
* @return {?}
*/
function () {
var _this = this;
var _a = __read(this.getGutter(), 2), horizontalGutter = _a[0], verticalGutter = _a[1];
this.actualGutter$.next([horizontalGutter, verticalGutter]);
/** @type {?} */
var renderGutter = (/**
* @param {?} name
* @param {?} gutter
* @return {?}
*/
function (name, gutter) {
/** @type {?} */
var nativeElement = _this.elementRef.nativeElement;
_this.renderer.setStyle(nativeElement, name, "-" + gutter / 2 + "px");
});
if (horizontalGutter > 0) {
renderGutter('margin-left', horizontalGutter);
renderGutter('margin-right', horizontalGutter);
}
if (verticalGutter > 0) {
renderGutter('margin-top', verticalGutter);
renderGutter('margin-bottom', verticalGutter);
}
};
/**
* @return {?}
*/
NzRowDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setGutterStyle();
};
/**
* @param {?} changes
* @return {?}
*/
NzRowDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.nzGutter) {
this.setGutterStyle();
}
};
/**
* @return {?}
*/
NzRowDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.platform.isBrowser) {
this.breakpointService
.subscribe(gridResponsiveMap)
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
_this.setGutterStyle();
}));
}
};
/**
* @return {?}
*/
NzRowDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
NzRowDirective.decorators = [
{ type: Directive, args: [{
selector: '[nz-row],nz-row,nz-form-item',
exportAs: 'nzRow',
host: {
'[class.ant-row]': "true",
'[class.ant-row-top]': "nzAlign === 'top'",
'[class.ant-row-middle]': "nzAlign === 'middle'",
'[class.ant-row-bottom]': "nzAlign === 'bottom'",
'[class.ant-row-start]': "nzJustify === 'start'",
'[class.ant-row-end]': "nzJustify === 'end'",
'[class.ant-row-center]': "nzJustify === 'center'",
'[class.ant-row-space-around]': "nzJustify === 'space-around'",
'[class.ant-row-space-between]': "nzJustify === 'space-between'"
}
},] }
];
/** @nocollapse */
NzRowDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 },
{ type: MediaMatcher },
{ type: NgZone },
{ type: Platform },
{ type: NzBreakpointService }
]; };
NzRowDirective.propDecorators = {
nzType: [{ type: Input }],
nzAlign: [{ type: Input }],
nzJustify: [{ type: Input }],
nzGutter: [{ type: Input }]
};
return NzRowDirective;
}());
if (false) {
/**
* @deprecated don't need nzType="flex" after 9.0
* @type {?}
*/
NzRowDirective.prototype.nzType;
/** @type {?} */
NzRowDirective.prototype.nzAlign;
/** @type {?} */
NzRowDirective.prototype.nzJustify;
/** @type {?} */
NzRowDirective.prototype.nzGutter;
/** @type {?} */
NzRowDirective.prototype.actualGutter$;
/**
* @type {?}
* @private
*/
NzRowDirective.prototype.destroy$;
/** @type {?} */
NzRowDirective.prototype.elementRef;
/** @type {?} */
NzRowDirective.prototype.renderer;
/** @type {?} */
NzRowDirective.prototype.mediaMatcher;
/** @type {?} */
NzRowDirective.prototype.ngZone;
/** @type {?} */
NzRowDirective.prototype.platform;
/**
* @type {?}
* @private
*/
NzRowDirective.prototype.breakpointService;
}
/**
* @fileoverview added by tsickle
* Generated from: col.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function EmbeddedProperty() { }
if (false) {
/** @type {?|undefined} */
EmbeddedProperty.prototype.span;
/** @type {?|undefined} */
EmbeddedProperty.prototype.pull;
/** @type {?|undefined} */
EmbeddedProperty.prototype.push;
/** @type {?|undefined} */
EmbeddedProperty.prototype.offset;
/** @type {?|undefined} */
EmbeddedProperty.prototype.order;
}
var NzColDirective = /** @class */ (function () {
function NzColDirective(elementRef, nzRowDirective, renderer) {
this.elementRef = elementRef;
this.nzRowDirective = nzRowDirective;
this.renderer = renderer;
this.classMap = {};
this.destroy$ = new Subject();
this.hostFlexStyle = null;
this.nzFlex = null;
this.nzSpan = null;
this.nzOrder = null;
this.nzOffset = null;
this.nzPush = null;
this.nzPull = null;
this.nzXs = null;
this.nzSm = null;
this.nzMd = null;
this.nzLg = null;
this.nzXl = null;
this.nzXXl = null;
}
/**
* @return {?}
*/
NzColDirective.prototype.setHostClassMap = /**
* @return {?}
*/
function () {
var _a;
/** @type {?} */
var hostClassMap = __assign((_a = {}, _a['ant-col'] = true, _a["ant-col-" + this.nzSpan] = isNotNil(this.nzSpan), _a["ant-col-order-" + this.nzOrder] = isNotNil(this.nzOrder), _a["ant-col-offset-" + this.nzOffset] = isNotNil(this.nzOffset), _a["ant-col-pull-" + this.nzPull] = isNotNil(this.nzPull), _a["ant-col-push-" + this.nzPush] = isNotNil(this.nzPush), _a), this.generateClass());
for (var i in this.classMap) {
if (this.classMap.hasOwnProperty(i)) {
this.renderer.removeClass(this.elementRef.nativeElement, i);
}
}
this.classMap = __assign({}, hostClassMap);
for (var i in this.classMap) {
if (this.classMap.hasOwnProperty(i) && this.classMap[i]) {
this.renderer.addClass(this.elementRef.nativeElement, i);
}
}
};
/**
* @return {?}
*/
NzColDirective.prototype.setHostFlexStyle = /**
* @return {?}
*/
function () {
this.hostFlexStyle = this.parseFlex(this.nzFlex);
};
/**
* @param {?} flex
* @return {?}
*/
NzColDirective.prototype.parseFlex = /**
* @param {?} flex
* @return {?}
*/
function (flex) {
if (typeof flex === 'number') {
return flex + " " + flex + " auto";
}
else if (typeof flex === 'string') {
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
return "0 0 " + flex;
}
}
return flex;
};
/**
* @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["ant-col-" + sizeName + "-" + _this[name]] = true;
}
else {
/** @type {?} */
var embedded_1 = (/** @type {?} */ (_this[name]));
/** @type {?} */
var prefixArray = ['span', 'pull', 'push', 'offset', 'order'];
prefixArray.forEach((/**
* @param {?} prefix
* @return {?}
*/
function (prefix) {
/** @type {?} */
var prefixClass = prefix === 'span' ? '-' : "-" + prefix + "-";
listClassMap["ant-col-" + sizeName + prefixClass + embedded_1[prefix]] = embedded_1 && isNotNil(embedded_1[prefix]);
}));
}
}
}));
return listClassMap;
};
/**
* @return {?}
*/
NzColDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setHostClassMap();
this.setHostFlexStyle();
};
/**
* @param {?} changes
* @return {?}
*/
NzColDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
this.setHostClassMap();
var nzFlex = changes.nzFlex;
if (nzFlex) {
this.setHostFlexStyle();
}
};
/**
* @return {?}
*/
NzColDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.nzRowDirective) {
this.nzRowDirective.actualGutter$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _b = __read(_a, 2), horizontalGutter = _b[0], verticalGutter = _b[1];
/** @type {?} */
var renderGutter = (/**
* @param {?} name
* @param {?} gutter
* @return {?}
*/
function (name, gutter) {
/** @type {?} */
var nativeElement = _this.elementRef.nativeElement;
_this.renderer.setStyle(nativeElement, name, gutter / 2 + "px");
});
if (horizontalGutter > 0) {
renderGutter('padding-left', horizontalGutter);
renderGutter('padding-right', horizontalGutter);
}
if (verticalGutter > 0) {
renderGutter('padding-top', verticalGutter);
renderGutter('padding-bottom', verticalGutter);
}
}));
}
};
/**
* @return {?}
*/
NzColDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
NzColDirective.decorators = [
{ type: Directive, args: [{
selector: '[nz-col],nz-col,nz-form-control,nz-form-label',
exportAs: 'nzCol',
host: {
'[style.flex]': 'hostFlexStyle'
}
},] }
];
/** @nocollapse */
NzColDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NzRowDirective, decorators: [{ type: Optional }, { type: Host }] },
{ type: Renderer2 }
]; };
NzColDirective.propDecorators = {
nzFlex: [{ type: Input }],
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;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzColDirective.prototype.classMap;
/**
* @type {?}
* @private
*/
NzColDirective.prototype.destroy$;
/** @type {?} */
NzColDirective.prototype.hostFlexStyle;
/** @type {?} */
NzColDirective.prototype.nzFlex;
/** @type {?} */
NzColDirective.prototype.nzSpan;
/** @type {?} */
NzColDirective.prototype.nzOrder;
/** @type {?} */
NzColDirective.prototype.nzOffset;
/** @type {?} */
NzColDirective.prototype.nzPush;
/** @type {?} */
NzColDirective.prototype.nzPull;
/** @type {?} */
NzColDirective.prototype.nzXs;
/** @type {?} */
NzColDirective.prototype.nzSm;
/** @type {?} */
NzColDirective.prototype.nzMd;
/** @type {?} */
NzColDirective.prototype.nzLg;
/** @type {?} */
NzColDirective.prototype.nzXl;
/** @type {?} */
NzColDirective.prototype.nzXXl;
/**
* @type {?}
* @private
*/
NzColDirective.prototype.elementRef;
/** @type {?} */
NzColDirective.prototype.nzRowDirective;
/** @type {?} */
NzColDirective.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* Generated from: grid.module.ts
* @suppress {checkTypes,constantProperty,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
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-zorro-antd-grid.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzColDirective, NzGridModule, NzRowDirective };
//# sourceMappingURL=ng-zorro-antd-grid.js.map