@ieeesa-npm/groups 0.15.7 → 0.15.9

package/lib/assets/roster-import-mocks.d.ts

@@ -0,0 +1,27 @@
+import { RosterImportMockScenario, RosterUploadError, RosterUploadResponse } from '../models/roster-import.model';
+/**
+ * Mock responses for the roster import flow, used to build and exercise the UI
+ * before the real backend API is available. Each scenario maps to one of the
+ * Figma result screens.
+ *
+ * Once the API is wired up, `RosterImportComponent` will call the real service
+ * method instead of `RosterImportMocks.getMockResponse(...)`.
+ */
+export declare class RosterImportMocks {
+    /** Row errors mirroring the Figma "All Rows are skipped" screen. */
+    static readonly mockRowErrors: RosterUploadError[];
+    /** All 30 rows added successfully (Figma: 30 / 0). */
+    static readonly allSuccess: RosterUploadResponse;
+    /** Partial import: some added, some skipped. */
+    static readonly partial: RosterUploadResponse;
+    /** Every row skipped (Figma: 0 / 30, "All Rows are skipped"). */
+    static readonly allSkipped: RosterUploadResponse;
+    /** Headers only, zero data rows (Figma: "No roster data found"). */
+    static readonly empty: RosterUploadResponse;
+    /**
+     * Returns the mock upload response for a given scenario.
+     * @param {RosterImportMockScenario} scenario - The scenario to simulate.
+     * @return {RosterUploadResponse}
+     */
+    static getMockResponse(scenario: RosterImportMockScenario): RosterUploadResponse;
+}

package/lib/components/add-user-roster/add-user-roster.component.d.ts

