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

package/data/index.d.ts

@@ -1,6 +1,26 @@
 import * as _angular_core from '@angular/core';
 import * as rxjs from 'rxjs';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+
+/**
+ * Boolean value comparer function type.
+ * @param a First value to compare.
+ * @param b Second value to compare.
+ * @returns true if a is considered equal to b else returns false
+ */
+type BooleanValueComparer = (a: any, b: any) => boolean;
+/**
+ * Boolean value comparer can be a function or a string representing the property name to compare.
+ */
+type BooleanValueComparerLike = BooleanValueComparer | string;
+/**
+ * Default value comparer function.
+ * @param a
+ * @param b
+ * @returns true if a === b else returns false
+ */
+declare function defaultBooleanValueComparer(a: any, b: any): boolean;
+declare function BooleanValueComparerAttribute(v: BooleanValueComparerLike): BooleanValueComparer;
 
 /**
  * DataRequest class represents a request for data with pagination, filtering, sorting, and field selection.
@@ -81,84 +101,184 @@ declare class DataResult<T = any> {
     constructor(data: T[], total?: number | undefined);
 }
 
-/**
- * Abstract base class for data sources.
- * This class provides a common interface for loading data from various sources.
- */
-declare abstract class DataSource<T = any> {
-    protected loading: _angular_core.WritableSignal<boolean>;
-    constructor();
-    /**
-     * Indicates whether the data source is currently loading data.
-     */
-    isLoading: _angular_core.Signal<boolean>;
-    /**
-     * Loads data from the data source.
-     * @param request The data request object containing pagination, sorting, and filtering information.
-     */
-    abstract load(request: DataRequest): Observable<DataResult>;
-}
-
 /**
  * DataLoader is a function that takes a DataRequest and returns an Observable of DataResult.
  * It is used by AsyncDataSource to load data asynchronously.
  */
 type DataLoader<T = any> = (request: DataRequest) => Observable<DataResult<T>>;
 /**
- * AsyncDataSource is a DataSource that loads data asynchronously using a DataLoader function.
+ * RemoteDataSource is a DataSource that loads data asynchronously using a DataLoader function.
  * It is used to fetch data from a remote source, such as an API.
  */
