import { Component, Input, Output, EventEmitter, Inject } from '@angular/core';
import { Validators, UntypedFormControl } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "../core";
import * as i3 from "@angular/forms";
import * as i4 from "./user.service";
import * as i5 from "../user-config";
import * as i6 from "@angular/common";
import * as i7 from "@angular/material/button";
import * as i8 from "@angular/material/checkbox";
import * as i9 from "@angular/material/form-field";
import * as i10 from "@angular/material/input";
import * as i11 from "@angular/material/core";
import * as i12 from "@angular/material/select";
import * as i13 from "@angular/material/card";
import * as i14 from "@angular/flex-layout/flex";
import * as i15 from "@angular/flex-layout/extended";
import * as i16 from "../file-dropper/file-dropper.component";
import * as i17 from "../document-viewer/document-viewer.component";
const errorMessages = {
    name: {
        required: 'Name is required'
    },
    email: {
        required: 'Email is required',
        email: 'Invalid email',
    },
    password: {
        required: 'Password is required'
    },
    user_type_id: {
        required: 'User Type is required'
    }
};
export class UserFormComponent {
    constructor(dialogRef, user, http, alertService, errorHandler, fb, formValidatorService, userService, userConfigService) {
        this.dialogRef = dialogRef;
        this.user = user;
        this.http = http;
        this.alertService = alertService;
        this.errorHandler = errorHandler;
        this.fb = fb;
        this.formValidatorService = formValidatorService;
        this.userService = userService;
        this.userConfigService = userConfigService;
        this.isWorking = false;
        this.isPasswordRequired = false;
        this.updateMode = false;
        this.userTypes = [
            { title: 'Admin', value: 2 },
            { title: 'Normal User', value: 3 },
        ];
        this.users = [];
        this.userRoles = [];
        this.roles = [];
        this.fileList = [];
        this.onSave = new EventEmitter();
        this.config = this.userConfigService.getConfig();
    }
    get roleForms() {
        return this.userForm.get('roles');
    }
    ngOnInit() {
        this.userTypes = this.config.userConfig.showUserTypes
            ? this.config.userConfig.userTypes
            : this.userTypes;
        this.userForm = this.fb.group({
            id: [''],
            name: new UntypedFormControl('', Validators.compose([Validators.required])),
            email: new UntypedFormControl('', Validators.compose([Validators.required, Validators.email])),
            password: new UntypedFormControl(''),
            phone: new UntypedFormControl(''),
            user_type_id: new UntypedFormControl('', Validators.required),
            roles: this.fb.array([]),
            roles_exists: [[]],
            client_id: [''],
            signature_url: [''],
            signature: [''],
            is_temporary_password: [true],
        });
        this.userForm.patchValue(this.user);
        if (this.user.hasOwnProperty('id')) {
            this.updateMode = true;
            this.userForm.controls.user_type_id.setValue(this.user.user_type_id);
            this.userForm.controls.roles_exists.setValue(this.user.roles || []);
        }
        if (this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) {
            this.loadRoles();
        }
        this.fileConfig = {
            fileId: 'subjectFile',
            containerId: 'subjectFileContainer',
            styles: {
                height: '200px'
            },
            multiple: false,
            acceptFile: '*',
            maxSize: 10,
            acceptFileText: 'PNG and JPEG only'
        };
        this.viewerConfig = {
            viewerStyle: {
                height: '200px',
                width: '100%'
            }
        };
    }
    loadRoles() {
        this.isWorking = true;
        let filter = {};
        filter = { client_id: this.user?.client_id || '' };
        this.http.get('api/roles', { params: filter }).toPromise().then((res) => {
            let roles = res.data;
            /* Lets set the roles this user has */
            for (let role of roles) {
                role.selected = this.userForm.value.roles_exists.find(roleData => roleData.id == role.id) ? true : false;
            }
            this.roles = roles;
            this.userRoles = roles.reduce((r, a) => {
                r[a.module_id] = [...r[a.module_id] || [], a];
                return r;
            }, {});
            this.isWorking = false;
        });
    }
    async save() {
        if (!this.userForm.valid) {
            return;
        }
        try {
            this.isWorking = true;
            let data = this.userForm.getRawValue();
            let roles = [];
            this.roles.forEach((role) => {
                if (role.selected) {
                    roles[role.id] = role;
                }
            });
            data.roles = roles;
            const result = this.updateMode ? await this.userService.updateUser(data)
                : await this.userService.createUser(data);
            this.alertService.addAlert('Successfully saved the user. ', 'success');
            this.dialogRef.close(result);
        }
        catch (error) {
            this.errorHandler.handleError(error);
        }
        finally {
            this.isWorking = false;
        }
    }
    roleSelected(event, roleId) {
        this.roles.forEach((role) => {
            if (role.id == roleId) {
                role.selected = event.checked;
            }
        });
    }
    /** Method to evaluate form fields*/
    isFieldValid(field) {
        return this.formValidatorService.isFieldValid(field, this.userForm);
    }
    /** Method to find error in form fields*/
    getErrorMessage(field) {
        return this.formValidatorService.getErrorMessage(field, this.userForm, errorMessages);
    }
    closeDialog() {
        this.dialogRef.close();
    }
    async fileChanged(event) {
        this.fileList = event;
        if (this.fileList.length > 0) {
            const result = await this.uploadEntityFile(this.fileList[0]);
            this.userForm
                .get('signature')
                .setValue(result.item.file);
            this.userForm
                .get('signature_url')
                .setValue(result.item.url);
            this.fileList = [];
        }
    }
    async removeFile() {
        if (this.userForm.value.signature) {
            try {
                this.userForm.patchValue({
                    signature: '',
                    signature_url: ''
                });
            }
            catch (error) {
                this.alertService.addAlert('Unable to remove file, try later', 'warn');
            }
        }
    }
    uploadEntityFile(file) {
        const formData = new FormData();
        formData.append('fileData', file, file.name);
        return this.http
            .skipHeader()
            .post('api/entity-files-upload', formData).toPromise();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.HttpService }, { token: i2.AlertService }, { token: i2.ErrorHandlerService }, { token: i3.UntypedFormBuilder }, { token: i2.FormValidatorService }, { token: i4.UserService }, { token: i5.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"d-flex flex-column justify-content-start gap-1\">\n              <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n              <small class=\"text-secondary\">Should this user to update password on first login?</small>\n            </div>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\">\n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n                Save\n              </button>\n              <button [disabled]=\"isWorking\" mat-flat-button (click)=\"closeDialog()\" type=\"button\">\n                Cancel\n              </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i13.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i13.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i15.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i16.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: i17.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "pipe", type: i6.KeyValuePipe, name: "keyvalue" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'user-form', template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"d-flex flex-column justify-content-start gap-1\">\n              <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n              <small class=\"text-secondary\">Should this user to update password on first login?</small>\n            </div>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\">\n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n                Save\n              </button>\n              <button [disabled]=\"isWorking\" mat-flat-button (click)=\"closeDialog()\" type=\"button\">\n                Cancel\n              </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>\n" }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: i2.HttpService }, { type: i2.AlertService }, { type: i2.ErrorHandlerService }, { type: i3.UntypedFormBuilder }, { type: i2.FormValidatorService }, { type: i4.UserService }, { type: i5.UserConfigService }], propDecorators: { userId: [{
                type: Input
            }], onSave: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 