@bootkit/ng0 0.0.0-alpha.23 → 0.0.0-alpha.25

package/common/index.d.ts

@@ -1,4 +1,5 @@
-import { InjectionToken } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, TrackByFunction } from '@angular/core';
 import { Observable } from 'rxjs';
 
 declare const RTL: InjectionToken<boolean>;
@@ -91,14 +92,27 @@ declare function getEnumValues(enumClass: Record<string, string | number>): Arra
 
 /**
  * Type definition for an ID generator function.
+ * @param item The item for which the ID is to be generated.
+ * @returns A string representing the generated ID.
  */
-type IdGenerator = (param?: any) => string;
+type IdGenerator = (item: any) => string;
+/**
+ * Type definition for an ID generator which can be a function or a string representing the property name to extract the ID from.
+ */
+type IdGeneratorLike = IdGenerator | string;
 /**
  * Creates a sequential ID generator function with an optional prefix.
+ * This function generates unique IDs by incrementing a counter each time it is called.
  * @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;
+/**
+ * Converts an IdGeneratorLike to an IdGenerator function.
+ * @param v The ID generator to convert.
+ * @returns An IdGenerator function.
+ */
+declare function IdGeneratorAttribute(v: IdGeneratorLike): IdGenerator;
 
 /**
  * CSS class type which can be a string, array of strings, set of strings, or an object with class names as keys.
@@ -238,5 +252,39 @@ declare const noopFilter: FilterPredicate;
  */
 declare function filterPredicateAttribute(v: FilterPredicateLike): FilterPredicate;
 