-declare class AsyncDataSource extends DataSource {
+declare class RemoteDataSource extends DataSource {
     private readonly loader;
+    readonly type = "remote";
     constructor(loader: DataLoader);
     load(request: DataRequest): Observable<DataResult<any>>;
 }
 
+/**
+ * DataSourceLike is a type that can be used to represent any data source
+ * that can be used with the table, autocomplete, dropdown and any component that requires data.
+ * It can be an array of data, a function that returns an observable of data,
+ * or an instance of DataSource.
+ */
+type DataSourceLike<T = any> = Array<any> | DataLoader<T> | DataSource<T> | Record<string, string | number> | // enum: extract enum or object values
+undefined | null;
+/**
+ * Converts a DataSourceLike to a DataSource instance.
+ * @param source The data source to convert.
+ * @returns A DataSource instance.
+ */
+declare function dataSourceAttribute<T>(source: DataSourceLike): DataSource<T>;
+/**
+ * LogicalOperator is a list of predefined logical operators that can be used in data requests to filter data.
+ */
+type LogicalOperator = 'contains' | 'endsWith' | 'startsWith' | 'like' | 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+interface DataSourceChange {
+    type: 'insert' | 'replace' | 'remove';
+}
+interface DataSourceItemInsert extends DataSourceChange {
+    type: 'insert';
+    /** Insert index */
+    index?: number;
+    items: any[];
+}
+interface DataSourceItemReplace extends DataSourceChange {
+    type: 'replace';
+    index: number;
+    value: any;
+}
+interface DataSourceItemRemove extends DataSourceChange {
+    type: 'remove';
+    index: number;
+    count?: number;
+}
+interface DataSourceChangeEvent {
+    changes: Array<DataSourceItemInsert | DataSourceItemReplace | DataSourceItemRemove>;
+}
+
+/**
+ * Value extractor function type.
+ */
+type ValueExtractor = (a: any) => any;
+/**
+ * Value extractor can be a function or a string representing the property name to extract.
+ */
+type ValueExtractorLike = ValueExtractor | string;
+/**
+ * Default value extractor function.
+ * @param a The input value
+ * @returns the input value
+ */
+declare function defaultValueExtractor(a: any): any;
+/**
+ * Converts a ValueExtractorLike to a ValueExtractorFunction.
+ * @param v The value extractor to convert.
+ * @returns A function that extracts the desired value.
+ */
+declare function ValueExtractorAttribute(v: ValueExtractorLike): ValueExtractor;
+
 /**
  * An implementation of DataSource that uses an array as the data source.
  * This is useful for static data or when you want to manage the data manually.
  */
-declare class ArrayDataSource extends DataSource {
+declare class LocalDataSource extends DataSource {
     private items;
-    private _insertSubject;
-    private _updateSubject;
-    private _removeSubject;
-    readonly inserted: rxjs.Observable<{
-        items: any[];
-    }>;
-    readonly removed: rxjs.Observable<{
-        item: any;
-        index: number;
-    }>;
-    readonly updated: rxjs.Observable<{
-        item: any;
-        index: number;
-    }>;
+    readonly type = "local";
+    valueExtractor: (initialValue: ValueExtractor, options?: _angular_core.CreateSignalOptions<ValueExtractor> | undefined) => _angular_core.WritableSignal<ValueExtractor>;
     constructor(items: any[]);
     load(request: DataRequest): rxjs.Observable<DataResult<any>>;
-    remove(item: any): void;
-    insert(...items: any[]): void;
+    remove(index: any): void;
+    insert(index: number, ...items: any[]): void;
+    push(...items: any[]): void;
+    replace(index: number, newValue: any): void;
+}
+
+/**
+ * Abstract base class for data sources.
+ * This class provides a common interface for loading data from various sources.
+ */
+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>;
+    /**
+     * Indicates whether the data source is currently loading data.
+     */
+    isLoading: _angular_core.Signal<boolean>;
+    /**
+     * Loads data from the data source.
+     * @param request The data request object containing pagination, sorting, and filtering information.
+     */
+    abstract load(request: DataRequest): Observable<DataResult>;
+    /**
+     * Creates a LocalDataSource from enum values.
+     * @param enumClass The enum class to extract values from.
+     * @returns A LocalDataSource containing the enum values.
+     */
+    static fromEnum(enumClass: Record<string, string | number>): LocalDataSource;
 }
 
 declare function toDataResult<T = any>(dr: DataRequest): (source: Observable<any>) => Observable<DataResult<T>>;
 
 /**
- * DataSourceLike is a type that can be used to represent any data source
- * that can be used with the table, autocomplete, dropdown and any component that requires data.
- * It can be an array of data, a function that returns an observable of data,
- * or an instance of DataSource.
+ * A comparison function type that defines an ordering relation between two values.
+ * @param a The first value to compare.
+ * @param b The second value to compare.
+ * @returns
+ * - A negative number if `a` should come before `b`
+ * - A positive number if `a` should come after `b`
+ * - Zero if `a` and `b` are considered equal
  */
-type DataSourceLike<T = any> = Array<any> | DataLoader<T> | DataSource<T> | undefined | null;
+type ValueComparer = (a: any, b: any) => number;
 /**
- * Converts a data source like an array, function, or DataSource into a DataSource instance.
- * @param source The data source to convert.
- * @returns A DataSource instance.
+ * Value comparer can be a function or a string representing the property name to compare.
  */
-declare function convertToDataSource<T>(source: DataSourceLike): DataSource<T>;
+type ValueComparerLike = ValueComparer | string;
 /**
- * LogicalOperator is a list of predefined logical operators that can be used in data requests to filter data.
+ * Default value comparer function.
+ * @param a
+ * @param b
+ * @returns -1 if a < b, 1 if a > b, 0 if a === b
  */
-type LogicalOperator = 'contains' | 'endsWith' | 'startsWith' | 'like' | 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+declare function defaultValueComparer(a: any, b: any): number;
+/**
+ * Converts a ValueComparerLike to a ValueComparerFunction.
+ * @param v The value comparer to convert.
+ * @returns A function that compares two values.
+ */
+declare function ValueComparerAttribute(v: ValueComparerLike): ValueComparer;
+
+/**
+ * Filter predicate function type.
+ * @param item The item to test against the filter.
+ * @param params Additional parameters to pass to the filter function.
+ * @returns True if the item matches the filter, false otherwise.
+ */
+type FilterPredicate = (item: any, ...params: any[]) => boolean;
+/**
+ * Filter predicate can be a function or a string representing the property name to filter.
+ */
+type FilterPredicateLike = FilterPredicate | string;
+/**
+ * A filter predicate that checks if a string contains the filter criteria (case insensitive).
+ * @param item The item to test against the filter.
+ * @param criteria The filter criteria.
+ * @returns True if the item matches the filter, false otherwise.
+ */
+declare const stringFilter: FilterPredicate;
+/**
+ * Converts a FilterPredicateLike to a FilterPredicate function.
+ * If the input is a string, it creates a predicate that checks the property with that name.
+ * @param v The FilterPredicateLike to convert.
+ * @returns The corresponding FilterPredicate function.
+ */
+declare function FilterPredicateAttribute(v: FilterPredicateLike): FilterPredicate;
 
-export { ArrayDataSource, AsyncDataSource, DataRequest, DataResult, DataSource, convertToDataSource, toDataResult };
-export type { DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceLike, LogicalOperator };
+export { BooleanValueComparerAttribute, DataRequest, DataResult, DataSource, FilterPredicateAttribute, LocalDataSource, RemoteDataSource, ValueComparerAttribute, ValueExtractorAttribute, dataSourceAttribute, defaultBooleanValueComparer, defaultValueComparer, defaultValueExtractor, stringFilter, toDataResult };
+export type { BooleanValueComparer, BooleanValueComparerLike, DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceChange, DataSourceChangeEvent, DataSourceItemInsert, DataSourceItemRemove, DataSourceItemReplace, DataSourceLike, FilterPredicate, FilterPredicateLike, LogicalOperator, ValueComparer, ValueComparerLike, ValueExtractor, ValueExtractorLike };

package/fesm2022/bootkit-ng0-common.mjs

@@ -53,9 +53,59 @@ function toObservable(value) {
     }
 }
 
