@vendasta/store/order-form/dropdown-form-section/dropdown-form-section.component.js

import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
var DropDownFormSectionComponent = (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\">&nbsp;</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\"> &nbsp;</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 };