@ngstarter-ui/components 21.0.48 → 21.0.50

package/types/ngstarter-ui-components-select.d.ts

@@ -56,6 +56,63 @@ declare abstract class _Select {
 }
 declare const SELECT: InjectionToken<_Select>;
 
+interface SelectDataSourceRequest {
+    search: string;
+    page: number;
+    pageSize: number;
+    cursor?: unknown;
+    selectedValues: unknown[];
+    reason: 'initial' | 'open' | 'search' | 'page';
+    signal?: AbortSignal;
+}
+interface SelectDataSourceOption<T = unknown> {
+    label: string;
+    value: unknown;
+    disabled?: boolean;
+    data?: T;
+}
+interface SelectDataSourceResult<T = unknown> {
+    items: SelectDataSourceOption<T>[];
+    hasMore?: boolean;
+    total?: number;
+    nextCursor?: unknown;
+}
+type SelectDataSource<T = unknown> = (request: SelectDataSourceRequest) => Promise<SelectDataSourceResult<T> | SelectDataSourceOption<T>[]>;
+
+interface SelectOptionContentContext<T = any> {
+    $implicit: T;
+    data: T;
+    option: SelectDataSourceOption<T>;
+    value: unknown;
+    label: string;
+    selected: boolean;
+    disabled: boolean;
+    multiple: boolean;
+}
+declare class SelectOptionContentDef<T = any> {
+    readonly templateRef: TemplateRef<SelectOptionContentContext<T>>;
+    static ngTemplateContextGuard<T>(_directive: SelectOptionContentDef<T>, _context: unknown): _context is SelectOptionContentContext<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectOptionContentDef<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectOptionContentDef<any>, "ng-template[ngsOptionContentDef]", never, {}, {}, never, never, true, never>;
+}
+
+interface SelectValueContext<T = any> {
+    $implicit: T | T[] | null;
+    data: T | T[] | null;
+    option: SelectDataSourceOption<T> | SelectDataSourceOption<T>[] | null;
+    value: unknown | unknown[] | null;
+    label: string;
+    labels: string[];
+    count: number;
+    multiple: boolean;
+}
+declare class SelectValueDef<T = any> {
+    readonly templateRef: TemplateRef<SelectValueContext<T>>;
+    static ngTemplateContextGuard<T>(_directive: SelectValueDef<T>, _context: unknown): _context is SelectValueContext<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectValueDef<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectValueDef<any>, "ng-template[ngsSelectValueDef]", never, {}, {}, never, never, true, never>;
+}
+
 declare class SelectChange {
     source: Select;
     value: any;
@@ -82,6 +139,12 @@ declare class Select implements ControlValueAccessor, OnDestroy, AfterContentIni
     multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     hideCheckIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
     clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    dataSource: _angular_core.InputSignal<SelectDataSource | null | undefined>;
+    pageSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    searchDebounce: _angular_core.InputSignalWithTransform<number, unknown>;
+    minSearchLength: _angular_core.InputSignalWithTransform<number, unknown>;
+    loadOnOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
     ariaLabel: _angular_core.InputSignal<string | null>;
     tabIndex: _angular_core.InputSignalWithTransform<number, any>;
     ariaDescribedby: _angular_core.InputSignal<string | null>;
@@ -90,10 +153,14 @@ declare class Select implements ControlValueAccessor, OnDestroy, AfterContentIni
     readonly selectionChange: _angular_core.OutputEmitterRef<any>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    options: _angular_core.Signal<readonly _Option[]>;
+    private projectedOptions;
+    private dataSourceOptions;
+    options: _angular_core.Signal<_Option[]>;
     optionGroups: _angular_core.Signal<readonly Optgroup[]>;
     customTrigger: _angular_core.Signal<readonly SelectTrigger[]>;
     filterTrigger: _angular_core.Signal<readonly FilterTrigger[]>;
+    optionContentDef: _angular_core.Signal<SelectOptionContentDef<any> | undefined>;
+    selectValueDef: _angular_core.Signal<SelectValueDef<any> | undefined>;
     overlayDir: _angular_core.Signal<CdkConnectedOverlay | undefined>;
     panel: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     origin: _angular_core.Signal<CdkOverlayOrigin | undefined>;
@@ -109,6 +176,22 @@ declare class Select implements ControlValueAccessor, OnDestroy, AfterContentIni
     _optionsContentChanges: _angular_core.WritableSignal<number>;
     private _errorState;
     get errorState(): boolean;
+    protected readonly asyncOptions: _angular_core.WritableSignal<SelectDataSourceOption<unknown>[]>;
+    protected readonly asyncSearch: _angular_core.WritableSignal<string>;
+    protected readonly asyncLoading: _angular_core.WritableSignal<boolean>;
+    protected readonly asyncLoadingMore: _angular_core.WritableSignal<boolean>;
+    protected readonly asyncError: _angular_core.WritableSignal<unknown>;
+    protected readonly asyncHasMore: _angular_core.WritableSignal<boolean>;
+    protected readonly asyncEnabled: _angular_core.Signal<boolean>;
+    private readonly _asyncSelectedCache;
+    private _asyncPage;
+    private _asyncCursor;
+    private _asyncSearchTimer;
+    private _asyncRequestId;
+    private _asyncAbortController;
+    private _lastDataSource;
+    private _lastInitialSelectedKey;
+    private _destroyed;
     private _empty;
     get empty(): boolean;
     readonly hasValue: _angular_core.Signal<boolean>;
@@ -122,6 +205,8 @@ declare class Select implements ControlValueAccessor, OnDestroy, AfterContentIni
     triggerValue: _angular_core.Signal<string>;
     selectedCount: _angular_core.Signal<number>;
     selectedData: _angular_core.Signal<any>;
+    protected readonly selectValueContext: _angular_core.Signal<SelectValueContext<any>>;
+    protected readonly selectValueTemplateReady: _angular_core.Signal<boolean>;
     ngAfterContentInit(): void;
     private _resetOptions;
     ngOnDestroy(): void;
@@ -141,15 +226,38 @@ declare class Select implements ControlValueAccessor, OnDestroy, AfterContentIni
     focus(): void;
     _handleKeydown(event: KeyboardEvent): void;
     _onOptionClick(option: _Option): void;
+    protected onAsyncSearchInput(value: string): void;
+    protected onAsyncContentScroll(event: Event): void;
+    protected retryAsyncLoad(): void;
+    protected asyncOptionContext(option: SelectDataSourceOption): SelectOptionContentContext;
     private _selectOption;
+    private _selectAsyncMultipleOption;
     private _propagateChanges;
     private _setSelectionByValue;
     private _scrollToSelectedOption;
+    private _scrollToAsyncOptionValue;
+    private _scrollOptionElementIntoContainer;
+    private _setScrollTop;
     private _getOptionIndex;
     private _getOptionData;
     private _selectValue;
+    private _loadFirstPage;
+    private _loadNextPage;
+    private _loadAsyncPage;
+    private _normalizeAsyncResult;
+    private _mergeAsyncOptions;
+    private _cacheAsyncSelectedOptions;
+    private _resetAsyncState;
+    private _selectedValues;
+    private _selectedValuesKey;
+    private _viewValueForValue;
+    private _dataForValue;
+    private _displayOptionForValue;
+    private _optionForValue;
+    private _asyncOptionForValue;
+    private _compareValues;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "ngs-select", ["ngsSelect"], { "_id": { "alias": "id"; "required": false; "isSignal": true; }; "_placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "_disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "_required": { "alias": "required"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "hideCheckIcon": { "alias": "hideCheckIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "opened": "opened"; "closed": "closed"; "value": "valueChange"; }, ["selectBody", "options", "optionGroups", "customTrigger", "filterTrigger"], ["ngs-select-trigger", "ngs-filter-trigger", "ngs-select-header", "ngs-select-body", "ngs-optgroup,ngs-option", "*", "ngs-select-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "ngs-select", ["ngsSelect"], { "_id": { "alias": "id"; "required": false; "isSignal": true; }; "_placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "_disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "_required": { "alias": "required"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "hideCheckIcon": { "alias": "hideCheckIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchDebounce": { "alias": "searchDebounce"; "required": false; "isSignal": true; }; "minSearchLength": { "alias": "minSearchLength"; "required": false; "isSignal": true; }; "loadOnOpen": { "alias": "loadOnOpen"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "opened": "opened"; "closed": "closed"; "value": "valueChange"; }, ["selectBody", "projectedOptions", "optionGroups", "customTrigger", "filterTrigger", "optionContentDef", "selectValueDef"], ["ngs-select-trigger", "ngs-filter-trigger", "ngs-select-header", "ngs-select-body", "ngs-optgroup,ngs-option", "*", "ngs-select-footer"], true, never>;
 }
 
 declare class SelectHeader {
@@ -162,4 +270,5 @@ declare class SelectFooter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectFooter, "ngs-select-footer", never, {}, {}, never, ["*"], true, never>;
 }
 
-export { FilterTrigger, FilterTriggerValueDirective, SELECT, Select, SelectBody, SelectChange, SelectFooter, SelectHeader, SelectTrigger, _Select };
+export { FilterTrigger, FilterTriggerValueDirective, SELECT, Select, SelectBody, SelectChange, SelectFooter, SelectHeader, SelectOptionContentDef, SelectTrigger, SelectValueDef, _Select };
+export type { SelectDataSource, SelectDataSourceOption, SelectDataSourceRequest, SelectDataSourceResult, SelectOptionContentContext, SelectValueContext };

package/types/ngstarter-ui-components-toolbar.d.ts

@@ -56,7 +56,7 @@ declare class Toolbar implements AfterViewInit, OnDestroy {
     protected _closeOverflowDialog(): void;
     private _updateOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<Toolbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Toolbar, "ngs-toolbar", ["ngsToolbar"], {}, {}, ["toolbarItems", "navItems", "spacers", "_rows"], ["ngs-toolbar-title,ngs-toolbar-subtitle", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Toolbar, "ngs-toolbar", ["ngsToolbar"], {}, {}, ["toolbarItems", "navItems", "spacers", "_rows"], ["*"], true, never>;
 }
 
 declare class ToolbarNavLink {
@@ -66,9 +66,11 @@ declare class ToolbarNavLink {
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarNavLink, "ngs-toolbar-nav-link,a[ngs-toolbar-nav-link]", ["ngsToolbarNavLink"], { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type ToolbarTitleAppearance = 'none' | 'large';
 declare class ToolbarTitle {
+    appearance: i0.InputSignal<ToolbarTitleAppearance>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarTitle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarTitle, "ngs-toolbar-title", ["ngsToolbarTitle"], {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarTitle, "ngs-toolbar-title", ["ngsToolbarTitle"], { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class ToolbarSubtitle {
@@ -77,3 +79,4 @@ declare class ToolbarSubtitle {
 }
 
 export { Toolbar, ToolbarItem, ToolbarNav, ToolbarNavLink, ToolbarRow, ToolbarSpacer, ToolbarSubtitle, ToolbarTitle };
+export type { ToolbarTitleAppearance };