@vendasta/store
Version:
Components and data for Store
124 lines (123 loc) • 9.3 kB
JavaScript
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
var DropDownFormSectionComponent = /** @class */ (function () {
function DropDownFormSectionComponent() {
this.startOpen = false;
this.displayAutoTitle = false;
this.titleText = '';
this.displayAutoDescription = true;
this.descriptionText = '';
this.editingHint = '';
this.expandable = true;
this.autoDescriptionText = '';
this.iconName = 'help_outline';
this.subscriptions = [];
this.uniqueIndex = 1;
this.autoTitleText = '';
}
DropDownFormSectionComponent.prototype.ngOnInit = function () {
var _this = this;
while (this.parentForm.controls.hasOwnProperty(this.titleText + this.uniqueIndex)) {
this.uniqueIndex += 1;
}
this.parentForm.addControl(this.titleText + this.uniqueIndex, this.toFormGroup(this.fields));
var form = this.parentForm.controls[this.titleText + this.uniqueIndex];
for (var key in form.controls) {
if (form.controls.hasOwnProperty(key)) {
if (this.prepopulatedData != null && this.prepopulatedData.hasOwnProperty(key)) {
form.controls[key].setValue(this.prepopulatedData[key]);
}
}
}
this.subscriptions.push(form.statusChanges.subscribe(function (change) {
var missingFields = false;
for (var control in form.controls) {
if (!form.controls[control].value ||
(form.controls[control].value.constructor === Array && !form.controls[control].value[0])) {
_this.iconName = 'help_outline';
missingFields = true;
if (change === 'INVALID') {
_this.autoTitleText = '* Please fill out all required fields';
if (form.controls[control].dirty || form.controls[control].touched) {
_this.iconName = 'warning';
break;
}
}
else {
_this.autoTitleText = 'Optional fields unanswered';
}
}
}
if (!missingFields) {
_this.iconName = 'check_circle';
_this.autoTitleText = 'Complete';
}
}));
if (this.displayAutoDescription) {
this.subscriptions.push(form.valueChanges.subscribe(function (changes) {
var description = '';
for (var key in changes) {
if (changes.hasOwnProperty(key) && changes[key] !== null && changes[key].length > 0) {
if (changes[key][0].name) {
for (var fileKey in changes[key]) {
if (changes[key][fileKey] != null) {
description += changes[key][fileKey].name;
description += ', ';
}
}
}
else {
description += changes[key];
description += ', ';
}
}
}
_this.autoDescriptionText = description.substring(0, description.length - 2);
}));
}
form.updateValueAndValidity({ onlySelf: false, emitEvent: true });
};
DropDownFormSectionComponent.prototype.toFormGroup = function (formFields) {
var _this = this;
var group = {};
formFields.forEach(function (field) {
var formControl;
if (field.controlType === 'checkbox') {
formControl = new FormControl(field.value);
}
else {
formControl = field.required ? new FormControl(field.value, Validators.required) :
new FormControl(field.value);
}
group[field.id] = formControl;
_this.subscriptions.push(formControl.valueChanges.subscribe(function (value) { return field.value = value; }));
});
return new FormGroup(group);
};
DropDownFormSectionComponent.prototype.ngOnDestroy = function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
DropDownFormSectionComponent.decorators = [
{ type: Component, args: [{
selector: 'va-dropdown-form-section',
template: "\n <mat-card *ngIf=\"!expandable && !(expandable == undefined)\" class=\"not-expandable-card\">\n <mat-icon class=\"not-expandable-icon valid\"> check_circle</mat-icon>\n <mat-card-header *ngIf=\"!displayAutoTitle\" class=\"not-expandable-header\">\n {{ titleText }}\n </mat-card-header>\n <mat-card-header *ngIf=\"displayAutoTitle\" class=\"not-expandable-header valid\">\n <div class=\"title\"> {{ titleText }}</div>\n <div *ngIf=\"titleText && autoTitleText\"> </div>\n <ng-container><i> Complete </i></ng-container>\n </mat-card-header>\n <mat-panel-description class=\"not-expandable-description\">\n {{ descriptionText }}\n </mat-panel-description>\n </mat-card>\n <mat-expansion-panel *ngIf=\"expandable || expandable == undefined\" [expanded]=\"startOpen\">\n <mat-expansion-panel-header>\n <div class=\"dropdown-form-header\">\n <mat-icon\n [ngClass]=\"{invalid: iconName=='warning', valid: iconName=='check_circle', question: iconName=='help_outline'}\">\n {{ iconName }}\n </mat-icon>\n <mat-panel-title *ngIf=\"!displayAutoTitle\">\n {{ titleText }}\n </mat-panel-title>\n <mat-panel-title *ngIf=\"displayAutoTitle\"\n [ngClass]=\"{valid: iconName=='check_circle', invalid: iconName=='warning'}\">\n <div class=\"title\"> {{ titleText }}</div>\n <div *ngIf=\"titleText && autoTitleText\"> </div>\n <ng-container><i> {{autoTitleText}} </i></ng-container>\n </mat-panel-title>\n <mat-panel-description *ngIf=\"displayAutoDescription\" [ngClass]=\"{invalid: iconName=='warning'}\">\n {{ autoDescriptionText }}\n </mat-panel-description>\n <mat-panel-description *ngIf=\"!displayAutoDescription\" [ngClass]=\"{invalid: iconName=='warning'}\">\n <i> {{descriptionText}} </i>\n </mat-panel-description>\n </div>\n </mat-expansion-panel-header>\n <div class=\"expansion-panel-body\">\n <va-field *ngFor=\"let field of fields\" [field]=\"field\"\n [form]=\"parentForm.controls[titleText + uniqueIndex]\"></va-field>\n <p *ngIf=\"editingHint != ''\" class=\"editing-hint\"><i>{{ editingHint }}</i></p>\n </div>\n </mat-expansion-panel>\n ",
styles: [":host-context(va-dropdown-form-section) { font-size: 14px; } :host-context(va-dropdown-form-section) .expansion-panel-body { margin-top: -10px; display: block; width: 60%; } .mat-expanded { transition: margin 400ms; } .mat-expansion-panel { transition: margin 400ms; } .dropdown-form-header { width: 100%; display: flex; } mat-panel-description { align-self: center; display: flex; flex: inherit; } mat-panel-description.invalid { color: #c62828; } mat-icon { margin-right: 7px; align-self: center; } mat-icon.valid { color: #4caf50; } mat-icon.invalid { color: #c62828; } mat-icon.question { color: #9e9e9e; } mat-panel-description { display: initial; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } mat-panel-title { align-self: center; flex: none; margin-right: 20px; } mat-panel-title.valid { color: #4caf50; } mat-panel-title.invalid { color: #c62828; } .editing-hint { color: #9e9e9e; } .title { color: #212121; } .not-expandable-card { background: white; cursor: default; font-size: 15px; display: flex; height: 48px; align-items: center; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .not-expandable-card .not-expandable-icon { margin-left: 24px; } .not-expandable-card .not-expandable-header { display: flex; } .not-expandable-card .not-expandable-description { margin-left: 22px; } .not-expandable-card .valid { color: #4caf50; } "]
},] },
];
/** @nocollapse */
DropDownFormSectionComponent.ctorParameters = function () { return []; };
DropDownFormSectionComponent.propDecorators = {
'prepopulatedData': [{ type: Input },],
'startOpen': [{ type: Input },],
'parentForm': [{ type: Input },],
'displayAutoTitle': [{ type: Input },],
'titleText': [{ type: Input },],
'displayAutoDescription': [{ type: Input },],
'descriptionText': [{ type: Input },],
'fields': [{ type: Input },],
'editingHint': [{ type: Input },],
'expandable': [{ type: Input },],
};
return DropDownFormSectionComponent;
}());
export { DropDownFormSectionComponent };