{"__symbolic":"module","version":4,"metadata":{"VkUsersService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":14,"character":28}]}],"getAllUsers":[{"__symbolic":"method"}],"getRolesForUser":[{"__symbolic":"method"}],"newUser":[{"__symbolic":"method"}],"editUser":[{"__symbolic":"method"}],"_setAuthHeaders":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"VkUsersComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"vk-users","template":"<ng-container>\r\n    <div class=\"title-container\">\r\n        <p class=\"users-title\">Gestión de Usuarios</p>\r\n    </div>\r\n    \r\n    <div class=\"contendor\">\r\n        <div class=\"wrapper\"> \r\n            <div class=\"content\">\r\n                <ng-container *ngIf=\"loadingUsers; else usersListTemplate\">\r\n                    <mat-progress-bar mode=\"indeterminate\" color=\"warn\"></mat-progress-bar>\r\n                    <p>Cargando usuarios...</p>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <ng-template #usersListTemplate> \r\n            <ng-container>\r\n                <form #f=\"ngForm\" autocomplete=\"off\">\r\n                    <div class=\"new-preferred-customer-container\">\r\n                        <div class=\"form-group form-users\">\r\n                            <div class=\"header-container\">\r\n                                <div class=\"container-search\" fxLayout=\"column\" fxLayout.gt-xs=\"row\" fxLayoutGap=\"10px\"\r\n                                    style=\"display: flex;\">\r\n                                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"50\">\r\n                                        <mat-form-field appearance=\"standard\">\r\n                                            <input matInput placeholder=\"Buscar usuario\" type=\"text\" (input)=\"onSearch($event.target.value)\" [disabled]=\"users?.length === 0\">\r\n                                        </mat-form-field>\r\n                                    </div> \r\n                                    <!-- <div class=\"formRow row-filter\" fxFlex=\"100\" fxFlex.gt-xs=\"50\">\r\n                                        <button mat-raised-button color=\"warn\" type=\"submit\" (click)=\"onFilter()\">Filtrar</button>\r\n                                    </div> -->\r\n                                    <div class=\"formRow row-new\" fxFlex=\"100\" fxFlex.gt-xs=\"50\">\r\n                                        <button mat-raised-button color=\"warn\" (click)=\"onCreate()\"><mat-icon>add_circle</mat-icon> Usuario</button>       \r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"body-container\" fxLayout=\"column\" fxLayout.gt-xs=\"row\" fxLayoutGap=\"20px\">\r\n                                <div class=\"formRow\" fxFlex=\"100\" > \r\n                                    <div *ngIf=\"loadingUsers\">\r\n                                        <mat-progress-bar color=\"warn\" mode=\"indeterminate\">Cargando Usuarios...</mat-progress-bar>\r\n                                    </div>\r\n                                    <div *ngIf=\"!loadingUsers && users?.length > 0 else noUsersTemplate\">\r\n                                        <table mat-table [dataSource]=\"_users\" class=\"mat-elevation-z8\" class=\"margen\"> \r\n    \r\n                                            <ng-container matColumnDef=\"createDate\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Fecha de creación </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{getDate(user.CreateDate)}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"userName\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Nombre </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{user.UserName}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"email\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Email </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{user.Email}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"lastActivityDate\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Fecha de última actividad </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{getDate(user.LastActivityDate)}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"isApproved\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Activo </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{user.IsApproved ? 'Sí' : 'No'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"isLockedOut\">\r\n                                                <th mat-header-cell *matHeaderCellDef> Bloqueado </th>\r\n                                                <td mat-cell *matCellDef=\"let user\" class=\"size-column-code\"> {{user.IsApproved ? 'Sí' : 'No'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container matColumnDef=\"actions\">\r\n                                                <th mat-header-cell *matHeaderCellDef>Acciones</th> \r\n                                                <td  mat-cell *matCellDef=\"let element\">\r\n                                                    <a class=\"icon-btn\" title=\"Ver Usuario\" (click)=\"onView(element)\"><mat-icon >visibility</mat-icon></a>\r\n                                                </td>\r\n                                            </ng-container>\r\n                                        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n                                        </table>\r\n                                    </div>\r\n    \r\n                                    <ng-template #noUsersTemplate>\r\n                                        <div class=\"table-msg\">\r\n                                            <p>No se encontraron usuarios</p>\r\n                                            <button mat-raised-button class=\"btn mat-raised-button mat-button-base\" (click)=\"onRefresh()\">Volver a cargar</button>       \r\n                                        </div>\r\n                                    </ng-template>\r\n                                \r\n                                </div>\r\n                            </div> \r\n                        </div>  \r\n                    </div> \r\n                </form>\r\n            </ng-container>    \r\n        </ng-template>\r\n    </div>\r\n</ng-container>","styles":[".title-container{display:flex;flex-direction:column;padding:10px;margin:10px 0;background-color:#d32020}.title-container .users-title{margin:0 0 10px;color:#fff;font-size:24px;font-weight:500}.contendor{height:70vh}.contendor .wrapper{margin:5px 0;padding:10px 5px 5px;background-color:#fff}.contendor .wrapper .content{display:block;flex-direction:row;height:100%;width:100%;margin-bottom:15px}.contendor .wrapper .content p{font-size:12px;text-align:left;justify-self:start;align-self:center}.contendor .new-preferred-customer-container .form-users .header-container{margin:8px 0;padding:10px 5px 5px;border:1px solid #e0e0e0;border-radius:4px;box-shadow:2px 2px 8px rgba(80,80,80,.1)}.contendor .new-preferred-customer-container .form-users .header-container .text{font-size:12px;font-weight:400}.contendor .new-preferred-customer-container .form-users .header-container .input-search{margin-right:8px;border:1px solid #ccc;height:22px;font-size:12px}.contendor .new-preferred-customer-container .form-users .header-container .input-search:focus{border:1px solid #d32020}.contendor .new-preferred-customer-container .form-users .header-container .btn-search{background-color:#d32020;color:#fff}.contendor .new-preferred-customer-container .form-users .header-container .inlineinput{display:inline}.contendor .new-preferred-customer-container .form-users .header-container .container-search{display:flex;margin-top:10px;min-width:100%}.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow{width:49%;position:relative}.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow button:focus,.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow input:focus,.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow select:focus,.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow textarea:focus{outline:0}.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow.row-filter{margin-top:4px;text-align:left}.contendor .new-preferred-customer-container .form-users .header-container .container-search .formRow.row-new{margin-top:22px!important;text-align:right}.contendor .new-preferred-customer-container .form-users .body-container{margin-top:10px;min-width:100%;overflow:hidden!important}.contendor .new-preferred-customer-container .form-users .body-container .formRow{position:relative;overflow-y:auto;max-height:63vh}.contendor .new-preferred-customer-container .form-users .body-container .formRow button:focus,.contendor .new-preferred-customer-container .form-users .body-container .formRow input:focus,.contendor .new-preferred-customer-container .form-users .body-container .formRow select:focus,.contendor .new-preferred-customer-container .form-users .body-container .formRow textarea:focus{outline:0}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table{text-align:center!important;width:100%;overflow-x:auto;overflow-y:hidden;--td-row-height:55px}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table th.mat-header-cell{padding:10px;background:#f1f1f1;color:#000;font-size:11px}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table tr.mat-header-row{height:35px}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table tr.mat-footer-row,.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table tr.mat-row{height:var(--td-row-height)}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell{font-size:12px;padding:2px;background:#f1f1f1}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell p.id{cursor:pointer;text-decoration:underline;color:#1e90ff}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell .status{display:flex;cursor:pointer;justify-content:center}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell .status mat-icon{font-size:16px;width:16px;height:16px}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell .mat-icon{cursor:pointer!important}.contendor .new-preferred-customer-container .form-users .body-container .formRow table.mat-table td.mat-cell:last-of-type{padding:5px}.contendor .new-preferred-customer-container .form-users .body-container .formRow .table-msg{text-align:center;margin-top:20px;padding:4px}form{width:100%}@media screen and (min-width:768px){.wrapper{margin:5px auto 10px}.wrapper .header{grid-template-columns:1fr 1fr 20fr}.wrapper .body .title p{font-size:13px}.wrapper .body .content{grid-template-columns:90% 1fr}.wrapper .body .content p{font-size:13px}}@media (min-width:400px){table.mat-table{--td-row-height:40px}table.mat-table th.mat-header-cell{text-align:center;font-size:15px}table.mat-table td.mat-cell .status mat-icon{font-size:20px;width:20px;height:20px}}@media (device-height:568px) and (device-width:320px) and (-webkit-min-device-pixel-ratio:2){.title-container p{width:100%;font-size:1.2rem}table.mat-table{width:100%;overflow-x:auto;overflow-y:hidden;--td-row-height:55px}table.mat-table td.mat-cell:first-of-type,table.mat-table td.mat-footer-cell:first-of-type,table.mat-table th.mat-header-cell:first-of-type{padding-left:0}table.mat-table th.mat-header-cell{padding:7px;background:#f1f1f1;color:#000;font-size:11px}table.mat-table tr.mat-header-row{height:35px}table.mat-table tr.mat-footer-row,table.mat-table tr.mat-row{height:var(--td-row-height)}table.mat-table td.mat-cell{font-size:11px;padding:1px;background:#f1f1f1}table.mat-table td.mat-cell:last-of-type{padding:5px}}@media (device-height:653px) and (device-width:280px){.title-container p{width:100%;font-size:1.1rem}table.mat-table{width:100%;overflow-x:auto;overflow-y:hidden;--td-row-height:55px}table.mat-table td.mat-cell:first-of-type,table.mat-table td.mat-footer-cell:first-of-type,table.mat-table th.mat-header-cell:first-of-type{padding-left:0}table.mat-table th.mat-header-cell{padding:2px;background:#f1f1f1;color:#fff;font-size:11px}table.mat-table tr.mat-header-row{height:35px}table.mat-table tr.mat-footer-row,table.mat-table tr.mat-row{height:var(--td-row-height)}table.mat-table td.mat-cell{font-size:10px;padding:0;background:#f1f1f1}table.mat-table td.mat-cell:last-of-type{padding:5px}}@media (max-width:599px){.formRow.row-filter button{width:100%}.formRow.row-new{margin-top:14px!important}.formRow.row-new button{width:100%}}"]}]}],"members":{"apiBaseUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"accessToken":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"VkUsersService"},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":24,"character":22},{"__symbolic":"reference","module":"ngx-spinner","name":"NgxSpinnerService","line":25,"character":21},{"__symbolic":"reference","module":"@angular/material","name":"MatDialog","line":26,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"getAllUsersResponseHandler":[{"__symbolic":"method"}],"getAllUsersResponseHandlerError":[{"__symbolic":"method"}],"showErrorMessage":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"onCreate":[{"__symbolic":"method"}],"onEdit":[{"__symbolic":"method"}],"onView":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"onRefresh":[{"__symbolic":"method"}]}},"VkUsersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"VkUsersComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressBarModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":27,"character":4},{"__symbolic":"reference","module":"ngx-spinner","name":"NgxSpinnerModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":4}],"exports":[{"__symbolic":"reference","name":"VkUsersComponent"},{"__symbolic":"reference","name":"ɵa"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"vk-users-modal","template":"<div class=\"container\">\r\n    <div class=\"title-container\">\r\n        <div class=\"header\" mat-dialog-title>\r\n            {{title}} \r\n            <button mat-raised-button color=\"warn\" *ngIf=\"mode === 'view'\" (click)=\"onEdit()\">\r\n                <mat-icon>edit</mat-icon>\r\n            </button>\r\n        </div> \r\n        <div class=\"container-button\">\r\n            <div class=\"close-button\">\r\n                <button mat-flat-button (click)=\"closeDialog()\" >\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div> \r\n    <div class=\"content\" mat-dialog-content>\r\n        <ng-container *ngIf=\"readOnly\">\r\n            <form ngNativeValidate *ngIf=\"!loading\" class=\"container-form\" novalidate (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\r\n                <div class=\"input-container\" fxLayout=\"column\" fxLayout.gt-xs=\"row\" fxLayoutGap=\"10px\">\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form\">\r\n                            <mat-label>Nombre</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"UserName\" maxlength=\"256\" required [readonly]=\"readOnly\">\r\n                        </mat-form-field>\r\n                    </div>\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form-textarea\">\r\n                            <mat-label>Email</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"Email\" maxlength=\"256\" required [readonly]=\"readOnly\">\r\n                        </mat-form-field>    \r\n                    </div>\r\n                    <ng-container *ngIf=\"loadingRoles\">\r\n                        <mat-progress-bar mode=\"indeterminate\" color=\"warn\"></mat-progress-bar>\r\n                        <p>Cargando roles...</p>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!loadingRoles\">\r\n                        <div *ngIf=\"_roles.length === 0\" class=\"formRow container-roles\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                            <div class=\"not-roles\">\r\n                                El usuario no tiene roles asociados\r\n                            </div>\r\n                        </div>    \r\n                        <div *ngIf=\"_roles.length !== 0\" class=\"formRow container-roles\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                            <table mat-table [dataSource]=\"_roles\">\r\n                                <ng-container matColumnDef=\"checkbox\">\r\n                                    <th mat-header-cell *matHeaderCellDef></th>\r\n                                        <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\">\r\n                                    </td>\r\n                                </ng-container>\r\n                                <ng-container matColumnDef=\"name\">\r\n                                    <th mat-header-cell *matHeaderCellDef> Nombre </th>\r\n                                    <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\"> {{role.RoleName}}</td>\r\n                                </ng-container>\r\n                                <ng-container matColumnDef=\"description\">\r\n                                    <th mat-header-cell *matHeaderCellDef> Descripción </th>\r\n                                    <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\"> {{role.Description}}</td>\r\n                                </ng-container>\r\n                                <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n                                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n                            </table>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form-textarea\">\r\n                            <mat-label>Comentarios</mat-label>\r\n                            <textarea matInput formControlName=\"Comment\" maxlength=\"1000\" [readonly]=\"readOnly\"></textarea> \r\n                        </mat-form-field>    \r\n                    </div>\r\n                </div> \r\n            </form>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!readOnly\">\r\n            <form ngNativeValidate *ngIf=\"!loading\" class=\"container-form\" novalidate (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\r\n                <div class=\"input-container\" fxLayout=\"column\" fxLayout.gt-xs=\"row\" fxLayoutGap=\"10px\">\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form\">\r\n                            <mat-label>Nombre</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"UserName\" maxlength=\"256\" required>\r\n                        </mat-form-field>\r\n                    </div>\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form-textarea\">\r\n                            <mat-label>Email</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"Email\" maxlength=\"256\" required>\r\n                        </mat-form-field>    \r\n                    </div>\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form\">\r\n                            <mat-label>Clave</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"Password\" [type]=\"hide ? 'password' : 'text'\" maxlength=\"50\" pattern=\"(?=.*\\d)(?=.*[A-Za-z]).{6,}\">\r\n                            <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            </button>\r\n                            <mat-error>\r\n                                La contraseña debe contar con una letra, un número y al menos seis caracteres\r\n                            </mat-error>\r\n                        </mat-form-field>\r\n                    </div>\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form\">\r\n                            <mat-label>Confirmar clave</mat-label>\r\n                            <input matInput class=\"form-control\" formControlName=\"ConfirmPassword\" [type]=\"hide ? 'password' : 'text'\" maxlength=\"50\" pattern=\"(?=.*\\d)(?=.*[A-Za-z]).{6,}\">\r\n                            <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            </button>\r\n                        </mat-form-field>\r\n                    </div>\r\n                    <div class=\"formRow container-search\" fxFlex=\"50\" fxFlex.gt-xs=\"50\">\r\n                        <mat-form-field appearance=\"standard\">\r\n                            <input matInput placeholder=\"Buscar rol\" type=\"text\" (input)=\"onSearch($event.target.value)\" [disabled]=\"roles?.length === 0\">\r\n                        </mat-form-field>\r\n                    </div> \r\n                    <div class=\"formRow container-roles\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <table mat-table [dataSource]=\"_roles\">\r\n                            <ng-container matColumnDef=\"checkbox\">\r\n                                <th mat-header-cell *matHeaderCellDef style=\"min-width: 50px !important;\"></th>\r\n                                <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\">\r\n                                    <mat-checkbox [(ngModel)]=\"role.HasIt\" [ngModelOptions]=\"{standalone: true}\"  \r\n                                    (ngModelChange)=\"onRolesChecked(role.RoleId)\"></mat-checkbox>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"name\" style=\"padding-right: 15px;\">\r\n                                <th mat-header-cell *matHeaderCellDef> Nombre </th>\r\n                                <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\"> {{role.RoleName}}</td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"description\">\r\n                                <th mat-header-cell *matHeaderCellDef> Descripción </th>\r\n                                <td mat-cell *matCellDef=\"let role\" class=\"size-column-code\"> {{role.Description}}</td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n                        </table>\r\n                    </div>\r\n\r\n                    <div class=\"formRow\" fxFlex=\"100\" fxFlex.gt-xs=\"100\">\r\n                        <mat-form-field class=\"field-form-textarea\">\r\n                            <mat-label>Comentarios</mat-label>\r\n                            <textarea matInput formControlName=\"Comment\" maxlength=\"1000\"></textarea> \r\n                        </mat-form-field>    \r\n                    </div>\r\n                </div> \r\n                <br>\r\n                <br>    \r\n                <div class=\"btn-container\">\r\n                    <button mat-raised-button  class=\"btn-cancelar\" [mat-dialog-close]>Cancelar</button>   \r\n                    <button mat-raised-button style=\"margin-left: 5%;\" class=\"btn mat-raised-button mat-button-base\" type=\"submit\">Guardar</button>       \r\n                </div>\r\n\r\n            </form>\r\n            <div class=\"requesting\" *ngIf=\"loading\">\r\n                <mat-progress-bar color=\"warn\" mode=\"indeterminate\"></mat-progress-bar>\r\n                <p>Guardando...</p>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>","styles":["::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#f44336!important}.mat-form-field{width:100%!important}.container{width:100%}.container .title-container{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:8px;margin-bottom:8px;border-bottom:1px solid #ccc;background-color:#fff;color:#1d1b1bb5}.container .title-container .title{justify-self:start;align-self:center}.container .title-container .header .mat-raised-button{min-width:38px;line-height:23px;padding:7px 2px;margin-left:15px}.container .title-container .container-button{display:flex}.container .title-container .container-button .close-button{justify-self:end;margin-left:auto}.container .mat-dialog-content{max-height:initial!important;padding:3px 24px!important}.container .container-form{min-width:150px;max-width:500px;width:100%}.container .container-form .field-form{width:100%}.container .container-form .container-search{width:50%!important}.container .container-form .buttons-new-catalog{position:relative;left:0;bottom:10px}.container .container-form .btn-container{text-align:right}.container .container-form .mat-form-field-wrapper{width:45%}.container .container-form .container-roles{display:grid;overflow-y:scroll;max-height:200px;margin:20px 0}.container .container-form tr.mat-header-row,.container .container-form tr.mat-row{background:#f1f1f1}.container .container-form .mat-cell{font-size:12px;padding-right:10px}.container .container-form .not-roles{background:#efefef;color:#9b9b9b;padding:9px;text-align:center}.container .error-wrapper{color:red;display:inline-flex}.container .error-wrapper p{font-size:14px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA","line":27,"character":12}]}],null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material","arguments":[{"__symbolic":"reference","name":"ɵa"}]},{"__symbolic":"reference","name":"VkUsersService"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":30,"character":25},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":31,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"getDataRoles":[{"__symbolic":"method"}],"getRolesResponseHandler":[{"__symbolic":"method"}],"getRolesResponseHandlerError":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}],"onCreate":[{"__symbolic":"method"}],"onCreateRolesUser":[{"__symbolic":"method"}],"onEdit":[{"__symbolic":"method"}],"onEditRolesUser":[{"__symbolic":"method"}],"onRolesChecked":[{"__symbolic":"method"}],"initForm":[{"__symbolic":"method"}],"initInputs":[{"__symbolic":"method"}],"checkIfMatchingPasswords":[{"__symbolic":"method"}],"onRolesUpdate":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"newUserResponseHandler":[{"__symbolic":"method"}],"newUserResponseHandlerError":[{"__symbolic":"method"}],"editUserResponseHandler":[{"__symbolic":"method"}],"editUserResponseHandlerError":[{"__symbolic":"method"}],"showErrorMessage":[{"__symbolic":"method"}]}}},"origins":{"VkUsersService":"./lib/services/vk-users.service","VkUsersComponent":"./lib/components/vk-users.component","VkUsersModule":"./lib/vk-users.module","ɵa":"./lib/components/modal/vk-users.modal"},"importAs":"vk-users-dev"}