ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
565 lines (554 loc) • 22.5 kB
JavaScript
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { LayoutModule } from '@angular/cdk/layout';
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { Directive, ElementRef, Renderer2, Optional, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Host, ContentChild, SkipSelf, NgModule } from '@angular/core';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { AbstractControl, NgModel, FormControlName, FormControlDirective, NgControl } from '@angular/forms';
import { helpMotion } from 'ng-zorro-antd/core/animation';
import { InputBoolean, toBoolean } from 'ng-zorro-antd/core/util';
import { NzI18nService } from 'ng-zorro-antd/i18n';
import { Subject, Subscription } from 'rxjs';
import { takeUntil, filter, map, tap, startWith } from 'rxjs/operators';
import { __decorate, __metadata } from 'tslib';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
/**
* 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
*/
const NZ_CONFIG_MODULE_NAME = 'form';
const DefaultTooltipIcon = {
type: 'question-circle',
theme: 'outline'
};
class NzFormDirective {
constructor(nzConfigService, elementRef, renderer, directionality) {
var _a;
this.nzConfigService = nzConfigService;
this.renderer = renderer;
this.directionality = directionality;
this._nzModuleName = NZ_CONFIG_MODULE_NAME;
this.nzLayout = 'horizontal';
this.nzNoColon = false;
this.nzAutoTips = {};
this.nzDisableAutoTips = false;
this.nzTooltipIcon = DefaultTooltipIcon;
this.dir = 'ltr';
this.destroy$ = new Subject();
this.inputChanges$ = new Subject();
this.renderer.addClass(elementRef.nativeElement, 'ant-form');
this.dir = this.directionality.value;
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
});
}
getInputObservable(changeType) {
return this.inputChanges$.pipe(filter(changes => changeType in changes), map(value => value[changeType]));
}
ngOnChanges(changes) {
this.inputChanges$.next(changes);
}
ngOnDestroy() {
this.inputChanges$.complete();
this.destroy$.next();
this.destroy$.complete();
}
}
NzFormDirective.decorators = [
{ type: Directive, args: [{
selector: '[nz-form]',
exportAs: 'nzForm',
host: {
'[class.ant-form-horizontal]': `nzLayout === 'horizontal'`,
'[class.ant-form-vertical]': `nzLayout === 'vertical'`,
'[class.ant-form-inline]': `nzLayout === 'inline'`,
'[class.ant-form-rtl]': `dir === 'rtl'`
}
},] }
];
NzFormDirective.ctorParameters = () => [
{ type: NzConfigService },
{ type: ElementRef },
{ type: Renderer2 },
{ type: Directionality, decorators: [{ type: Optional }] }
];
NzFormDirective.propDecorators = {
nzLayout: [{ type: Input }],
nzNoColon: [{ type: Input }],
nzAutoTips: [{ type: Input }],
nzDisableAutoTips: [{ type: Input }],
nzTooltipIcon: [{ type: Input }]
};
__decorate([
WithConfig(),
InputBoolean(),
__metadata("design:type", Boolean)
], NzFormDirective.prototype, "nzNoColon", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], NzFormDirective.prototype, "nzAutoTips", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzFormDirective.prototype, "nzDisableAutoTips", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], NzFormDirective.prototype, "nzTooltipIcon", void 0);
/**
* 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
*/
/** should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 **/
class NzFormItemComponent {
constructor(elementRef, renderer, cdr) {
this.cdr = cdr;
this.status = null;
this.hasFeedback = false;
this.withHelpClass = false;
this.destroy$ = new Subject();
renderer.addClass(elementRef.nativeElement, 'ant-form-item');
}
setWithHelpViaTips(value) {
this.withHelpClass = value;
this.cdr.markForCheck();
}
setStatus(status) {
this.status = status;
this.cdr.markForCheck();
}
setHasFeedback(hasFeedback) {
this.hasFeedback = hasFeedback;
this.cdr.markForCheck();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzFormItemComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-form-item',
exportAs: 'nzFormItem',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class.ant-form-item-has-success]': 'status === "success"',
'[class.ant-form-item-has-warning]': 'status === "warning"',
'[class.ant-form-item-has-error]': 'status === "error"',
'[class.ant-form-item-is-validating]': 'status === "validating"',
'[class.ant-form-item-has-feedback]': 'hasFeedback && status',
'[class.ant-form-item-with-help]': 'withHelpClass'
},
template: `
<ng-content></ng-content>
`
},] }
];
NzFormItemComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
/**
* 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
*/
const iconTypeMap = {
error: 'close-circle-fill',
validating: 'loading',
success: 'check-circle-fill',
warning: 'exclamation-circle-fill'
};
class NzFormControlComponent {
constructor(elementRef, nzFormItemComponent, cdr, renderer, i18n, nzFormDirective) {
var _a, _b;
this.nzFormItemComponent = nzFormItemComponent;
this.cdr = cdr;
this.nzFormDirective = nzFormDirective;
this._hasFeedback = false;
this.validateChanges = Subscription.EMPTY;
this.validateString = null;
this.destroyed$ = new Subject();
this.status = null;
this.validateControl = null;
this.iconType = null;
this.innerTip = null;
this.nzAutoTips = {};
this.nzDisableAutoTips = 'default';
renderer.addClass(elementRef.nativeElement, 'ant-form-item-control');
this.subscribeAutoTips(i18n.localeChange.pipe(tap(locale => (this.localeId = locale.locale))));
this.subscribeAutoTips((_a = this.nzFormDirective) === null || _a === void 0 ? void 0 : _a.getInputObservable('nzAutoTips'));
this.subscribeAutoTips((_b = this.nzFormDirective) === null || _b === void 0 ? void 0 : _b.getInputObservable('nzDisableAutoTips').pipe(filter(() => this.nzDisableAutoTips === 'default')));
}
get disableAutoTips() {
var _a;
return this.nzDisableAutoTips !== 'default' ? toBoolean(this.nzDisableAutoTips) : (_a = this.nzFormDirective) === null || _a === void 0 ? void 0 : _a.nzDisableAutoTips;
}
set nzHasFeedback(value) {
this._hasFeedback = toBoolean(value);
if (this.nzFormItemComponent) {
this.nzFormItemComponent.setHasFeedback(this._hasFeedback);
}
}
get nzHasFeedback() {
return this._hasFeedback;
}
set nzValidateStatus(value) {
if (value instanceof AbstractControl || value instanceof NgModel) {
this.validateControl = value;
this.validateString = null;
this.watchControl();
}
else if (value instanceof FormControlName) {
this.validateControl = value.control;
this.validateString = null;
this.watchControl();
}
else {
this.validateString = value;
this.validateControl = null;
this.setStatus();
}
}
watchControl() {
this.validateChanges.unsubscribe();
/** miss detect https://github.com/angular/angular/issues/10887 **/
if (this.validateControl && this.validateControl.statusChanges) {
this.validateChanges = this.validateControl.statusChanges.pipe(startWith(null), takeUntil(this.destroyed$)).subscribe(_ => {
if (!this.disableAutoTips) {
this.updateAutoErrorTip();
}
this.setStatus();
this.cdr.markForCheck();
});
}
}
setStatus() {
this.status = this.getControlStatus(this.validateString);
this.iconType = this.status ? iconTypeMap[this.status] : null;
this.innerTip = this.getInnerTip(this.status);
if (this.nzFormItemComponent) {
this.nzFormItemComponent.setWithHelpViaTips(!!this.innerTip);
this.nzFormItemComponent.setStatus(this.status);
}
}
getControlStatus(validateString) {
let status;
if (validateString === 'warning' || this.validateControlStatus('INVALID', 'warning')) {
status = 'warning';
}
else if (validateString === 'error' || this.validateControlStatus('INVALID')) {
status = 'error';
}
else if (validateString === 'validating' || validateString === 'pending' || this.validateControlStatus('PENDING')) {
status = 'validating';
}
else if (validateString === 'success' || this.validateControlStatus('VALID')) {
status = 'success';
}
else {
status = null;
}
return status;
}
validateControlStatus(validStatus, statusType) {
if (!this.validateControl) {
return false;
}
else {
const { dirty, touched, status } = this.validateControl;
return (!!dirty || !!touched) && (statusType ? this.validateControl.hasError(statusType) : status === validStatus);
}
}
getInnerTip(status) {
switch (status) {
case 'error':
return (!this.disableAutoTips && this.autoErrorTip) || this.nzErrorTip || null;
case 'validating':
return this.nzValidatingTip || null;
case 'success':
return this.nzSuccessTip || null;
case 'warning':
return this.nzWarningTip || null;
default:
return null;
}
}
updateAutoErrorTip() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
if (this.validateControl) {
const errors = this.validateControl.errors || {};
let autoErrorTip = '';
for (const key in errors) {
if (errors.hasOwnProperty(key)) {
autoErrorTip = (_l = (_g = (_e = (_b = (_a = errors[key]) === null || _a === void 0 ? void 0 : _a[this.localeId]) !== null && _b !== void 0 ? _b : (_d = (_c = this.nzAutoTips) === null || _c === void 0 ? void 0 : _c[this.localeId]) === null || _d === void 0 ? void 0 : _d[key]) !== null && _e !== void 0 ? _e : (_f = this.nzAutoTips.default) === null || _f === void 0 ? void 0 : _f[key]) !== null && _g !== void 0 ? _g : (_k = (_j = (_h = this.nzFormDirective) === null || _h === void 0 ? void 0 : _h.nzAutoTips) === null || _j === void 0 ? void 0 : _j[this.localeId]) === null || _k === void 0 ? void 0 : _k[key]) !== null && _l !== void 0 ? _l : (_o = (_m = this.nzFormDirective) === null || _m === void 0 ? void 0 : _m.nzAutoTips.default) === null || _o === void 0 ? void 0 : _o[key];
}
if (!!autoErrorTip) {
break;
}
}
this.autoErrorTip = autoErrorTip;
}
}
subscribeAutoTips(observable) {
observable === null || observable === void 0 ? void 0 : observable.pipe(takeUntil(this.destroyed$)).subscribe(() => {
if (!this.disableAutoTips) {
this.updateAutoErrorTip();
this.setStatus();
this.cdr.markForCheck();
}
});
}
ngOnChanges(changes) {
const { nzDisableAutoTips, nzAutoTips, nzSuccessTip, nzWarningTip, nzErrorTip, nzValidatingTip } = changes;
if (nzDisableAutoTips || nzAutoTips) {
this.updateAutoErrorTip();
this.setStatus();
}
else if (nzSuccessTip || nzWarningTip || nzErrorTip || nzValidatingTip) {
this.setStatus();
}
}
ngOnInit() {
this.setStatus();
}
ngOnDestroy() {
this.destroyed$.next();
this.destroyed$.complete();
}
ngAfterContentInit() {
if (!this.validateControl && !this.validateString) {
if (this.defaultValidateControl instanceof FormControlDirective) {
this.nzValidateStatus = this.defaultValidateControl.control;
}
else {
this.nzValidateStatus = this.defaultValidateControl;
}
}
}
}
NzFormControlComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-form-control',
exportAs: 'nzFormControl',
preserveWhitespaces: false,
animations: [helpMotion],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<ng-content></ng-content>
</div>
<span class="ant-form-item-children-icon">
<i *ngIf="nzHasFeedback && iconType" nz-icon [nzType]="iconType"></i>
</span>
</div>
<div [ngClass]="['ant-form-item-explain', 'ant-form-item-explain-' + status]" *ngIf="innerTip">
<div >
<ng-container *nzStringTemplateOutlet="innerTip; context: { $implicit: validateControl }">{{ innerTip }}</ng-container>
</div>
</div>
<div class="ant-form-item-extra" *ngIf="nzExtra">
<ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
</div>
`
},] }
];
NzFormControlComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NzFormItemComponent, decorators: [{ type: Optional }, { type: Host }] },
{ type: ChangeDetectorRef },
{ type: Renderer2 },
{ type: NzI18nService },
{ type: NzFormDirective, decorators: [{ type: Optional }] }
];
NzFormControlComponent.propDecorators = {
defaultValidateControl: [{ type: ContentChild, args: [NgControl, { static: false },] }],
nzSuccessTip: [{ type: Input }],
nzWarningTip: [{ type: Input }],
nzErrorTip: [{ type: Input }],
nzValidatingTip: [{ type: Input }],
nzExtra: [{ type: Input }],
nzAutoTips: [{ type: Input }],
nzDisableAutoTips: [{ type: Input }],
nzHasFeedback: [{ type: Input }],
nzValidateStatus: [{ type: Input }]
};
/**
* 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 toTooltipIcon(value) {
const icon = typeof value === 'string' ? { type: value } : value;
return Object.assign(Object.assign({}, DefaultTooltipIcon), icon);
}
class NzFormLabelComponent {
constructor(elementRef, renderer, cdr, nzFormDirective) {
this.cdr = cdr;
this.nzFormDirective = nzFormDirective;
this.nzRequired = false;
this.noColon = 'default';
this._tooltipIcon = 'default';
this.destroy$ = new Subject();
renderer.addClass(elementRef.nativeElement, 'ant-form-item-label');
if (this.nzFormDirective) {
this.nzFormDirective
.getInputObservable('nzNoColon')
.pipe(filter(() => this.noColon === 'default'), takeUntil(this.destroy$))
.subscribe(() => this.cdr.markForCheck());
this.nzFormDirective
.getInputObservable('nzTooltipIcon')
.pipe(filter(() => this._tooltipIcon === 'default'), takeUntil(this.destroy$))
.subscribe(() => this.cdr.markForCheck());
}
}
set nzNoColon(value) {
this.noColon = toBoolean(value);
}
get nzNoColon() {
var _a;
return this.noColon !== 'default' ? this.noColon : (_a = this.nzFormDirective) === null || _a === void 0 ? void 0 : _a.nzNoColon;
}
set nzTooltipIcon(value) {
this._tooltipIcon = toTooltipIcon(value);
}
// due to 'get' and 'set' accessor must have the same type, so it was renamed to `tooltipIcon`
get tooltipIcon() {
var _a;
return this._tooltipIcon !== 'default' ? this._tooltipIcon : toTooltipIcon(((_a = this.nzFormDirective) === null || _a === void 0 ? void 0 : _a.nzTooltipIcon) || DefaultTooltipIcon);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzFormLabelComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-form-label',
exportAs: 'nzFormLabel',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<label [attr.for]="nzFor" [class.ant-form-item-no-colon]="nzNoColon" [class.ant-form-item-required]="nzRequired">
<ng-content></ng-content>
<span *ngIf="nzTooltipTitle" class="ant-form-item-tooltip" nz-tooltip [nzTooltipTitle]="nzTooltipTitle">
<ng-container *nzStringTemplateOutlet="tooltipIcon.type; let tooltipIconType">
<i nz-icon [nzType]="tooltipIconType" [nzTheme]="tooltipIcon.theme"></i>
</ng-container>
</span>
</label>
`
},] }
];
NzFormLabelComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef },
{ type: NzFormDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
];
NzFormLabelComponent.propDecorators = {
nzFor: [{ type: Input }],
nzRequired: [{ type: Input }],
nzNoColon: [{ type: Input }],
nzTooltipTitle: [{ type: Input }],
nzTooltipIcon: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzFormLabelComponent.prototype, "nzRequired", void 0);
/**
* 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
*/
class NzFormSplitComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-split');
}
}
NzFormSplitComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-form-split',
exportAs: 'nzFormSplit',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <ng-content></ng-content> `
},] }
];
NzFormSplitComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
/**
* 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
*/
class NzFormTextComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.renderer.addClass(this.elementRef.nativeElement, 'ant-form-text');
}
}
NzFormTextComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-form-text',
exportAs: 'nzFormText',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: ` <ng-content></ng-content> `
},] }
];
NzFormTextComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
/**
* 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
*/
class NzFormModule {
}
NzFormModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzFormControlComponent,
NzFormTextComponent,
NzFormSplitComponent
],
exports: [
NzGridModule,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzFormControlComponent,
NzFormTextComponent,
NzFormSplitComponent
],
imports: [BidiModule, CommonModule, NzGridModule, NzIconModule, NzToolTipModule, LayoutModule, PlatformModule, NzOutletModule]
},] }
];
/**
* 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
*/
/**
* Generated bundle index. Do not edit.
*/
export { DefaultTooltipIcon, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzFormModule, NzFormSplitComponent, NzFormTextComponent };
//# sourceMappingURL=ng-zorro-antd-form.js.map