-export { CssClassAttribute, RTL, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, valueWriterAttribute };
-export type { Alignment, ClaimLike, ClaimObject, Comparer, ComparerLike, CssClass, CssClassGetter, CssClassLike, EqualityComparer, EqualityComparerLike, FilterPredicate, FilterPredicateLike, IdGenerator, MenuItem, Placement, SelectOption, ValueWriter, ValueWriterLike };
+/**
+ * An item tracker that can be either a TrackByFunction or a string property name.
+ */
+type TrackByLike = TrackByFunction<any> | string;
+/**
+ * A trackBy function that tracks items by their index.
+ */
+declare const trackByIndex: TrackByFunction<any>;
+/**
+ * A trackBy function that tracks items by the item itself.
+ */
+declare const trackByItem: TrackByFunction<any>;
+/**
+ * Converts a TrackByLike to a TrackByFunction.
+ * @param v The item tracker to convert.
+ * @returns A TrackByFunction.
+ */
+declare function TrackByAttribute(v: TrackByLike): TrackByFunction<any>;
+
+/**
+ * IfDirective is a structural directive that conditionally includes or excludes a template
+ * based on the boolean value of the `show` input property.
+ *
+ */
+declare class IfDirective {
+    private readonly _templateRef;
+    private _vcr;
+    private _viewRef?;
+    readonly show: i0.InputSignal<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<IfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IfDirective, "[ng0If]", ["ng0If"], { "show": { "alias": "ng0If"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
+export type { Alignment, ClaimLike, ClaimObject, Comparer, ComparerLike, CssClass, CssClassGetter, CssClassLike, EqualityComparer, EqualityComparerLike, FilterPredicate, FilterPredicateLike, IdGenerator, IdGeneratorLike, MenuItem, Placement, SelectOption, TrackByLike, ValueWriter, ValueWriterLike };

package/components/list/index.d.ts

@@ -1,29 +1,88 @@
 import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
 import * as _bootkit_ng0_common from '@bootkit/ng0/common';
-import { FilterPredicate, IdGenerator } from '@bootkit/ng0/common';
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
 import { DataSource, DataSourceLike } from '@bootkit/ng0/data';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
- * Select component that allows users to choose an option from a dropdown list.
+ * ListItemComponent represents an individual item within a ListComponent.
+ */
+declare class ListItemComponent {
+    /**
+     * The value associated with the item. This can be of any type.
+     */
+    readonly value: _angular_core.InputSignal<any>;
+    /**
+     * The id of the item.
+     */
+    readonly id: _angular_core.InputSignal<any>;
+    /**
+     * Reference to the parent list component
+     */
+    readonly list: ListComponent;
+    /**
+     * Reference to the host element
+     */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /**
+     * Indicates whether the item is active.
+     * @returns True if the item is active, false otherwise.
+     */
+    isActive(): boolean;
+    /**
+     * Indicates whether the item is selected.
+     * @returns True if the item is selected, false otherwise.
+     */
+    isSelected(): boolean;
+    /**
+     * Selects the item.
+     * @returns
+     */
+    select(): void;
+    /**
+     * Deselects the item.
+     * @returns
+     */
+    deselect(): void;
+    /**
+     * Toggles the selection state of the item.
+     * @returns void
+     */
+    toggle(): void;
+    /**
+     * Scrolls the item into view within its parent container.
+     * @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.
+     */
+    scrollIntoView(position?: ScrollLogicalPosition, behavior?: ScrollBehavior): void;
+    /**
+     * Sets focus on the item.
+     */
+    focus(): void;
+    private _getTabIndex;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ng0-list-item", ["ng0ListItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * ListComponent is a versatile component that displays a list of items with support for single or multiple selection,
+ * custom item templates, filtering, and keyboard navigation.
  */
 declare class ListComponent implements ControlValueAccessor {
-    private _document;
-    private _ls;
-    private _renderer;
-    private _destroyRef;
+    private _localizationService;
     private _changeDetector;
     private _value;
     private _changeCallback?;
     private _touchCallback?;
-    private _selectedIndices;
-    protected readonly _items: _angular_core.WritableSignal<ListItem[]>;
+    protected readonly _sourceItems: _angular_core.WritableSignal<any[]>;
+    private readonly _selectedValues;
+    protected readonly _activeItem: _angular_core.WritableSignal<ListItemComponent | undefined>;
+    private readonly _visibleItems;
     protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
-    protected readonly _activeOptionIndex: _angular_core.WritableSignal<number>;
-    protected _itemTemplate?: TemplateRef<any>;
-    private _ariaActiveDescendant;
+    itemTemplate?: TemplateRef<any>;
     /**
      * Reference to the host element
      */
@@ -61,7 +120,22 @@ declare class ListComponent implements ControlValueAccessor {
      * 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_common.FilterPredicateLike>;
+    readonly filterBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.FilterPredicate, _bootkit_ng0_common.FilterPredicateLike>;
+    /**
+     * A function that uniquely identifies each item in the list.
+     * If set to a function, it will be called with the index and item as arguments to generate the unique id.
+     * If set to a string, it will be used as the property name to extract the unique id from each item.
+     * Two predifined trackBy options are available:
+     * - '@index': uses the index of the item as its unique id.
+     * - '@item': uses the item itself as its unique id.
+     * @example
+     * trackBy="@index"
+     * trackBy="@item"
+     * trackBy="objectFieldName"
+     * [trackBy]="customTrackByFunction"
+     * @default trackByIndex
+     */
+    readonly trackBy: _angular_core.InputSignalWithTransform<_angular_core.TrackByFunction<any>, _bootkit_ng0_common.TrackByLike>;
     /**
      * CSS class or classes to apply to the list container.
      * Default is undefined.
@@ -76,131 +150,77 @@ declare class ListComponent implements ControlValueAccessor {
      */
     readonly focus: _angular_core.InputSignal<"none" | "roving" | "activeDescendant">;
     /**
-     * Custom id generator function to generate unique ids for each item.
-     * Default generates sequential ids with the prefix 'ng0-list-item-'.
-     * If set to undefined, no ids will be generated.
-     * @default sequentialIdGenerator('ng0-list-item-')
+     * A function that generates unique ids for each item in the list.
+     * If set to a function, it will be called with the item as an argument to generate the id.
+     * If set to undefined, no ids will be generated for the items.
+     * @default undefined
      */
-    readonly idGenerator: _angular_core.InputSignal<IdGenerator>;
+    readonly idGenerator: _angular_core.InputSignalWithTransform<_bootkit_ng0_common.IdGenerator | undefined, _bootkit_ng0_common.IdGeneratorLike>;
     /**
      * Event emitted when the selection state of an item changes by user interaction.
      */
     readonly selectionChange: EventEmitter<ListSelectionChangeEvent>;
+    _uuid: number;
     constructor();
     /**
-     * Gets the items of the list component.
-     * @returns A readonly array of the items in the list.
-     */
-    items(): ReadonlyArray<ListItem>;
-    /**
-     * Sets an option as active
-     * @param index The index of the option to set as active.
-     * @param scrollIntoView Whether to scroll the active option into view. Default is true.
-     * @returns void
-     */
-    active(index: number, scrollIntoView?: boolean): void;
-    /**
-     * Selects an option by index
-     * @param index The index of the option to select.
-     * @returns void
+     * Indicates whether an item is active.
+     * @param item
+     * @returns
      */
-    select(index: number): void;
+    isActive(item: ListItemComponent): boolean;
     /**
-     * Deselects an option by index
-     * @param index The index of the option to deselect.
-     * @returns void
+     * Indicates whether the given value is selected.
+     * @param item
+     * @returns
      */
-    deselect(index: number): void;
+    isSelected(value: any): boolean;
     /**
-     * Toggles the selection state of an option by index
-     * @param index The index of the option to toggle.
-     * @returns void
+     * Selects the given value.
+     * @param item
      */
-    toggle(index: number): void;
+    select(value: any): void;
     /**
-     * Checks if an option is selected.
-     * @param index The index of the option to check.
-     * @returns True if the option is selected, false otherwise.
+     * Deselects the given value.
+     * @param item
      */
-    isSelected(index: number): boolean;
+    deselect(value: any): void;
     /**
-     * Checks if an option is active.
-     * @param index The index of the option to check.
-     * @returns True if the option is active, false otherwise.
+     * Toggles the selection state of the given value.
+     * @param item
      */
-    isActive(index: number): boolean;
+    toggle(value: any): void;
     /**
-     * Sets the value of the list component.
-     * @param value The value to set. Can be a single value or an array of values in multiple selection mode.
+     * Deselects all items in the list.
      */
-    set(value: any): void;
+    deselectAll(): void;
     /**
-     * Gets the currently selected indices.
-     * @returns An array of the currently selected indices.
-     * @description
-     * - In single selection mode, the array will contain at most one item.
-     * - In multiple selection mode, the array can contain multiple items.
-     * - Changing the selection should be done using select(), deselect(), or toggle() methods to ensure proper event emission and state management.
-     * - Direct manipulation of the returned array will not affect the component's state.
+     * Selects all items in the list. Only applicable in multiple selection mode.
      */
-    selectedIndices(): ReadonlyArray<number>;
-    /**
-     * 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.
-     */
-    scrollIntoView(index: number, position?: ScrollLogicalPosition, behavior?: ScrollBehavior): void;
+    selectAll(): void;
     writeValue(value: any): void;
-    private _setValue;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
-    protected _getItemTabIndex(index: number): -1 | 0 | undefined;
-    protected _handleUserSelection(index: number, item: ListItem): void;
-    private _loadItems;
-    private _createItems;
+    protected _handleUserSelection(item: ListItemComponent): void;
+    protected _showLoadingSppiner: _angular_core.Signal<boolean>;
+    private _findAndSelectItems;
+    private _updateValue;
+    private _hostAriaActiveDescendant;
+    private _hostTabIndex;
     private _onHostClick;
+    private _onHostBlur;
     private _onKeydown;
-    private _verifyIndexRange;
     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; }; "showSelectionIndicator": { "alias": "showSelectionIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "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; }; }, { "selectionChange": "selectionChange"; }, ["_itemTemplate"], never, true, never>;
-}
-/**
- * Represents an item in the list.
- */
-interface ListItem {
-    /**
-     * Id of the item (if idGenerator is provided, otherwise undefined).
-     */
-    id: string;
-    /**
-     * Value of the item.
-     */
-    value: any;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ng0-list", ["ng0List"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showSelectionIndicator": { "alias": "showSelectionIndicator"; "required": false; "isSignal": true; }; "compareBy": { "alias": "compareBy"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "writeBy": { "alias": "writeBy"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "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; }; }, { "selectionChange": "selectionChange"; }, ["itemTemplate"], never, true, never>;
 }
 /**
  * Event emitted when the selection state of the list changes by user interaction.
  */
 interface ListSelectionChangeEvent {
     /**
-     * Index of the item that was selected or deselected.
-     */
-    readonly index: number;
-    /**
-     * The value of the item that was selected or deselected.
-     */
-    readonly value: any;
-    /**
-     * Indicates whether the item was selected (true) or deselected (false).
-     */
-    readonly selected: boolean;
-    /**
-     * The indices of all currently selected items.
+     * The item that was selected or deselected.
      */
-    readonly selectedIndices: ReadonlyArray<number>;
+    readonly item: ListItemComponent;
     /**
      * The list component that emitted the event.
      */
@@ -217,4 +237,4 @@ declare class ListModule {
 }
 
 export { ListComponent, ListModule };
-export type { ListItem, ListSelectionChangeEvent };
+export type { ListSelectionChangeEvent };

package/components/sidenav/index.d.ts

@@ -13,13 +13,13 @@ declare class SidenavComponent implements OnInit, OnDestroy {
     private _vcr;
     private _elmentRef;
     private _renderer;
-    open: _angular_core.InputSignal<boolean>;
+    open: _angular_core.InputSignalWithTransform<boolean, unknown>;
     mode: _angular_core.InputSignal<SidenavMode>;
     hasBackdrop: _angular_core.InputSignal<boolean>;
     zIndex: _angular_core.InputSignal<number | undefined>;
     position: _angular_core.InputSignal<SidenavPosition>;
     sidenavWidth: _angular_core.InputSignal<number>;
-    fixedInViewport: _angular_core.InputSignal<boolean>;
+    fixedInViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
     backdropClick: EventEmitter<MouseEvent>;
     private _backdropRef?;
     private _backdropClickHandlerUnlisten?;

package/data/index.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import * as rxjs from 'rxjs';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 import * as _bootkit_ng0_data from '@bootkit/ng0/data';
 
 /**
@@ -82,20 +82,6 @@ declare class DataResult<T = any> {
     constructor(data: T[], total?: number | undefined);
 }
 
-interface DataSourceChange {
-    type: 'push';
-}
-interface DataSourcePushChange extends DataSourceChange {
-    type: 'push';
-    /**
-     * The items to insert.
-     */
-    items: any[];
-}
-interface DataSourceChangeEvent {
-    changes: Array<DataSourcePushChange>;
-}
-
 /**
  * DataLoader is a function that takes a DataRequest and returns an Observable of DataResult.
  * It is used by RemoteDataSource to load data asynchronously.
@@ -107,16 +93,12 @@ type DataLoader<T = any> = (request: DataRequest) => Observable<DataResult<T>>;
  */
 declare abstract class DataSource<T = any> {
     abstract readonly type: 'local' | 'remote';
-    protected changeSubject: Subject<DataSourceChangeEvent>;
-    protected loading: _angular_core.WritableSignal<boolean>;
-    /**
-     *
-     */
-    readonly change: Observable<DataSourceChangeEvent>;
+    protected _isLoading: _angular_core.WritableSignal<boolean>;
     /**
      * Indicates whether the data source is currently loading data.
      */
     isLoading: _angular_core.Signal<boolean>;
+    constructor();
     /**
      * Loads data from the data source.
      * @param request The data request object containing pagination, sorting, and filtering information.
@@ -157,6 +139,10 @@ declare class RemoteDataSource extends DataSource {
 declare class LocalDataSource extends DataSource {
     private items;
     readonly type = "local";
+    /**
+     * Creates a new LocalDataSource.
+     * @param items The array of items to be used as the data source.
+     */
     constructor(items: any[]);
     /**
    * Creates a LocalDataSource from enum values.
@@ -170,12 +156,6 @@ declare class LocalDataSource extends DataSource {
      * @returns An observable of DataResult containing the requested data.
      */
     load(request: DataRequest): rxjs.Observable<DataResult<any>>;
-    /**
-     * Adds items to the end of the local array.
-     * @param items The items to add.
-     */
-    push(...items: any[]): void;
-    private _validateIndex;
 }
 
 declare function toDataResult<T = any>(dr: DataRequest): (source: Observable<any>) => Observable<DataResult<T>>;
@@ -186,4 +166,4 @@ declare function toDataResult<T = any>(dr: DataRequest): (source: Observable<any
 type LogicalOperator = 'contains' | 'endsWith' | 'startsWith' | 'like' | 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
 
 export { DataRequest, DataResult, DataSource, LocalDataSource, RemoteDataSource, dataSourceAttribute, toDataResult };
-export type { DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceChange, DataSourceChangeEvent, DataSourceLike, DataSourcePushChange, LogicalOperator };
+export type { DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceLike, LogicalOperator };

package/fesm2022/bootkit-ng0-common.mjs

@@ -1,4 +1,5 @@
-import { InjectionToken } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, ViewContainerRef, input, effect, Directive } from '@angular/core';
 import { Observable, from, of } from 'rxjs';
 
 const RTL = new InjectionToken('RTL Direction');
@@ -92,12 +93,26 @@ function getEnumValues(enumClass) {
 let _idCounter = 0;
 /**
  * Creates a sequential ID generator function with an optional prefix.
+ * This function generates unique IDs by incrementing a counter each time it is called.
  * @param prefix Optional prefix for the generated IDs.
  * @returns A function that generates sequential IDs with the given prefix.
  */
 function sequentialIdGenerator(prefix) {
     return (item) => `${prefix || ''}${_idCounter++}`;
 }
+/**
+ * Converts an IdGeneratorLike to an IdGenerator function.
+ * @param v The ID generator to convert.
+ * @returns An IdGenerator function.
+ */
+function IdGeneratorAttribute(v) {
+    if (typeof v === 'function')
+        return v;
+    else if (typeof v === 'string') {
+        return (item) => item ? item[v] : undefined;
+    }
+    throw Error('invalid id generator');
+}
 
 /**
  * Converts a CssClassLike to a CssClassGetter function.
@@ -237,9 +252,78 @@ function filterPredicateAttribute(v) {
     throw Error('invalid filter predicate');
 }
 
+/**
+ * A trackBy function that tracks items by their index.
+ */
+const trackByIndex = (index, item) => index;
+/**
+ * A trackBy function that tracks items by the item itself.
+ */
+const trackByItem = (index, item) => item;
+/**
+ * Converts a TrackByLike to a TrackByFunction.
+ * @param v The item tracker to convert.
+ * @returns A TrackByFunction.
+ */
+function TrackByAttribute(v) {
+    if (typeof v === 'function')
+        return v;
+    else if (typeof v === 'string') {
+        if (v.startsWith('@item')) {
+            return trackByItem;
+        }
+        else if (v.startsWith('@index')) {
+            return trackByIndex;
+        }
+        else {
+            return (index, item) => item ? item[v] : undefined;
+        }
+    }
+    throw Error('invalid TrackBy value');
+}
+
+/**
+ * IfDirective is a structural directive that conditionally includes or excludes a template
+ * based on the boolean value of the `show` input property.
+ *
+ */
+class IfDirective {
+    _templateRef = inject((TemplateRef));
+    _vcr = inject(ViewContainerRef);
+    _viewRef;
+    show = input(true, ...(ngDevMode ? [{ debugName: "show", alias: 'ng0If' }] : [{ alias: 'ng0If' }]));
+    constructor() {
+        effect(() => {
+            if (this.show()) {
+                if (!this._viewRef) {
+                    this._viewRef = this._vcr.createEmbeddedView(this._templateRef);
+                }
+                if (this._vcr.length === 0) {
+                    this._vcr.insert(this._viewRef);
+                }
+            }
+            else {
+                if (this._vcr.length > 0) {
+                    this._vcr.detach(0);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: IfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: IfDirective, isStandalone: true, selector: "[ng0If]", inputs: { show: { classPropertyName: "show", publicName: "ng0If", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ng0If"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: IfDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ng0If]',
+                    exportAs: 'ng0If',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CssClassAttribute, RTL, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, valueWriterAttribute };
+export { CssClassAttribute, IdGeneratorAttribute, IfDirective, RTL, TrackByAttribute, comparerAttribute, defaultComparer, defaultEqualityComparer, defaultValueWriter, deleteEntries, equalityComparerAttribute, filterPredicateAttribute, findValueByComparer, findValuesByComparer, flipPlacement, formatString, getEnumValues, noopFilter, numberArray, sequentialIdGenerator, toObservable, trackByIndex, trackByItem, valueWriterAttribute };
 //# sourceMappingURL=bootkit-ng0-common.mjs.map