axiom-form
Version:
Dynamic form component with a custom decorator
402 lines (391 loc) • 18 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('axiom-form', ['exports', 'rxjs', '@angular/common', '@angular/forms', '@angular/core'], factory) :
(factory((global['axiom-form'] = {}),global.rxjs,global.ng.common,global.ng.forms,global.ng.core));
}(this, (function (exports,rxjs,common,forms,core) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormService = /** @class */ (function () {
function AxFormService() {
this._errors = {};
this.submit = new rxjs.Subject();
this.errors = new rxjs.Subject();
this.addErrorsRequest = new rxjs.Subject();
}
/**
* @param {?} config
* @return {?}
*/
AxFormService.prototype.setConfig = /**
* @param {?} config
* @return {?}
*/
function (config) {
this.config = config;
};
/**
* @param {?} formControlName
* @param {?} errors
* @return {?}
*/
AxFormService.prototype.addError = /**
* @param {?} formControlName
* @param {?} errors
* @return {?}
*/
function (formControlName, errors) {
if (!this._errors[formControlName]) {
this._errors[formControlName] = {};
}
this._errors[formControlName] = Object.assign(this._errors[formControlName], errors);
};
/**
* @return {?}
*/
AxFormService.prototype.checkErrors = /**
* @return {?}
*/
function () {
this.errors.next(this.getErrors());
};
/**
* @param {?=} formControlName
* @return {?}
*/
AxFormService.prototype.clearErrors = /**
* @param {?=} formControlName
* @return {?}
*/
function (formControlName) {
if (formControlName === void 0) {
formControlName = null;
}
if (formControlName) {
delete this._errors[formControlName];
}
else {
this._errors = {};
this.errors.next([]);
}
};
/**
* @private
* @return {?}
*/
AxFormService.prototype.getErrors = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var errors = [];
for (var key in this._errors) {
if (this._errors.hasOwnProperty(key)) {
/** @type {?} */
var errs = this._errors[key];
if (errs) {
for (var err in errs) {
if (errs.hasOwnProperty(err)) {
/** @type {?} */
var error = errs[err];
if (err === 'email') {
error = key + " is not a valid email.";
}
else if (err === 'required') {
error = key + " is required.";
}
else if (err === 'minlength') {
error = "Minimun length for " + key + " is " + error.requiredLength + ".";
}
else if (err === 'maxlength') {
error = "Maximum length for " + key + " is " + error.requiredLength + ".";
}
else if (err === 'min') {
error = "Minimum number for " + key + " is " + error.min + ".";
}
else if (err === 'max') {
error = "[" + key + "] : Maximum number for " + key + " is " + error.max + ".";
}
else {
error = "[" + key + "] : " + error;
}
errors.push(error);
}
}
}
}
}
return errors;
};
AxFormService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
AxFormService.ctorParameters = function () { return []; };
return AxFormService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} forms
* @return {?}
*/
function AxForm(forms$$1) {
return ( /**
* @param {?} constructor
* @return {?}
*/function (constructor) {
constructor.prototype.axForms = {};
for (var form in forms$$1) {
if (forms$$1.hasOwnProperty(form)) {
/** @type {?} */
var formConfig = forms$$1[form];
/** @type {?} */
var group = new forms.FormBuilder().group(formConfig);
constructor.prototype.axForms[form] = group;
}
}
});
}
var AxFormComponent = /** @class */ (function () {
function AxFormComponent(_formService) {
this._formService = _formService;
this.submitted = false;
this.errors = [];
}
Object.defineProperty(AxFormComponent.prototype, "axAutoDisableSubmit", {
set: /**
* @param {?} axAutoDisableSubmit
* @return {?}
*/ function (axAutoDisableSubmit) {
this._axAutoDisableSubmit = axAutoDisableSubmit;
this.setConfig();
},
enumerable: true,
configurable: true
});
Object.defineProperty(AxFormComponent.prototype, "axShowErrors", {
set: /**
* @param {?} axShowErrors
* @return {?}
*/ function (axShowErrors) {
this._axShowErrors = axShowErrors;
this.setConfig();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
AxFormComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._formService.form = this.form;
this._formService.submit.subscribe(( /**
* @param {?} submitted
* @return {?}
*/function (submitted) {
_this.submitted = submitted;
}));
this._formService.errors.subscribe(( /**
* @param {?} errors
* @return {?}
*/function (errors) {
_this.errors = errors;
}));
};
/**
* @private
* @return {?}
*/
AxFormComponent.prototype.setConfig = /**
* @private
* @return {?}
*/
function () {
this._formService.setConfig({
axAutoDisableSubmit: this._axAutoDisableSubmit,
axShowErrors: this._axShowErrors
});
};
AxFormComponent.decorators = [
{ type: core.Component, args: [{
selector: '[ax-form]',
template: "\n <ng-content></ng-content>\n <div class=\"ax-form-errors\" *ngIf=\"errors.length > 0 && _formService.config.axShowErrors\">\n <div *ngFor=\"let error of errors\"> <b>\u25CF</b> {{ error }} </div>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None,
providers: [AxFormService],
host: {
'[class.ax-submitted]': 'submitted'
},
styles: [".ax-form-invalid.ng-touched,.ax-submitted .ax-form-invalid{border:1px solid #f44336;box-shadow:0 0 0 rgba(244,67,54,.4);animation:2s infinite ax-error-pulse;-webkit-animation:2s infinite ax-error-pulse}.ax-form-errors{display:flex;flex-direction:column;padding:5px 8px;border:1px solid #ef9a9a;background-color:#ffebee;border-radius:5px;position:relative;margin:10px 5px;-webkit-animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-bottom-fwd;animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-bottom-fwd}.ax-form-errors>div{color:#c62828;margin:3px 0;font-size:13px;-webkit-animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-top-fwd;animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-top-fwd}@-webkit-keyframes ax-form-swing-in-bottom-fwd{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}@keyframes ax-form-swing-in-bottom-fwd{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}@-webkit-keyframes ax-form-swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes ax-form-swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@-webkit-keyframes ax-error-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(244,67,54,.4)}70%{-webkit-box-shadow:0 0 0 10px rgba(244,67,54,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(244,67,54,0)}}@keyframes ax-error-pulse{0%{box-shadow:0 0 0 0 rgba(244,67,54,.4)}70%{box-shadow:0 0 0 10px rgba(244,67,54,0)}100%{box-shadow:0 0 0 0 rgba(244,67,54,0)}}"]
}] }
];
/** @nocollapse */
AxFormComponent.ctorParameters = function () {
return [
{ type: AxFormService }
];
};
AxFormComponent.propDecorators = {
form: [{ type: core.Input, args: ['ax-form',] }],
axAutoDisableSubmit: [{ type: core.Input }],
axShowErrors: [{ type: core.Input }]
};
return AxFormComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormButtonDirective = /** @class */ (function () {
function AxFormButtonDirective(_formService) {
this._formService = _formService;
this.disabled = false;
}
/**
* @return {?}
*/
AxFormButtonDirective.prototype.onClick = /**
* @return {?}
*/
function () {
var _this = this;
this._formService.submit.next(this.type === 'submit');
if (this.type === 'reset') {
setTimeout(( /**
* @return {?}
*/function () {
_this._formService.clearErrors();
}), 0);
}
else {
this._formService.addErrorsRequest.next();
}
this._formService.checkErrors();
};
AxFormButtonDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[axFormButton]',
host: {
'[disabled]': '_formService.config.axAutoDisableSubmit && type === "submit" && _formService.form.status.toLowerCase() === "invalid"'
}
},] }
];
/** @nocollapse */
AxFormButtonDirective.ctorParameters = function () {
return [
{ type: AxFormService }
];
};
AxFormButtonDirective.propDecorators = {
type: [{ type: core.Input, args: ['axFormButton',] }],
onClick: [{ type: core.HostListener, args: ['click',] }]
};
return AxFormButtonDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormControlDirective = /** @class */ (function () {
function AxFormControlDirective(_element, _formService) {
this._element = _element;
this._formService = _formService;
}
/**
* @return {?}
*/
AxFormControlDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.controlName = this._element.nativeElement.getAttribute('formControlName');
this.formControl = this._formService.form.controls[this.controlName];
this._formService.addError(this.controlName, this.formControl.errors);
this._formService.addErrorsRequest.subscribe(( /**
* @return {?}
*/function () {
_this._formService.addError(_this.controlName, _this.formControl.errors);
}));
this.formControl.statusChanges.subscribe(( /**
* @param {?} status
* @return {?}
*/function (status) {
_this._formService.clearErrors(_this.controlName);
if (status.toLowerCase() === 'invalid') {
_this._formService.addError(_this.controlName, _this.formControl.errors);
}
_this._formService.checkErrors();
}));
};
AxFormControlDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[axFormControl]',
host: {
'class': 'ax-form-control',
'[class.ax-form-invalid]': 'formControl.invalid'
}
},] }
];
/** @nocollapse */
AxFormControlDirective.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: AxFormService }
];
};
return AxFormControlDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxiomFormModule = /** @class */ (function () {
function AxiomFormModule() {
}
AxiomFormModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
AxFormComponent,
AxFormButtonDirective,
AxFormControlDirective
],
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule
],
exports: [
AxFormComponent,
AxFormButtonDirective,
AxFormControlDirective
]
},] }
];
return AxiomFormModule;
}());
/**
* @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.AxForm = AxForm;
exports.AxFormComponent = AxFormComponent;
exports.AxFormButtonDirective = AxFormButtonDirective;
exports.AxFormControlDirective = AxFormControlDirective;
exports.AxFormService = AxFormService;
exports.AxiomFormModule = AxiomFormModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=axiom-form.umd.js.map