{"__symbolic":"module","version":4,"metadata":{"FormElementComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"form-element","template":"\n    <ng-container injectionPlaceholder></ng-container>\n    <ng-container *defaultFormGroupDef=\"let group\">\n      <div class=\"formGroup\">\n        <div\n          fxLayout=\"{{group.model.direction}} wrap\"\n          [fxLayoutGap]=\"group.model.gap\"\n          fxLayoutAlign=\"start\"\n        >\n          <div class=\"formElement\" *ngFor=\"let groupModel of group.model.items\">\n            <form-element\n              [model]=\"groupModel\"\n              [group]=\"group.formGroup\"\n            ></form-element>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *defaultFormDividerDef=\"let model\">\n      <div class=\"formDivider\">{{ model.placeholder }}</div>\n    </ng-container>\n    <ng-container [formGroup]=\"group\" *ngIf=\"model.type != 'timed-callback'\">\n      <mat-form-field\n        *ngIf=\"\n          model.type != 'buttons' &&\n          model.type != 'slider' &&\n          model.type != 'datepicker' &&\n          model.type != 'checkbox' &&\n          model.type != 'button' &&\n          model.type != 'toggle' &&\n          model.type != 'group' &&\n          model.type != 'divider' &&\n          model.type != 'upload'\n        \"\n      >\n        <mat-icon matPrefix *ngIf=\"model.prefix\">{{ model.prefix }}</mat-icon>\n        <ng-container\n          *ngIf=\"\n            model.type == 'text' ||\n            model.type == 'password' ||\n            model.type == 'email' ||\n            model.type == 'number'\n          \"\n        >\n          <input\n            type=\"{{model.type}}\"\n            matInput\n            [formControl]=\"group.get(model.name)\"\n            placeholder=\"{{model.placeholder}}\"\n            [required]=\"model.required\"\n            [autocomplete]=\"model.autocomplete\"\n          />\n        </ng-container>\n\n        <ng-container *ngIf=\"model.type == 'colorpicker'\">\n          <input\n            type=\"text\"\n            [colorPicker]=\"group.get(model.name).value\"\n            [cpOutputFormat]=\"'rgba'\"\n            (colorPickerChange)=\"group.get(model.name).setValue($event)\"\n            matInput\n            [formControl]=\"group.get(model.name)\"\n            placeholder=\"{{model.placeholder}}\"\n            [required]=\"model.required\"\n            [autocomplete]=\"model.autocomplete\"\n          />\n          <mat-icon matSuffix [style.color]=\"group.get(model.name).value\"\n            >label</mat-icon\n          >\n        </ng-container>\n\n        <ng-container *ngIf=\"model.type == 'textarea'\">\n          <textarea\n            matInput\n            [formControl]=\"group.get(model.name)\"\n            placeholder=\"{{model.placeholder}}\"\n            [required]=\"model.required\"\n            [ngStyle]=\"model.style\"\n          ></textarea>\n        </ng-container>\n\n        <ng-container *ngIf=\"model.type == 'select'\">\n          <mat-select\n            placeholder=\"{{model.placeholder}}\"\n            [formControl]=\"group.get(model.name)\"\n            [required]=\"model.required\"\n          >\n            <mat-option\n              *ngFor=\"let item of model.items\"\n              [value]=\"lo.get(item, model.valueField)\"\n            >\n              {{\n                model.displayField\n                  ? lo.get(item, model.displayField)\n                  : lo.get(item, model.valueField)\n              }}\n            </mat-option>\n          </mat-select>\n        </ng-container>\n\n        <ng-container *ngIf=\"model.type == 'autocomplete'\">\n          <input\n            matInput\n            placeholder=\"{{model.placeholder}}\"\n            [matAutocomplete]=\"auto\"\n            [formControl]=\"group.get(model.name)\"\n            [required]=\"model.required\"\n          />\n          <mat-autocomplete #auto=\"matAutocomplete\">\n            <mat-option\n              *ngFor=\"let item of (filteredItems | async)\"\n              [value]=\"lo.get(item, model.valueField)\"\n            >\n              <span>\n                {{\n                  model.displayField\n                    ? lo.get(item, model.displayField)\n                    : lo.get(item, model.valueField)\n                }}</span\n              >\n            </mat-option>\n          </mat-autocomplete>\n        </ng-container>\n\n        <mat-icon matSuffix *ngIf=\"model.suffix\">{{ model.suffix }}</mat-icon>\n        <mat-icon\n          class=\"valid\"\n          matSuffix\n          *ngIf=\"\n            model.suffixValidation &&\n            !group.get(model.name).pristine &&\n            group.get(model.name).valid\n          \"\n          >check</mat-icon\n        >\n        <mat-icon\n          class=\"invalid\"\n          matSuffix\n          *ngIf=\"\n            model.suffixValidation &&\n            !group.get(model.name).pristine &&\n            !group.get(model.name).valid\n          \"\n          >clear</mat-icon\n        >\n      </mat-form-field>\n\n      <ng-container *ngIf=\"model.type == 'datepicker'\">\n        <mat-form-field>\n          <input\n            matInput\n            [matDatepicker]=\"picker\"\n            placeholder=\"{{model.placeholder}}\"\n            [formControl]=\"group.get(model.name)\"\n          />\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"picker\"\n          ></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n      </ng-container>\n\n      <mat-slide-toggle\n        [formControl]=\"group.get(model.name)\"\n        *ngIf=\"model.type == 'toggle'\"\n        >{{ model.placeholder }}</mat-slide-toggle\n      >\n\n      <ng-container *ngIf=\"model.type == 'buttons'\">\n        <div class=\"ngx-form-generator-buttons\">\n          <div class=\"floated-label\">{{ model.placeholder }}</div>\n          <mat-button-toggle-group\n            [multiple]=\"model.multiple\"\n            appearance=\"legacy\"\n            [value]=\"group.get(model.name).value\"\n            (change)=\"group.get(model.name).setValue(buttonGroup.value)\"\n            #buttonGroup=\"matButtonToggleGroup\"\n          >\n            <mat-button-toggle\n              [value]=\"item.value\"\n              *ngFor=\"let item of model.items\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n            </mat-button-toggle>\n          </mat-button-toggle-group>\n        </div>\n      </ng-container>\n\n      <div\n        ng2FileDrop\n        class=\"formUploader\"\n        [uploader]=\"model.uploader\"\n        *ngIf=\"model.type == 'upload' && model.preview\"\n      >\n        <ng-container *ngIf=\"model.filePath && checkForFile()\">\n          <div class=\"clearUpload\">\n            <mat-icon (click)=\"clearUpload()\">remove_circle_outline</mat-icon>\n          </div>\n          <div\n            class=\"formUploaderPreview\"\n            [ngStyle]=\"{ 'background-image': 'url(\\'' + model.filePath + '/' + checkForFile() + '\\')' }\"\n          ></div>\n        </ng-container>\n      </div>\n\n      <input\n        type=\"file\"\n        ng2FileSelect\n        [uploader]=\"model.uploader\"\n        *ngIf=\"model.type == 'upload' && !model.preview\"\n      />\n\n      <div *ngIf=\"model.type == 'slider'\">\n        <div class=\"floated-label\">{{ model.placeholder }}</div>\n        <mat-slider\n          [max]=\"model.max\"\n          [min]=\"model.min\"\n          [step]=\"model.step\"\n          [formControl]=\"group.get(model.name)\"\n        >\n        </mat-slider>\n      </div>\n\n      <div class=\"checkbox\" *ngIf=\"model.type == 'checkbox'\">\n        <mat-checkbox\n          (click)=\"checkForDialog()\"\n          [formControl]=\"group.get(model.name)\"\n          [required]=\"model.required\"\n          >{{ model.placeholder }}</mat-checkbox\n        >\n      </div>\n\n      <button\n        mat-raised-button\n        [disabled]=\"!group.valid\"\n        color=\"{{model.color}}\"\n        *ngIf=\"model.type == 'button'\"\n      >\n        {{ model.placeholder }}\n      </button>\n    </ng-container>\n  ","styles":["\n      .floated-label {\n        transform: scale(0.75);\n        transform-origin: top left;\n        font-size: 16px;\n      }\n\n      .mat-slider {\n        width: 100%;\n        height: 40px;\n        margin-top: -8px;\n      }\n\n      .formUploader {\n        width: 192px;\n        height: 108px;\n        border: 1px dashed grey;\n      }\n\n      .formUploaderPreview {\n        width: 100%;\n        height: 100%;\n      }\n\n      .clearUpload {\n        position: relative;\n      }\n\n      .clearUpload > .mat-icon {\n        color: red;\n        position: absolute;\n        cursor: pointer;\n        right: 0px;\n        top: 0px;\n      }\n    "]}]}],"members":{"_injectionPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":311,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_defaultFormGroupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":312,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵd"}]}]}],"_defaultFormDividerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":314,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵh"}]}]}],"_formGroupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":316,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}]}],"_formDividerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":317,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵg"}]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":319,"character":3}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":320,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"reference","module":"@angular/material","name":"NativeDateAdapter","line":326,"character":37}]},{"__symbolic":"reference","module":"@angular/material","name":"MatDialog","line":327,"character":20}]}],"filter":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"clearUpload":[{"__symbolic":"method"}],"checkForFile":[{"__symbolic":"method"}],"checkForDialog":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"FormGeneratorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"form-generator","template":"\n            <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" class=\"formGenerator\" novalidate>\n                <div class=\"error\" *ngIf=\"error\">\n                    <mat-card>\n                        {{error}}\n                    </mat-card>\n                </div>\n                <ng-container formPlaceholder></ng-container>\n                <ng-container *defaultFormTemplateDef=\"let formData\">\n                  <div class=\"form\" fxLayout=\"{{formData.options.direction}} wrap\" [fxLayoutGap]=\"formData.options.gap\" fxLayoutAlign=\"start\">\n                    <div class=\"formElement\" *ngFor=\"let model of formData.blueprint\">\n                      <form-element [model]=\"model\" [group]=\"formData.group\"></form-element>\n                    </div>\n                  </div>\n                </ng-container>\n            </form>\n              ","styles":["\n            .valid {\n              color: green;\n              margin-left: 8px;\n            }\n\n            .invalid {\n              color: red;\n              margin-left: 8px;\n            }\n\n            .error {\n              margin-bottom: 18px;\n\n              .mat-card {\n                color: #fff;\n                background-color: #F44336;\n                padding: 12px;\n              }\n            }\n          "]}]}],"members":{"formBlueprint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"formOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"_formPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":87,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"_defaultFormTemplateDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":88,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵf"}]}]}],"_formTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":89,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵe"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":102,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"submit":[{"__symbolic":"method"}],"calcHeight":[{"__symbolic":"method"}],"updateUploaders":[{"__symbolic":"method"}],"generateGroup":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"updateValues":[{"__symbolic":"method"}],"updateValue":[{"__symbolic":"method"}],"updateItems":[{"__symbolic":"method"}],"updateItem":[{"__symbolic":"method"}],"generateField":[{"__symbolic":"method"}]}},"NgxFormGeneratorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":37,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":41,"character":4},{"__symbolic":"reference","module":"ng2-file-upload","name":"FileUploadModule","line":42,"character":4},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatGridListModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSlideToggleModule","line":60,"character":4}],"declarations":[{"__symbolic":"reference","name":"FormGeneratorComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵh"}],"exports":[{"__symbolic":"reference","name":"FormGeneratorComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵg"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[formPlaceholder]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":4,"character":36}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[injectionPlaceholder]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":4,"character":36}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[formGroupDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[defaultFormGroupDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[formTemplateDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":17,"character":1},"arguments":[{"selector":"[defaultFormTemplateDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":22,"character":1},"arguments":[{"selector":"[formDividerDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":27,"character":1},"arguments":[{"selector":"[defaultFormDividerDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"FormElementComponent":"./lib/form-element/form-element.component","FormGeneratorComponent":"./lib/form-generator/form-generator.component","NgxFormGeneratorModule":"./lib/ngx-form-generator.module","ɵa":"./lib/internal-templates","ɵb":"./lib/internal-templates","ɵc":"./lib/templates","ɵd":"./lib/templates","ɵe":"./lib/templates","ɵf":"./lib/templates","ɵg":"./lib/templates","ɵh":"./lib/templates"},"importAs":"ngx-form-generator"}