import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/card";
import * as i5 from "@angular/flex-layout/flex";
export class RoleViewComponent {
    constructor(http, errorHandler, route) {
        this.http = http;
        this.errorHandler = errorHandler;
        this.route = route;
    }
    ngOnInit() {
        this.route.params.subscribe(params => {
            if (params.id !== undefined) {
                this.roleId = params.id;
                this.getRole();
            }
        });
    }
    getRole() {
        try {
            this.http.get(`api/roles/${this.roleId}`).subscribe((result) => {
                this.role = result.item;
            });
        }
        catch (error) {
            this.errorHandler.handleError(error);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, deps: [{ token: i1.HttpService }, { token: i1.ErrorHandlerService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleViewComponent, selector: "app-role-view", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{role?.is_global ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5.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: i5.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: i5.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: i5.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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-role-view', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{role?.is_global ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.ErrorHandlerService }, { type: i2.ActivatedRoute }] });
//# sourceMappingURL=data:application/json;base64, 