@ng-ui-libraries/forms
Version:
3,213 lines • 234 kB
JavaScript
import { __decorate, __metadata, __extends, __values, __spread } from 'tslib';
import { EventEmitter, ViewEncapsulation, Component, Input, Injector, Inject, ViewChild, ElementRef, Directive, forwardRef, Output, ContentChild, TemplateRef, HostListener, Injectable, NgModule } from '@angular/core';
import { NG_VALIDATORS, NgControl, FormControl, FormGroup, NG_VALUE_ACCESSOR, RequiredValidator, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OnChange, SiteConfig, Value, Async, UnsubscribeAll, ValueInterpreter } from '@ng-app-framework/core';
import { Observable } from 'rxjs/Rx';
import 'ngx-bootstrap/datepicker';
import { MatButtonModule, MatCheckboxModule, MatInputModule, MatRadioModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SafePipeModule } from 'safe-pipe';
import { BsDatepickerModule } from 'ngx-bootstrap';
import { CommonModule } from '@angular/common';
import { NgSelectModule } from '@ng-select/ng-select';
import { RouterModule } from '@angular/router';
var FormConfig = /** @class */ (function () {
function FormConfig() {
this.showRequiredAsterisk = true;
}
return FormConfig;
}());
var BaseValueAccessor = /** @class */ (function () {
function BaseValueAccessor() {
this.changed = [];
this.touched = [];
this.valueChange = new 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 EventEmitter();
_this.disabledChange = new EventEmitter();
_this.onDestroy$ = new EventEmitter();
_this.initialized = false;
_this.initializedChange = new 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(NG_VALIDATORS, []));
this.model = this.injector.get(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;
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 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 Observable.of(this.failures);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "invalid$", {
get: function () {
return Observable.of(this.invalid);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgFormControl.prototype, "touched$", {
get: function () {
return 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([
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 : 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;
}
Observable.fromEvent(this.input.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe(function (event) {
_this.close();
});
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: 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: NG_VALUE_ACCESSOR,
useExisting: DatePickerComponent,
multi: true
}
],
encapsulation: ViewEncapsulation.None
},] },
];
DatePickerComponent.ctorParameters = function () { return [
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] },] },
{ type: FormConfig, },
]; };
DatePickerComponent.propDecorators = {
"name": [{ type: Input },],
"label": [{ type: Input },],
"theme": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"minDate": [{ type: Input },],
"maxDate": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"placeholder": [{ type: Input },],
"placement": [{ type: Input },],
"input": [{ type: ViewChild, args: ['input',] },],
"datePicker": [{ type: 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;
}(RequiredValidator));
RequiredCheckBoxValidator.decorators = [
{ type: Directive, args: [{
selector: 'check-box[ngModel][required]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(function () { return RequiredCheckBoxValidator; }),
multi: true
}],
host: { '[attr.required]': 'required ? "" : null' }
},] },
];
RequiredCheckBoxValidator.ctorParameters = function () { return []; };
RequiredCheckBoxValidator.propDecorators = {
"required": [{ type: 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 EventEmitter();
_this.requiredChange = new EventEmitter();
_this.stateChange = new EventEmitter();
_this.identifier = "check-box-" + identifier$1++;
_this.onInit = new 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();
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: 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: NG_VALUE_ACCESSOR,
useExisting: CheckBoxComponent,
multi: true
}
],
encapsulation: ViewEncapsulation.None
},] },
];
CheckBoxComponent.ctorParameters = function () { return [
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] },] },
{ type: FormConfig, },
]; };
CheckBoxComponent.propDecorators = {
"state": [{ type: Input },],
"name": [{ type: Input },],
"label": [{ type: Input },],
"labelPlacement": [{ type: Input },],
"checkedValue": [{ type: Input },],
"disabled": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"required": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"threeState": [{ type: Input },],
"threeStateChange": [{ type: Output },],
"stateChange": [{ type: Output },],
"checkbox": [{ type: ViewChild, args: ['checkbox',] },],
"element": [{ type: ViewChild, args: ['element',] },],
"onInit": [{ type: Output },],
};
__decorate([
OnChange,
__metadata("design:type", Object)
], CheckBoxComponent.prototype, "state", void 0);
__decorate([
OnChange,
__metadata("design:type", Boolean)
], CheckBoxComponent.prototype, "required", void 0);
__decorate([
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 EventEmitter();
this.onDrop = new 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 (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 Observable.from(item.children)
.flatMap(function (child) {
_this.initializeMetadata(child, item);
child.$parentMatches = item.$matches || item.$parentMatches;
return 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 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 Async.getObservableForValue$(true);
}
return Async.getObservableForValue$(false);
};
NestedSearcher.prototype.doesItemMatchSearch$ = function (item) {
if (this.doesItemMatchSearch(item)) {
return Async.getObservableForValue$(true);
}
return this.areAnyChildrenFound$(item);
};
NestedSearcher.prototype.areAnyChildrenFound$ = function (item) {
if (Value.hasArrayElements(item.children)) {
return this.doAnyChildrenMatchSearch$(item);
}
return Async.getObservableForValue$(false);
};
NestedSearcher.prototype.doAnyChildrenMatchSearch$ = function (item) {
var _this = this;
return 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: 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: NG_VALUE_ACCESSOR,
useExisting: NestedFieldComponent,
multi: true
}],
encapsulation: ViewEncapsulation.None
},] },
];
NestedFieldComponent.ctorParameters = function () { return [
{ type: Injector, },
]; };
NestedFieldComponent.propDecorators = {
"name": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"label": [{ type: Input },],
"placeholder": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"labelPlacement": [{ type: Input },],
"selectBy": [{ type: Input },],
"searchBy": [{ type: Input },],
};
__decorate([
OnChange,
__metadata("design:type", Boolean)
], NestedFieldComponent.prototype, "required", void 0);
__decorate([
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 EventEmitter();
this.onExpandAll = new EventEmitter();
this.searchBy = ['name'];
this.collapseButton = true;
this.showLines = true;
this.isTop = true;
this.onDestroy$ = new EventEmitter();
this.searchable = true;
this.containerClass = '';
}
NestedListComponent.prototype.ngOnInit = function () {
var _this = this;
if (!this.searcher) {
this.searcher = new NestedSearcher(this.searchBy);
}
var stopListening = 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 && 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: 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: ViewEncapsulation.None
},] },
];
NestedListComponent.ctorParameters = function () { return []; };
NestedListComponent.propDecorators = {
"item": [{ type: Input },],
"template": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
"collapsed": [{ type: Input },],
"initialCollapse": [{ type: Input },],
"onCollapseAll": [{ type: Input },],
"onExpandAll": [{ type: Input },],
"searchBy": [{ type: Input },],
"collapseButton": [{ type: Input },],
"showLines": [{ type: Input },],
"isTop": [{ type: Input },],
"searcher": [{ type: Input },],
"searchable": [{ type: Input },],
"containerClass": [{ type: 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 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 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: 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: NG_VALUE_ACCESSOR,
useExisting: DropDownComponent,
multi: true
}
],
encapsulation: ViewEncapsulation.None
},] },
];
DropDownComponent.ctorParameters = function () { return [
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] },] },
{ type: FormConfig, },
]; };
DropDownComponent.propDecorators = {
"template": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
"isMultiple": [{ type: Input },],
"inInputGroup": [{ type: Input },],
"name": [{ type: Input },],
"label": [{ type: Input },],
"appendTo": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"placeholder": [{ type: Input },],
"options": [{ type: Input },],
"selectBy": [{ type: Input },],
"labelField": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"typeahead": [{ type: Input },],
"icon": [{ type: Input },],
"iconPlacement": [{ type: 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 EventEmitter();
_this.onExpandAll = new 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 Observable.of(this.searcher.isTermLongEnough() && this.searcher.doesItemMatchSearch(item)).debounceTime(500);
};
NestedCheckBoxComponent.prototype.hasChildren = function (item) {
return 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 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 Observable.from([child]).concat(_this.updateChildren$(child));
}
return _this.updateChildren$(child);
}
if (_this.selection[child[_this.selectBy]]) {
return Observable.from([child]);
}
return Observable.from([]);
});
};
return NestedCheckBoxComponent;
}(NgFormControl));
NestedCheckBoxComponent.decorators = [
{ type: 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: NG_VALUE_ACCESSOR,
useExisting: NestedCheckBoxComponent,
multi: true
}],
encapsulation: ViewEncapsulation.None
},] },
];
NestedCheckBoxComponent.ctorParameters = function () { return [
{ type: Injector, },
]; };
NestedCheckBoxComponent.propDecorators = {
"name": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"label": [{ type: Input },],
"placeholder": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"labelPlacement": [{ type: Input },],
"options": [{ type: Input },],
"selectBy": [{ type: Input },],
"searchBy": [{ type: Input },],
};
__decorate([
OnChange,
__metadata("design:type", Boolean)
], NestedCheckBoxComponent.prototype, "required", void 0);
__decorate([
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 EventEmitter();
_this.inputClick = new EventEmitter();
_this.inputFocusOut = new EventEmitter();
_this.inputFocus = new 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;
}
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: 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: NG_VALUE_ACCESSOR,
useExisting: TextBoxComponent,
multi: true
}],
encapsulation: ViewEncapsulation.None
},] },
];
TextBoxComponent.ctorParameters = function () { return [
{ type: Injector, },
{ type: FormConfig, },
]; };
TextBoxComponent.propDecorators = {
"name": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"label": [{ type: Input },],
"placeholder": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"showErrors": [{ type: Input },],
"autocomplete": [{ type: Input },],
"click": [{ type: Output },],
"inputClick": [{ type: Output },],
"inputFocusOut": [{ type: Output },],
"inputFocus": [{ type: Output },],
"disableLastPass": [{ type: Input },],
"type": [{ type: Input },],
"autofocus": [{ type: Input },],
"autocorrect": [{ type: Input },],
"autocapitalize": [{ type: Input },],
"spellcheck": [{ type: Input },],
"format": [{ type: Input },],
"input": [{ type: ViewChild, args: ['input',] },],
};
__decorate([
OnChange,
__metadata("design:type", Boolean)
], TextBoxComponent.prototype, "required", void 0);
__decorate([
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 ? 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: 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: NG_VALUE_ACCESSOR,
useExisting: EmailComponent,
multi: true
}],
encapsulation: ViewEncapsulation.None
},] },
];
EmailComponent.ctorParameters = function () { return [
{ type: Injector, },
{ type: FormConfig, },
]; };
EmailComponent.propDecorators = {
"name": [{ type: Input },],
"required": [{ type: Input },],
"disabled": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"label": [{ type: Input },],
"placeholder": [{ type: Input },],
"shouldValidate": [{ type: Input },],
"textBox": [{ type: ViewChild, args: ['textBox',] },],
};
__decorate([
OnChange,
__metadata("design:type", Boolean)
], EmailComponent.prototype, "required", void 0);
__decorate([
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 = ([
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: 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: ViewEncapsulation.None,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: PhoneComponent,
multi: true
}]
},] },
];
PhoneComponent.ctorParameters = function () { return [
{ type: Injector, },
]; };
PhoneComponent.propDecorators = {
"name": [{ type: Input },],
"label": [{ type: Input },],
"disabled": [{ type: Input },],
"required": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: 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 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;
}
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: 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: NG_VALUE_ACCESSOR,
useExisting: RadioComponent,
multi: true
}
],
encapsulation: ViewEncapsulation.None
},] },
];
RadioComponent.ctorParameters = function () { return [
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] },] },
]; };
RadioComponent.propDecorators = {
"name": [{ type: Input },],
"label": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"labelPlacement": [{ type: Input },],
"checkedValue": [{ type: Input },],
"disabled": [{ type: Input },],
"onTouch": [{ type: Output },],
"element": [{ type: 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: 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: NG_VALUE_ACCESSOR,
useExisting: RadioGroupComponent,
multi: true
}
],
encapsulation: ViewEncapsulation.None
},] },
];
RadioGroupComponent.ctorParameters = function () { return [
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] },] },
{ type: FormConfig, },
]; };
RadioGroupComponent.propDecorators = {
"state": [{ type: Input },],
"name": [{ type: Input },],
"label": [{ type: Input },],
"disabled": [{ type: Input },],
"bindLabel": [{ type: Input },],
"bindValue": [{ type: Input },],
"required": [{ type: Input },],
"direction": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
"options": [{ type: Input },],
};
__decorate([
OnChange,
__metadata("design:type", Object)
], RadioGroupComponent.prototype, "state", void 0);
__decorate([
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 EventEmitter();
}
TabComponent.prototype.log = function ($event) {
console.log($event.key);
};
return TabComponent;
}());
TabComponent.decorators = [
{ type: 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: ViewEncapsulation.None,
},] },
];
TabComponent.ctorParameters = function () { return []; };
TabComponent.propDecorators = {
"isActive": [{ type: Input },],
"trigger": [{ type: Output },],
};
var Activatable = /** @class */ (function () {
function Activatable(el) {
this.el = el;
this.activate = new 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: Directive, args: [{
selector: '[tabindex]:not(input)',
outputs: ['activate']
},] },
];
Activatable.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
Activatable.propDecorators = {
"onKeyUp": [{ type: HostListener, args: ['keyup', ['$event'],] },],
"onMouseUp": [{ type: 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: 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: 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: 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: 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: 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: Input },],
"label": [{ type: Input },],
};
var SubmitButtonComponent = /** @class */ (function () {
function SubmitButtonComponent() {
this.icon = '';
this.iconPlacement = 'before';
this.label = '';
this.onSubmit = new EventEmitter();
this.identifier = "submit-" + identifier$7++;
this.onDestroy$ = new EventEmitter();
this.inFormGroup = true;
}
SubmitButtonComponent.prototype.getId = function () {
return this.identifier;
};
SubmitButtonComponent.prototype.ngOnInit = function () {
var _this = this;
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 FormControl) {
control.markAsTouched();
}
else if (control instanceof FormGroup) {
_this.validateAllFormFields(control);
}
});
};
return SubmitButtonComponent;
}());
SubmitButtonComponent.decorators = [
{ type: 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: ViewEncapsulation.None
},] },
];
SubmitButtonComponent.ctorParameters = function () { return []; };
SubmitButtonComponent.propDecorators = {
"icon": [{ type: Input },],
"iconPlacement": [{ type: Input },],
"label": [{ type: Input },],
"formGroup": [{ type: Input },],
"onSubmit": [{ type: Output },],
"button": [{ type: ViewChild, args: ['button',] },],
"inFormGroup": [{ type: 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: Directive, args: [{
selector: '[matchValue]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(function () { return MatchValueValidator; }),
multi: true
}]
},] },
];
MatchValueValidator.ctorParameters = function () { return [
{ type: ValidatorMessenger, },
]; };
MatchValueValidator.propDecorators = {
"matchValue": [{ type: 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: NgModule, args: [{
declarations: [
DatePickerComponent,
CheckBoxComponent,
NestedListComponent,
NestedCheckBoxComponent,
DropDownComponent,
EmailComponent,
ValidationMessagesComponent,
FormValidationMessagesComponent,
RequiredCheckBoxValidator,
SubmitButtonComponent,
TextBoxComponent,
MatchValueValidator,
RadioGroupComponent,
RadioComponent,
PhoneComponent,
TabComponent,
Activatable,
NestedFieldComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatButtonModule,
MatInputModule,
MatRadioModule,
NgSelectModule,
BsDatepickerModule.forRoot(),
SafePipeModule
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
NestedListComponent,
NestedCheckBoxComponent,
DatePickerComponent,
CheckBoxComponent,
DropDownComponent,
EmailComponent,
SubmitButtonComponent,
TextBoxComponent,
MatchValueValidator,
RadioGroupComponent,
RadioComponent,
PhoneComponent,
TabComponent,
Activatable,
ValidationMessagesComponent,
FormValidationMessagesComponent,
NestedFieldComponent,
MatCheckboxModule,
MatButtonModule,
MatInputModule,
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 EventEmitter();
this.onDeselect = new EventEmitter();
this.selected = null;
this.selectedChange = new EventEmitter();
this.interpreter = new 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([
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 Async.forEach$(this.options, function (option) { return _this.select(option); });
};
MultiSelector.prototype.deselectAll$ = function () {
var _this = this;
return 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 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: Component, args: [{
selector: '.confirmation-demo',
encapsulation: 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: Component, args: [{
selector: 'forms-demo',
encapsulation: 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: Component, args: [{
selector: '.checkbox-demo',
encapsulation: 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: Component, args: [{
selector: '.email-demo',
encapsulation: 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: Component, args: [{
selector: '.date-picker-demo',
encapsulation: 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: Component, args: [{
selector: '.drop-down-demo',
encapsulation: 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: Component, args: [{
selector: 'index',
encapsulation: 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: Component, args: [{
selector: '.nested-field-demo',
encapsulation: 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: Component, args: [{
selector: '.nested-list-demo',
encapsulation: 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: Component, args: [{
selector: '.nested-check-box-demo',
encapsulation: 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: Component, args: [{
selector: '.phone-demo',
encapsulation: 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: Component, args: [{
selector: '.radio-demo',
encapsulation: 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: Component, args: [{
selector: '.text-box-demo',
encapsulation: 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: NgModule, args: [{
declarations: [
IndexComponent,
FormsDemoComponent,
CheckBoxDemoComponent,
ConfirmationDemoComponent,
DatePickerDemoComponent,
DropDownDemoComponent,
NestedListDemoComponent,
NestedCheckBoxDemoComponent,
EmailDemoComponent,
TextBoxDemoComponent,
RadioDemoComponent,
PhoneDemoComponent,
NestedFieldDemoComponent
],
imports: [
CommonModule,
NgFormsModule,
RouterModule.forChild(routes)
],
exports: [
RouterModule
],
providers: [],
bootstrap: []
},] },
];
FormsDemoModule.ctorParameters = function () { return []; };
export { NgFormsModule, CheckBoxComponent, DatePickerComponent, NestedListComponent, NestedCheckBoxComponent, DropDownComponent, RadioGroupComponent, RadioComponent, TextBoxComponent, EmailComponent, NgFormControl, SubmitButtonComponent, ValidationMessagesComponent, FormValidationMessagesComponent, MatchValueValidator, RequiredCheckBoxValidator, ValidatorMessenger, BaseValueAccessor, MultiSelector, Selector, Searcher, SingleSelector, MultiSelectorMock, SelectorMock, SelectorShunt, routes, FormsDemoModule, FormsDemoComponent, CheckBoxDemoComponent as ɵg, ConfirmationDemoComponent as ɵi, DatePickerDemoComponent as ɵj, DropDownDemoComponent as ɵk, EmailDemoComponent as ɵo, IndexComponent as ɵf, NestedCheckBoxDemoComponent as ɵn, NestedFieldDemoComponent as ɵm, NestedListDemoComponent as ɵl, PhoneDemoComponent as ɵh, RadioDemoComponent as ɵq, TextBoxDemoComponent as ɵp, NestedFieldComponent as ɵe, PhoneComponent as ɵb, TabComponent as ɵc, Activatable as ɵd, FormConfig as ɵa };
//# sourceMappingURL=ng-ui-libraries-forms.js.map