+/**
+ * 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.
+ */
+function numberArray(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+}
+
+function getEnumValues(enumClass) {
+    return Object.keys(enumClass)
+        .filter(k => isNaN(Number(k))) // remove reverse-mapping keys
+        .map(k => enumClass[k]);
+}
+;
+
+let _idCounter = 0;
+class _IdGenerator {
+    static _idCounter = 0;
+    static next() {
+        return _IdGenerator._idCounter++;
+    }
+}
+/**
+ * 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.
+ */
+function sequentialIdGenerator(prefix) {
+    return (item) => `${prefix || ''}${_idCounter++}`;
+}
+
+/**
+ * Converts a CssClassLike to a CssClassGetter function.
+ * @param v The CssClassLike to convert.
+ * @returns A function that returns the desired CSS class.
+ */
+function CssClassAttribute(v) {
+    if (typeof v === 'function')
+        return v;
+    if (typeof v === 'string') {
+        return (item) => v;
+    }
+    else if (v === undefined || v === null) {
+        return (item) => undefined;
+    }
+    throw Error('invalid css class getter');
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RTL, flipPlacement, formatString, toObservable };
+export { CssClassAttribute, RTL, _IdGenerator, flipPlacement, formatString, getEnumValues, numberArray, sequentialIdGenerator, toObservable };
 //# sourceMappingURL=bootkit-ng0-common.mjs.map

