Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

angular-hybrid-forms

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-hybrid-forms - npm Package Compare versions

Comparing version 0.0.28 to 0.0.35

src/component/hybrid-form-field.component.d.ts
src/component/hybrid-form.component.d.ts
src/directive/hybrid-form-model.directive.d.ts
src/directive/hybrid-form.directive.d.ts

7

angular-hybrid-forms.d.ts

@@ -5,7 +5,6 @@ /**

export * from './index';
export { FormControlComponent as ɵe } from './src/component/form-control.component';
export { FormGroupComponent as ɵf } from './src/component/form-group.component';
export { FormControlNameDirective as ɵc } from './src/directive/form-control-name.directive';
export { FormGroupNameDirective as ɵd } from './src/directive/form-group-name.directive';
export { HybridFormFieldComponent as ɵd } from './src/component/hybrid-form-field.component';
export { HybridFormGroupComponent as ɵe } from './src/component/hybrid-form.component';
export { HybridFormModelDirective as ɵc } from './src/directive/hybrid-form-model.directive';
export { UnsavedDirective as ɵa } from './src/directive/unsaved.directive';
export { ValidSubmitDirective as ɵb } from './src/directive/valid-submit.directive';

309

angular-hybrid-forms.es5.js

@@ -1,4 +0,4 @@

import { ChangeDetectorRef, Component, ContentChild, Directive, EventEmitter, HostListener, Input, NgModule, Optional, Output, Self, SkipSelf } from '@angular/core';
import { Component, ContentChild, Directive, EventEmitter, HostListener, Input, NgModule, Optional, Output, Self, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormGroupDirective, ReactiveFormsModule, RequiredValidator } from '@angular/forms';
import { FormsModule, NgForm, NgModel, RequiredValidator } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';

@@ -10,8 +10,3 @@ import { Subject } from 'rxjs/Subject';

* @template T
* @param {?} cd
* @param {?} formGroupNameDirective
* @param {?} formGroupDirective
* @param {?} name
* @param {?} control
* @param {?} valueChange
* @param {?} validValueChange

@@ -22,101 +17,22 @@ * @param {?} validValueChangeDebounceStarted

*/
function addControl(cd, formGroupNameDirective, formGroupDirective, name, control, valueChange, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
cd.detach();
var /** @type {?} */ parent = formGroupNameDirective && formGroupNameDirective.formGroup || formGroupDirective && formGroupDirective.form;
if (parent != control) {
addToParent(parent, name, control);
control.valueChanges.subscribe(function (v) { return valueChange.emit(v); });
control.valueChanges
.subscribe(function (v) { return control.valid ? validValueChangeDebounceStarted.next(v) : null; });
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(function (v) { return control.valid ? validValueChange.emit(v) : null; });
}
setTimeout(function () { return cd.reattach(); }, 0);
function addControl(control, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
control.valueChanges
.subscribe(function (v) { return control.valid ? validValueChangeDebounceStarted.next(v) : null; });
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(function (v) { return control.valid ? validValueChange.emit(v) : null; });
}
/**
* @param {?} parent
* @param {?} name
* @param {?} control
* @return {?}
*/
function addToParent(parent, name, control) {
if (parent) {
assertNoNameConflicts(parent, name);
parent.addControl(name, control);
}
}
/**
* @param {?} parent
* @param {?} name
* @return {?}
*/
function assertNoNameConflicts(parent, name) {
if (parent.get(name))
throw new Error("A control of named: '" + name + "' already exists on parent: " + JSON.stringify(parent.value) + ". Perhaps you did not name your group or control?");
}
var FormGroupNameDirective = /** @class */ (function () {
var HybridFormModelDirective = /** @class */ (function () {
/**
* @param {?} cd
* @param {?} self
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} parent
*/
function FormGroupNameDirective(cd, self, formGroupDirective, formGroupNameDirective) {
this.cd = cd;
function HybridFormModelDirective(self, parent) {
this.self = self;
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new EventEmitter();
this.formControlValidValueChange = new EventEmitter();
this.parent = parent;
this.ngModelValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngModelValidChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.formGroup = new FormGroup({});
}
/**
* @return {?}
*/
FormGroupNameDirective.prototype.ngOnInit = function () {
if (!this.formGroupName)
this.formGroup = this.self.form;
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formGroupName, this.formGroup, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
};
FormGroupNameDirective.decorators = [
{ type: Directive, args: [{ selector: "[formGroupName],[formGroup]" },] },
];
/**
* @nocollapse
*/
FormGroupNameDirective.ctorParameters = function () { return [
{ type: ChangeDetectorRef, },
{ type: FormGroupDirective, decorators: [{ type: Optional }, { type: Self },] },
{ type: FormGroupDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
]; };
FormGroupNameDirective.propDecorators = {
'formGroupName': [{ type: Input },],
'validValueChangeDebounce': [{ type: Input },],
'formControlValueChange': [{ type: Output },],
'formControlValidValueChange': [{ type: Output },],
};
return FormGroupNameDirective;
}());
var FormControlNameDirective = /** @class */ (function () {
/**
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} cd
*/
function FormControlNameDirective(formGroupDirective, formGroupNameDirective, cd) {
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.cd = cd;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new EventEmitter();
this.formControlValidValueChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.formControl = new FormControl();
}
Object.defineProperty(FormControlNameDirective.prototype, "formControlValue", {
Object.defineProperty(HybridFormModelDirective.prototype, "formControl", {
/**

@@ -126,15 +42,8 @@ * @return {?}

get: function () {
return this.formControl.value;
return this.self.control;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.formControl.setValue(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormControlNameDirective.prototype, "valid", {
Object.defineProperty(HybridFormModelDirective.prototype, "valid", {
/**

@@ -149,3 +58,3 @@ * @return {?}

});
Object.defineProperty(FormControlNameDirective.prototype, "pristine", {
Object.defineProperty(HybridFormModelDirective.prototype, "pristine", {
/**

@@ -160,3 +69,3 @@ * @return {?}

});
Object.defineProperty(FormControlNameDirective.prototype, "groupSubmitted", {
Object.defineProperty(HybridFormModelDirective.prototype, "groupSubmitted", {
/**

@@ -166,3 +75,3 @@ * @return {?}

get: function () {
return this.formGroupDirective.submitted;
return this.parent.submitted;
},

@@ -172,3 +81,3 @@ enumerable: true,

});
Object.defineProperty(FormControlNameDirective.prototype, "errors", {
Object.defineProperty(HybridFormModelDirective.prototype, "errors", {
/**

@@ -186,7 +95,7 @@ * @return {?}

*/
FormControlNameDirective.prototype.ngOnInit = function () {
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formControlName, this.formControl, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
HybridFormModelDirective.prototype.ngOnInit = function () {
addControl(this.formControl, this.ngModelValidChange, this.formControlValidValueDebounceStarted, this.ngModelValidChangeDebounce);
};
FormControlNameDirective.decorators = [
{ type: Directive, args: [{ selector: "[formControlName]" },] },
HybridFormModelDirective.decorators = [
{ type: Directive, args: [{ selector: "[ngModel]" },] },
];

@@ -196,19 +105,15 @@ /**

*/
FormControlNameDirective.ctorParameters = function () { return [
{ type: FormGroupDirective, decorators: [{ type: SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
{ type: ChangeDetectorRef, },
HybridFormModelDirective.ctorParameters = function () { return [
{ type: NgModel, decorators: [{ type: Self },] },
{ type: NgForm, decorators: [{ type: SkipSelf },] },
]; };
FormControlNameDirective.propDecorators = {
'formControlName': [{ type: Input },],
'validValueChangeDebounce': [{ type: Input },],
'formControlValueChange': [{ type: Output },],
'formControlValidValueChange': [{ type: Output },],
'formControlValue': [{ type: Input },],
HybridFormModelDirective.propDecorators = {
'ngModelValidChangeDebounce': [{ type: Input },],
'ngModelValidChange': [{ type: Output },],
};
return FormControlNameDirective;
return HybridFormModelDirective;
}());
var FormControlComponent = /** @class */ (function () {
function FormControlComponent() {
var HybridFormFieldComponent = /** @class */ (function () {
function HybridFormFieldComponent() {
this.validValueChanges = false;

@@ -219,8 +124,8 @@ }

*/
FormControlComponent.prototype.ngAfterContentInit = function () {
HybridFormFieldComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.formControlNameDirective.formControlValidValueDebounceStarted.subscribe(function (_) { return _this.validValueChanges = true; });
this.formControlNameDirective.formControlValidValueChange.subscribe(function (_) { return _this.validValueChanges = false; });
this.formControlNameDirective.ngModelValidChange.subscribe(function (_) { return _this.validValueChanges = false; });
};
Object.defineProperty(FormControlComponent.prototype, "required", {
Object.defineProperty(HybridFormFieldComponent.prototype, "required", {
/**

@@ -235,3 +140,3 @@ * @return {?}

});
Object.defineProperty(FormControlComponent.prototype, "valid", {
Object.defineProperty(HybridFormFieldComponent.prototype, "valid", {
/**

@@ -247,3 +152,3 @@ * @return {?}

});
Object.defineProperty(FormControlComponent.prototype, "errors", {
Object.defineProperty(HybridFormFieldComponent.prototype, "errors", {
/**

@@ -258,5 +163,5 @@ * @return {?}

});
FormControlComponent.decorators = [
HybridFormFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form-control',
selector: 'hf-field',
template: "\n <div class=\"hf-field\"\n [class.hf-field--required]=\"required\" \n [class.hf-field--invalid]=\"!valid\" \n [class.hf-field--valid-value-changes]=\"validValueChanges\">\n <label class=\"hf-field__label\">{{label}}</label>\n <span class=\"hf-field__control\"><ng-content></ng-content></span>\n <label *ngIf=\"!valid\" class=\"hf-field__errors\">{{errors|json}}</label>\n </div>"

@@ -268,15 +173,49 @@ },] },

*/
FormControlComponent.ctorParameters = function () { return []; };
FormControlComponent.propDecorators = {
HybridFormFieldComponent.ctorParameters = function () { return []; };
HybridFormFieldComponent.propDecorators = {
'label': [{ type: Input },],
'requiredValidator': [{ type: ContentChild, args: [RequiredValidator,] },],
'formControlNameDirective': [{ type: ContentChild, args: [FormControlNameDirective,] },],
'formControlNameDirective': [{ type: ContentChild, args: [HybridFormModelDirective,] },],
};
return FormControlComponent;
return HybridFormFieldComponent;
}());
var FormGroupComponent = /** @class */ (function () {
function FormGroupComponent() {
var HybridFormGroupComponent = /** @class */ (function () {
function HybridFormGroupComponent() {
}
Object.defineProperty(FormGroupComponent.prototype, "group", {
HybridFormGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form',
template: "<ng-content></ng-content>"
},] },
];
/**
* @nocollapse
*/
HybridFormGroupComponent.ctorParameters = function () { return []; };
return HybridFormGroupComponent;
}());
var HybridForm = /** @class */ (function () {
/**
* @param {?} self
* @param {?} parent
*/
function HybridForm(self, parent) {
this.self = self;
this.parent = parent;
this.ngFormValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngFormValidChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.unique = 0;
if (parent)
parent.addFormGroup(self);
}
/**
* @return {?}
*/
HybridForm.prototype.ngOnInit = function () {
addControl(this.self.form, this.ngFormValidChange, this.formControlValidValueDebounceStarted, this.ngFormValidChangeDebounce);
};
Object.defineProperty(HybridForm.prototype, "form", {
/**

@@ -286,3 +225,3 @@ * @return {?}

get: function () {
return this.formGroupNameDirective.formGroup;
return this.self.form;
},

@@ -292,7 +231,21 @@ enumerable: true,

});
FormGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form-group',
template: "<ng-content></ng-content>"
},] },
Object.defineProperty(HybridForm.prototype, "sequence", {
/**
* @return {?}
*/
get: function () {
return /** @type {?} */ (this.unique++);
},
enumerable: true,
configurable: true
});
/**
* @param {?} formGroup
* @return {?}
*/
HybridForm.prototype.addFormGroup = function (formGroup) {
this.self.form.addControl(formGroup.name || this.sequence, formGroup.form);
};
HybridForm.decorators = [
{ type: Directive, args: [{ selector: "form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]" },] },
];

@@ -302,11 +255,19 @@ /**

*/
FormGroupComponent.ctorParameters = function () { return []; };
FormGroupComponent.propDecorators = {
'formGroupNameDirective': [{ type: ContentChild, args: [FormGroupNameDirective,] },],
HybridForm.ctorParameters = function () { return [
{ type: NgForm, decorators: [{ type: Self },] },
{ type: HybridForm, decorators: [{ type: Optional }, { type: SkipSelf },] },
]; };
HybridForm.propDecorators = {
'ngFormValidChangeDebounce': [{ type: Input },],
'ngFormValidChange': [{ type: Output },],
};
return FormGroupComponent;
return HybridForm;
}());
var ValidSubmitDirective = /** @class */ (function () {
function ValidSubmitDirective() {
/**
* @param {?} ngForm
*/
function ValidSubmitDirective(ngForm) {
this.ngForm = ngForm;
this.validSubmit = new EventEmitter();

@@ -319,3 +280,3 @@ }

ValidSubmitDirective.prototype.onSubmit = function (e) {
if (this.formGroup.valid) {
if (this.ngForm.valid) {
this.validSubmit.emit(e);

@@ -325,5 +286,3 @@ }

ValidSubmitDirective.decorators = [
{ type: Directive, args: [{
selector: 'form[validSubmit]'
},] },
{ type: Directive, args: [{ selector: 'form[validSubmit]' },] },
];

@@ -333,6 +292,7 @@ /**

*/
ValidSubmitDirective.ctorParameters = function () { return []; };
ValidSubmitDirective.ctorParameters = function () { return [
{ type: NgForm, decorators: [{ type: Self },] },
]; };
ValidSubmitDirective.propDecorators = {
'validSubmit': [{ type: Output },],
'formGroup': [{ type: Input },],
'onSubmit': [{ type: HostListener, args: ['submit', ['$event'],] },],

@@ -345,7 +305,7 @@ };

/**
* @param {?} formGroupDirective
* @param {?} ngForm
* @param {?} hasSubmitButton
*/
function UnsavedDirective(formGroupDirective, hasSubmitButton) {
this.formGroupDirective = formGroupDirective;
function UnsavedDirective(ngForm, hasSubmitButton) {
this.ngForm = ngForm;
this.hasSubmitButton = hasSubmitButton;

@@ -389,3 +349,3 @@ this.unsavedChange = new EventEmitter();

get: function () {
return this.formGroupDirective.form;
return this.ngForm.form;
},

@@ -404,3 +364,3 @@ enumerable: true,

UnsavedDirective.ctorParameters = function () { return [
{ type: FormGroupDirective, decorators: [{ type: Self },] },
{ type: NgForm, decorators: [{ type: Self },] },
{ type: ValidSubmitDirective, decorators: [{ type: Self },] },

@@ -420,18 +380,19 @@ ]; };

{ type: NgModule, args: [{
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, FormsModule],
declarations: [
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
],
exports: [
FormsModule,
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
]

@@ -451,3 +412,3 @@ },] },

export { HybridFormsModule, FormControlComponent as ɵe, FormGroupComponent as ɵf, FormControlNameDirective as ɵc, FormGroupNameDirective as ɵd, UnsavedDirective as ɵa, ValidSubmitDirective as ɵb };
export { HybridFormsModule, HybridForm, HybridFormFieldComponent as ɵd, HybridFormGroupComponent as ɵe, HybridFormModelDirective as ɵc, UnsavedDirective as ɵa, ValidSubmitDirective as ɵb };
//# sourceMappingURL=angular-hybrid-forms.es5.js.map

275

angular-hybrid-forms.js

@@ -1,4 +0,4 @@

import { ChangeDetectorRef, Component, ContentChild, Directive, EventEmitter, HostListener, Input, NgModule, Optional, Output, Self, SkipSelf } from '@angular/core';
import { Component, ContentChild, Directive, EventEmitter, HostListener, Input, NgModule, Optional, Output, Self, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormGroupDirective, ReactiveFormsModule, RequiredValidator } from '@angular/forms';
import { FormsModule, NgForm, NgModel, RequiredValidator } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';

@@ -10,8 +10,3 @@ import { Subject } from 'rxjs/Subject';

* @template T
* @param {?} cd
* @param {?} formGroupNameDirective
* @param {?} formGroupDirective
* @param {?} name
* @param {?} control
* @param {?} valueChange
* @param {?} validValueChange

@@ -22,54 +17,20 @@ * @param {?} validValueChangeDebounceStarted

*/
function addControl(cd, formGroupNameDirective, formGroupDirective, name, control, valueChange, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
cd.detach();
const /** @type {?} */ parent = formGroupNameDirective && formGroupNameDirective.formGroup || formGroupDirective && formGroupDirective.form;
if (parent != control) {
addToParent(parent, name, control);
control.valueChanges.subscribe(v => valueChange.emit(v));
control.valueChanges
.subscribe(v => control.valid ? validValueChangeDebounceStarted.next(v) : null);
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(v => control.valid ? validValueChange.emit(v) : null);
}
setTimeout(() => cd.reattach(), 0);
function addControl(control, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
control.valueChanges
.subscribe(v => control.valid ? validValueChangeDebounceStarted.next(v) : null);
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(v => control.valid ? validValueChange.emit(v) : null);
}
/**
* @param {?} parent
* @param {?} name
* @param {?} control
* @return {?}
*/
function addToParent(parent, name, control) {
if (parent) {
assertNoNameConflicts(parent, name);
parent.addControl(name, control);
}
}
/**
* @param {?} parent
* @param {?} name
* @return {?}
*/
function assertNoNameConflicts(parent, name) {
if (parent.get(name))
throw new Error(`A control of named: '${name}' already exists on parent: ${JSON.stringify(parent.value)}. Perhaps you did not name your group or control?`);
}
class FormGroupNameDirective {
class HybridFormModelDirective {
/**
* @param {?} cd
* @param {?} self
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} parent
*/
constructor(cd, self, formGroupDirective, formGroupNameDirective) {
this.cd = cd;
constructor(self, parent) {
this.self = self;
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new EventEmitter();
this.formControlValidValueChange = new EventEmitter();
this.parent = parent;
this.ngModelValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngModelValidChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.formGroup = new FormGroup({});
}

@@ -79,59 +40,8 @@ /**

*/
ngOnInit() {
if (!this.formGroupName)
this.formGroup = this.self.form;
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formGroupName, this.formGroup, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
get formControl() {
return this.self.control;
}
}
FormGroupNameDirective.decorators = [
{ type: Directive, args: [{ selector: `[formGroupName],[formGroup]` },] },
];
/**
* @nocollapse
*/
FormGroupNameDirective.ctorParameters = () => [
{ type: ChangeDetectorRef, },
{ type: FormGroupDirective, decorators: [{ type: Optional }, { type: Self },] },
{ type: FormGroupDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
];
FormGroupNameDirective.propDecorators = {
'formGroupName': [{ type: Input },],
'validValueChangeDebounce': [{ type: Input },],
'formControlValueChange': [{ type: Output },],
'formControlValidValueChange': [{ type: Output },],
};
class FormControlNameDirective {
/**
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} cd
*/
constructor(formGroupDirective, formGroupNameDirective, cd) {
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.cd = cd;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new EventEmitter();
this.formControlValidValueChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.formControl = new FormControl();
}
/**
* @param {?} value
* @return {?}
*/
set formControlValue(value) {
this.formControl.setValue(value);
}
/**
* @return {?}
*/
get formControlValue() {
return this.formControl.value;
}
/**
* @return {?}
*/
get valid() {

@@ -150,3 +60,3 @@ return this.formControl.valid;

get groupSubmitted() {
return this.formGroupDirective.submitted;
return this.parent.submitted;
}

@@ -163,7 +73,7 @@ /**

ngOnInit() {
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formControlName, this.formControl, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
addControl(this.formControl, this.ngModelValidChange, this.formControlValidValueDebounceStarted, this.ngModelValidChangeDebounce);
}
}
FormControlNameDirective.decorators = [
{ type: Directive, args: [{ selector: `[formControlName]` },] },
HybridFormModelDirective.decorators = [
{ type: Directive, args: [{ selector: `[ngModel]` },] },
];

@@ -173,16 +83,12 @@ /**

*/
FormControlNameDirective.ctorParameters = () => [
{ type: FormGroupDirective, decorators: [{ type: SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
{ type: ChangeDetectorRef, },
HybridFormModelDirective.ctorParameters = () => [
{ type: NgModel, decorators: [{ type: Self },] },
{ type: NgForm, decorators: [{ type: SkipSelf },] },
];
FormControlNameDirective.propDecorators = {
'formControlName': [{ type: Input },],
'validValueChangeDebounce': [{ type: Input },],
'formControlValueChange': [{ type: Output },],
'formControlValidValueChange': [{ type: Output },],
'formControlValue': [{ type: Input },],
HybridFormModelDirective.propDecorators = {
'ngModelValidChangeDebounce': [{ type: Input },],
'ngModelValidChange': [{ type: Output },],
};
class FormControlComponent {
class HybridFormFieldComponent {
constructor() {

@@ -196,3 +102,3 @@ this.validValueChanges = false;

this.formControlNameDirective.formControlValidValueDebounceStarted.subscribe(_ => this.validValueChanges = true);
this.formControlNameDirective.formControlValidValueChange.subscribe(_ => this.validValueChanges = false);
this.formControlNameDirective.ngModelValidChange.subscribe(_ => this.validValueChanges = false);
}

@@ -219,5 +125,5 @@ /**

}
FormControlComponent.decorators = [
HybridFormFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form-control',
selector: 'hf-field',
template: `

@@ -237,22 +143,65 @@ <div class="hf-field"

*/
FormControlComponent.ctorParameters = () => [];
FormControlComponent.propDecorators = {
HybridFormFieldComponent.ctorParameters = () => [];
HybridFormFieldComponent.propDecorators = {
'label': [{ type: Input },],
'requiredValidator': [{ type: ContentChild, args: [RequiredValidator,] },],
'formControlNameDirective': [{ type: ContentChild, args: [FormControlNameDirective,] },],
'formControlNameDirective': [{ type: ContentChild, args: [HybridFormModelDirective,] },],
};
class FormGroupComponent {
class HybridFormGroupComponent {
}
HybridFormGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form',
template: `<ng-content></ng-content>`
},] },
];
/**
* @nocollapse
*/
HybridFormGroupComponent.ctorParameters = () => [];
class HybridForm {
/**
* @param {?} self
* @param {?} parent
*/
constructor(self, parent) {
this.self = self;
this.parent = parent;
this.ngFormValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngFormValidChange = new EventEmitter();
this.formControlValidValueDebounceStarted = new Subject();
this.unique = 0;
if (parent)
parent.addFormGroup(self);
}
/**
* @return {?}
*/
get group() {
return this.formGroupNameDirective.formGroup;
ngOnInit() {
addControl(this.self.form, this.ngFormValidChange, this.formControlValidValueDebounceStarted, this.ngFormValidChangeDebounce);
}
/**
* @return {?}
*/
get form() {
return this.self.form;
}
/**
* @return {?}
*/
get sequence() {
return /** @type {?} */ (this.unique++);
}
/**
* @param {?} formGroup
* @return {?}
*/
addFormGroup(formGroup) {
this.self.form.addControl(formGroup.name || this.sequence, formGroup.form);
}
}
FormGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'hf-form-group',
template: `<ng-content></ng-content>`
},] },
HybridForm.decorators = [
{ type: Directive, args: [{ selector: `form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]` },] },
];

@@ -262,9 +211,17 @@ /**

*/
FormGroupComponent.ctorParameters = () => [];
FormGroupComponent.propDecorators = {
'formGroupNameDirective': [{ type: ContentChild, args: [FormGroupNameDirective,] },],
HybridForm.ctorParameters = () => [
{ type: NgForm, decorators: [{ type: Self },] },
{ type: HybridForm, decorators: [{ type: Optional }, { type: SkipSelf },] },
];
HybridForm.propDecorators = {
'ngFormValidChangeDebounce': [{ type: Input },],
'ngFormValidChange': [{ type: Output },],
};
class ValidSubmitDirective {
constructor() {
/**
* @param {?} ngForm
*/
constructor(ngForm) {
this.ngForm = ngForm;
this.validSubmit = new EventEmitter();

@@ -277,3 +234,3 @@ }

onSubmit(e) {
if (this.formGroup.valid) {
if (this.ngForm.valid) {
this.validSubmit.emit(e);

@@ -284,5 +241,3 @@ }

ValidSubmitDirective.decorators = [
{ type: Directive, args: [{
selector: 'form[validSubmit]'
},] },
{ type: Directive, args: [{ selector: 'form[validSubmit]' },] },
];

@@ -292,6 +247,7 @@ /**

*/
ValidSubmitDirective.ctorParameters = () => [];
ValidSubmitDirective.ctorParameters = () => [
{ type: NgForm, decorators: [{ type: Self },] },
];
ValidSubmitDirective.propDecorators = {
'validSubmit': [{ type: Output },],
'formGroup': [{ type: Input },],
'onSubmit': [{ type: HostListener, args: ['submit', ['$event'],] },],

@@ -302,7 +258,7 @@ };

/**
* @param {?} formGroupDirective
* @param {?} ngForm
* @param {?} hasSubmitButton
*/
constructor(formGroupDirective, hasSubmitButton) {
this.formGroupDirective = formGroupDirective;
constructor(ngForm, hasSubmitButton) {
this.ngForm = ngForm;
this.hasSubmitButton = hasSubmitButton;

@@ -344,3 +300,3 @@ this.unsavedChange = new EventEmitter();

get form() {
return this.formGroupDirective.form;
return this.ngForm.form;
}

@@ -357,3 +313,3 @@ }

UnsavedDirective.ctorParameters = () => [
{ type: FormGroupDirective, decorators: [{ type: Self },] },
{ type: NgForm, decorators: [{ type: Self },] },
{ type: ValidSubmitDirective, decorators: [{ type: Self },] },

@@ -370,18 +326,19 @@ ];

{ type: NgModule, args: [{
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, FormsModule],
declarations: [
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
],
exports: [
FormsModule,
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
]

@@ -399,3 +356,3 @@ },] },

export { HybridFormsModule, FormControlComponent as ɵe, FormGroupComponent as ɵf, FormControlNameDirective as ɵc, FormGroupNameDirective as ɵd, UnsavedDirective as ɵa, ValidSubmitDirective as ɵb };
export { HybridFormsModule, HybridForm, HybridFormFieldComponent as ɵd, HybridFormGroupComponent as ɵe, HybridFormModelDirective as ɵc, UnsavedDirective as ɵa, ValidSubmitDirective as ɵb };
//# sourceMappingURL=angular-hybrid-forms.js.map

2

angular-hybrid-forms.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":3,"metadata":{"HybridFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form[unsaved]"}]}],"members":{"unsavedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["unsaved"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormGroupDirective"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["submit",["$event"]]}]}],"unsavedParameterChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form[validSubmit]"}]}],"members":{"validSubmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSubmit":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["submit",["$event"]]}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControlName]"}]}],"members":{"formControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"validValueChangeDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formControlValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"formControlValidValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormGroupDirective"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"formControlValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formGroupName],[formGroup]"}]}],"members":{"formGroupName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"validValueChangeDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formControlValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"formControlValidValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/forms","name":"FormGroupDirective"},{"__symbolic":"reference","module":"@angular/forms","name":"FormGroupDirective"},{"__symbolic":"reference","name":"ɵd"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hf-form-control","template":"\n <div class=\"hf-field\"\n [class.hf-field--required]=\"required\" \n [class.hf-field--invalid]=\"!valid\" \n [class.hf-field--valid-value-changes]=\"validValueChanges\">\n <label class=\"hf-field__label\">{{label}}</label>\n <span class=\"hf-field__control\"><ng-content></ng-content></span>\n <label *ngIf=\"!valid\" class=\"hf-field__errors\">{{errors|json}}</label>\n </div>"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"requiredValidator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"RequiredValidator"}]}]}],"formControlNameDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hf-form-group","template":"<ng-content></ng-content>"}]}],"members":{"formGroupNameDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"ɵd"}]}]}]}}},"origins":{"HybridFormsModule":"./src/hybrid-forms.module","ɵa":"./src/directive/unsaved.directive","ɵb":"./src/directive/valid-submit.directive","ɵc":"./src/directive/form-control-name.directive","ɵd":"./src/directive/form-group-name.directive","ɵe":"./src/component/form-control.component","ɵf":"./src/component/form-group.component"},"importAs":"angular-hybrid-forms"}
{"__symbolic":"module","version":3,"metadata":{"HybridFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"HybridForm"}],"exports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"HybridForm"}]}]}],"members":{}},"HybridForm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]"}]}],"members":{"ngFormValidChangeDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngFormValidChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgForm"},{"__symbolic":"reference","name":"HybridForm"}]}],"ngOnInit":[{"__symbolic":"method"}],"addFormGroup":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form[unsaved]"}]}],"members":{"unsavedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["unsaved"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgForm"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["submit",["$event"]]}]}],"unsavedParameterChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form[validSubmit]"}]}],"members":{"validSubmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgForm"}]}],"onSubmit":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["submit",["$event"]]}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngModel]"}]}],"members":{"ngModelValidChangeDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngModelValidChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgModel"},{"__symbolic":"reference","module":"@angular/forms","name":"NgForm"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hf-field","template":"\n <div class=\"hf-field\"\n [class.hf-field--required]=\"required\" \n [class.hf-field--invalid]=\"!valid\" \n [class.hf-field--valid-value-changes]=\"validValueChanges\">\n <label class=\"hf-field__label\">{{label}}</label>\n <span class=\"hf-field__control\"><ng-content></ng-content></span>\n <label *ngIf=\"!valid\" class=\"hf-field__errors\">{{errors|json}}</label>\n </div>"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"requiredValidator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"RequiredValidator"}]}]}],"formControlNameDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hf-form","template":"<ng-content></ng-content>"}]}],"members":{}}},"origins":{"HybridFormsModule":"./src/hybrid-forms.module","HybridForm":"./src/directive/hybrid-form.directive","ɵa":"./src/directive/unsaved.directive","ɵb":"./src/directive/valid-submit.directive","ɵc":"./src/directive/hybrid-form-model.directive","ɵd":"./src/component/hybrid-form-field.component","ɵe":"./src/component/hybrid-form.component"},"importAs":"angular-hybrid-forms"}

311

bundles/angular-hybrid-forms.umd.js

@@ -10,8 +10,3 @@ (function (global, factory) {

* @template T
* @param {?} cd
* @param {?} formGroupNameDirective
* @param {?} formGroupDirective
* @param {?} name
* @param {?} control
* @param {?} valueChange
* @param {?} validValueChange

@@ -22,101 +17,22 @@ * @param {?} validValueChangeDebounceStarted

*/
function addControl(cd, formGroupNameDirective, formGroupDirective, name, control, valueChange, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
cd.detach();
var /** @type {?} */ parent = formGroupNameDirective && formGroupNameDirective.formGroup || formGroupDirective && formGroupDirective.form;
if (parent != control) {
addToParent(parent, name, control);
control.valueChanges.subscribe(function (v) { return valueChange.emit(v); });
control.valueChanges
.subscribe(function (v) { return control.valid ? validValueChangeDebounceStarted.next(v) : null; });
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(function (v) { return control.valid ? validValueChange.emit(v) : null; });
}
setTimeout(function () { return cd.reattach(); }, 0);
function addControl(control, validValueChange, validValueChangeDebounceStarted, validValueChangeDebounce) {
control.valueChanges
.subscribe(function (v) { return control.valid ? validValueChangeDebounceStarted.next(v) : null; });
control.valueChanges.debounceTime(validValueChangeDebounce)
.subscribe(function (v) { return control.valid ? validValueChange.emit(v) : null; });
}
/**
* @param {?} parent
* @param {?} name
* @param {?} control
* @return {?}
*/
function addToParent(parent, name, control) {
if (parent) {
assertNoNameConflicts(parent, name);
parent.addControl(name, control);
}
}
/**
* @param {?} parent
* @param {?} name
* @return {?}
*/
function assertNoNameConflicts(parent, name) {
if (parent.get(name))
throw new Error("A control of named: '" + name + "' already exists on parent: " + JSON.stringify(parent.value) + ". Perhaps you did not name your group or control?");
}
var FormGroupNameDirective = /** @class */ (function () {
var HybridFormModelDirective = /** @class */ (function () {
/**
* @param {?} cd
* @param {?} self
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} parent
*/
function FormGroupNameDirective(cd, self, formGroupDirective, formGroupNameDirective) {
this.cd = cd;
function HybridFormModelDirective(self, parent) {
this.self = self;
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new _angular_core.EventEmitter();
this.formControlValidValueChange = new _angular_core.EventEmitter();
this.parent = parent;
this.ngModelValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngModelValidChange = new _angular_core.EventEmitter();
this.formControlValidValueDebounceStarted = new rxjs_Subject.Subject();
this.formGroup = new _angular_forms.FormGroup({});
}
/**
* @return {?}
*/
FormGroupNameDirective.prototype.ngOnInit = function () {
if (!this.formGroupName)
this.formGroup = this.self.form;
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formGroupName, this.formGroup, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
};
FormGroupNameDirective.decorators = [
{ type: _angular_core.Directive, args: [{ selector: "[formGroupName],[formGroup]" },] },
];
/**
* @nocollapse
*/
FormGroupNameDirective.ctorParameters = function () { return [
{ type: _angular_core.ChangeDetectorRef, },
{ type: _angular_forms.FormGroupDirective, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self },] },
{ type: _angular_forms.FormGroupDirective, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.SkipSelf },] },
]; };
FormGroupNameDirective.propDecorators = {
'formGroupName': [{ type: _angular_core.Input },],
'validValueChangeDebounce': [{ type: _angular_core.Input },],
'formControlValueChange': [{ type: _angular_core.Output },],
'formControlValidValueChange': [{ type: _angular_core.Output },],
};
return FormGroupNameDirective;
}());
var FormControlNameDirective = /** @class */ (function () {
/**
* @param {?} formGroupDirective
* @param {?} formGroupNameDirective
* @param {?} cd
*/
function FormControlNameDirective(formGroupDirective, formGroupNameDirective, cd) {
this.formGroupDirective = formGroupDirective;
this.formGroupNameDirective = formGroupNameDirective;
this.cd = cd;
this.validValueChangeDebounce = defaultValidValueChangeDebounce;
this.formControlValueChange = new _angular_core.EventEmitter();
this.formControlValidValueChange = new _angular_core.EventEmitter();
this.formControlValidValueDebounceStarted = new rxjs_Subject.Subject();
this.formControl = new _angular_forms.FormControl();
}
Object.defineProperty(FormControlNameDirective.prototype, "formControlValue", {
Object.defineProperty(HybridFormModelDirective.prototype, "formControl", {
/**

@@ -126,15 +42,8 @@ * @return {?}

get: function () {
return this.formControl.value;
return this.self.control;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.formControl.setValue(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormControlNameDirective.prototype, "valid", {
Object.defineProperty(HybridFormModelDirective.prototype, "valid", {
/**

@@ -149,3 +58,3 @@ * @return {?}

});
Object.defineProperty(FormControlNameDirective.prototype, "pristine", {
Object.defineProperty(HybridFormModelDirective.prototype, "pristine", {
/**

@@ -160,3 +69,3 @@ * @return {?}

});
Object.defineProperty(FormControlNameDirective.prototype, "groupSubmitted", {
Object.defineProperty(HybridFormModelDirective.prototype, "groupSubmitted", {
/**

@@ -166,3 +75,3 @@ * @return {?}

get: function () {
return this.formGroupDirective.submitted;
return this.parent.submitted;
},

@@ -172,3 +81,3 @@ enumerable: true,

});
Object.defineProperty(FormControlNameDirective.prototype, "errors", {
Object.defineProperty(HybridFormModelDirective.prototype, "errors", {
/**

@@ -186,7 +95,7 @@ * @return {?}

*/
FormControlNameDirective.prototype.ngOnInit = function () {
addControl(this.cd, this.formGroupNameDirective, this.formGroupDirective, this.formControlName, this.formControl, this.formControlValueChange, this.formControlValidValueChange, this.formControlValidValueDebounceStarted, this.validValueChangeDebounce);
HybridFormModelDirective.prototype.ngOnInit = function () {
addControl(this.formControl, this.ngModelValidChange, this.formControlValidValueDebounceStarted, this.ngModelValidChangeDebounce);
};
FormControlNameDirective.decorators = [
{ type: _angular_core.Directive, args: [{ selector: "[formControlName]" },] },
HybridFormModelDirective.decorators = [
{ type: _angular_core.Directive, args: [{ selector: "[ngModel]" },] },
];

@@ -196,19 +105,15 @@ /**

*/
FormControlNameDirective.ctorParameters = function () { return [
{ type: _angular_forms.FormGroupDirective, decorators: [{ type: _angular_core.SkipSelf },] },
{ type: FormGroupNameDirective, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.SkipSelf },] },
{ type: _angular_core.ChangeDetectorRef, },
HybridFormModelDirective.ctorParameters = function () { return [
{ type: _angular_forms.NgModel, decorators: [{ type: _angular_core.Self },] },
{ type: _angular_forms.NgForm, decorators: [{ type: _angular_core.SkipSelf },] },
]; };
FormControlNameDirective.propDecorators = {
'formControlName': [{ type: _angular_core.Input },],
'validValueChangeDebounce': [{ type: _angular_core.Input },],
'formControlValueChange': [{ type: _angular_core.Output },],
'formControlValidValueChange': [{ type: _angular_core.Output },],
'formControlValue': [{ type: _angular_core.Input },],
HybridFormModelDirective.propDecorators = {
'ngModelValidChangeDebounce': [{ type: _angular_core.Input },],
'ngModelValidChange': [{ type: _angular_core.Output },],
};
return FormControlNameDirective;
return HybridFormModelDirective;
}());
var FormControlComponent = /** @class */ (function () {
function FormControlComponent() {
var HybridFormFieldComponent = /** @class */ (function () {
function HybridFormFieldComponent() {
this.validValueChanges = false;

@@ -219,8 +124,8 @@ }

*/
FormControlComponent.prototype.ngAfterContentInit = function () {
HybridFormFieldComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.formControlNameDirective.formControlValidValueDebounceStarted.subscribe(function (_) { return _this.validValueChanges = true; });
this.formControlNameDirective.formControlValidValueChange.subscribe(function (_) { return _this.validValueChanges = false; });
this.formControlNameDirective.ngModelValidChange.subscribe(function (_) { return _this.validValueChanges = false; });
};
Object.defineProperty(FormControlComponent.prototype, "required", {
Object.defineProperty(HybridFormFieldComponent.prototype, "required", {
/**

@@ -235,3 +140,3 @@ * @return {?}

});
Object.defineProperty(FormControlComponent.prototype, "valid", {
Object.defineProperty(HybridFormFieldComponent.prototype, "valid", {
/**

@@ -247,3 +152,3 @@ * @return {?}

});
Object.defineProperty(FormControlComponent.prototype, "errors", {
Object.defineProperty(HybridFormFieldComponent.prototype, "errors", {
/**

@@ -258,5 +163,5 @@ * @return {?}

});
FormControlComponent.decorators = [
HybridFormFieldComponent.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'hf-form-control',
selector: 'hf-field',
template: "\n <div class=\"hf-field\"\n [class.hf-field--required]=\"required\" \n [class.hf-field--invalid]=\"!valid\" \n [class.hf-field--valid-value-changes]=\"validValueChanges\">\n <label class=\"hf-field__label\">{{label}}</label>\n <span class=\"hf-field__control\"><ng-content></ng-content></span>\n <label *ngIf=\"!valid\" class=\"hf-field__errors\">{{errors|json}}</label>\n </div>"

@@ -268,15 +173,49 @@ },] },

*/
FormControlComponent.ctorParameters = function () { return []; };
FormControlComponent.propDecorators = {
HybridFormFieldComponent.ctorParameters = function () { return []; };
HybridFormFieldComponent.propDecorators = {
'label': [{ type: _angular_core.Input },],
'requiredValidator': [{ type: _angular_core.ContentChild, args: [_angular_forms.RequiredValidator,] },],
'formControlNameDirective': [{ type: _angular_core.ContentChild, args: [FormControlNameDirective,] },],
'formControlNameDirective': [{ type: _angular_core.ContentChild, args: [HybridFormModelDirective,] },],
};
return FormControlComponent;
return HybridFormFieldComponent;
}());
var FormGroupComponent = /** @class */ (function () {
function FormGroupComponent() {
var HybridFormGroupComponent = /** @class */ (function () {
function HybridFormGroupComponent() {
}
Object.defineProperty(FormGroupComponent.prototype, "group", {
HybridFormGroupComponent.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'hf-form',
template: "<ng-content></ng-content>"
},] },
];
/**
* @nocollapse
*/
HybridFormGroupComponent.ctorParameters = function () { return []; };
return HybridFormGroupComponent;
}());
var HybridForm = /** @class */ (function () {
/**
* @param {?} self
* @param {?} parent
*/
function HybridForm(self, parent) {
this.self = self;
this.parent = parent;
this.ngFormValidChangeDebounce = defaultValidValueChangeDebounce;
this.ngFormValidChange = new _angular_core.EventEmitter();
this.formControlValidValueDebounceStarted = new rxjs_Subject.Subject();
this.unique = 0;
if (parent)
parent.addFormGroup(self);
}
/**
* @return {?}
*/
HybridForm.prototype.ngOnInit = function () {
addControl(this.self.form, this.ngFormValidChange, this.formControlValidValueDebounceStarted, this.ngFormValidChangeDebounce);
};
Object.defineProperty(HybridForm.prototype, "form", {
/**

@@ -286,3 +225,3 @@ * @return {?}

get: function () {
return this.formGroupNameDirective.formGroup;
return this.self.form;
},

@@ -292,7 +231,21 @@ enumerable: true,

});
FormGroupComponent.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'hf-form-group',
template: "<ng-content></ng-content>"
},] },
Object.defineProperty(HybridForm.prototype, "sequence", {
/**
* @return {?}
*/
get: function () {
return /** @type {?} */ (this.unique++);
},
enumerable: true,
configurable: true
});
/**
* @param {?} formGroup
* @return {?}
*/
HybridForm.prototype.addFormGroup = function (formGroup) {
this.self.form.addControl(formGroup.name || this.sequence, formGroup.form);
};
HybridForm.decorators = [
{ type: _angular_core.Directive, args: [{ selector: "form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]" },] },
];

@@ -302,11 +255,19 @@ /**

*/
FormGroupComponent.ctorParameters = function () { return []; };
FormGroupComponent.propDecorators = {
'formGroupNameDirective': [{ type: _angular_core.ContentChild, args: [FormGroupNameDirective,] },],
HybridForm.ctorParameters = function () { return [
{ type: _angular_forms.NgForm, decorators: [{ type: _angular_core.Self },] },
{ type: HybridForm, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.SkipSelf },] },
]; };
HybridForm.propDecorators = {
'ngFormValidChangeDebounce': [{ type: _angular_core.Input },],
'ngFormValidChange': [{ type: _angular_core.Output },],
};
return FormGroupComponent;
return HybridForm;
}());
var ValidSubmitDirective = /** @class */ (function () {
function ValidSubmitDirective() {
/**
* @param {?} ngForm
*/
function ValidSubmitDirective(ngForm) {
this.ngForm = ngForm;
this.validSubmit = new _angular_core.EventEmitter();

@@ -319,3 +280,3 @@ }

ValidSubmitDirective.prototype.onSubmit = function (e) {
if (this.formGroup.valid) {
if (this.ngForm.valid) {
this.validSubmit.emit(e);

@@ -325,5 +286,3 @@ }

ValidSubmitDirective.decorators = [
{ type: _angular_core.Directive, args: [{
selector: 'form[validSubmit]'
},] },
{ type: _angular_core.Directive, args: [{ selector: 'form[validSubmit]' },] },
];

@@ -333,6 +292,7 @@ /**

*/
ValidSubmitDirective.ctorParameters = function () { return []; };
ValidSubmitDirective.ctorParameters = function () { return [
{ type: _angular_forms.NgForm, decorators: [{ type: _angular_core.Self },] },
]; };
ValidSubmitDirective.propDecorators = {
'validSubmit': [{ type: _angular_core.Output },],
'formGroup': [{ type: _angular_core.Input },],
'onSubmit': [{ type: _angular_core.HostListener, args: ['submit', ['$event'],] },],

@@ -345,7 +305,7 @@ };

/**
* @param {?} formGroupDirective
* @param {?} ngForm
* @param {?} hasSubmitButton
*/
function UnsavedDirective(formGroupDirective, hasSubmitButton) {
this.formGroupDirective = formGroupDirective;
function UnsavedDirective(ngForm, hasSubmitButton) {
this.ngForm = ngForm;
this.hasSubmitButton = hasSubmitButton;

@@ -389,3 +349,3 @@ this.unsavedChange = new _angular_core.EventEmitter();

get: function () {
return this.formGroupDirective.form;
return this.ngForm.form;
},

@@ -404,3 +364,3 @@ enumerable: true,

UnsavedDirective.ctorParameters = function () { return [
{ type: _angular_forms.FormGroupDirective, decorators: [{ type: _angular_core.Self },] },
{ type: _angular_forms.NgForm, decorators: [{ type: _angular_core.Self },] },
{ type: ValidSubmitDirective, decorators: [{ type: _angular_core.Self },] },

@@ -420,18 +380,19 @@ ]; };

{ type: _angular_core.NgModule, args: [{
imports: [_angular_common.CommonModule, _angular_forms.ReactiveFormsModule],
imports: [_angular_common.CommonModule, _angular_forms.FormsModule],
declarations: [
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
],
exports: [
_angular_forms.FormsModule,
UnsavedDirective,
ValidSubmitDirective,
FormControlNameDirective,
FormControlComponent,
FormGroupComponent,
FormGroupNameDirective
HybridFormModelDirective,
HybridFormFieldComponent,
HybridFormGroupComponent,
HybridForm
]

@@ -452,6 +413,6 @@ },] },

exports.HybridFormsModule = HybridFormsModule;
exports.ɵe = FormControlComponent;
exports.ɵf = FormGroupComponent;
exports.ɵc = FormControlNameDirective;
exports.ɵd = FormGroupNameDirective;
exports.HybridForm = HybridForm;
exports.ɵd = HybridFormFieldComponent;
exports.ɵe = HybridFormGroupComponent;
exports.ɵc = HybridFormModelDirective;
exports.ɵa = UnsavedDirective;

@@ -458,0 +419,0 @@ exports.ɵb = ValidSubmitDirective;

2

bundles/angular-hybrid-forms.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs/add/operator/debounceTime"),require("rxjs/Subject")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms","rxjs/add/operator/debounceTime","rxjs/Subject"],t):t(e.angularHybridForms=e.angularHybridForms||{},e.ng.core,e.ng.common,e.ng.forms,null,e.rxjs_Subject)}(this,function(e,t,r,o,n,i){"use strict";function a(e,t,r,o,n,i,a,s,l){e.detach();var c=t&&t.formGroup||r&&r.form;c!=n&&(u(c,o,n),n.valueChanges.subscribe(function(e){return i.emit(e)}),n.valueChanges.subscribe(function(e){return n.valid?s.next(e):null}),n.valueChanges.debounceTime(l).subscribe(function(e){return n.valid?a.emit(e):null})),setTimeout(function(){return e.reattach()},0)}function u(e,t,r){e&&(s(e,t),e.addControl(t,r))}function s(e,t){if(e.get(t))throw new Error("A control of named: '"+t+"' already exists on parent: "+JSON.stringify(e.value)+". Perhaps you did not name your group or control?")}var l=400,c=function(){function e(e,r,n,a){this.cd=e,this.self=r,this.formGroupDirective=n,this.formGroupNameDirective=a,this.validValueChangeDebounce=l,this.formControlValueChange=new t.EventEmitter,this.formControlValidValueChange=new t.EventEmitter,this.formControlValidValueDebounceStarted=new i.Subject,this.formGroup=new o.FormGroup({})}return e.prototype.ngOnInit=function(){this.formGroupName||(this.formGroup=this.self.form),a(this.cd,this.formGroupNameDirective,this.formGroupDirective,this.formGroupName,this.formGroup,this.formControlValueChange,this.formControlValidValueChange,this.formControlValidValueDebounceStarted,this.validValueChangeDebounce)},e.decorators=[{type:t.Directive,args:[{selector:"[formGroupName],[formGroup]"}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:o.FormGroupDirective,decorators:[{type:t.Optional},{type:t.Self}]},{type:o.FormGroupDirective,decorators:[{type:t.Optional},{type:t.SkipSelf}]},{type:e,decorators:[{type:t.Optional},{type:t.SkipSelf}]}]},e.propDecorators={formGroupName:[{type:t.Input}],validValueChangeDebounce:[{type:t.Input}],formControlValueChange:[{type:t.Output}],formControlValidValueChange:[{type:t.Output}]},e}(),f=function(){function e(e,r,n){this.formGroupDirective=e,this.formGroupNameDirective=r,this.cd=n,this.validValueChangeDebounce=l,this.formControlValueChange=new t.EventEmitter,this.formControlValidValueChange=new t.EventEmitter,this.formControlValidValueDebounceStarted=new i.Subject,this.formControl=new o.FormControl}return Object.defineProperty(e.prototype,"formControlValue",{get:function(){return this.formControl.value},set:function(e){this.formControl.setValue(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valid",{get:function(){return this.formControl.valid},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"pristine",{get:function(){return this.formControl.pristine},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"groupSubmitted",{get:function(){return this.formGroupDirective.submitted},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"errors",{get:function(){return this.formControl.errors},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){a(this.cd,this.formGroupNameDirective,this.formGroupDirective,this.formControlName,this.formControl,this.formControlValueChange,this.formControlValidValueChange,this.formControlValidValueDebounceStarted,this.validValueChangeDebounce)},e.decorators=[{type:t.Directive,args:[{selector:"[formControlName]"}]}],e.ctorParameters=function(){return[{type:o.FormGroupDirective,decorators:[{type:t.SkipSelf}]},{type:c,decorators:[{type:t.Optional},{type:t.SkipSelf}]},{type:t.ChangeDetectorRef}]},e.propDecorators={formControlName:[{type:t.Input}],validValueChangeDebounce:[{type:t.Input}],formControlValueChange:[{type:t.Output}],formControlValidValueChange:[{type:t.Output}],formControlValue:[{type:t.Input}]},e}(),m=function(){function e(){this.validValueChanges=!1}return e.prototype.ngAfterContentInit=function(){var e=this;this.formControlNameDirective.formControlValidValueDebounceStarted.subscribe(function(t){return e.validValueChanges=!0}),this.formControlNameDirective.formControlValidValueChange.subscribe(function(t){return e.validValueChanges=!1})},Object.defineProperty(e.prototype,"required",{get:function(){return this.requiredValidator&&this.requiredValidator.required},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valid",{get:function(){return this.formControlNameDirective&&(!this.formControlNameDirective.groupSubmitted&&this.formControlNameDirective.pristine||this.formControlNameDirective.valid)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"errors",{get:function(){return this.formControlNameDirective&&this.formControlNameDirective.errors},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Component,args:[{selector:"hf-form-control",template:'\n <div class="hf-field"\n [class.hf-field--required]="required" \n [class.hf-field--invalid]="!valid" \n [class.hf-field--valid-value-changes]="validValueChanges">\n <label class="hf-field__label">{{label}}</label>\n <span class="hf-field__control"><ng-content></ng-content></span>\n <label *ngIf="!valid" class="hf-field__errors">{{errors|json}}</label>\n </div>'}]}],e.ctorParameters=function(){return[]},e.propDecorators={label:[{type:t.Input}],requiredValidator:[{type:t.ContentChild,args:[o.RequiredValidator]}],formControlNameDirective:[{type:t.ContentChild,args:[f]}]},e}(),p=function(){function e(){}return Object.defineProperty(e.prototype,"group",{get:function(){return this.formGroupNameDirective.formGroup},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Component,args:[{selector:"hf-form-group",template:"<ng-content></ng-content>"}]}],e.ctorParameters=function(){return[]},e.propDecorators={formGroupNameDirective:[{type:t.ContentChild,args:[c]}]},e}(),d=function(){function e(){this.validSubmit=new t.EventEmitter}return e.prototype.onSubmit=function(e){this.formGroup.valid&&this.validSubmit.emit(e)},e.decorators=[{type:t.Directive,args:[{selector:"form[validSubmit]"}]}],e.ctorParameters=function(){return[]},e.propDecorators={validSubmit:[{type:t.Output}],formGroup:[{type:t.Input}],onSubmit:[{type:t.HostListener,args:["submit",["$event"]]}]},e}(),h=function(){function e(e,r){this.formGroupDirective=e,this.hasSubmitButton=r,this.unsavedChange=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.form.valueChanges.subscribe(function(){e.submitted=!1,e.unsavedParameterChange()}),this.form.statusChanges.subscribe(function(){return e.unsavedParameterChange()})},e.prototype.onSubmit=function(){this.submitted=!0,this.unsavedParameterChange()},e.prototype.unsavedParameterChange=function(){var e=this.hasSubmitButton?this.form.dirty&&(!this.submitted||!this.form.valid):!this.form.valid;e!=this.unsaved&&(this.unsaved=e,this.unsavedChange.emit(this.unsaved))},Object.defineProperty(e.prototype,"form",{get:function(){return this.formGroupDirective.form},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Directive,args:[{selector:"form[unsaved]"}]}],e.ctorParameters=function(){return[{type:o.FormGroupDirective,decorators:[{type:t.Self}]},{type:d,decorators:[{type:t.Self}]}]},e.propDecorators={unsavedChange:[{type:t.Output,args:["unsaved"]}],onSubmit:[{type:t.HostListener,args:["submit",["$event"]]}]},e}(),g=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,o.ReactiveFormsModule],declarations:[h,d,f,m,p,c],exports:[h,d,f,m,p,c]}]}],e.ctorParameters=function(){return[]},e}();e.HybridFormsModule=g,e.ɵe=m,e.ɵf=p,e.ɵc=f,e.ɵd=c,e.ɵa=h,e.ɵb=d,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs/add/operator/debounceTime"),require("rxjs/Subject")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms","rxjs/add/operator/debounceTime","rxjs/Subject"],t):t(e.angularHybridForms=e.angularHybridForms||{},e.ng.core,e.ng.common,e.ng.forms,null,e.rxjs_Subject)}(this,function(e,t,r,n,o,i){"use strict";function a(e,t,r,n){e.valueChanges.subscribe(function(t){return e.valid?r.next(t):null}),e.valueChanges.debounceTime(n).subscribe(function(r){return e.valid?t.emit(r):null})}var u=400,s=function(){function e(e,r){this.self=e,this.parent=r,this.ngModelValidChangeDebounce=u,this.ngModelValidChange=new t.EventEmitter,this.formControlValidValueDebounceStarted=new i.Subject}return Object.defineProperty(e.prototype,"formControl",{get:function(){return this.self.control},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valid",{get:function(){return this.formControl.valid},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"pristine",{get:function(){return this.formControl.pristine},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"groupSubmitted",{get:function(){return this.parent.submitted},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"errors",{get:function(){return this.formControl.errors},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){a(this.formControl,this.ngModelValidChange,this.formControlValidValueDebounceStarted,this.ngModelValidChangeDebounce)},e.decorators=[{type:t.Directive,args:[{selector:"[ngModel]"}]}],e.ctorParameters=function(){return[{type:n.NgModel,decorators:[{type:t.Self}]},{type:n.NgForm,decorators:[{type:t.SkipSelf}]}]},e.propDecorators={ngModelValidChangeDebounce:[{type:t.Input}],ngModelValidChange:[{type:t.Output}]},e}(),l=function(){function e(){this.validValueChanges=!1}return e.prototype.ngAfterContentInit=function(){var e=this;this.formControlNameDirective.formControlValidValueDebounceStarted.subscribe(function(t){return e.validValueChanges=!0}),this.formControlNameDirective.ngModelValidChange.subscribe(function(t){return e.validValueChanges=!1})},Object.defineProperty(e.prototype,"required",{get:function(){return this.requiredValidator&&this.requiredValidator.required},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valid",{get:function(){return this.formControlNameDirective&&(!this.formControlNameDirective.groupSubmitted&&this.formControlNameDirective.pristine||this.formControlNameDirective.valid)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"errors",{get:function(){return this.formControlNameDirective&&this.formControlNameDirective.errors},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Component,args:[{selector:"hf-field",template:'\n <div class="hf-field"\n [class.hf-field--required]="required" \n [class.hf-field--invalid]="!valid" \n [class.hf-field--valid-value-changes]="validValueChanges">\n <label class="hf-field__label">{{label}}</label>\n <span class="hf-field__control"><ng-content></ng-content></span>\n <label *ngIf="!valid" class="hf-field__errors">{{errors|json}}</label>\n </div>'}]}],e.ctorParameters=function(){return[]},e.propDecorators={label:[{type:t.Input}],requiredValidator:[{type:t.ContentChild,args:[n.RequiredValidator]}],formControlNameDirective:[{type:t.ContentChild,args:[s]}]},e}(),c=function(){function e(){}return e.decorators=[{type:t.Component,args:[{selector:"hf-form",template:"<ng-content></ng-content>"}]}],e.ctorParameters=function(){return[]},e}(),d=function(){function e(e,r){this.self=e,this.parent=r,this.ngFormValidChangeDebounce=u,this.ngFormValidChange=new t.EventEmitter,this.formControlValidValueDebounceStarted=new i.Subject,this.unique=0,r&&r.addFormGroup(e)}return e.prototype.ngOnInit=function(){a(this.self.form,this.ngFormValidChange,this.formControlValidValueDebounceStarted,this.ngFormValidChangeDebounce)},Object.defineProperty(e.prototype,"form",{get:function(){return this.self.form},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"sequence",{get:function(){return this.unique++},enumerable:!0,configurable:!0}),e.prototype.addFormGroup=function(e){this.self.form.addControl(e.name||this.sequence,e.form)},e.decorators=[{type:t.Directive,args:[{selector:"form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]"}]}],e.ctorParameters=function(){return[{type:n.NgForm,decorators:[{type:t.Self}]},{type:e,decorators:[{type:t.Optional},{type:t.SkipSelf}]}]},e.propDecorators={ngFormValidChangeDebounce:[{type:t.Input}],ngFormValidChange:[{type:t.Output}]},e}(),f=function(){function e(e){this.ngForm=e,this.validSubmit=new t.EventEmitter}return e.prototype.onSubmit=function(e){this.ngForm.valid&&this.validSubmit.emit(e)},e.decorators=[{type:t.Directive,args:[{selector:"form[validSubmit]"}]}],e.ctorParameters=function(){return[{type:n.NgForm,decorators:[{type:t.Self}]}]},e.propDecorators={validSubmit:[{type:t.Output}],onSubmit:[{type:t.HostListener,args:["submit",["$event"]]}]},e}(),m=function(){function e(e,r){this.ngForm=e,this.hasSubmitButton=r,this.unsavedChange=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.form.valueChanges.subscribe(function(){e.submitted=!1,e.unsavedParameterChange()}),this.form.statusChanges.subscribe(function(){return e.unsavedParameterChange()})},e.prototype.onSubmit=function(){this.submitted=!0,this.unsavedParameterChange()},e.prototype.unsavedParameterChange=function(){var e=this.hasSubmitButton?this.form.dirty&&(!this.submitted||!this.form.valid):!this.form.valid;e!=this.unsaved&&(this.unsaved=e,this.unsavedChange.emit(this.unsaved))},Object.defineProperty(e.prototype,"form",{get:function(){return this.ngForm.form},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Directive,args:[{selector:"form[unsaved]"}]}],e.ctorParameters=function(){return[{type:n.NgForm,decorators:[{type:t.Self}]},{type:f,decorators:[{type:t.Self}]}]},e.propDecorators={unsavedChange:[{type:t.Output,args:["unsaved"]}],onSubmit:[{type:t.HostListener,args:["submit",["$event"]]}]},e}(),p=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,n.FormsModule],declarations:[m,f,s,l,c,d],exports:[n.FormsModule,m,f,s,l,c,d]}]}],e.ctorParameters=function(){return[]},e}();e.HybridFormsModule=p,e.HybridForm=d,e.ɵd=l,e.ɵe=c,e.ɵc=s,e.ɵa=m,e.ɵb=f,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-hybrid-forms.umd.min.js.map

1

index.d.ts
export { HybridFormsModule } from './src/hybrid-forms.module';
export { HybridForm } from './src/directive/hybrid-form.directive';

2

package.json
{
"name": "angular-hybrid-forms",
"version": "0.0.28",
"version": "0.0.35",
"description": "An Angular form library offering a middleground between a template-driven, reactive forms and more",

@@ -5,0 +5,0 @@ "main": "./bundles/quickstart-lib.umd.js",

7

src/directive/shared.d.ts

@@ -1,7 +0,6 @@

import { AbstractControl, FormGroupDirective } from '@angular/forms';
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { EventEmitter } from '@angular/core';
import 'rxjs/add/operator/debounceTime';
import { Observer } from 'rxjs/Observer';
import { FormGroupNameDirective } from './form-group-name.directive';
export declare const defaultValidValueChangeDebounce = 400;
export declare function addControl<T>(cd: ChangeDetectorRef, formGroupNameDirective: FormGroupNameDirective, formGroupDirective: FormGroupDirective, name: string, control: AbstractControl, valueChange: EventEmitter<T>, validValueChange: EventEmitter<T>, validValueChangeDebounceStarted: Observer<T>, validValueChangeDebounce: number): void;
export declare function addControl<T>(control: AbstractControl, validValueChange: EventEmitter<T>, validValueChangeDebounceStarted: Observer<T>, validValueChangeDebounce: number): void;

6

src/directive/unsaved.directive.d.ts
import { EventEmitter, OnInit } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';
import { ValidSubmitDirective } from './valid-submit.directive';
import { NgForm } from '@angular/forms';
export declare class UnsavedDirective implements OnInit {
private formGroupDirective;
private ngForm;
private hasSubmitButton;

@@ -10,3 +10,3 @@ unsavedChange: EventEmitter<{}>;

submitted: boolean;
constructor(formGroupDirective: FormGroupDirective, hasSubmitButton: ValidSubmitDirective);
constructor(ngForm: NgForm, hasSubmitButton: ValidSubmitDirective);
ngOnInit(): void;

@@ -13,0 +13,0 @@ onSubmit(): void;

4

src/directive/valid-submit.directive.d.ts
import { EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';
export declare class ValidSubmitDirective {
private ngForm;
validSubmit: EventEmitter<{}>;
formGroup: any;
constructor(ngForm: NgForm);
onSubmit(e: any): void;
}
src/component/form-control.component.d.ts
src/component/form-group.component.d.ts
src/directive/form-control-name.directive.d.ts
src/directive/form-group-name.directive.d.ts
angular-hybrid-forms.es5.js.map

Sorry, the diff of this file is not supported yet

angular-hybrid-forms.js.map

Sorry, the diff of this file is not supported yet

bundles/angular-hybrid-forms.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/angular-hybrid-forms.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc