commons-shared-web-ui 0.0.73 → 0.0.74

package/index.d.ts

@@ -519,6 +519,13 @@ interface OptionConfig$1 {
     showSelectAll?: boolean;
     /** When true, displays a loading spinner during options API requests. */
     showLoader?: boolean;
+    /**
+     * When true, a plain `optionList`-only SINGLE DROPDOWN (no `searchConfig`/`pagination`) renders
+     * the same styled overlay/chevron panel used by searchable and paginated dropdowns, instead of
+     * a native `<select>` — purely for visual consistency with sibling fields. No search box or
+     * pagination is added.
+     */
+    customUI?: boolean;
 }
 interface AutocompleteDisplayField {
     /** Dot-notation path to the value in the API response item (e.g. 'login', 'contact.phone'). */
@@ -1652,10 +1659,27 @@ declare class FormFieldComponent implements OnInit, AfterViewInit, OnDestroy {
      * object is reused across multiple allowMulti repeater instances.
      */
     localOptionList: any[];
+    /** Snapshot of default (unsearched) options and pagination state for DROPDOWN / AUTOCOMPLETE fields */
+    private defaultStateSnapshot;
+    /** Tracks whether the current localOptionList is filtered by an active server-side search query */
+    private _isServerSearchActive;
     /** Dedicated cache of currently selected option objects */
     selectedItems: any[];
     /** Cache of the latest dependency parameters for server-side autocomplete filtering */
     private _latestDependencyValues;
+    /** True when this field has no optionConfig.dependencies (nothing to satisfy) OR every
+     *  dependency's current value is present — false while waiting on a parent field. Guards every
+     *  opportunistic reload path (dropdown-open, search-reset, search-clear) so a dependent
+     *  dropdown never re-fetches an unfiltered full list just because it was opened/searched before
+     *  its parent was chosen — only setupDependencies()'s own reactive load (which always supplies
+     *  the real dependency params) is allowed to populate it.
+     *  Defaults to true here (fields with no dependencies never get corrected otherwise), but
+     *  ngOnInit flips it to false up front for any field that DOES declare dependencies — closing
+     *  the window between component creation and setupDependencies()'s first (necessarily async,
+     *  via combineLatest) emission, during which a fast dropdown-open would otherwise still see
+     *  this stale `true` default and fire an unfiltered fetch before the parent-unmet state is
+     *  known. */
+    private _dependenciesSatisfied;
     /** For GROUP fields with allowMulti = true */
     groupFormArray: FormArray;
     /** For GROUP fields with allowMulti = false — single nested FormGroup */
@@ -1718,7 +1742,9 @@ declare class FormFieldComponent implements OnInit, AfterViewInit, OnDestroy {
     isSingleOptionSelected(code: any): boolean;
     /** Whether the dropdown search feature is enabled for this field */
     get isSearchableDropdown(): boolean;
-    /** Whether the custom single-select dropdown overlay is required (for search OR pagination) */
+    /** Whether the custom single-select dropdown overlay is required — for search, pagination, or
+     *  when optionConfig.customUI opts in to the styled overlay purely for visual consistency with
+     *  sibling dropdowns (no search box, no pagination — just the same panel/chevron treatment). */
     get isCustomSingleDropdown(): boolean;
     private initGroupField;
     /**
@@ -1890,6 +1916,8 @@ declare class FormFieldComponent implements OnInit, AfterViewInit, OnDestroy {
     private initDropdownSearch;
     /** Execute client-side or server-side dropdown search. */
     private executeDropdownSearch;
+    /** Restores localOptionList and pagination metadata from defaultStateSnapshot, preserving selected item(s) */
+    private restoreDefaultOptionList;
     /** Resets the dropdown search text and filtered list. */
     resetDropdownSearch(forceLoad?: boolean, bypassCache?: boolean): void;
     /** Merges option(s) from selectedOptionsData into the local dropdown options list */
@@ -2662,6 +2690,9 @@ interface DropdownConfig {
     disabled?: boolean;
     required?: boolean;
     errorMessage?: string;
+    serverSearch?: boolean;
+    searchDebounceMs?: number;
+    lazyLoad?: boolean;
     width?: string;
     height?: string;
     borderRadius?: string;
@@ -2685,7 +2716,7 @@ interface DropdownConfig {
     boxShadow?: string;
 }
 
-declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChanges {
+declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     private el;
     config?: DropdownConfig;
     labels?: DropdownLabels;
@@ -2699,6 +2730,12 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     disabled: boolean;
     required: boolean;
     errorMessage: string;
+    serverSearch: boolean;
+    searchDebounceMs: number;
+    lazyLoad: boolean;
+    loading: boolean;
+    loadingMore: boolean;
+    hasMore: boolean;
     width?: string;
     height?: string;
     borderRadius?: string;
@@ -2721,6 +2758,8 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     disabledColor?: string;
     boxShadow?: string;
     selectionChange: EventEmitter<any>;
+    searchTermChange: EventEmitter<string>;
+    loadMore: EventEmitter<void>;
     viewport?: CdkVirtualScrollViewport;
     searchInput?: ElementRef;
     triggerEl?: ElementRef;
@@ -2736,8 +2775,10 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     };
     onChange: (value: any) => void;
     onTouched: () => void;
+    private search$;
     constructor(el: ElementRef);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private get validOptions();
     private updateFromConfig;
@@ -2758,6 +2799,7 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     selectOption(option: DropdownOption): void;
     isSelected(option: DropdownOption): boolean;
     onSearch(term: string): void;
+    onOptionsScroll(event: Event): void;
     clearSelection(event?: Event): void;
     getIconType(icon: any): 'material' | 'fontawesome' | 'img' | 'none';
     getIconValue(icon: any): string;
@@ -2776,7 +2818,7 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
         [key: string]: string | undefined;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "config": { "alias": "config"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "options": { "alias": "options"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "fontFamily": { "alias": "fontFamily"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "labelFontSize": { "alias": "labelFontSize"; "required": false; }; "labelFontWeight": { "alias": "labelFontWeight"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "placeholderColor": { "alias": "placeholderColor"; "required": false; }; "focusBorderColor": { "alias": "focusBorderColor"; "required": false; }; "errorColor": { "alias": "errorColor"; "required": false; }; "disabledBackgroundColor": { "alias": "disabledBackgroundColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "boxShadow": { "alias": "boxShadow"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "config": { "alias": "config"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "options": { "alias": "options"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "serverSearch": { "alias": "serverSearch"; "required": false; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; }; "lazyLoad": { "alias": "lazyLoad"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMore": { "alias": "loadingMore"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "fontFamily": { "alias": "fontFamily"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "labelFontSize": { "alias": "labelFontSize"; "required": false; }; "labelFontWeight": { "alias": "labelFontWeight"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "placeholderColor": { "alias": "placeholderColor"; "required": false; }; "focusBorderColor": { "alias": "focusBorderColor"; "required": false; }; "errorColor": { "alias": "errorColor"; "required": false; }; "disabledBackgroundColor": { "alias": "disabledBackgroundColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "boxShadow": { "alias": "boxShadow"; "required": false; }; }, { "selectionChange": "selectionChange"; "searchTermChange": "searchTermChange"; "loadMore": "loadMore"; }, never, never, false, never>;
 }
 
 interface CheckboxOption {
@@ -5278,6 +5320,13 @@ interface HierarchyCfg {
     nodes: Record<string, any>;
     branchSubType: string;
     showLoader: boolean;
+    /** Passed straight through onto every generated level's DROPDOWN optionConfig — same shape as
+     *  optionConfig.searchConfig documented in smart-form.md. Lets a large flat MDM level (e.g.
+     *  hundreds of districts) be searched instead of scrolled through in full. */
+    searchConfig?: any;
+    /** Passed straight through onto every generated level's DROPDOWN optionConfig — same shape as
+     *  optionConfig.pagination documented in smart-form.md (loadMore/infiniteScroll). */
+    pagination?: any;
 }
 
 declare class ValidationUtils {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",