package/fesm2022/bootkit-ng0-common.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bootkit-ng0-common.mjs","sources":["../../../projects/ng0/common/types.ts","../../../projects/ng0/common/utils.ts","../../../projects/ng0/common/string-utils.ts","../../../projects/ng0/common/rxjs-utils.ts","../../../projects/ng0/common/bootkit-ng0-common.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\n\nexport type Placement = 'start' | 'end' | 'top' | 'bottom';\nexport type Alignment = 'start' | 'center' | 'end';\nexport const RTL = new InjectionToken<boolean>('RTL Direction');","import { Placement } from \"./types\";\n\n/**\n * Flips the placement direction.\n * @param placement The placement direction to flip.\n * @returns The flipped placement direction.\n */\nexport function flipPlacement(placement: Placement) {\n    switch (placement) {\n        case 'bottom':\n            return 'top'\n        case 'top':\n            return 'bottom'\n        case 'start':\n            return 'end'\n        case 'end':\n            return 'start'\n    }\n}\n","/**\n * Formats a string by replacing placeholders with the provided arguments.\n * @param str The string to format, containing placeholders in the form of {0}, {1}, etc.\n * @param args The values to replace the placeholders with.\n * @returns The formatted string.\n */\nexport function formatString(str: string, ...args: any[]) {\n    return str.replace(/\\{(\\d+)\\}/g, function (match, index) {\n        return args[index];\n    });\n}\n","import { from, Observable, of } from 'rxjs';\n\n/**\n * Converts a value to an Observable.\n * If the value is already an Observable, it returns it directly.\n * If the value is a Promise, it converts it to an Observable.\n * If the value is neither, it wraps it in an Observable using `of`.\n * @param value The value to convert.\n * @returns An Observable that emits the value.\n */\nexport function toObservable<T>(value: T | Observable<T> | Promise<T>): Observable<T> {\n    if (value instanceof Observable) {\n        return value;\n    } else if (value instanceof Promise) {\n        return from(value);\n    } else {\n        return of(value);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAIa,GAAG,GAAG,IAAI,cAAc,CAAU,eAAe;;ACF9D;;;;AAIG;AACG,SAAU,aAAa,CAAC,SAAoB,EAAA;IAC9C,QAAQ,SAAS;AACb,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,KAAK;AAChB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,QAAQ;AACnB,QAAA,KAAK,OAAO;AACR,YAAA,OAAO,KAAK;AAChB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,OAAO;;AAE1B;;AClBA;;;;;AAKG;SACa,YAAY,CAAC,GAAW,EAAE,GAAG,IAAW,EAAA;IACpD,OAAO,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,UAAU,KAAK,EAAE,KAAK,EAAA;AACnD,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC;AACtB,KAAC,CAAC;AACN;;ACRA;;;;;;;AAOG;AACG,SAAU,YAAY,CAAI,KAAqC,EAAA;AACjE,IAAA,IAAI,KAAK,YAAY,UAAU,EAAE;AAC7B,QAAA,OAAO,KAAK;;AACT,SAAA,IAAI,KAAK,YAAY,OAAO,EAAE;AACjC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC;;SACf;AACH,QAAA,OAAO,EAAE,CAAC,KAAK,CAAC;;AAExB;;AClBA;;AAEG;;;;"}
+{"version":3,"file":"bootkit-ng0-common.mjs","sources":["../../../projects/ng0/common/types.ts","../../../projects/ng0/common/layout.ts","../../../projects/ng0/common/string-utils.ts","../../../projects/ng0/common/rxjs-utils.ts","../../../projects/ng0/common/array-utils.ts","../../../projects/ng0/common/enum.ts","../../../projects/ng0/common/id-generator.ts","../../../projects/ng0/common/css-class.ts","../../../projects/ng0/common/bootkit-ng0-common.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\r\n\r\nexport const RTL = new InjectionToken<boolean>('RTL Direction');\r\n\r\n/**\r\n * List item interface.\r\n */\r\nexport interface SelectOption {\r\n    id: string,\r\n    value: any,\r\n    show?: boolean,\r\n}\r\n\r\n\r\n","export type Placement = 'start' | 'end' | 'top' | 'bottom';\r\nexport type Alignment = 'start' | 'center' | 'end';\r\n\r\n/**\r\n * Flips the placement direction.\r\n * @param placement The placement direction to flip.\r\n * @returns The flipped placement direction.\r\n */\r\nexport function flipPlacement(placement: Placement) {\r\n    switch (placement) {\r\n        case 'bottom':\r\n            return 'top'\r\n        case 'top':\r\n            return 'bottom'\r\n        case 'start':\r\n            return 'end'\r\n        case 'end':\r\n            return 'start'\r\n    }\r\n}\r\n\r\n\r\n","/**\r\n * Formats a string by replacing placeholders with the provided arguments.\r\n * @param str The string to format, containing placeholders in the form of {0}, {1}, etc.\r\n * @param args The values to replace the placeholders with.\r\n * @returns The formatted string.\r\n */\r\nexport function formatString(str: string, ...args: any[]) {\r\n    return str.replace(/\\{(\\d+)\\}/g, function (match, index) {\r\n        return args[index];\r\n    });\r\n}\r\n","import { from, Observable, of } from 'rxjs';\r\n\r\n/**\r\n * Converts a value to an Observable.\r\n * If the value is already an Observable, it returns it directly.\r\n * If the value is a Promise, it converts it to an Observable.\r\n * If the value is neither, it wraps it in an Observable using `of`.\r\n * @param value The value to convert.\r\n * @returns An Observable that emits the value.\r\n */\r\nexport function toObservable<T>(value: T | Observable<T> | Promise<T>): Observable<T> {\r\n    if (value instanceof Observable) {\r\n        return value;\r\n    } else if (value instanceof Promise) {\r\n        return from(value);\r\n    } else {\r\n        return of(value);\r\n    }\r\n}\r\n","/**\r\n * Creates an array of numbers within a specified range.\r\n * @param start The starting number of the range (inclusive).\r\n * @param end The ending number of the range (inclusive).\r\n * @returns An array of numbers within the specified range.\r\n */\r\nexport function numberArray(start: number, end: number) {\r\n  return Array.from({ length: end - start + 1 }, (_, i) => i + start)\r\n}","\r\nexport function getEnumValues(enumClass: Record<string, string | number>): Array<string | number> {\r\n    return Object.keys(enumClass)\r\n    .filter(k => isNaN(Number(k))) // remove reverse-mapping keys\r\n    .map(k => enumClass[k]);\r\n};\r\n","let _idCounter = 0;\r\n\r\nexport abstract class _IdGenerator {\r\n    private static _idCounter = 0;\r\n\r\n    public static next(): number {\r\n        return _IdGenerator._idCounter++;\r\n    }\r\n}\r\n\r\n/**\r\n * Type definition for an ID generator function.\r\n */\r\nexport type IdGenerator = (param?: any) => string;\r\n\r\n/**\r\n * Creates a sequential ID generator function with an optional prefix.\r\n * @param prefix Optional prefix for the generated IDs.\r\n * @returns A function that generates sequential IDs with the given prefix.\r\n */\r\nexport function sequentialIdGenerator(prefix?: string): IdGenerator {\r\n    return (item?: any) => `${prefix || ''}${_idCounter++}`;\r\n}\r\n","/**\r\n * CSS class type which can be a string, array of strings, set of strings, or an object with class names as keys.\r\n */\r\nexport type CssClass = string | string[] | Set<string> | { [klass: string]: any } | null | undefined;\r\n\r\n\r\n/**\r\n * A function that takes an item and returns a CssClass.\r\n * @param item The item to get the CSS class for.\r\n * @returns The CSS class for the item.\r\n */\r\nexport type CssClassGetter = (item: any) => CssClass;\r\n\r\n/**\r\n * A type that represents a CSS class or a function that returns a CSS class.\r\n */\r\nexport type CssClassLike = CssClass | CssClassGetter | null | undefined;\r\n\r\n\r\n/**\r\n * Converts a CssClassLike to a CssClassGetter function.\r\n * @param v The CssClassLike to convert.\r\n * @returns A function that returns the desired CSS class.\r\n */\r\nexport function CssClassAttribute(v: CssClassLike): CssClassGetter {\r\n    if (typeof v === 'function')\r\n        return v as CssClassGetter;\r\n    if (typeof v === 'string') {\r\n        return (item: any) => v;\r\n    } else if (v === undefined || v === null) {\r\n        return (item: any) => undefined;\r\n    }\r\n\r\n    throw Error('invalid css class getter');\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAEa,GAAG,GAAG,IAAI,cAAc,CAAU,eAAe;;ACC9D;;;;AAIG;AACG,SAAU,aAAa,CAAC,SAAoB,EAAA;IAC9C,QAAQ,SAAS;AACb,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,KAAK;AAChB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,QAAQ;AACnB,QAAA,KAAK,OAAO;AACR,YAAA,OAAO,KAAK;AAChB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,OAAO;;AAE1B;;ACnBA;;;;;AAKG;SACa,YAAY,CAAC,GAAW,EAAE,GAAG,IAAW,EAAA;IACpD,OAAO,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,UAAU,KAAK,EAAE,KAAK,EAAA;AACnD,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC,CAAC;AACN;;ACRA;;;;;;;AAOG;AACG,SAAU,YAAY,CAAI,KAAqC,EAAA;AACjE,IAAA,IAAI,KAAK,YAAY,UAAU,EAAE;AAC7B,QAAA,OAAO,KAAK;IAChB;AAAO,SAAA,IAAI,KAAK,YAAY,OAAO,EAAE;AACjC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB;SAAO;AACH,QAAA,OAAO,EAAE,CAAC,KAAK,CAAC;IACpB;AACJ;;AClBA;;;;;AAKG;AACG,SAAU,WAAW,CAAC,KAAa,EAAE,GAAW,EAAA;IACpD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;AACrE;;ACPM,SAAU,aAAa,CAAC,SAA0C,EAAA;AACpE,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS;AAC3B,SAAA,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;SAC7B,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAC3B;AAAC;;ACLD,IAAI,UAAU,GAAG,CAAC;MAEI,YAAY,CAAA;AACtB,IAAA,OAAO,UAAU,GAAG,CAAC;AAEtB,IAAA,OAAO,IAAI,GAAA;AACd,QAAA,OAAO,YAAY,CAAC,UAAU,EAAE;IACpC;;AAQJ;;;;AAIG;AACG,SAAU,qBAAqB,CAAC,MAAe,EAAA;AACjD,IAAA,OAAO,CAAC,IAAU,KAAK,CAAA,EAAG,MAAM,IAAI,EAAE,CAAA,EAAG,UAAU,EAAE,EAAE;AAC3D;;ACHA;;;;AAIG;AACG,SAAU,iBAAiB,CAAC,CAAe,EAAA;IAC7C,IAAI,OAAO,CAAC,KAAK,UAAU;AACvB,QAAA,OAAO,CAAmB;AAC9B,IAAA,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;AACvB,QAAA,OAAO,CAAC,IAAS,KAAK,CAAC;IAC3B;SAAO,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,EAAE;AACtC,QAAA,OAAO,CAAC,IAAS,KAAK,SAAS;IACnC;AAEA,IAAA,MAAM,KAAK,CAAC,0BAA0B,CAAC;AAC3C;;AClCA;;AAEG;;;;"}

package/fesm2022/bootkit-ng0-components-accordion.mjs

@@ -6,8 +6,8 @@ class AccordionItemComponent {
     _element;
     _renderer;
     _accordion;
-    header = input();
-    collapsed = model(true);
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
+    collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     constructor(_element, _renderer, _accordion) {
         this._element = _element;
         this._renderer = _renderer;
@@ -22,31 +22,31 @@ class AccordionItemComponent {
             }
         }, { allowSignalWrites: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: AccordionItemComponent, isStandalone: true, selector: "ng0-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, exportAs: ["ng0AccordionItem"], ngImport: i0, template: "<h6 class=\"accordion-header\">\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\n        {{header()}}\n    </button>\n</h6>\n\n<ng0-collapse [collapsed]=\"collapsed()\">\n    <div class=\"accordion-body\">\n        <ng-content></ng-content>\n    </div>\n</ng0-collapse>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: CollapseComponent, selector: "ng0-collapse", inputs: ["collapsed", "timings"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: AccordionItemComponent, isStandalone: true, selector: "ng0-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, exportAs: ["ng0AccordionItem"], ngImport: i0, template: "<h6 class=\"accordion-header\">\r\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\r\n        {{header()}}\r\n    </button>\r\n</h6>\r\n\r\n<ng0-collapse [collapsed]=\"collapsed()\">\r\n    <div class=\"accordion-body\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng0-collapse>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: CollapseComponent, selector: "ng0-collapse", inputs: ["collapsed", "timings"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng0-accordion-item', exportAs: 'ng0AccordionItem', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CollapseComponent
-                    ], template: "<h6 class=\"accordion-header\">\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\n        {{header()}}\n    </button>\n</h6>\n\n<ng0-collapse [collapsed]=\"collapsed()\">\n    <div class=\"accordion-body\">\n        <ng-content></ng-content>\n    </div>\n</ng0-collapse>", styles: [":host{display:block}\n"] }]
+                    ], template: "<h6 class=\"accordion-header\">\r\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\r\n        {{header()}}\r\n    </button>\r\n</h6>\r\n\r\n<ng0-collapse [collapsed]=\"collapsed()\">\r\n    <div class=\"accordion-body\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng0-collapse>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AccordionComponent }] });
 
 class AccordionComponent {
     _element;
     _renderer;
     /** Items open mode */
-    mode = input('single');
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     items;
     constructor(_element, _renderer) {
         this._element = _element;
         this._renderer = _renderer;
         this._renderer.addClass(this._element.nativeElement, 'accordion');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: AccordionComponent, isStandalone: true, selector: "ng0-accordion", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent }], exportAs: ["ng0Accordion"], ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: AccordionComponent, isStandalone: true, selector: "ng0-accordion", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent }], exportAs: ["ng0Accordion"], ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng0-accordion', exportAs: 'ng0Accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
