@ieeesa-npm/dashboard 0.0.2 → 0.0.3

package/fesm2022/ieeesa-npm-dashboard.mjs

@@ -9,7 +9,7 @@ import { AlertsService } from '@ieeesa-npm/utility';
 import * as i2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i3 from '@ieeesa-npm/presentation';
-import { LoaderComponent, LegendComponent } from '@ieeesa-npm/presentation';
+import { LoaderComponent, IconButtonComponent, LegendComponent } from '@ieeesa-npm/presentation';
 import { DateTime } from 'luxon';
 
 /* eslint-disable no-unused-vars */
@@ -1412,6 +1412,24 @@ class YourGroupsComponent {
         this.indentPerLevel = 28;
         /** Selectable "Items per page" page sizes. */
         this.pageSizeOptions = [5, 10, 25];
+        /**
+         * Expand (+) icon button — the SAME sprite icon the Groups package uses for
+         * its tree expand toggle (icon-expand-collapse-plus), rendered via the shared
+         * IconButtonComponent for a consistent look across the app.
+         */
+        this.expandIconButton = {
+            id: 1,
+            iconURL: 'assets/images/sprites/sprites.svg#icon-expand-collapse-plus',
+            ariaLabel: 'Expand group',
+            toolTip: 'Expand group',
+        };
+        /** Collapse (−) icon button — the Groups package's icon-expand-collapse-minus. */
+        this.collapseIconButton = {
+            id: 2,
+            iconURL: 'assets/images/sprites/sprites.svg#icon-expand-collapse-minus',
+            ariaLabel: 'Collapse group',
+            toolTip: 'Collapse group',
+        };
         this.groupsValue = [];
         /** The section's load/empty/error state driving the mutually-exclusive regions. */
         this.sectionState = DashboardSectionState.LOADED;
@@ -1434,11 +1452,38 @@ class YourGroupsComponent {
         this.expandedChange = new EventEmitter();
         /** Whether the card is expanded (table visible). Starts collapsed. */
         this.isExpanded = false;
-        /** GroupIds of the top-level groups whose hierarchy is currently expanded. */
-        this.expandedGroupIds = new Set();
-        /** The flattened rows currently rendered (group rows + any expanded hierarchy rows). */
+        /**
+         * Keys of the hierarchy levels currently expanded, each `"<groupId>:<index>"`.
+         * Index -1 is the group row itself (its toggle reveals the first hierarchy
+         * node); index N is the Nth hierarchy node (its toggle reveals node N+1). A
+         * level only reveals the NEXT node, matching the Groups module's step-by-step
+         * drill-down.
+         */
+        this.expandedKeys = new Set();
+        /** The flattened rows currently rendered (group rows + any revealed hierarchy rows). */
         this.visibleRows = [];
     }
+    /**
+     * Returns the +/- toggle icon button for a level, matching the Groups tree:
+     * the minus (collapse) icon when that level is expanded, otherwise the plus
+     * (expand) icon.
+     * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
+     * @return {IconButton}
+     * @memberof YourGroupsComponent
+     */
+    getToggleButton(group, index) {
+        const button = this.isLevelExpanded(group, index)
+            ? this.collapseIconButton
+            : this.expandIconButton;
+        // Include the target's name so each toggle has a distinct accessible name
+        // (e.g. "Expand group Tech working"). Return a NEW object so the shared
+        // expand/collapse configs are never mutated.
+        const name = index < 0
+            ? group.group
+            : group.hierarchy?.[index]?.groupName ?? group.group;
+        return { ...button, ariaLabel: `${button.ariaLabel} ${name}` };
+    }
     /** The groups rendered in the table. */
     set groups(value) {
         this.groupsValue = value ?? [];
@@ -1484,8 +1529,42 @@ class YourGroupsComponent {
         return this.totalGroups || this.groups.length || 0;
     }
     /**
-     * Whether a group row can expand: it has an ancestor hierarchy (more than the
-     * group's own node). A single-node hierarchy (the group itself) is a leaf.
+     * Builds the expand/collapse key for a hierarchy level. Index -1 is the group
+     * row itself; index N is the Nth hierarchy node.
+     * @param {GroupRow} group
+     * @param {number} index
+     * @return {string}
+     * @memberof YourGroupsComponent
+     */
+    levelKey(group, index) {
+        return `${group.groupId}:${index}`;
+    }
+    /**
+     * Whether a level shows a +/- toggle.
+     *
+     * - Group row (index -1): expandable when it has ANY hierarchy node, matching
+     *   the Groups module which shows the toggle on every group that has related
+     *   hierarchy (driven by hasChildren, true for all these groups).
+     * - Hierarchy node (index N): expandable only when there is a further node
+     *   after it (step-by-step drill-down); the deepest node is a leaf, no toggle.
+     * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
+     * @return {boolean}
+     * @memberof YourGroupsComponent
+     */
+    isLevelExpandable(group, index) {
+        const length = group?.hierarchy?.length ?? 0;
+        if (index < 0) {
+            // Group row: a toggle only when it has RELATED groups to show — i.e. the
+            // hierarchy has more than just the group's own node. A single-node
+            // hierarchy (only itself) has nothing to reveal, so no toggle.
+            return length > 1;
+        }
+        // Hierarchy node: expandable only if a deeper node follows it.
+        return index < length - 1;
+    }
+    /**
+     * Whether the group row shows a toggle (has related hierarchy to drill into).
      * @param {GroupRow} group
      * @return {boolean}
      * @memberof YourGroupsComponent
@@ -1494,28 +1573,40 @@ class YourGroupsComponent {
         return (group?.hierarchy?.length ?? 0) > 1;
     }
     /**
-     * Whether the given group row is currently expanded.
+     * Whether a given level is currently expanded (its next node is revealed).
      * @param {GroupRow} group
+     * @param {number} index
      * @return {boolean}
      * @memberof YourGroupsComponent
      */
+    isLevelExpanded(group, index) {
+        return this.expandedKeys.has(this.levelKey(group, index));
+    }
+    /** Convenience for the group row (level -1). */
     isGroupExpanded(group) {
-        return this.expandedGroupIds.has(group.groupId);
+        return this.isLevelExpanded(group, -1);
     }
     /**
-     * Toggles a group's hierarchy expansion and rebuilds the visible rows.
+     * Toggles a level's expansion (reveals/hides its next node). Collapsing a
+     * level also collapses everything deeper under it so re-opening starts fresh.
      * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
      * @memberof YourGroupsComponent
      */
-    onToggleHierarchy(group) {
-        if (!this.hasHierarchy(group)) {
+    onToggleLevel(group, index) {
+        if (!this.isLevelExpandable(group, index)) {
             return;
         }
-        if (this.expandedGroupIds.has(group.groupId)) {
-            this.expandedGroupIds.delete(group.groupId);
+        const key = this.levelKey(group, index);
+        if (this.expandedKeys.has(key)) {
+            // Collapse this level and any deeper levels of the same group.
+            const length = group?.hierarchy?.length ?? 0;
+            for (let deeper = index; deeper < length; deeper++) {
+                this.expandedKeys.delete(this.levelKey(group, deeper));
+            }
         }
         else {
-            this.expandedGroupIds.add(group.groupId);
+            this.expandedKeys.add(key);
         }
         this.rebuildRows();
     }
@@ -1573,9 +1664,11 @@ class YourGroupsComponent {
             : `h:${row.group?.groupId}:${row.node?.groupId}:${index}`;
     }
     /**
-     * Rebuilds the flat list of visible rows: the current page of top-level group
-     * rows, each optionally followed by its hierarchy (ancestor) rows when the
-     * group is expanded. The hierarchy path is shown root→leaf, indented by depth.
+     * Rebuilds the visible rows for the current page. Each group reveals its
+     * hierarchy ONE level at a time (Groups-module style): the group row reveals
+     * node 0 only when its own level (-1) is expanded; node 0 reveals node 1 only
+     * when node 0's level is expanded; and so on. Each revealed node that still
+     * has a child carries its own +/- toggle.
      * @memberof YourGroupsComponent
      */
     rebuildRows() {
@@ -1584,20 +1677,36 @@ class YourGroupsComponent {
         const rows = [];
         pageGroups.forEach((group) => {
             rows.push({ kind: 'group', group, level: 0 });
-            if (this.expandedGroupIds.has(group.groupId)) {
-                (group.hierarchy ?? []).forEach((node, depth) => {
-                    rows.push({ kind: 'hierarchy', group, node, level: depth + 1 });
+            const hierarchy = group.hierarchy ?? [];
+            // Walk the path, revealing each next node only while the chain of
+            // parent levels above it stays expanded. Stop as soon as a level is
+            // collapsed.
+            for (let index = 0; index < hierarchy.length; index++) {
+                if (!this.isLevelExpanded(group, index - 1)) {
+                    break;
+                }
+                rows.push({
+                    kind: 'hierarchy',
+                    group,
+                    node: hierarchy[index],
+                    nodeIndex: index,
+                    level: index + 1,
                 });
             }
         });
         this.visibleRows = rows;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YourGroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: YourGroupsComponent, isStandalone: true, selector: "ieeesa-your-groups", inputs: { groups: "groups", sectionState: "sectionState", totalGroups: "totalGroups", pageIndex: "pageIndex", pageSize: "pageSize", expanded: "expanded" }, outputs: { viewAllGroups: "viewAllGroups", pageChange: "pageChange", expandedChange: "expandedChange" }, ngImport: i0, template: "<section class=\"ieeesa-your-groups\">\r\n  <!-- Header: title + count, View All link, collapse/expand toggle -->\r\n  <div class=\"ieeesa-your-groups__header\">\r\n    <div class=\"ieeesa-your-groups__heading\">\r\n      <h2 class=\"ieeesa-your-groups__title m-0\">{{ texts?.title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"ieeesa-your-groups__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__view-all\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.viewAll\"\r\n        (click)=\"onViewAll()\"\r\n      >\r\n        {{ texts?.viewAllLabel }}\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__toggle\"\r\n        [attr.aria-expanded]=\"isExpanded\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.toggle\"\r\n        (click)=\"onToggleExpand()\"\r\n      >\r\n        <span>{{ isExpanded ? texts?.collapseLabel : texts?.expandLabel }}</span>\r\n        <i\r\n          class=\"fa-solid\"\r\n          [ngClass]=\"isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Body: only when the card is expanded. -->\r\n  <div class=\"ieeesa-your-groups__body\" *ngIf=\"isExpanded\">\r\n    <ieeesa-loader\r\n      *ngIf=\"sectionState === sectionStates.LOADING\"\r\n    ></ieeesa-loader>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.ERROR\"\r\n      class=\"ieeesa-your-groups__message ieeesa-your-groups__message--error\"\r\n      role=\"alert\"\r\n    >\r\n      {{ texts?.errorMessage }}\r\n    </p>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.EMPTY\"\r\n      class=\"ieeesa-your-groups__message\"\r\n      role=\"status\"\r\n    >\r\n      {{ texts?.emptyMessage }}\r\n    </p>\r\n\r\n    <ng-container *ngIf=\"sectionState === sectionStates.LOADED\">\r\n      <table class=\"ieeesa-your-groups__table\">\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ texts?.columns?.group }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.type }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.officerRole }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.affiliation }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.memberLevel }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let row of visibleRows; trackBy: trackByRow\">\r\n            <!-- GROUP ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'group'\">\r\n              <td class=\"ieeesa-your-groups__group-cell\">\r\n                <!-- Parent: blue +/- toggle to reveal the hierarchy. -->\r\n                <button\r\n                  *ngIf=\"hasHierarchy(row.group!)\"\r\n                  type=\"button\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [attr.aria-expanded]=\"isGroupExpanded(row.group!)\"\r\n                  [attr.aria-label]=\"\r\n                    (isGroupExpanded(row.group!)\r\n                      ? texts?.collapseLabel\r\n                      : texts?.expandLabel) +\r\n                    ' ' +\r\n                    row.group!.group\r\n                  \"\r\n                  (click)=\"onToggleHierarchy(row.group!)\"\r\n                >\r\n                  <i\r\n                    class=\"fa-solid\"\r\n                    [ngClass]=\"isGroupExpanded(row.group!) ? 'fa-minus' : 'fa-plus'\"\r\n                  ></i>\r\n                </button>\r\n                <!-- Leaf: spacer keeps names aligned with parents' names. -->\r\n                <span\r\n                  *ngIf=\"!hasHierarchy(row.group!)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__group-name\">\r\n                  {{ row.group!.group }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row.group!.type }}</td>\r\n              <td>{{ row.group!.officerRole }}</td>\r\n              <td>{{ row.group!.affiliation }}</td>\r\n              <td>\r\n                <span\r\n                  class=\"ieeesa-your-groups__badge\"\r\n                  [ngClass]=\"resolveBadgeClass(row.group!.memberLevel)\"\r\n                >\r\n                  {{ row.group!.memberLevel }}\r\n                </span>\r\n              </td>\r\n            </ng-container>\r\n\r\n            <!-- HIERARCHY (ancestor) ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'hierarchy'\">\r\n              <td class=\"ieeesa-your-groups__group-cell ieeesa-your-groups__hierarchy-cell\">\r\n                <span\r\n                  class=\"ieeesa-your-groups__indent\"\r\n                  [style.width.px]=\"row.level * indentPerLevel\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-connector\" aria-hidden=\"true\">\r\n                  <i class=\"fa-solid fa-turn-up fa-rotate-90\"></i>\r\n                </span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-name\">\r\n                  {{ row.node!.groupName }}\r\n                  <span\r\n                    *ngIf=\"row.node!.groupAcronym\"\r\n                    class=\"ieeesa-your-groups__hierarchy-acronym\"\r\n                  >\r\n                    ({{ row.node!.groupAcronym }})\r\n                  </span>\r\n                </span>\r\n              </td>\r\n              <td colspan=\"4\"></td>\r\n            </ng-container>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Pagination: the same Angular Material paginator the shared data-table\r\n           uses \u2014 it provides the \"Items per page\" dropdown, range label, and\r\n           prev/next controls. -->\r\n      <mat-paginator\r\n        *ngIf=\"groupCount > 0\"\r\n        class=\"ieeesa-your-groups__paginator\"\r\n        [length]=\"groupCount\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onPaginatorChange($event)\"\r\n      ></mat-paginator>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.5625rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625rem;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.813rem;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.9375rem;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.375rem;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-32{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2rem;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125rem;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.875rem;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5rem;line-height:32px;color:#00629b;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625rem;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.5rem;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.5rem;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.125rem;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-btn-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#00629b;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.125rem;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.125rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#1c1b1f;letter-spacing:.015625em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-12{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.75rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-color-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:18px;color:#49454f;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:.875rem;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.5rem;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,.mat-mdc-button.mat-mdc-button-base.mat-text-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 Bold;font-style:normal;font-weight:700;font-size:1rem;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:focus{background:#1f75a7}.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:focus{background:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:#1d192b1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:#1c1b1f1f;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:focus{background-color:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:#6750a41f}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-text-button{color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-text-button:hover,.mat-mdc-button.mat-mdc-button-base.mat-text-button:active{background:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-text-button:disabled{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 Bold;font-style:normal;font-weight:700;font-size:1rem;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 .mat-mdc-tooltip .mdc-tooltip__surface{color:#525252;padding:6px 12px;font-family:Calibri Regular;font-size:1rem;border:1px solid #cac4d0;background:#fff;box-shadow:0 4px 8px #00000040;max-width:unset!important}.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text{font-family:Calibri Regular!important}.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:1rem;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-cancel-modal-confirm-dialog{width:25vw!important}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation{padding:1.5em 1.5em 1em}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation .mat-mdc-dialog-content{text-align:center;padding:0 0 1em!important}.mat-mdc-button,.mat-mdc-outlined-button{--mat-mdc-button-persistent-ripple-color: unset}@media (max-width: 768px){.ieeesa-cancel-modal-confirm-dialog{width:90vw!important}}.ieeesa-wrapper-border{border:1px solid #b2b7be;border-top:none;padding:1.5em;border-radius:0 0 4px 4px}.ieeesa-your-groups{display:block;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0003;padding:20px 24px;border:1px solid #E2E8F0}.ieeesa-your-groups__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.ieeesa-your-groups__heading{display:flex;flex-direction:column;gap:2px}.ieeesa-your-groups__title{font-family:Calibri Bold;font-weight:700;font-size:18px;color:#0f172a}.ieeesa-your-groups__count{font-family:Calibri Regular;font-size:.75rem;color:#777a7e}.ieeesa-your-groups__actions{display:flex;align-items:center;gap:16px}.ieeesa-your-groups__view-all{background:none;border:none;padding:0;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__view-all:hover{text-decoration:underline}.ieeesa-your-groups__toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #dbe2eb;border-radius:8px;background-color:#fff;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__toggle:hover{border-color:#00629b}.ieeesa-your-groups__toggle i{font-size:.75rem}.ieeesa-your-groups__body{margin-top:16px}.ieeesa-your-groups__message{text-align:center;padding:32px 0;font-family:Calibri Regular;font-size:.875rem;color:#777a7e}.ieeesa-your-groups__message--error{color:#ba0c2f}.ieeesa-your-groups__table{width:100%;border-collapse:collapse}.ieeesa-your-groups__table th,.ieeesa-your-groups__table td{text-align:left;padding:14px 16px;border-bottom:1px solid #dbe2eb;vertical-align:middle}.ieeesa-your-groups__table th{background-color:#f4f5f7;color:#333436;font-family:Calibri Bold;font-weight:700;font-size:.875rem}.ieeesa-your-groups__table td{color:#333436;font-size:.875rem}.ieeesa-your-groups__table tbody tr:nth-child(2n) td{background-color:#f8fcff}.ieeesa-your-groups__group-cell{display:flex;align-items:center;gap:10px}.ieeesa-your-groups__indent{flex:0 0 auto;display:inline-block}.ieeesa-your-groups__hierarchy-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background-color:#00629b;color:#fff;font-size:.875rem;line-height:1;cursor:pointer}.ieeesa-your-groups__hierarchy-toggle:hover{background-color:#003e65}.ieeesa-your-groups__toggle-spacer{flex:0 0 auto;display:inline-block;width:24px;height:24px}.ieeesa-your-groups__group-name{color:#00629b;font-family:Calibri Bold;font-weight:700}.ieeesa-your-groups__hierarchy-cell{gap:6px}.ieeesa-your-groups__hierarchy-connector{flex:0 0 auto;display:inline-flex;align-items:center;color:#777a7e}.ieeesa-your-groups__hierarchy-name{color:#333436}.ieeesa-your-groups__hierarchy-acronym{color:#777a7e}.ieeesa-your-groups__badge{display:inline-flex;align-items:center;padding:.125em .75em;border-radius:1em;font-size:.875rem;white-space:nowrap}.ieeesa-your-groups__badge--success{color:#2e7d32;background-color:#2e7d321f}.ieeesa-your-groups__badge--warning{color:#b35600;background-color:#b356001f}.ieeesa-your-groups__paginator{margin-top:8px}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator-container{justify-content:flex-end}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator{background-color:transparent}\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: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: LoaderComponent, selector: "ieeesa-loader", inputs: ["diameter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: YourGroupsComponent, isStandalone: true, selector: "ieeesa-your-groups", inputs: { groups: "groups", sectionState: "sectionState", totalGroups: "totalGroups", pageIndex: "pageIndex", pageSize: "pageSize", expanded: "expanded" }, outputs: { viewAllGroups: "viewAllGroups", pageChange: "pageChange", expandedChange: "expandedChange" }, ngImport: i0, template: "<section class=\"ieeesa-your-groups\">\r\n  <!-- Header: title + count, View All link, collapse/expand toggle -->\r\n  <div class=\"ieeesa-your-groups__header\">\r\n    <div class=\"ieeesa-your-groups__heading\">\r\n      <h2 class=\"ieeesa-your-groups__title m-0\">{{ texts?.title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"ieeesa-your-groups__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__view-all\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.viewAll\"\r\n        (click)=\"onViewAll()\"\r\n      >\r\n        {{ texts?.viewAllLabel }}\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__toggle\"\r\n        [attr.aria-expanded]=\"isExpanded\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.toggle\"\r\n        (click)=\"onToggleExpand()\"\r\n      >\r\n        <span>{{ isExpanded ? texts?.collapseLabel : texts?.expandLabel }}</span>\r\n        <i\r\n          class=\"fa-solid\"\r\n          [ngClass]=\"isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Body: only when the card is expanded. -->\r\n  <div class=\"ieeesa-your-groups__body\" *ngIf=\"isExpanded\">\r\n    <ieeesa-loader\r\n      *ngIf=\"sectionState === sectionStates.LOADING\"\r\n    ></ieeesa-loader>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.ERROR\"\r\n      class=\"ieeesa-your-groups__message ieeesa-your-groups__message--error\"\r\n      role=\"alert\"\r\n    >\r\n      {{ texts?.errorMessage }}\r\n    </p>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.EMPTY\"\r\n      class=\"ieeesa-your-groups__message\"\r\n      role=\"status\"\r\n    >\r\n      {{ texts?.emptyMessage }}\r\n    </p>\r\n\r\n    <ng-container *ngIf=\"sectionState === sectionStates.LOADED\">\r\n      <table class=\"ieeesa-your-groups__table\">\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ texts?.columns?.group }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.type }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.officerRole }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.affiliation }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.memberLevel }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let row of visibleRows; trackBy: trackByRow\">\r\n            <!-- GROUP ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'group'\">\r\n              <td class=\"ieeesa-your-groups__group-cell\">\r\n                <!-- Group row toggle (level -1): reveals the first hierarchy\r\n                     node. Same shared icon button as the Groups tree. -->\r\n                <ieeesa-icon-button\r\n                  *ngIf=\"isLevelExpandable(row.group!, -1)\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [iconButton]=\"getToggleButton(row.group!, -1)\"\r\n                  [ariaExpanded]=\"isLevelExpanded(row.group!, -1)\"\r\n                  (iconButtonClick)=\"onToggleLevel(row.group!, -1)\"\r\n                ></ieeesa-icon-button>\r\n                <!-- Leaf group (no hierarchy): spacer keeps names aligned. -->\r\n                <span\r\n                  *ngIf=\"!isLevelExpandable(row.group!, -1)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__group-name\">\r\n                  {{ row.group!.group }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row.group!.type }}</td>\r\n              <td>{{ row.group!.officerRole }}</td>\r\n              <td>{{ row.group!.affiliation }}</td>\r\n              <td>\r\n                <span\r\n                  class=\"ieeesa-your-groups__badge\"\r\n                  [ngClass]=\"resolveBadgeClass(row.group!.memberLevel)\"\r\n                >\r\n                  {{ row.group!.memberLevel }}\r\n                </span>\r\n              </td>\r\n            </ng-container>\r\n\r\n            <!-- HIERARCHY (ancestor) ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'hierarchy'\">\r\n              <td class=\"ieeesa-your-groups__group-cell ieeesa-your-groups__hierarchy-cell\">\r\n                <span\r\n                  class=\"ieeesa-your-groups__indent\"\r\n                  [style.width.px]=\"row.level * indentPerLevel\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <!-- This node's own +/- toggle, when it has a further child to\r\n                     reveal (step-by-step drill-down like the Groups tree). -->\r\n                <ieeesa-icon-button\r\n                  *ngIf=\"isLevelExpandable(row.group!, row.nodeIndex!)\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [iconButton]=\"getToggleButton(row.group!, row.nodeIndex!)\"\r\n                  [ariaExpanded]=\"isLevelExpanded(row.group!, row.nodeIndex!)\"\r\n                  (iconButtonClick)=\"onToggleLevel(row.group!, row.nodeIndex!)\"\r\n                ></ieeesa-icon-button>\r\n                <!-- Leaf node: spacer keeps the name aligned with parent nodes\r\n                     (same footprint as the toggle), no connector arrow. -->\r\n                <span\r\n                  *ngIf=\"!isLevelExpandable(row.group!, row.nodeIndex!)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-name\">\r\n                  {{ row.node!.groupName }}\r\n                  <span\r\n                    *ngIf=\"row.node!.groupAcronym\"\r\n                    class=\"ieeesa-your-groups__hierarchy-acronym\"\r\n                  >\r\n                    ({{ row.node!.groupAcronym }})\r\n                  </span>\r\n                </span>\r\n              </td>\r\n              <td colspan=\"4\"></td>\r\n            </ng-container>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Pagination: the same Angular Material paginator the shared data-table\r\n           uses \u2014 it provides the \"Items per page\" dropdown, range label, and\r\n           prev/next controls. -->\r\n      <mat-paginator\r\n        *ngIf=\"groupCount > 0\"\r\n        class=\"ieeesa-your-groups__paginator\"\r\n        [length]=\"groupCount\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onPaginatorChange($event)\"\r\n      ></mat-paginator>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.5625rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625rem;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.813rem;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.9375rem;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.375rem;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-32{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2rem;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125rem;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.875rem;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5rem;line-height:32px;color:#00629b;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625rem;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.5rem;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.5rem;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.125rem;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-btn-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#00629b;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.125rem;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.125rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#1c1b1f;letter-spacing:.015625em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-12{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.75rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-color-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:18px;color:#49454f;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:.875rem;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.5rem;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,.mat-mdc-button.mat-mdc-button-base.mat-text-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 Bold;font-style:normal;font-weight:700;font-size:1rem;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:focus{background:#1f75a7}.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:focus{background:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:#1d192b1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:#1c1b1f1f;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:focus{background-color:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:#6750a41f}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-text-button{color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-text-button:hover,.mat-mdc-button.mat-mdc-button-base.mat-text-button:active{background:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-text-button:disabled{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 Bold;font-style:normal;font-weight:700;font-size:1rem;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 .mat-mdc-tooltip .mdc-tooltip__surface{color:#525252;padding:6px 12px;font-family:Calibri Regular;font-size:1rem;border:1px solid #cac4d0;background:#fff;box-shadow:0 4px 8px #00000040;max-width:unset!important}.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text{font-family:Calibri Regular!important}.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:1rem;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-cancel-modal-confirm-dialog{width:25vw!important}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation{padding:1.5em 1.5em 1em}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation .mat-mdc-dialog-content{text-align:center;padding:0 0 1em!important}.mat-mdc-button,.mat-mdc-outlined-button{--mat-mdc-button-persistent-ripple-color: unset}@media (max-width: 768px){.ieeesa-cancel-modal-confirm-dialog{width:90vw!important}}.ieeesa-wrapper-border{border:1px solid #b2b7be;border-top:none;padding:1.5em;border-radius:0 0 4px 4px}.ieeesa-your-groups{display:block;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0003;padding:20px 24px;border:1px solid #E2E8F0}.ieeesa-your-groups__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.ieeesa-your-groups__heading{display:flex;flex-direction:column;gap:2px}.ieeesa-your-groups__title{font-family:Calibri Bold;font-weight:700;font-size:18px;color:#0f172a}.ieeesa-your-groups__count{font-family:Calibri Regular;font-size:.75rem;color:#777a7e}.ieeesa-your-groups__actions{display:flex;align-items:center;gap:16px}.ieeesa-your-groups__view-all{background:none;border:none;padding:0;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__view-all:hover{text-decoration:underline}.ieeesa-your-groups__toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #dbe2eb;border-radius:8px;background-color:#fff;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__toggle:hover{border-color:#00629b}.ieeesa-your-groups__toggle i{font-size:.75rem}.ieeesa-your-groups__body{margin-top:16px}.ieeesa-your-groups__message{text-align:center;padding:32px 0;font-family:Calibri Regular;font-size:.875rem;color:#777a7e}.ieeesa-your-groups__message--error{color:#ba0c2f}.ieeesa-your-groups__table{width:100%;border-collapse:collapse}.ieeesa-your-groups__table th,.ieeesa-your-groups__table td{text-align:left;padding:14px 16px;border-bottom:1px solid #dbe2eb;vertical-align:middle}.ieeesa-your-groups__table th{background-color:#f4f5f7;color:#333436;font-family:Calibri Bold;font-weight:700;font-size:.875rem}.ieeesa-your-groups__table td{color:#333436;font-size:.875rem}.ieeesa-your-groups__table tbody tr:nth-child(2n) td{background-color:#f8fcff}.ieeesa-your-groups__group-cell{display:flex;align-items:center;gap:10px}.ieeesa-your-groups__indent{flex:0 0 auto;display:inline-block}.ieeesa-your-groups__hierarchy-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:0}.ieeesa-your-groups__hierarchy-toggle ::ng-deep .ieeesa-icon-button{display:inline-flex;align-items:flex-start!important;justify-content:center;width:24px;height:24px;min-width:0;padding:0;margin:0;line-height:0}.ieeesa-your-groups__hierarchy-toggle ::ng-deep .ieeesa-icon-button__svg{width:24px;height:24px;display:block}.ieeesa-your-groups__toggle-spacer{flex:0 0 auto;display:inline-block;width:24px;height:24px}.ieeesa-your-groups__group-name{color:#00629b;font-family:Calibri Bold;font-weight:700}.ieeesa-your-groups__hierarchy-cell{gap:6px}.ieeesa-your-groups__hierarchy-name{color:#333436}.ieeesa-your-groups__hierarchy-acronym{color:#777a7e}.ieeesa-your-groups__badge{display:inline-flex;align-items:center;padding:.125em .75em;border-radius:1em;font-size:.875rem;white-space:nowrap}.ieeesa-your-groups__badge--success{color:#2e7d32;background-color:#2e7d321f}.ieeesa-your-groups__badge--warning{color:#b35600;background-color:#b356001f}.ieeesa-your-groups__paginator{margin-top:8px}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator-container{justify-content:flex-end}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator{background-color:transparent}\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: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: LoaderComponent, selector: "ieeesa-loader", inputs: ["diameter"] }, { kind: "component", type: IconButtonComponent, selector: "ieeesa-icon-button", inputs: ["iconButton", "isLabelNeeded"], outputs: ["iconButtonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YourGroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ieeesa-your-groups', standalone: true, imports: [CommonModule, MatPaginatorModule, LoaderComponent], encapsulation: ViewEncapsulation.None, template: "<section class=\"ieeesa-your-groups\">\r\n  <!-- Header: title + count, View All link, collapse/expand toggle -->\r\n  <div class=\"ieeesa-your-groups__header\">\r\n    <div class=\"ieeesa-your-groups__heading\">\r\n      <h2 class=\"ieeesa-your-groups__title m-0\">{{ texts?.title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"ieeesa-your-groups__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__view-all\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.viewAll\"\r\n        (click)=\"onViewAll()\"\r\n      >\r\n        {{ texts?.viewAllLabel }}\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__toggle\"\r\n        [attr.aria-expanded]=\"isExpanded\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.toggle\"\r\n        (click)=\"onToggleExpand()\"\r\n      >\r\n        <span>{{ isExpanded ? texts?.collapseLabel : texts?.expandLabel }}</span>\r\n        <i\r\n          class=\"fa-solid\"\r\n          [ngClass]=\"isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Body: only when the card is expanded. -->\r\n  <div class=\"ieeesa-your-groups__body\" *ngIf=\"isExpanded\">\r\n    <ieeesa-loader\r\n      *ngIf=\"sectionState === sectionStates.LOADING\"\r\n    ></ieeesa-loader>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.ERROR\"\r\n      class=\"ieeesa-your-groups__message ieeesa-your-groups__message--error\"\r\n      role=\"alert\"\r\n    >\r\n      {{ texts?.errorMessage }}\r\n    </p>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.EMPTY\"\r\n      class=\"ieeesa-your-groups__message\"\r\n      role=\"status\"\r\n    >\r\n      {{ texts?.emptyMessage }}\r\n    </p>\r\n\r\n    <ng-container *ngIf=\"sectionState === sectionStates.LOADED\">\r\n      <table class=\"ieeesa-your-groups__table\">\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ texts?.columns?.group }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.type }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.officerRole }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.affiliation }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.memberLevel }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let row of visibleRows; trackBy: trackByRow\">\r\n            <!-- GROUP ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'group'\">\r\n              <td class=\"ieeesa-your-groups__group-cell\">\r\n                <!-- Parent: blue +/- toggle to reveal the hierarchy. -->\r\n                <button\r\n                  *ngIf=\"hasHierarchy(row.group!)\"\r\n                  type=\"button\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [attr.aria-expanded]=\"isGroupExpanded(row.group!)\"\r\n                  [attr.aria-label]=\"\r\n                    (isGroupExpanded(row.group!)\r\n                      ? texts?.collapseLabel\r\n                      : texts?.expandLabel) +\r\n                    ' ' +\r\n                    row.group!.group\r\n                  \"\r\n                  (click)=\"onToggleHierarchy(row.group!)\"\r\n                >\r\n                  <i\r\n                    class=\"fa-solid\"\r\n                    [ngClass]=\"isGroupExpanded(row.group!) ? 'fa-minus' : 'fa-plus'\"\r\n                  ></i>\r\n                </button>\r\n                <!-- Leaf: spacer keeps names aligned with parents' names. -->\r\n                <span\r\n                  *ngIf=\"!hasHierarchy(row.group!)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__group-name\">\r\n                  {{ row.group!.group }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row.group!.type }}</td>\r\n              <td>{{ row.group!.officerRole }}</td>\r\n              <td>{{ row.group!.affiliation }}</td>\r\n              <td>\r\n                <span\r\n                  class=\"ieeesa-your-groups__badge\"\r\n                  [ngClass]=\"resolveBadgeClass(row.group!.memberLevel)\"\r\n                >\r\n                  {{ row.group!.memberLevel }}\r\n                </span>\r\n              </td>\r\n            </ng-container>\r\n\r\n            <!-- HIERARCHY (ancestor) ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'hierarchy'\">\r\n              <td class=\"ieeesa-your-groups__group-cell ieeesa-your-groups__hierarchy-cell\">\r\n                <span\r\n                  class=\"ieeesa-your-groups__indent\"\r\n                  [style.width.px]=\"row.level * indentPerLevel\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-connector\" aria-hidden=\"true\">\r\n                  <i class=\"fa-solid fa-turn-up fa-rotate-90\"></i>\r\n                </span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-name\">\r\n                  {{ row.node!.groupName }}\r\n                  <span\r\n                    *ngIf=\"row.node!.groupAcronym\"\r\n                    class=\"ieeesa-your-groups__hierarchy-acronym\"\r\n                  >\r\n                    ({{ row.node!.groupAcronym }})\r\n                  </span>\r\n                </span>\r\n              </td>\r\n              <td colspan=\"4\"></td>\r\n            </ng-container>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Pagination: the same Angular Material paginator the shared data-table\r\n           uses \u2014 it provides the \"Items per page\" dropdown, range label, and\r\n           prev/next controls. -->\r\n      <mat-paginator\r\n        *ngIf=\"groupCount > 0\"\r\n        class=\"ieeesa-your-groups__paginator\"\r\n        [length]=\"groupCount\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onPaginatorChange($event)\"\r\n      ></mat-paginator>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.5625rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625rem;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.813rem;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.9375rem;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.375rem;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-32{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2rem;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125rem;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.875rem;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5rem;line-height:32px;color:#00629b;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625rem;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.5rem;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.5rem;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.125rem;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-btn-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#00629b;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.125rem;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.125rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#1c1b1f;letter-spacing:.015625em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-12{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.75rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-color-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:18px;color:#49454f;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:.875rem;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.5rem;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,.mat-mdc-button.mat-mdc-button-base.mat-text-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 Bold;font-style:normal;font-weight:700;font-size:1rem;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:focus{background:#1f75a7}.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:focus{background:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:#1d192b1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:#1c1b1f1f;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:focus{background-color:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:#6750a41f}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-text-button{color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-text-button:hover,.mat-mdc-button.mat-mdc-button-base.mat-text-button:active{background:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-text-button:disabled{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 Bold;font-style:normal;font-weight:700;font-size:1rem;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 .mat-mdc-tooltip .mdc-tooltip__surface{color:#525252;padding:6px 12px;font-family:Calibri Regular;font-size:1rem;border:1px solid #cac4d0;background:#fff;box-shadow:0 4px 8px #00000040;max-width:unset!important}.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text{font-family:Calibri Regular!important}.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:1rem;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-cancel-modal-confirm-dialog{width:25vw!important}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation{padding:1.5em 1.5em 1em}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation .mat-mdc-dialog-content{text-align:center;padding:0 0 1em!important}.mat-mdc-button,.mat-mdc-outlined-button{--mat-mdc-button-persistent-ripple-color: unset}@media (max-width: 768px){.ieeesa-cancel-modal-confirm-dialog{width:90vw!important}}.ieeesa-wrapper-border{border:1px solid #b2b7be;border-top:none;padding:1.5em;border-radius:0 0 4px 4px}.ieeesa-your-groups{display:block;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0003;padding:20px 24px;border:1px solid #E2E8F0}.ieeesa-your-groups__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.ieeesa-your-groups__heading{display:flex;flex-direction:column;gap:2px}.ieeesa-your-groups__title{font-family:Calibri Bold;font-weight:700;font-size:18px;color:#0f172a}.ieeesa-your-groups__count{font-family:Calibri Regular;font-size:.75rem;color:#777a7e}.ieeesa-your-groups__actions{display:flex;align-items:center;gap:16px}.ieeesa-your-groups__view-all{background:none;border:none;padding:0;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__view-all:hover{text-decoration:underline}.ieeesa-your-groups__toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #dbe2eb;border-radius:8px;background-color:#fff;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__toggle:hover{border-color:#00629b}.ieeesa-your-groups__toggle i{font-size:.75rem}.ieeesa-your-groups__body{margin-top:16px}.ieeesa-your-groups__message{text-align:center;padding:32px 0;font-family:Calibri Regular;font-size:.875rem;color:#777a7e}.ieeesa-your-groups__message--error{color:#ba0c2f}.ieeesa-your-groups__table{width:100%;border-collapse:collapse}.ieeesa-your-groups__table th,.ieeesa-your-groups__table td{text-align:left;padding:14px 16px;border-bottom:1px solid #dbe2eb;vertical-align:middle}.ieeesa-your-groups__table th{background-color:#f4f5f7;color:#333436;font-family:Calibri Bold;font-weight:700;font-size:.875rem}.ieeesa-your-groups__table td{color:#333436;font-size:.875rem}.ieeesa-your-groups__table tbody tr:nth-child(2n) td{background-color:#f8fcff}.ieeesa-your-groups__group-cell{display:flex;align-items:center;gap:10px}.ieeesa-your-groups__indent{flex:0 0 auto;display:inline-block}.ieeesa-your-groups__hierarchy-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background-color:#00629b;color:#fff;font-size:.875rem;line-height:1;cursor:pointer}.ieeesa-your-groups__hierarchy-toggle:hover{background-color:#003e65}.ieeesa-your-groups__toggle-spacer{flex:0 0 auto;display:inline-block;width:24px;height:24px}.ieeesa-your-groups__group-name{color:#00629b;font-family:Calibri Bold;font-weight:700}.ieeesa-your-groups__hierarchy-cell{gap:6px}.ieeesa-your-groups__hierarchy-connector{flex:0 0 auto;display:inline-flex;align-items:center;color:#777a7e}.ieeesa-your-groups__hierarchy-name{color:#333436}.ieeesa-your-groups__hierarchy-acronym{color:#777a7e}.ieeesa-your-groups__badge{display:inline-flex;align-items:center;padding:.125em .75em;border-radius:1em;font-size:.875rem;white-space:nowrap}.ieeesa-your-groups__badge--success{color:#2e7d32;background-color:#2e7d321f}.ieeesa-your-groups__badge--warning{color:#b35600;background-color:#b356001f}.ieeesa-your-groups__paginator{margin-top:8px}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator-container{justify-content:flex-end}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator{background-color:transparent}\n"] }]
+            args: [{ selector: 'ieeesa-your-groups', standalone: true, imports: [
+                        CommonModule,
+                        MatPaginatorModule,
+                        LoaderComponent,
+                        IconButtonComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<section class=\"ieeesa-your-groups\">\r\n  <!-- Header: title + count, View All link, collapse/expand toggle -->\r\n  <div class=\"ieeesa-your-groups__header\">\r\n    <div class=\"ieeesa-your-groups__heading\">\r\n      <h2 class=\"ieeesa-your-groups__title m-0\">{{ texts?.title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"ieeesa-your-groups__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__view-all\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.viewAll\"\r\n        (click)=\"onViewAll()\"\r\n      >\r\n        {{ texts?.viewAllLabel }}\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ieeesa-your-groups__toggle\"\r\n        [attr.aria-expanded]=\"isExpanded\"\r\n        [attr.aria-label]=\"texts?.ariaLabel?.toggle\"\r\n        (click)=\"onToggleExpand()\"\r\n      >\r\n        <span>{{ isExpanded ? texts?.collapseLabel : texts?.expandLabel }}</span>\r\n        <i\r\n          class=\"fa-solid\"\r\n          [ngClass]=\"isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Body: only when the card is expanded. -->\r\n  <div class=\"ieeesa-your-groups__body\" *ngIf=\"isExpanded\">\r\n    <ieeesa-loader\r\n      *ngIf=\"sectionState === sectionStates.LOADING\"\r\n    ></ieeesa-loader>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.ERROR\"\r\n      class=\"ieeesa-your-groups__message ieeesa-your-groups__message--error\"\r\n      role=\"alert\"\r\n    >\r\n      {{ texts?.errorMessage }}\r\n    </p>\r\n\r\n    <p\r\n      *ngIf=\"sectionState === sectionStates.EMPTY\"\r\n      class=\"ieeesa-your-groups__message\"\r\n      role=\"status\"\r\n    >\r\n      {{ texts?.emptyMessage }}\r\n    </p>\r\n\r\n    <ng-container *ngIf=\"sectionState === sectionStates.LOADED\">\r\n      <table class=\"ieeesa-your-groups__table\">\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ texts?.columns?.group }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.type }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.officerRole }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.affiliation }}</th>\r\n            <th scope=\"col\">{{ texts?.columns?.memberLevel }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let row of visibleRows; trackBy: trackByRow\">\r\n            <!-- GROUP ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'group'\">\r\n              <td class=\"ieeesa-your-groups__group-cell\">\r\n                <!-- Group row toggle (level -1): reveals the first hierarchy\r\n                     node. Same shared icon button as the Groups tree. -->\r\n                <ieeesa-icon-button\r\n                  *ngIf=\"isLevelExpandable(row.group!, -1)\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [iconButton]=\"getToggleButton(row.group!, -1)\"\r\n                  [ariaExpanded]=\"isLevelExpanded(row.group!, -1)\"\r\n                  (iconButtonClick)=\"onToggleLevel(row.group!, -1)\"\r\n                ></ieeesa-icon-button>\r\n                <!-- Leaf group (no hierarchy): spacer keeps names aligned. -->\r\n                <span\r\n                  *ngIf=\"!isLevelExpandable(row.group!, -1)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__group-name\">\r\n                  {{ row.group!.group }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row.group!.type }}</td>\r\n              <td>{{ row.group!.officerRole }}</td>\r\n              <td>{{ row.group!.affiliation }}</td>\r\n              <td>\r\n                <span\r\n                  class=\"ieeesa-your-groups__badge\"\r\n                  [ngClass]=\"resolveBadgeClass(row.group!.memberLevel)\"\r\n                >\r\n                  {{ row.group!.memberLevel }}\r\n                </span>\r\n              </td>\r\n            </ng-container>\r\n\r\n            <!-- HIERARCHY (ancestor) ROW -->\r\n            <ng-container *ngIf=\"row.kind === 'hierarchy'\">\r\n              <td class=\"ieeesa-your-groups__group-cell ieeesa-your-groups__hierarchy-cell\">\r\n                <span\r\n                  class=\"ieeesa-your-groups__indent\"\r\n                  [style.width.px]=\"row.level * indentPerLevel\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <!-- This node's own +/- toggle, when it has a further child to\r\n                     reveal (step-by-step drill-down like the Groups tree). -->\r\n                <ieeesa-icon-button\r\n                  *ngIf=\"isLevelExpandable(row.group!, row.nodeIndex!)\"\r\n                  class=\"ieeesa-your-groups__hierarchy-toggle\"\r\n                  [iconButton]=\"getToggleButton(row.group!, row.nodeIndex!)\"\r\n                  [ariaExpanded]=\"isLevelExpanded(row.group!, row.nodeIndex!)\"\r\n                  (iconButtonClick)=\"onToggleLevel(row.group!, row.nodeIndex!)\"\r\n                ></ieeesa-icon-button>\r\n                <!-- Leaf node: spacer keeps the name aligned with parent nodes\r\n                     (same footprint as the toggle), no connector arrow. -->\r\n                <span\r\n                  *ngIf=\"!isLevelExpandable(row.group!, row.nodeIndex!)\"\r\n                  class=\"ieeesa-your-groups__toggle-spacer\"\r\n                  aria-hidden=\"true\"\r\n                ></span>\r\n                <span class=\"ieeesa-your-groups__hierarchy-name\">\r\n                  {{ row.node!.groupName }}\r\n                  <span\r\n                    *ngIf=\"row.node!.groupAcronym\"\r\n                    class=\"ieeesa-your-groups__hierarchy-acronym\"\r\n                  >\r\n                    ({{ row.node!.groupAcronym }})\r\n                  </span>\r\n                </span>\r\n              </td>\r\n              <td colspan=\"4\"></td>\r\n            </ng-container>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Pagination: the same Angular Material paginator the shared data-table\r\n           uses \u2014 it provides the \"Items per page\" dropdown, range label, and\r\n           prev/next controls. -->\r\n      <mat-paginator\r\n        *ngIf=\"groupCount > 0\"\r\n        class=\"ieeesa-your-groups__paginator\"\r\n        [length]=\"groupCount\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onPaginatorChange($event)\"\r\n      ></mat-paginator>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".ieeesa-subtitle{text-align:left;font-family:Calibri Regular;font-size:1.5625rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-body{text-align:left;font-family:Calibri Regular;font-size:1.25rem;letter-spacing:0;color:#000;opacity:1}.ieeesa-display-lg-57{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:3.5625rem;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.813rem;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.9375rem;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.375rem;line-height:44px;color:#000;letter-spacing:0}.ieeesa-headline-lg-32{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2rem;line-height:40px;color:#000;letter-spacing:0}.ieeesa-headline-lg-34{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:2.125rem;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.875rem;line-height:36px;color:#000;letter-spacing:0}.ieeesa-headline-sm-24{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.5rem;line-height:32px;color:#00629b;letter-spacing:0}.ieeesa-headline-sm-26{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1.625rem;line-height:32px;color:#000;letter-spacing:0}.ieeesa-title-lg-bold-24{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.5rem;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.5rem;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.125rem;line-height:24px;color:#000;letter-spacing:.009375em}.ieeesa-title-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-title-sm-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-label-lg-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.00625em}.ieeesa-btn-label-lg-bold-16{font-family:Calibri Regular;font-style:normal;font-weight:700;font-size:1rem;line-height:20px;color:#00629b;letter-spacing:.00625em}.ieeesa-label-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-label-sm-13{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.8125rem;line-height:16px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-16{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-lg-bold-18{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:1.125rem;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.125rem;line-height:24px;color:#000;letter-spacing:.03125em}.ieeesa-body-md-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:20px;color:#1c1b1f;letter-spacing:.015625em}.ieeesa-body-md-16{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:1rem;line-height:20px;color:#000;letter-spacing:.015625em}.ieeesa-body-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-sm-12{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.75rem;line-height:16px;color:#000;letter-spacing:.025em}.ieeesa-body-color-sm-14{font-family:Calibri Regular;font-style:normal;font-weight:400;font-size:.875rem;line-height:18px;color:#49454f;letter-spacing:.025em}.ieeesa-body-sm-bold-14{font-family:Calibri Bold;font-style:normal;font-weight:700;font-size:.875rem;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.5rem;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,.mat-mdc-button.mat-mdc-button-base.mat-text-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 Bold;font-style:normal;font-weight:700;font-size:1rem;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:focus{background:#1f75a7}.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:focus{background:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:active{background:#1d192b1f}.mat-mdc-button.mat-mdc-button-base.mat-secondary-button:disabled{background:#1c1b1f1f;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:focus{background-color:#f0f5f9}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:active{background:#6750a41f}.mat-mdc-button.mat-mdc-button-base.mat-tertiary-button:disabled{border:1px solid rgba(28,27,31,.12);color:#1c1b1f;opacity:.38}.mat-mdc-button.mat-mdc-button-base.mat-text-button{color:#00629b}.mat-mdc-button.mat-mdc-button-base.mat-text-button:hover,.mat-mdc-button.mat-mdc-button-base.mat-text-button:active{background:#6750a414}.mat-mdc-button.mat-mdc-button-base.mat-text-button:disabled{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 Bold;font-style:normal;font-weight:700;font-size:1rem;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 .mat-mdc-tooltip .mdc-tooltip__surface{color:#525252;padding:6px 12px;font-family:Calibri Regular;font-size:1rem;border:1px solid #cac4d0;background:#fff;box-shadow:0 4px 8px #00000040;max-width:unset!important}.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text{font-family:Calibri Regular!important}.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:1rem;line-height:24px;color:#49454f;letter-spacing:.03125em}.ieeesa-cancel-modal-confirm-dialog{width:25vw!important}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation{padding:1.5em 1.5em 1em}.ieeesa-cancel-modal-confirm-dialog .ieeesa-confirmation .mat-mdc-dialog-content{text-align:center;padding:0 0 1em!important}.mat-mdc-button,.mat-mdc-outlined-button{--mat-mdc-button-persistent-ripple-color: unset}@media (max-width: 768px){.ieeesa-cancel-modal-confirm-dialog{width:90vw!important}}.ieeesa-wrapper-border{border:1px solid #b2b7be;border-top:none;padding:1.5em;border-radius:0 0 4px 4px}.ieeesa-your-groups{display:block;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0003;padding:20px 24px;border:1px solid #E2E8F0}.ieeesa-your-groups__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.ieeesa-your-groups__heading{display:flex;flex-direction:column;gap:2px}.ieeesa-your-groups__title{font-family:Calibri Bold;font-weight:700;font-size:18px;color:#0f172a}.ieeesa-your-groups__count{font-family:Calibri Regular;font-size:.75rem;color:#777a7e}.ieeesa-your-groups__actions{display:flex;align-items:center;gap:16px}.ieeesa-your-groups__view-all{background:none;border:none;padding:0;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__view-all:hover{text-decoration:underline}.ieeesa-your-groups__toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #dbe2eb;border-radius:8px;background-color:#fff;cursor:pointer;font-family:Calibri Bold;font-weight:700;font-size:18px;color:#00629b}.ieeesa-your-groups__toggle:hover{border-color:#00629b}.ieeesa-your-groups__toggle i{font-size:.75rem}.ieeesa-your-groups__body{margin-top:16px}.ieeesa-your-groups__message{text-align:center;padding:32px 0;font-family:Calibri Regular;font-size:.875rem;color:#777a7e}.ieeesa-your-groups__message--error{color:#ba0c2f}.ieeesa-your-groups__table{width:100%;border-collapse:collapse}.ieeesa-your-groups__table th,.ieeesa-your-groups__table td{text-align:left;padding:14px 16px;border-bottom:1px solid #dbe2eb;vertical-align:middle}.ieeesa-your-groups__table th{background-color:#f4f5f7;color:#333436;font-family:Calibri Bold;font-weight:700;font-size:.875rem}.ieeesa-your-groups__table td{color:#333436;font-size:.875rem}.ieeesa-your-groups__table tbody tr:nth-child(2n) td{background-color:#f8fcff}.ieeesa-your-groups__group-cell{display:flex;align-items:center;gap:10px}.ieeesa-your-groups__indent{flex:0 0 auto;display:inline-block}.ieeesa-your-groups__hierarchy-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:0}.ieeesa-your-groups__hierarchy-toggle ::ng-deep .ieeesa-icon-button{display:inline-flex;align-items:flex-start!important;justify-content:center;width:24px;height:24px;min-width:0;padding:0;margin:0;line-height:0}.ieeesa-your-groups__hierarchy-toggle ::ng-deep .ieeesa-icon-button__svg{width:24px;height:24px;display:block}.ieeesa-your-groups__toggle-spacer{flex:0 0 auto;display:inline-block;width:24px;height:24px}.ieeesa-your-groups__group-name{color:#00629b;font-family:Calibri Bold;font-weight:700}.ieeesa-your-groups__hierarchy-cell{gap:6px}.ieeesa-your-groups__hierarchy-name{color:#333436}.ieeesa-your-groups__hierarchy-acronym{color:#777a7e}.ieeesa-your-groups__badge{display:inline-flex;align-items:center;padding:.125em .75em;border-radius:1em;font-size:.875rem;white-space:nowrap}.ieeesa-your-groups__badge--success{color:#2e7d32;background-color:#2e7d321f}.ieeesa-your-groups__badge--warning{color:#b35600;background-color:#b356001f}.ieeesa-your-groups__paginator{margin-top:8px}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator-container{justify-content:flex-end}.ieeesa-your-groups__paginator ::ng-deep .mat-mdc-paginator{background-color:transparent}\n"] }]
         }], propDecorators: { groups: [{
                 type: Input
             }], sectionState: [{