@dmlibs/dm-cmps 0.0.1

package/types/dmlibs-dm-cmps.d.ts

@@ -0,0 +1,553 @@
+import * as _angular_core from '@angular/core';
+import { InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, OnDestroy } from '@angular/core';
+import { MatSelectChange } from '@angular/material/select';
+import { FormControl } from '@angular/forms';
+import { MatOptionSelectionChange } from '@angular/material/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+
+interface DmCmpsDataSourceSort {
+    direction: 'asc' | 'desc';
+    field: string;
+    sortFn?: (a: any, b: any) => number;
+}
+declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
+    private data;
+    private filteredData;
+    private _resultData;
+    result: _angular_core.WritableSignal<T[]>;
+    private paginationEnabled;
+    private currentPageIndex;
+    private pageSize;
+    private autoPaginationAboveItemsCount;
+    private searchTerm;
+    private speratedSearch;
+    private filterPredicate;
+    private filterByObject;
+    private fieldsToSearchIn;
+    private sortMap;
+    private sortFn;
+    private searchTerms$;
+    private searchDebounceTime;
+    private readonly subscription;
+    /**
+     * builds a new DmCmpsDataSource
+     * @param initialData The data to be used as datasource
+     */
+    constructor(initialData?: T[]);
+    private updateResultData;
+    disconnect(): void;
+    setAutoPaginationAboveItemsCount(count: number): void;
+    applyPagination(pageSize?: number): void;
+    setPageSize(pageSize: number): void;
+    disablePagination(): void;
+    nextPage(): number;
+    previousPage(): number;
+    firstPage(): number;
+    lastPage(): number;
+    getCurrentPageIndex(): number;
+    getTotalPagesCount(): number;
+    setSearchDebounceTime(milliseconds: number): void;
+    setDatasource(newData: T[]): void;
+    private updateResultSignal;
+    search(filterTerm: string): void;
+    private applySearch;
+    setFilterPredicate(predicate: (data: T, filter: string) => boolean): void;
+    setFieldsToSearchIn(fields: string[]): void;
+    setSortFunction(sortFn: ((a: T, b: T) => number) | null): void;
+    private applySorting;
+    sortByFields(sortMap: DmCmpsDataSourceSort[]): void;
+    resetSorting(): void;
+    setFilterByObjectFields(filterObj: Partial<T> | null): void;
+    private applyObjectFilter;
+    applySperatedSearch(enabled: boolean): void;
+}
+interface DmCmpsDataSourceConfig<T = any> {
+    /**
+     * Disconnects the data source and performs any necessary cleanup.
+     */
+    disconnect: () => void;
+    /**
+     * Sets auto pagination threshold.
+     * When the number of items exceeds the given count, pagination will be enabled automatically.
+     * Use -1 to disable auto pagination.
+     *
+     * @param count Number of items threshold
+     * @default 100
+     */
+    setAutoPaginationAboveItemsCount: (count: number) => void;
+    /**
+     * ApplyPagination - Enables pagination with the given page size.
+     *
+     * @param pageSize Number of items per page, optional, default is 10, must be at least 5
+     * @default 10
+     */
+    applyPagination: (pageSize?: number) => void;
+    /**
+     * Sets the page size for pagination.
+     * @param pageSize Number of items per page, must be at least 5
+     */
+    setPageSize: (pageSize: number) => void;
+    /**
+     * Disables pagination.
+     */
+    disablePagination: () => void;
+    /**
+     * Moves to the next page and returns the current page index.
+     * @returns New current page index
+     */
+    nextPage: () => number;
+    /**
+     * Moves to the previous page and returns the current page index.
+     * @returns New current page index
+     */
+    previousPage: () => number;
+    /**
+     * Moves to the first page and returns the current page index.
+     * @returns New current page index
+     */
+    firstPage: () => number;
+    /**
+     * Moves to the last page and returns the current page index.
+     * @returns New current page index
+     */
+    lastPage: () => number;
+    /**
+     * Gets the current page index.
+     * @returns Current page index
+     */
+    getCurrentPageIndex: () => number;
+    /**
+     * Gets the total number of pages.
+     * @returns Total pages count
+     */
+    getTotalPagesCount: () => number;
+    /**
+     * Sets the debounce time for search input.
+     * @param milliseconds Debounce time in milliseconds
+     * @default 300
+     */
+    setSearchDebounceTime: (milliseconds: number) => void;
+    /**
+     * Sets the data source.
+     * @param newData New data array
+     */
+    setDatasource: (newData: T[]) => void;
+    /**
+     * Performs a search with the given filter term.
+     * @param filterTerm The term to filter the data
+     */
+    search: (filterTerm: string) => void;
+    /**
+     * Sets the filter predicate function.
+     * @param predicate Function to filter data items
+     *
+     * @default - A default predicate that checks if the item includes the filter term in any of its non Object properties.
+     */
+    setFilterPredicate: (predicate: (data: T, filter: string) => boolean) => void;
+    /**
+     * Sets the fields to search in.
+     * @param fields Array of field names to search in
+     *
+     * @default - All non Object properties of the data items.
+     */
+    setFieldsToSearchIn: (fields: string[]) => void;
+    /**
+     * Sets a custom sort function.
+     * @param sortFn Custom sort function
+     *
+     * @default - No custom sort function.
+     */
+    setSortFunction: (sortFn: ((a: T, b: T) => number) | null) => void;
+    /**
+     * Sorts the data by the given fields and directions.
+     * @param sortMap
+     * @default - No sorting applied.
+     */
+    sortByFields: (sortMap: DmCmpsDataSourceSort[]) => void;
+    /**
+     * Resets any applied sorting.
+     */
+    resetSorting: () => void;
+    /**
+     * Sets filter by object fields.
+     * @param filterObj Object with fields and values to filter by
+     * @default null (no filtering)
+     */
+    setFilterByObjectFields: (filterObj: Partial<T> | null) => void;
+    /**
+     * Enables or disables separated search.
+     * When enabled, the search term is split by spaces and each term is searched separately.
+     * @param enabled true to enable separated search, false to disable
+     * @default false
+     */
+    applySperatedSearch: (enabled: boolean) => void;
+}
+
+/**
+ * Public API for <dm-mat-select>
+ *
+ * This interface describes all inputs, outputs, and configuration options.
+ * It is used only for documentation and IntelliSense — not for runtime behavior.
+ */
+interface DmMatSelectConfig<T = any> {
+    /**
+     * CSS classes applied to the mat-form-field element.
+     * ```
+     * type string
+     * ```
+     *
+     */
+    formFieldClass?: InputSignal<string>;
+    /**
+     * CSS classes applied to the wrapper div element.
+     * ```
+     * type string
+     * ```
+     *
+     */
+    wrapperClass?: InputSignal<string>;
+    /**
+     * Appearance style of the select component.
+     * ```
+     * type 'fill' | 'outline'
+     * ```
+     *
+     * @default fill
+     */
+    appearance?: InputSignal<'fill' | 'outline'>;
+    /**
+     * Enables multiple selection mode.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    multiple?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enables a "Select All" option in the dropdown.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    selectAllEnabled?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Text of the "Select All" checkbox.
+     * ```
+     * type string
+     * ```
+     *
+     * @default 'בחר הכל'
+     */
+    selectAllLabel?: InputSignal<string>;
+    /**
+     *  Label shown in the form field.
+     * ```
+     * type string
+     * ```
+     *
+     *  @default ''
+     */
+    label?: InputSignal<string>;
+    /**
+     *  The list of items shown in the dropdown.
+     * ```
+     * type T[]
+     * ```
+     *
+     * @default []
+     */
+    options: InputSignal<T[]>;
+    /**
+     *  The property to use as the unique identifier of each item.
+     * ```
+     * type keyof T
+     * ```
+     *
+     * @default '_id'
+     */
+    optionValueKey?: InputSignal<keyof T>;
+    /**
+     *  The property to use as the display label.
+     * ```
+     * type keyof T
+     * ```
+     *
+     * @default 'name'
+     */
+    optionLabelKey?: InputSignal<keyof T>;
+    /**
+     *  Enables searching inside the dropdown.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    searchable?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Function to filter options based on search input.
+     * ```
+     * type ((option: T, filter: string) => boolean) | null
+     * ```
+     *
+     * @default null
+     */
+    filterPredicate?: InputSignal<((option: T, filter: string) => boolean) | null>;
+    /**
+     *  Marks field as required.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    required?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     *  Disables the component.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    disabled?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     *  Custom error message.
+     * ```
+     * type string | null
+     * ```
+     *
+     * @default null
+     */
+    error?: InputSignal<string | null>;
+    /**
+     *  Placeholder text for the search input.
+     * ```
+     * type string
+     * ```
+     *
+     * @default 'חפש...'
+     */
+    searchPlaceholder?: InputSignal<string>;
+    /**
+     * Enables an empty option in the select dropdown.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    emptyOption?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Label for the empty option.
+     * ```
+     * type string
+     * ```
+     *
+     * @default 'ללא'
+     */
+    emptyOptionLabel?: InputSignal<string>;
+    /**
+     * Value for the empty option.
+     * ```
+     * type null | string | number
+     * ```
+     *
+     * @default null
+     */
+    emptyOptionValue?: InputSignal<T | null>;
+    /**
+     * Function to format option names for display.
+     * ```
+     * type (option: T) => string
+     * ```
+     *
+     */
+    optionNameFormat?: InputSignal<((option: T) => string) | null>;
+    /**
+     *  Width of the select panel.
+     * To set the panel width to match the trigger width, use 'auto'.
+     * To set a custom width, provide a CSS width value (e.g., '300px', '50%', etc.).
+     * To have the panel width adjust to its content, set to null or empty string.
+     * ```
+     * type string | null
+     * ```
+     *
+     * @default 'auto'
+     */
+    panelWidth?: InputSignal<string | null>;
+    /**\
+     *  Custom CSS classes applied to the select panel.
+     * Can be a string, array of strings, Set of strings, or an object with class names as keys and boolean values.
+     * Accepts the same values as ngClass.
+     * ```
+     * type string | string[] | Set<string> | { [key: string]: any }
+     * ```
+     *
+     * @default ''
+     */
+    panelClass?: InputSignal<string | string[] | Set<string> | {
+        [key: string]: any;
+    }>;
+    /**\
+     *  Background color for the search section.
+     * Uses CSS variable '--dm-mat-select-search-section-bg-color'.
+     * ```
+     * type string | null
+     * ```
+     *
+     * @default '#faf9fd'
+     */
+    searchSectionBackgroundColor?: InputSignal<string | null>;
+    /**
+     *  Sort selected items at top of the list.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    sortBySelectedOnTop?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * A signal that holds the selected value(s) of the select component.
+     * ```
+     * type ModelSignal<DmMatSelectOutput<T>>
+     * ```
+     *
+     * @default null
+     */
+    value?: ModelSignal<DmMatSelectOutput<T>>;
+    /**
+     * FormControl to bind to the select component.
+     * ```
+     * type FormControl<DmMatSelectOutput<T>> | null
+     * ```
+     *
+     * @default null
+     */
+    formControl?: InputSignal<FormControl<DmMatSelectOutput<T>> | null>;
+    /**
+     * Event emitted when the selection changes.
+     * ```
+     * type OutputEmitterRef<MatSelectChange<DmMatSelectOutput<T>>>
+     * ```
+     *
+     *
+     */
+    selectionChange?: OutputEmitterRef<MatSelectChange<DmMatSelectOutput<T>>>;
+    /**
+     * Icon name to display in the select trigger.
+     * Can be a Material icon name or a Bootstrap icon html (like <i class="bi bi-name"></i>).
+     * ```
+     * type string | null
+     * ```
+     *
+     * @default null
+     */
+    icon?: InputSignal<string | null>;
+    /**
+     * Label to show in disabled option when there is no data to display.
+     * ```
+     * type string
+     * ```
+     *
+     * @default 'אין נתונים להצגה'
+     */
+    noDataLabel?: InputSignal<string>;
+    /**
+     * Cleans the search input after selecting an option.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default false
+     */
+    clearSearchAfterSelect?: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Tooltip text for the clear search button.
+     * ```
+     * type string
+     * ```
+     * @default 'נקה חיפוש'
+     */
+    clearSearchButtonTooltip?: InputSignal<string>;
+    /**
+     * Automatically focuses the search input when the panel opens.
+     * ```
+     * type boolean
+     * ```
+     *
+     * @default true
+     */
+    focusSearchInputOnPanelOpen?: InputSignalWithTransform<boolean, unknown>;
+}
+
+type DmMatSelectOutput<T> = T | T[] | string | string[] | number | number[] | null;
+type DmMatSelectOption<T> = T & {
+    __dmMatSelectFormattedName: string;
+};
+declare class DmMatSelect<T = any> implements DmMatSelectConfig<T>, OnDestroy {
+    formFieldClass: _angular_core.InputSignal<string>;
+    wrapperClass: _angular_core.InputSignal<string>;
+    appearance: _angular_core.InputSignal<"fill" | "outline">;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selectAllEnabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selectAllLabel: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string>;
+    options: _angular_core.InputSignal<T[]>;
+    optionValueKey: _angular_core.InputSignal<keyof T>;
+    optionLabelKey: _angular_core.InputSignal<keyof T>;
+    searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    error: _angular_core.InputSignal<string | null>;
+    searchPlaceholder: _angular_core.InputSignal<string>;
+    emptyOption: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    emptyOptionLabel: _angular_core.InputSignal<string>;
+    emptyOptionValue: _angular_core.InputSignal<T | null>;
+    optionNameFormat: _angular_core.InputSignal<((option: T) => string) | null>;
+    private _optionNameFormat;
+    protected datasource: _angular_core.WritableSignal<DmCmpsDataSource<DmMatSelectOption<T>>>;
+    value: _angular_core.ModelSignal<DmMatSelectOutput<T>>;
+    formControl: _angular_core.InputSignal<FormControl<DmMatSelectOutput<T>> | null>;
+    panelWidth: _angular_core.InputSignal<string | null>;
+    panelClass: _angular_core.InputSignal<string | string[] | Set<string> | {
+        [key: string]: any;
+    }>;
+    searchSectionBackgroundColor: _angular_core.InputSignal<string | null>;
+    sortBySelectedOnTop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private internalControl;
+    protected control: _angular_core.Signal<FormControl<DmMatSelectOutput<T>>>;
+    selectionChange: _angular_core.OutputEmitterRef<MatSelectChange<DmMatSelectOutput<T>>>;
+    icon: _angular_core.InputSignal<string | null>;
+    protected isBootstrapIcon: _angular_core.Signal<boolean>;
+    noDataLabel: _angular_core.InputSignal<string>;
+    clearSearchAfterSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    clearSearchButtonTooltip: _angular_core.InputSignal<string>;
+    focusSearchInputOnPanelOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    filterPredicate: _angular_core.InputSignal<((option: T, filterText: string) => boolean) | null>;
+    private _filterPredicate;
+    simpleArray: _angular_core.Signal<boolean>;
+    private selectedOptionsIdsSet;
+    protected filterText: _angular_core.ModelSignal<string>;
+    protected checkIfAllSelected: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
+    setOptionsFormattedNames(options: DmMatSelectOption<T>[]): void;
+    private runEffects;
+    protected applyFilter(event: KeyboardEvent): void;
+    protected selectionChangeHandler(event: MatSelectChange<T | T[] | null>): void;
+    private getOptionValue;
+    protected onSelectionChangeHandler(event: MatOptionSelectionChange, option: T | null): void;
+    protected selectAllChange(event: MatCheckboxChange): void;
+    protected resetSearch(): void;
+    protected onPanelOpened(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmMatSelect<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmMatSelect<any>, "dm-mat-select", never, { "formFieldClass": { "alias": "formFieldClass"; "required": false; "isSignal": true; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAllEnabled": { "alias": "selectAllEnabled"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionValueKey": { "alias": "optionValueKey"; "required": false; "isSignal": true; }; "optionLabelKey": { "alias": "optionLabelKey"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyOption": { "alias": "emptyOption"; "required": false; "isSignal": true; }; "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; "isSignal": true; }; "emptyOptionValue": { "alias": "emptyOptionValue"; "required": false; "isSignal": true; }; "optionNameFormat": { "alias": "optionNameFormat"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "searchSectionBackgroundColor": { "alias": "searchSectionBackgroundColor"; "required": false; "isSignal": true; }; "sortBySelectedOnTop": { "alias": "sortBySelectedOnTop"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; "isSignal": true; }; "clearSearchAfterSelect": { "alias": "clearSearchAfterSelect"; "required": false; "isSignal": true; }; "clearSearchButtonTooltip": { "alias": "clearSearchButtonTooltip"; "required": false; "isSignal": true; }; "focusSearchInputOnPanelOpen": { "alias": "focusSearchInputOnPanelOpen"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; "filterText": "filterTextChange"; }, never, ["[dm-mat-select-suffix]"], true, never>;
+}
+
+export { DmCmpsDataSource, DmMatSelect };
+export type { DmCmpsDataSourceSort };