@bootkit/ng0 0.0.0-alpha.17 → 0.0.0-alpha.19

package/README.md

@@ -1,2 +1,2 @@
-# NG0
-Angular+Bootstrap Component Library
+# NG0
+Angular+Bootstrap Component Library

package/common/index.d.ts

@@ -1,9 +1,15 @@
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
 
-type Placement = 'start' | 'end' | 'top' | 'bottom';
-type Alignment = 'start' | 'center' | 'end';
 declare const RTL: InjectionToken<boolean>;
+/**
+ * List item interface.
+ */
+interface SelectOption {
+    id: string;
+    value: any;
+    show?: boolean;
+}
 
 /**
  * Represents a claim object that can contain multiple claims.
@@ -23,6 +29,8 @@ interface ClaimObject {
  */
 type ClaimLike = string | ClaimObject;
 
+type Placement = 'start' | 'end' | 'top' | 'bottom';
+type Alignment = 'start' | 'center' | 'end';
 /**
  * Flips the placement direction.
  * @param placement The placement direction to flip.
@@ -64,5 +72,53 @@ interface MenuItem {
  */
 declare function toObservable<T>(value: T | Observable<T> | Promise<T>): Observable<T>;
 
-export { RTL, flipPlacement, formatString, toObservable };
-export type { Alignment, ClaimLike, ClaimObject, MenuItem, Placement };
+/**
+ * Creates an array of numbers within a specified range.
+ * @param start The starting number of the range (inclusive).
+ * @param end The ending number of the range (inclusive).
+ * @returns An array of numbers within the specified range.
+ */
+declare function numberArray(start: number, end: number): number[];
+
+declare function getEnumValues(enumClass: Record<string, string | number>): Array<string | number>;
+
+declare abstract class _IdGenerator {
+    private static _idCounter;
+    static next(): number;
+}
+/**
+ * Type definition for an ID generator function.
+ */
+type IdGenerator = (param?: any) => string;
+/**
+ * Creates a sequential ID generator function with an optional prefix.
+ * @param prefix Optional prefix for the generated IDs.
+ * @returns A function that generates sequential IDs with the given prefix.
+ */
+declare function sequentialIdGenerator(prefix?: string): IdGenerator;
+
+/**
+ * CSS class type which can be a string, array of strings, set of strings, or an object with class names as keys.
+ */
+type CssClass = string | string[] | Set<string> | {
+    [klass: string]: any;
+} | null | undefined;
+/**
+ * A function that takes an item and returns a CssClass.
+ * @param item The item to get the CSS class for.
+ * @returns The CSS class for the item.
+ */
+type CssClassGetter = (item: any) => CssClass;
+/**
+ * A type that represents a CSS class or a function that returns a CSS class.
+ */
+type CssClassLike = CssClass | CssClassGetter | null | undefined;
+/**
+ * Converts a CssClassLike to a CssClassGetter function.
+ * @param v The CssClassLike to convert.
+ * @returns A function that returns the desired CSS class.
+ */
+declare function CssClassAttribute(v: CssClassLike): CssClassGetter;
+
+export { CssClassAttribute, RTL, _IdGenerator, flipPlacement, formatString, getEnumValues, numberArray, sequentialIdGenerator, toObservable };
+export type { Alignment, ClaimLike, ClaimObject, CssClass, CssClassGetter, CssClassLike, IdGenerator, MenuItem, Placement, SelectOption };

package/components/list/index.d.ts