@@ -55,13 +55,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }] } });
 
 class AccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, imports: [AccordionComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: AccordionModule, imports: [AccordionComponent,
             AccordionItemComponent], exports: [AccordionComponent,
             AccordionItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, imports: [AccordionItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionModule, imports: [AccordionItemComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/bootkit-ng0-components-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bootkit-ng0-components-accordion.mjs","sources":["../../../projects/ng0/components/accordion/accordion-item.component.ts","../../../projects/ng0/components/accordion/accordion-item.component.html","../../../projects/ng0/components/accordion/accordion.component.ts","../../../projects/ng0/components/accordion/accordion.component.html","../../../projects/ng0/components/accordion/accordion.module.ts","../../../projects/ng0/components/accordion/bootkit-ng0-components-accordion.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, input, model, Renderer2 } from '@angular/core';\nimport { CollapseComponent } from '@bootkit/ng0/components/collapse';\nimport { AccordionComponent } from './accordion.component';\n\n@Component({\n    selector: 'ng0-accordion-item',\n    exportAs: 'ng0AccordionItem',\n    templateUrl: './accordion-item.component.html',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styles: `:host {display: block;}`,\n    imports: [\n        CollapseComponent\n    ]\n})\nexport class AccordionItemComponent {\n    public header = input<string>();\n    public collapsed = model(true);\n\n    constructor(private _element: ElementRef, private _renderer: Renderer2, private _accordion: AccordionComponent) {\n        this._renderer.addClass(this._element.nativeElement, 'accordion-item');\n\n        effect(() => {\n            var collapsed = this.collapsed();\n            \n            if(_accordion.mode() == 'single') {\n                if(!collapsed) {\n                    this._accordion.items.filter(x => x !== this).forEach(x => x.collapsed.update(x => true));\n                }\n            }\n        }, {allowSignalWrites: true})\n    }\n}\n","<h6 class=\"accordion-header\">\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\n        {{header()}}\n    </button>\n</h6>\n\n<ng0-collapse [collapsed]=\"collapsed()\">\n    <div class=\"accordion-body\">\n        <ng-content></ng-content>\n    </div>\n</ng0-collapse>","import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, input, QueryList, Renderer2 } from '@angular/core';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@Component({\n    selector: 'ng0-accordion',\n    exportAs: 'ng0Accordion',\n    templateUrl: './accordion.component.html',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styles: `:host {display: block;}`\n})\nexport class AccordionComponent {\n    /** Items open mode */\n    public mode = input<'single' | 'multiple'>('single');\n\n    @ContentChildren(AccordionItemComponent)\n    public readonly items!: QueryList<AccordionItemComponent>;\n\n    constructor(private _element: ElementRef, private _renderer: Renderer2) {\n        this._renderer.addClass(this._element.nativeElement, 'accordion');\n    }\n}\n","<ng-content></ng-content>","import { NgModule } from '@angular/core';\nimport { AccordionComponent } from './accordion.component';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@NgModule({\n    imports: [\n        AccordionComponent,\n        AccordionItemComponent,\n    ],\n    exports: [\n        AccordionComponent,\n        AccordionItemComponent,\n    ]\n})\nexport class AccordionModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.AccordionComponent"],"mappings":"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"}
+{"version":3,"file":"bootkit-ng0-components-accordion.mjs","sources":["../../../projects/ng0/components/accordion/accordion-item.component.ts","../../../projects/ng0/components/accordion/accordion-item.component.html","../../../projects/ng0/components/accordion/accordion.component.ts","../../../projects/ng0/components/accordion/accordion.component.html","../../../projects/ng0/components/accordion/accordion.module.ts","../../../projects/ng0/components/accordion/bootkit-ng0-components-accordion.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, input, model, Renderer2 } from '@angular/core';\r\nimport { CollapseComponent } from '@bootkit/ng0/components/collapse';\r\nimport { AccordionComponent } from './accordion.component';\r\n\r\n@Component({\r\n    selector: 'ng0-accordion-item',\r\n    exportAs: 'ng0AccordionItem',\r\n    templateUrl: './accordion-item.component.html',\r\n    standalone: true,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    styles: `:host {display: block;}`,\r\n    imports: [\r\n        CollapseComponent\r\n    ]\r\n})\r\nexport class AccordionItemComponent {\r\n    public header = input<string>();\r\n    public collapsed = model(true);\r\n\r\n    constructor(private _element: ElementRef, private _renderer: Renderer2, private _accordion: AccordionComponent) {\r\n        this._renderer.addClass(this._element.nativeElement, 'accordion-item');\r\n\r\n        effect(() => {\r\n            var collapsed = this.collapsed();\r\n            \r\n            if(_accordion.mode() == 'single') {\r\n                if(!collapsed) {\r\n                    this._accordion.items.filter(x => x !== this).forEach(x => x.collapsed.update(x => true));\r\n                }\r\n            }\r\n        }, {allowSignalWrites: true})\r\n    }\r\n}\r\n","<h6 class=\"accordion-header\">\r\n    <button class=\"accordion-button\" type=\"button\" [class.collapsed]=\"collapsed()\" (click)=\"collapsed.set(!collapsed())\">\r\n        {{header()}}\r\n    </button>\r\n</h6>\r\n\r\n<ng0-collapse [collapsed]=\"collapsed()\">\r\n    <div class=\"accordion-body\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng0-collapse>","import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, input, QueryList, Renderer2 } from '@angular/core';\r\nimport { AccordionItemComponent } from './accordion-item.component';\r\n\r\n@Component({\r\n    selector: 'ng0-accordion',\r\n    exportAs: 'ng0Accordion',\r\n    templateUrl: './accordion.component.html',\r\n    standalone: true,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    styles: `:host {display: block;}`\r\n})\r\nexport class AccordionComponent {\r\n    /** Items open mode */\r\n    public mode = input<'single' | 'multiple'>('single');\r\n\r\n    @ContentChildren(AccordionItemComponent)\r\n    public readonly items!: QueryList<AccordionItemComponent>;\r\n\r\n    constructor(private _element: ElementRef, private _renderer: Renderer2) {\r\n        this._renderer.addClass(this._element.nativeElement, 'accordion');\r\n    }\r\n}\r\n","<ng-content></ng-content>","import { NgModule } from '@angular/core';\r\nimport { AccordionComponent } from './accordion.component';\r\nimport { AccordionItemComponent } from './accordion-item.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        AccordionComponent,\r\n        AccordionItemComponent,\r\n    ],\r\n    exports: [\r\n        AccordionComponent,\r\n        AccordionItemComponent,\r\n    ]\r\n})\r\nexport class AccordionModule {\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.AccordionComponent"],"mappings":"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"}

package/fesm2022/bootkit-ng0-components-backdrop.mjs

@@ -6,9 +6,9 @@ import { trigger, transition, style, animate } from '@angular/animations';
  * This component is used to display a backdrop behind another component.
  */
 class BackdropComponent {
-    fixed = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BackdropComponent, isStandalone: true, selector: "ng0-backdrop", host: { properties: { "@fade": "", "class.fixed": "fixed()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{--ng0-backdrop-background: rgba(0, 0, 0, .5);position:absolute;inset:0;background:var(--ng0-backdrop-background)}:host.fixed{position:fixed}\n"], animations: [
+    fixed = signal(false, ...(ngDevMode ? [{ debugName: "fixed" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: BackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: BackdropComponent, isStandalone: true, selector: "ng0-backdrop", host: { properties: { "@fade": "", "class.fixed": "fixed()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{--ng0-backdrop-background: rgba(0, 0, 0, .5);position:absolute;inset:0;background:var(--ng0-backdrop-background)}:host.fixed{position:fixed}\n"], animations: [
             trigger('fade', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -20,7 +20,7 @@ class BackdropComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: BackdropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng0-backdrop', template: '', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('fade', [

package/fesm2022/bootkit-ng0-components-backdrop.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bootkit-ng0-components-backdrop.mjs","sources":["../../../projects/ng0/components/backdrop/backdrop.component.ts","../../../projects/ng0/components/backdrop/bootkit-ng0-components-backdrop.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport {\n  trigger,\n  transition,\n  style,\n  animate,\n} from '@angular/animations';\n\n/**\n * This component is used to display a backdrop behind another component.\n */\n@Component({\n  selector: 'ng0-backdrop',\n  template: '',\n  styleUrl: 'backdrop.component.scss',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('fade', [\n      transition(':enter', [\n        style({ opacity: 0 }),\n        animate('150ms ease', style({ opacity: 1 })),\n      ]),\n      transition(':leave', [\n        animate('150ms ease', style({ opacity: 0 })),\n      ]),\n    ]),\n  ],\n  host: {\n    '[@fade]': '', // Binds the animation trigger to the host\n    '[class.fixed]': \"fixed()\"\n  }\n})\nexport class BackdropComponent {\n  public readonly fixed = signal(false);\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAQA;;AAEG;MAuBU,iBAAiB,CAAA;AACZ,IAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;uGAD1B,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,EAAA,aAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBlB,EAAE,EAIA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sJAAA,CAAA,EAAA,UAAA,EAAA;YACV,OAAO,CAAC,MAAM,EAAE;gBACd,UAAU,CAAC,QAAQ,EAAE;AACnB,oBAAA,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oBACrB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7C,CAAC;gBACF,UAAU,CAAC,QAAQ,EAAE;oBACnB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7C,CAAC;aACH,CAAC;AACH,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAtB7B,SAAS;+BACE,cAAc,EAAA,QAAA,EACd,EAAE,EAEA,UAAA,EAAA,IAAI,mBACC,uBAAuB,CAAC,MAAM,EACnC,UAAA,EAAA;wBACV,OAAO,CAAC,MAAM,EAAE;4BACd,UAAU,CAAC,QAAQ,EAAE;AACnB,gCAAA,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;gCACrB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7C,CAAC;4BACF,UAAU,CAAC,QAAQ,EAAE;gCACnB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7C,CAAC;yBACH,CAAC;qBACH,EACK,IAAA,EAAA;wBACJ,SAAS,EAAE,EAAE;AACb,wBAAA,eAAe,EAAE;AAClB,qBAAA,EAAA,MAAA,EAAA,CAAA,sJAAA,CAAA,EAAA;;;AC/BH;;AAEG;;;;"}
+{"version":3,"file":"bootkit-ng0-components-backdrop.mjs","sources":["../../../projects/ng0/components/backdrop/backdrop.component.ts","../../../projects/ng0/components/backdrop/bootkit-ng0-components-backdrop.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\r\nimport {\r\n  trigger,\r\n  transition,\r\n  style,\r\n  animate,\r\n} from '@angular/animations';\r\n\r\n/**\r\n * This component is used to display a backdrop behind another component.\r\n */\r\n@Component({\r\n  selector: 'ng0-backdrop',\r\n  template: '',\r\n  styleUrl: 'backdrop.component.scss',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [\r\n    trigger('fade', [\r\n      transition(':enter', [\r\n        style({ opacity: 0 }),\r\n        animate('150ms ease', style({ opacity: 1 })),\r\n      ]),\r\n      transition(':leave', [\r\n        animate('150ms ease', style({ opacity: 0 })),\r\n      ]),\r\n    ]),\r\n  ],\r\n  host: {\r\n    '[@fade]': '', // Binds the animation trigger to the host\r\n    '[class.fixed]': \"fixed()\"\r\n  }\r\n})\r\nexport class BackdropComponent {\r\n  public readonly fixed = signal(false);\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAQA;;AAEG;MAuBU,iBAAiB,CAAA;AACZ,IAAA,KAAK,GAAG,MAAM,CAAC,KAAK,iDAAC;uGAD1B,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,EAAA,aAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sJAAA,CAAA,EAAA,UAAA,EAIA;YACV,OAAO,CAAC,MAAM,EAAE;gBACd,UAAU,CAAC,QAAQ,EAAE;AACnB,oBAAA,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oBACrB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7C,CAAC;gBACF,UAAU,CAAC,QAAQ,EAAE;oBACnB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7C,CAAC;aACH,CAAC;AACH,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAtB7B,SAAS;+BACE,cAAc,EAAA,QAAA,EACd,EAAE,EAAA,UAAA,EAEA,IAAI,mBACC,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC;wBACV,OAAO,CAAC,MAAM,EAAE;4BACd,UAAU,CAAC,QAAQ,EAAE;AACnB,gCAAA,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;gCACrB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7C,CAAC;4BACF,UAAU,CAAC,QAAQ,EAAE;gCACnB,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7C,CAAC;yBACH,CAAC;qBACH,EAAA,IAAA,EACK;wBACJ,SAAS,EAAE,EAAE;AACb,wBAAA,eAAe,EAAE;AAClB,qBAAA,EAAA,MAAA,EAAA,CAAA,sJAAA,CAAA,EAAA;;;AC/BH;;AAEG;;;;"}

package/fesm2022/bootkit-ng0-components-button.mjs

@@ -13,24 +13,24 @@ class ButtonDirective {
      * The IDs of the HTTP requests that this button listens to.
      * If one of these requests is in progress, it will show a loading indicator or will be disabled based on 'showLoading' and 'disableOnLoading' properties.
      */
-    request = input(undefined);
+    request = input(undefined, ...(ngDevMode ? [{ debugName: "request" }] : []));
     /**
      * Whether the button is disabled or not.
      */
-    disabled = model(false);
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
      * Whether to wait for the HTTP response before enabling the button again.
      * If true, the button will remain disabled until the HTTP request completes.
      * This is useful for preventing multiple clicks while waiting for a response.
      * Default is true.
      */
-    disableDuringRequest = input(true, { transform: booleanAttribute });
+    disableDuringRequest = input(true, ...(ngDevMode ? [{ debugName: "disableDuringRequest", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * Whether to show a loading indicator when the HTTP request is in progress.
      * If true, a loading spinner will be displayed on the button while the request is being processed.
      * Default is true.
      */
-    loadingIndicator = input(false, { transform: booleanAttribute });
+    loadingIndicator = input(false, ...(ngDevMode ? [{ debugName: "loadingIndicator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     constructor(_element, _renderer, _http, _destroyRef) {
         this._element = _element;
         this._renderer = _renderer;
@@ -76,10 +76,10 @@ class ButtonDirective {
     }
     ngOnDestroy() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.HttpService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ButtonDirective, isStandalone: true, selector: "button[ng0Button], a[ng0Button], input[type=button][ng0Button], input[type=submit][ng0Button], input[type=reset][ng0Button]", inputs: { request: { classPropertyName: "request", publicName: "request", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableDuringRequest: { classPropertyName: "disableDuringRequest", publicName: "disableDuringRequest", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "class.disabled": "disabled()", "prop.disabled": "disabled()", "attr.aria-disabled": "disabled()", "attr.tabindex": "disabled() ? \"-1\" : \"\" " } }, exportAs: ["ng0Button"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.HttpService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ButtonDirective, isStandalone: true, selector: "button[ng0Button], a[ng0Button], input[type=button][ng0Button], input[type=submit][ng0Button], input[type=reset][ng0Button]", inputs: { request: { classPropertyName: "request", publicName: "request", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableDuringRequest: { classPropertyName: "disableDuringRequest", publicName: "disableDuringRequest", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "class.disabled": "disabled()", "prop.disabled": "disabled()", "attr.aria-disabled": "disabled()", "attr.tabindex": "disabled() ? \"-1\" : \"\" " } }, exportAs: ["ng0Button"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ng0Button], a[ng0Button], input[type=button][ng0Button], input[type=submit][ng0Button], input[type=reset][ng0Button]',
@@ -95,11 +95,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.HttpService }, { type: i0.DestroyRef }] });
 
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule, imports: [ButtonDirective], exports: [ButtonDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: ButtonModule, imports: [ButtonDirective], exports: [ButtonDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [