@ieeesa-npm/groups 0.2.2 → 0.2.3

package/fesm2022/ieeesa-npm-groups.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ViewEncapsulation, Output, Input, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, Output, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Validators } from '@angular/forms';
-import { AlignType, FormControlType, DynamicFormComponent, MenuComponent, IconButtonComponent, ModalComponent, ModalConfirmationComponent, SearchComponent, SelectComponent, LegendComponent } from '@ieeesa-npm/presentation';
-import * as i3 from '@ieeesa-npm/utility';
+import { AlignType, FormControlType, DynamicFormComponent, MenuComponent, IconButtonComponent, TableColumnType, TableColumnSortDirection, DataTableComponent, ModalComponent, ModalConfirmationComponent, SearchComponent, SelectComponent, LegendComponent } from '@ieeesa-npm/presentation';
+import * as i2 from '@ieeesa-npm/utility';
 import { AlertType, AlertsService, ModalType } from '@ieeesa-npm/utility';
 import { HttpErrorResponse } from '@angular/common/http';
 import * as i1$1 from '@angular/material/dialog';
@@ -15,7 +15,7 @@ import { takeUntil as takeUntil$1, map as map$1 } from 'rxjs/operators';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/tree';
+import * as i2$1 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 
 var createGroup = {
@@ -159,6 +159,15 @@ var deleteGroup = {
 		promptMessage: "Are you sure you want to delete the group: "
 	}
 };
