UNPKG

ng-zorro-antd

Version:

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

741 lines (723 loc) 31.4 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('ng-zorro-antd/icon'), require('@angular/forms'), require('@angular/cdk/layout'), require('@angular/cdk/platform'), require('ng-zorro-antd/grid'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('ng-zorro-antd/core')) : typeof define === 'function' && define.amd ? define('ng-zorro-antd/form', ['exports', '@angular/common', 'ng-zorro-antd/icon', '@angular/forms', '@angular/cdk/layout', '@angular/cdk/platform', 'ng-zorro-antd/grid', '@angular/core', 'rxjs', 'rxjs/operators', 'ng-zorro-antd/core'], factory) : (factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].form = {}),global.ng.common,global['ng-zorro-antd'].icon,global.ng.forms,global.ng.cdk.layout,global.ng.cdk.platform,global['ng-zorro-antd'].grid,global.ng.core,global.rxjs,global.rxjs.operators,global['ng-zorro-antd'].core)); }(this, (function (exports,common,icon,forms,layout,platform,grid,core,rxjs,operators,core$1) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return extendStatics(d, b); }; function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } function __decorate(decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; } function __metadata(metadataKey, metadataValue) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); } /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormExplainComponent = /** @class */ (function () { function NzFormExplainComponent(elementRef, renderer) { this.elementRef = elementRef; this.renderer = renderer; this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-explain'); } NzFormExplainComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-explain', exportAs: 'nzFormExplain', preserveWhitespaces: false, encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush, animations: [core$1.helpMotion], template: "<div [@helpMotion]>\n <ng-content></ng-content>\n</div>", styles: ["\n nz-form-explain {\n display: block;\n }\n "] }] } ]; /** @nocollapse */ NzFormExplainComponent.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 } ]; }; return NzFormExplainComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 * */ var NzFormItemComponent = /** @class */ (function (_super) { __extends(NzFormItemComponent, _super); function NzFormItemComponent(elementRef, renderer, nzUpdateHostClassService, mediaMatcher, ngZone, platform$$1, cdr) { var _this = _super.call(this, elementRef, renderer, nzUpdateHostClassService, mediaMatcher, ngZone, platform$$1) || this; _this.cdr = cdr; _this.nzFlex = false; renderer.addClass(elementRef.nativeElement, 'ant-form-item'); return _this; } /** * @return {?} */ NzFormItemComponent.prototype.ngAfterContentInit = /** * @return {?} */ function () { var _this = this; if (this.listOfNzFormExplainComponent) { this.listOfNzFormExplainComponent.changes.pipe(operators.takeUntil(this.destroy$)).subscribe(( /** * @return {?} */function () { _this.cdr.markForCheck(); })); } }; /** * @param {?} changes * @return {?} */ NzFormItemComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { _super.prototype.ngOnChanges.call(this, changes); if (changes.hasOwnProperty('nzFlex')) { /** @type {?} */ var flex = changes.nzFlex.currentValue; if (flex) { this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'flex'); } else { this.renderer.removeStyle(this.elementRef.nativeElement, 'display'); } } }; NzFormItemComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-item', exportAs: 'nzFormItem', preserveWhitespaces: false, changeDetection: core.ChangeDetectionStrategy.OnPush, encapsulation: core.ViewEncapsulation.None, providers: [core$1.NzUpdateHostClassService], template: "<ng-content></ng-content>", host: { '[class.ant-form-item-with-help]': 'listOfNzFormExplainComponent && (listOfNzFormExplainComponent.length > 0)' }, styles: ["\n nz-form-item {\n display: block;\n }\n "] }] } ]; /** @nocollapse */ NzFormItemComponent.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 }, { type: core$1.NzUpdateHostClassService }, { type: layout.MediaMatcher }, { type: core.NgZone }, { type: platform.Platform }, { type: core.ChangeDetectorRef } ]; }; NzFormItemComponent.propDecorators = { nzFlex: [{ type: core.Input }], listOfNzFormExplainComponent: [{ type: core.ContentChildren, args: [NzFormExplainComponent, { descendants: true },] }] }; __decorate([ core$1.InputBoolean(), __metadata("design:type", Boolean) ], NzFormItemComponent.prototype, "nzFlex", void 0); return NzFormItemComponent; }(grid.NzRowDirective)); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormControlComponent = /** @class */ (function (_super) { __extends(NzFormControlComponent, _super); function NzFormControlComponent(nzUpdateHostClassService, elementRef, nzFormItemComponent, nzRowDirective, cdr, renderer) { var _this = _super.call(this, nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer) || this; _this.cdr = cdr; _this._hasFeedback = false; _this.controlClassMap = {}; renderer.addClass(elementRef.nativeElement, 'ant-form-item-control-wrapper'); return _this; } Object.defineProperty(NzFormControlComponent.prototype, "nzHasFeedback", { get: /** * @return {?} */ function () { return this._hasFeedback; }, set: /** * @param {?} value * @return {?} */ function (value) { this._hasFeedback = core$1.toBoolean(value); this.setControlClassMap(); }, enumerable: true, configurable: true }); Object.defineProperty(NzFormControlComponent.prototype, "nzValidateStatus", { set: /** * @param {?} value * @return {?} */ function (value) { if (value instanceof forms.FormControl || value instanceof forms.NgModel) { this.validateControl = value; this.validateString = null; this.watchControl(); } else if (value instanceof forms.FormControlName) { this.validateControl = value.control; this.validateString = null; this.watchControl(); } else { this.validateString = value; this.validateControl = null; this.setControlClassMap(); } }, enumerable: true, configurable: true }); /** * @return {?} */ NzFormControlComponent.prototype.removeSubscribe = /** * @return {?} */ function () { if (this.validateChanges) { this.validateChanges.unsubscribe(); this.validateChanges = null; } }; /** * @return {?} */ NzFormControlComponent.prototype.watchControl = /** * @return {?} */ function () { var _this = this; this.removeSubscribe(); /** miss detect https://github.com/angular/angular/issues/10887 **/ if (this.validateControl && this.validateControl.statusChanges) { this.validateChanges = this.validateControl.statusChanges.pipe(operators.startWith(null)).subscribe(( /** * @return {?} */function () { _this.setControlClassMap(); _this.cdr.markForCheck(); })); } }; /** * @param {?} status * @return {?} */ NzFormControlComponent.prototype.validateControlStatus = /** * @param {?} status * @return {?} */ function (status) { return ( /** @type {?} */((!!this.validateControl && (this.validateControl.dirty || this.validateControl.touched) && this.validateControl.status === status))); }; /** * @return {?} */ NzFormControlComponent.prototype.setControlClassMap = /** * @return {?} */ function () { var _a; if (this.validateString === 'warning') { this.status = 'warning'; this.iconType = 'exclamation-circle-fill'; } else if (this.validateString === 'validating' || this.validateString === 'pending' || this.validateControlStatus('PENDING')) { this.status = 'validating'; this.iconType = 'loading'; } else if (this.validateString === 'error' || this.validateControlStatus('INVALID')) { this.status = 'error'; this.iconType = 'close-circle-fill'; } else if (this.validateString === 'success' || this.validateControlStatus('VALID')) { this.status = 'success'; this.iconType = 'check-circle-fill'; } else { this.status = 'init'; this.iconType = ''; } this.controlClassMap = (_a = {}, _a["has-warning"] = this.status === 'warning', _a["is-validating"] = this.status === 'validating', _a["has-error"] = this.status === 'error', _a["has-success"] = this.status === 'success', _a["has-feedback"] = this.nzHasFeedback, _a); }; /** * @return {?} */ NzFormControlComponent.prototype.ngOnInit = /** * @return {?} */ function () { _super.prototype.ngOnInit.call(this); this.setControlClassMap(); }; /** * @return {?} */ NzFormControlComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.removeSubscribe(); _super.prototype.ngOnDestroy.call(this); }; /** * @return {?} */ NzFormControlComponent.prototype.ngAfterContentInit = /** * @return {?} */ function () { if (this.defaultValidateControl && !this.validateControl && !this.validateString) { this.nzValidateStatus = this.defaultValidateControl; } }; /** * @return {?} */ NzFormControlComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { _super.prototype.ngAfterViewInit.call(this); }; NzFormControlComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-control', exportAs: 'nzFormControl', preserveWhitespaces: false, encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush, providers: [core$1.NzUpdateHostClassService], template: "<div class=\"ant-form-item-control\" [ngClass]=\"controlClassMap\">\n <span class=\"ant-form-item-children\">\n <ng-content></ng-content>\n <span class=\"ant-form-item-children-icon\">\n <i *ngIf=\"nzHasFeedback && iconType\" nz-icon [type]=\"iconType\"></i>\n </span>\n </span>\n <ng-content select=\"nz-form-explain\"></ng-content>\n</div>", styles: ["\n nz-form-control {\n display: block;\n }\n "] }] } ]; /** @nocollapse */ NzFormControlComponent.ctorParameters = function () { return [ { type: core$1.NzUpdateHostClassService }, { type: core.ElementRef }, { type: NzFormItemComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }, { type: grid.NzRowDirective, decorators: [{ type: core.Optional }, { type: core.Host }] }, { type: core.ChangeDetectorRef }, { type: core.Renderer2 } ]; }; NzFormControlComponent.propDecorators = { defaultValidateControl: [{ type: core.ContentChild, args: [forms.NgControl,] }], nzHasFeedback: [{ type: core.Input }], nzValidateStatus: [{ type: core.Input }] }; return NzFormControlComponent; }(grid.NzColDirective)); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormExtraComponent = /** @class */ (function () { function NzFormExtraComponent(elementRef, renderer) { this.elementRef = elementRef; this.renderer = renderer; this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-extra'); } NzFormExtraComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-extra', exportAs: 'nzFormExtra', template: "<ng-content></ng-content>", preserveWhitespaces: false, encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush, styles: ["\n nz-form-extra {\n display: block;\n }\n "] }] } ]; /** @nocollapse */ NzFormExtraComponent.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 } ]; }; return NzFormExtraComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormLabelComponent = /** @class */ (function (_super) { __extends(NzFormLabelComponent, _super); function NzFormLabelComponent(nzUpdateHostClassService, elementRef, nzFormItemComponent, nzRowDirective, renderer, cdr) { var _this = _super.call(this, nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer) || this; _this.cdr = cdr; _this.nzRequired = false; _this.defaultNoColon = false; _this.noColon = 'default'; renderer.addClass(elementRef.nativeElement, 'ant-form-item-label'); return _this; } Object.defineProperty(NzFormLabelComponent.prototype, "nzNoColon", { get: /** * @return {?} */ function () { return !!this.noColon; }, set: /** * @param {?} value * @return {?} */ function (value) { this.noColon = core$1.toBoolean(value); }, enumerable: true, configurable: true }); /** * @param {?} value * @return {?} */ NzFormLabelComponent.prototype.setDefaultNoColon = /** * @param {?} value * @return {?} */ function (value) { this.defaultNoColon = core$1.toBoolean(value); this.cdr.markForCheck(); }; /** * @return {?} */ NzFormLabelComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { _super.prototype.ngOnDestroy.call(this); }; /** * @return {?} */ NzFormLabelComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { _super.prototype.ngAfterViewInit.call(this); }; NzFormLabelComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-label', exportAs: 'nzFormLabel', providers: [core$1.NzUpdateHostClassService], preserveWhitespaces: false, encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"nzFor\"\n [class.ant-form-item-no-colon]=\"noColon === 'default' ? defaultNoColon : nzNoColon\"\n [class.ant-form-item-required]=\"nzRequired\">\n <ng-content></ng-content>\n</label>" }] } ]; /** @nocollapse */ NzFormLabelComponent.ctorParameters = function () { return [ { type: core$1.NzUpdateHostClassService }, { type: core.ElementRef }, { type: NzFormItemComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }, { type: grid.NzRowDirective, decorators: [{ type: core.Optional }, { type: core.Host }] }, { type: core.Renderer2 }, { type: core.ChangeDetectorRef } ]; }; NzFormLabelComponent.propDecorators = { nzFor: [{ type: core.Input }], nzRequired: [{ type: core.Input }], nzNoColon: [{ type: core.Input }] }; __decorate([ core$1.InputBoolean(), __metadata("design:type", Object) ], NzFormLabelComponent.prototype, "nzRequired", void 0); return NzFormLabelComponent; }(grid.NzColDirective)); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormSplitComponent = /** @class */ (function () { function NzFormSplitComponent(elementRef, renderer) { this.elementRef = elementRef; this.renderer = renderer; this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-split'); } NzFormSplitComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-split', exportAs: 'nzFormSplit', preserveWhitespaces: false, encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>" }] } ]; /** @nocollapse */ NzFormSplitComponent.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 } ]; }; return NzFormSplitComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormTextComponent = /** @class */ (function () { function NzFormTextComponent(elementRef, renderer) { this.elementRef = elementRef; this.renderer = renderer; this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-text'); } NzFormTextComponent.decorators = [ { type: core.Component, args: [{ selector: 'nz-form-text', exportAs: 'nzFormText', preserveWhitespaces: false, changeDetection: core.ChangeDetectionStrategy.OnPush, encapsulation: core.ViewEncapsulation.None, template: "<ng-content></ng-content>" }] } ]; /** @nocollapse */ NzFormTextComponent.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 } ]; }; return NzFormTextComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormDirective = /** @class */ (function () { function NzFormDirective(elementRef, renderer, nzUpdateHostClassService) { this.elementRef = elementRef; this.renderer = renderer; this.nzUpdateHostClassService = nzUpdateHostClassService; this.nzLayout = 'horizontal'; this.nzNoColon = false; this.destroy$ = new rxjs.Subject(); this.renderer.addClass(elementRef.nativeElement, 'ant-form'); } /** * @return {?} */ NzFormDirective.prototype.setClassMap = /** * @return {?} */ function () { var _a; this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, (_a = {}, _a["ant-form-" + this.nzLayout] = this.nzLayout, _a)); }; /** * @return {?} */ NzFormDirective.prototype.updateItemsDefaultColon = /** * @return {?} */ function () { var _this = this; if (this.nzFormLabelComponent) { this.nzFormLabelComponent.forEach(( /** * @param {?} item * @return {?} */function (item) { return item.setDefaultNoColon(_this.nzNoColon); })); } }; /** * @return {?} */ NzFormDirective.prototype.ngOnInit = /** * @return {?} */ function () { this.setClassMap(); }; /** * @param {?} changes * @return {?} */ NzFormDirective.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { this.setClassMap(); if (changes.hasOwnProperty('nzNoColon')) { this.updateItemsDefaultColon(); } }; /** * @return {?} */ NzFormDirective.prototype.ngAfterContentInit = /** * @return {?} */ function () { var _this = this; this.nzFormLabelComponent.changes .pipe(operators.startWith(null), operators.takeUntil(this.destroy$)) .subscribe(( /** * @return {?} */function () { _this.updateItemsDefaultColon(); })); }; /** * @return {?} */ NzFormDirective.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; NzFormDirective.decorators = [ { type: core.Directive, args: [{ selector: '[nz-form]', exportAs: 'nzForm', providers: [core$1.NzUpdateHostClassService] },] } ]; /** @nocollapse */ NzFormDirective.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 }, { type: core$1.NzUpdateHostClassService } ]; }; NzFormDirective.propDecorators = { nzLayout: [{ type: core.Input }], nzNoColon: [{ type: core.Input }], nzFormLabelComponent: [{ type: core.ContentChildren, args: [NzFormLabelComponent, { descendants: true },] }] }; __decorate([ core$1.InputBoolean(), __metadata("design:type", Boolean) ], NzFormDirective.prototype, "nzNoColon", void 0); return NzFormDirective; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzFormModule = /** @class */ (function () { function NzFormModule() { } NzFormModule.decorators = [ { type: core.NgModule, args: [{ declarations: [ NzFormExtraComponent, NzFormLabelComponent, NzFormDirective, NzFormItemComponent, NzFormControlComponent, NzFormExplainComponent, NzFormTextComponent, NzFormSplitComponent ], exports: [ NzFormExtraComponent, NzFormLabelComponent, NzFormDirective, NzFormItemComponent, NzFormControlComponent, NzFormExplainComponent, NzFormTextComponent, NzFormSplitComponent ], imports: [common.CommonModule, grid.NzGridModule, icon.NzIconModule, layout.LayoutModule, platform.PlatformModule] },] } ]; return NzFormModule; }()); /** * @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 */ exports.NzFormModule = NzFormModule; exports.NzFormDirective = NzFormDirective; exports.NzFormControlComponent = NzFormControlComponent; exports.NzFormExplainComponent = NzFormExplainComponent; exports.NzFormItemComponent = NzFormItemComponent; exports.NzFormExtraComponent = NzFormExtraComponent; exports.NzFormLabelComponent = NzFormLabelComponent; exports.NzFormSplitComponent = NzFormSplitComponent; exports.NzFormTextComponent = NzFormTextComponent; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=ng-zorro-antd-form.umd.js.map