@ng-ui-libraries/forms
Version:
4,864 lines • 230 kB
JavaScript
import { EventEmitter, ViewEncapsulation, Component, Input, Injector, Inject, ViewChild, ElementRef, Directive, forwardRef, Output, ContentChild, TemplateRef, HostListener, Injectable, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
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';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class FormConfig {
constructor() {
this.showRequiredAsterisk = true;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
* @template T
*/
class BaseValueAccessor {
constructor() {
this.changed = [];
this.touched = [];
this.valueChange = new EventEmitter();
}
/**
* @return {?}
*/
get value() {
return this.innerValue;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this.updateInnerValue(value);
}
/**
* @param {?} value
* @return {?}
*/
updateInnerValue(value) {
let /** @type {?} */ isDifferent = this.innerValue !== value;
this.innerValue = value;
if (isDifferent) {
this.changed.forEach(f => f(value));
this.valueChange.emit(value);
}
}
/**
* @return {?}
*/
touch() {
this.touched.forEach(f => f());
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.innerValue = value;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.changed.push(fn);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.touched.push(fn);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
* @template T
*/
class NgFormControl extends BaseValueAccessor {
/**
* @param {?} injector
*/
constructor(injector) {
super();
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 {?}
*/
ngOnDestroy() {
this.onDestroy$.emit();
}
/**
* @return {?}
*/
ngOnInit() {
try {
this.validators = /** @type {?} */ (this.injector.get(NG_VALIDATORS, []));
this.model = this.injector.get(NgControl);
this.setupControl();
this.startValidating();
setTimeout(() => {
this.initialized = true;
setTimeout(() => this.onLoad(), 100);
});
}
catch (/** @type {?} */ e) {
throw new Error("[(ngModel)] was not provided");
}
}
/**
* @return {?}
*/
setupControl() {
this.control = this.parentFormControl ? this.parentFormControl : this.model.control;
this.value = this.control.value;
this.control['label'] = this.label;
setTimeout(() => {
if (this.parentFormGroup) {
this.parentFormGroup.addControl(this.name, this.control);
}
});
}
/**
* @return {?}
*/
startValidating() {
this.shouldValidate = this.shouldValidate.toString() === 'true' || this.shouldValidate === true;
if (this.shouldValidate) {
this.control.setValidators(/** @type {?} */ (this.validators.concat(this.additionalValidators || [])));
}
this.validateOnInterval();
}
/**
* @return {?}
*/
validateOnInterval() {
Observable.interval(1000)
.takeUntil(this.onDestroy$)
.subscribe(() => {
this.validate();
});
}
/**
* @return {?}
*/
touch() {
super.touch();
if (!this.isTouched()) {
this.control.markAsTouched();
}
}
/**
* @return {?}
*/
validate() {
if (this.isTouched()) {
this.control.updateValueAndValidity();
}
}
/**
* @return {?}
*/
isInvalid$() {
return Observable.of(this.invalid && this.isTouched());
}
/**
* @return {?}
*/
isTouched() {
return this.control && this.control.touched;
}
/**
* @return {?}
*/
get failures() {
return this.control ? this.control.errors : null;
}
/**
* @return {?}
*/
get failures$() {
return Observable.of(this.failures);
}
/**
* @return {?}
*/
get invalid$() {
return Observable.of(this.invalid);
}
/**
* @return {?}
*/
get touched$() {
return Observable.of(this.isTouched());
}
/**
* @return {?}
*/
get invalid() {
if (this.failures && !this.control.invalid) {
setTimeout(() => {
this.control.setErrors(this.failures);
});
}
return this.control ? this.control.invalid : false;
}
/**
* @return {?}
*/
triggerValidation() {
this.touch();
this.validate();
}
/**
* @return {?}
*/
onLoad() {
}
}
__decorate([
OnChange,
__metadata("design:type", Object)
], NgFormControl.prototype, "initialized", void 0);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DatePickerComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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 {?}
*/
ngOnInit() {
this.theme = this.theme.length > 0 ? this.theme : SiteConfig.theme;
super.ngOnInit();
}
/**
* @return {?}
*/
onLoad() {
if (!this.input || !this.input.nativeElement) {
setTimeout(() => this.onLoad(), 500);
return;
}
Observable.fromEvent(this.input.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe((event) => {
this.close();
});
Observable.fromEvent(this.input.nativeElement, 'focus')
.takeUntil(this.onDestroy$)
.subscribe(() => {
this.open();
});
}
/**
* @return {?}
*/
open() {
this.datePicker.hide();
if (!this.datePicker.isOpen) {
this.datePicker.show();
}
}
/**
* @return {?}
*/
close() {
if (this.datePicker.isOpen) {
this.datePicker.hide();
}
}
}
DatePickerComponent.decorators = [
{ type: Component, args: [{
selector: 'date-picker',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate"
[hidden]="!initialized">
<label [attr.for]="identifier" *ngIf="label.length > 0">
{{label}}
<ng-container *ngIf="required && config.showRequiredAsterisk">*</ng-container>
</label>
<div></div>
<div class="input-group ng-control"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}">
<div class="input-group-before clickable" (click)="!disabled && open()">
<div class="input-group-text">
<span class="fa fa-calendar"></span>
</div>
</div>
<input class="form-control" type="text"
[placeholder]="placeholder || ''"
[id]="identifier"
[name]="name"
[attr.name]="name"
[disabled]="disabled"
[(ngModel)]="value"
#input
tabindex="0"
bsDatepicker
#dp="bsDatepicker"
[triggers]="''"
[placement]="placement"
[bsConfig]="{containerClass: theme,showWeekNumbers:false}"
[minDate]="minDate"
[maxDate]="maxDate"
(blur)="triggerValidation()"
/>
</div>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
DatePickerComponent.ctorParameters = () => [
{ 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',] },],
};
let identifier = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RequiredCheckBoxValidator extends RequiredValidator {
/**
* @return {?}
*/
get required() {
return this._isRequired;
}
/**
* @param {?} value
* @return {?}
*/
set required(value) {
this._isRequired = value != null && value !== false && `${value}` !== 'false';
if (this._change)
this._change();
}
/**
* @param {?} c
* @return {?}
*/
validate(c) {
return this.required && !c.value ? { required: true } : null;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnValidatorChange(fn) {
this._change = fn;
}
}
RequiredCheckBoxValidator.decorators = [
{ type: Directive, args: [{
selector: 'check-box[ngModel][required]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => RequiredCheckBoxValidator),
multi: true
}],
host: { '[attr.required]': 'required ? "" : null' }
},] },
];
/** @nocollapse */
RequiredCheckBoxValidator.ctorParameters = () => [];
RequiredCheckBoxValidator.propDecorators = {
"required": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class CheckBoxComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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 {?}
*/
ngOnInit() {
super.ngOnInit();
this.onInit.emit();
this.requiredValidator.required = this.required;
this.requiredChange.merge(this.stateChange).merge(this.threeStateChange).takeUntil(this.onDestroy$).subscribe(() => {
this.requiredValidator.required = this.required;
this.updateState();
this.value = this.state === 'on' ? this.checkedValue : false;
});
this.updateState();
Observable.interval(1000)
.map(() => this.value)
.distinctUntilChanged()
.takeUntil(this.onDestroy$)
.subscribe(() => this.updateState());
}
/**
* @return {?}
*/
nextState() {
if (!this.disabled) {
this.control.markAsTouched();
if (this.threeState && this.state === 'on') {
this.state = 'indeterminate';
return;
}
this.state = this.state === 'off' ? 'on' : 'off';
}
}
/**
* @return {?}
*/
updateState() {
setTimeout(() => {
this.correctState();
if (this.checkbox && this.checkbox.nativeElement) {
this.checkbox.nativeElement.indeterminate = this.state === 'indeterminate';
}
this.value = this.state === 'on' ? this.checkedValue : false;
});
}
/**
* @return {?}
*/
correctState() {
if (this.value && this.state === 'off') {
this.state = 'on';
}
if ((this.state === 'on' && !this.value) || (this.state === 'indeterminate' && !this.threeState)) {
this.state = 'off';
}
}
}
CheckBoxComponent.decorators = [
{ type: Component, args: [{
selector: 'check-box',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate" [class.checked]="value">
<label *ngIf="labelPlacement === 'above'" for="{{identifier}}">
{{ label }}
<span *ngIf="required && config.showRequiredAsterisk">*</span>
</label>
<div></div>
<div (click)="nextState()" (keyup.enter)="nextState()" (keyup.space)="nextState()" class="input-group check-container ng-control"
tabindex="0"
#element
[ngClass]="{'ng-invalid': isInvalid$() | async, 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}">
<div class="form-control" *ngIf="labelPlacement === 'before'">
<label>
{{ label }}
<span *ngIf="required && config.showRequiredAsterisk">*</span>
</label>
</div>
<div [class.input-group-prepend]="labelPlacement === 'before'" [class.input-group-append]="labelPlacement === 'after'">
<div class="input-group-text">
<input readonly #checkbox type="checkbox"
[id]="identifier"
[disabled]="disabled"
[(ngModel)]="value"
tabindex="-1"/>
</div>
</div>
<div class="form-control" *ngIf="labelPlacement === 'after'">
<label>
{{ label }}
<span *ngIf="required && config.showRequiredAsterisk">*</span>
</label>
</div>
</div>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
CheckBoxComponent.ctorParameters = () => [
{ 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);
let identifier$1 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DragAndDrop {
constructor() {
this.source = null;
this.isDragging = false;
this.onDrag = new EventEmitter();
this.onDrop = new EventEmitter();
}
/**
* @param {?} source
* @return {?}
*/
drag(source) {
this.source = source;
this.onDrag.emit(source);
}
/**
* @param {?} destination
* @return {?}
*/
drop(destination) {
if (this.source !== destination) {
this.onDrop.emit({
source: this.source,
destination
});
}
this.isDragging = false;
this.source = null;
}
/**
* @return {?}
*/
moveMouse() {
if (this.source) {
this.isDragging = true;
return;
}
this.isDragging = false;
}
/**
* @return {?}
*/
abort() {
this.isDragging = false;
this.source = null;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class Searcher {
/**
* @param {?=} searchBy
* @param {?=} minLength
*/
constructor(searchBy = ['name'], minLength = 3) {
this.searchBy = searchBy;
this.minLength = minLength;
this.search = '';
}
/**
* @param {?} item
* @return {?}
*/
doesItemMatchSearch(item) {
return this.doesItemStringMatchSearch(item) || this.doItemPropertiesMatchSearch(item);
}
/**
* @param {?} item
* @return {?}
*/
doItemPropertiesMatchSearch(item) {
for (let /** @type {?} */ property of this.searchBy) {
if (this.doesItemPropertyMatchSearch(item, property)) {
return true;
}
}
return false;
}
/**
* @param {?} item
* @param {?} property
* @return {?}
*/
doesItemPropertyMatchSearch(item, property) {
if (Value.isScalar(item[property])) {
return item[property].toLowerCase().indexOf(this.search.toLowerCase()) > -1;
}
return false;
}
/**
* @param {?} item
* @return {?}
*/
doesItemStringMatchSearch(item) {
return typeof item === 'string' && item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
}
/**
* @return {?}
*/
isTermLongEnough() {
return this.search.length >= this.minLength;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedSearcher extends Searcher {
constructor() {
super(...arguments);
this.isUpdating = false;
this.forceClose = true;
this.all = {};
}
/**
* @param {?} item
* @return {?}
*/
updateMatches(item) {
//this.isUpdating = true;
setTimeout(() => {
this.initializeMetadata(item);
this.updateChildrenForItem$(item, item).subscribe({
complete: () => {
if (!this.isTermLongEnough()) {
item.$shown = true;
item.$collapsed = false;
}
this.isUpdating = false;
}
});
}, 500);
}
/**
* @param {?} item
* @param {?=} parent
* @return {?}
*/
initializeMetadata(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;
}
}
/**
* @param {?} item
* @param {?} top
* @return {?}
*/
updateChildrenForItem$(item, top) {
if (item.hasOwnProperty('children') && Array.isArray(item['children']) && item['children'].length > 0) {
return Observable.from(item.children)
.flatMap((child) => {
this.initializeMetadata(child, item);
child.$parentMatches = item.$matches || item.$parentMatches;
return Observable.of(child).concat(this.updateChildrenForItem$(child, top));
})
.filter(child => child.$matches)
.do((child) => {
this.updateParentChildMatches(child);
top.$childMatches = true;
})
.toArray()
.do((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([]);
}
/**
* @param {?} item
* @return {?}
*/
updateParentChildMatches(item) {
if (item.$parent) {
this.all[item.$parent].$childMatches = true;
this.updateParentChildMatches(this.all[item.$parent]);
}
}
/**
* @param {?} item
* @return {?}
*/
doesParentMatchSearch$(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);
}
/**
* @param {?} item
* @return {?}
*/
doesItemMatchSearch$(item) {
if (this.doesItemMatchSearch(item)) {
return Async.getObservableForValue$(true);
}
return this.areAnyChildrenFound$(item);
}
/**
* @param {?} item
* @return {?}
*/
areAnyChildrenFound$(item) {
if (Value.hasArrayElements(item.children)) {
return this.doAnyChildrenMatchSearch$(item);
}
return Async.getObservableForValue$(false);
}
/**
* @param {?} item
* @return {?}
*/
doAnyChildrenMatchSearch$(item) {
return Async.mapToObservable$(item.children, child => this.doesItemMatchSearch$(child))
.toArray()
.map(arr => arr.indexOf(true) > -1);
}
/**
* @param {?} item
* @return {?}
*/
getParent(item) {
if (this.all.hasOwnProperty(item.$parent)) {
return this.all[item.$parent];
}
}
}
let nestedId = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedFieldComponent extends NgFormControl {
/**
* @param {?} injector
*/
constructor(injector) {
super(injector);
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 {?}
*/
ngOnInit() {
super.ngOnInit();
this.searcher = new NestedSearcher(this.searchBy);
this.onLoad();
this.dragAndDrop.onDrop.subscribe(({ source, destination }) => {
let /** @type {?} */ parent = this.searcher.getParent(source);
if (parent && !this.isSourceParentOfDestination(source, destination)) {
this.removeFromParent(source, parent);
this.addToParent(source, destination);
this.searcher.updateMatches(this.value);
}
});
}
/**
* @return {?}
*/
onLoad() {
if (this.value === null) {
setTimeout(() => this.onLoad(), 500);
return;
}
this.searcher.updateMatches(this.value);
}
/**
* @param {?} parent
* @return {?}
*/
addUnitToParent(parent) {
this.addToParent({
id: null,
name: ''
}, parent);
}
/**
* @param {?} unit
* @return {?}
*/
removeUnitFromParent(unit) {
this.removeFromParent(unit, this.searcher.getParent(unit));
}
/**
* @param {?} unit
* @param {?} parent
* @return {?}
*/
addToParent(unit, parent) {
if (!parent.hasOwnProperty('children')) {
parent.children = [];
}
parent.children.push(unit);
this.searcher.initializeMetadata(unit, parent);
parent.$collapsed = false;
}
/**
* @param {?} unit
* @param {?} parent
* @return {?}
*/
removeFromParent(unit, parent) {
if (parent) {
parent.children.splice(parent.children.indexOf(unit), 1);
}
}
/**
* @param {?} $event
* @return {?}
*/
getMouseLocation($event) {
this.mousePosition.x = $event.clientX;
this.mousePosition.y = $event.clientY;
this.dragAndDrop.moveMouse();
}
/**
* @return {?}
*/
getDragPosition() {
return `left:${this.mousePosition.x}px;top:${this.mousePosition.y}px`;
}
/**
* @param {?} source
* @param {?} destination
* @return {?}
*/
isSourceParentOfDestination(source, destination) {
if (source.children && source.children.length > 0) {
for (let /** @type {?} */ child of source.children) {
if (child === destination) {
return true;
}
if (child.children && child.children.length > 0 && this.isSourceParentOfDestination(child, destination)) {
return true;
}
}
}
return false;
}
}
NestedFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'nested-field',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate">
<label>
{{label}}
</label>
<div></div>
<ng-container>
<nested-list
class="form-control-container full-width"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}"
[item]="value"
[searchBy]="searchBy"
[searcher]="searcher"
[collapsed]="true"
(mousemove)="getMouseLocation($event)"
>
<ng-template let-item>
<div class="input-group" [class.dragging]="dragAndDrop.source === item">
<div class="input-group-prepend">
<span class="input-group-text">
{{item.id || '-' }}
</span>
</div>
<div class="form-control" *ngIf="!item.$focused" tabindex="0"
(click)="item.$focused = true;dragAndDrop.abort()"
(mousedown)="dragAndDrop.drag(item)" (mouseup)="dragAndDrop.drop(item)">
{{ item.name }}
</div>
<text-box #textBox [autofocus]="true" *ngIf="item.$focused" [(ngModel)]="item.name" [required]="true"
name="" class="hide-until-focused full-width"
[disableLastPass]="true" [showErrors]="false" (inputFocusOut)="item.$focused = false">
</text-box>
<div class="input-group-append">
<button class="btn btn-success btn-sm" tabindex="0" (activate)="addUnitToParent(item)">
<span class="fa fa-plus"></span>
</button>
<button class="btn btn-danger btn-sm" tabindex="0" (activate)="removeUnitFromParent(item)">
<span class="fa fa-times"></span>
</button>
</div>
</div>
</ng-template>
</nested-list>
</ng-container>
<div class="dragging-element" *ngIf="dragAndDrop.source && dragAndDrop.isDragging && !dragAndDrop.source.$focused"
[attr.style]="getDragPosition() | safe: 'style'">
{{dragAndDrop.source.name}}
</div>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
NestedFieldComponent.ctorParameters = () => [
{ 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);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedListComponent {
constructor() {
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 = '';
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.searcher) {
this.searcher = new NestedSearcher(this.searchBy);
}
let /** @type {?} */ stopListening = UnsubscribeAll.merge(this.onDestroy$);
this.onCollapseAll.takeUntil(stopListening).subscribe(() => {
this.item["$collapsed"] = true;
});
this.onExpandAll.takeUntil(stopListening).subscribe(() => {
this.item["$collapsed"] = false;
});
if (this.isTop) {
this.searcher.isUpdating = true;
setTimeout(() => {
this.updateMatches();
}, 500);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.onDestroy$.emit();
}
/**
* @return {?}
*/
hasChildren() {
return this.item && Value.hasArrayElements(this.item.children);
}
/**
* @return {?}
*/
isCollapsed() {
return this.item["$collapsed"];
}
/**
* @return {?}
*/
toggle() {
this.item["$collapsed"] = !this.item["$collapsed"];
}
/**
* @return {?}
*/
updateMatches() {
this.searcher.updateMatches(this.item);
}
/**
* @param {?} item
* @return {?}
*/
shouldDisplay(item) {
return !this.searcher.isTermLongEnough() || item.$shown;
}
/**
* @return {?}
*/
isUpdating() {
return this.searcher.isUpdating;
}
}
NestedListComponent.decorators = [
{ type: Component, args: [{
selector: 'nested-list',
template: `
<ng-template #defaultTemplate let-item>
<div class="nested-list-element">{{ item.name ? item.name : item.text}}</div>
</ng-template>
<ng-container *ngIf="isTop && searchable">
<div class="form-group">
<div class="input-group w-100">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-search"></span>
</div>
</div>
<input type="text" class="form-control w-100" name="nested-search"
[(ngModel)]="searcher.search"
(ngModelChange)="updateMatches()"
placeholder="Search ..."/>
</div>
</div>
</ng-container>
<div class="loading-icon" *ngIf="isUpdating()">
<span class="fa fa-spinner fa-spin"></span>
</div>
<div class="nested-list-container {{containerClass}}" [class.top]="isTop" *ngIf="!isUpdating()">
<div class="parent-node" [class.has-children]="!isCollapsed() && hasChildren()"
[class.show-lines]="showLines"
[class.bold]="item['$matches']"
(click)="!collapseButton ? toggle() : null"
*ngIf="shouldDisplay(item)">
<ng-container
*ngTemplateOutlet="template ? template : defaultTemplate;context:{$implicit: item}"></ng-container>
<span *ngIf="hasChildren() && collapseButton" class="fa" [class.fa-plus]="isCollapsed()"
[class.fa-minus]="!isCollapsed()"
(click)="toggle()"></span>
<div class="parent-node-end"></div>
</div>
<div class="children-list" *ngIf="hasChildren() && shouldDisplay(item) && !isCollapsed()">
<ng-container *ngFor="let child of item.children">
<nested-list [item]="child" [template]="template" [initialCollapse]="initialCollapse"
[searcher]="searcher"
[showLines]="showLines" [collapseButton]="collapseButton"
[onCollapseAll]="onCollapseAll" [onExpandAll]="onExpandAll"
[isTop]="false">
</nested-list>
</ng-container>
<div class="list-end"></div>
</div>
</div>
`,
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
},] },
];
/** @nocollapse */
NestedListComponent.ctorParameters = () => [];
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 },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DropDownComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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 {?}
*/
get isMultiple() {
return this._isMultiple;
}
/**
* @param {?} value
* @return {?}
*/
set isMultiple(value) {
this._isMultiple = value;
if (this.initialized) {
setTimeout(() => {
this.onMultipleChange();
});
}
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.onDestroy$.emit();
}
/**
* @return {?}
*/
onMultipleChange() {
if (this.isMultiple) {
if (!Array.isArray(this.value)) {
this.value = [this.value];
}
return;
}
if (Array.isArray(this.value)) {
this.value = this.value[0] || null;
}
}
/**
* @return {?}
*/
areOptionsProvided() {
return Value.hasArrayElements(this.options);
}
/**
* @return {?}
*/
isIconProvided() {
return this.icon.length > 0;
}
/**
* @return {?}
*/
isIconPlacementBefore() {
return this.iconPlacement === 'before';
}
/**
* @return {?}
*/
getReadOnlyValue() {
let /** @type {?} */ textValues = this.options.filter((value) => value[this.selectBy] === this.value);
return textValues.length > 0 ? textValues[0][this.labelField] : '';
}
}
DropDownComponent.decorators = [
{ type: Component, args: [{
selector: 'drop-down',
template: `
<ng-container *ngIf="initialized">
<ng-template #defaultOption let-item>
{{ item[labelField] }}
</ng-template>
<div [class.form-group]="!inInputGroup" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate">
<label [attr.for]="identifier" *ngIf="label.length > 0">
{{ label }}
<ng-container *ngIf="required && config.showRequiredAsterisk">*</ng-container>
</label>
<div></div>
<div class="ng-control" [class.input-group]="!inInputGroup" [class.disabled]="disabled"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}">
<div class="input-group-prepend" *ngIf="isIconProvided() && isIconPlacementBefore()">
<div class="input-group-text">
<span class="fa fa-{{icon}}"></span>
</div>
</div>
<input class="form-control" readonly disabled *ngIf="disabled" [ngModel]="getReadOnlyValue()" [name]="name"
[attr.name]="name"/>
<ng-select
*ngIf="!disabled"
[items]="options"
[typeahead]="typeahead || null"
[bindValue]="selectBy"
[bindLabel]="labelField"
[multiple]="isMultiple"
[placeholder]="placeholder"
[appendTo]="appendTo.length > 0 ? appendTo : null"
[(ngModel)]="value"
(blur)="triggerValidation()"
(change)="triggerValidation()"
>
<ng-template ng-label-tmp let-item="item" *ngIf="!isMultiple">
<ng-container
*ngTemplateOutlet="template ? template : defaultOption;context:{$implicit: item}"></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<ng-container
*ngTemplateOutlet="template ? template : defaultOption;context:{$implicit: item}"></ng-container>
</ng-template>
</ng-select>
<div class="input-group-append" *ngIf="isIconProvided() && !isIconPlacementBefore()">
<div class="input-group-text">
<span class="fa fa-{{icon}}"></span>
</div>
</div>
</div>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
<ng-container *ngIf="!areOptionsProvided()">
<div class="alert alert-notice">
There are no options available.
</div>
</ng-container>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
DropDownComponent.ctorParameters = () => [
{ 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 },],
};
let identifier$2 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedCheckBoxComponent extends NgFormControl {
/**
* @param {?} injector
*/
constructor(injector) {
super(injector);
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: (control) => {
if (this.required && (!control.value || control.value.length === 0)) {
return { required: true };
}
return null;
}
}];
this.nestedList = { children: [] };
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
this.nestedList.children = this.options;
this.searcher = new NestedSearcher(this.searchBy);
}
/**
* @param {?} item
* @return {?}
*/
shouldBold$(item) {
return Observable.of(this.searcher.isTermLongEnough() && this.searcher.doesItemMatchSearch(item)).debounceTime(500);
}
/**
* @param {?} item
* @return {?}
*/
hasChildren(item) {
return Value.hasArrayElements(item.children);
}
/**
* @param {?} item
* @return {?}
*/
click(item) {
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: (arr) => {
if (arr.length === 0) {
this.indeterminate[item[this.selectBy]] = null;
}
},
complete: () => {
this.updateParents(item);
this.updateSelected();
this.control.markAsTouched();
}
});
}
/**
* @return {?}
*/
updateSelected() {
this.value = Object.keys(this.selection).map((key) => this.selection[key]).filter((value) => Boolean(value));
}
/**
* @param {?} item
* @return {?}
*/
updateParents(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);
}
}
}
/**
* @param {?} item
* @return {?}
*/
updateThreeState(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;
}
/**
* @param {?} item
* @return {?}
*/
updateChildren$(item) {
return Observable.from(item.children || [])
.filter((child) => {
return child.$shown;
})
.do((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((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([]);
});
}
}
NestedCheckBoxComponent.decorators = [
{ type: Component, args: [{
selector: 'nested-check-box',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate">
<label>
{{label}}
</label>
<div></div>
<ng-container>
<nested-list
class="form-control-container"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}"
[item]="nestedList"
[containerClass]="'form-control expandable ng-control'"
[showLines]="false"
[onCollapseAll]="onCollapseAll"
[onExpandAll]="onExpandAll"
[searchBy]="searchBy"
[collapsed]="true"
>
<ng-template let-item>
<div class="three-state" [class.active]="selection[item[selectBy]]">
<span>{{item.name}}</span>
<button class="btn btn-sm btn-outline-primary" type="button" (click)="click(item)">
<span class="fa" [class.fa-square-o]="!selection[item[selectBy]] && !indeterminate[item[selectBy]]"
[class.fa-check-square-o]="selection[item[selectBy]]"
[class.fa-minus-square-o]="indeterminate[item[selectBy]]"></span>
</button>
</div>
</ng-template>
</nested-list>
</ng-container>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
NestedCheckBoxComponent.ctorParameters = () => [
{ 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);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TextBoxComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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 {?}
*/
onLoad() {
if (!this.input || !this.input.nativeElement) {
setTimeout(() => this.onLoad(), 500);
return;
}
Observable.fromEvent(this.input.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe((event) => {
if (event.key === 'Tab') {
this.triggerValidation();
}
});
if (this.autofocus) {
this.input.nativeElement.focus();
}
}
/**
* @return {?}
*/
triggerValidation() {
super.triggerValidation();
this.inputFocusOut.emit();
}
}
TextBoxComponent.decorators = [
{ type: Component, args: [{
selector: 'text-box',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate">
<label [attr.for]="identifier" *ngIf="label.length > 0">
{{label}}
<ng-container *ngIf="required && config.showRequiredAsterisk">*</ng-container>
</label>
<div></div>
<div class="input-group ng-control" (click)="click.emit()"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}">
<ng-content select=".input-group-prepend"></ng-content>
<input class="form-control" [type]="type" #input
(focus)="inputFocus.emit()"
[placeholder]="placeholder || ''"
[id]="identifier"
[attr.name]="name"
[name]="name"
[attr.role]="disableLastPass ? 'note' : ''"
[attr.autocomplete]="autocomplete ? autocomplete : disableLastPass ? 'off' : name"
[disabled]="disabled"
[(ngModel)]="value"
(blur)="triggerValidation()"
[attr.autofocus]="autofocus || null"
[attr.autocapitalize]="autocapitalize"
[attr.autocorrect]="autocorrect"
[attr.spellcheck]="spellcheck"
[attr.data-lpignore]="disableLastPass || null"
tabindex="0"
/>
<ng-content select=".input-group-append"></ng-content>
</div>
<validation-messages *ngIf="(isInvalid$() | async) && showErrors" [errors]="failures" [label]="label">
</validation-messages>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
TextBoxComponent.ctorParameters = () => [
{ 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);
let identifier$3 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class EmailComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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: control => {
return this.shouldValidateEmail ? Validators.email(control) : null;
}
}
];
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
this.shouldValidateEmail = !!(this.value && this.value.length > 0);
this.valueChange.takeUntil(this.onDestroy$)
.subscribe(value => {
this.shouldValidateEmail = value && value.length > 0;
});
}
}
EmailComponent.decorators = [
{ type: Component, args: [{
selector: 'email',
template: `
<ng-container *ngIf="initialized">
<div class="form-group" [class.validate-input]="shouldValidate" [class.no-validate-input]="!shouldValidate"
[hidden]="!initialized">
<label [attr.for]="identifier" *ngIf="label.length > 0">
{{label}}
<ng-container *ngIf="required && config.showRequiredAsterisk">*</ng-container>
</label>
<div></div>
<div class="input-group ng-control"
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async)}">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-envelope"></span>
</div>
</div>
<input class="form-control"
type="text"
[placeholder]="placeholder || ''"
[id]="identifier"
[disabled]="disabled"
[name]="name"
[attr.name]="name"
[(ngModel)]="value"
(blur)="triggerValidation()"
tabindex="0"
/>
</div>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
EmailComponent.ctorParameters = () => [
{ 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);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class PhoneComponent extends NgFormControl {
/**
* @param {?} injector
*/
constructor(injector) {
super(injector);
this.injector = injector;
this.name = '';
this.label = 'Phone Number';
this.disabled = false;
this.required = false;
this.additionalValidators = /** @type {?} */ ([
Validators.pattern('\\d{3}\\-\\d{3}\\-\\d{4}')
]);
this.phoneForm = {
part1: '',
part2: '',
part3: ''
};
this.identifier = `phone-${identifier$4++}`;
}
/**
* @return {?}
*/
onLoad() {
if (this.value && this.value.length > 0) {
let /** @type {?} */ phone = this.value.replace(/[^\d\-]+/g, '').split('-');
this.phoneForm.part1 = phone[0];
this.phoneForm.part2 = phone[1] || '';
this.phoneForm.part3 = phone[2] || '';
}
}
/**
* @return {?}
*/
getFor() {
let /** @type {?} */ 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;
}
/**
* @return {?}
*/
format() {
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();
}
/**
* @param {?} event
* @param {?} currentElement
* @param {?} nextElement
* @return {?}
*/
onKeyUp(event, currentElement, nextElement) {
let /** @type {?} */ ignoreNextFocusKeys = ['tab', 'enter', 'backspace', 'arrowleft', 'arrowright', 'shift'];
if (ignoreNextFocusKeys.indexOf(event.key.toLowerCase()) === -1 && nextElement && (currentElement.selectionStart === 3)) {
nextElement.focus();
}
this.format();
}
}
PhoneComponent.decorators = [
{ type: Component, args: [{
selector: 'phone',
template: `<div class="form-group validate-input">
<label [for]="getFor()">{{label}}</label>
<br/>
<div *ngIf="control">
<div class="input-group ng-control" [class.ng-invalid]="control.invalid"
[class.ng-valid]="control.valid"
[class.ng-touched]="control.touched">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-phone"></span>
</div>
</div>
<input #part1 class="form-control" type="text" size="3" minlength="3" maxlength="3"
[attr.id]="identifier + '-part1'"
[(ngModel)]="phoneForm.part1"
pattern="\d{3}"
required
(keyup)="onKeyUp($event, part1, part2)"
(change)="format()"
(blur)="format()"
[attr.name]="identifier + '-part1'"
[name]="identifier + '-part1'"/>
<div class="input-group-append">
<span class="input-group-text">-</span>
</div>
<input #part2 class="form-control" type="text" size="3" minlength="3" maxlength="3"
[attr.id]="identifier + '-part2'"
[(ngModel)]="phoneForm.part2"
pattern="\d{3}"
required
(keyup)="onKeyUp($event, part2, part3)"
(change)="format()"
(blur)="format()"
[attr.name]="identifier + '-part2'"
[name]="identifier + '-part2'"/>
<div class="input-group-append">
<span class="input-group-text">-</span>
</div>
<input #part3 class="form-control" type="text" size="4" minlength="4" maxlength="4"
[attr.id]="identifier + '-part3'"
required
[(ngModel)]="phoneForm.part3"
pattern="\d{4}"
(keyup)="format()"
(change)="format()"
(blur)="format()"
[attr.name]="identifier + '-part3'"
[name]="identifier + '-part3'"/>
</div>
<div class="validation-messages-container">
<div class="alert alert-danger" *ngIf="control && control.invalid && control.touched">
<div>The {{label}} is not fully provided.</div>
</div>
</div>
</div>
</div>
`,
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
}]
},] },
];
/** @nocollapse */
PhoneComponent.ctorParameters = () => [
{ type: Injector, },
];
PhoneComponent.propDecorators = {
"name": [{ type: Input },],
"label": [{ type: Input },],
"disabled": [{ type: Input },],
"required": [{ type: Input },],
"parentFormControl": [{ type: Input },],
"parentFormGroup": [{ type: Input },],
};
let identifier$4 = 1;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RadioComponent extends NgFormControl {
/**
* @param {?} injector
*/
constructor(injector) {
super(injector);
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 {?}
*/
ngOnInit() {
super.ngOnInit();
}
/**
* @return {?}
*/
onLoad() {
if (!this.element || !this.element.nativeElement) {
setTimeout(() => this.onLoad(), 500);
return;
}
Observable.fromEvent(this.element.nativeElement, 'keydown')
.takeUntil(this.onDestroy$)
.subscribe((event) => {
if (event.key === ' ') {
this.check();
}
});
}
/**
* @return {?}
*/
check() {
if (!this.disabled) {
this.value = this.checkedValue;
this.model.control.markAsTouched();
this.onTouch.emit();
}
}
}
RadioComponent.decorators = [
{ type: Component, args: [{
selector: 'radio',
template: `
<ng-container *ngIf="initialized">
<div class="form-group validate-input">
<label *ngIf="labelPlacement === 'above'">
{{ label }}
</label>
<div></div>
<div (click)="check();" class="input-group check-container ng-control" tabindex="0" #element
[ngClass]="{'ng-invalid':(isInvalid$() | async), 'ng-touched':(touched$ | async), 'ng-valid':!(isInvalid$() | async) && (touched$ | async)}">
<div class="form-control" *ngIf="labelPlacement === 'before'">
<label>
{{ label }}
</label>
</div>
<div class="ng-control"
[class.input-group-prepend]="labelPlacement === 'before'" [class.input-group-append]="labelPlacement === 'after'">
<div class="input-group-text">
<input readonly type="radio"
[attr.name]="name"
[id]="identifier"
[disabled]="disabled"
[checked]="value === checkedValue"
tabindex="-1"/>
</div>
</div>
<div class="form-control" *ngIf="labelPlacement === 'after'">
<label>
{{ label }}
</label>
</div>
</div>
</div>
</ng-container>
`,
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
},] },
];
/** @nocollapse */
RadioComponent.ctorParameters = () => [
{ 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',] },],
};
let identifier$5 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RadioGroupComponent extends NgFormControl {
/**
* @param {?} injector
* @param {?} config
*/
constructor(injector, config) {
super(injector);
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++}`;
}
}
RadioGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'radio-group',
template: `
<div class="form-group">
<label>
{{ label }}
<span *ngIf="required && config.showRequiredAsterisk">*</span>
</label>
<div></div>
<div class="radio-controls" [class.d-flex]="direction === 'horizontal'">
<ng-container *ngFor="let option of options">
<radio [name]="name"
[label]="option[bindLabel]"
[(ngModel)]="value"
[checkedValue]="option[bindValue]"
[parentFormControl]="control"
(ngModelChange)="triggerValidation()"
(onTouch)="control.markAsTouched()"
tabindex="0"></radio>
</ng-container>
</div>
<validation-messages *ngIf="(isInvalid$() | async)" [errors]="failures" [label]="label">
</validation-messages>
</div>
`,
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
},] },
];
/** @nocollapse */
RadioGroupComponent.ctorParameters = () => [
{ 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);
let identifier$6 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TabComponent {
constructor() {
this.isActive = false;
this.trigger = new EventEmitter();
}
/**
* @param {?} $event
* @return {?}
*/
log($event) {
console.log($event.key);
}
}
TabComponent.decorators = [
{ type: Component, args: [{
selector: 'tab',
template: `
<li class="nav-item">
<a class="nav-link"
(activate)="trigger.emit()"
[class.active]="isActive"
tabindex="0">
<ng-content></ng-content>
</a>
</li>`,
encapsulation: ViewEncapsulation.None,
},] },
];
/** @nocollapse */
TabComponent.ctorParameters = () => [];
TabComponent.propDecorators = {
"isActive": [{ type: Input },],
"trigger": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class Activatable {
/**
* @param {?} el
*/
constructor(el) {
this.el = el;
this.activate = new EventEmitter();
}
/**
* @param {?} $event
* @return {?}
*/
onKeyUp($event) {
$event.stopPropagation();
$event.preventDefault();
if ($event.key === 'Enter' || $event.key === ' ') {
this.activate.emit();
return false;
}
}
/**
* @param {?} $event
* @return {?}
*/
onMouseUp($event) {
$event.stopPropagation();
$event.preventDefault();
this.activate.emit();
return false;
}
}
Activatable.decorators = [
{ type: Directive, args: [{
selector: '[tabindex]:not(input)',
outputs: ['activate']
},] },
];
/** @nocollapse */
Activatable.ctorParameters = () => [
{ type: ElementRef, },
];
Activatable.propDecorators = {
"onKeyUp": [{ type: HostListener, args: ['keyup', ['$event'],] },],
"onMouseUp": [{ type: HostListener, args: ['mouseup', ['$event'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ValidatorMessenger {
constructor() {
this.messages = {
required: (result, key, label = '') => {
return `${label} is required`;
},
pattern: (result, key, label = '') => {
return `${label} must be in a valid format`;
},
email: (result, key, label = '') => {
return `${label} must be a valid email address`;
},
minlength: (result, key, label = '') => {
let /** @type {?} */ plural = this.getPlural(result['requiredLength']);
return `${label} must be at least ${result['requiredLength']} character${plural}`;
},
maxlength: (result, key, label = '') => {
let /** @type {?} */ plural = this.getPlural(result['requiredLength']);
return `${label} must be at most ${result['requiredLength']} character${plural}`;
}
};
}
/**
* @param {?} value
* @return {?}
*/
getPlural(value) {
return value !== 1 ? 's' : '';
}
/**
* @param {?} result
* @param {?} key
* @param {?=} label
* @return {?}
*/
getMessageForError(result, key, 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 /** @type {?} */ (result[key]);
default:
return `Validation failed: ${label}`;
}
}
}
ValidatorMessenger.decorators = [
{ type: Injectable },
];
/** @nocollapse */
ValidatorMessenger.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class FormValidationMessagesComponent {
/**
* @param {?} messenger
*/
constructor(messenger) {
this.messenger = messenger;
}
/**
* @param {?} object
* @return {?}
*/
getKeys(object) {
return Object.keys(object);
}
/**
* @param {?} label
* @param {?} errors
* @param {?} key
* @return {?}
*/
getMessage(label, errors, key) {
return this.messenger.getMessageForError(errors, key, label);
}
}
FormValidationMessagesComponent.decorators = [
{ type: Component, args: [{
selector: 'form-validation-messages',
template: `
<div class="alert alert-danger validation-messages" *ngIf="errors !== null">
<ul>
<ng-container *ngFor="let field of getKeys(errors)">
<li *ngFor="let errorKey of getKeys(errors[field])">
{{getMessage(field, errors[field], errorKey)}}
</li>
</ng-container>
</ul>
</div>
`
},] },
];
/** @nocollapse */
FormValidationMessagesComponent.ctorParameters = () => [
{ type: ValidatorMessenger, },
];
FormValidationMessagesComponent.propDecorators = {
"errors": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ValidationMessagesComponent {
/**
* @param {?} messenger
*/
constructor(messenger) {
this.messenger = messenger;
this.label = '';
}
/**
* @return {?}
*/
getKeys() {
if (!this.errors) {
return [];
}
return Object.keys(this.errors);
}
/**
* @param {?} key
* @return {?}
*/
getMessage(key) {
return this.messenger.getMessageForError(this.errors, key, this.label);
}
/**
* @return {?}
*/
getErrorMessages() {
}
}
ValidationMessagesComponent.decorators = [
{ type: Component, args: [{
selector: 'validation-messages',
template: `
<div class="validation-messages-container">
<div class="alert alert-danger validation-messages" [hidden]="!errors">
<ul>
<li *ngFor="let key of getKeys()">{{getMessage(key)}}</li>
</ul>
</div>
</div>
`,
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}`]
},] },
];
/** @nocollapse */
ValidationMessagesComponent.ctorParameters = () => [
{ type: ValidatorMessenger, },
];
ValidationMessagesComponent.propDecorators = {
"errors": [{ type: Input },],
"label": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SubmitButtonComponent {
constructor() {
this.icon = '';
this.iconPlacement = 'before';
this.label = '';
this.onSubmit = new EventEmitter();
this.identifier = `submit-${identifier$7++}`;
this.onDestroy$ = new EventEmitter();
this.inFormGroup = true;
}
/**
* @return {?}
*/
getId() {
return this.identifier;
}
/**
* @return {?}
*/
ngOnInit() {
Observable.fromEvent(this.button.nativeElement, 'keypress')
.takeUntil(this.onDestroy$)
.subscribe((value) => {
if (value.key === 'Enter' || value.key === ' ') {
return this.submit();
}
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.onDestroy$.emit();
}
/**
* @return {?}
*/
submit() {
this.validateAllFormFields(this.formGroup);
if (this.formGroup.valid) {
this.onSubmit.emit(this.formGroup.value);
}
}
/**
* @param {?} formGroup
* @return {?}
*/
validateAllFormFields(formGroup) {
Object.keys(formGroup.controls).forEach(field => {
//{2}
const /** @type {?} */ control = formGroup.get(field); //{3}
if (control instanceof FormControl) { //{4}
//{4}
control.markAsTouched();
}
else if (control instanceof FormGroup) { //{5}
//{5}
this.validateAllFormFields(control); //{6}
}
});
}
}
SubmitButtonComponent.decorators = [
{ type: Component, args: [{
selector: 'submit-button',
template: `
<div [class.form-group]="inFormGroup">
<button class="btn btn-primary" type="button" (click)="submit()" [id]="getId()" #button>
<span class="fa fa-{{ icon }}" *ngIf="icon.length > 0 && iconPlacement === 'before'"></span>
{{label}}
<span class="fa fa-{{ icon }}" *ngIf="icon.length > 0 && iconPlacement === 'after'"></span>
</button>
</div>
`,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
SubmitButtonComponent.ctorParameters = () => [];
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 },],
};
let identifier$7 = 0;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatchValueValidator {
/**
* @param {?} messenger
*/
constructor(messenger) {
this.matchValue = {
label: '',
value: '',
message: ''
};
if (!messenger.messages.hasOwnProperty('matchValue')) {
messenger.messages['matchValue'] = (result, key, label = '') => {
let /** @type {?} */ message = /** @type {?} */ (result['message']);
if (message.length > 0) {
return message;
}
return `${label} must match ${result["matchLabel"]}`;
};
}
}
/**
* @param {?} c
* @return {?}
*/
validate(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;
}
/**
* @param {?} control
* @return {?}
*/
getStringValue(control) {
if (control.value === null || typeof control.value === 'undefined') {
return '';
}
return control.value.toString();
}
}
MatchValueValidator.decorators = [
{ type: Directive, args: [{
selector: '[matchValue]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MatchValueValidator),
multi: true
}]
},] },
];
/** @nocollapse */
MatchValueValidator.ctorParameters = () => [
{ type: ValidatorMessenger, },
];
MatchValueValidator.propDecorators = {
"matchValue": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgFormsModule {
constructor() {
window.addEventListener('keydown', function (e) {
if (e.keyCode === 32 && ['TEXTAREA', 'INPUT'].indexOf(e.target['tagName']) === -1) {
e.stopPropagation();
e.preventDefault();
return false;
}
return true;
});
}
/**
* @param {?=} showRequiredAsterisk
* @return {?}
*/
static forRoot(showRequiredAsterisk = true) {
return {
ngModule: NgFormsModule,
providers: [
{
provide: FormConfig,
useValue: { showRequiredAsterisk }
}
]
};
}
}
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
]
},] },
];
/** @nocollapse */
NgFormsModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
class Selector {
/**
* @param {?} options
* @param {?} selected
* @param {?=} selectBy
*/
constructor(options, selected, 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;
}
/**
* @param {?} option
* @return {?}
*/
toggle(option) {
if (!this.isSelected(option)) {
this.select(option);
return;
}
this.deselect(option);
}
/**
* @param {?} option
* @return {?}
*/
triggerSelectEvent(option) {
this.selected = this.interpreter.getValueOfObject(option);
this.onSelect.emit(option);
}
/**
* @param {?} option
* @return {?}
*/
triggerDeselectEvent(option) {
this.selected = null;
this.onDeselect.emit(option);
}
/**
* @param {?} option
* @return {?}
*/
select(option) {
if (!this.isSelected(option)) {
this.triggerSelectEvent(option);
}
}
/**
* @param {?} option
* @return {?}
*/
deselect(option) {
if (this.isSelected(option)) {
this.triggerDeselectEvent(option);
}
}
/**
* @return {?}
*/
getSelected() {
return this.selected;
}
}
__decorate([
OnChange,
__metadata("design:type", Object)
], Selector.prototype, "selected", void 0);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MultiSelector extends Selector {
/**
* @param {?} options
* @param {?} selected
* @param {?=} selectBy
*/
constructor(options, selected, selectBy = 'id') {
super(options, selected, selectBy);
this.options = options;
this.selected = selected;
this.selectBy = selectBy;
}
/**
* @param {?} option
* @return {?}
*/
triggerSelectEvent(option) {
this.selected.push(this.interpreter.getValueOfObject(option));
this.onSelect.emit(option);
}
/**
* @param {?} option
* @return {?}
*/
getIndexOf(option) {
return this.selected.indexOf(this.interpreter.getValueOfObject(option));
}
/**
* @param {?} option
* @return {?}
*/
triggerDeselectEvent(option) {
this.selected.splice(this.getIndexOf(option), 1);
this.onDeselect.emit(option);
}
/**
* @param {?} option
* @return {?}
*/
isSelected(option) {
return this.getIndexOf(option) > -1;
}
/**
* @return {?}
*/
selectAll$() {
return Async.forEach$(this.options, (option) => this.select(option));
}
/**
* @return {?}
*/
deselectAll$() {
return Async.forEach$(this.options, (option) => this.deselect(option));
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SingleSelector extends Selector {
/**
* @param {?} option
* @return {?}
*/
isSelected(option) {
return this.doesValueMatchOption(option, this.selected);
}
/**
* @param {?} option
* @return {?}
*/
select(option) {
this.deselectPreviousSelection$(this.selected).subscribe();
super.select(option);
}
/**
* @param {?} value
* @return {?}
*/
deselectPreviousSelection$(value) {
return Async.forEach$(this.options, (option) => {
if (this.doesValueMatchOption(option, value)) {
this.onDeselect.emit(option);
}
});
}
/**
* @param {?} option
* @param {?} value
* @return {?}
*/
doesValueMatchOption(option, value) {
return value === this.interpreter.getValueOfObject(option);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MultiSelectorMock {
/**
* @param {?} option
* @return {?}
*/
triggerSelectEvent(option) {
return undefined;
}
/**
* @param {?} option
* @return {?}
*/
getIndexOf(option) {
return undefined;
}
/**
* @param {?} option
* @return {?}
*/
triggerDeselectEvent(option) {
return undefined;
}
/**
* @param {?} option
* @return {?}
*/
toggle(option) {
}
/**
* @param {?} option
* @return {?}
*/
select(option) {
}
/**
* @param {?} option
* @return {?}
*/
deselect(option) {
}
/**
* @return {?}
*/
selectAll$() {
}
/**
* @return {?}
*/
deselectAll$() {
}
/**
* @param {?} option
* @return {?}
*/
isSelected(option) {
return false;
}
/**
* @return {?}
*/
getSelected() {
return [];
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SelectorMock {
/**
* @param {?} option
* @return {?}
*/
toggle(option) {
}
/**
* @param {?} option
* @return {?}
*/
select(option) {
}
/**
* @param {?} option
* @return {?}
*/
deselect(option) {
}
/**
* @return {?}
*/
selectAll$() {
}
/**
* @return {?}
*/
deselectAll$() {
}
/**
* @param {?} option
* @return {?}
*/
isSelected(option) {
return false;
}
/**
* @return {?}
*/
getSelected() {
return [];
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SelectorShunt extends Selector {
/**
* @param {?} options
* @param {?} selected
* @param {?=} selectBy
*/
constructor(options, selected, selectBy) {
super(options, selected, selectBy);
this.calledSelect = false;
this.calledDeselect = false;
this.interpreter = /** @type {?} */ ({
getValueOfObject: (option) => {
return option[this.selectBy];
}
});
}
/**
* @param {?} option
* @return {?}
*/
triggerSelectEvent(option) {
super.triggerSelectEvent(option);
this.calledSelect = true;
}
/**
* @param {?} option
* @return {?}
*/
triggerDeselectEvent(option) {
super.triggerDeselectEvent(option);
this.calledDeselect = true;
}
/**
* @param {?} option
* @return {?}
*/
isSelected(option) {
return this.selected === this.interpreter.getValueOfObject(option);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ConfirmationDemoComponent {
constructor() {
this.model = {
label: 'Match This Value',
match: '',
value: ''
};
this.markup = `
<text-box
name="testConfirm"
[label]="model.label"
placeholder="provide a value ..."
[(ngModel)]="model.value"
required="true"></text-box>
<text-box
name="testConfirmValue"
label="Confirm 'Match This Value'"
[(ngModel)]="model.match"
required="true"
[matchValue]="{label: model.label, value: model.value}"
placeholder="match the previous value ..."></text-box>
`;
}
}
ConfirmationDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.confirmation-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Match Value (Confirmation)</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<text-box
name="testConfirm"
[label]="model.label"
placeholder="provide a value ..."
[(ngModel)]="model.value"
required="true"></text-box>
<text-box
name="testConfirmValue"
label="Confirm 'Match This Value'"
[(ngModel)]="model.match"
required="true"
[matchValue]="{label: model.label, value: model.value}"
placeholder="match the previous value ..."></text-box>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
ConfirmationDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class FormsDemoComponent {
constructor() {
}
/**
* @param {?} path
* @return {?}
*/
getRoute(path) {
return ['', 'forms', path];
}
/**
* @param {?} value
* @return {?}
*/
log(value) {
console.log(value);
}
}
FormsDemoComponent.decorators = [
{ type: Component, args: [{
selector: 'forms-demo',
encapsulation: ViewEncapsulation.None,
template: `<style>
pre {
overflow-x: auto;
width: 100%;
}
@media (min-width: 768px) {
.navbar-brand {
width: 100%;
}
}
h4, h5 {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
</style>
<ul class="nav nav-tabs">
<tab (trigger)="log('Worked!')">Sample Tab</tab>
</ul>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 nav-sidebar bg-light">
<nav class="navbar navbar-expand-md navbar-light flex-md-column">
<a class="navbar-brand" routerLink="/forms" routerLinkActive="active">Forms</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav flex-column">
<div class="nav-brand">Components</div>
<a class="nav-link" routerLink="check-box" routerLinkActive="active" tabindex="0" (activate)="log('Worked!')">Check Box</a>
<a class="nav-link" routerLink="nested-check-box" routerLinkActive="active">
Nested Check Box
</a>
<a class="nav-link" routerLink="nested-list" routerLinkActive="active">
Nested List
</a>
<a class="nav-link" routerLink="nested-field" routerLinkActive="active">
Nested Field
</a>
<a class="nav-link" routerLink="radio" routerLinkActive="active">Radio Buttons</a>
<a class="nav-link" routerLink="text-box" routerLinkActive="active">Text Box</a>
<a class="nav-link" routerLink="phone" routerLinkActive="active">Phone</a>
<a class="nav-link" routerLink="email" routerLinkActive="active">Email Address</a>
<a class="nav-link" routerLink="date-picker" routerLinkActive="active">Date Picker</a>
<a class="nav-link" routerLink="drop-down" routerLinkActive="active">
Drop Down (Select)
</a>
<div class="nav-brand"> </div>
<div class="nav-brand">Validation</div>
<a class="nav-link" routerLink="./match-value" routerLinkActive="active">
Match Value (Confirmation)
</a>
</div>
</div>
</nav>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 nav-content">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel">
<router-outlet></router-outlet>
</div>
</div>
</main>
</div>
</div>
`,
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}`]
},] },
];
/** @nocollapse */
FormsDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class CheckBoxDemoComponent {
constructor() {
this.model = {
ngModel: null,
name: 'testCheckBox',
isThreeState: false,
required: true,
state: 'off',
value: 'CHECK BOX IS CHECKED!'
};
this.markup = `
<check-box
[name]="model.name"
[required]="model.required"
[threeState]="model.isThreeState"
[checkedValue]="model.value"
[(ngModel)]="model.ngModel"
[(state)]="model.state"
label="Test Check Box"></check-box>
`;
}
}
CheckBoxDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.checkbox-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Check Box</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm" novalidate>
<check-box [(ngModel)]="model.required"
name="required"
label="Is Required"
labelPlacement="after"></check-box>
<check-box [(ngModel)]="model.isThreeState"
name="threeState"
label="Is Three State"
labelPlacement="after"></check-box>
<check-box
[name]="model.name"
[required]="model.required"
[threeState]="model.isThreeState"
[checkedValue]="model.value"
[(ngModel)]="model.ngModel"
[(state)]="model.state"
label="Test Check Box">
</check-box>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
CheckBoxDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class EmailDemoComponent {
constructor() {
this.model = {
id: 'emailField',
name: 'emailField',
match: '',
required: false,
placeholder: 'Example Email Field',
value: ''
};
this.markup = `
<email
[name]="model.name"
label="Email Address"
[(ngModel)]="model.value"
[required]="model.required"
[placeholder]="model.placeholder"></email>
<email name="confirmEmail" label="Confirm Email Address"
[(ngModel)]="model.match"
[matchValue]="{value:model.value,label:'Email Address'}"
[required]="true"
placeholder="Confirm Email"></email>
`;
}
}
EmailDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.email-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Email Address</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<check-box [(ngModel)]="model.required" name="required" label="Is Required" labelPlacement="after"></check-box>
<email
[name]="model.name"
label="Email Address"
[(ngModel)]="model.value"
[parentFormGroup]="testForm.form"
[required]="model.required"
[placeholder]="model.placeholder"></email>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
EmailDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DatePickerDemoComponent {
constructor() {
this.model = {
value: null,
required: false,
minDate: new Date(),
maxDate: new Date()
};
this.markup = `
<date-picker
name="testDatepicker"
label="Test Date Picker"
[(ngModel)]="model.value"
[required]="model.required"
[minDate]="model.minDate"
[maxDate]="model.maxDate"></date-picker>
`;
let /** @type {?} */ minDate = new Date();
minDate.setMonth(minDate.getMonth() - 1);
let /** @type {?} */ maxDate = new Date();
maxDate.setMonth(maxDate.getMonth() + 1);
this.model.minDate = minDate;
this.model.maxDate = maxDate;
}
}
DatePickerDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.date-picker-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Date Picker</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<check-box [(ngModel)]="model.required" name="required" label="Is Required" labelPlacement="after"></check-box>
<date-picker
name="minDate"
label="Minimum Date"
[(ngModel)]="model.minDate"></date-picker>
<date-picker
name="maxDate"
label="Maximum Date"
[(ngModel)]="model.maxDate"></date-picker>
<date-picker
name="testDatepicker"
label="Test Date Picker"
[(ngModel)]="model.value"
[required]="model.required"
[minDate]="model.minDate"
[maxDate]="model.maxDate"></date-picker>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<div class="alert alert-info">
Please include the following css file for the date picker styles.
<pre class="card card-body bg-light">/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css</pre>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
DatePickerDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DropDownDemoComponent {
constructor() {
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 = `
<drop-down
[options]="model.options"
[selectBy]="'id'"
class="full-width"
name="testOptionList"
label="Test Option List"
[required]="model.required"
[(ngModel)]="model.selected"
[isMultiple]="model.isMultiple"
[placeholder]="'Select One...'">
<ng-template let-item>
{{item.id}} - {{ item.text }}
</ng-template>
</drop-down>
`;
}
}
DropDownDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.drop-down-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Drop Down (Select)</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm" novalidate>
<check-box [(ngModel)]="model.required" name="required" label="Is Required" labelPlacement="after"></check-box>
<check-box [(ngModel)]="model.isMultiple" name="isMultiple" label="Is Multiple"
labelPlacement="after"></check-box>
<text-box name="icon" label="Icon" [(ngModel)]="model.icon"></text-box>
<drop-down
[options]="model.options"
[selectBy]="'id'"
class="full-width"
name="testOptionList"
label="Test Option List"
[icon]="model.icon"
[required]="model.required"
[(ngModel)]="model.selected"
[isMultiple]="model.isMultiple"
[placeholder]="'Select One...'">
<ng-template let-item>
{{item.id}} - {{ item.text }}
</ng-template>
</drop-down>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
DropDownDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class IndexComponent {
constructor() {
}
}
IndexComponent.decorators = [
{ type: Component, args: [{
selector: 'index',
encapsulation: ViewEncapsulation.None,
template: ``
},] },
];
/** @nocollapse */
IndexComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedFieldDemoComponent {
constructor() {
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 = `
`;
}
/**
* @return {?}
*/
ngOnInit() {
}
}
NestedFieldDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.nested-field-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Nested Field</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<nested-field [(ngModel)]="model.value" name="nested-field"></nested-field>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light" >{{ model ? (model | json) : '' }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
NestedFieldDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedListDemoComponent {
constructor() {
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 = `
<nested-list
[item]="model.nestedListNode">
</nested-list>
`;
}
}
NestedListDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.nested-list-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Nested List</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<nested-list
[item]="model.nestedListNode">
</nested-list>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#nested-list-markup" role="tab">
HTML
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nested-list-data" role="tab">
Data
</a>
</li>
</ul>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
NestedListDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NestedCheckBoxDemoComponent {
constructor() {
this.model = {
required: false,
selected: [],
options: []
};
this.initialized = false;
this.markup = `
<nested-check-box
[options]="model.options"
[(ngModel)]="model.selected"
[required]="model.required"
name="testList"
label="Test Nested Options"
[searchBy]="['name']">
</nested-check-box>
`;
}
/**
* @return {?}
*/
ngOnInit() {
setTimeout(() => {
this.model.options.splice(1, this.model.options.length);
for (let /** @type {?} */ 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);
}
}
NestedCheckBoxDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.nested-check-box-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Nested Check Box</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<check-box [(ngModel)]="model.required"
name="required"
label="Is Required"
labelPlacement="after"></check-box>
<nested-check-box
[options]="model.options"
[(ngModel)]="model.selected"
[required]="model.required"
name="testList"
label="Test Nested Options"
[selectBy]="'id'"
[searchBy]="['name']">
</nested-check-box>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light" *ngIf="initialized">{{ model ? (model | json) : '' }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
NestedCheckBoxDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class PhoneDemoComponent {
constructor() {
this.model = {
id: 'phoneField',
name: 'phoneField',
required: false,
value: '111-222-3333'
};
this.markup = `
<phone [name]="model.name"
label="Phone Number"
[(ngModel)]="model.value"
[parentFormGroup]="testForm.form"
[required]="model.required"></phone>
`;
}
}
PhoneDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.phone-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Email Address</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<check-box [(ngModel)]="model.required" name="required" label="Is Required" labelPlacement="after"></check-box>
<phone [name]="model.name"
label="Phone Number"
[(ngModel)]="model.value"
[parentFormGroup]="testForm.form"
[required]="model.required"></phone>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
PhoneDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RadioDemoComponent {
constructor() {
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 = `
<radio-group [name]="model.name"
label="Test Radio Group"
[options]="model.options"
[required]="model.required"
[(ngModel)]="model.value">
</radio-group>
`;
}
}
RadioDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.radio-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Radio Buttons</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm" novalidate>
<check-box [(ngModel)]="model.required"
name="required"
label="Is Required"
labelPlacement="after"></check-box>
<check-box [(ngModel)]="model.horizontal"
name="horizontal"
label="Is Horizontal"
labelPlacement="after"></check-box>
<radio-group [name]="model.name"
label="Test Radio Group"
[direction]="model.horizontal ? 'horizontal' : 'vertical'"
[options]="model.options"
[required]="model.required"
[(ngModel)]="model.value">
</radio-group>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
RadioDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TextBoxDemoComponent {
constructor() {
this.model = {
name: 'textBoxField',
icon: '',
type: 'text',
shouldMatch: false,
match: '',
required: false,
placeholder: 'Example Text Field',
value: ''
};
this.markup = `
<text-box
[name]="model.name"
[type]="model.type"
label="Test Text Field"
[(ngModel)]="model.value"
[matchValue]="model.shouldMatch ? {value:model.match,label:'Matching Field'} : null"
[required]="model.required"
[placeholder]="model.placeholder">
<div class="input-group-prepend" *ngIf="model.icon.length > 0">
<span class="input-group-text">
<span class="fa fa-{{model.icon}}"></span>
</span>
</div>
</text-box>
`;
}
}
TextBoxDemoComponent.decorators = [
{ type: Component, args: [{
selector: '.text-box-demo',
encapsulation: ViewEncapsulation.None,
template: `<h4>Text Box</h4>
<h5>Example</h5>
<div class="card card-body bg-light form-group">
<form #testForm="ngForm">
<check-box [(ngModel)]="model.required" name="required" label="Is Required" labelPlacement="after"></check-box>
<check-box name="shouldMatch" label="Should Match Matching Field" [(ngModel)]="model.shouldMatch"
labelPlacement="after"></check-box>
<text-box name="match" label="Matching Field" [(ngModel)]="model.match"></text-box>
<text-box name="icon" label="Icon" [(ngModel)]="model.icon"></text-box>
<div class="clearfix"></div>
<text-box
[name]="model.name"
[type]="model.type"
label="Test Text Field"
[(ngModel)]="model.value"
[matchValue]="model.shouldMatch ? {value:model.match,label:'Matching Field'} : null"
[required]="model.required"
[placeholder]="model.placeholder">
<div class="input-group-prepend" *ngIf="model.icon.length > 0">
<span class="input-group-text">
<span class="fa fa-{{model.icon}}"></span>
</span>
</div>
</text-box>
<submit-button label="Submit" [formGroup]="testForm.form"></submit-button>
</form>
</div>
<h5>Data Model</h5>
<pre class="card card-body bg-light">{{ model | json }}</pre>
<h5>Markup</h5>
<pre class="card card-body bg-light">{{ markup }}</pre>
`
},] },
];
/** @nocollapse */
TextBoxDemoComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const 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
}
]
}
];
class 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: []
},] },
];
/** @nocollapse */
FormsDemoModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Put all exports here!
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
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