+var viewRoster = {
+	tableColumns: {
+		name: "Name",
+		email: "Email Address",
+		role: "Role"
+	},
+	searchPlaceholder: "Search by Name/Email Address",
+	filterByRole: "Role"
+};
 var errors = {
 	"1001": "Group Name already in use.",
 	"1002": "Group Short Name already in use.",
@@ -166,6 +175,7 @@ var errors = {
 	"1004": "Group Name is required.",
 	"1005": "Group Short Name is required.",
 	"1006": "Group Type is required.",
+	"1007": "Group Id is required.",
 	"1008": "The group has either been moved or already deleted.",
 	"1009": "Unable to delete a parent group, please delete or reassign any child groups first.",
 	"1010": "Group types are not found for the tenant or application!",
@@ -177,6 +187,15 @@ var errors = {
 	"1016": "Group Name must not be greater than 500 characters long.",
 	"1017": "Group Short Name must not be greater than 15 characters long.",
 	"1018": "Group Short Name contains invalid characters. Please enter '.',',', '/'', '-', '_' only.",
+	"1020": "Role id is required.",
+	"1026": "User does not belong to the selected group.",
+	"1027": "User is not mapped to the role id.",
+	"1028": "Search by Name or Email address.",
+	"1029": "No record found!",
+	"1030": "No record found!",
+	"1031": "No record found!",
+	"1032": "No record found!",
+	"2002": "Role does not belong to the group type.",
 	ER1000: "Allowed group types are not found for the selected group!"
 };
 var constants = {
@@ -184,6 +203,7 @@ var constants = {
 	editGroup: editGroup,
 	viewGroups: viewGroups,
 	deleteGroup: deleteGroup,
+	viewRoster: viewRoster,
 	errors: errors
 };
 
@@ -194,7 +214,8 @@ var screenTexts = /*#__PURE__*/Object.freeze({
     deleteGroup: deleteGroup,
     editGroup: editGroup,
     errors: errors,
-    viewGroups: viewGroups
+    viewGroups: viewGroups,
+    viewRoster: viewRoster
 });
 
 /* eslint-disable no-useless-escape */
@@ -219,6 +240,7 @@ var GroupFunctionType;
 (function (GroupFunctionType) {
     GroupFunctionType["CREATE"] = "CREATE";
     GroupFunctionType["EDIT"] = "EDIT";
+    GroupFunctionType["VIEW_ROSTER"] = "VIEW_ROSTER";
 })(GroupFunctionType || (GroupFunctionType = {}));
 
 /**
@@ -378,6 +400,95 @@ class GroupsService {
     getGroupFunctionType() {
         return this.groupFunctionType;
     }
+    /**
+     * Gets the group users for the given group id.
+     * @param {string} groupId
+     * @return {Observable<GetGroupUsersResponse>}
+     * @memberof GroupsService
+     */
+    getGroupUsers(groupId) {
+        return this.httpService
+            .getData(`${this.apiBaseUrl}/groups/roster/${groupId}`)
+            .pipe(map((response) => {
+            return response;
+        }), catchError((errorRes) => {
+            throw errorRes;
+        }));
+    }
+    /**
+     * Gets the group users based on the filtered roles.
+     * @param {FilterUsersByRolesPayload} payload
+     * @return {Observable<GetGroupUsersResponse>}
+     * @memberof GroupsService
+     */
+    getGroupUsersByRoles(payload) {
+        return this.httpService
+            .postData(`${this.apiBaseUrl}/groups/roster/groupUsersByRole/`, payload)
+            .pipe(map((response) => {
+            return response;
+        }), catchError((errorRes) => {
+            throw errorRes;
+        }));
+    }
+    /**
+     * Gets the group users based on searched name or email
+     * @param {SearchUsersPayload} payload
+     * @return {Observable<GetGroupUsersResponse>}
+     * @memberof GroupsService
+     */
+    searchGroupUsers(payload) {
+        return this.httpService
+            .postData(`${this.apiBaseUrl}/groups/roster/groupUsersByRoleByNameByEmail`, payload)
+            .pipe(map((response) => {
+            return response;
+        }), catchError((errorRes) => {
+            throw errorRes;
+        }));
+    }
+    /**
+     * Gets the group roles based on the group type.
+     * @param {string} groupTypeId
+     * @return {Observable<CheckboxOption[]>}
+     * @memberof GroupsService
+     */
+    getGroupTypeRoles(groupTypeId) {
+        return this.httpService
+            .getData(`${this.apiBaseUrl}/configurations/users/rolesByGroupType/${groupTypeId}`)
+            .pipe(map((response) => {
+            const rolesOption = [];
+            response?.body?.forEach((role) => {
+                rolesOption.push({
+                    id: role.roleId,
+                    name: role.roleName,
+                    disabled: false,
+                    checked: false,
+                });
+            });
+            return rolesOption;
+        }), catchError((errorRes) => {
+            throw errorRes;
+        }));
+    }
+    /**
+     * Concatenates the group users assigned roles name separated by comma as string and returns the group users in an array.
+     * @param {GetGroupUsersResponse} response
+     * @return {User[]}
+     * @memberof GroupsService
+     */
+    transformUserRolesNameAsString(response) {
+        const users = [];
+        response?.body?.forEach((item) => {
+            const roles = [];
+            item?.rolesList?.forEach((role) => roles.push(role?.roleName));
+            users.push({
+                userId: item.userId,
+                name: item.name,
+                email: item.email,
+                role: roles.join(', '),
+            });
+        });
+        return users;
+    }
     /**
      * Returns formatted group types.
      * @param {GroupTypeConfiguration[]} groupTypeResponse
@@ -391,7 +502,7 @@ class GroupsService {
         });
         return groupTypes;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsService, deps: [{ token: i3.HttpService }, { token: i3.AlertsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsService, deps: [{ token: i2.HttpService }, { token: i2.AlertsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsService, decorators: [{
@@ -399,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i3.HttpService }, { type: i3.AlertsService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.HttpService }, { type: i2.AlertsService }]; } });
 
 /**
  * CreateGroupComponent uses DynamicFormComponent to build create new group form and implement the functionalities of submission of form and handling success and error scenarios.
@@ -766,13 +877,13 @@ class CreateGroupComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: CreateGroupComponent, deps: [{ token: GroupsService }, { token: i3.GlobalErrorHandlerService }, { token: i3.AlertsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: CreateGroupComponent, deps: [{ token: GroupsService }, { token: i2.GlobalErrorHandlerService }, { token: i2.AlertsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: CreateGroupComponent, isStandalone: true, selector: "ieeesa-create-group", outputs: { submitFormResponse: "submitFormResponse", formCancel: "formCancel" }, providers: [AlertsService], ngImport: i0, template: "<ieeesa-dynamic-form\r\n  *ngIf=\"formGroup\"\r\n  [leftButtonLabel]=\"leftButtonLabel\"\r\n  [rightButtonLabel]=\"rightButtonLabel\"\r\n  [isLegendVisible]=\"isLegendVisible\"\r\n  [colWidth]=\"colWidth\"\r\n  [actionButtonAlign]=\"actionButtonAlign\"\r\n  [formGroups]=\"formGroup\"\r\n  [isLeftButtonNeeded]=\"isLeftButtonNeeded\"\r\n  (formSubmit)=\"onFormSubmit($event)\"\r\n  (formLeftButtonClicked)=\"createGroupCancelled()\"\r\n  (formGroupsReference)=\"getFormGroupReference($event)\"\r\n></ieeesa-dynamic-form>", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-modal-dialog.ieeesa-create-group .mat-mdc-dialog-container{box-shadow:none}.ieeesa-modal-dialog.ieeesa-create-group .mat-mdc-dialog-surface{border-radius:0;margin:1em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal{box-shadow:0 3px #11b7e5 inset,0 4px 24px #00000080;padding-bottom:.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field{margin-bottom:.8em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper{height:1.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay{background:#ffffff;padding:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay .mat-mdc-form-field-infix{min-height:2.375em;padding-top:.0625em;padding-bottom:.375em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:before,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:after,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:before,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:after{border:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-dynamic-form__actions{flex-direction:row-reverse;gap:1.5em;padding:3em 1em .75em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-dynamic-form__form-field{margin-bottom:1em;padding:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-form-field-flex{width:62.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field .mat-mdc-form-field{display:flex}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field .mat-mdc-text-field-wrapper{padding:.5em 1em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field__label,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field__support-text,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-select-field__label,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-select-field__support-text{color:#49454f}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .short-name .ieeesa-input-field .mat-mdc-form-field{width:40%}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type .ieeesa-select-field .mat-mdc-form-field{display:flex;width:43%}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-form-error--text{padding:.25em 1em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-form-field-subscript-wrapper{display:none}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-dialog-content{padding:1.5em 1em .75em!important}@media (max-width: 767px){.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type .ieeesa-select-field .mat-mdc-form-field,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .short-name .ieeesa-input-field .mat-mdc-form-field{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DynamicFormComponent, selector: "ieeesa-dynamic-form", inputs: ["formGroups", "submitResponse", "searchResponse", "colWidth", "isLegendVisible", "rightButtonLabel", "leftButtonLabel", "isSubmitButtonDisabled", "isLeftButtonDisabled", "isLeftButtonNeeded", "actionButtonAlign"], outputs: ["formSubmit", "formChange", "formInput", "formLeftButtonClicked", "formSearchApply", "formGroupsReference", "dropdownChange", "formDateSelected", "formSelectSearch", "formControlChange", "formAutoCompleteSearch", "autoCompleteOptionSelected", "formAfterContentInit", "formSelectedDateRange"], exportAs: ["dynamicForm"] }, { kind: "ngmodule", type: MatDialogModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: CreateGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ieeesa-create-group', standalone: true, imports: [CommonModule, DynamicFormComponent, MatDialogModule], encapsulation: ViewEncapsulation.None, providers: [AlertsService], template: "<ieeesa-dynamic-form\r\n  *ngIf=\"formGroup\"\r\n  [leftButtonLabel]=\"leftButtonLabel\"\r\n  [rightButtonLabel]=\"rightButtonLabel\"\r\n  [isLegendVisible]=\"isLegendVisible\"\r\n  [colWidth]=\"colWidth\"\r\n  [actionButtonAlign]=\"actionButtonAlign\"\r\n  [formGroups]=\"formGroup\"\r\n  [isLeftButtonNeeded]=\"isLeftButtonNeeded\"\r\n  (formSubmit)=\"onFormSubmit($event)\"\r\n  (formLeftButtonClicked)=\"createGroupCancelled()\"\r\n  (formGroupsReference)=\"getFormGroupReference($event)\"\r\n></ieeesa-dynamic-form>", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-modal-dialog.ieeesa-create-group .mat-mdc-dialog-container{box-shadow:none}.ieeesa-modal-dialog.ieeesa-create-group .mat-mdc-dialog-surface{border-radius:0;margin:1em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal{box-shadow:0 3px #11b7e5 inset,0 4px 24px #00000080;padding-bottom:.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field{margin-bottom:.8em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper{height:1.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay{background:#ffffff;padding:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mat-mdc-form-field-focus-overlay .mat-mdc-form-field-infix{min-height:2.375em;padding-top:.0625em;padding-bottom:.375em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:before,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .parent-group.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:after,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:before,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type.ieeesa-dynamic-form__form-field .ieeesa-text-area-field .mat-mdc-form-field .mdc-line-ripple:after{border:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-dynamic-form__actions{flex-direction:row-reverse;gap:1.5em;padding:3em 1em .75em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-dynamic-form__form-field{margin-bottom:1em;padding:0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-form-field-flex{width:62.5em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field .mat-mdc-form-field{display:flex}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field .mat-mdc-text-field-wrapper{padding:.5em 1em}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field__label,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-input-field__support-text,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-select-field__label,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-select-field__support-text{color:#49454f}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .short-name .ieeesa-input-field .mat-mdc-form-field{width:40%}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type .ieeesa-select-field .mat-mdc-form-field{display:flex;width:43%}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .ieeesa-form-error--text{padding:.25em 1em 0}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-form-field-subscript-wrapper{display:none}.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .mat-mdc-dialog-content{padding:1.5em 1em .75em!important}@media (max-width: 767px){.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .group-type .ieeesa-select-field .mat-mdc-form-field,.ieeesa-modal-dialog.ieeesa-create-group .ieeesa-modal .short-name .ieeesa-input-field .mat-mdc-form-field{width:100%}}\n"] }]
-        }], ctorParameters: function () { return [{ type: GroupsService }, { type: i3.GlobalErrorHandlerService }, { type: i3.AlertsService }]; }, propDecorators: { submitFormResponse: [{
+        }], ctorParameters: function () { return [{ type: GroupsService }, { type: i2.GlobalErrorHandlerService }, { type: i2.AlertsService }]; }, propDecorators: { submitFormResponse: [{
                 type: Output
             }], formCancel: [{
                 type: Output
@@ -1017,6 +1128,7 @@ class TreeViewComponent {
         this.createGroupClick = new EventEmitter();
         this.editGroupClick = new EventEmitter();
         this.deleteGroupClick = new EventEmitter();
+        this.viewRosterClick = new EventEmitter();
         /**
          * Gets the level of the node
          * @param {GroupNode} node
@@ -1142,7 +1254,7 @@ class TreeViewComponent {
      */
     handleGroupActions(group) {
         if (this.selectedGroupAction?.id === GroupAction.VIEW_ROSTER) {
-            this.viewChildGroups(group);
+            this.viewRosterClick.emit(group?.item);
         }
         else if (this.selectedGroupAction?.id === GroupAction.CREATE_SUB_GROUP) {
             this.createGroupClick.emit(group?.item);
@@ -1200,7 +1312,7 @@ class TreeViewComponent {
         this.destroy$.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: TreeViewComponent, deps: [{ token: Groups }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: TreeViewComponent, isStandalone: true, selector: "ieeesa-tree", inputs: { parentGroupsInfo: "parentGroupsInfo", childGroupsInfo: "childGroupsInfo", isGroupSearchOrFilterActive: "isGroupSearchOrFilterActive", deletedGroupIdInfo: "deletedGroupIdInfo" }, outputs: { toggleGroupClick: "toggleGroupClick", createGroupClick: "createGroupClick", editGroupClick: "editGroupClick", deleteGroupClick: "deleteGroupClick" }, ngImport: i0, template: "<div class=\"ieeesa-tree\">\r\n  <mat-tree\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"ieeesa-tree__root\"\r\n    #rootSelector\r\n    role=\"treegrid\"\r\n  >\r\n    <mat-tree-node\r\n      *matTreeNodeDef=\"let node\"\r\n      matTreeNodePadding\r\n      [matTreeNodePaddingIndent]=\"treePaddingIndent\"\r\n    >\r\n      <div\r\n        class=\"ieeesa-tree__node w-100 d-flex justify-content-between gap-3 my-0\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div class=\"d-flex gap-3\">\r\n          <div\r\n            [ngClass]=\"\r\n              !isGroupSearchOrFilterActive ? 'ieeesa-tree__collapse-icon' : ''\r\n            \"\r\n            role=\"gridcell\"\r\n          ></div>\r\n          <div role=\"gridcell\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                ieeesaGroupInfoOutlet;\r\n                context: { $implicit: node }\r\n              \"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <ieeesa-menu\r\n          [menuItems]=\"getFilteredGroupActions(node)\"\r\n          (menuItemClick)=\"\r\n            onGroupActionsClick($event); handleGroupActions(node)\r\n          \"\r\n          class=\"d-lg-none d-md-none d-sm-none\"\r\n          role=\"gridcell\"\r\n        ></ieeesa-menu>\r\n        <div class=\"d-none gap-3 d-sm-flex d-md-flex d-lg-flex\" role=\"gridcell\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              ieeesaGroupActionsOutlet;\r\n              context: { $implicit: node }\r\n            \"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </mat-tree-node>\r\n    <mat-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChildGroups\"\r\n      matTreeNodePadding\r\n      [matTreeNodePaddingIndent]=\"treePaddingIndent\"\r\n    >\r\n      <div\r\n        [ngClass]=\"\r\n          treeControl.isExpanded(node)\r\n            ? 'ieeesa-tree__root-node-white-bg'\r\n            : 'ieeesa-tree__root-node'\r\n        \"\r\n        class=\"ieeesa-tree__node w-100 d-flex my-0 gap-3\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div role=\"gridcell\">\r\n          <ieeesa-icon-button\r\n            *ngIf=\"!isGroupSearchOrFilterActive\"\r\n            (iconButtonClick)=\"viewChildGroups(node)\"\r\n            [iconButton]=\"getToggleButtonInfo(node)\"\r\n          ></ieeesa-icon-button>\r\n        </div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            ieeesaGroupInfoOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\r\n        <div\r\n          class=\"d-flex d-none gap-3 d-sm-flex d-md-flex d-lg-flex\"\r\n          role=\"gridcell\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              ieeesaGroupActionsOutlet;\r\n              context: { $implicit: node }\r\n            \"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n        <ieeesa-menu\r\n          [menuItems]=\"getFilteredGroupActions(node)\"\r\n          (menuItemClick)=\"\r\n            onGroupActionsClick($event); handleGroupActions(node)\r\n          \"\r\n          class=\"d-lg-none d-md-none d-sm-none\"\r\n          role=\"gridcell\"\r\n        ></ieeesa-menu>\r\n      </div>\r\n    </mat-tree-node>\r\n    <ng-template #ieeesaGroupInfoOutlet let-node>\r\n      <div class=\"w-100\">\r\n        <div\r\n          class=\"ieeesa-tree__group-info d-flex flex-column flex-sm-row flex-md-row flex-lg-row align-items-start align-items-sm-baseline align-items-md-baseline align-items-lg-baseline gap-2 mb-1\"\r\n        >\r\n          <p class=\"ieeesa-tree__node-group-name ieeesa-headline-sm-26\">\r\n            {{ node?.item?.groupName }}\r\n          </p>\r\n          <p class=\"ieeesa-tree__node-group-acronym ieeesa-title-lg-24\">\r\n            {{ node?.item?.groupAcronym }}\r\n          </p>\r\n        </div>\r\n        <div class=\"ieeesa-body-md-16 ieeesa-tree__node-group-desc\">\r\n          {{ node?.item?.groupTypeInfo?.name }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #ieeesaGroupActionsOutlet let-node>\r\n      <ieeesa-icon-button\r\n        *ngFor=\"let item of getFilteredGroupActions(node); trackBy: trackByFn\"\r\n        [iconButton]=\"item\"\r\n        (iconButtonClick)=\"\r\n          onGroupActionsClick($event); handleGroupActions(node)\r\n        \"\r\n      >\r\n      </ieeesa-icon-button>\r\n    </ng-template>\r\n  </mat-tree>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-tree p{margin-bottom:0}.ieeesa-tree__node-group-acronym{color:#63666a}.ieeesa-tree__node-group-desc{color:#4a4d50}.ieeesa-tree__node{background:#f4f8fe;padding:.75em 1.5em .75em 1.125em}.ieeesa-tree__root-node-white-bg{background:#ffffff;box-shadow:0 1px #00b5e2 inset,6px 0 #379dfc inset}.ieeesa-tree__collapse-icon{min-width:3.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuComponent, selector: "ieeesa-menu", inputs: ["menuItems"], outputs: ["menuItemClick"] }, { kind: "component", type: IconButtonComponent, selector: "ieeesa-icon-button", inputs: ["iconButton"], outputs: ["iconButtonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: TreeViewComponent, isStandalone: true, selector: "ieeesa-tree", inputs: { parentGroupsInfo: "parentGroupsInfo", childGroupsInfo: "childGroupsInfo", isGroupSearchOrFilterActive: "isGroupSearchOrFilterActive", deletedGroupIdInfo: "deletedGroupIdInfo" }, outputs: { toggleGroupClick: "toggleGroupClick", createGroupClick: "createGroupClick", editGroupClick: "editGroupClick", deleteGroupClick: "deleteGroupClick", viewRosterClick: "viewRosterClick" }, ngImport: i0, template: "<div class=\"ieeesa-tree\">\r\n  <mat-tree\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"ieeesa-tree__root\"\r\n    #rootSelector\r\n    role=\"treegrid\"\r\n  >\r\n    <mat-tree-node\r\n      *matTreeNodeDef=\"let node\"\r\n      matTreeNodePadding\r\n      [matTreeNodePaddingIndent]=\"treePaddingIndent\"\r\n    >\r\n      <div\r\n        class=\"ieeesa-tree__node w-100 d-flex justify-content-between gap-3 my-0\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div class=\"d-flex gap-3\">\r\n          <div\r\n            [ngClass]=\"\r\n              !isGroupSearchOrFilterActive ? 'ieeesa-tree__collapse-icon' : ''\r\n            \"\r\n            role=\"gridcell\"\r\n          ></div>\r\n          <div role=\"gridcell\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                ieeesaGroupInfoOutlet;\r\n                context: { $implicit: node }\r\n              \"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <ieeesa-menu\r\n          [menuItems]=\"getFilteredGroupActions(node)\"\r\n          (menuItemClick)=\"\r\n            onGroupActionsClick($event); handleGroupActions(node)\r\n          \"\r\n          class=\"d-lg-none d-md-none d-sm-none\"\r\n          role=\"gridcell\"\r\n        ></ieeesa-menu>\r\n        <div class=\"d-none gap-3 d-sm-flex d-md-flex d-lg-flex\" role=\"gridcell\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              ieeesaGroupActionsOutlet;\r\n              context: { $implicit: node }\r\n            \"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </mat-tree-node>\r\n    <mat-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChildGroups\"\r\n      matTreeNodePadding\r\n      [matTreeNodePaddingIndent]=\"treePaddingIndent\"\r\n    >\r\n      <div\r\n        [ngClass]=\"\r\n          treeControl.isExpanded(node)\r\n            ? 'ieeesa-tree__root-node-white-bg'\r\n            : 'ieeesa-tree__root-node'\r\n        \"\r\n        class=\"ieeesa-tree__node w-100 d-flex my-0 gap-3\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div role=\"gridcell\">\r\n          <ieeesa-icon-button\r\n            *ngIf=\"!isGroupSearchOrFilterActive\"\r\n            (iconButtonClick)=\"viewChildGroups(node)\"\r\n            [iconButton]=\"getToggleButtonInfo(node)\"\r\n          ></ieeesa-icon-button>\r\n        </div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            ieeesaGroupInfoOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\r\n        <div\r\n          class=\"d-flex d-none gap-3 d-sm-flex d-md-flex d-lg-flex\"\r\n          role=\"gridcell\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              ieeesaGroupActionsOutlet;\r\n              context: { $implicit: node }\r\n            \"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n        <ieeesa-menu\r\n          [menuItems]=\"getFilteredGroupActions(node)\"\r\n          (menuItemClick)=\"\r\n            onGroupActionsClick($event); handleGroupActions(node)\r\n          \"\r\n          class=\"d-lg-none d-md-none d-sm-none\"\r\n          role=\"gridcell\"\r\n        ></ieeesa-menu>\r\n      </div>\r\n    </mat-tree-node>\r\n    <ng-template #ieeesaGroupInfoOutlet let-node>\r\n      <div class=\"w-100\">\r\n        <div\r\n          class=\"ieeesa-tree__group-info d-flex flex-column flex-sm-row flex-md-row flex-lg-row align-items-start align-items-sm-baseline align-items-md-baseline align-items-lg-baseline gap-2 mb-1\"\r\n        >\r\n          <p class=\"ieeesa-tree__node-group-name ieeesa-headline-sm-26\">\r\n            {{ node?.item?.groupName }}\r\n          </p>\r\n          <p class=\"ieeesa-tree__node-group-acronym ieeesa-title-lg-24\">\r\n            {{ node?.item?.groupAcronym }}\r\n          </p>\r\n        </div>\r\n        <div class=\"ieeesa-body-md-16 ieeesa-tree__node-group-desc\">\r\n          {{ node?.item?.groupTypeInfo?.name }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #ieeesaGroupActionsOutlet let-node>\r\n      <ieeesa-icon-button\r\n        *ngFor=\"let item of getFilteredGroupActions(node); trackBy: trackByFn\"\r\n        [iconButton]=\"item\"\r\n        (iconButtonClick)=\"\r\n          onGroupActionsClick($event); handleGroupActions(node)\r\n        \"\r\n      >\r\n      </ieeesa-icon-button>\r\n    </ng-template>\r\n  </mat-tree>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-tree p{margin-bottom:0}.ieeesa-tree__node-group-acronym{color:#63666a}.ieeesa-tree__node-group-desc{color:#4a4d50}.ieeesa-tree__node{background:#f4f8fe;padding:.75em 1.5em .75em 1.125em}.ieeesa-tree__root-node-white-bg{background:#ffffff;box-shadow:0 1px #00b5e2 inset,6px 0 #379dfc inset}.ieeesa-tree__collapse-icon{min-width:3.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i2$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i2$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$1.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuComponent, selector: "ieeesa-menu", inputs: ["menuItems"], outputs: ["menuItemClick"] }, { kind: "component", type: IconButtonComponent, selector: "ieeesa-icon-button", inputs: ["iconButton"], outputs: ["iconButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
@@ -1228,8 +1340,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
                 type: Output
             }], deleteGroupClick: [{
                 type: Output
+            }], viewRosterClick: [{
+                type: Output
             }] } });
 
+/**
+ * ViewRosterComponent implements the functionalities to add, edit, delete user to group roster, assign and modify roles(s) to the group users, and search user from roster.
+ * @export
+ * @class ViewRosterComponent
+ * @implements {OnDestroy}
+ */
+class ViewRosterComponent {
+    constructor(
+    // eslint-disable-next-line no-unused-vars
+    groupService, 
+    // eslint-disable-next-line no-unused-vars
+    alertService, 
+    // eslint-disable-next-line no-unused-vars
+    globalErrorHandlerService) {
+        this.groupService = groupService;
+        this.alertService = alertService;
+        this.globalErrorHandlerService = globalErrorHandlerService;
+        this.destroy$ = new Subject();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.constants = screenTexts;
+        this.viewRosterConstants = this.constants?.viewRoster;
+        this.filters = [
+            { id: 1, name: this.viewRosterConstants?.filterByRole, checked: false },
+        ];
+        this.columnSchema = [
+            {
+                id: 1,
+                columnDef: TableColumnType.SELECT,
+                heading: '',
+                columnType: TableColumnType.SELECT,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                cellData: (element) => `${element.select}`,
+            },
+            {
+                id: 2,
+                columnDef: 'name',
+                heading: this.viewRosterConstants?.tableColumns?.name,
+                columnType: TableColumnType.TEXT,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                cellData: (element) => `${element.name}`,
+                isSortableColumn: true,
+            },
+            {
+                id: 3,
+                columnDef: 'email',
+                heading: this.viewRosterConstants?.tableColumns?.email,
+                columnType: TableColumnType.TEXT,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                cellData: (element) => `${element.email}`,
+                isSortableColumn: true,
+            },
+            {
+                id: 4,
+                columnDef: 'role',
+                heading: this.viewRosterConstants?.tableColumns?.role,
+                columnType: TableColumnType.TEXT,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                cellData: (element) => `${element.role}`,
+            },
+        ];
+        this.selectedRoleIds = [];
+        this.roles = [];
+        this.rosterActions = {
+            isSearchNeeded: true,
+            isFilterNeeded: true,
+            isAddNeeded: true,
+            isDeleteNeeded: true,
+            isEditNeeded: true,
+        };
+        this.defaultSortedColumn = this.columnSchema[1].columnDef;
+        this.defaultColumnSortDirection = TableColumnSortDirection.ASCENDING;
+        this.getGroupUsersAndInitializeTableView();
+    }
+    /**
+     * Gets the group users by calling getGroupUsers() from groupService and sets tableData to display the users in a grid.
+     * @memberof ViewRosterComponent
+     */
+    getGroupUsersAndInitializeTableView() {
+        this.groupService
+            .getGroupUsers(this.groupService.getSelectedGroupInfo()?.groupId)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.tableData =
+                    this.groupService.transformUserRolesNameAsString(response);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            error: (error) => {
+                this.handleErrors(error);
+            },
+        });
+    }
+    /**
+     * Gets the selected group type roles by calling getGroupTypeRoles() from groupService and sets assign roles.
+     * @memberof ViewRosterComponent
+     */
+    getRoles() {
+        this.groupService
+            .getGroupTypeRoles(this.groupService.getSelectedGroupInfo()?.groupTypeInfo?.name)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.roles = response;
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            error: (error) => {
+                this.handleErrors(error);
+            },
+        });
+    }
+    /**
+     * Gets the group users by calling searchGroupUsers() from groupService and sets tableData to display the users in a grid.
+     * @param {string} searchTerm -searchTerm can be user name or email and user is searched based on the email or name.
+     * @memberof ViewRosterComponent
+     */
+    onSearchGroupUsers(searchTerm) {
+        const payload = {
+            payload: {
+                groupId: this.groupService.getSelectedGroupInfo()?.groupId,
+                searchByNameOrEmail: searchTerm,
+                roles: this.selectedRoleIds,
+            },
+        };
+        this.groupService
+            .searchGroupUsers(payload)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.tableData =
+                    this.groupService.transformUserRolesNameAsString(response);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            error: (error) => {
+                this.handleErrors(error);
+            },
+        });
+    }
+    /**
+     * Gets the group users by calling getGroupUsersByRoles() from groupService and sets tableData to display the users in a grid.
+     * @param {ChipOption[] | | CheckboxOption[]} roles
+     * @memberof ViewRosterComponent
+     */
+    onFilterUsersByRoles(roles) {
+        this.selectedRoleIds = [];
+        roles?.forEach((role) => {
+            this.selectedRoleIds.push(role.id);
+        });
+        const payload = {
+            payload: {
+                groupId: this.groupService.getSelectedGroupInfo()?.groupId,
+                roles: this.selectedRoleIds,
+            },
+        };
+        this.groupService
+            .getGroupUsersByRoles(payload)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.tableData =
+                    this.groupService.transformUserRolesNameAsString(response);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            error: (error) => {
+                this.handleErrors(error);
+            },
+        });
+    }
+    /**
+     * Handles the custom errors while retrieving groups users, roles, search users, filter user by roles.
+     * @param {*} error
+     * @memberof ViewRosterComponent
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleErrors(error) {
+        const errorCodes = error?.error?.body?.errorCodes;
+        if (Array.isArray(errorCodes) && !error?.error?.status) {
+            const errorMessage = this.groupService.parseErrorMessage(errorCodes);
+            this.alertService.showMessage({
+                status: 'custom',
+                message: errorMessage,
+                alertType: AlertType.ERROR,
+                isCloseNeeded: true,
+            });
+        }
+        else if (error && error instanceof HttpErrorResponse) {
+            this.globalErrorHandlerService.handleError(error);
+        }
+    }
+    /**
+     * NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+     * @memberof ViewRosterComponent
+     */
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: ViewRosterComponent, deps: [{ token: GroupsService }, { token: i2.AlertsService }, { token: i2.GlobalErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: ViewRosterComponent, isStandalone: true, selector: "ieeesa-view-roster", ngImport: i0, template: "<ieeesa-data-table\r\n  [tableDataInfo]=\"tableData\"\r\n  [columnSchemaInfo]=\"columnSchema\"\r\n  [defaultSortedColumn]=\"defaultSortedColumn\"\r\n  [defaultColumnSortDirection]=\"defaultColumnSortDirection\"\r\n  [searchPlaceHolderText]=\"viewRosterConstants?.searchPlaceholder\"\r\n  [tableActions]=\"rosterActions\"\r\n  [filters]=\"filters\"\r\n  [selectedFilterOptions]=\"roles\"\r\n  (selectedFilter)=\"getRoles()\"\r\n  (removeFilteredOption)=\"onFilterUsersByRoles($event)\"\r\n  (filteredOptions)=\"onFilterUsersByRoles($event)\"\r\n  (searchedValue)=\"onSearchGroupUsers($event)\"\r\n></ieeesa-data-table>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-modal-dialog.ieeesa-view-roster .ieeesa-modal{box-shadow:0 3px #11b7e5 inset,0 4px 24px #00000080}.ieeesa-modal-dialog.ieeesa-view-roster .ieeesa-modal .mat-mdc-dialog-content{padding:0}.ieeesa-data-table__content{height:500px}.ieeesa-data-table__filter{padding-bottom:1em}.ieeesa-data-table__mobile-view-actions{left:2em}.ieeesa-data-table .cdk-column-select{width:7%}.ieeesa-data-table .cdk-column-name{width:18%}.ieeesa-data-table .cdk-column-email{width:27%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DataTableComponent, selector: "ieeesa-data-table", inputs: ["tableDataInfo", "columnSchemaInfo", "tableActions", "caption", "paginatorConfig", "searchPlaceHolderText", "rowEditButton", "rowDeleteButton", "tableEditButton", "tableDeleteButton", "addButton", "defaultColumnSortDirection", "defaultSortedColumn", "filters", "selectedFilterOptions", "appliedFilterOptions"], outputs: ["rowSelected", "selectedRowToEdit", "selectedRowToDelete", "selectedRowsToDelete", "rowLink", "addRow", "columnDataOnRowLinkClick", "paginationChange", "selectedFilter", "removeFilteredOption", "filteredOptions", "searchedValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: ViewRosterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ieeesa-view-roster', standalone: true, imports: [CommonModule, DataTableComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ieeesa-data-table\r\n  [tableDataInfo]=\"tableData\"\r\n  [columnSchemaInfo]=\"columnSchema\"\r\n  [defaultSortedColumn]=\"defaultSortedColumn\"\r\n  [defaultColumnSortDirection]=\"defaultColumnSortDirection\"\r\n  [searchPlaceHolderText]=\"viewRosterConstants?.searchPlaceholder\"\r\n  [tableActions]=\"rosterActions\"\r\n  [filters]=\"filters\"\r\n  [selectedFilterOptions]=\"roles\"\r\n  (selectedFilter)=\"getRoles()\"\r\n  (removeFilteredOption)=\"onFilterUsersByRoles($event)\"\r\n  (filteredOptions)=\"onFilterUsersByRoles($event)\"\r\n  (searchedValue)=\"onSearchGroupUsers($event)\"\r\n></ieeesa-data-table>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-modal-dialog.ieeesa-view-roster .ieeesa-modal{box-shadow:0 3px #11b7e5 inset,0 4px 24px #00000080}.ieeesa-modal-dialog.ieeesa-view-roster .ieeesa-modal .mat-mdc-dialog-content{padding:0}.ieeesa-data-table__content{height:500px}.ieeesa-data-table__filter{padding-bottom:1em}.ieeesa-data-table__mobile-view-actions{left:2em}.ieeesa-data-table .cdk-column-select{width:7%}.ieeesa-data-table .cdk-column-name{width:18%}.ieeesa-data-table .cdk-column-email{width:27%}\n"] }]
+        }], ctorParameters: function () { return [{ type: GroupsService }, { type: i2.AlertsService }, { type: i2.GlobalErrorHandlerService }]; } });
+
 /**
  * Groups component is a wrapper or container component for groups management reusable component and in this component integrates all group management functionalities and this will be entry component for managing groups when it is consumed in other applications.
  * @class GroupsComponent
@@ -1334,6 +1652,23 @@ class GroupsComponent {
         this.functionType = GroupFunctionType?.EDIT;
         this.openModal(dialogOptions, 'ieeesa-create-group');
     }
+    /**
+     * Sets the dialog options for users modal and calls openModal method.
+     * @param {GroupInfo} group
+     * @memberof GroupsComponent
+     */
+    viewRoster(group) {
+        const dialogOptions = {
+            heading: group?.groupName,
+            isCloseNeeded: true,
+            componentReference: ViewRosterComponent,
+            modalType: ModalType.FORM_AND_CONTENT,
+        };
+        this.groupsService.setSelectedGroupInfo(group);
+        this.functionType = GroupFunctionType.VIEW_ROSTER;
+        this.groupsService?.setGroupFunctionType(GroupFunctionType?.EDIT);
+        this.openModal(dialogOptions, 'ieeesa-view-roster');
+    }
     /**
      * Opens modal component with for received params and handles form submission success and errors.
      * @param {*} dialogOptions
@@ -1346,7 +1681,8 @@ class GroupsComponent {
         className = className ?? '';
         this.dialogRef = this.dialog?.open(ModalComponent, {
             data: dialogOptions,
-            width: 'auto',
+            width: this.functionType === GroupFunctionType.VIEW_ROSTER ? '' : 'auto',
+            maxWidth: this.functionType === GroupFunctionType.VIEW_ROSTER ? '90vw' : '',
             panelClass: ['ieeesa-modal-dialog', className],
             ariaModal: true,
         });
@@ -1599,8 +1935,8 @@ class GroupsComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsComponent, deps: [{ token: i1$1.MatDialog }, { token: GroupsService }, { token: i3.AlertsService }, { token: i3.BreakpointObserverService }, { token: i3.GlobalErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: GroupsComponent, isStandalone: true, selector: "ieeesa-groups", inputs: { groupsPageInfo: "groupsPageInfo", applicationId: "applicationId", apiBaseURL: "apiBaseURL", permissions: "permissions" }, providers: [AlertsService], ngImport: i0, template: "<div class=\"ieeesa-groups p-3 p-sm-4 p-md-4 p-lg-4\">\r\n  <div\r\n    class=\"ieeesa-groups__info d-flex justify-content-between pb-3\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__info--white-bg'\r\n        : 'ieeesa-groups__info--blue-bg'\r\n    \"\r\n  >\r\n    <p\r\n      [ngClass]=\"isMobileView ? 'ieeesa-title-lg-24' : 'ieeesa-headline-lg-34'\"\r\n    >\r\n      {{ groupsPageInfo.groupsTitle }}\r\n    </p>\r\n    <div>\r\n      <button\r\n        mat-button\r\n        class=\"ieeesa-groups__create-subgroup mat-tertiary-button d-none d-sm-none d-md-block d-lg-block d-xl-block\"\r\n        (click)=\"openCreateGroupForm()\"\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.addGroup\"\r\n      >\r\n        {{ constants?.viewGroups?.addGroup }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"d-flex d-sm-flex d-md-none d-lg-none d-xl-none ieeesa-groups__mobile-icons gap-2\"\r\n    >\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"createGroupIcon\"\r\n        (iconButtonClick)=\"openCreateGroupForm()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"filterGroupIcon\"\r\n        (iconButtonClick)=\"showGroupFilter()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <button\r\n        mat-button\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.search\"\r\n        (click)=\"onGroupSearch()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"fa-solid fa-magnifying-glass search-group-icon\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"ieeesa-groups__actions\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__actions--white-bg'\r\n        : 'ieeesa-groups__actions--blue-bg'\r\n    \"\r\n  >\r\n    <div class=\"ieeesa-groups__actions--search row\">\r\n      <p\r\n        class=\"ieeesa-body-md-16 order-2 order-sm-1 col-12 col-md-7 col-lg-7 col-xl-7\"\r\n      >\r\n        {{ groupsPageInfo.groupsDescription }}\r\n      </p>\r\n      <div\r\n        *ngIf=\"\r\n          ((isGroupSearchActive || isGroupFilterActive) && isMobileView) ||\r\n          !isMobileView\r\n        \"\r\n        class=\"order-1 order-sm-2 col-12 col-md-5 col-lg-5 col-xl-5 d-flex flex-column\"\r\n      >\r\n        <ieeesa-search\r\n          *ngIf=\"isGroupSearchActive || !isMobileView\"\r\n          (searchValue)=\"onGroupSearchClick($event)\"\r\n          [placeholderLabel]=\"searchPlaceHolderText\"\r\n        ></ieeesa-search>\r\n        <ieeesa-select\r\n          *ngIf=\"isGroupFilterActive || !isMobileView\"\r\n          class=\"align-self-end pt-lg-4 pt-md-4 pt-xl-4\"\r\n          [dropdownOptions]=\"selectGroupOptions\"\r\n          [isLabelAlignedLeft]=\"true\"\r\n          [selectLabel]=\"constants?.viewGroups?.filterByLabel\"\r\n          (optionSelected)=\"onGroupTypeFiltered($event)\"\r\n          [placeholderText]=\"filterPlaceHolderText\"\r\n          [selectedOptions]=\"selectedGroupType\"\r\n        ></ieeesa-select>\r\n      </div>\r\n    </div>\r\n    <ieeesa-tree\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      [parentGroupsInfo]=\"parentGroupsInfo\"\r\n      [childGroupsInfo]=\"childGroupsInfo\"\r\n      [deletedGroupIdInfo]=\"deletedGroupId\"\r\n      [isGroupSearchOrFilterActive]=\"isGroupSearchOrFilterActive\"\r\n      (toggleGroupClick)=\"getGroups($event)\"\r\n      (createGroupClick)=\"openCreateGroupForm($event)\"\r\n      (deleteGroupClick)=\"openDeleteConfirmationModal($event)\"\r\n      (editGroupClick)=\"openEditGroupForm($event)\"\r\n    ></ieeesa-tree>\r\n    <div\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      class=\"d-flex flex-column flex-sm-row flex-md-row mt-4 justify-content-start justify-content-sm-end\"\r\n    >\r\n      <p class=\"px-sm-3 d-flex align-items-center ieeesa-label-lg-bold-16\">\r\n        {{ constants?.viewGroups?.legend }}\r\n      </p>\r\n      <ieeesa-legend [legends]=\"groupsLegends\"></ieeesa-legend>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-groups{background-color:#f2f2f2}.ieeesa-groups__mobile-icons .mat-mdc-button{min-width:45px;padding:0 10px}.ieeesa-groups__mobile-icons .ieeesa-icon-button__svg{height:1.5em!important;width:1.5em!important}.ieeesa-groups__info--white-bg{background-color:#fff;padding:16px 24px 0}.ieeesa-groups__info .search-group-icon{height:1.5em;color:#00629b}.ieeesa-groups__actions{background-color:#fff;box-shadow:0 2px #00b5e2 inset;padding:16px 24px 48px}.ieeesa-groups__actions--white-bg{background-color:#fff;box-shadow:none}.ieeesa-groups .ieeesa-select-field__label{width:max-content;padding-right:9px;font-size:1em}.ieeesa-groups .ieeesa-select-field__label-left{display:flex;align-items:baseline}.ieeesa-groups .ieeesa-select-field .mat-mdc-form-field{width:auto}.ieeesa-groups .ieeesa-select-field .ieeesa-form-support-text{display:none}.ieeesa-groups .ieeesa-search-field__search-icon{color:#00629b}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field{width:100%;border-radius:3px;background:linear-gradient(0deg,rgba(0,98,155,.05) 0%,rgba(0,98,155,.05) 100%),#fffbfe;font-size:1em;box-shadow:0 0 4px #00000080 inset}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__leading,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__notch,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__trailing{border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SearchComponent, selector: "ieeesa-search", inputs: ["formControlName", "placeholderLabel", "searchType", "searchTerm"], outputs: ["searchValue"] }, { kind: "component", type: SelectComponent, selector: "ieeesa-select", inputs: ["isSortNeeded", "dropdownOptions", "selectedOptions", "formControlName", "isMultiLevel", "isLabelAlignedLeft", "selectLabel", "isMultiSelect", "isDisabled", "isSearch", "placeholderText"], outputs: ["optionSelected", "optionSearched"] }, { kind: "component", type: TreeViewComponent, selector: "ieeesa-tree", inputs: ["parentGroupsInfo", "childGroupsInfo", "isGroupSearchOrFilterActive", "deletedGroupIdInfo"], outputs: ["toggleGroupClick", "createGroupClick", "editGroupClick", "deleteGroupClick"] }, { kind: "component", type: LegendComponent, selector: "ieeesa-legend", inputs: ["legends"] }, { kind: "component", type: IconButtonComponent, selector: "ieeesa-icon-button", inputs: ["iconButton"], outputs: ["iconButtonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsComponent, deps: [{ token: i1$1.MatDialog }, { token: GroupsService }, { token: i2.AlertsService }, { token: i2.BreakpointObserverService }, { token: i2.GlobalErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: GroupsComponent, isStandalone: true, selector: "ieeesa-groups", inputs: { groupsPageInfo: "groupsPageInfo", applicationId: "applicationId", apiBaseURL: "apiBaseURL", permissions: "permissions" }, providers: [AlertsService], ngImport: i0, template: "<div class=\"ieeesa-groups p-3 p-sm-4 p-md-4 p-lg-4\">\r\n  <div\r\n    class=\"ieeesa-groups__info d-flex justify-content-between pb-3\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__info--white-bg'\r\n        : 'ieeesa-groups__info--blue-bg'\r\n    \"\r\n  >\r\n    <p\r\n      [ngClass]=\"isMobileView ? 'ieeesa-title-lg-24' : 'ieeesa-headline-lg-34'\"\r\n    >\r\n      {{ groupsPageInfo.groupsTitle }}\r\n    </p>\r\n    <div>\r\n      <button\r\n        mat-button\r\n        class=\"ieeesa-groups__create-subgroup mat-tertiary-button d-none d-sm-none d-md-block d-lg-block d-xl-block\"\r\n        (click)=\"openCreateGroupForm()\"\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.addGroup\"\r\n      >\r\n        {{ constants?.viewGroups?.addGroup }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"d-flex d-sm-flex d-md-none d-lg-none d-xl-none ieeesa-groups__mobile-icons gap-2\"\r\n    >\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"createGroupIcon\"\r\n        (iconButtonClick)=\"openCreateGroupForm()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"filterGroupIcon\"\r\n        (iconButtonClick)=\"showGroupFilter()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <button\r\n        mat-button\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.search\"\r\n        (click)=\"onGroupSearch()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"fa-solid fa-magnifying-glass search-group-icon\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"ieeesa-groups__actions\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__actions--white-bg'\r\n        : 'ieeesa-groups__actions--blue-bg'\r\n    \"\r\n  >\r\n    <div class=\"ieeesa-groups__actions--search row\">\r\n      <p\r\n        class=\"ieeesa-body-md-16 order-2 order-sm-1 col-12 col-md-7 col-lg-7 col-xl-7\"\r\n      >\r\n        {{ groupsPageInfo.groupsDescription }}\r\n      </p>\r\n      <div\r\n        *ngIf=\"\r\n          ((isGroupSearchActive || isGroupFilterActive) && isMobileView) ||\r\n          !isMobileView\r\n        \"\r\n        class=\"order-1 order-sm-2 col-12 col-md-5 col-lg-5 col-xl-5 d-flex flex-column\"\r\n      >\r\n        <ieeesa-search\r\n          *ngIf=\"isGroupSearchActive || !isMobileView\"\r\n          (searchValue)=\"onGroupSearchClick($event)\"\r\n          [placeholderLabel]=\"searchPlaceHolderText\"\r\n        ></ieeesa-search>\r\n        <ieeesa-select\r\n          *ngIf=\"isGroupFilterActive || !isMobileView\"\r\n          class=\"align-self-end pt-lg-4 pt-md-4 pt-xl-4\"\r\n          [dropdownOptions]=\"selectGroupOptions\"\r\n          [isLabelAlignedLeft]=\"true\"\r\n          [selectLabel]=\"constants?.viewGroups?.filterByLabel\"\r\n          (optionSelected)=\"onGroupTypeFiltered($event)\"\r\n          [placeholderText]=\"filterPlaceHolderText\"\r\n          [selectedOptions]=\"selectedGroupType\"\r\n        ></ieeesa-select>\r\n      </div>\r\n    </div>\r\n    <ieeesa-tree\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      [parentGroupsInfo]=\"parentGroupsInfo\"\r\n      [childGroupsInfo]=\"childGroupsInfo\"\r\n      [deletedGroupIdInfo]=\"deletedGroupId\"\r\n      [isGroupSearchOrFilterActive]=\"isGroupSearchOrFilterActive\"\r\n      (toggleGroupClick)=\"getGroups($event)\"\r\n      (createGroupClick)=\"openCreateGroupForm($event)\"\r\n      (deleteGroupClick)=\"openDeleteConfirmationModal($event)\"\r\n      (viewRosterClick)=\"viewRoster($event)\"\r\n      (editGroupClick)=\"openEditGroupForm($event)\"\r\n    ></ieeesa-tree>\r\n    <div\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      class=\"d-flex flex-column flex-sm-row flex-md-row mt-4 justify-content-start justify-content-sm-end\"\r\n    >\r\n      <p class=\"px-sm-3 d-flex align-items-center ieeesa-label-lg-bold-16\">\r\n        {{ constants?.viewGroups?.legend }}\r\n      </p>\r\n      <ieeesa-legend [legends]=\"groupsLegends\"></ieeesa-legend>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-groups{background-color:#f2f2f2}.ieeesa-groups__mobile-icons .mat-mdc-button{min-width:45px;padding:0 10px}.ieeesa-groups__mobile-icons .ieeesa-icon-button__svg{height:1.5em!important;width:1.5em!important}.ieeesa-groups__info--white-bg{background-color:#fff;padding:16px 24px 0}.ieeesa-groups__info .search-group-icon{height:1.5em;color:#00629b}.ieeesa-groups__actions{background-color:#fff;box-shadow:0 2px #00b5e2 inset;padding:16px 24px 48px}.ieeesa-groups__actions--white-bg{background-color:#fff;box-shadow:none}.ieeesa-groups .ieeesa-select-field__label{width:max-content;padding-right:9px;font-size:1em}.ieeesa-groups .ieeesa-select-field__label-left{display:flex;align-items:baseline}.ieeesa-groups .ieeesa-select-field .mat-mdc-form-field{width:auto}.ieeesa-groups .ieeesa-select-field .ieeesa-form-support-text{display:none}.ieeesa-groups .ieeesa-search-field__search-icon{color:#00629b}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field{width:100%;border-radius:3px;background:linear-gradient(0deg,rgba(0,98,155,.05) 0%,rgba(0,98,155,.05) 100%),#fffbfe;font-size:1em;box-shadow:0 0 4px #00000080 inset}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__leading,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__notch,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__trailing{border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SearchComponent, selector: "ieeesa-search", inputs: ["formControlName", "placeholderLabel", "searchType", "searchTerm"], outputs: ["searchValue"] }, { kind: "component", type: SelectComponent, selector: "ieeesa-select", inputs: ["isSortNeeded", "dropdownOptions", "selectedOptions", "formControlName", "isMultiLevel", "isLabelAlignedLeft", "selectLabel", "isMultiSelect", "isDisabled", "isSearch", "placeholderText"], outputs: ["optionSelected", "optionSearched"] }, { kind: "component", type: TreeViewComponent, selector: "ieeesa-tree", inputs: ["parentGroupsInfo", "childGroupsInfo", "isGroupSearchOrFilterActive", "deletedGroupIdInfo"], outputs: ["toggleGroupClick", "createGroupClick", "editGroupClick", "deleteGroupClick", "viewRosterClick"] }, { kind: "component", type: LegendComponent, selector: "ieeesa-legend", inputs: ["legends"] }, { kind: "component", type: IconButtonComponent, selector: "ieeesa-icon-button", inputs: ["iconButton"], outputs: ["iconButtonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
@@ -1613,8 +1949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
                         TreeViewComponent,
                         LegendComponent,
                         IconButtonComponent,
-                    ], encapsulation: ViewEncapsulation.None, providers: [AlertsService], template: "<div class=\"ieeesa-groups p-3 p-sm-4 p-md-4 p-lg-4\">\r\n  <div\r\n    class=\"ieeesa-groups__info d-flex justify-content-between pb-3\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__info--white-bg'\r\n        : 'ieeesa-groups__info--blue-bg'\r\n    \"\r\n  >\r\n    <p\r\n      [ngClass]=\"isMobileView ? 'ieeesa-title-lg-24' : 'ieeesa-headline-lg-34'\"\r\n    >\r\n      {{ groupsPageInfo.groupsTitle }}\r\n    </p>\r\n    <div>\r\n      <button\r\n        mat-button\r\n        class=\"ieeesa-groups__create-subgroup mat-tertiary-button d-none d-sm-none d-md-block d-lg-block d-xl-block\"\r\n        (click)=\"openCreateGroupForm()\"\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.addGroup\"\r\n      >\r\n        {{ constants?.viewGroups?.addGroup }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"d-flex d-sm-flex d-md-none d-lg-none d-xl-none ieeesa-groups__mobile-icons gap-2\"\r\n    >\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"createGroupIcon\"\r\n        (iconButtonClick)=\"openCreateGroupForm()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"filterGroupIcon\"\r\n        (iconButtonClick)=\"showGroupFilter()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <button\r\n        mat-button\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.search\"\r\n        (click)=\"onGroupSearch()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"fa-solid fa-magnifying-glass search-group-icon\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"ieeesa-groups__actions\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__actions--white-bg'\r\n        : 'ieeesa-groups__actions--blue-bg'\r\n    \"\r\n  >\r\n    <div class=\"ieeesa-groups__actions--search row\">\r\n      <p\r\n        class=\"ieeesa-body-md-16 order-2 order-sm-1 col-12 col-md-7 col-lg-7 col-xl-7\"\r\n      >\r\n        {{ groupsPageInfo.groupsDescription }}\r\n      </p>\r\n      <div\r\n        *ngIf=\"\r\n          ((isGroupSearchActive || isGroupFilterActive) && isMobileView) ||\r\n          !isMobileView\r\n        \"\r\n        class=\"order-1 order-sm-2 col-12 col-md-5 col-lg-5 col-xl-5 d-flex flex-column\"\r\n      >\r\n        <ieeesa-search\r\n          *ngIf=\"isGroupSearchActive || !isMobileView\"\r\n          (searchValue)=\"onGroupSearchClick($event)\"\r\n          [placeholderLabel]=\"searchPlaceHolderText\"\r\n        ></ieeesa-search>\r\n        <ieeesa-select\r\n          *ngIf=\"isGroupFilterActive || !isMobileView\"\r\n          class=\"align-self-end pt-lg-4 pt-md-4 pt-xl-4\"\r\n          [dropdownOptions]=\"selectGroupOptions\"\r\n          [isLabelAlignedLeft]=\"true\"\r\n          [selectLabel]=\"constants?.viewGroups?.filterByLabel\"\r\n          (optionSelected)=\"onGroupTypeFiltered($event)\"\r\n          [placeholderText]=\"filterPlaceHolderText\"\r\n          [selectedOptions]=\"selectedGroupType\"\r\n        ></ieeesa-select>\r\n      </div>\r\n    </div>\r\n    <ieeesa-tree\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      [parentGroupsInfo]=\"parentGroupsInfo\"\r\n      [childGroupsInfo]=\"childGroupsInfo\"\r\n      [deletedGroupIdInfo]=\"deletedGroupId\"\r\n      [isGroupSearchOrFilterActive]=\"isGroupSearchOrFilterActive\"\r\n      (toggleGroupClick)=\"getGroups($event)\"\r\n      (createGroupClick)=\"openCreateGroupForm($event)\"\r\n      (deleteGroupClick)=\"openDeleteConfirmationModal($event)\"\r\n      (editGroupClick)=\"openEditGroupForm($event)\"\r\n    ></ieeesa-tree>\r\n    <div\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      class=\"d-flex flex-column flex-sm-row flex-md-row mt-4 justify-content-start justify-content-sm-end\"\r\n    >\r\n      <p class=\"px-sm-3 d-flex align-items-center ieeesa-label-lg-bold-16\">\r\n        {{ constants?.viewGroups?.legend }}\r\n      </p>\r\n      <ieeesa-legend [legends]=\"groupsLegends\"></ieeesa-legend>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-groups{background-color:#f2f2f2}.ieeesa-groups__mobile-icons .mat-mdc-button{min-width:45px;padding:0 10px}.ieeesa-groups__mobile-icons .ieeesa-icon-button__svg{height:1.5em!important;width:1.5em!important}.ieeesa-groups__info--white-bg{background-color:#fff;padding:16px 24px 0}.ieeesa-groups__info .search-group-icon{height:1.5em;color:#00629b}.ieeesa-groups__actions{background-color:#fff;box-shadow:0 2px #00b5e2 inset;padding:16px 24px 48px}.ieeesa-groups__actions--white-bg{background-color:#fff;box-shadow:none}.ieeesa-groups .ieeesa-select-field__label{width:max-content;padding-right:9px;font-size:1em}.ieeesa-groups .ieeesa-select-field__label-left{display:flex;align-items:baseline}.ieeesa-groups .ieeesa-select-field .mat-mdc-form-field{width:auto}.ieeesa-groups .ieeesa-select-field .ieeesa-form-support-text{display:none}.ieeesa-groups .ieeesa-search-field__search-icon{color:#00629b}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field{width:100%;border-radius:3px;background:linear-gradient(0deg,rgba(0,98,155,.05) 0%,rgba(0,98,155,.05) 100%),#fffbfe;font-size:1em;box-shadow:0 0 4px #00000080 inset}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__leading,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__notch,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__trailing{border:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: GroupsService }, { type: i3.AlertsService }, { type: i3.BreakpointObserverService }, { type: i3.GlobalErrorHandlerService }]; }, propDecorators: { groupsPageInfo: [{
+                    ], encapsulation: ViewEncapsulation.None, providers: [AlertsService], template: "<div class=\"ieeesa-groups p-3 p-sm-4 p-md-4 p-lg-4\">\r\n  <div\r\n    class=\"ieeesa-groups__info d-flex justify-content-between pb-3\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__info--white-bg'\r\n        : 'ieeesa-groups__info--blue-bg'\r\n    \"\r\n  >\r\n    <p\r\n      [ngClass]=\"isMobileView ? 'ieeesa-title-lg-24' : 'ieeesa-headline-lg-34'\"\r\n    >\r\n      {{ groupsPageInfo.groupsTitle }}\r\n    </p>\r\n    <div>\r\n      <button\r\n        mat-button\r\n        class=\"ieeesa-groups__create-subgroup mat-tertiary-button d-none d-sm-none d-md-block d-lg-block d-xl-block\"\r\n        (click)=\"openCreateGroupForm()\"\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.addGroup\"\r\n      >\r\n        {{ constants?.viewGroups?.addGroup }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"d-flex d-sm-flex d-md-none d-lg-none d-xl-none ieeesa-groups__mobile-icons gap-2\"\r\n    >\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"createGroupIcon\"\r\n        (iconButtonClick)=\"openCreateGroupForm()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <ieeesa-icon-button\r\n        [iconButton]=\"filterGroupIcon\"\r\n        (iconButtonClick)=\"showGroupFilter()\"\r\n      >\r\n      </ieeesa-icon-button>\r\n      <button\r\n        mat-button\r\n        [attr.aria-label]=\"constants?.viewGroups?.ariaLabel?.search\"\r\n        (click)=\"onGroupSearch()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"fa-solid fa-magnifying-glass search-group-icon\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"ieeesa-groups__actions\"\r\n    [ngClass]=\"\r\n      isMobileView\r\n        ? 'ieeesa-groups__actions--white-bg'\r\n        : 'ieeesa-groups__actions--blue-bg'\r\n    \"\r\n  >\r\n    <div class=\"ieeesa-groups__actions--search row\">\r\n      <p\r\n        class=\"ieeesa-body-md-16 order-2 order-sm-1 col-12 col-md-7 col-lg-7 col-xl-7\"\r\n      >\r\n        {{ groupsPageInfo.groupsDescription }}\r\n      </p>\r\n      <div\r\n        *ngIf=\"\r\n          ((isGroupSearchActive || isGroupFilterActive) && isMobileView) ||\r\n          !isMobileView\r\n        \"\r\n        class=\"order-1 order-sm-2 col-12 col-md-5 col-lg-5 col-xl-5 d-flex flex-column\"\r\n      >\r\n        <ieeesa-search\r\n          *ngIf=\"isGroupSearchActive || !isMobileView\"\r\n          (searchValue)=\"onGroupSearchClick($event)\"\r\n          [placeholderLabel]=\"searchPlaceHolderText\"\r\n        ></ieeesa-search>\r\n        <ieeesa-select\r\n          *ngIf=\"isGroupFilterActive || !isMobileView\"\r\n          class=\"align-self-end pt-lg-4 pt-md-4 pt-xl-4\"\r\n          [dropdownOptions]=\"selectGroupOptions\"\r\n          [isLabelAlignedLeft]=\"true\"\r\n          [selectLabel]=\"constants?.viewGroups?.filterByLabel\"\r\n          (optionSelected)=\"onGroupTypeFiltered($event)\"\r\n          [placeholderText]=\"filterPlaceHolderText\"\r\n          [selectedOptions]=\"selectedGroupType\"\r\n        ></ieeesa-select>\r\n      </div>\r\n    </div>\r\n    <ieeesa-tree\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      [parentGroupsInfo]=\"parentGroupsInfo\"\r\n      [childGroupsInfo]=\"childGroupsInfo\"\r\n      [deletedGroupIdInfo]=\"deletedGroupId\"\r\n      [isGroupSearchOrFilterActive]=\"isGroupSearchOrFilterActive\"\r\n      (toggleGroupClick)=\"getGroups($event)\"\r\n      (createGroupClick)=\"openCreateGroupForm($event)\"\r\n      (deleteGroupClick)=\"openDeleteConfirmationModal($event)\"\r\n      (viewRosterClick)=\"viewRoster($event)\"\r\n      (editGroupClick)=\"openEditGroupForm($event)\"\r\n    ></ieeesa-tree>\r\n    <div\r\n      *ngIf=\"parentGroupsInfo && parentGroupsInfo.length > 0\"\r\n      class=\"d-flex flex-column flex-sm-row flex-md-row mt-4 justify-content-start justify-content-sm-end\"\r\n    >\r\n      <p class=\"px-sm-3 d-flex align-items-center ieeesa-label-lg-bold-16\">\r\n        {{ constants?.viewGroups?.legend }}\r\n      </p>\r\n      <ieeesa-legend [legends]=\"groupsLegends\"></ieeesa-legend>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.56em;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25em;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625em;line-height:64px;color:#000;letter-spacing:0}.ieeesa-display-md-47{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.9375em;line-height:52px;color:#000;letter-spacing:0}.ieeesa-display-sm-38{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.375em;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125em;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-md-30{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.875em;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625em;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-lg-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5em;line-height:28px;color:#000;letter-spacing:0}.ieeesa-title-md-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125em;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-18{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1em;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:.875em;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-title-inter-lg-bold-24{font-family:Inter Bold;font-style:normal;font-weight:700;font-size:1.5em;line-height:29px;color:#000;letter-spacing:0}.mat-mdc-button.mat-mdc-button-base.mat-primary-button,.mat-mdc-button.mat-mdc-button-base.mat-secondary-button,.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{min-width:103px;width:auto;min-height:40px;height:auto;border-radius:3px;text-align:center;padding:.625em 1.5em;border:none;font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#000;letter-spacing:.00625em}.mat-mdc-button.mat-mdc-button-base>.mat-icon{margin-right:11px}.mat-mdc-button.mat-mdc-button-base.mat-primary-button{background-color:#00629b;color:#fff}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:hover{background-color:#003e65}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:active{background-color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-primary-button:disabled{background-color:#1c1b1f1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button{color:#fff;background:#a7a8aa;box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:hover{background:#a7a8aa}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:rgba(29,25,43,.12)}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button{background-color:#fff;border:1px solid #00629b;color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:hover{background-color:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:rgba(103,80,164,.12)}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.ieeesa-text-button{color:#cac4d0;background:none;border:none}.ieeesa-view-more-or-less-button{border:none;background:none;text-decoration:underline;color:#00629b}.flex-align-center{display:flex;align-items:center;justify-content:center}.mat-button-toggle-checked{background-color:#a7a8aa}.mat-button-toggle-checked .mat-button-toggle-label-content:before{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\\f00c\";padding-right:.5625em}.mat-button-toggle-group .mat-button-toggle-label-content{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1em;line-height:20px;color:#1c1b1f;letter-spacing:.00625em}.no-bg-color-btn{color:#00629b;border-radius:3px;border:1px solid #00629b;min-height:40px;height:auto}@media (max-width: 768px){.mat-button-toggle-group .mat-button-toggle-label-content{max-width:8ch;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative}}.cdk-overlay-pane.ieeesa-modal-confirm-dialog,.cdk-overlay-pane.ieeesa-modal-dialog,.cdk-overlay-pane.ieeesa-alert-dialog{width:100%;min-width:312px}.mat-mdc-form-field{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.125em;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-groups{background-color:#f2f2f2}.ieeesa-groups__mobile-icons .mat-mdc-button{min-width:45px;padding:0 10px}.ieeesa-groups__mobile-icons .ieeesa-icon-button__svg{height:1.5em!important;width:1.5em!important}.ieeesa-groups__info--white-bg{background-color:#fff;padding:16px 24px 0}.ieeesa-groups__info .search-group-icon{height:1.5em;color:#00629b}.ieeesa-groups__actions{background-color:#fff;box-shadow:0 2px #00b5e2 inset;padding:16px 24px 48px}.ieeesa-groups__actions--white-bg{background-color:#fff;box-shadow:none}.ieeesa-groups .ieeesa-select-field__label{width:max-content;padding-right:9px;font-size:1em}.ieeesa-groups .ieeesa-select-field__label-left{display:flex;align-items:baseline}.ieeesa-groups .ieeesa-select-field .mat-mdc-form-field{width:auto}.ieeesa-groups .ieeesa-select-field .ieeesa-form-support-text{display:none}.ieeesa-groups .ieeesa-search-field__search-icon{color:#00629b}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field{width:100%;border-radius:3px;background:linear-gradient(0deg,rgba(0,98,155,.05) 0%,rgba(0,98,155,.05) 100%),#fffbfe;font-size:1em;box-shadow:0 0 4px #00000080 inset}.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__leading,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__notch,.ieeesa-groups .ieeesa-search-field .mat-mdc-form-field .mdc-notched-outline__trailing{border:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: GroupsService }, { type: i2.AlertsService }, { type: i2.BreakpointObserverService }, { type: i2.GlobalErrorHandlerService }]; }, propDecorators: { groupsPageInfo: [{
                 type: Input
             }], applicationId: [{
                 type: Input