@ieeesa-npm/groups 0.3.0 → 0.3.1

package/fesm2022/ieeesa-npm-groups.mjs

@@ -17,6 +17,8 @@ import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 var createGroup = {
 	heading: "New Group",
@@ -88,11 +90,11 @@ var viewGroups = {
 	addGroup: "Add Group",
 	groupsTitle: "Committees",
 	allGroupTypesOption: "All Group Types",
-	groupsDescription: " View Committees, sub Committees, work groups and task groups that work for NESC revision cycle process, as well as view roasters and member details for each of the groups and sub groups.",
+	groupsDescription: "View and manage committees",
 	filterByLabel: "Filter by",
 	createGroupIcon: "assets/images/sprites/sprites.svg#icon-create-group-white-bg",
 	filterGroupIcon: "assets/images/sprites/sprites.svg#icon-sort",
-	treePaddingIndent: 24,
+	treePaddingIndent: 12,
 	placeholderText: {
 		search: "Search by Group Name/Abbreviation/Type/Scope",
 		filter: "Group Type"
@@ -198,17 +200,22 @@ var errors = {
 	"2002": "Role does not belong to the group type.",
 	ER1000: "Allowed group types are not found for the selected group!"
 };
+var ariaLabel = {
+	alert: "Alert"
+};
 var constants = {
 	createGroup: createGroup,
 	editGroup: editGroup,
 	viewGroups: viewGroups,
 	deleteGroup: deleteGroup,
 	viewRoster: viewRoster,
-	errors: errors
+	errors: errors,
+	ariaLabel: ariaLabel
 };
 
 var screenTexts = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    ariaLabel: ariaLabel,
     createGroup: createGroup,
     default: constants,
     deleteGroup: deleteGroup,
@@ -223,7 +230,7 @@ const GroupsValidationPatterns = {
     // Group Name field regular expression, which accept Alpha Numeric, Special Characters (ASCII) and whitespace.
     groupName: /^(?=.*[a-zA-Z])[\w\s!"#$%&'()*+,-.\/\:;<=>?@[\]^_`{|}~\\]+$/i,
     // Group Short Name field regular expression which accept letters, numbers and ".","," , "/", "-" , "_" characters.
-    shortName: /^[a-zA-Z0-9]+[.,-_/ ]*/,
+    shortName: /^(?=.*[a-zA-Z])[a-zA-Z0-9.,\/\-_ ]+$/,
     // Group Scope field regular expression which accept Alpha Numeric, Special Characters and whitespace.
     groupScope: /^(?=.*[a-zA-Z])[\w\s!"#$%&'()*+,-.\/\:;<=>?@[\]^_`{|}~\\]+$/i
 };
@@ -900,6 +907,8 @@ var GroupAction;
     GroupAction[GroupAction["COLLAPSE_GROUP_VIEW"] = 6] = "COLLAPSE_GROUP_VIEW";
 })(GroupAction || (GroupAction = {}));
 
+// TODO: Update the import path from @ieeesa-npm/presentation once the package is published.
+// import { TextTruncatedDirective } from '../../../../../presentation/src/lib/directives/text-truncated/text-truncated.directive';
 /**
  * Dynamic Flat node creates a node structure
  * @export
@@ -1121,6 +1130,7 @@ class TreeViewComponent {
         this.destroy$ = new Subject();
         this.plusCircleIconButton = this.buttons[4];
         this.minusCircleIconButton = this.buttons[5];
+        this.isEditGroup = false;
         this.menuItems = this.buttons?.filter((e) => e.id !== GroupAction?.EXPAND_GROUP_VIEW &&
             e.id !== GroupAction?.COLLAPSE_GROUP_VIEW);
         this.isGroupSearchOrFilter = false;
@@ -1203,9 +1213,41 @@ class TreeViewComponent {
      * @memberof TreeViewComponent
      */
     setGroupDataSource() {
-        this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
-        this.dataSource = new GroupsDataSource(this.treeControl, this.database);
-        this.dataSource.data = this.database?.initialData(this.parentGroupsInfo);
+        if (this.isEditGroup) {
+            this.editGroup(this.parentGroupsInfo);
+        }
+        if (this.dataSource && !this.isEditGroup) {
+            this.parentGroupsInfo?.forEach((parentGroupNode) => {
+                if (this.dataSource?.data?.findIndex((node) => node?.item?.groupId === parentGroupNode?.groupId) === -1) {
+                    const newGroupNode = new GroupNode(parentGroupNode, 0, this.database.isExpandable(parentGroupNode));
+                    const groupNodesReference = this.dataSource?.data;
+                    groupNodesReference?.push(newGroupNode);
+                    this.dataSource.data = groupNodesReference;
+                }
+            });
+        }
+        else {
+            this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
+            this.dataSource = new GroupsDataSource(this.treeControl, this.database);
+            this.dataSource.data = this.database?.initialData(this.parentGroupsInfo);
+        }
+    }
+    /**
+     * Sets the updated node information
+     * @param {GroupInfo[]} groupsInfo
+     * @memberof TreeViewComponent
+     */
+    editGroup(groupsInfo) {
+        const groupNodeReference = this.dataSource?.data;
+        const editedNode = groupsInfo?.find((node) => node?.groupId === this.editGroupAndParentGroupInfo?.groupInfo?.groupId);
+        groupNodeReference?.forEach((node) => {
+            if (node?.item?.groupId === this.editGroupAndParentGroupInfo?.groupInfo?.groupId) {
+                node.item = editedNode;
+                node.expandable = this.database.isExpandable(node?.item);
+            }
+        });
+        this.dataSource.data = groupNodeReference;
+        this.isEditGroup = false;
     }
     /**
      * Loads the child groups and updates the tree view.
@@ -1213,8 +1255,27 @@ class TreeViewComponent {
      */
     loadChildGroups() {
         this.database?.setChildGroupsInfo(this.childGroupsInfo);
-        if (this.selectedGroup)
-            this.treeControl?.toggle(this.selectedGroup);
+        const groupNodesReference = this.dataSource?.data;
+        if (this.selectedGroup && !this.isEditGroup) {
+            if (!this.selectedGroup?.item?.hasChildren) {
+                this.selectedGroup.item.hasChildren = true;
+                const groupParentNode = new GroupNode(this.selectedGroup.item, this.selectedGroup.level, true);
+                groupNodesReference.splice(groupNodesReference.indexOf(this.selectedGroup), 1, groupParentNode);
+                this.dataSource.data = groupNodesReference;
+                this.treeControl.expand(groupParentNode);
+            }
+            if (this.treeControl.isExpanded(this.selectedGroup)) {
+                const children = this.database.getChildGroupsInfo();
+                const nodes = children?.map((node) => new GroupNode(node, this.selectedGroup?.level + 1, this.database?.isExpandable(node)));
+                groupNodesReference.splice(groupNodesReference.indexOf(this.selectedGroup) + 1, 0, ...nodes);
+                this.dataSource.data = groupNodesReference;
+            }
+            else
+                this.treeControl?.toggle(this.selectedGroup);
+        }
+        if (this.isEditGroup) {
+            this.editGroup(this.childGroupsInfo);
+        }
     }
     /**
      * Deletes the selected group and updates the tree view.
@@ -1257,17 +1318,19 @@ class TreeViewComponent {
             this.viewRosterClick.emit(group?.item);
         }
         else if (this.selectedGroupAction?.id === GroupAction.CREATE_SUB_GROUP) {
+            this.selectedGroup = group;
             this.createGroupClick.emit(group?.item);
         }
         else if (this.selectedGroupAction?.id === GroupAction.EDIT_GROUP) {
             const editGroupParentInfo = this.dataSource?.data?.filter(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (item) => item?.item?.groupId === group?.item?.groupParentId)[0]?.item;
-            const editGroupAndParentInfo = {
+            this.editGroupAndParentGroupInfo = {
                 groupInfo: group?.item,
                 parentGroupInfo: editGroupParentInfo,
             };
-            this.editGroupClick.emit(editGroupAndParentInfo);
+            this.isEditGroup = true;
+            this.editGroupClick.emit(this.editGroupAndParentGroupInfo);
         }
         else if (this.selectedGroupAction?.id === GroupAction.DELETE_GROUP) {
             this.deleteGroupClick.emit(group?.item);
@@ -1312,7 +1375,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", 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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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"] }] }); }
+    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      class=\"ieeesa-body-md-16\"\r\n    >\r\n      <div\r\n        class=\"ieeesa-tree__node w-100 d-flex gap-lg-3 my-0 gap-0 gap-sm-0 gap-md-2\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div\r\n          [ngClass]=\"\r\n            !isGroupSearchOrFilterActive ? 'ieeesa-tree__collapse-icon' : ''\r\n          \"\r\n          role=\"gridcell\"\r\n        ></div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            ieeesaGroupNodeOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\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      class=\"ieeesa-body-md-16 ieeesa-tree__parent-node-wrapper\"\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 gap-lg-3 my-0 gap-0 gap-sm-0 gap-md-2\"\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            ieeesaGroupNodeOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\r\n      </div>\r\n    </mat-tree-node>\r\n    <ng-template #ieeesaGroupNodeOutlet let-node>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"ieeesaGroupInfoOutlet; context: { $implicit: node }\"\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 ieeesa-tree__group-actions\"\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)=\"onGroupActionsClick($event); handleGroupActions(node)\"\r\n        class=\"d-lg-none d-md-none d-sm-none\"\r\n        role=\"gridcell\"\r\n      ></ieeesa-menu>\r\n    </ng-template>\r\n    <ng-template #ieeesaGroupInfoOutlet let-node>\r\n      <div class=\"ieeesa-tree__group-info-wrapper\">\r\n        <div\r\n          class=\"ieeesa-tree__group-info d-flex flex-column flex-sm-column flex-md-column 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\r\n            class=\"ieeesa-tree__node-group-name ieeesa-headline-sm-26\"\r\n            [matTooltip]=\"node?.item?.groupName\"\r\n            role=\"gridcell\"\r\n          >\r\n            {{ node?.item?.groupName }}\r\n          </p>\r\n          <p\r\n            class=\"ieeesa-tree__node-group-acronym ieeesa-title-lg-24\"\r\n            [matTooltip]=\"node?.item?.groupAcronym\"\r\n            role=\"gridcell\"\r\n          >\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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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 .mat-mdc-icon-button{padding:0!important;position:absolute;right:1.7em}.ieeesa-tree__group-actions{position:absolute;right:4.375em}.ieeesa-tree__group-info-wrapper{width:80%;max-width:60%}.ieeesa-tree__parent-node-wrapper .ieeesa-tree__group-info-wrapper{max-width:69%}.ieeesa-tree__node-group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:67%;min-width:0}.ieeesa-tree__node-group-acronym{color:#63666a!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:auto;max-width:100%;min-width:0}.ieeesa-tree__node-group-desc{color:#4a4d50!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ieeesa-tree__node-group-desc:hover{text-wrap:wrap}.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}@media (max-width: 992px){.ieeesa-tree__group-info-wrapper{max-width:60%}.ieeesa-tree__node-group-acronym{max-width:90%}}@media (max-width: 576px){.ieeesa-tree__group-info-wrapper,.ieeesa-tree__node-group-acronym,.ieeesa-tree__parent-node-wrapper .ieeesa-tree__group-info-wrapper{max-width:90%}.ieeesa-tree__node-group-name{max-width:80%}}\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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
@@ -1323,7 +1386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
                         MatButtonModule,
                         MenuComponent,
                         IconButtonComponent,
-                    ], 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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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"] }]
+                        MatTooltipModule,
+                        // TextTruncatedDirective
+                    ], encapsulation: ViewEncapsulation.None, 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      class=\"ieeesa-body-md-16\"\r\n    >\r\n      <div\r\n        class=\"ieeesa-tree__node w-100 d-flex gap-lg-3 my-0 gap-0 gap-sm-0 gap-md-2\"\r\n        [ngStyle]=\"getBoxShadow(node?.item?.groupTypeInfo?.legendColor)\"\r\n      >\r\n        <div\r\n          [ngClass]=\"\r\n            !isGroupSearchOrFilterActive ? 'ieeesa-tree__collapse-icon' : ''\r\n          \"\r\n          role=\"gridcell\"\r\n        ></div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            ieeesaGroupNodeOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\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      class=\"ieeesa-body-md-16 ieeesa-tree__parent-node-wrapper\"\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 gap-lg-3 my-0 gap-0 gap-sm-0 gap-md-2\"\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            ieeesaGroupNodeOutlet;\r\n            context: { $implicit: node }\r\n          \"\r\n        ></ng-container>\r\n      </div>\r\n    </mat-tree-node>\r\n    <ng-template #ieeesaGroupNodeOutlet let-node>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"ieeesaGroupInfoOutlet; context: { $implicit: node }\"\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 ieeesa-tree__group-actions\"\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)=\"onGroupActionsClick($event); handleGroupActions(node)\"\r\n        class=\"d-lg-none d-md-none d-sm-none\"\r\n        role=\"gridcell\"\r\n      ></ieeesa-menu>\r\n    </ng-template>\r\n    <ng-template #ieeesaGroupInfoOutlet let-node>\r\n      <div class=\"ieeesa-tree__group-info-wrapper\">\r\n        <div\r\n          class=\"ieeesa-tree__group-info d-flex flex-column flex-sm-column flex-md-column 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\r\n            class=\"ieeesa-tree__node-group-name ieeesa-headline-sm-26\"\r\n            [matTooltip]=\"node?.item?.groupName\"\r\n            role=\"gridcell\"\r\n          >\r\n            {{ node?.item?.groupName }}\r\n          </p>\r\n          <p\r\n            class=\"ieeesa-tree__node-group-acronym ieeesa-title-lg-24\"\r\n            [matTooltip]=\"node?.item?.groupAcronym\"\r\n            role=\"gridcell\"\r\n          >\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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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 .mat-mdc-icon-button{padding:0!important;position:absolute;right:1.7em}.ieeesa-tree__group-actions{position:absolute;right:4.375em}.ieeesa-tree__group-info-wrapper{width:80%;max-width:60%}.ieeesa-tree__parent-node-wrapper .ieeesa-tree__group-info-wrapper{max-width:69%}.ieeesa-tree__node-group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:67%;min-width:0}.ieeesa-tree__node-group-acronym{color:#63666a!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:auto;max-width:100%;min-width:0}.ieeesa-tree__node-group-desc{color:#4a4d50!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ieeesa-tree__node-group-desc:hover{text-wrap:wrap}.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}@media (max-width: 992px){.ieeesa-tree__group-info-wrapper{max-width:60%}.ieeesa-tree__node-group-acronym{max-width:90%}}@media (max-width: 576px){.ieeesa-tree__group-info-wrapper,.ieeesa-tree__node-group-acronym,.ieeesa-tree__parent-node-wrapper .ieeesa-tree__group-info-wrapper{max-width:90%}.ieeesa-tree__node-group-name{max-width:80%}}\n"] }]
         }], ctorParameters: function () { return [{ type: Groups }, { type: i0.ElementRef }]; }, propDecorators: { parentGroupsInfo: [{
                 type: Input
             }], childGroupsInfo: [{
@@ -1566,6 +1631,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
             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  (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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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{max-width:80vw!important}.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:1em}.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 }]; } });
 
+// TODO: Update the import path from @ieeesa-npm/presentation once the package is published.
+// import { SelectComponent } from '../../../presentation/src/lib/components/select/select.component';
+// TODO: Update the import path from @ieeesa-npm/utility once the package is published.
+// import { AlertsService } from '../../../utility/src/lib/services/alerts.service';
+// TODO: Update the import path from @ieeesa-npm/utility once the package is published.
+// import { GlobalErrorHandlerService } from '../../../utility/src/lib/services/global-error-handler.service';
 /**
  * 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
@@ -1650,7 +1721,7 @@ class GroupsComponent {
             modalType: ModalType.FORM,
         };
         this.functionType = GroupFunctionType?.CREATE;
-        this.openModal(dialogOptions, 'ieeesa-create-group');
+        this.openModal(dialogOptions, 'ieeesa-create-group', parentGroupInfo);
     }
     /**
      * Sets the dialog options for edit group modal and calls openModal method.
@@ -1668,7 +1739,7 @@ class GroupsComponent {
             modalType: ModalType.FORM,
         };
         this.functionType = GroupFunctionType?.EDIT;
-        this.openModal(dialogOptions, 'ieeesa-create-group');
+        this.openModal(dialogOptions, 'ieeesa-create-group', editGroupInfo);
     }
     /**
      * Sets the dialog options for users modal and calls openModal method.
@@ -1694,8 +1765,10 @@ class GroupsComponent {
      * @return -returns nothing
      * @memberof GroupsComponent
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-inferrable-types
-    openModal(dialogOptions, className) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-inferrable-types, no-unused-vars
+    openModal(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dialogOptions, className, groupInfo) {
         className = className ?? '';
         this.dialogRef = this.dialog?.open(ModalComponent, {
             data: dialogOptions,
@@ -1709,12 +1782,26 @@ class GroupsComponent {
             .subscribe((result) => {
             this.dialogRef?.close();
             switch (this.functionType) {
-                case GroupFunctionType?.CREATE:
+                case GroupFunctionType?.CREATE: {
                     this.showAlertMessage(AlertType?.SUCCESS, this.createGroupText?.message?.success?.submission);
+                    const createGroupInfo = groupInfo;
+                    if (createGroupInfo)
+                        this.getGroups(createGroupInfo);
+                    else
+                        this.getGroups();
                     break;
-                case GroupFunctionType?.EDIT:
+                }
+                case GroupFunctionType?.EDIT: {
                     this.showAlertMessage(AlertType?.SUCCESS, this.editGroupTexts?.message?.success?.submission);
+                    const editGroupInfo = groupInfo;
+                    if (editGroupInfo?.groupInfo?.groupId ===
+                        editGroupInfo?.parentGroupInfo?.groupId) {
+                        this.getGroups();
+                    }
+                    else
+                        this.getGroups(editGroupInfo.groupInfo);
                     break;
+                }
                 default:
                     break;
             }
@@ -1742,6 +1829,7 @@ class GroupsComponent {
             data: deleteGroupModalOptions,
             width: 'auto',
             autoFocus: 'dialog',
+            ariaLabel: this.constants?.ariaLabel?.alert
         });
         this.dialogRef
             .afterClosed()
@@ -1953,7 +2041,7 @@ class GroupsComponent {
         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: 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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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 }); }
+    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-start 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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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-select-field .mat-mdc-select-min-line{color:#49454f}.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,
@@ -1966,7 +2054,7 @@ 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      (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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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"] }]
+                    ], 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-start 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-45{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.813em;line-height:52px;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-select-field .mat-mdc-select-min-line{color:#49454f}.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: [{