@@ -0,0 +1,127 @@
+import * as _bootkit_ng0_common from '@bootkit/ng0/common';
+import { CssClassLike, IdGenerator } from '@bootkit/ng0/common';
+import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
+import * as _bootkit_ng0_data from '@bootkit/ng0/data';
+import { DataSource, DataSourceLike, FilterPredicate } from '@bootkit/ng0/data';
+import * as _angular_core from '@angular/core';
+import { OnInit, ElementRef, TemplateRef, Renderer2, DestroyRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+interface ListItem {
+    id: string;
+    value: any;
+    selected?: boolean;
+    disabled?: boolean;
+    filtered?: boolean;
+}
+
+/**
+ * Select component that allows users to choose an option from a dropdown list.
+ */
+declare class ListComponent implements OnInit, ControlValueAccessor {
+    protected _el: ElementRef<HTMLDivElement>;
+    private _renderer;
+    private _destroyRef;
+    private _document;
+    private _ls;
+    private _changeDetector;
+    protected _value: _angular_core.WritableSignal<any>;
+    private _onChangeCallback;
+    private _onTouchedCallback;
+    protected readonly _items: _angular_core.WritableSignal<ListItem[]>;
+    protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly _activeOptionIndex: _angular_core.WritableSignal<number>;
+    protected _itemTemplate?: TemplateRef<any>;
+    /**
+     * The data source for the select component.
+     * This can be an array of data, a function that returns an observable of data,
+     * or an instance of DataSource.
+     */
+    readonly source: _angular_core.InputSignalWithTransform<DataSource<any>, DataSourceLike<any>>;
+    /**
+     * Indicates whether multi selection is enabled or not.
+     */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicates whether to show selection indicator (checkbox/radio) next to each item.
+     * Default is false.
+     */
+    readonly showIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+    * A custom comparer function or the name of a field for comparing two objects.
+    */
+    readonly compareBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.BooleanValueComparer, _bootkit_ng0_data.BooleanValueComparerLike>;
+    /**
+     * Custom format function to convert an item to a string for display.
+     * Default converts the item to a string using its toString method.
+     */
+    readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ValueFormatterFunction, _bootkit_ng0_localization.ValueFormatterLike>;
+    /**
+     * Custom value extractor function to extract the value of any object while writing values.
+     */
+    readonly writeValueBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
+    /**
+     * A custom filter predicate function to filter items based on a search string.
+     * Default checks if the item's string representation contains the filter string (case-insensitive).
+     * The filter predicate can be a function or a string representing the property name to filter.
+     */
+    readonly filterBy: _angular_core.InputSignalWithTransform<FilterPredicate, _bootkit_ng0_data.FilterPredicateLike>;
+    /**
+     * CSS class or classes to apply to the list container.
+     * Default is undefined.
+     */
+    readonly itemClass: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.CssClassGetter, CssClassLike>;
+    readonly focus: _angular_core.InputSignal<"none" | "roving" | "activeDescendant">;
+    readonly idGenerator: _angular_core.InputSignal<IdGenerator | undefined>;
+    constructor(_el: ElementRef<HTMLDivElement>, _renderer: Renderer2, _destroyRef: DestroyRef);
+    ngOnInit(): void;
+    /**
+     * Sets an option as active
+     */
+    active(index: number): void;
+    /**
+     * Filters the list items based on the provided criteria.
+     * @param params The filter parameters to apply.
+     * @returns void
+     */
+    filter(...params: any[]): void;
+    /**
+     * Clears any applied filters and shows all items in the list.
+     * @returns void
+     */
+    clearFilter(): void;
+    /**
+     * Scrolls the item at the specified index into view within the dropdown list.
+     * @param index The index of the item to scroll into view.
+     * @param position The vertical alignment of the item after scrolling.
+     *                 Can be 'start', 'center', 'end', or 'nearest'.
+     *                 Default is 'nearest'.
+     * @param behavior The scrolling behavior.
+     */
+    scrollItemIntoView(index: number, position?: ScrollLogicalPosition, behavior?: ScrollBehavior): void;
+    /**
+     * Toggles the selection of an option by index
+     */
+    toggleSelection(index: number): void;
+    writeValue(v: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    protected _onKeydown(e: KeyboardEvent, firedByFilter?: boolean): void;
+    private _loadItems;
+    private _listenToDataSourceChanges;
+    private _insertItems;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showIndicator": { "alias": "showIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeValueBy": { "alias": "writeValueBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "itemClass": { "alias": "itemClass"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "idGenerator": { "alias": "idGenerator"; "required": false; "isSignal": true; }; }, {}, ["_itemTemplate"], never, true, never>;
+}
+
+/**
+ * List module.
+ */
+declare class ListModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ListModule, never, [typeof ListComponent], [typeof ListComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<ListModule>;
+}
+
+export { ListComponent, ListModule };

package/components/select/index.d.ts

@@ -0,0 +1,120 @@
+import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
+import * as _bootkit_ng0_data from '@bootkit/ng0/data';
+import { DataSource, DataSourceLike, FilterPredicate } from '@bootkit/ng0/data';
+import * as _angular_core from '@angular/core';
+import { OnInit, ElementRef, TemplateRef, Renderer2, DestroyRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { FlexibleConnectedPositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
+import { SelectOption } from '@bootkit/ng0/common';
+
+/**
+ * Select component that allows users to choose an option from a dropdown list.
+ */
+declare class SelectComponent implements OnInit, ControlValueAccessor {
+    protected _el: ElementRef<HTMLDivElement>;
+    private _renderer;
+    private _destroyRef;
+    private _viewportRuler;
+    private _overlay;
+    private _document;
+    private _ls;
+    private _changeDetector;
+    private _resizeObserver?;
+    private _resizeObserverInitialized;
+    private _viewpoerRulerSubscription?;
+    protected _value: _angular_core.WritableSignal<any>;
+    private _filterElementRef?;
+    private _onChangeCallback;
+    private _onTouchedCallback;
+    protected readonly _options: _angular_core.WritableSignal<SelectOption[]>;
+    protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly _selectedOptionIndex: _angular_core.WritableSignal<number>;
+    protected readonly _activeOptionIndex: _angular_core.WritableSignal<number>;
+    protected _optionTemplate?: TemplateRef<any>;
+    protected _positionStrategy: FlexibleConnectedPositionStrategy;
+    protected _scrollStrategy: ScrollStrategy;
+    /**
+     * The data source for the select component.
+     * This can be an array of data, a function that returns an observable of data,
+     * or an instance of DataSource.
+     */
+    readonly source: _angular_core.InputSignalWithTransform<DataSource<any>, DataSourceLike<any>>;
+    /**
+     * Indicates whether the dropdown is open or closed.
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * Custom compare function to determine equality between two items.
+     * Default is a simple equality check.
+     */
+    /**
+     * Custom value extractor function to extract the value of any object.
+     */
+    readonly extractBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_data.ValueExtractor, _bootkit_ng0_data.ValueExtractorLike>;
+    /**
+     * Custom format function to convert an item to a string for display.
+     * Default converts the item to a string using its toString method.
+     */
+    readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ValueFormatterFunction, _bootkit_ng0_localization.ValueFormatterLike>;
+    /**
+     * Indicates whether the dropdown is filterable.
+     */
+    readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Placeholder text for the filter input field.
+     */
+    readonly filterPlaceholder: _angular_core.InputSignal<string>;
+    /**
+     * Custom filter function to filter items based on a filter value.
+     * Default checks if the item contains the filter value (case-insensitive).
+     */
+    readonly filterBy: _angular_core.InputSignal<FilterPredicate>;
+    constructor(_el: ElementRef<HTMLDivElement>, _renderer: Renderer2, _destroyRef: DestroyRef);
+    ngOnInit(): void;
+    private _handleDataSourceChange;
+    /**
+     * Selects an option by index
+     */
+    protected _selectByIndex(index: number): void;
+    isSelected(value: any): boolean;
+    /**
+     * Sets an option as active
+     */
+    active(index: number): void;
+    /**
+     * Scrolls the item at the specified index into view within the dropdown list.
+     * @param index The index of the item to scroll into view.
+     * @param position The vertical alignment of the item after scrolling.
+     *                 Can be 'start', 'center', 'end', or 'nearest'.
+     *                 Default is 'nearest'.
+     * @param behavior The scrolling behavior.
+     */
+    scrollItemIntoView(index: number, position?: ScrollLogicalPosition, behavior?: ScrollBehavior): void;
+    protected _insertOptions(index?: number, ...items: any[]): void;
+    writeValue(obj: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    protected _onKeydown(e: KeyboardEvent, firedByFilter?: boolean): void;
+    protected _onFilterBlur(): void;
+    protected _filterItems(filter: string): void;
+    protected _onOverlayAttach(): void;
+    protected _onOverlayDetach(): void;
+    private _getNextOptionId;
+    private _listenToResizeEvents;
+    private _unlistenFromResizeEvents;
+    private _onHostClick;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ng0-select", ["ng0Select"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "extractBy": { "alias": "extractBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["_optionTemplate"], never, true, never>;
+}
+
+/**
+ * Select module.
+ */
+declare class SelectModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SelectModule, never, [typeof SelectComponent], [typeof SelectComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SelectModule>;
+}
+
+export { SelectComponent, SelectModule };

package/components/table/index.d.ts

@@ -66,31 +66,87 @@ type TableCellType = 'text' | 'number' | 'currency' | 'date' | 'time' | {
 };
 
 declare class TableColumnDirective implements OnInit {
+    /**
+     * The field in the data source to bind to. If not set, the column will not display any data.
+     */
     field: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The title of the column. This will be displayed in the header row.
+     */
     title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Text to display in the cell if the value is null or undefined.
+     */
     emptyCellText: _angular_core.InputSignal<string | undefined>;
     /**
      * Type of the table cell.
      */
     type: _angular_core.InputSignal<TableCellType>;
+    /**
+     * CSS class(es) to apply to the table cell.
+     */
     cellClass: _angular_core.InputSignal<string | {
         [klass: string]: any;
     } | string[] | null | undefined>;
-    /** Deprecated */
-    bold: _angular_core.InputSignal<boolean>;
-    shrink: _angular_core.InputSignal<boolean>;
-    filterable: _angular_core.InputSignal<boolean>;
+    /**
+     * @deprecated Use `cellClass` instead.
+     */
+    bold: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @deprecated Use `cellClass` instead.
+     */
+    shrink: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * If true, the column will support filtering.
+     */
+    filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The current filter value of the column.
+     */
     filterValue: _angular_core.ModelSignal<any>;
+    /**
+     * The field to use for filtering. If not set, the `field` property will be used.
+     * @deprecated Use `fieldName` instead.
+     */
     filterField: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The current filter operator of the column.
+     */
     filterOperator: _angular_core.ModelSignal<string | undefined>;
+    /**
+     * The list of filter operators to show in the filter dropdown. If not set, a default list will be used based on the column type.
+     */
     filterOperators: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * If true, the filter operators dropdown will be shown.
+     */
     showFilterOperators: _angular_core.WritableSignal<boolean>;
+    /**
+     * The name of the field in the data source. If not set, the `field` property will be used.
+     */
+    fieldName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * If true, the column will support sorting.
+     */
+    sortable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The current sort direction of the column.
+     */
+    sortDirection: _angular_core.ModelSignal<"none" | "asc" | "desc">;
     template?: TemplateRef<any>;
     constructor();
     ngOnInit(): void;
+    /**
+     * Get the list of filter operators to show in the filter dropdown.
+     */
     getFilterOperators(): string[];
+    /**
+     * Toggle the sort direction of the column.
+     * @returns void
+     */
+    toggleSortDirection(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableColumnDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyCellText": { "alias": "emptyCellText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterField": { "alias": "filterField"; "required": false; "isSignal": true; }; "filterOperator": { "alias": "filterOperator"; "required": false; "isSignal": true; }; "filterOperators": { "alias": "filterOperators"; "required": false; "isSignal": true; }; }, { "filterValue": "filterValueChange"; "filterOperator": "filterOperatorChange"; }, ["template"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyCellText": { "alias": "emptyCellText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterField": { "alias": "filterField"; "required": false; "isSignal": true; }; "filterOperator": { "alias": "filterOperator"; "required": false; "isSignal": true; }; "filterOperators": { "alias": "filterOperators"; "required": false; "isSignal": true; }; "fieldName": { "alias": "fieldName"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "filterValue": "filterValueChange"; "filterOperator": "filterOperatorChange"; "sortDirection": "sortDirectionChange"; }, ["template"], never, true, never>;
 }
 
 declare class TableDetailRowDirective {
@@ -119,16 +175,16 @@ declare class TableComponent implements OnInit, AfterContentInit, OnDestroy {
      * If true, the table will automatically load data when initialized.
      * This is useful for tables that need to display data immediately without user interaction.
      */
-    autoLoad: _angular_core.InputSignal<boolean>;
+    autoLoad: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * If true, the table will show row numbers.
      * This will add a column to the left of the table with the row numbers.
      */
-    showRowNumbers: _angular_core.InputSignal<boolean>;
+    showRowNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * If true, the table will show the header row.
      */
-    showHeader: _angular_core.InputSignal<boolean>;
+    showHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * If true, the table will support pagination.
      * If false, the table will load all records at once.
@@ -138,7 +194,7 @@ declare class TableComponent implements OnInit, AfterContentInit, OnDestroy {
      * If true, the table will support sorting.
      * This will add a sort icon to each column header.
      */
-    sortable: _angular_core.InputSignal<boolean>;
+    sortable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * The CSS class to apply to the table element.
      * This can be used to apply custom styles to the table.
@@ -161,7 +217,7 @@ declare class TableComponent implements OnInit, AfterContentInit, OnDestroy {
      * If true, the table will support filtering.
      * This will add a filter input to each column header.
      */
-    filterable: _angular_core.InputSignal<boolean>;
+    filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * The indicator to show while the table is loading data for the first time.
      */