@ng-ui-libraries/forms
Version:
3,321 lines • 240 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@ng-app-framework/core'), require('rxjs/Rx'), require('ngx-bootstrap/datepicker'), require('@angular/material'), require('@angular/platform-browser/animations'), require('safe-pipe'), require('ngx-bootstrap'), require('@angular/common'), require('@ng-select/ng-select'), require('@angular/router')) :
typeof define === 'function' && define.amd ? define('@ng-ui-libraries/forms', ['exports', '@angular/core', '@angular/forms', '@ng-app-framework/core', 'rxjs/Rx', 'ngx-bootstrap/datepicker', '@angular/material', '@angular/platform-browser/animations', 'safe-pipe', 'ngx-bootstrap', '@angular/common', '@ng-select/ng-select', '@angular/router'], factory) :
(factory((global['ng-ui-libraries'] = global['ng-ui-libraries'] || {}, global['ng-ui-libraries'].forms = {}),global.ng.core,global.ng.forms,global.core$1,global.Rx,null,global.ng.material,global.ng.platformBrowser.animations,global.safePipe,global.ngxBootstrap,global.ng.common,global.ngSelect,global.ng.router));
}(this, (function (exports,core,forms,core$1,Rx,datepicker,material,animations,safePipe,ngxBootstrap,common,ngSelect,router) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
var FormConfig = /** @class */ (function () {
function FormConfig() {
this.showRequiredAsterisk = true;
}
return FormConfig;
}());
var BaseValueAccessor = /** @class */ (function () {
function BaseValueAccessor() {
this.changed = [];
this.touched = [];
this.valueChange = new core.EventEmitter();
}
Object.defineProperty(BaseValueAccessor.prototype, "value", {
get: function () {
return this.innerValue;
},
set: function (value) {
this.updateInnerValue(value);
},
enumerable: true,
configurable: true
});
BaseValueAccessor.prototype.updateInnerValue = function (value) {
var isDifferent = this.innerValue !== value;
this.innerValue = value;
if (isDifferent) {
this.changed.forEach(function (f) { return f(value); });
this.valueChange.emit(value);
}
};
BaseValueAccessor.prototype.touch = function () {
this.touched.forEach(function (f) { return f(); });
};
BaseValueAccessor.prototype.writeValue = function (value) {
this.innerValue = value;
};
BaseValueAccessor.prototype.registerOnChange = function (fn) {
this.changed.push(fn);
};
BaseValueAccessor.prototype.registerOnTouched = function (fn) {
this.touched.push(fn);
};
return BaseValueAccessor;
}());
var NgFormControl = /** @class */ (function (_super) {
__extends(NgFormControl, _super);
function NgFormControl(injector) {
var _this = _super.call(this) || this;
_this.injector = injector;
_this.shouldValidate = true;
_this.requiredChange = new core.EventEmitter();
_this.disabledChange = new core.EventEmitter();
_this.onDestroy$ = new core.EventEmitter();
_this.initialized = false;
_this.initializedChange = new core.EventEmitter();
_this.additionalValidators = [];
_this.validators = [];
return _this;
}
NgFormControl.prototype.ngOnDestroy = function () {
this.onDestroy$.emit();
};
NgFormControl.prototype.ngOnInit = function () {
var _this = this;
try {
this.validators = (this.injector.get(forms.NG_VALIDATORS, []));
this.model = this.injector.get(forms.NgControl);
this.setupControl();
this.startValidating();
setTimeout(function () {
_this.initialized = true;
setTimeout(function () { return _this.onLoad(); }, 100);
});
}
catch (e) {
throw new Error("[(ngModel)] was not provided");
}
};
NgFormControl.prototype.setupControl = function () {
var _this = this;
this.control = this.parentFormControl ? this.parentFormControl : this.model.control;
this.value = this.control.value;
this.control['label'] = this.label;
setTimeout(function () {
if (_this.parentFormGroup) {
_this.parentFormGroup.addControl(_this.name, _this.control);
}
});
};
NgFormControl.prototype.startValidating = function () {
this.shouldValidate = this.shouldValidate.toString() === 'true' || this.shouldValidate === true;
if (this.shouldValidate) {
this.control.setValidators((this.validators.concat(this.additionalValidators || [])));
}
this.validateOnInterval();
};
NgFormControl.prototype.validateOnInterval = function () {
var _this = this;
Rx.Observable.interval(1000)
.takeUntil(this.onDestroy$)
.subscribe(function () {
_this.validate();
});
};
NgFormControl.prototype.touch = function () {
_super.prototype.touch.call(this);
if (!this.isTouched()) {
this.control.markAsTouched();
}
};
NgFormControl.prototype.validate = function () {
if (this.isTouched()) {
this.control.updateValueAndValidity();
}
};
NgFormControl.prototype.isInvalid$ = function () {
return Rx.Observable.of(this.invalid && this.isTouched());
};
NgFormControl.prototype.isTouched = function () {
return this.control && this.control.touched;
};
Object.defineProperty(NgFormControl.prototype, "failures", {
get: function () {
return this.control ? this.control.errors : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "failures$", {
get: function () {
return Rx.Observable.of(this.failures);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "invalid$", {
get: function () {
return Rx.Observable.of(this.invalid);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "touched$", {
get: function () {
return Rx.Observable.of(this.isTouched());
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "invalid", {
get: function () {
var _this = this;
if (this.failures && !this.control.invalid) {
setTimeout(function () {
_this.control.setErrors(_this.failures);
});
}
return this.control ? this.control.invalid : false;
},
enumerable: true,
configurable: true
});
NgFormControl.prototype.triggerValidation = function () {
this.touch();
this.validate();
};
NgFormControl.prototype.onLoad = function () {
};
return NgFormControl;
}(BaseValueAccessor));
__decorate([
core$1.OnChange,
__metadata("design:type", Object)
], NgFormControl.prototype, "initialized", void 0);
var DatePickerComponent = /** @class */ (function (_super) {
__extends(DatePickerComponent, _super);
function DatePickerComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this.name = '';
_this.label = '';
_this.theme = '';
_this.disabled = false;
_this.shouldValidate = true;
_this.placeholder = '';
_this.placement = 'bottom';
_this.identifier = "date-picker-" + identifier;
return _this;
}
DatePickerComponent.prototype.ngOnInit = function () {
this.theme = this.theme.length > 0 ? this.theme : core$1.SiteConfig.theme;
_super.prototype.ngOnInit.call(this);
};
DatePickerComponent.prototype.onLoad = function () {
var _this = this;
if (!this.input || !this.input.nativeElement) {
setTimeout(function () { return _this.onLoad(); }, 500);
return;
}
Rx.Observable.fromEvent(this.input.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe(function (event) {
_this.close();
});
Rx.Observable.fromEvent(this.input.nativeElement, 'focus')
.takeUntil(this.onDestroy$)
.subscribe(function () {
_this.open();
});
};
DatePickerComponent.prototype.open = function () {
this.datePicker.hide();
if (!this.datePicker.isOpen) {
this.datePicker.show();
}
};
DatePickerComponent.prototype.close = function () {
if (this.datePicker.isOpen) {
this.datePicker.hide();
}
};
return DatePickerComponent;
}(NgFormControl));
DatePickerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'date-picker',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\"\n [hidden]=\"!initialized\">\n <label [attr.for]=\"identifier\" *ngIf=\"label.length > 0\">\n {{label}}\n <ng-container *ngIf=\"required && config.showRequiredAsterisk\">*</ng-container>\n </label>\n <div></div>\n <div class=\"input-group ng-control\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}\">\n <div class=\"input-group-before clickable\" (click)=\"!disabled && open()\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-calendar\"></span>\n </div>\n </div>\n <input class=\"form-control\" type=\"text\"\n [placeholder]=\"placeholder || ''\"\n [id]=\"identifier\"\n [name]=\"name\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n #input\n tabindex=\"0\"\n bsDatepicker\n #dp=\"bsDatepicker\"\n [triggers]=\"''\"\n [placement]=\"placement\"\n [bsConfig]=\"{containerClass: theme,showWeekNumbers:false}\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (blur)=\"triggerValidation()\"\n />\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.bs-datepicker-body td[role=gridcell] .disabled{color:#888}date-picker input.form-control{-webkit-box-flex:inherit;-ms-flex-positive:inherit;flex-grow:inherit;min-width:150px}bs-datepicker-container{z-index:900}"],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: DatePickerComponent,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
},] },
];
DatePickerComponent.ctorParameters = function () { return [
{ type: core.Injector, decorators: [{ type: core.Inject, args: [core.Injector,] },] },
{ type: FormConfig, },
]; };
DatePickerComponent.propDecorators = {
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"theme": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"minDate": [{ type: core.Input },],
"maxDate": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"placement": [{ type: core.Input },],
"input": [{ type: core.ViewChild, args: ['input',] },],
"datePicker": [{ type: core.ViewChild, args: ['dp',] },],
};
var identifier = 0;
var RequiredCheckBoxValidator = /** @class */ (function (_super) {
__extends(RequiredCheckBoxValidator, _super);
function RequiredCheckBoxValidator() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(RequiredCheckBoxValidator.prototype, "required", {
get: function () {
return this._isRequired;
},
set: function (value) {
this._isRequired = value != null && value !== false && "" + value !== 'false';
if (this._change)
this._change();
},
enumerable: true,
configurable: true
});
RequiredCheckBoxValidator.prototype.validate = function (c) {
return this.required && !c.value ? { required: true } : null;
};
RequiredCheckBoxValidator.prototype.registerOnValidatorChange = function (fn) {
this._change = fn;
};
return RequiredCheckBoxValidator;
}(forms.RequiredValidator));
RequiredCheckBoxValidator.decorators = [
{ type: core.Directive, args: [{
selector: 'check-box[ngModel][required]',
providers: [{
provide: forms.NG_VALIDATORS,
useExisting: core.forwardRef(function () { return RequiredCheckBoxValidator; }),
multi: true
}],
host: { '[attr.required]': 'required ? "" : null' }
},] },
];
RequiredCheckBoxValidator.ctorParameters = function () { return []; };
RequiredCheckBoxValidator.propDecorators = {
"required": [{ type: core.Input },],
};
var CheckBoxComponent = /** @class */ (function (_super) {
__extends(CheckBoxComponent, _super);
function CheckBoxComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this.state = 'off';
_this.name = '';
_this.label = '';
_this.labelPlacement = 'above';
_this.checkedValue = true;
_this.disabled = false;
_this.shouldValidate = true;
_this.required = false;
_this.threeState = false;
_this.threeStateChange = new core.EventEmitter();
_this.requiredChange = new core.EventEmitter();
_this.stateChange = new core.EventEmitter();
_this.identifier = "check-box-" + identifier$1++;
_this.onInit = new core.EventEmitter();
_this.requiredValidator = new RequiredCheckBoxValidator();
_this.additionalValidators = [_this.requiredValidator];
return _this;
}
CheckBoxComponent.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this.onInit.emit();
this.requiredValidator.required = this.required;
this.requiredChange.merge(this.stateChange).merge(this.threeStateChange).takeUntil(this.onDestroy$).subscribe(function () {
_this.requiredValidator.required = _this.required;
_this.updateState();
_this.value = _this.state === 'on' ? _this.checkedValue : false;
});
this.updateState();
Rx.Observable.interval(1000)
.map(function () { return _this.value; })
.distinctUntilChanged()
.takeUntil(this.onDestroy$)
.subscribe(function () { return _this.updateState(); });
};
CheckBoxComponent.prototype.nextState = function () {
if (!this.disabled) {
this.control.markAsTouched();
if (this.threeState && this.state === 'on') {
this.state = 'indeterminate';
return;
}
this.state = this.state === 'off' ? 'on' : 'off';
}
};
CheckBoxComponent.prototype.updateState = function () {
var _this = this;
setTimeout(function () {
_this.correctState();
if (_this.checkbox && _this.checkbox.nativeElement) {
_this.checkbox.nativeElement.indeterminate = _this.state === 'indeterminate';
}
_this.value = _this.state === 'on' ? _this.checkedValue : false;
});
};
CheckBoxComponent.prototype.correctState = function () {
if (this.value && this.state === 'off') {
this.state = 'on';
}
if ((this.state === 'on' && !this.value) || (this.state === 'indeterminate' && !this.threeState)) {
this.state = 'off';
}
};
return CheckBoxComponent;
}(NgFormControl));
CheckBoxComponent.decorators = [
{ type: core.Component, args: [{
selector: 'check-box',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\" [class.checked]=\"value\">\n <label *ngIf=\"labelPlacement === 'above'\" for=\"{{identifier}}\">\n {{ label }}\n <span *ngIf=\"required && config.showRequiredAsterisk\">*</span>\n </label>\n <div></div>\n <div (click)=\"nextState()\" (keyup.enter)=\"nextState()\" (keyup.space)=\"nextState()\" class=\"input-group check-container ng-control\"\n tabindex=\"0\"\n #element\n [ngClass]=\"{'ng-invalid': isInvalid$() | async, 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}\">\n <div class=\"form-control\" *ngIf=\"labelPlacement === 'before'\">\n <label>\n {{ label }}\n <span *ngIf=\"required && config.showRequiredAsterisk\">*</span>\n </label>\n </div>\n <div [class.input-group-prepend]=\"labelPlacement === 'before'\" [class.input-group-append]=\"labelPlacement === 'after'\">\n <div class=\"input-group-text\">\n <input readonly #checkbox type=\"checkbox\"\n [id]=\"identifier\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n tabindex=\"-1\"/>\n </div>\n </div>\n <div class=\"form-control\" *ngIf=\"labelPlacement === 'after'\">\n <label>\n {{ label }}\n <span *ngIf=\"required && config.showRequiredAsterisk\">*</span>\n </label>\n </div>\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}check-box{position:relative}check-box input[type=checkbox]{pointer-events:none}check-box .check-container.label-above{display:inline-block}check-box .check-container.label-above .input-group-append,check-box .check-container.label-above .input-group-prepend{width:inherit;display:inline-block}"],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: CheckBoxComponent,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
},] },
];
CheckBoxComponent.ctorParameters = function () { return [
{ type: core.Injector, decorators: [{ type: core.Inject, args: [core.Injector,] },] },
{ type: FormConfig, },
]; };
CheckBoxComponent.propDecorators = {
"state": [{ type: core.Input },],
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"labelPlacement": [{ type: core.Input },],
"checkedValue": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"required": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"threeState": [{ type: core.Input },],
"threeStateChange": [{ type: core.Output },],
"stateChange": [{ type: core.Output },],
"checkbox": [{ type: core.ViewChild, args: ['checkbox',] },],
"element": [{ type: core.ViewChild, args: ['element',] },],
"onInit": [{ type: core.Output },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Object)
], CheckBoxComponent.prototype, "state", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], CheckBoxComponent.prototype, "required", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Object)
], CheckBoxComponent.prototype, "threeState", void 0);
var identifier$1 = 0;
var DragAndDrop = /** @class */ (function () {
function DragAndDrop() {
this.source = null;
this.isDragging = false;
this.onDrag = new core.EventEmitter();
this.onDrop = new core.EventEmitter();
}
DragAndDrop.prototype.drag = function (source) {
this.source = source;
this.onDrag.emit(source);
};
DragAndDrop.prototype.drop = function (destination) {
if (this.source !== destination) {
this.onDrop.emit({
source: this.source,
destination: destination
});
}
this.isDragging = false;
this.source = null;
};
DragAndDrop.prototype.moveMouse = function () {
if (this.source) {
this.isDragging = true;
return;
}
this.isDragging = false;
};
DragAndDrop.prototype.abort = function () {
this.isDragging = false;
this.source = null;
};
return DragAndDrop;
}());
var Searcher = /** @class */ (function () {
function Searcher(searchBy, minLength) {
if (searchBy === void 0) { searchBy = ['name']; }
if (minLength === void 0) { minLength = 3; }
this.searchBy = searchBy;
this.minLength = minLength;
this.search = '';
}
Searcher.prototype.doesItemMatchSearch = function (item) {
return this.doesItemStringMatchSearch(item) || this.doItemPropertiesMatchSearch(item);
};
Searcher.prototype.doItemPropertiesMatchSearch = function (item) {
try {
for (var _a = __values(this.searchBy), _b = _a.next(); !_b.done; _b = _a.next()) {
var property = _b.value;
if (this.doesItemPropertyMatchSearch(item, property)) {
return true;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_1) throw e_1.error; }
}
return false;
var e_1, _c;
};
Searcher.prototype.doesItemPropertyMatchSearch = function (item, property) {
if (core$1.Value.isScalar(item[property])) {
return item[property].toLowerCase().indexOf(this.search.toLowerCase()) > -1;
}
return false;
};
Searcher.prototype.doesItemStringMatchSearch = function (item) {
return typeof item === 'string' && item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
};
Searcher.prototype.isTermLongEnough = function () {
return this.search.length >= this.minLength;
};
return Searcher;
}());
var NestedSearcher = /** @class */ (function (_super) {
__extends(NestedSearcher, _super);
function NestedSearcher() {
var _this = _super.apply(this, __spread(arguments)) || this;
_this.isUpdating = false;
_this.forceClose = true;
_this.all = {};
return _this;
}
NestedSearcher.prototype.updateMatches = function (item) {
var _this = this;
setTimeout(function () {
_this.initializeMetadata(item);
_this.updateChildrenForItem$(item, item).subscribe({
complete: function () {
if (!_this.isTermLongEnough()) {
item.$shown = true;
item.$collapsed = false;
}
_this.isUpdating = false;
}
});
}, 500);
};
NestedSearcher.prototype.initializeMetadata = function (item, parent) {
if (item) {
item.$id = item.$id || ++nestedId;
if (parent && !this.all.hasOwnProperty(parent.$id)) {
this.all[parent.$id] = parent;
}
if (!this.all.hasOwnProperty(item.$id)) {
this.all[item.$id] = item;
}
item.$parent = parent ? parent.$id : null;
item.$parentMatches = item.$parentMatches || false;
item.$shown = item.$parentMatches || !this.isTermLongEnough();
item.$matches = false;
item.$childMatches = false;
item.$matches = this.isTermLongEnough() && this.doesItemMatchSearch(item);
item.$collapsed = false;
}
};
NestedSearcher.prototype.updateChildrenForItem$ = function (item, top) {
var _this = this;
if (item.hasOwnProperty('children') && Array.isArray(item['children']) && item['children'].length > 0) {
return Rx.Observable.from(item.children)
.flatMap(function (child) {
_this.initializeMetadata(child, item);
child.$parentMatches = item.$matches || item.$parentMatches;
return Rx.Observable.of(child).concat(_this.updateChildrenForItem$(child, top));
})
.filter(function (child) { return child.$matches; })
.do(function (child) {
_this.updateParentChildMatches(child);
top.$childMatches = true;
})
.toArray()
.do(function (list) {
item.$shown = !_this.isTermLongEnough() || item.$childMatches || item.$parentMatches || item.$matches;
if (_this.forceClose) {
item.$collapsed = !_this.isTermLongEnough() || item.$matches || !item.$childMatches;
}
});
}
item.$shown = !this.isTermLongEnough() || item.$parentMatches || item.$matches;
if (this.forceClose) {
item.$collapsed = true;
}
return Rx.Observable.from([]);
};
NestedSearcher.prototype.updateParentChildMatches = function (item) {
if (item.$parent) {
this.all[item.$parent].$childMatches = true;
this.updateParentChildMatches(this.all[item.$parent]);
}
};
NestedSearcher.prototype.doesParentMatchSearch$ = function (item) {
if (item.$parent) {
if (!this.doesItemMatchSearch(this.all[item.$parent])) {
return this.doesParentMatchSearch$(this.all[item.$parent]);
}
return core$1.Async.getObservableForValue$(true);
}
return core$1.Async.getObservableForValue$(false);
};
NestedSearcher.prototype.doesItemMatchSearch$ = function (item) {
if (this.doesItemMatchSearch(item)) {
return core$1.Async.getObservableForValue$(true);
}
return this.areAnyChildrenFound$(item);
};
NestedSearcher.prototype.areAnyChildrenFound$ = function (item) {
if (core$1.Value.hasArrayElements(item.children)) {
return this.doAnyChildrenMatchSearch$(item);
}
return core$1.Async.getObservableForValue$(false);
};
NestedSearcher.prototype.doAnyChildrenMatchSearch$ = function (item) {
var _this = this;
return core$1.Async.mapToObservable$(item.children, function (child) { return _this.doesItemMatchSearch$(child); })
.toArray()
.map(function (arr) { return arr.indexOf(true) > -1; });
};
NestedSearcher.prototype.getParent = function (item) {
if (this.all.hasOwnProperty(item.$parent)) {
return this.all[item.$parent];
}
};
return NestedSearcher;
}(Searcher));
var nestedId = 0;
var NestedFieldComponent = /** @class */ (function (_super) {
__extends(NestedFieldComponent, _super);
function NestedFieldComponent(injector) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.name = null;
_this.required = false;
_this.disabled = false;
_this.label = '';
_this.placeholder = null;
_this.shouldValidate = true;
_this.labelPlacement = 'before';
_this.selectBy = 'id';
_this.searchBy = ['name'];
_this.dragAndDrop = new DragAndDrop();
_this.mousePosition = {
x: 0,
y: 0
};
return _this;
}
NestedFieldComponent.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this.searcher = new NestedSearcher(this.searchBy);
this.onLoad();
this.dragAndDrop.onDrop.subscribe(function (_a) {
var source = _a.source, destination = _a.destination;
var parent = _this.searcher.getParent(source);
if (parent && !_this.isSourceParentOfDestination(source, destination)) {
_this.removeFromParent(source, parent);
_this.addToParent(source, destination);
_this.searcher.updateMatches(_this.value);
}
});
};
NestedFieldComponent.prototype.onLoad = function () {
var _this = this;
if (this.value === null) {
setTimeout(function () { return _this.onLoad(); }, 500);
return;
}
this.searcher.updateMatches(this.value);
};
NestedFieldComponent.prototype.addUnitToParent = function (parent) {
this.addToParent({
id: null,
name: ''
}, parent);
};
NestedFieldComponent.prototype.removeUnitFromParent = function (unit) {
this.removeFromParent(unit, this.searcher.getParent(unit));
};
NestedFieldComponent.prototype.addToParent = function (unit, parent) {
if (!parent.hasOwnProperty('children')) {
parent.children = [];
}
parent.children.push(unit);
this.searcher.initializeMetadata(unit, parent);
parent.$collapsed = false;
};
NestedFieldComponent.prototype.removeFromParent = function (unit, parent) {
if (parent) {
parent.children.splice(parent.children.indexOf(unit), 1);
}
};
NestedFieldComponent.prototype.getMouseLocation = function ($event) {
this.mousePosition.x = $event.clientX;
this.mousePosition.y = $event.clientY;
this.dragAndDrop.moveMouse();
};
NestedFieldComponent.prototype.getDragPosition = function () {
return "left:" + this.mousePosition.x + "px;top:" + this.mousePosition.y + "px";
};
NestedFieldComponent.prototype.isSourceParentOfDestination = function (source, destination) {
if (source.children && source.children.length > 0) {
try {
for (var _a = __values(source.children), _b = _a.next(); !_b.done; _b = _a.next()) {
var child = _b.value;
if (child === destination) {
return true;
}
if (child.children && child.children.length > 0 && this.isSourceParentOfDestination(child, destination)) {
return true;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_2) throw e_2.error; }
}
}
return false;
var e_2, _c;
};
return NestedFieldComponent;
}(NgFormControl));
NestedFieldComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nested-field',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\">\n <label>\n {{label}}\n </label>\n <div></div>\n <ng-container>\n <nested-list\n class=\"form-control-container full-width\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}\"\n [item]=\"value\"\n [searchBy]=\"searchBy\"\n [searcher]=\"searcher\"\n [collapsed]=\"true\"\n (mousemove)=\"getMouseLocation($event)\"\n >\n <ng-template let-item>\n <div class=\"input-group\" [class.dragging]=\"dragAndDrop.source === item\">\n <div class=\"input-group-prepend\">\n <span class=\"input-group-text\">\n {{item.id || '-' }}\n </span>\n </div>\n <div class=\"form-control\" *ngIf=\"!item.$focused\" tabindex=\"0\"\n (click)=\"item.$focused = true;dragAndDrop.abort()\"\n (mousedown)=\"dragAndDrop.drag(item)\" (mouseup)=\"dragAndDrop.drop(item)\">\n {{ item.name }}\n </div>\n <text-box #textBox [autofocus]=\"true\" *ngIf=\"item.$focused\" [(ngModel)]=\"item.name\" [required]=\"true\"\n name=\"\" class=\"hide-until-focused full-width\"\n [disableLastPass]=\"true\" [showErrors]=\"false\" (inputFocusOut)=\"item.$focused = false\">\n </text-box>\n <div class=\"input-group-append\">\n <button class=\"btn btn-success btn-sm\" tabindex=\"0\" (activate)=\"addUnitToParent(item)\">\n <span class=\"fa fa-plus\"></span>\n </button>\n <button class=\"btn btn-danger btn-sm\" tabindex=\"0\" (activate)=\"removeUnitFromParent(item)\">\n <span class=\"fa fa-times\"></span>\n </button>\n </div>\n </div>\n </ng-template>\n </nested-list>\n </ng-container>\n <div class=\"dragging-element\" *ngIf=\"dragAndDrop.source && dragAndDrop.isDragging && !dragAndDrop.source.$focused\"\n [attr.style]=\"getDragPosition() | safe: 'style'\">\n {{dragAndDrop.source.name}}\n </div>\n </div>\n </ng-container>\n ",
styles: ["nested-field .parent-node .form-group{margin-bottom:0}nested-field .parent-node .form-group .input-group,nested-field .parent-node .input-group{border:1px solid transparent;border-left:3px solid transparent;background-color:transparent;width:100%}nested-field .parent-node .form-group .input-group div.form-control,nested-field .parent-node .form-group .input-group input,nested-field .parent-node .form-group .input-group text-box,nested-field .parent-node .input-group div.form-control,nested-field .parent-node .input-group input,nested-field .parent-node .input-group text-box{background-color:transparent;width:100%}nested-field .parent-node .form-group .input-group div.form-control,nested-field .parent-node .input-group div.form-control{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}nested-field .parent-node .form-group .input-group .input-group-append button,nested-field .parent-node .input-group .input-group-append button{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}nested-field .parent-node .form-group .input-group .input-group-append button button,nested-field .parent-node .input-group .input-group-append button button{border:none}nested-field .parent-node .form-group .input-group .input-group-append button:first-child,nested-field .parent-node .input-group .input-group-append button:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}nested-field .parent-node .form-group .input-group .input-group-prepend:first-child,nested-field .parent-node .form-group .input-group .input-group-prepend:first-child .input-group-text,nested-field .parent-node .input-group .input-group-prepend:first-child,nested-field .parent-node .input-group .input-group-prepend:first-child .input-group-text{border-right:1px solid transparent;background-color:transparent}nested-field .dragging.input-group{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}nested-field .dragging-element{position:fixed}"],
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: NestedFieldComponent,
multi: true
}],
encapsulation: core.ViewEncapsulation.None
},] },
];
NestedFieldComponent.ctorParameters = function () { return [
{ type: core.Injector, },
]; };
NestedFieldComponent.propDecorators = {
"name": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"label": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"labelPlacement": [{ type: core.Input },],
"selectBy": [{ type: core.Input },],
"searchBy": [{ type: core.Input },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], NestedFieldComponent.prototype, "required", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], NestedFieldComponent.prototype, "disabled", void 0);
var NestedListComponent = /** @class */ (function () {
function NestedListComponent() {
this.collapsed = false;
this.initialCollapse = false;
this.onCollapseAll = new core.EventEmitter();
this.onExpandAll = new core.EventEmitter();
this.searchBy = ['name'];
this.collapseButton = true;
this.showLines = true;
this.isTop = true;
this.onDestroy$ = new core.EventEmitter();
this.searchable = true;
this.containerClass = '';
}
NestedListComponent.prototype.ngOnInit = function () {
var _this = this;
if (!this.searcher) {
this.searcher = new NestedSearcher(this.searchBy);
}
var stopListening = core$1.UnsubscribeAll.merge(this.onDestroy$);
this.onCollapseAll.takeUntil(stopListening).subscribe(function () {
_this.item["$collapsed"] = true;
});
this.onExpandAll.takeUntil(stopListening).subscribe(function () {
_this.item["$collapsed"] = false;
});
if (this.isTop) {
this.searcher.isUpdating = true;
setTimeout(function () {
_this.updateMatches();
}, 500);
}
};
NestedListComponent.prototype.ngOnDestroy = function () {
this.onDestroy$.emit();
};
NestedListComponent.prototype.hasChildren = function () {
return this.item && core$1.Value.hasArrayElements(this.item.children);
};
NestedListComponent.prototype.isCollapsed = function () {
return this.item["$collapsed"];
};
NestedListComponent.prototype.toggle = function () {
this.item["$collapsed"] = !this.item["$collapsed"];
};
NestedListComponent.prototype.updateMatches = function () {
this.searcher.updateMatches(this.item);
};
NestedListComponent.prototype.shouldDisplay = function (item) {
return !this.searcher.isTermLongEnough() || item.$shown;
};
NestedListComponent.prototype.isUpdating = function () {
return this.searcher.isUpdating;
};
return NestedListComponent;
}());
NestedListComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nested-list',
template: "\n <ng-template #defaultTemplate let-item>\n <div class=\"nested-list-element\">{{ item.name ? item.name : item.text}}</div>\n </ng-template>\n <ng-container *ngIf=\"isTop && searchable\">\n <div class=\"form-group\">\n <div class=\"input-group w-100\">\n <div class=\"input-group-prepend\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-search\"></span>\n </div>\n </div>\n <input type=\"text\" class=\"form-control w-100\" name=\"nested-search\"\n [(ngModel)]=\"searcher.search\"\n (ngModelChange)=\"updateMatches()\"\n placeholder=\"Search ...\"/>\n </div>\n </div>\n </ng-container>\n <div class=\"loading-icon\" *ngIf=\"isUpdating()\">\n <span class=\"fa fa-spinner fa-spin\"></span>\n </div>\n <div class=\"nested-list-container {{containerClass}}\" [class.top]=\"isTop\" *ngIf=\"!isUpdating()\">\n <div class=\"parent-node\" [class.has-children]=\"!isCollapsed() && hasChildren()\"\n [class.show-lines]=\"showLines\"\n [class.bold]=\"item['$matches']\"\n (click)=\"!collapseButton ? toggle() : null\"\n *ngIf=\"shouldDisplay(item)\">\n <ng-container\n *ngTemplateOutlet=\"template ? template : defaultTemplate;context:{$implicit: item}\"></ng-container>\n <span *ngIf=\"hasChildren() && collapseButton\" class=\"fa\" [class.fa-plus]=\"isCollapsed()\"\n [class.fa-minus]=\"!isCollapsed()\"\n (click)=\"toggle()\"></span>\n <div class=\"parent-node-end\"></div>\n </div>\n <div class=\"children-list\" *ngIf=\"hasChildren() && shouldDisplay(item) && !isCollapsed()\">\n <ng-container *ngFor=\"let child of item.children\">\n <nested-list [item]=\"child\" [template]=\"template\" [initialCollapse]=\"initialCollapse\"\n [searcher]=\"searcher\"\n [showLines]=\"showLines\" [collapseButton]=\"collapseButton\"\n [onCollapseAll]=\"onCollapseAll\" [onExpandAll]=\"onExpandAll\"\n [isTop]=\"false\">\n </nested-list>\n </ng-container>\n <div class=\"list-end\"></div>\n </div>\n </div>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}nested-list{position:relative;z-index:1}nested-list .nested-list-element{padding:4px 8px}nested-list .nested-list-container{padding-left:20px}nested-list .top.nested-list-container{padding-left:30px}nested-list .children-list{position:relative}nested-list .bold{font-weight:700}nested-list .loading-icon{text-align:center;padding:5px;font-size:24px}nested-list .parent-node{position:relative;max-width:100%;cursor:pointer}nested-list .parent-node>.fa-minus,nested-list .parent-node>.fa-plus{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;left:-20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:block;height:auto;width:auto;font-size:14px;line-height:14px;border-radius:.25em;border:1px solid transparent;padding:1px 2px}nested-list .show-lines>.fa-minus,nested-list .show-lines>.fa-plus,nested-list.show-lines>.fa-minus,nested-list.show-lines>.fa-plus{left:-28px;background-color:#fff}nested-list .show-lines .list-end,nested-list .show-lines .parent-node-end,nested-list.show-lines .list-end,nested-list.show-lines .parent-node-end{width:3px;height:3px;border:1px solid #888;background-color:#888}nested-list .show-lines+.children-list,nested-list.show-lines+.children-list{border-left:1px solid #dadada}nested-list .show-lines+.children-list .list-end,nested-list.show-lines+.children-list .list-end{position:absolute;bottom:-2px;left:-2px}nested-list .show-lines.has-children::before,nested-list.show-lines.has-children::before{width:0;height:50%;content:\" \";position:absolute;-webkit-transform:translateY(100%);transform:translateY(100%);top:0;left:0;z-index:-1;border-right:1px solid #dadada}nested-list .show-lines::after,nested-list.show-lines::after{width:20px;height:0;content:\" \";position:absolute;top:0;bottom:0;margin:auto;left:-20px;border-top:1px solid #333;z-index:-1}nested-list .show-lines[hidden] .parent-node-end,nested-list .show-lines[hidden]::after,nested-list.show-lines[hidden] .parent-node-end,nested-list.show-lines[hidden]::after{display:none}nested-list .show-lines .parent-node-end,nested-list.show-lines .parent-node-end{position:absolute;top:0;bottom:0;left:-1px;margin:auto}"],
encapsulation: core.ViewEncapsulation.None
},] },
];
NestedListComponent.ctorParameters = function () { return []; };
NestedListComponent.propDecorators = {
"item": [{ type: core.Input },],
"template": [{ type: core.Input }, { type: core.ContentChild, args: [core.TemplateRef,] },],
"collapsed": [{ type: core.Input },],
"initialCollapse": [{ type: core.Input },],
"onCollapseAll": [{ type: core.Input },],
"onExpandAll": [{ type: core.Input },],
"searchBy": [{ type: core.Input },],
"collapseButton": [{ type: core.Input },],
"showLines": [{ type: core.Input },],
"isTop": [{ type: core.Input },],
"searcher": [{ type: core.Input },],
"searchable": [{ type: core.Input },],
"containerClass": [{ type: core.Input },],
};
var DropDownComponent = /** @class */ (function (_super) {
__extends(DropDownComponent, _super);
function DropDownComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this._isMultiple = false;
_this.inInputGroup = false;
_this.name = '';
_this.label = '';
_this.appendTo = '';
_this.required = false;
_this.disabled = false;
_this.placeholder = 'Select ...';
_this.options = [];
_this.selectBy = 'id';
_this.labelField = 'text';
_this.typeahead = new core.EventEmitter();
_this.icon = '';
_this.iconPlacement = 'before';
_this.identifier = "option-list-" + identifier$2++;
return _this;
}
Object.defineProperty(DropDownComponent.prototype, "isMultiple", {
get: function () {
return this._isMultiple;
},
set: function (value) {
var _this = this;
this._isMultiple = value;
if (this.initialized) {
setTimeout(function () {
_this.onMultipleChange();
});
}
},
enumerable: true,
configurable: true
});
DropDownComponent.prototype.ngOnInit = function () {
_super.prototype.ngOnInit.call(this);
};
DropDownComponent.prototype.ngOnDestroy = function () {
this.onDestroy$.emit();
};
DropDownComponent.prototype.onMultipleChange = function () {
if (this.isMultiple) {
if (!Array.isArray(this.value)) {
this.value = [this.value];
}
return;
}
if (Array.isArray(this.value)) {
this.value = this.value[0] || null;
}
};
DropDownComponent.prototype.areOptionsProvided = function () {
return core$1.Value.hasArrayElements(this.options);
};
DropDownComponent.prototype.isIconProvided = function () {
return this.icon.length > 0;
};
DropDownComponent.prototype.isIconPlacementBefore = function () {
return this.iconPlacement === 'before';
};
DropDownComponent.prototype.getReadOnlyValue = function () {
var _this = this;
var textValues = this.options.filter(function (value) { return value[_this.selectBy] === _this.value; });
return textValues.length > 0 ? textValues[0][this.labelField] : '';
};
return DropDownComponent;
}(NgFormControl));
DropDownComponent.decorators = [
{ type: core.Component, args: [{
selector: 'drop-down',
template: "\n <ng-container *ngIf=\"initialized\">\n <ng-template #defaultOption let-item>\n {{ item[labelField] }}\n </ng-template>\n <div [class.form-group]=\"!inInputGroup\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\">\n <label [attr.for]=\"identifier\" *ngIf=\"label.length > 0\">\n {{ label }}\n <ng-container *ngIf=\"required && config.showRequiredAsterisk\">*</ng-container>\n </label>\n <div></div>\n <div class=\"ng-control\" [class.input-group]=\"!inInputGroup\" [class.disabled]=\"disabled\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}\">\n <div class=\"input-group-prepend\" *ngIf=\"isIconProvided() && isIconPlacementBefore()\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-{{icon}}\"></span>\n </div>\n </div>\n <input class=\"form-control\" readonly disabled *ngIf=\"disabled\" [ngModel]=\"getReadOnlyValue()\" [name]=\"name\"\n [attr.name]=\"name\"/>\n <ng-select\n *ngIf=\"!disabled\"\n [items]=\"options\"\n [typeahead]=\"typeahead || null\"\n [bindValue]=\"selectBy\"\n [bindLabel]=\"labelField\"\n [multiple]=\"isMultiple\"\n [placeholder]=\"placeholder\"\n [appendTo]=\"appendTo.length > 0 ? appendTo : null\"\n [(ngModel)]=\"value\"\n (blur)=\"triggerValidation()\"\n (change)=\"triggerValidation()\"\n >\n <ng-template ng-label-tmp let-item=\"item\" *ngIf=\"!isMultiple\">\n <ng-container\n *ngTemplateOutlet=\"template ? template : defaultOption;context:{$implicit: item}\"></ng-container>\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\">\n <ng-container\n *ngTemplateOutlet=\"template ? template : defaultOption;context:{$implicit: item}\"></ng-container>\n </ng-template>\n </ng-select>\n <div class=\"input-group-append\" *ngIf=\"isIconProvided() && !isIconPlacementBefore()\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-{{icon}}\"></span>\n </div>\n </div>\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n <ng-container *ngIf=\"!areOptionsProvided()\">\n <div class=\"alert alert-notice\">\n There are no options available.\n </div>\n </ng-container>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ng-select.opened>.ng-control{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.opened>.ng-control:hover{-webkit-box-shadow:none;box-shadow:none}.ng-select.opened>.ng-control .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.opened>.ng-control .ng-arrow:hover{border-color:transparent transparent #666}.ng-select.opened.bottom>.ng-control{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.opened.top>.ng-control{border-top-right-radius:0;border-top-left-radius:0}.ng-select.focused:not(.opened)>.ng-control{border-color:#007eff;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.ng-select.disabled>.ng-control{background-color:#f9f9f9}.ng-select .ng-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ng-select .ng-control:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.06);box-shadow:0 1px 0 rgba(0,0,0,.06)}.ng-select .ng-control .ng-value-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:10px}.ng-select .ng-control .ng-value-container .ng-placeholder{color:#aaa}.ng-select.ng-single .ng-control{height:36px}.ng-select.ng-single .ng-control .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}.ng-select.ng-multiple.disabled>.ng-control .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}.ng-select.ng-multiple.disabled>.ng-control .ng-value-container .ng-value .ng-value-label{padding:2px 5px}.ng-select.ng-multiple .ng-control .ng-value-container{padding-left:7px;padding-top:5px}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-bottom:5px;background-color:#f5faff;border-radius:2px;border:1px solid #c2e0ff}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value.disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value .ng-value-label{padding:2px 5px 2px 1px}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value .ng-value-icon{padding:3px 5px}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d8eafd}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #c2e0ff}.ng-select.ng-multiple .ng-control .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}.ng-select.ng-multiple .ng-control .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}.ng-select.ng-multiple .ng-control .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-zone{color:#999}.ng-select .ng-clear-zone .ng-clear:hover{color:#d0021b}.ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}.ng-select .ng-arrow-zone{padding-right:5px;width:25px}.ng-select .ng-arrow-zone .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-select .ng-arrow-zone .ng-arrow:hover{border-top-color:#666}.ng-select .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-select .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.06);box-shadow:0 1px 0 rgba(0,0,0,.06)}.ng-dropdown-panel.bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#666;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.selected{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.selected .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.marked{background-color:#ebf5ff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}.input-group .select{width:100%}.input-group .select .ui-select-container .ui-select-toggle{width:100%;display:inline-block;border-radius:0}.input-group .select .ui-select-container input[type=text]{width:100%}.input-group .select:first-child .ui-select-container .ui-select-toggle{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.input-group .select:last-child .ui-select-container .ui-select-toggle{border-top-right-radius:.25em;border-bottom-right-radius:.25em}"],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: DropDownComponent,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
},] },
];
DropDownComponent.ctorParameters = function () { return [
{ type: core.Injector, decorators: [{ type: core.Inject, args: [core.Injector,] },] },
{ type: FormConfig, },
]; };
DropDownComponent.propDecorators = {
"template": [{ type: core.Input }, { type: core.ContentChild, args: [core.TemplateRef,] },],
"isMultiple": [{ type: core.Input },],
"inInputGroup": [{ type: core.Input },],
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"appendTo": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"options": [{ type: core.Input },],
"selectBy": [{ type: core.Input },],
"labelField": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"typeahead": [{ type: core.Input },],
"icon": [{ type: core.Input },],
"iconPlacement": [{ type: core.Input },],
};
var identifier$2 = 0;
var NestedCheckBoxComponent = /** @class */ (function (_super) {
__extends(NestedCheckBoxComponent, _super);
function NestedCheckBoxComponent(injector) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.name = null;
_this.required = false;
_this.disabled = false;
_this.label = '';
_this.placeholder = null;
_this.shouldValidate = true;
_this.labelPlacement = 'before';
_this.onCollapseAll = new core.EventEmitter();
_this.onExpandAll = new core.EventEmitter();
_this.options = [];
_this.selectBy = 'id';
_this.searchBy = ['name'];
_this.selection = {};
_this.indeterminate = {};
_this.additionalValidators = [{
validate: function (control) {
if (_this.required && (!control.value || control.value.length === 0)) {
return { required: true };
}
return null;
}
}];
_this.nestedList = { children: [] };
return _this;
}
NestedCheckBoxComponent.prototype.ngOnInit = function () {
_super.prototype.ngOnInit.call(this);
this.nestedList.children = this.options;
this.searcher = new NestedSearcher(this.searchBy);
};
NestedCheckBoxComponent.prototype.shouldBold$ = function (item) {
return Rx.Observable.of(this.searcher.isTermLongEnough() && this.searcher.doesItemMatchSearch(item)).debounceTime(500);
};
NestedCheckBoxComponent.prototype.hasChildren = function (item) {
return core$1.Value.hasArrayElements(item.children);
};
NestedCheckBoxComponent.prototype.click = function (item) {
var _this = this;
this.selection[item[this.selectBy]] = this.selection[item[this.selectBy]] || this.indeterminate[item[this.selectBy]] ? null : item[this.selectBy];
this.updateSelected();
this.updateThreeState(item);
this.updateChildren$(item)
.toArray().subscribe({
next: function (arr) {
if (arr.length === 0) {
_this.indeterminate[item[_this.selectBy]] = null;
}
},
complete: function () {
_this.updateParents(item);
_this.updateSelected();
_this.control.markAsTouched();
}
});
};
NestedCheckBoxComponent.prototype.updateSelected = function () {
var _this = this;
this.value = Object.keys(this.selection).map(function (key) { return _this.selection[key]; }).filter(function (value) { return Boolean(value); });
};
NestedCheckBoxComponent.prototype.updateParents = function (item) {
if (item.$parent) {
if (this.indeterminate[item.$parent[this.selectBy]] && !this.indeterminate[item[this.selectBy]] && !this.selection[item[this.selectBy]]) {
this.indeterminate[item.$parent[this.selectBy]] = null;
this.updateParents(item.$parent);
}
}
};
NestedCheckBoxComponent.prototype.updateThreeState = function (item) {
if (!this.selection[item[this.selectBy]] && !this.indeterminate[item[this.selectBy]] && item.children && item.children.length > 0) {
this.indeterminate[item[this.selectBy]] = item[this.selectBy];
return;
}
this.indeterminate[item[this.selectBy]] = null;
};
NestedCheckBoxComponent.prototype.updateChildren$ = function (item) {
var _this = this;
return Rx.Observable.from(item.children || [])
.filter(function (child) {
return child.$shown;
})
.do(function (child) {
if (_this.selection[item[_this.selectBy]]) {
_this.selection[child[_this.selectBy]] = child[_this.selectBy];
_this.indeterminate[child[_this.selectBy]] = null;
return;
}
if (!_this.indeterminate[item[_this.selectBy]]) {
_this.selection[child[_this.selectBy]] = null;
_this.indeterminate[child[_this.selectBy]] = null;
}
})
.flatMap(function (child) {
if (child.children && child.children.length > 0) {
if (_this.selection[child[_this.selectBy]]) {
return Rx.Observable.from([child]).concat(_this.updateChildren$(child));
}
return _this.updateChildren$(child);
}
if (_this.selection[child[_this.selectBy]]) {
return Rx.Observable.from([child]);
}
return Rx.Observable.from([]);
});
};
return NestedCheckBoxComponent;
}(NgFormControl));
NestedCheckBoxComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nested-check-box',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\">\n <label>\n {{label}}\n </label>\n <div></div>\n <ng-container>\n <nested-list\n class=\"form-control-container\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}\"\n [item]=\"nestedList\"\n [containerClass]=\"'form-control expandable ng-control'\"\n [showLines]=\"false\"\n [onCollapseAll]=\"onCollapseAll\"\n [onExpandAll]=\"onExpandAll\"\n [searchBy]=\"searchBy\"\n [collapsed]=\"true\"\n >\n <ng-template let-item>\n <div class=\"three-state\" [class.active]=\"selection[item[selectBy]]\">\n <span>{{item.name}}</span>\n <button class=\"btn btn-sm btn-outline-primary\" type=\"button\" (click)=\"click(item)\">\n <span class=\"fa\" [class.fa-square-o]=\"!selection[item[selectBy]] && !indeterminate[item[selectBy]]\"\n [class.fa-check-square-o]=\"selection[item[selectBy]]\"\n [class.fa-minus-square-o]=\"indeterminate[item[selectBy]]\"></span>\n </button>\n </div>\n </ng-template>\n </nested-list>\n </ng-container>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}nested-check-box nested-list .form-control.expandable{padding:5px 10px 5px 20px;resize:vertical}nested-check-box nested-list .form-control.expandable>.parent-node{display:none}nested-check-box nested-list .form-control.expandable .parent-node{padding:0}nested-check-box .expandable .form-control,nested-check-box .expandable .form-group{margin-bottom:0}nested-check-box .expandable div.three-state{padding:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}nested-check-box .expandable div.three-state .fa{font-size:16px;width:18px}nested-check-box .expandable div.three-state span:first-child{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}nested-check-box .expandable check-box .form-group{border:1px solid transparent}nested-check-box .expandable check-box .form-group.checked{border:1px dashed #ccc}nested-check-box .expandable check-box .form-group.no-validate-input .form-control,nested-check-box .expandable check-box .form-group.no-validate-input .input-group,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-append,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-prepend,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-text{padding:2px 4px;height:auto;border:none;background-color:inherit;-webkit-box-shadow:none;box-shadow:none}nested-check-box .expandable check-box .form-group.no-validate-input .form-control:first-child,nested-check-box .expandable check-box .form-group.no-validate-input .form-control:last-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-append:first-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-append:last-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-prepend:first-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-prepend:last-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-text:first-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-text:last-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group:first-child,nested-check-box .expandable check-box .form-group.no-validate-input .input-group:last-child{border-left:none;border-right:none}nested-check-box .expandable check-box .form-group.no-validate-input .form-control label,nested-check-box .expandable check-box .form-group.no-validate-input .input-group label,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-append label,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-prepend label,nested-check-box .expandable check-box .form-group.no-validate-input .input-group-text label{font-weight:400;line-height:28px}nested-check-box .expandable .bold .form-control label{font-weight:700!important}nested-check-box .bold{font-weight:700}nested-check-box .form-check{margin-bottom:0}nested-check-box .form-check .form-check-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:block;width:100%;padding-top:5px;padding-bottom:5px;padding-left:20px}nested-check-box .form-check .form-check-label:hover{background-color:#efefef}nested-check-box .form-check .form-check-label .form-check-input{margin-top:0}"],
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: NestedCheckBoxComponent,
multi: true
}],
encapsulation: core.ViewEncapsulation.None
},] },
];
NestedCheckBoxComponent.ctorParameters = function () { return [
{ type: core.Injector, },
]; };
NestedCheckBoxComponent.propDecorators = {
"name": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"label": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"labelPlacement": [{ type: core.Input },],
"options": [{ type: core.Input },],
"selectBy": [{ type: core.Input },],
"searchBy": [{ type: core.Input },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], NestedCheckBoxComponent.prototype, "required", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], NestedCheckBoxComponent.prototype, "disabled", void 0);
var TextBoxComponent = /** @class */ (function (_super) {
__extends(TextBoxComponent, _super);
function TextBoxComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this.name = null;
_this.required = false;
_this.disabled = false;
_this.label = '';
_this.placeholder = null;
_this.shouldValidate = true;
_this.showErrors = true;
_this.autocomplete = null;
_this.click = new core.EventEmitter();
_this.inputClick = new core.EventEmitter();
_this.inputFocusOut = new core.EventEmitter();
_this.inputFocus = new core.EventEmitter();
_this.disableLastPass = false;
_this.type = 'text';
_this.autofocus = null;
_this.autocorrect = true;
_this.autocapitalize = true;
_this.spellcheck = true;
_this.identifier = "text-box-" + identifier$3++;
return _this;
}
TextBoxComponent.prototype.onLoad = function () {
var _this = this;
if (!this.input || !this.input.nativeElement) {
setTimeout(function () { return _this.onLoad(); }, 500);
return;
}
Rx.Observable.fromEvent(this.input.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe(function (event) {
if (event.key === 'Tab') {
_this.triggerValidation();
}
});
if (this.autofocus) {
this.input.nativeElement.focus();
}
};
TextBoxComponent.prototype.triggerValidation = function () {
_super.prototype.triggerValidation.call(this);
this.inputFocusOut.emit();
};
return TextBoxComponent;
}(NgFormControl));
TextBoxComponent.decorators = [
{ type: core.Component, args: [{
selector: 'text-box',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\">\n <label [attr.for]=\"identifier\" *ngIf=\"label.length > 0\">\n {{label}}\n <ng-container *ngIf=\"required && config.showRequiredAsterisk\">*</ng-container>\n </label>\n <div></div>\n <div class=\"input-group ng-control\" (click)=\"click.emit()\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}\">\n <ng-content select=\".input-group-prepend\"></ng-content>\n <input class=\"form-control\" [type]=\"type\" #input\n (focus)=\"inputFocus.emit()\"\n [placeholder]=\"placeholder || ''\"\n [id]=\"identifier\"\n [attr.name]=\"name\"\n [name]=\"name\"\n [attr.role]=\"disableLastPass ? 'note' : ''\"\n [attr.autocomplete]=\"autocomplete ? autocomplete : disableLastPass ? 'off' : name\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (blur)=\"triggerValidation()\"\n [attr.autofocus]=\"autofocus || null\"\n [attr.autocapitalize]=\"autocapitalize\"\n [attr.autocorrect]=\"autocorrect\"\n [attr.spellcheck]=\"spellcheck\"\n [attr.data-lpignore]=\"disableLastPass || null\"\n tabindex=\"0\"\n />\n <ng-content select=\".input-group-append\"></ng-content>\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async) && showErrors\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}"],
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: TextBoxComponent,
multi: true
}],
encapsulation: core.ViewEncapsulation.None
},] },
];
TextBoxComponent.ctorParameters = function () { return [
{ type: core.Injector, },
{ type: FormConfig, },
]; };
TextBoxComponent.propDecorators = {
"name": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"label": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"showErrors": [{ type: core.Input },],
"autocomplete": [{ type: core.Input },],
"click": [{ type: core.Output },],
"inputClick": [{ type: core.Output },],
"inputFocusOut": [{ type: core.Output },],
"inputFocus": [{ type: core.Output },],
"disableLastPass": [{ type: core.Input },],
"type": [{ type: core.Input },],
"autofocus": [{ type: core.Input },],
"autocorrect": [{ type: core.Input },],
"autocapitalize": [{ type: core.Input },],
"spellcheck": [{ type: core.Input },],
"format": [{ type: core.Input },],
"input": [{ type: core.ViewChild, args: ['input',] },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], TextBoxComponent.prototype, "required", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], TextBoxComponent.prototype, "disabled", void 0);
var identifier$3 = 0;
var EmailComponent = /** @class */ (function (_super) {
__extends(EmailComponent, _super);
function EmailComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this.name = null;
_this.required = false;
_this.disabled = false;
_this.label = '';
_this.placeholder = null;
_this.shouldValidate = true;
_this.shouldValidateEmail = false;
_this.additionalValidators = [
{
validate: function (control) {
return _this.shouldValidateEmail ? forms.Validators.email(control) : null;
}
}
];
return _this;
}
EmailComponent.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this.shouldValidateEmail = !!(this.value && this.value.length > 0);
this.valueChange.takeUntil(this.onDestroy$)
.subscribe(function (value) {
_this.shouldValidateEmail = value && value.length > 0;
});
};
return EmailComponent;
}(NgFormControl));
EmailComponent.decorators = [
{ type: core.Component, args: [{
selector: 'email',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group\" [class.validate-input]=\"shouldValidate\" [class.no-validate-input]=\"!shouldValidate\"\n [hidden]=\"!initialized\">\n <label [attr.for]=\"identifier\" *ngIf=\"label.length > 0\">\n {{label}}\n <ng-container *ngIf=\"required && config.showRequiredAsterisk\">*</ng-container>\n </label>\n <div></div>\n <div class=\"input-group ng-control\"\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}\">\n <div class=\"input-group-prepend\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-envelope\"></span>\n </div>\n </div>\n <input class=\"form-control\"\n type=\"text\"\n [placeholder]=\"placeholder || ''\"\n [id]=\"identifier\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.name]=\"name\"\n [(ngModel)]=\"value\"\n (blur)=\"triggerValidation()\"\n tabindex=\"0\"\n />\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}"],
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: EmailComponent,
multi: true
}],
encapsulation: core.ViewEncapsulation.None
},] },
];
EmailComponent.ctorParameters = function () { return [
{ type: core.Injector, },
{ type: FormConfig, },
]; };
EmailComponent.propDecorators = {
"name": [{ type: core.Input },],
"required": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"label": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"shouldValidate": [{ type: core.Input },],
"textBox": [{ type: core.ViewChild, args: ['textBox',] },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], EmailComponent.prototype, "required", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], EmailComponent.prototype, "disabled", void 0);
var PhoneComponent = /** @class */ (function (_super) {
__extends(PhoneComponent, _super);
function PhoneComponent(injector) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.name = '';
_this.label = 'Phone Number';
_this.disabled = false;
_this.required = false;
_this.additionalValidators = ([
forms.Validators.pattern('\\d{3}\\-\\d{3}\\-\\d{4}')
]);
_this.phoneForm = {
part1: '',
part2: '',
part3: ''
};
_this.identifier = "phone-" + identifier$4++;
return _this;
}
PhoneComponent.prototype.onLoad = function () {
if (this.value && this.value.length > 0) {
var phone = this.value.replace(/[^\d\-]+/g, '').split('-');
this.phoneForm.part1 = phone[0];
this.phoneForm.part2 = phone[1] || '';
this.phoneForm.part3 = phone[2] || '';
}
};
PhoneComponent.prototype.getFor = function () {
var field = 'part1';
if (this.phoneForm.part1.length > 2) {
field = 'part2';
if (this.phoneForm.part2.length > 2) {
field = 'part3';
if (this.phoneForm.part3.length > 3) {
field = 'extension';
}
}
}
return field;
};
PhoneComponent.prototype.format = function () {
this.value = this.phoneForm.part1;
if (this.phoneForm.part1.length === 3) {
this.value += '-' + this.phoneForm.part2;
}
if (this.phoneForm.part2.length === 3) {
this.value += '-' + this.phoneForm.part3;
}
this.control.markAsTouched();
this.triggerValidation();
};
PhoneComponent.prototype.onKeyUp = function (event, currentElement, nextElement) {
var ignoreNextFocusKeys = ['tab', 'enter', 'backspace', 'arrowleft', 'arrowright', 'shift'];
if (ignoreNextFocusKeys.indexOf(event.key.toLowerCase()) === -1 && nextElement && (currentElement.selectionStart === 3)) {
nextElement.focus();
}
this.format();
};
return PhoneComponent;
}(NgFormControl));
PhoneComponent.decorators = [
{ type: core.Component, args: [{
selector: 'phone',
template: "<div class=\"form-group validate-input\">\n <label [for]=\"getFor()\">{{label}}</label>\n <br/>\n <div *ngIf=\"control\">\n <div class=\"input-group ng-control\" [class.ng-invalid]=\"control.invalid\"\n [class.ng-valid]=\"control.valid\"\n [class.ng-touched]=\"control.touched\">\n <div class=\"input-group-prepend\">\n <div class=\"input-group-text\">\n <span class=\"fa fa-phone\"></span>\n </div>\n </div>\n <input #part1 class=\"form-control\" type=\"text\" size=\"3\" minlength=\"3\" maxlength=\"3\"\n [attr.id]=\"identifier + '-part1'\"\n [(ngModel)]=\"phoneForm.part1\"\n pattern=\"d{3}\"\n required\n (keyup)=\"onKeyUp($event, part1, part2)\"\n (change)=\"format()\"\n (blur)=\"format()\"\n [attr.name]=\"identifier + '-part1'\"\n [name]=\"identifier + '-part1'\"/>\n <div class=\"input-group-append\">\n <span class=\"input-group-text\">-</span>\n </div>\n <input #part2 class=\"form-control\" type=\"text\" size=\"3\" minlength=\"3\" maxlength=\"3\"\n [attr.id]=\"identifier + '-part2'\"\n [(ngModel)]=\"phoneForm.part2\"\n pattern=\"d{3}\"\n required\n (keyup)=\"onKeyUp($event, part2, part3)\"\n (change)=\"format()\"\n (blur)=\"format()\"\n [attr.name]=\"identifier + '-part2'\"\n [name]=\"identifier + '-part2'\"/>\n <div class=\"input-group-append\">\n <span class=\"input-group-text\">-</span>\n </div>\n <input #part3 class=\"form-control\" type=\"text\" size=\"4\" minlength=\"4\" maxlength=\"4\"\n [attr.id]=\"identifier + '-part3'\"\n required\n [(ngModel)]=\"phoneForm.part3\"\n pattern=\"d{4}\"\n (keyup)=\"format()\"\n (change)=\"format()\"\n (blur)=\"format()\"\n [attr.name]=\"identifier + '-part3'\"\n [name]=\"identifier + '-part3'\"/>\n </div>\n <div class=\"validation-messages-container\">\n <div class=\"alert alert-danger\" *ngIf=\"control && control.invalid && control.touched\">\n <div>The {{label}} is not fully provided.</div>\n </div>\n </div>\n </div>\n</div>\n",
styles: ["@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}@keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}.validation-messages-container{position:relative;width:100%;display:block}.validation-messages-container .alert{position:absolute;bottom:24px;-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,.2);width:auto;padding:5px 10px;max-width:100%;-webkit-animation:.5s cubic-bezier(.36,.07,.19,.97) both shake;animation:.5s cubic-bezier(.36,.07,.19,.97) both shake;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);cursor:pointer;font-size:.8em}@media (max-width:600px){.validation-messages-container .alert{font-size:.9em}}.validation-messages-container .alert.dismissed{display:none}.validation-messages-container .alert ul{list-style:none;margin:0;padding:0}.validation-messages-container .alert ul li{margin:0}"],
encapsulation: core.ViewEncapsulation.None,
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: PhoneComponent,
multi: true
}]
},] },
];
PhoneComponent.ctorParameters = function () { return [
{ type: core.Injector, },
]; };
PhoneComponent.propDecorators = {
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"required": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
};
var identifier$4 = 1;
var RadioComponent = /** @class */ (function (_super) {
__extends(RadioComponent, _super);
function RadioComponent(injector) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.name = '';
_this.label = '';
_this.labelPlacement = 'after';
_this.checkedValue = true;
_this.disabled = false;
_this.required = false;
_this.identifier = "radio-" + identifier$5++;
_this.onTouch = new core.EventEmitter();
_this.shouldValidate = false;
return _this;
}
RadioComponent.prototype.ngOnInit = function () {
_super.prototype.ngOnInit.call(this);
};
RadioComponent.prototype.onLoad = function () {
var _this = this;
if (!this.element || !this.element.nativeElement) {
setTimeout(function () { return _this.onLoad(); }, 500);
return;
}
Rx.Observable.fromEvent(this.element.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe(function (event) {
if (event.key === ' ') {
_this.check();
}
});
};
RadioComponent.prototype.check = function () {
if (!this.disabled) {
this.value = this.checkedValue;
this.model.control.markAsTouched();
this.onTouch.emit();
}
};
return RadioComponent;
}(NgFormControl));
RadioComponent.decorators = [
{ type: core.Component, args: [{
selector: 'radio',
template: "\n <ng-container *ngIf=\"initialized\">\n <div class=\"form-group validate-input\">\n <label *ngIf=\"labelPlacement === 'above'\">\n {{ label }}\n </label>\n <div></div>\n <div (click)=\"check();\" class=\"input-group check-container ng-control\" tabindex=\"0\" #element\n [ngClass]=\"{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}\">\n <div class=\"form-control\" *ngIf=\"labelPlacement === 'before'\">\n <label>\n {{ label }}\n </label>\n </div>\n <div class=\"ng-control\"\n [class.input-group-prepend]=\"labelPlacement === 'before'\" [class.input-group-append]=\"labelPlacement === 'after'\">\n <div class=\"input-group-text\">\n <input readonly type=\"radio\"\n [attr.name]=\"name\"\n [id]=\"identifier\"\n [disabled]=\"disabled\"\n [checked]=\"value === checkedValue\"\n tabindex=\"-1\"/>\n </div>\n </div>\n <div class=\"form-control\" *ngIf=\"labelPlacement === 'after'\">\n <label>\n {{ label }}\n </label>\n </div>\n </div>\n </div>\n </ng-container>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}check-box{position:relative}check-box input[type=checkbox]{pointer-events:none}check-box .check-container.label-above{display:inline-block}check-box .check-container.label-above .input-group-append,check-box .check-container.label-above .input-group-prepend{width:inherit;display:inline-block}"],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: RadioComponent,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
},] },
];
RadioComponent.ctorParameters = function () { return [
{ type: core.Injector, decorators: [{ type: core.Inject, args: [core.Injector,] },] },
]; };
RadioComponent.propDecorators = {
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"labelPlacement": [{ type: core.Input },],
"checkedValue": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"onTouch": [{ type: core.Output },],
"element": [{ type: core.ViewChild, args: ['element',] },],
};
var identifier$5 = 0;
var RadioGroupComponent = /** @class */ (function (_super) {
__extends(RadioGroupComponent, _super);
function RadioGroupComponent(injector, config) {
var _this = _super.call(this, injector) || this;
_this.injector = injector;
_this.config = config;
_this.state = 'off';
_this.name = '';
_this.label = '';
_this.disabled = false;
_this.bindLabel = 'label';
_this.bindValue = 'value';
_this.required = false;
_this.direction = 'horizontal';
_this.options = [];
_this.identifier = "radio-group-" + identifier$6++;
return _this;
}
return RadioGroupComponent;
}(NgFormControl));
RadioGroupComponent.decorators = [
{ type: core.Component, args: [{
selector: 'radio-group',
template: "\n <div class=\"form-group\">\n <label>\n {{ label }}\n <span *ngIf=\"required && config.showRequiredAsterisk\">*</span>\n </label>\n <div></div>\n <div class=\"radio-controls\" [class.d-flex]=\"direction === 'horizontal'\">\n <ng-container *ngFor=\"let option of options\">\n <radio [name]=\"name\"\n [label]=\"option[bindLabel]\"\n [(ngModel)]=\"value\"\n [checkedValue]=\"option[bindValue]\"\n [parentFormControl]=\"control\"\n (ngModelChange)=\"triggerValidation()\"\n (onTouch)=\"control.markAsTouched()\"\n tabindex=\"0\"></radio>\n </ng-container>\n </div>\n <validation-messages *ngIf=\"(isInvalid$() | async)\" [errors]=\"failures\" [label]=\"label\">\n </validation-messages>\n </div>\n ",
styles: ["check-box,date-picker,email,nested-check-box,nested-list{display:block;position:relative}.validation-messages{margin-top:10px}.form-group .form-control.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .alert-danger ul{margin-bottom:0}.form-group .form-control{width:auto}.form-group .input-group{width:auto;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:.25em;border:1px solid #ccc;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.form-group .input-group .form-control{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top-left-radius:0;border-bottom-left-radius:0;border:none;white-space:normal}.form-group .input-group input.form-control:first-child{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form-group .input-group .input-group-text{border-style:none;border-radius:0 .25em .25em 0}.form-group .input-group .input-group-append,.form-group .input-group .input-group-prepend{border-top:none;border-bottom:none}.form-group .input-group .input-group-append:first-child,.form-group .input-group .input-group-prepend:first-child{border-bottom:none;border-left:none;border-right:1px solid #ccc}.form-group .input-group .input-group-prepend .input-group-text{border-radius:0}.form-group .input-group.full-width .input-group-append,.form-group .input-group.full-width .input-group-prepend{width:100%}.form-group .input-group.full-width .form-control,.form-group .input-group.full-width .ng-control,.form-group .input-group.full-width .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-group .input-group .input-group-prepend+.ng-select{margin-left:1px}.form-group .form-control label{margin-bottom:0;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-group .d-flex>radio{margin-right:10px}.form-group .d-flex>radio:last-child{margin-right:0}.validate-input .input-group .ng-control,.validate-input .input-group.ng-control,.validate-input .ng-control,.validate-input.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .input-group .ng-control.ng-valid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-valid:not(form).ng-touched,.validate-input .ng-control.ng-valid:not(form).ng-touched,.validate-input.ng-control.ng-valid:not(form).ng-touched{border-left:5px solid #42a948}.validate-input .input-group .ng-control.ng-invalid:not(form).ng-touched,.validate-input .input-group.ng-control.ng-invalid:not(form).ng-touched,.validate-input .ng-control.ng-invalid:not(form).ng-touched,.validate-input.ng-control.ng-invalid:not(form).ng-touched{border-left:5px solid #a94442}.validate-input .input-group .ng-control .ng-control,.validate-input .input-group.ng-control .ng-control,.validate-input .ng-control .ng-control,.validate-input.ng-control .ng-control{border:none}.validate-input .input-group .no-validate-input .input-group,.validate-input .no-validate-input .input-group{border:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .input-group .no-validate-input .input-group.ng-valid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-invalid:not(form).ng-touched,.validate-input .no-validate-input .input-group.ng-valid:not(form).ng-touched{border-left:1px solid #ccc}.validate-input .input-group .no-validate-input .input-group .ng-control,.validate-input .no-validate-input .input-group .ng-control{border:none}.validate-input .form-control-container>.ng-control,.validate-input .input-group .form-control-container>.ng-control{border:1px solid #ccc;border-left:5px solid #ccc}.validate-input .form-control-container.ng-valid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-valid:not(form).ng-touched>.ng-control{border-left:5px solid #42a948}.validate-input .form-control-container.ng-invalid:not(form).ng-touched>.ng-control,.validate-input .input-group .form-control-container.ng-invalid:not(form).ng-touched>.ng-control{border-left:5px solid #a94442}.full-width .form-group .form-control,.full-width .form-group .input-group{width:100%}.full-width .form-group .input-group .form-control,.full-width .form-group .ng-select{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}check-box{position:relative}check-box input[type=checkbox]{pointer-events:none}check-box .check-container.label-above{display:inline-block}check-box .check-container.label-above .input-group-append,check-box .check-container.label-above .input-group-prepend{width:inherit;display:inline-block}"],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: RadioGroupComponent,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
},] },
];
RadioGroupComponent.ctorParameters = function () { return [
{ type: core.Injector, decorators: [{ type: core.Inject, args: [core.Injector,] },] },
{ type: FormConfig, },
]; };
RadioGroupComponent.propDecorators = {
"state": [{ type: core.Input },],
"name": [{ type: core.Input },],
"label": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"bindLabel": [{ type: core.Input },],
"bindValue": [{ type: core.Input },],
"required": [{ type: core.Input },],
"direction": [{ type: core.Input },],
"parentFormControl": [{ type: core.Input },],
"parentFormGroup": [{ type: core.Input },],
"options": [{ type: core.Input },],
};
__decorate([
core$1.OnChange,
__metadata("design:type", Object)
], RadioGroupComponent.prototype, "state", void 0);
__decorate([
core$1.OnChange,
__metadata("design:type", Boolean)
], RadioGroupComponent.prototype, "required", void 0);
var identifier$6 = 0;
var TabComponent = /** @class */ (function () {
function TabComponent() {
this.isActive = false;
this.trigger = new core.EventEmitter();
}
TabComponent.prototype.log = function ($event) {
console.log($event.key);
};
return TabComponent;
}());
TabComponent.decorators = [
{ type: core.Component, args: [{
selector: 'tab',
template: "\n <li class=\"nav-item\">\n <a class=\"nav-link\"\n (activate)=\"trigger.emit()\"\n [class.active]=\"isActive\"\n tabindex=\"0\">\n <ng-content></ng-content>\n </a>\n </li>",
encapsulation: core.ViewEncapsulation.None,
},] },
];
TabComponent.ctorParameters = function () { return []; };
TabComponent.propDecorators = {
"isActive": [{ type: core.Input },],
"trigger": [{ type: core.Output },],
};
var Activatable = /** @class */ (function () {
function Activatable(el) {
this.el = el;
this.activate = new core.EventEmitter();
}
Activatable.prototype.onKeyUp = function ($event) {
$event.stopPropagation();
$event.preventDefault();
if ($event.key === 'Enter' || $event.key === ' ') {
this.activate.emit();
return false;
}
};
Activatable.prototype.onMouseUp = function ($event) {
$event.stopPropagation();
$event.preventDefault();
this.activate.emit();
return false;
};
return Activatable;
}());
Activatable.decorators = [
{ type: core.Directive, args: [{
selector: '[tabindex]:not(input)',
outputs: ['activate']
},] },
];
Activatable.ctorParameters = function () { return [
{ type: core.ElementRef, },
]; };
Activatable.propDecorators = {
"onKeyUp": [{ type: core.HostListener, args: ['keyup', ['$event'],] },],
"onMouseUp": [{ type: core.HostListener, args: ['mouseup', ['$event'],] },],
};
var ValidatorMessenger = /** @class */ (function () {
function ValidatorMessenger() {
var _this = this;
this.messages = {
required: function (result, key, label) {
if (label === void 0) { label = ''; }
return label + " is required";
},
pattern: function (result, key, label) {
if (label === void 0) { label = ''; }
return label + " must be in a valid format";
},
email: function (result, key, label) {
if (label === void 0) { label = ''; }
return label + " must be a valid email address";
},
minlength: function (result, key, label) {
if (label === void 0) { label = ''; }
var plural = _this.getPlural(result['requiredLength']);
return label + " must be at least " + result['requiredLength'] + " character" + plural;
},
maxlength: function (result, key, label) {
if (label === void 0) { label = ''; }
var plural = _this.getPlural(result['requiredLength']);
return label + " must be at most " + result['requiredLength'] + " character" + plural;
}
};
}
ValidatorMessenger.prototype.getPlural = function (value) {
return value !== 1 ? 's' : '';
};
ValidatorMessenger.prototype.getMessageForError = function (result, key, label) {
if (label === void 0) { label = ''; }
label = label.length > 0 ? label : key;
if (typeof this.messages[key] === 'function') {
return this.messages[key](result[key], key, label);
}
switch (typeof result[key]) {
case 'string':
return (result[key]);
default:
return "Validation failed: " + label;
}
};
return ValidatorMessenger;
}());
ValidatorMessenger.decorators = [
{ type: core.Injectable },
];
ValidatorMessenger.ctorParameters = function () { return []; };
var FormValidationMessagesComponent = /** @class */ (function () {
function FormValidationMessagesComponent(messenger) {
this.messenger = messenger;
}
FormValidationMessagesComponent.prototype.getKeys = function (object) {
return Object.keys(object);
};
FormValidationMessagesComponent.prototype.getMessage = function (label, errors, key) {
return this.messenger.getMessageForError(errors, key, label);
};
return FormValidationMessagesComponent;
}());
FormValidationMessagesComponent.decorators = [
{ type: core.Component, args: [{
selector: 'form-validation-messages',
template: "\n <div class=\"alert alert-danger validation-messages\" *ngIf=\"errors !== null\">\n <ul>\n <ng-container *ngFor=\"let field of getKeys(errors)\">\n <li *ngFor=\"let errorKey of getKeys(errors[field])\">\n {{getMessage(field, errors[field], errorKey)}}\n </li>\n </ng-container>\n </ul>\n </div>\n "
},] },
];
FormValidationMessagesComponent.ctorParameters = function () { return [
{ type: ValidatorMessenger, },
]; };
FormValidationMessagesComponent.propDecorators = {
"errors": [{ type: core.Input },],
};
var ValidationMessagesComponent = /** @class */ (function () {
function ValidationMessagesComponent(messenger) {
this.messenger = messenger;
this.label = '';
}
ValidationMessagesComponent.prototype.getKeys = function () {
if (!this.errors) {
return [];
}
return Object.keys(this.errors);
};
ValidationMessagesComponent.prototype.getMessage = function (key) {
return this.messenger.getMessageForError(this.errors, key, this.label);
};
ValidationMessagesComponent.prototype.getErrorMessages = function () {
};
return ValidationMessagesComponent;
}());
ValidationMessagesComponent.decorators = [
{ type: core.Component, args: [{
selector: 'validation-messages',
template: "\n <div class=\"validation-messages-container\">\n <div class=\"alert alert-danger validation-messages\" [hidden]=\"!errors\">\n <ul>\n <li *ngFor=\"let key of getKeys()\">{{getMessage(key)}}</li>\n </ul>\n </div>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None,
styles: ["@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}@keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}.validation-messages-container{position:relative;width:100%;display:block}.validation-messages-container .alert{position:absolute;bottom:24px;-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,.2);width:auto;padding:5px 10px;max-width:100%;-webkit-animation:.5s cubic-bezier(.36,.07,.19,.97) both shake;animation:.5s cubic-bezier(.36,.07,.19,.97) both shake;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);cursor:pointer;font-size:.8em}@media (max-width:600px){.validation-messages-container .alert{font-size:.9em}}.validation-messages-container .alert.dismissed{display:none}.validation-messages-container .alert ul{list-style:none;margin:0;padding:0}.validation-messages-container .alert ul li{margin:0}"]
},] },
];
ValidationMessagesComponent.ctorParameters = function () { return [
{ type: ValidatorMessenger, },
]; };
ValidationMessagesComponent.propDecorators = {
"errors": [{ type: core.Input },],
"label": [{ type: core.Input },],
};
var SubmitButtonComponent = /** @class */ (function () {
function SubmitButtonComponent() {
this.icon = '';
this.iconPlacement = 'before';
this.label = '';
this.onSubmit = new core.EventEmitter();
this.identifier = "submit-" + identifier$7++;
this.onDestroy$ = new core.EventEmitter();
this.inFormGroup = true;
}
SubmitButtonComponent.prototype.getId = function () {
return this.identifier;
};
SubmitButtonComponent.prototype.ngOnInit = function () {
var _this = this;
Rx.Observable.fromEvent(this.button.nativeElement, 'keypress')
.takeUntil(this.onDestroy$)
.subscribe(function (value) {
if (value.key === 'Enter' || value.key === ' ') {
return _this.submit();
}
});
};
SubmitButtonComponent.prototype.ngOnDestroy = function () {
this.onDestroy$.emit();
};
SubmitButtonComponent.prototype.submit = function () {
this.validateAllFormFields(this.formGroup);
if (this.formGroup.valid) {
this.onSubmit.emit(this.formGroup.value);
}
};
SubmitButtonComponent.prototype.validateAllFormFields = function (formGroup) {
var _this = this;
Object.keys(formGroup.controls).forEach(function (field) {
var control = formGroup.get(field);
if (control instanceof forms.FormControl) {
control.markAsTouched();
}
else if (control instanceof forms.FormGroup) {
_this.validateAllFormFields(control);
}
});
};
return SubmitButtonComponent;
}());
SubmitButtonComponent.decorators = [
{ type: core.Component, args: [{
selector: 'submit-button',
template: "\n <div [class.form-group]=\"inFormGroup\">\n <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit()\" [id]=\"getId()\" #button>\n <span class=\"fa fa-{{ icon }}\" *ngIf=\"icon.length > 0 && iconPlacement === 'before'\"></span>\n {{label}}\n <span class=\"fa fa-{{ icon }}\" *ngIf=\"icon.length > 0 && iconPlacement === 'after'\"></span>\n </button>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None
},] },
];
SubmitButtonComponent.ctorParameters = function () { return []; };
SubmitButtonComponent.propDecorators = {
"icon": [{ type: core.Input },],
"iconPlacement": [{ type: core.Input },],
"label": [{ type: core.Input },],
"formGroup": [{ type: core.Input },],
"onSubmit": [{ type: core.Output },],
"button": [{ type: core.ViewChild, args: ['button',] },],
"inFormGroup": [{ type: core.Input },],
};
var identifier$7 = 0;
var MatchValueValidator = /** @class */ (function () {
function MatchValueValidator(messenger) {
this.matchValue = {
label: '',
value: '',
message: ''
};
if (!messenger.messages.hasOwnProperty('matchValue')) {
messenger.messages['matchValue'] = function (result, key, label) {
if (label === void 0) { label = ''; }
var message = (result['message']);
if (message.length > 0) {
return message;
}
return label + " must match " + result["matchLabel"];
};
}
}
MatchValueValidator.prototype.validate = function (c) {
if (this.matchValue === null) {
return null;
}
return this.getStringValue(c) !== this.matchValue.value ? {
matchValue: {
expectedValue: this.matchValue.value,
matchLabel: this.matchValue.label,
message: this.matchValue.message || '',
actualValue: c.value
}
} : null;
};
MatchValueValidator.prototype.getStringValue = function (control) {
if (control.value === null || typeof control.value === 'undefined') {
return '';
}
return control.value.toString();
};
return MatchValueValidator;
}());
MatchValueValidator.decorators = [
{ type: core.Directive, args: [{
selector: '[matchValue]',
providers: [{
provide: forms.NG_VALIDATORS,
useExisting: core.forwardRef(function () { return MatchValueValidator; }),
multi: true
}]
},] },
];
MatchValueValidator.ctorParameters = function () { return [
{ type: ValidatorMessenger, },
]; };
MatchValueValidator.propDecorators = {
"matchValue": [{ type: core.Input },],
};
var NgFormsModule = /** @class */ (function () {
function NgFormsModule() {
window.addEventListener('keydown', function (e) {
if (e.keyCode === 32 && ['TEXTAREA', 'INPUT'].indexOf(e.target['tagName']) === -1) {
e.stopPropagation();
e.preventDefault();
return false;
}
return true;
});
}
NgFormsModule.forRoot = function (showRequiredAsterisk) {
if (showRequiredAsterisk === void 0) { showRequiredAsterisk = true; }
return {
ngModule: NgFormsModule,
providers: [
{
provide: FormConfig,
useValue: { showRequiredAsterisk: showRequiredAsterisk }
}
]
};
};
return NgFormsModule;
}());
NgFormsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
DatePickerComponent,
CheckBoxComponent,
NestedListComponent,
NestedCheckBoxComponent,
DropDownComponent,
EmailComponent,
ValidationMessagesComponent,
FormValidationMessagesComponent,
RequiredCheckBoxValidator,
SubmitButtonComponent,
TextBoxComponent,
MatchValueValidator,
RadioGroupComponent,
RadioComponent,
PhoneComponent,
TabComponent,
Activatable,
NestedFieldComponent
],
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
animations.BrowserAnimationsModule,
material.MatCheckboxModule,
material.MatButtonModule,
material.MatInputModule,
material.MatRadioModule,
ngSelect.NgSelectModule,
ngxBootstrap.BsDatepickerModule.forRoot(),
safePipe.SafePipeModule
],
exports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
NestedListComponent,
NestedCheckBoxComponent,
DatePickerComponent,
CheckBoxComponent,
DropDownComponent,
EmailComponent,
SubmitButtonComponent,
TextBoxComponent,
MatchValueValidator,
RadioGroupComponent,
RadioComponent,
PhoneComponent,
TabComponent,
Activatable,
ValidationMessagesComponent,
FormValidationMessagesComponent,
NestedFieldComponent,
material.MatCheckboxModule,
material.MatButtonModule,
material.MatInputModule,
material.MatRadioModule
],
providers: [
RequiredCheckBoxValidator,
ValidatorMessenger,
FormConfig
]
},] },
];
NgFormsModule.ctorParameters = function () { return []; };
var Selector = /** @class */ (function () {
function Selector(options, selected, selectBy) {
if (selectBy === void 0) { selectBy = 'id'; }
this.options = options;
this.selectBy = selectBy;
this.onSelect = new core.EventEmitter();
this.onDeselect = new core.EventEmitter();
this.selected = null;
this.selectedChange = new core.EventEmitter();
this.interpreter = new core$1.ValueInterpreter(selectBy);
this.selected = selected;
}
Selector.prototype.toggle = function (option) {
if (!this.isSelected(option)) {
this.select(option);
return;
}
this.deselect(option);
};
Selector.prototype.triggerSelectEvent = function (option) {
this.selected = this.interpreter.getValueOfObject(option);
this.onSelect.emit(option);
};
Selector.prototype.triggerDeselectEvent = function (option) {
this.selected = null;
this.onDeselect.emit(option);
};
Selector.prototype.select = function (option) {
if (!this.isSelected(option)) {
this.triggerSelectEvent(option);
}
};
Selector.prototype.deselect = function (option) {
if (this.isSelected(option)) {
this.triggerDeselectEvent(option);
}
};
Selector.prototype.getSelected = function () {
return this.selected;
};
return Selector;
}());
__decorate([
core$1.OnChange,
__metadata("design:type", Object)
], Selector.prototype, "selected", void 0);
var MultiSelector = /** @class */ (function (_super) {
__extends(MultiSelector, _super);
function MultiSelector(options, selected, selectBy) {
if (selectBy === void 0) { selectBy = 'id'; }
var _this = _super.call(this, options, selected, selectBy) || this;
_this.options = options;
_this.selected = selected;
_this.selectBy = selectBy;
return _this;
}
MultiSelector.prototype.triggerSelectEvent = function (option) {
this.selected.push(this.interpreter.getValueOfObject(option));
this.onSelect.emit(option);
};
MultiSelector.prototype.getIndexOf = function (option) {
return this.selected.indexOf(this.interpreter.getValueOfObject(option));
};
MultiSelector.prototype.triggerDeselectEvent = function (option) {
this.selected.splice(this.getIndexOf(option), 1);
this.onDeselect.emit(option);
};
MultiSelector.prototype.isSelected = function (option) {
return this.getIndexOf(option) > -1;
};
MultiSelector.prototype.selectAll$ = function () {
var _this = this;
return core$1.Async.forEach$(this.options, function (option) { return _this.select(option); });
};
MultiSelector.prototype.deselectAll$ = function () {
var _this = this;
return core$1.Async.forEach$(this.options, function (option) { return _this.deselect(option); });
};
return MultiSelector;
}(Selector));
var SingleSelector = /** @class */ (function (_super) {
__extends(SingleSelector, _super);
function SingleSelector() {
return _super !== null && _super.apply(this, arguments) || this;
}
SingleSelector.prototype.isSelected = function (option) {
return this.doesValueMatchOption(option, this.selected);
};
SingleSelector.prototype.select = function (option) {
this.deselectPreviousSelection$(this.selected).subscribe();
_super.prototype.select.call(this, option);
};
SingleSelector.prototype.deselectPreviousSelection$ = function (value) {
var _this = this;
return core$1.Async.forEach$(this.options, function (option) {
if (_this.doesValueMatchOption(option, value)) {
_this.onDeselect.emit(option);
}
});
};
SingleSelector.prototype.doesValueMatchOption = function (option, value) {
return value === this.interpreter.getValueOfObject(option);
};
return SingleSelector;
}(Selector));
var MultiSelectorMock = /** @class */ (function () {
function MultiSelectorMock() {
}
MultiSelectorMock.prototype.triggerSelectEvent = function (option) {
return undefined;
};
MultiSelectorMock.prototype.getIndexOf = function (option) {
return undefined;
};
MultiSelectorMock.prototype.triggerDeselectEvent = function (option) {
return undefined;
};
MultiSelectorMock.prototype.toggle = function (option) {
};
MultiSelectorMock.prototype.select = function (option) {
};
MultiSelectorMock.prototype.deselect = function (option) {
};
MultiSelectorMock.prototype.selectAll$ = function () {
};
MultiSelectorMock.prototype.deselectAll$ = function () {
};
MultiSelectorMock.prototype.isSelected = function (option) {
return false;
};
MultiSelectorMock.prototype.getSelected = function () {
return [];
};
return MultiSelectorMock;
}());
var SelectorMock = /** @class */ (function () {
function SelectorMock() {
}
SelectorMock.prototype.toggle = function (option) {
};
SelectorMock.prototype.select = function (option) {
};
SelectorMock.prototype.deselect = function (option) {
};
SelectorMock.prototype.selectAll$ = function () {
};
SelectorMock.prototype.deselectAll$ = function () {
};
SelectorMock.prototype.isSelected = function (option) {
return false;
};
SelectorMock.prototype.getSelected = function () {
return [];
};
return SelectorMock;
}());
var SelectorShunt = /** @class */ (function (_super) {
__extends(SelectorShunt, _super);
function SelectorShunt(options, selected, selectBy) {
var _this = _super.call(this, options, selected, selectBy) || this;
_this.calledSelect = false;
_this.calledDeselect = false;
_this.interpreter = ({
getValueOfObject: function (option) {
return option[_this.selectBy];
}
});
return _this;
}
SelectorShunt.prototype.triggerSelectEvent = function (option) {
_super.prototype.triggerSelectEvent.call(this, option);
this.calledSelect = true;
};
SelectorShunt.prototype.triggerDeselectEvent = function (option) {
_super.prototype.triggerDeselectEvent.call(this, option);
this.calledDeselect = true;
};
SelectorShunt.prototype.isSelected = function (option) {
return this.selected === this.interpreter.getValueOfObject(option);
};
return SelectorShunt;
}(Selector));
var ConfirmationDemoComponent = /** @class */ (function () {
function ConfirmationDemoComponent() {
this.model = {
label: 'Match This Value',
match: '',
value: ''
};
this.markup = "\n<text-box\n name=\"testConfirm\"\n [label]=\"model.label\"\n placeholder=\"provide a value ...\"\n [(ngModel)]=\"model.value\"\n required=\"true\"></text-box>\n<text-box\n name=\"testConfirmValue\"\n label=\"Confirm 'Match This Value'\"\n [(ngModel)]=\"model.match\"\n required=\"true\"\n [matchValue]=\"{label: model.label, value: model.value}\"\n placeholder=\"match the previous value ...\"></text-box>\n ";
}
return ConfirmationDemoComponent;
}());
ConfirmationDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.confirmation-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Match Value (Confirmation)</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <text-box\n name=\"testConfirm\"\n [label]=\"model.label\"\n placeholder=\"provide a value ...\"\n [(ngModel)]=\"model.value\"\n required=\"true\"></text-box>\n <text-box\n name=\"testConfirmValue\"\n label=\"Confirm 'Match This Value'\"\n [(ngModel)]=\"model.match\"\n required=\"true\"\n [matchValue]=\"{label: model.label, value: model.value}\"\n placeholder=\"match the previous value ...\"></text-box>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
ConfirmationDemoComponent.ctorParameters = function () { return []; };
var FormsDemoComponent = /** @class */ (function () {
function FormsDemoComponent() {
}
FormsDemoComponent.prototype.getRoute = function (path) {
return ['', 'forms', path];
};
FormsDemoComponent.prototype.log = function (value) {
console.log(value);
};
return FormsDemoComponent;
}());
FormsDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: 'forms-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<style>\n pre {\n overflow-x: auto;\n width: 100%;\n }\n @media (min-width: 768px) {\n .navbar-brand {\n width: 100%;\n }\n }\n h4, h5 {\n border-bottom: 1px solid #ccc;\n margin-bottom: 20px;\n }\n</style>\n<ul class=\"nav nav-tabs\">\n <tab (trigger)=\"log('Worked!')\">Sample Tab</tab>\n</ul>\n<div class=\"container-fluid\">\n <div class=\"row flex-xl-nowrap\">\n <div class=\"col-12 col-md-3 col-xl-2 nav-sidebar bg-light\">\n <nav class=\"navbar navbar-expand-md navbar-light flex-md-column\">\n <a class=\"navbar-brand\" routerLink=\"/forms\" routerLinkActive=\"active\">Forms</a>\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNav\"\n aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n <div class=\"navbar-nav flex-column\">\n <div class=\"nav-brand\">Components</div>\n <a class=\"nav-link\" routerLink=\"check-box\" routerLinkActive=\"active\" tabindex=\"0\" (activate)=\"log('Worked!')\">Check Box</a>\n <a class=\"nav-link\" routerLink=\"nested-check-box\" routerLinkActive=\"active\">\n Nested Check Box\n </a>\n <a class=\"nav-link\" routerLink=\"nested-list\" routerLinkActive=\"active\">\n Nested List\n </a>\n <a class=\"nav-link\" routerLink=\"nested-field\" routerLinkActive=\"active\">\n Nested Field\n </a>\n <a class=\"nav-link\" routerLink=\"radio\" routerLinkActive=\"active\">Radio Buttons</a>\n <a class=\"nav-link\" routerLink=\"text-box\" routerLinkActive=\"active\">Text Box</a>\n <a class=\"nav-link\" routerLink=\"phone\" routerLinkActive=\"active\">Phone</a>\n <a class=\"nav-link\" routerLink=\"email\" routerLinkActive=\"active\">Email Address</a>\n <a class=\"nav-link\" routerLink=\"date-picker\" routerLinkActive=\"active\">Date Picker</a>\n <a class=\"nav-link\" routerLink=\"drop-down\" routerLinkActive=\"active\">\n Drop Down (Select)\n </a>\n <div class=\"nav-brand\"> </div>\n <div class=\"nav-brand\">Validation</div>\n <a class=\"nav-link\" routerLink=\"./match-value\" routerLinkActive=\"active\">\n Match Value (Confirmation)\n </a>\n </div>\n </div>\n </nav>\n </div>\n <main class=\"col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 nav-content\">\n <div class=\"tab-content\">\n <div class=\"tab-pane active\" role=\"tabpanel\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n </div>\n</div>\n",
styles: [".bs-datepicker-body .selected,.bs-datepicker-head,.bs-datepicker-head button,.btn-primary,.nav-pills .nav-link.active{background-color:#07a;color:#efefef}[class*=btn-outline].btn-secondary,[class*=btn-outline][class*=primary]{border:1px solid #07a;color:#333}[class*=btn-outline].btn-secondary:hover,[class*=btn-outline][class*=primary]:hover{background-color:#07a;color:#efefef}[class*=btn-outline][class*=danger]{border:1px solid #dc3545;color:#dc3545}[class*=btn-outline][class*=danger]:hover{background-color:#dc3545;color:#fff}[class*=btn-outline][disabled]{color:#aaa;border-color:#aaa}.input-group [class*=btn-outline]{border-color:#ced4da;background-color:#e9ecef}.ui-select-bootstrap .ui-select-multiple .ui-select-match .close{line-height:.75!important}.ui-select-bootstrap .ui-select-multiple input.ui-select-search{padding:6px 12px!important}.ui-select-multiple .ui-select-match-item,[class*=btn-transparent]{background-color:transparent;border:1px solid transparent}.ui-select-multiple .ui-select-match-item .close,[class*=btn-transparent] .close{line-height:inherit}.ui-select-multiple .ui-select-match-item.btn-secondary,.ui-select-multiple .ui-select-match-item[class*=primary],[class*=btn-transparent].btn-secondary,[class*=btn-transparent][class*=primary]{color:#07a}.ui-select-multiple .ui-select-match-item.btn-secondary:hover,.ui-select-multiple .ui-select-match-item[class*=primary]:hover,[class*=btn-transparent].btn-secondary:hover,[class*=btn-transparent][class*=primary]:hover{border:1px solid #07a}.ui-select-multiple .ui-select-match-item.btn-secondary:active,.ui-select-multiple .ui-select-match-item[class*=primary]:active,[class*=btn-transparent].btn-secondary:active,[class*=btn-transparent][class*=primary]:active{background-color:#07a;color:#fff}.ui-select-multiple .ui-select-match-item[class*=danger],[class*=btn-transparent][class*=danger]{color:#dc3545}.ui-select-multiple .ui-select-match-item[class*=danger]:hover,[class*=btn-transparent][class*=danger]:hover{border:1px solid #dc3545}.ui-select-multiple .ui-select-match-item[class*=danger]:active,[class*=btn-transparent][class*=danger]:active{background-color:#dc3545;color:#fff}.ui-select-multiple .ui-select-match-item[disabled],[class*=btn-transparent][disabled]{color:#aaa;border-color:#aaa}.form-control.expandable{resize:both;min-height:100px;height:200px;overflow-y:auto;overflow-x:auto;padding:5px}.form-control.expandable.small-expandable{height:100px}.form-control.expandable.auto-expandable{height:auto}"]
},] },
];
FormsDemoComponent.ctorParameters = function () { return []; };
var CheckBoxDemoComponent = /** @class */ (function () {
function CheckBoxDemoComponent() {
this.model = {
ngModel: null,
name: 'testCheckBox',
isThreeState: false,
required: true,
state: 'off',
value: 'CHECK BOX IS CHECKED!'
};
this.markup = "\n<check-box\n [name]=\"model.name\"\n [required]=\"model.required\"\n [threeState]=\"model.isThreeState\"\n [checkedValue]=\"model.value\"\n [(ngModel)]=\"model.ngModel\"\n [(state)]=\"model.state\"\n label=\"Test Check Box\"></check-box>\n ";
}
return CheckBoxDemoComponent;
}());
CheckBoxDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.checkbox-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Check Box</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\" novalidate>\n <check-box [(ngModel)]=\"model.required\"\n name=\"required\"\n label=\"Is Required\"\n labelPlacement=\"after\"></check-box>\n <check-box [(ngModel)]=\"model.isThreeState\"\n name=\"threeState\"\n label=\"Is Three State\"\n labelPlacement=\"after\"></check-box>\n <check-box\n [name]=\"model.name\"\n [required]=\"model.required\"\n [threeState]=\"model.isThreeState\"\n [checkedValue]=\"model.value\"\n [(ngModel)]=\"model.ngModel\"\n [(state)]=\"model.state\"\n label=\"Test Check Box\">\n </check-box>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
CheckBoxDemoComponent.ctorParameters = function () { return []; };
var EmailDemoComponent = /** @class */ (function () {
function EmailDemoComponent() {
this.model = {
id: 'emailField',
name: 'emailField',
match: '',
required: false,
placeholder: 'Example Email Field',
value: ''
};
this.markup = "\n<email\n [name]=\"model.name\"\n label=\"Email Address\"\n [(ngModel)]=\"model.value\"\n [required]=\"model.required\"\n [placeholder]=\"model.placeholder\"></email>\n<email name=\"confirmEmail\" label=\"Confirm Email Address\"\n [(ngModel)]=\"model.match\"\n [matchValue]=\"{value:model.value,label:'Email Address'}\"\n [required]=\"true\"\n placeholder=\"Confirm Email\"></email>\n ";
}
return EmailDemoComponent;
}());
EmailDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.email-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Email Address</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <check-box [(ngModel)]=\"model.required\" name=\"required\" label=\"Is Required\" labelPlacement=\"after\"></check-box>\n <email\n [name]=\"model.name\"\n label=\"Email Address\"\n [(ngModel)]=\"model.value\"\n [parentFormGroup]=\"testForm.form\"\n [required]=\"model.required\"\n [placeholder]=\"model.placeholder\"></email>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
EmailDemoComponent.ctorParameters = function () { return []; };
var DatePickerDemoComponent = /** @class */ (function () {
function DatePickerDemoComponent() {
this.model = {
value: null,
required: false,
minDate: new Date(),
maxDate: new Date()
};
this.markup = "\n<date-picker\n name=\"testDatepicker\"\n label=\"Test Date Picker\"\n [(ngModel)]=\"model.value\"\n [required]=\"model.required\"\n [minDate]=\"model.minDate\"\n [maxDate]=\"model.maxDate\"></date-picker>\n ";
var minDate = new Date();
minDate.setMonth(minDate.getMonth() - 1);
var maxDate = new Date();
maxDate.setMonth(maxDate.getMonth() + 1);
this.model.minDate = minDate;
this.model.maxDate = maxDate;
}
return DatePickerDemoComponent;
}());
DatePickerDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.date-picker-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Date Picker</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <check-box [(ngModel)]=\"model.required\" name=\"required\" label=\"Is Required\" labelPlacement=\"after\"></check-box>\n <date-picker\n name=\"minDate\"\n label=\"Minimum Date\"\n [(ngModel)]=\"model.minDate\"></date-picker>\n <date-picker\n name=\"maxDate\"\n label=\"Maximum Date\"\n [(ngModel)]=\"model.maxDate\"></date-picker>\n <date-picker\n name=\"testDatepicker\"\n label=\"Test Date Picker\"\n [(ngModel)]=\"model.value\"\n [required]=\"model.required\"\n [minDate]=\"model.minDate\"\n [maxDate]=\"model.maxDate\"></date-picker>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<div class=\"alert alert-info\">\n Please include the following css file for the date picker styles.\n <pre class=\"card card-body bg-light\">/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css</pre>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
DatePickerDemoComponent.ctorParameters = function () { return []; };
var DropDownDemoComponent = /** @class */ (function () {
function DropDownDemoComponent() {
this.model = {
isMultiple: false,
icon: '',
required: false,
selected: null,
options: [
{ id: 1, text: 'Label 1' },
{ id: 2, text: 'Label 2' },
{ id: 3, text: 'Label 3' }
]
};
this.markup = "\n<drop-down\n [options]=\"model.options\"\n [selectBy]=\"'id'\"\n class=\"full-width\"\n name=\"testOptionList\"\n label=\"Test Option List\"\n [required]=\"model.required\"\n [(ngModel)]=\"model.selected\"\n [isMultiple]=\"model.isMultiple\"\n [placeholder]=\"'Select One...'\">\n <ng-template let-item>\n {{item.id}} - {{ item.text }}\n </ng-template>\n</drop-down>\n ";
}
return DropDownDemoComponent;
}());
DropDownDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.drop-down-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Drop Down (Select)</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\" novalidate>\n <check-box [(ngModel)]=\"model.required\" name=\"required\" label=\"Is Required\" labelPlacement=\"after\"></check-box>\n <check-box [(ngModel)]=\"model.isMultiple\" name=\"isMultiple\" label=\"Is Multiple\"\n labelPlacement=\"after\"></check-box>\n <text-box name=\"icon\" label=\"Icon\" [(ngModel)]=\"model.icon\"></text-box>\n <drop-down\n [options]=\"model.options\"\n [selectBy]=\"'id'\"\n class=\"full-width\"\n name=\"testOptionList\"\n label=\"Test Option List\"\n [icon]=\"model.icon\"\n [required]=\"model.required\"\n [(ngModel)]=\"model.selected\"\n [isMultiple]=\"model.isMultiple\"\n [placeholder]=\"'Select One...'\">\n <ng-template let-item>\n {{item.id}} - {{ item.text }}\n </ng-template>\n </drop-down>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
DropDownDemoComponent.ctorParameters = function () { return []; };
var IndexComponent = /** @class */ (function () {
function IndexComponent() {
}
return IndexComponent;
}());
IndexComponent.decorators = [
{ type: core.Component, args: [{
selector: 'index',
encapsulation: core.ViewEncapsulation.None,
template: ""
},] },
];
IndexComponent.ctorParameters = function () { return []; };
var NestedFieldDemoComponent = /** @class */ (function () {
function NestedFieldDemoComponent() {
this.model = {
required: false,
value: {
id: 1,
name: 'aha!',
children: [
{
id: 2,
name: 'aha child',
children: [
{
id: 3,
name: 'Hi!'
}
]
}
]
}
};
this.initialized = false;
this.markup = "\n ";
}
NestedFieldDemoComponent.prototype.ngOnInit = function () {
};
return NestedFieldDemoComponent;
}());
NestedFieldDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.nested-field-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Nested Field</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <nested-field [(ngModel)]=\"model.value\" name=\"nested-field\"></nested-field>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\" >{{ model ? (model | json) : '' }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
NestedFieldDemoComponent.ctorParameters = function () { return []; };
var NestedListDemoComponent = /** @class */ (function () {
function NestedListDemoComponent() {
this.model = {
nestedListNode: {
'id': 161,
'name': 'Senior Rehab Solutions',
'children': [{
'id': 1325,
'name': 'Adams Region',
'children': [{
'id': 249,
'name': 'Gainesville SC (Pecan Tree) - 123',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 250, 'name': 'Homestead of Denison - 173', 'children': [], 'state': 'off', 'parent': null }, {
'id': 244,
'name': 'Honey Grove Nursing Center - 106',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 245, 'name': 'Mullican Care Center (Savoy) - 107', 'children': [], 'state': 'off', 'parent': null }, {
'id': 246,
'name': 'Whitesboro Health & Rehab - 111',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 163,
'name': 'Bajaj Region',
'children': [{
'id': 190,
'name': 'Cottonwood Creek Nursing & Rehab - 167',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 257,
'name': 'Dripping Springs SC (Hill Country) - 120',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 197, 'name': 'Gracy Woods II Living Center - 906', 'children': [], 'state': 'off', 'parent': null }, {
'id': 198,
'name': 'Gracy Woods Nursing Center - 907',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 183, 'name': 'Hearthstone Health Center - 118', 'children': [], 'state': 'off', 'parent': null }, {
'id': 185,
'name': 'Marlandwood East SC - 141',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 186, 'name': 'Marlandwood West SC - 142', 'children': [], 'state': 'off', 'parent': null }, {
'id': 196,
'name': 'Norwegian Home and Health Center - 844',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 260, 'name': 'Oakcrest Manor Nursing Home - 809', 'children': [], 'state': 'off', 'parent': null }, {
'id': 258,
'name': 'Onion Creek SC - 131',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 194, 'name': 'Park Valley Inn Health Center - 188', 'children': [], 'state': 'off', 'parent': null }, {
'id': 182,
'name': 'Parkbend Health Center - 115',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 184, 'name': 'Sagebrook Health Center - 119', 'children': [], 'state': 'off', 'parent': null }, {
'id': 270,
'name': 'Saint Teresa Nursing & Rehab - 826',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 195, 'name': 'Seton Medical Center - 825', 'children': [], 'state': 'off', 'parent': null }, {
'id': 187,
'name': 'Trinity Round Rock - 145',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 334, 'name': 'West Oaks Austin - 154', 'children': [], 'state': 'off', 'parent': null }, {
'id': 188,
'name': 'Western Hills SC - 147',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 189, 'name': 'Weston Inn SC - 148', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 1335,
'name': 'Brown Region',
'children': [{ 'id': 1128, 'name': 'Cimarron El Paso - 858', 'children': [], 'state': 'off', 'parent': null }, {
'id': 1172,
'name': 'Grace Pointe Wellness Center - 861',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 1332, 'name': 'Mesa Hills Hospital - 863', 'children': [], 'state': 'off', 'parent': null }, {
'id': 273,
'name': 'Sierra Health Care Center - 850',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 269, 'name': 'Sierra Home Care & Hospice - 650', 'children': [], 'state': 'off', 'parent': null }, {
'id': 274,
'name': 'Sierra Vista Hospital - 854',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 1330,
'name': 'Coats Region',
'children': [{
'id': 652,
'name': 'Midland Care Connection - Ann - 855',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 653, 'name': 'Midland Care Connection - Perry - 856', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 166,
'name': 'Culpepper Region',
'children': [{
'id': 220,
'name': 'Alpine Rehabilitation Center SCC - 193',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 222,
'name': 'Booker T. Washington Rehabilitation Center SCC - 195',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 221,
'name': 'Bradford Rehabilitation Center SCC - 194',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 223,
'name': 'Colonial Oaks Rehabilitation Center SCC - 196',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 225,
'name': 'Normandie Rehabilitation Center SCC - 199',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 226,
'name': 'Pilgrim Manor Rehabilitation Center SCC - 200',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 227,
'name': 'Shreveport Manor Rehabilitation Center SCC - 201',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 224, 'name': 'Spring Lake Rehabilitation Center SCC - 198', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 167,
'name': 'Darby Region',
'children': [{ 'id': 232, 'name': 'Corsicana - Trisun - 172', 'children': [], 'state': 'off', 'parent': null }, {
'id': 230,
'name': 'Heritage Oaks Retirement Village - 170',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 231,
'name': 'Heritage Oaks West Retirement Village - 171',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 229, 'name': 'Hewitt SC - 132', 'children': [], 'state': 'off', 'parent': null }, {
'id': 233,
'name': 'Kemp Care Center - 812',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 234, 'name': 'Kerens Care Center - 813', 'children': [], 'state': 'off', 'parent': null }, {
'id': 235,
'name': 'Sunflower Park Health Care - 814',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 1328,
'name': 'Durham Region',
'children': [{
'id': 305,
'name': 'Denton Rehabilitation & Nursing Center - 846',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 248, 'name': 'Denton SC - 114', 'children': [], 'state': 'off', 'parent': null }, {
'id': 252,
'name': 'HCN Home Health @ Vintage - 11130',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 251,
'name': 'Premier Golden Heart Healthcare Services Home Health @ Vintage - 613',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 306,
'name': 'Prestonwood Rehabilitation & Nursing Center - 847',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 212, 'name': 'Victoria Gardens of Allen - 165', 'children': [], 'state': 'off', 'parent': null }, {
'id': 213,
'name': 'Victoria Gardens of Frisco - 176',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 247, 'name': 'Vintage Health Care (Denton) - 113', 'children': [], 'state': 'off', 'parent': null }, {
'id': 215,
'name': 'Vista Ridge Lewisville - 186',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 168,
'name': 'Gonzalez Region',
'children': [{
'id': 239,
'name': 'Pecan Valley Rehabilitation and Healthcare Center - 208',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 237, 'name': 'San Antonio SC - 160', 'children': [], 'state': 'off', 'parent': null }, {
'id': 236,
'name': 'Windcrest SC (73) - 149',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 1327,
'name': 'Inactive Facilities',
'children': [{ 'id': 299, 'name': 'Matlock Place - 834', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 1326,
'name': 'Johnson Region',
'children': [{
'id': 193,
'name': 'Hill Country Rehab & Nursing Center - 185',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 192, 'name': 'Indian Oaks Living Center - 184', 'children': [], 'state': 'off', 'parent': null }, {
'id': 191,
'name': 'Rosewood Retirement Community - 183',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 1160,
'name': 'Kaufman Region',
'children': [{ 'id': 211, 'name': 'Brownwood SC - 138', 'children': [], 'state': 'off', 'parent': null }, {
'id': 298,
'name': 'Graham Oaks Care Center - 817',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 216, 'name': 'Greenhill Villas Mt. Pleasant - 815', 'children': [], 'state': 'off', 'parent': null }, {
'id': 205,
'name': 'Jacksonville SC - 121',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 228, 'name': 'Midland SC - 122', 'children': [], 'state': 'off', 'parent': null }, {
'id': 217,
'name': 'Songbird Lodge - 818',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 206, 'name': 'Stallings Court Rehab - 128', 'children': [], 'state': 'off', 'parent': null }, {
'id': 207,
'name': 'Stephenville SC (Community) - 130',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 218, 'name': 'Whispering Pines Lodge (Longview) - 819', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 171,
'name': 'Master Region',
'children': [{ 'id': 253, 'name': 'Home Office - 100', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 174,
'name': 'Morris Region',
'children': [{
'id': 1129,
'name': 'Arbor Grace Wellness - 860',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 1173, 'name': 'Bender Terrace Nursing Home - 862', 'children': [], 'state': 'off', 'parent': null }, {
'id': 408,
'name': 'BrightPointe at Lytle Lake - 857',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 272,
'name': 'Los Alamos Retirement Community - 849',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 261, 'name': 'Northeast El Paso - Trisun - 174', 'children': [], 'state': 'off', 'parent': null }, {
'id': 1331,
'name': 'Onpointe at Home - 673',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 301,
'name': 'Silver Spring Rehabilitation, Health, Living Center - 838',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 262, 'name': 'Socorro SCC (Las Ventanas) - 210', 'children': [], 'state': 'off', 'parent': null }, {
'id': 271,
'name': 'St. Giles Nursing and Rehabilitation Center - 832',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 263,
'name': 'The Rehabilitation & Wellness Center of Dallas - 836',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 316, 'name': 'Windmill Nursing & Rehab Center - 164', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 175,
'name': 'Robinson Region',
'children': [{
'id': 266,
'name': 'Crest Medical Home Health @ Lakeside - 649',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 264, 'name': 'Lakeside - Trisun - 191', 'children': [], 'state': 'off', 'parent': null }, {
'id': 268,
'name': 'OnPointe at Mission Trails (Casa Rio Healthcare) - 821',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 267, 'name': 'River City Health Care - 820', 'children': [], 'state': 'off', 'parent': null }, {
'id': 265,
'name': 'Westover Hills Rehabilitation and Healthcare Center - 209',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 177,
'name': 'Thigpen Region',
'children': [{
'id': 276,
'name': 'Baytown Nursing & Rehab Center - 153',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 277,
'name': 'Cedar Bayou Nursing & Rehab Center - 155',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 286,
'name': 'Clear Brook Crossing Rehabilitation and Healthcare Center - 207',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 284, 'name': 'Cypress Glen - 181', 'children': [], 'state': 'off', 'parent': null }, {
'id': 278,
'name': 'La Hacienda Nursing & Rehab Center - 156',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 285, 'name': 'Lake Arthur Place - 182', 'children': [], 'state': 'off', 'parent': null }, {
'id': 283,
'name': 'Meadows of Orange - 180',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 280, 'name': 'Pasadena SC - 159', 'children': [], 'state': 'off', 'parent': null }, {
'id': 282,
'name': 'Summer Place Nursing & Rehab - 179',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 279,
'name': 'The Pointe Nursing & Rehab Center - 157',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 335,
'name': 'West Oaks Nursing & Rehab Center (Houston) - 163',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 336, 'name': 'Westwood SC (Houston) - 151', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 1329,
'name': 'Trammel Region',
'children': [{
'id': 293,
'name': 'Lake Pointe SC (Beacon Harbor) - 108',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 290, 'name': 'Rockwall Nursing Center - 101', 'children': [], 'state': 'off', 'parent': null }, {
'id': 292,
'name': 'Rowlett Health & Rehab - 105',
'children': [],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null
}, {
'id': 178,
'name': 'Vanek Region',
'children': [{
'id': 289,
'name': 'Brodie Ranch Nursing & Rehab Center - 162',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 288,
'name': 'Riverside Nursing & Rehab Center - 161',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 287, 'name': 'Stonebridge Health Center - 116', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 179,
'name': 'Walther Region',
'children': [{ 'id': 199, 'name': 'Apache Junction - 831', 'children': [], 'state': 'off', 'parent': null }, {
'id': 297,
'name': 'ARC Home Health @ Heartis - 671',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 204, 'name': 'Beltline SC - 110', 'children': [], 'state': 'off', 'parent': null }, {
'id': 300,
'name': 'Brookside Inn - 837',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 241, 'name': 'Crestwood Health & Rehab - 104', 'children': [], 'state': 'off', 'parent': null }, {
'id': 209,
'name': 'Crowley Nursing & Rehab. - 136',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 240, 'name': 'Dallas SC - 103', 'children': [], 'state': 'off', 'parent': null }, {
'id': 302,
'name': 'Forest Ridge Senior Living - 841',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 1185,
'name': 'Golden Years HomeCare Specialist, Inc - 672',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 202, 'name': 'Grandview Terrace - 852', 'children': [], 'state': 'off', 'parent': null }, {
'id': 208,
'name': 'Green Oaks Nursing & Rehab - 135',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 210, 'name': 'Harbor Lakes Plaza Nursing - 137', 'children': [], 'state': 'off', 'parent': null }, {
'id': 1186,
'name': 'Healthy Living at Home - Arizona LLC - 653',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 1187,
'name': 'Healthy Living at Home - Grandview - 654',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 296,
'name': 'Hertitage Home Health @ Heartis Arlington - 670',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 295, 'name': 'Holland Lake SCC - 217', 'children': [], 'state': 'off', 'parent': null }, {
'id': 304,
'name': 'Juliette Fowler Communities - 845',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 219, 'name': 'La Dora Nursing & Rehab - 824', 'children': [], 'state': 'off', 'parent': null }, {
'id': 203,
'name': 'La Loma Village - 853',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 1334, 'name': 'Lodge at Bear Creek - 865', 'children': [], 'state': 'off', 'parent': null }, {
'id': 1333,
'name': 'Onpointe Adora Midtown - 864',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 243, 'name': 'OnPointe Presby Dallas - 843', 'children': [], 'state': 'off', 'parent': null }, {
'id': 303,
'name': 'OnPointe TX Health Arlington - 842',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 554, 'name': 'Pacific Palms Healthcare - 859', 'children': [], 'state': 'off', 'parent': null }, {
'id': 242,
'name': 'Pleasant Manor - 112',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 201,
'name': 'Prescott Nursing and Rehabilitation Center - 851',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 291, 'name': 'Red Oak Health & Rehab - 102', 'children': [], 'state': 'off', 'parent': null }, {
'id': 200,
'name': 'Sierra Valley Rehab Center - 833',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 294, 'name': 'Stonegate SCC - 216', 'children': [], 'state': 'off', 'parent': null }, {
'id': 307,
'name': 'Texas Institute for Surgery - 848',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 214, 'name': 'Winters Park - 177', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 180,
'name': 'Wierzowiecki Region',
'children': [{ 'id': 309, 'name': 'Meadow Creek SC - 143', 'children': [], 'state': 'off', 'parent': null }, {
'id': 308,
'name': 'San Angelo SC - 124',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 310, 'name': 'Summer Regency SC (Regency House) - 146', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}, {
'id': 181,
'name': 'Williams Region',
'children': [{
'id': 254,
'name': 'Bandera Nursing & Rehab Center - 152',
'children': [],
'state': 'off',
'parent': null
}, {
'id': 256,
'name': 'Cibolo Creek Rehabilitation, Health, Living Center - 840',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 326, 'name': 'Cimarron Health & Rehab Center - 839', 'children': [], 'state': 'off', 'parent': null }, {
'id': 321,
'name': 'Coastal Palms - Trisun - 190',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 313, 'name': 'Corpus Christi SC - 140', 'children': [], 'state': 'off', 'parent': null }, {
'id': 324,
'name': 'Crest Medical at Avalon - 658',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 312, 'name': 'Edinburg SC - 139', 'children': [], 'state': 'off', 'parent': null }, {
'id': 322,
'name': 'Hunters Pond Rehabilitation and Healthcare Center - 206',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 255, 'name': 'Medina Valley Rehab - 835', 'children': [], 'state': 'off', 'parent': null }, {
'id': 238,
'name': 'Mesa Vista Inn Health Center - 166',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 311, 'name': 'Mission Nursing Rehab Center - 129', 'children': [], 'state': 'off', 'parent': null }, {
'id': 315,
'name': 'Mystic Park Nursing & Rehab Center - 158',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 317, 'name': 'River Ridge - Trisun - 168', 'children': [], 'state': 'off', 'parent': null }, {
'id': 320,
'name': 'Sundance Inn Health Center - 187',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 325, 'name': 'Tristar - Fredericksburg - 827', 'children': [], 'state': 'off', 'parent': null }, {
'id': 323,
'name': 'Valley Grande SCC - 215',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 318, 'name': 'Westwood - Trisun - 169', 'children': [], 'state': 'off', 'parent': null }, {
'id': 319,
'name': 'Windcrest Nursing and Rehabilitation (74) - 175',
'children': [],
'state': 'off',
'parent': null
}, { 'id': 314, 'name': 'Wurzbach SC - 150', 'children': [], 'state': 'off', 'parent': null }],
'state': 'off',
'parent': null
}],
'state': 'off',
'parent': null,
'text': 'Senior Rehab Solutions'
}
};
this.markup = "\n<nested-list\n [item]=\"model.nestedListNode\">\n</nested-list>\n ";
}
return NestedListDemoComponent;
}());
NestedListDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.nested-list-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Nested List</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <nested-list\n [item]=\"model.nestedListNode\">\n </nested-list>\n</div>\n<ul class=\"nav nav-tabs\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" data-toggle=\"tab\" href=\"#nested-list-markup\" role=\"tab\">\n HTML\n </a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" data-toggle=\"tab\" href=\"#nested-list-data\" role=\"tab\">\n Data\n </a>\n </li>\n</ul>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
NestedListDemoComponent.ctorParameters = function () { return []; };
var NestedCheckBoxDemoComponent = /** @class */ (function () {
function NestedCheckBoxDemoComponent() {
this.model = {
required: false,
selected: [],
options: []
};
this.initialized = false;
this.markup = "\n<nested-check-box\n [options]=\"model.options\"\n [(ngModel)]=\"model.selected\"\n [required]=\"model.required\"\n name=\"testList\"\n label=\"Test Nested Options\"\n [searchBy]=\"['name']\">\n</nested-check-box>\n ";
}
NestedCheckBoxDemoComponent.prototype.ngOnInit = function () {
var _this = this;
setTimeout(function () {
_this.model.options.splice(1, _this.model.options.length);
for (var i = 1; i < 50; i++) {
_this.model.options.push({
id: parseInt(i + "00"),
name: 'Test Parent ' + i,
children: [
{
id: parseInt(i + "10"),
name: 'Test Child 1',
children: [
{
id: parseInt(i + "11"),
name: 'Test Child of Child 1'
}
]
},
{
id: parseInt(i + "20"),
name: 'Test Child 2',
children: [
{
id: parseInt(i + "21"),
name: 'Test Child of Child 2'
}
]
},
{
id: parseInt(i + "30"),
name: 'Test Child 3',
children: [
{
id: parseInt(i + "31"),
name: 'Test Child of Child 3'
}
]
},
{
id: parseInt(i + "40"),
name: 'Test Child 4',
children: [
{
id: parseInt(i + "41"),
name: 'Test Child of Child 4'
}
]
}, {
id: parseInt(i + "50"),
name: 'Test Child 5',
children: [
{
id: parseInt(i + "51"),
name: 'Test Child of Child 5'
}
]
},
{
id: parseInt(i + "60"),
name: 'Test Child 6',
children: [
{
id: parseInt(i + "61"),
name: 'Test Child of Child 6'
}
]
},
{
id: parseInt(i + "70"),
name: 'Test Child 7',
children: [
{
id: parseInt(i + "71"),
name: 'Test Child of Child 7'
}
]
},
{
id: parseInt(i + "80"),
name: 'Test Child 8',
children: [
{
id: parseInt(i + "81"),
name: 'Test Child of Child 8'
}
]
}
]
});
_this.initialized = true;
}
}, 500);
};
return NestedCheckBoxDemoComponent;
}());
NestedCheckBoxDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.nested-check-box-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Nested Check Box</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <check-box [(ngModel)]=\"model.required\"\n name=\"required\"\n label=\"Is Required\"\n labelPlacement=\"after\"></check-box>\n <nested-check-box\n [options]=\"model.options\"\n [(ngModel)]=\"model.selected\"\n [required]=\"model.required\"\n name=\"testList\"\n label=\"Test Nested Options\"\n [selectBy]=\"'id'\"\n [searchBy]=\"['name']\">\n </nested-check-box>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\" *ngIf=\"initialized\">{{ model ? (model | json) : '' }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
NestedCheckBoxDemoComponent.ctorParameters = function () { return []; };
var PhoneDemoComponent = /** @class */ (function () {
function PhoneDemoComponent() {
this.model = {
id: 'phoneField',
name: 'phoneField',
required: false,
value: '111-222-3333'
};
this.markup = "\n<phone [name]=\"model.name\"\n label=\"Phone Number\"\n [(ngModel)]=\"model.value\"\n [parentFormGroup]=\"testForm.form\"\n [required]=\"model.required\"></phone>\n ";
}
return PhoneDemoComponent;
}());
PhoneDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.phone-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Email Address</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <check-box [(ngModel)]=\"model.required\" name=\"required\" label=\"Is Required\" labelPlacement=\"after\"></check-box>\n <phone [name]=\"model.name\"\n label=\"Phone Number\"\n [(ngModel)]=\"model.value\"\n [parentFormGroup]=\"testForm.form\"\n [required]=\"model.required\"></phone>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
PhoneDemoComponent.ctorParameters = function () { return []; };
var RadioDemoComponent = /** @class */ (function () {
function RadioDemoComponent() {
this.model = {
name: 'testRadio',
required: false,
horizontal: false,
value: '',
options: [
{
label: 'Option 1',
value: 'option-1'
},
{
label: 'Option 2',
value: 'option-2'
},
{
label: 'Option 3',
value: 'option-3'
}
]
};
this.markup = "\n<radio-group [name]=\"model.name\"\n label=\"Test Radio Group\"\n [options]=\"model.options\"\n [required]=\"model.required\"\n [(ngModel)]=\"model.value\">\n</radio-group>\n ";
}
return RadioDemoComponent;
}());
RadioDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.radio-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Radio Buttons</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\" novalidate>\n <check-box [(ngModel)]=\"model.required\"\n name=\"required\"\n label=\"Is Required\"\n labelPlacement=\"after\"></check-box>\n <check-box [(ngModel)]=\"model.horizontal\"\n name=\"horizontal\"\n label=\"Is Horizontal\"\n labelPlacement=\"after\"></check-box>\n <radio-group [name]=\"model.name\"\n label=\"Test Radio Group\"\n [direction]=\"model.horizontal ? 'horizontal' : 'vertical'\"\n [options]=\"model.options\"\n [required]=\"model.required\"\n [(ngModel)]=\"model.value\">\n </radio-group>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
RadioDemoComponent.ctorParameters = function () { return []; };
var TextBoxDemoComponent = /** @class */ (function () {
function TextBoxDemoComponent() {
this.model = {
name: 'textBoxField',
icon: '',
type: 'text',
shouldMatch: false,
match: '',
required: false,
placeholder: 'Example Text Field',
value: ''
};
this.markup = "\n<text-box\n [name]=\"model.name\"\n [type]=\"model.type\"\n label=\"Test Text Field\"\n [(ngModel)]=\"model.value\"\n [matchValue]=\"model.shouldMatch ? {value:model.match,label:'Matching Field'} : null\"\n [required]=\"model.required\"\n [placeholder]=\"model.placeholder\">\n <div class=\"input-group-prepend\" *ngIf=\"model.icon.length > 0\">\n <span class=\"input-group-text\">\n <span class=\"fa fa-{{model.icon}}\"></span>\n </span>\n </div>\n</text-box>\n ";
}
return TextBoxDemoComponent;
}());
TextBoxDemoComponent.decorators = [
{ type: core.Component, args: [{
selector: '.text-box-demo',
encapsulation: core.ViewEncapsulation.None,
template: "<h4>Text Box</h4>\n<h5>Example</h5>\n<div class=\"card card-body bg-light form-group\">\n <form #testForm=\"ngForm\">\n <check-box [(ngModel)]=\"model.required\" name=\"required\" label=\"Is Required\" labelPlacement=\"after\"></check-box>\n <check-box name=\"shouldMatch\" label=\"Should Match Matching Field\" [(ngModel)]=\"model.shouldMatch\"\n labelPlacement=\"after\"></check-box>\n <text-box name=\"match\" label=\"Matching Field\" [(ngModel)]=\"model.match\"></text-box>\n <text-box name=\"icon\" label=\"Icon\" [(ngModel)]=\"model.icon\"></text-box>\n <div class=\"clearfix\"></div>\n <text-box\n [name]=\"model.name\"\n [type]=\"model.type\"\n label=\"Test Text Field\"\n [(ngModel)]=\"model.value\"\n [matchValue]=\"model.shouldMatch ? {value:model.match,label:'Matching Field'} : null\"\n [required]=\"model.required\"\n [placeholder]=\"model.placeholder\">\n <div class=\"input-group-prepend\" *ngIf=\"model.icon.length > 0\">\n <span class=\"input-group-text\">\n <span class=\"fa fa-{{model.icon}}\"></span>\n </span>\n </div>\n </text-box>\n <submit-button label=\"Submit\" [formGroup]=\"testForm.form\"></submit-button>\n </form>\n</div>\n<h5>Data Model</h5>\n<pre class=\"card card-body bg-light\">{{ model | json }}</pre>\n<h5>Markup</h5>\n<pre class=\"card card-body bg-light\">{{ markup }}</pre>\n"
},] },
];
TextBoxDemoComponent.ctorParameters = function () { return []; };
var routes = [
{
path: 'forms',
component: FormsDemoComponent,
children: [
{
path: '',
component: IndexComponent
},
{
path: 'check-box',
component: CheckBoxDemoComponent
},
{
path: 'phone',
component: PhoneDemoComponent
},
{
path: 'match-value',
component: ConfirmationDemoComponent
},
{
path: 'date-picker',
component: DatePickerDemoComponent
},
{
path: 'drop-down',
component: DropDownDemoComponent
},
{
path: 'nested-list',
component: NestedListDemoComponent
},
{
path: 'nested-field',
component: NestedFieldDemoComponent
},
{
path: 'nested-check-box',
component: NestedCheckBoxDemoComponent
},
{
path: 'email',
component: EmailDemoComponent
},
{
path: 'text-box',
component: TextBoxDemoComponent
},
{
path: 'radio',
component: RadioDemoComponent
}
]
}
];
var FormsDemoModule = /** @class */ (function () {
function FormsDemoModule() {
}
return FormsDemoModule;
}());
FormsDemoModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
IndexComponent,
FormsDemoComponent,
CheckBoxDemoComponent,
ConfirmationDemoComponent,
DatePickerDemoComponent,
DropDownDemoComponent,
NestedListDemoComponent,
NestedCheckBoxDemoComponent,
EmailDemoComponent,
TextBoxDemoComponent,
RadioDemoComponent,
PhoneDemoComponent,
NestedFieldDemoComponent
],
imports: [
common.CommonModule,
NgFormsModule,
router.RouterModule.forChild(routes)
],
exports: [
router.RouterModule
],
providers: [],
bootstrap: []
},] },
];
FormsDemoModule.ctorParameters = function () { return []; };
exports.NgFormsModule = NgFormsModule;
exports.CheckBoxComponent = CheckBoxComponent;
exports.DatePickerComponent = DatePickerComponent;
exports.NestedListComponent = NestedListComponent;
exports.NestedCheckBoxComponent = NestedCheckBoxComponent;
exports.DropDownComponent = DropDownComponent;
exports.RadioGroupComponent = RadioGroupComponent;
exports.RadioComponent = RadioComponent;
exports.TextBoxComponent = TextBoxComponent;
exports.EmailComponent = EmailComponent;
exports.NgFormControl = NgFormControl;
exports.SubmitButtonComponent = SubmitButtonComponent;
exports.ValidationMessagesComponent = ValidationMessagesComponent;
exports.FormValidationMessagesComponent = FormValidationMessagesComponent;
exports.MatchValueValidator = MatchValueValidator;
exports.RequiredCheckBoxValidator = RequiredCheckBoxValidator;
exports.ValidatorMessenger = ValidatorMessenger;
exports.BaseValueAccessor = BaseValueAccessor;
exports.MultiSelector = MultiSelector;
exports.Selector = Selector;
exports.Searcher = Searcher;
exports.SingleSelector = SingleSelector;
exports.MultiSelectorMock = MultiSelectorMock;
exports.SelectorMock = SelectorMock;
exports.SelectorShunt = SelectorShunt;
exports.routes = routes;
exports.FormsDemoModule = FormsDemoModule;
exports.FormsDemoComponent = FormsDemoComponent;
exports.ɵg = CheckBoxDemoComponent;
exports.ɵi = ConfirmationDemoComponent;
exports.ɵj = DatePickerDemoComponent;
exports.ɵk = DropDownDemoComponent;
exports.ɵo = EmailDemoComponent;
exports.ɵf = IndexComponent;
exports.ɵn = NestedCheckBoxDemoComponent;
exports.ɵm = NestedFieldDemoComponent;
exports.ɵl = NestedListDemoComponent;
exports.ɵh = PhoneDemoComponent;
exports.ɵq = RadioDemoComponent;
exports.ɵp = TextBoxDemoComponent;
exports.ɵe = NestedFieldComponent;
exports.ɵb = PhoneComponent;
exports.ɵc = TabComponent;
exports.ɵd = Activatable;
exports.ɵa = FormConfig;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-ui-libraries-forms.umd.js.map