@ieeesa-npm/groups 0.15.8 → 0.15.9

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/package.json

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