@@ -45,6 +45,25 @@ export declare class AddUserRosterComponent implements OnInit, OnDestroy {
     isUserExist: boolean;
     selectedOrganizations: AutoCompleteOption[];
     timeOutId: ReturnType<typeof setTimeout>;
+    /**
+     * True when the selected group's roster type is INDIVIDUAL (the only roster
+     * type that shows the Representing Organization field).
+     * @readonly
+     * @memberof AddUserRosterComponent
+     */
+    get isIndividualRoster(): boolean;
+    /**
+     * True when the org field holds an uncommitted, invalid free-text token. Used
+     * to keep Save disabled even when a valid chip already exists.
+     */
+    hasInvalidOrgFreeText: boolean;
+    /**
+     * Handles the org field's invalid-free-text state and recomputes Save-button
+     * state so the form cannot be submitted while an invalid token remains.
+     * @param {boolean} isInvalid -whether an uncommitted invalid token is present.
+     * @memberof AddUserRosterComponent
+     */
+    onOrgInvalidFreeText(isInvalid: boolean): void;
     dynamicFormComponent: DynamicFormComponent;
     submitFormResponse: EventEmitter<any>;
     formCancel: EventEmitter<any>;
@@ -132,6 +151,17 @@ export declare class AddUserRosterComponent implements OnInit, OnDestroy {
      * @memberof AddUserRosterComponent
      */
     getAddUserFormGroupRef(form: FormGroup[]): void;
+    /**
+     * Registers the `representingOrg` reactive control on the dynamic form's
+     * FormGroup for INDIVIDUAL rosters. The field itself is rendered by the custom
+     * OrgMultiSelectComponent (not the dynamic form), but keeping this control on
+     * the same FormGroup — with the original validators — means all existing
+     * submit/Save-button logic that reads `form.get('representingOrg')` keeps
+     * working unchanged. Its value is the selected-organizations array, kept in
+     * sync by getSelectedOrganizations().
+     * @memberof AddUserRosterComponent
+     */
+    registerRepresentingOrgControl(): void;
     /**
      * Handles user role selection in add user form.
      * @param {CheckboxOption} event

package/lib/components/edit-user-roles/edit-user-roles.component.d.ts

@@ -40,6 +40,18 @@ export declare class EditUserRolesComponent implements OnInit, OnDestroy {
     groupRosterType: GroupRosterType;
     representingOrganizations: SelectOption[];
     orgSearchValue: string;
+    /**
+     * True when the selected group's roster type is INDIVIDUAL (the only roster
+     * type that shows the Representing Organization field).
+     * @readonly
+     * @memberof EditUserRolesComponent
+     */
+    get isIndividualRoster(): boolean;
+    /**
+     * True when the org field holds an uncommitted, invalid free-text token. Used
+     * to keep Save disabled even when a valid chip already exists.
+     */
+    hasInvalidOrgFreeText: boolean;
     dynamicFormComponent: DynamicFormComponent;
     submitFormResponse: EventEmitter<any>;
     formCancel: EventEmitter<any>;
@@ -66,6 +78,13 @@ export declare class EditUserRolesComponent implements OnInit, OnDestroy {
      * @memberof EditUserRolesComponent
      */
     getSelectedOrganizations(selectedOrg: AutoCompleteOption[]): void;
+    /**
+     * Handles the org field's invalid-free-text state. Disables Save while an
+     * uncommitted invalid token remains; re-evaluates when it clears.
+     * @param {boolean} isInvalid -whether an uncommitted invalid token is present.
+     * @memberof EditUserRolesComponent
+     */
+    onOrgInvalidFreeText(isInvalid: boolean): void;
     /**
      * Updates the edit user form group controls by adding fieldConfig at required index.
      * @param {number} indexPosition
@@ -103,6 +122,18 @@ export declare class EditUserRolesComponent implements OnInit, OnDestroy {
      * @memberof EditUserRolesComponent
      */
     getFormGroupReference(form: FormGroup[]): void;
+    /**
+     * Registers the `representingOrg` reactive control on the dynamic form's
+     * FormGroup for INDIVIDUAL rosters. The field itself is rendered by the custom
+     * OrgMultiSelectComponent (not the dynamic form), but keeping this control on
+     * the same FormGroup — with the original validators — means all existing
+     * submit/Save-button logic that reads `form.get('representingOrg')` keeps
+     * working unchanged. Its value is the selected-organizations array, kept in
+     * sync by getSelectedOrganizations(). Prefilled with the user's existing
+     * organizations on edit.
+     * @memberof EditUserRolesComponent
+     */
+    registerRepresentingOrgControl(): void;
     /**
      * Handles edit user role form change event.
      * @param {FormGroup[]} form

package/lib/components/org-multi-select/org-multi-select.component.d.ts

@@ -0,0 +1,212 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { SelectOption } from '@ieeesa-npm/presentation';
+import * as i0 from "@angular/core";
+/**
+ * A self-contained multi-select organization field used inside the Add/Edit
+ * roster popups.
+ *
+ * It intentionally does NOT reuse the shared MultiSelectAutocompleteComponent
+ * (which is built on mat-autocomplete). Material's autocomplete closes its panel
+ * and overwrites the input on every option pick, which made multi-selection
+ * feel single-select and cleared the user's typed text. This component uses a
+ * fully-owned custom dropdown (<div> + checkboxes) so:
+ *  - the panel stays open while the user ticks several results,
+ *  - the typed search text is never overwritten by a pick,
+ *  - pressing Enter adds the typed value as a free-text chip,
+ *  - clicking outside clears any leftover typed text (old behavior),
+ *  - selected values render as removable chips (old behavior).
+ *
+ * The parent supplies search results via {@link options} and reacts to
+ * {@link search} (debounced typed term) and {@link selectionChange}.
+ * @export
+ * @class OrgMultiSelectComponent
+ */
+export declare class OrgMultiSelectComponent implements OnInit, OnDestroy {
+    /** Field label (e.g. "Representing Organization *"). */
+    label: string;
+    /** Placeholder for the input. */
+    placeholder: string;
+    /** Support/help text shown below the field. */
+    supportMessage: string;
+    /** aria-label for the input. */
+    ariaLabel: string;
+    /** Search results supplied by the parent (repopulated on each search). */
+    set options(value: SelectOption[]);
+    get options(): SelectOption[];
+    private _options;
+    /** Pre-selected options (edit prefill). Rendered as chips. */
+    set selectedOptions(value: SelectOption[]);
+    get selectedOptions(): SelectOption[];
+    private _selectedOptions;
+    /** Marks the field required (drives the required message + error border). */
+    required: boolean;
+    /**
+     * Icon URLs (same sprite refs the shared multi-select field used). Defaulted
+     * so the popups don't need to pass them; overridable via input if needed.
+     */
+    removeIconURL: string;
+    clearAllIconURL: string;
+    /** Emits the trimmed typed term (debounced) so the parent can call the API. */
+    search: EventEmitter<string>;
+    /** Emits the current selection array whenever it changes. */
+    selectionChange: EventEmitter<SelectOption[]>;
+    /** Emitted when the field is blurred (parent can re-evaluate validation). */
+    fieldBlur: EventEmitter<void>;
+    /**
+     * Emits true when the input holds an uncommitted free-text token that fails
+     * validation (too short / too long / invalid pattern), and false when the
+     * input is empty or the token is valid. The parent uses this to keep the Save
+     * button disabled while an invalid token remains — otherwise a previously
+     * added valid chip would keep the parent control valid and let the form submit
+     * with an invalid token still in the input.
+     */
+    invalidFreeText: EventEmitter<boolean>;
+    /** Tracks the last emitted invalid-token state to avoid duplicate emits. */
+    private hasInvalidFreeText;
+    searchInput: ElementRef<HTMLInputElement>;
+    constants: any;
+    addUserRosterTexts: any;
+    /** Whether the results dropdown is open. */
+    isDropdownOpen: boolean;
+    /** The current typed search text. */
+    searchText: string;
+    /** Inline validation message for the free-text (Enter) path. */
+    errorMessage: string;
+    /** Whether the field has been touched (to show required error after blur). */
+    isTouched: boolean;
+    /**
+     * Index of the keyboard-highlighted result row (-1 = none). Enables arrow-key
+     * navigation and Enter-to-toggle for keyboard users, mirroring the mat-option
+     * behavior this custom dropdown replaces.
+     */
+    activeOptionIndex: number;
+    /** Stable id prefix for option rows (used for aria-activedescendant). */
+    readonly optionIdPrefix = "ieeesa-org-option-";
+    private destroy$;
+    private searchDebounce?;
+    private blurTimer?;
+    private readonly debounceMs;
+    private readonly minCharToSearch;
+    private separatorKeys;
+    ngOnInit(): void;
+    /**
+     * Handles typing in the search input: tracks the text, opens/closes the
+     * dropdown and debounces the search emit to the parent.
+     * @param {Event} event -input event.
+     * @memberof OrgMultiSelectComponent
+     */
+    onInput(event: Event): void;
+    /**
+     * Emits the invalid-free-text state to the parent (deduped). True means an
+     * uncommitted token is present and Save should stay disabled.
+     * @param {boolean} isInvalid -whether an uncommitted token is present.
+     * @memberof OrgMultiSelectComponent
+     */
+    private emitInvalidState;
+    /**
+     * Opens the dropdown on focus only when there are results AND the input still
+     * holds a valid search term (at or above minCharToSearch). This prevents
+     * re-opening stale results — e.g. a late API response that populated options
+     * after the input was cleared — when the user simply refocuses the field.
+     * @memberof OrgMultiSelectComponent
+     */
+    onFocus(): void;
+    /**
+     * Called by the parent (via a setter re-assign) or internally after new
+     * options arrive so the dropdown opens to show them.
+     * @memberof OrgMultiSelectComponent
+     */
+    showResults(): void;
+    /**
+     * Handles keydown for the Enter/comma "add typed value" path.
+     * @param {KeyboardEvent} event -keyboard event.
+     * @memberof OrgMultiSelectComponent
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Moves the keyboard highlight up/down the results list, wrapping at the ends.
+     * @param {number} delta -+1 to move down, -1 to move up.
+     * @memberof OrgMultiSelectComponent
+     */
+    private moveActiveOption;
+    /**
+     * Whether the given result index is the keyboard-highlighted row.
+     * @param {number} index -the option's index.
+     * @return {boolean}
+     * @memberof OrgMultiSelectComponent
+     */
+    isActiveOption(index: number): boolean;
+    /**
+     * Adds the typed free-text value as a selection (chip) after validating its
+     * length and pattern (parity with the previous chip-input behavior).
+     * @memberof OrgMultiSelectComponent
+     */
+    addTypedValue(): void;
+    /**
+     * Validates a free-text organization value against the shared min/max/pattern
+     * rules. Returns an error message when invalid, otherwise an empty string.
+     * @param {string} value -the typed value.
+     * @return {string}
+     * @memberof OrgMultiSelectComponent
+     */
+    validateFreeText(value: string): string;
+    /**
+     * Toggles selection of a result option. Keeps the dropdown open and the typed
+     * text intact so the user can keep selecting.
+     * @param {SelectOption} option -the clicked result option.
+     * @memberof OrgMultiSelectComponent
+     */
+    toggleOption(option: SelectOption): void;
+    /**
+     * Whether an option is currently selected (drives the checkbox checked state).
+     * @param {SelectOption} option -option to test.
+     * @return {boolean}
+     * @memberof OrgMultiSelectComponent
+     */
+    isSelected(option: SelectOption): boolean;
+    /**
+     * Removes a selected chip.
+     * @param {SelectOption} option -the option to remove.
+     * @memberof OrgMultiSelectComponent
+     */
+    removeOption(option: SelectOption): void;
+    /**
+     * Clears all selected chips.
+     * @memberof OrgMultiSelectComponent
+     */
+    clearAll(): void;
+    /**
+     * Clears the leftover typed text on blur (old behavior) and closes the
+     * dropdown. Deferred so a click on a dropdown option (which also blurs the
+     * input) is handled first.
+     * @memberof OrgMultiSelectComponent
+     */
+    onBlur(): void;
+    /**
+     * Whether the required error should show (touched, no selection).
+     * @return {boolean}
+     * @memberof OrgMultiSelectComponent
+     */
+    get showRequiredError(): boolean;
+    /**
+     * Clears the typed search text and hides the results.
+     * @memberof OrgMultiSelectComponent
+     */
+    private clearSearchText;
+    /**
+     * Emits the current selection to the parent.
+     * @memberof OrgMultiSelectComponent
+     */
+    private emitSelection;
+    /**
+     * TrackBy for both result and chip lists.
+     * @param {number} index -list index.
+     * @param {SelectOption} option -the option.
+     * @return {(string | number)}
+     * @memberof OrgMultiSelectComponent
+     */
+    trackByFn(index: number, option: SelectOption): string | number;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OrgMultiSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OrgMultiSelectComponent, "ieeesa-org-multi-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "supportMessage": { "alias": "supportMessage"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; }; "required": { "alias": "required"; "required": false; }; "removeIconURL": { "alias": "removeIconURL"; "required": false; }; "clearAllIconURL": { "alias": "clearAllIconURL"; "required": false; }; }, { "search": "search"; "selectionChange": "selectionChange"; "fieldBlur": "fieldBlur"; "invalidFreeText": "invalidFreeText"; }, never, never, true, never>;
+}

package/lib/components/roster-import/roster-import.component.d.ts

@@ -0,0 +1,179 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RosterUploadError, RosterUploadResponse } from '../../models/roster-import.model';
+import * as i0 from "@angular/core";
+/** States of the roster import flow. */
+type RosterImportState = 'upload' | 'processing' | 'result';
+/**
+ * Roster Import dialog (MOCK data phase).
+ *
+ * Lets an admin upload a CSV/XLS/XLSX roster file, shows a processing progress
+ * bar, then a result summary (added / skipped) with per-row errors and an
+ * error-log download. Mirrors the events-and-meetings bulk-import-participants
+ * flow. The real backend is not wired yet — {@link onImport} resolves a mock
+ * response after a short delay so every Figma state can be exercised.
+ *
+ * @export
+ * @class RosterImportComponent
+ */
+export declare class RosterImportComponent implements OnDestroy {
+    /** Carries the { groupId, groupName } payload from the opening dialog. */
+    componentData: any;
+    /** Emitted after an import that added at least one row (parent refreshes). */
+    submitFormResponse: EventEmitter<any>;
+    /** Emitted when the user cancels/closes without a successful add. */
+    formCancel: EventEmitter<void>;
+    destroy$: Subject<boolean>;
+    constants: any;
+    screenTexts: any;
+    /** Current state of the import flow. */
+    importState: RosterImportState;
+    /** The selected file. */
+    selectedFile: File | null;
+    /** File drag-over state. */
+    isDragOver: boolean;
+    /** Processing progress percentage (0–100) shown next to the progress bar. */
+    progressValue: number;
+    /** Terminal upload result (mock). */
+    uploadResult: RosterUploadResponse | null;
+    /** Row-level errors for the completed job. */
+    jobErrors: RosterUploadError[];
+    /** Inline validation / API error message. */
+    errorMessage: string | null;
+    /**
+     * Info banner shown when the file has headers but no data rows
+     * (Figma: "No roster data found...").
+     */
+    noDataMessage: string | null;
+    /** Maximum file size in bytes (5 MB). */
+    readonly MAX_FILE_SIZE = 5242880;
+    /** Accepted file extensions. */
+    readonly ACCEPTED_EXTENSIONS: string[];
+    /**
+     * MOCK ONLY: which scenario the next import simulates. Cycles through the
+     * scenarios so QA can see every result state by importing repeatedly. Remove
+     * when the real API is wired in.
+     */
+    private mockScenarios;
+    private mockScenarioIndex;
+    /** Required column headers for display. */
+    get requiredColumns(): string[];
+    /** Comma-separated accepted file types for the input element. */
+    get acceptedFileTypes(): string;
+    /**
+     * Cleans up subscriptions when the component is destroyed.
+     * @memberof RosterImportComponent
+     */
+    ngOnDestroy(): void;
+    /**
+     * Handles a file selected via the browse dialog.
+     * @param {Event} event - The change event from the hidden file input.
+     * @memberof RosterImportComponent
+     */
+    onFileSelected(event: Event): void;
+    /**
+     * Handles a file dropped onto the dropzone.
+     * @param {DragEvent} event - The drop event.
+     * @memberof RosterImportComponent
+     */
+    onFileDrop(event: DragEvent): void;
+    /**
+     * Handles drag-over on the dropzone.
+     * @param {DragEvent} event - The dragover event.
+     * @memberof RosterImportComponent
+     */
+    onDragOver(event: DragEvent): void;
+    /**
+     * Handles drag-leave on the dropzone.
+     * @param {DragEvent} event - The dragleave event.
+     * @memberof RosterImportComponent
+     */
+    onDragLeave(event: DragEvent): void;
+    /**
+     * Validates the file type and size, then either sets it or shows an error.
+     * @param {File} file - The candidate file.
+     * @memberof RosterImportComponent
+     */
+    processFile(file: File): void;
+    /**
+     * Shows the single-file-only validation message.
+     * @memberof RosterImportComponent
+     */
+    showSingleFileOnlyError(): void;
+    /**
+     * Removes the currently selected file and resets to the upload state.
+     * @memberof RosterImportComponent
+     */
+    onRemoveFile(): void;
+    /**
+     * MOCK: "uploads" the file by simulating a short processing delay, then
+     * resolves the next mock scenario. Replace the timer + mock lookup with the
+     * real service call once the API is available.
+     * @memberof RosterImportComponent
+     */
+    onImport(): void;
+    /**
+     * Stores the terminal result and moves to the result state. When the file
+     * had no data rows, shows the "no roster data" info banner instead of the
+     * summary cards.
+     * @param {RosterUploadResponse} body - The terminal (mock) result.
+     * @memberof RosterImportComponent
+     */
+    finalizeResult(body: RosterUploadResponse): void;
+    /**
+     * Whether the result state should show the summary cards (added / skipped).
+     * Hidden for the "no data records" case.
+     * @return {boolean}
+     * @memberof RosterImportComponent
+     */
+    get showSummaryCards(): boolean;
+    /**
+     * Whether every processed row was skipped (drives the "All Rows are skipped"
+     * header on the errors card).
+     * @return {boolean}
+     * @memberof RosterImportComponent
+     */
+    get allRowsSkipped(): boolean;
+    /**
+     * Builds a client-side CSV sample file from the required columns and triggers
+     * a browser download. (Client-side generation until the template API exists.)
+     * @memberof RosterImportComponent
+     */
+    downloadSampleFile(): void;
+    /**
+     * Builds a CSV from the row-level errors and triggers a browser download so
+     * the user can correct and re-upload.
+     * @memberof RosterImportComponent
+     */
+    downloadErrorLog(): void;
+    /**
+     * Escapes a value for safe inclusion in a CSV cell.
+     * @param {(string | number | undefined | null)} value - The raw cell value.
+     * @return {string} - the CSV-safe cell string.
+     * @memberof RosterImportComponent
+     */
+    toCsvCell(value: string | number | undefined | null): string;
+    /**
+     * Closes the dialog. Emits submitFormResponse when at least one row was added
+     * so the parent refreshes; otherwise emits formCancel.
+     * @memberof RosterImportComponent
+     */
+    onCancel(): void;
+    /**
+     * Triggers a browser download for a generated blob.
+     * @param {Blob} blob - The file content.
+     * @param {string} fileName - The suggested filename.
+     * @memberof RosterImportComponent
+     */
+    private triggerDownload;
+    /**
+     * MOCK ONLY: returns the next scenario in the cycle so repeated imports show
+     * every result state.
+     * @return {RosterImportMockScenario}
+     * @memberof RosterImportComponent
+     */
+    private nextMockScenario;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RosterImportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RosterImportComponent, "ieeesa-roster-import", never, { "componentData": { "alias": "componentData"; "required": false; }; }, { "submitFormResponse": "submitFormResponse"; "formCancel": "formCancel"; }, never, never, true, never>;
+}
+export {};

package/lib/components/view-roster/view-roster.component.d.ts

@@ -1,6 +1,7 @@
-import { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Sort } from '@angular/material/sort';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { MatDialog } from '@angular/material/dialog';
 import { TableColumnSchema, TableActions, AlignType, ChipOption, CheckboxOption, FiltersAndOptions, ExportFormat } from '@ieeesa-npm/presentation';
 import { AlertsService, GlobalErrorHandlerService } from '@ieeesa-npm/utility';
@@ -26,6 +27,10 @@ export declare class ViewRosterComponent implements AfterViewInit, OnDestroy, On
     private globalErrorHandlerService;
     rosterExportService: RosterExportService;
     destroy$: Subject<boolean>;
+    /** Trigger for the "Add" menu (Add Manually / Bulk Import). */
+    addMenuTrigger?: MatMenuTrigger;
+    /** Invisible anchor element the "Add" menu attaches to. */
+    addMenuAnchor?: ElementRef<HTMLElement>;
     constants: any;
     viewRosterConstants: any;
     dialogRef: any;
@@ -149,10 +154,40 @@ export declare class ViewRosterComponent implements AfterViewInit, OnDestroy, On
      */
     onEditUserRoles(selectedUserInfo: GroupUserInfo[]): void;
     /**
-     * Emits openModalNotifier event with GroupFunctionType value as ADD_USER_TO_ROSTER
+     * Handles a click on the data-table's add-user icon. The add icon lives inside
+     * the shared DataTableComponent and only emits (addRow), so we can't attach a
+     * menu trigger to it directly. Instead we position an invisible, fixed-position
+     * anchor at the add icon's on-screen location, then open the menu from that
+     * anchor — so the menu appears directly beneath the add icon (matching the
+     * Figma) rather than at the far-right export area.
      * @memberof ViewRosterComponent
      */
-    onAddNewUser(): void;
+    onAddIconClick(): void;
+    /**
+     * Closes the "Add" menu on window resize/scroll. The menu is anchored to a
+     * point measured at open time, so a layout change (resize/scroll) would leave
+     * it detached from the add icon; closing it avoids showing it in a stale spot.
+     * The user can simply click the add icon again.
+     * @memberof ViewRosterComponent
+     */
+    closeAddMenuOnViewportChange(): void;
+    /**
+     * Places the add-menu anchor at the add-user icon's bottom edge. Locates the
+     * icon by finding the add-user sprite (icon-add-user) within the roster's
+     * data-table action row.
+     * @memberof ViewRosterComponent
+     */
+    private positionAddMenuAnchorAtAddIcon;
+    /**
+     * "Add Manually" menu option — opens the existing add-user-to-roster flow.
+     * @memberof ViewRosterComponent
+     */
+    onAddManually(): void;
+    /**
+     * "Bulk Import" menu option — opens the bulk roster import dialog.
+     * @memberof ViewRosterComponent
+     */
+    onImportRoster(): void;
     /**
      * Handles alerts for success, error, warning.
      * @param {(string | string[])} message -error or warning message

package/lib/groups.component.d.ts

@@ -109,6 +109,14 @@ export declare class GroupsComponent implements OnInit, OnDestroy {
      * @memberof GroupsComponent
      */
     openAddUserRosterModal(selectedGroupInfo: GroupInfo): void;
+    /**
+     * Sets the dialog options for the bulk roster import modal and opens it.
+     * Passes the selected group's id/name to the dynamically-instantiated
+     * RosterImportComponent via the ModalComponent dynamic-input pattern.
+     * @param {GroupInfo} selectedGroupInfo
+     * @memberof GroupsComponent
+     */
+    openRosterImportModal(selectedGroupInfo: GroupInfo): void;
     /**
      * Sets the dialog options for users modal and calls openModal method.
      * @param {GroupInfo} group

package/lib/models/group-function-type.model.d.ts

@@ -7,5 +7,6 @@ export declare enum GroupFunctionType {
     SEARCH = "SEARCH",
     REASSIGN_PARENT_GROUP = "REASSIGN_PARENT_GROUP",
     EDIT_ROSTER_USER_ROLE = "EDIT_ROSTER_USER_ROLE",
-    ADD_USER_TO_ROSTER = "ADD_USER_TO_ROSTER"
+    ADD_USER_TO_ROSTER = "ADD_USER_TO_ROSTER",
+    IMPORT_ROSTER = "IMPORT_ROSTER"
 }

package/lib/models/roster-import.model.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Terminal status of a roster bulk-upload job.
+ */
+export declare enum RosterUploadStatus {
+    PROCESSING = "PROCESSING",
+    COMPLETED = "COMPLETED",
+    FAILED = "FAILED"
+}
+/**
+ * A single row-level error from the roster import validation.
+ */
+export interface RosterUploadError {
+    /** 1-based row number in the uploaded file. */
+    rowNumber: number;
+    /** The field/column the error relates to (e.g. "Name", "Email"). */
+    field?: string;
+    /** The offending value, when relevant (e.g. an unrecognized role). */
+    value?: string;
+    /** Human-readable error message shown in the row-errors list. */
+    errorMessage: string;
+}
+/**
+ * Terminal result of a roster bulk-upload job.
+ *
+ * NOTE: This is a MOCK-friendly shape used to build the UI before the real API
+ * is available. It will be reconciled with the backend contract once shared.
+ */
+export interface RosterUploadResponse {
+    /** Job identifier (unused by the mock flow, kept for parity with the API). */
+    uploadJobId?: string;
+    /** Terminal job status. */
+    status: RosterUploadStatus;
+    /** Total data rows detected in the file (excludes the header row). */
+    totalRecords: number;
+    /** Rows successfully added/updated. */
+    successCount: number;
+    /** Rows skipped due to validation errors. */
+    failureCount: number;
+    /** Row-level errors (present when failureCount > 0). */
+    rowErrors: RosterUploadError[];
+}
+/**
+ * The kind of mock scenario to simulate, so the UI can be exercised against
+ * each Figma state without a backend.
+ */
+export declare enum RosterImportMockScenario {
+    /** All rows imported successfully (Figma: 30 added / 0 skipped). */
+    ALL_SUCCESS = "ALL_SUCCESS",
+    /** Some rows imported, some skipped with errors (partial). */
+    PARTIAL = "PARTIAL",
+    /** Every row skipped with errors (Figma: 0 added / 30 skipped). */
+    ALL_SKIPPED = "ALL_SKIPPED",
+    /** File contained headers but zero data rows (Figma: "No roster data found"). */
+    EMPTY = "EMPTY"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/groups",
-  "version": "0.15.7",
+  "version": "0.15.9",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0"