@bravobit/bb-foundation 0.16.5 → 0.20.0

package/fesm2020/bravobit-bb-foundation-collections.mjs

@@ -6,435 +6,435 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormControl } from '@angular/forms';
 
-class CollectionProvider {
-    formatArrayToCollectionData(items) {
-        const count = items?.length ?? 1;
-        return {
-            pageSize: count,
-            totalEntries: count,
-            pageNumber: 1,
-            totalPages: 1,
-            data: items
-        };
-    }
+class CollectionProvider {
+    formatArrayToCollectionData(items) {
+        const count = items?.length ?? 1;
+        return {
+            pageSize: count,
+            totalEntries: count,
+            pageNumber: 1,
+            totalPages: 1,
+            data: items
+        };
+    }
 }
 
-class ApiCollectionProvider extends CollectionProvider {
-    constructor(_endpoint, _httpClient) {
-        super();
-        this._endpoint = _endpoint;
-        this._httpClient = _httpClient;
-        // State.
-        this._extraParams = {};
-        this.getBackendFormat = (request) => {
-            const params = {};
-            params['page'] = request?.pageNumber ?? 1;
-            params['page_size'] = request?.pageSize ?? 25;
-            if (request?.sort) {
-                const sort = Array.isArray(request?.sort) ? request?.sort : [request?.sort];
-                const filteredSort = sort?.filter(item => !!item?.name && !!item?.direction);
-                params['sort'] = filteredSort?.map(item => item?.name)?.join(',');
-                params['sort_direction'] = filteredSort?.map(item => item?.direction)?.join(',');
-            }
-            if (request?.query && request?.query?.length > 0 && request?.queryFields && request?.queryFields?.length > 0) {
-                params['query'] = request?.query;
-                params['query_fields'] = request?.queryFields?.join(',');
-            }
-            return params;
-        };
-    }
-    append(name, value) {
-        this._extraParams[name] = isObservable(value) ? value : of(value);
-        return this;
-    }
-    transform(request) {
-        const endpoint$ = isObservable(this._endpoint) ? this._endpoint : of(this._endpoint);
-        const params = this.getBackendFormat(request);
-        const extraParams$ = this.getExtraParams(this._extraParams);
-        return combineLatest([endpoint$, extraParams$]).pipe(switchMap(([endpoint, extraParams]) => {
-            return this._httpClient.get(endpoint, {
-                params: { ...params, ...extraParams }
-            });
-        }), map(response => this.formatToCollectionData(response)));
-    }
-    getExtraParams(params) {
-        const keys = Object.keys(params ?? {});
-        if (keys.length <= 0) {
-            return of({});
-        }
-        const observables$ = keys.map(key => params?.[key]);
-        return combineLatest(observables$).pipe(map(data => {
-            return data.reduce((previous, current, index) => {
-                if (current === null || current === undefined) {
-                    return previous;
-                }
-                const key = keys?.[index];
-                return { ...previous, [key]: current };
-            }, {});
-        }));
-    }
-    formatToCollectionData(response) {
-        if (Array.isArray(response)) {
-            return this.formatArrayToCollectionData(response);
-        }
-        return {
-            pageSize: response?.['page_size'],
-            pageNumber: response?.['page_number'],
-            totalPages: response?.['total_pages'],
-            totalEntries: response?.['total_entries'],
-            data: response?.['data']
-        };
-    }
+class ApiCollectionProvider extends CollectionProvider {
+    constructor(_endpoint, _httpClient) {
+        super();
+        this._endpoint = _endpoint;
+        this._httpClient = _httpClient;
+        // State.
+        this._extraParams = {};
+    }
+    append(name, value) {
+        this._extraParams[name] = isObservable(value) ? value : of(value);
+        return this;
+    }
+    transform(request) {
+        const endpoint$ = isObservable(this._endpoint) ? this._endpoint : of(this._endpoint);
+        const params = this.getBackendFormat(request);
+        const extraParams$ = this.getExtraParams(this._extraParams);
+        return combineLatest([endpoint$, extraParams$]).pipe(switchMap(([endpoint, extraParams]) => {
+            return this._httpClient.get(endpoint, {
+                params: { ...params, ...extraParams }
+            });
+        }), map(response => this.formatToCollectionData(response)));
+    }
+    getExtraParams(params) {
+        const keys = Object.keys(params ?? {});
+        if (keys.length <= 0) {
+            return of({});
+        }
+        const observables$ = keys.map(key => params?.[key]);
+        return combineLatest(observables$).pipe(map(data => {
+            return data.reduce((previous, current, index) => {
+                if (current === null || current === undefined) {
+                    return previous;
+                }
+                const key = keys?.[index];
+                return { ...previous, [key]: current };
+            }, {});
+        }));
+    }
+    formatToCollectionData(response) {
+        if (Array.isArray(response)) {
+            return this.formatArrayToCollectionData(response);
+        }
+        return {
+            pageSize: response?.page_size,
+            pageNumber: response?.page_number,
+            totalPages: response?.total_pages,
+            totalEntries: response?.total_entries,
+            data: response?.data
+        };
+    }
+    getBackendFormat(request) {
+        const params = {};
+        params['page'] = request?.pageNumber ?? 1;
+        params['page_size'] = request?.pageSize ?? 25;
+        if (request?.sort) {
+            const sort = Array.isArray(request?.sort) ? request?.sort : [request?.sort];
+            const filteredSort = sort?.filter(item => !!item?.name && !!item?.direction);
+            params['sort'] = filteredSort?.map(item => item?.name)?.join(',');
+            params['sort_direction'] = filteredSort?.map(item => item?.direction)?.join(',');
+        }
+        if (request?.query && request?.query?.length > 0 && request?.queryFields && request?.queryFields?.length > 0) {
+            params['query'] = request?.query;
+            params['query_fields'] = request?.queryFields?.join(',');
+        }
+        return params;
+    }
 }
 
-class LocalCollectionProvider extends CollectionProvider {
-    constructor(_items) {
-        super();
-        this._items = _items;
-    }
-    transform(request) {
-        const items$ = Array.isArray(this._items)
-            ? of(this._items)
-            : this._items;
-        return items$.pipe(map(items => this.formatArrayToCollectionData(items)));
-    }
+class LocalCollectionProvider extends CollectionProvider {
+    constructor(_items) {
+        super();
+        this._items = _items;
+    }
+    transform(request) {
+        const items$ = Array.isArray(this._items)
+            ? of(this._items)
+            : this._items;
+        return items$.pipe(map(items => this.formatArrayToCollectionData(items)));
+    }
 }
 
-class BbCollectionsData {
-}
-BbCollectionsData.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsData, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsData.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsData, selector: "[bbCollectionsData]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsData, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsData]'
-                }]
-        }] });
-class BbCollectionsEmpty {
-}
-BbCollectionsEmpty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsEmpty.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsEmpty]'
-                }]
-        }] });
-class BbCollectionsError {
-}
-BbCollectionsError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsError.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsError, selector: "[bbCollectionsError]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsError, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsError]'
-                }]
-        }] });
-class BbCollectionsInitial {
-}
-BbCollectionsInitial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsInitial, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsInitial.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsInitial, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsInitial]'
-                }]
+class BbCollectionsData {
+}
+BbCollectionsData.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsData, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsData.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsData, selector: "[bbCollectionsData]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsData, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsData]'
+                }]
+        }] });
+class BbCollectionsEmpty {
+}
+BbCollectionsEmpty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsEmpty.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsEmpty]'
+                }]
+        }] });
+class BbCollectionsError {
+}
+BbCollectionsError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsError.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsError, selector: "[bbCollectionsError]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsError]'
+                }]
+        }] });
+class BbCollectionsInitial {
+}
+BbCollectionsInitial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsInitial, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsInitial.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsInitial, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsInitial]'
+                }]
         }] });
 
-class BbCollectionsViewer {
-    constructor() {
-        // Inputs.
-        this.collection = null;
-    }
-}
-BbCollectionsViewer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbCollectionsViewer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsViewer, selector: "[bb-collections-viewer]", inputs: { collection: "collection" }, host: { classAttribute: "bb-collections-viewer" }, queries: [{ propertyName: "dataTemplate", first: true, predicate: BbCollectionsData, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: BbCollectionsEmpty, descendants: true, read: TemplateRef }, { propertyName: "errorTemplate", first: true, predicate: BbCollectionsError, descendants: true, read: TemplateRef }, { propertyName: "initialTemplate", first: true, predicate: BbCollectionsInitial, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"collection?.data$ | async as data\"\n              [ngSwitch]=\"data?.state\">\n    <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'initial'\">\n        <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'empty'\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'error'\">\n        <ng-container *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error}\"></ng-container>\n    </ng-container>\n</ng-container>\n", styles: [".bb-collections-viewer{display:block}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsViewer, decorators: [{
-            type: Component,
-            args: [{ selector: '[bb-collections-viewer]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-viewer' }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"collection?.data$ | async as data\"\n              [ngSwitch]=\"data?.state\">\n    <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'initial'\">\n        <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'empty'\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'error'\">\n        <ng-container *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error}\"></ng-container>\n    </ng-container>\n</ng-container>\n", styles: [".bb-collections-viewer{display:block}\n"] }]
-        }], propDecorators: { dataTemplate: [{
-                type: ContentChild,
-                args: [BbCollectionsData, { read: TemplateRef, static: false }]
-            }], emptyTemplate: [{
-                type: ContentChild,
-                args: [BbCollectionsEmpty, { read: TemplateRef, static: false }]
-            }], errorTemplate: [{
-                type: ContentChild,
-                args: [BbCollectionsError, { read: TemplateRef, static: false }]
-            }], initialTemplate: [{
-                type: ContentChild,
-                args: [BbCollectionsInitial, { read: TemplateRef, static: false }]
-            }], collection: [{
-                type: Input
+class BbCollectionsViewer {
+    constructor() {
+        // Inputs.
+        this.collection = null;
+    }
+}
+BbCollectionsViewer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbCollectionsViewer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsViewer, selector: "[bb-collections-viewer]", inputs: { collection: "collection" }, host: { classAttribute: "bb-collections-viewer" }, queries: [{ propertyName: "dataTemplate", first: true, predicate: BbCollectionsData, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: BbCollectionsEmpty, descendants: true, read: TemplateRef }, { propertyName: "errorTemplate", first: true, predicate: BbCollectionsError, descendants: true, read: TemplateRef }, { propertyName: "initialTemplate", first: true, predicate: BbCollectionsInitial, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"collection?.data$ | async as data\"\r\n              [ngSwitch]=\"data?.state\">\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-container *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data}\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'initial'\">\r\n        <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'empty'\">\r\n        <ng-container *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query}\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'error'\">\r\n        <ng-container *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error}\"></ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [".bb-collections-viewer{display:block}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsViewer, decorators: [{
+            type: Component,
+            args: [{ selector: '[bb-collections-viewer]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-viewer' }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"collection?.data$ | async as data\"\r\n              [ngSwitch]=\"data?.state\">\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-container *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data}\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'initial'\">\r\n        <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'empty'\">\r\n        <ng-container *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query}\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'error'\">\r\n        <ng-container *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error}\"></ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [".bb-collections-viewer{display:block}\n"] }]
+        }], propDecorators: { dataTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsData, { read: TemplateRef, static: false }]
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsEmpty, { read: TemplateRef, static: false }]
+            }], errorTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsError, { read: TemplateRef, static: false }]
+            }], initialTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsInitial, { read: TemplateRef, static: false }]
+            }], collection: [{
+                type: Input
             }] } });
 
-class BbCollectionsPager {
-    constructor() {
-        // Readonly data.
-        this.maxAmountOfButtons = 5;
-        this.cache$ = new BehaviorSubject({});
-        // State and subscriptions.
-        this._label = null;
-        this._collection = null;
-        this._subscription = null;
-    }
-    // Inputs.
-    set label(value) {
-        this._label = value;
-        this.cache$.next(this.cache$.getValue());
-    }
-    set collection(collection) {
-        this._collection = collection;
-        this.observeCollectionChanges();
-    }
-    ngOnInit() {
-        this.data$ = this.cache$.pipe(map(cache => {
-            const pageSize = cache?.pageSize ?? 1;
-            const pageNumber = cache?.pageNumber ?? 1;
-            const totalPages = Math.max(0, cache?.totalPages ?? 1);
-            const totalEntries = Math.max(0, cache?.totalEntries ?? 0);
-            const fromStart = Math.max(0, Math.min((pageSize * (pageNumber - 1)) + 1, totalEntries));
-            const fromEnd = Math.max(0, Math.min((fromStart - 1) + pageSize, totalEntries));
-            const pages = this.filterActivePages(pageNumber, totalPages);
-            const allowNext = pageNumber < totalPages;
-            const allowPrevious = pageNumber > 1;
-            return {
-                totalPages,
-                pages,
-                pageNumber,
-                allowNext,
-                allowPrevious,
-                label: this.calculateLabel(fromStart, fromEnd, totalEntries)
-            };
-        }));
-    }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
-    }
-    setPage(pageNumber, totalPages) {
-        // Calculate the new value.
-        const newValue = Math.min(totalPages, Math.max(1, pageNumber));
-        // Validate the value is actually different.
-        const currentValue = this._collection?.pageNumberControl?.value;
-        if (currentValue === newValue) {
-            return;
-        }
-        this._collection?.pageNumberControl?.setValue(pageNumber);
-    }
-    observeCollectionChanges() {
-        if (!this._collection) {
-            return;
-        }
-        if (this._subscription) {
-            this._subscription?.unsubscribe();
-        }
-        const pageNumber = this._collection?.pageNumberControl?.value;
-        const pageSize = this._collection?.pageSizeControl?.value;
-        this.cache$.next({ pageNumber, pageSize });
-        this._subscription = this._collection.raw$.subscribe(data => {
-            if (data) {
-                this.cache$.next(data);
-            }
-        });
-    }
-    calculateLabel(start, end, total) {
-        const startPoint = '[start]';
-        const endPoint = '[end]';
-        const totalPoint = '[total]';
-        const label = this._label ?? `Showing ${startPoint} to ${endPoint} of ${totalPoint} results`;
-        return label
-            .replace(startPoint, `<strong>${start}</strong>`)
-            .replace(endPoint, `<strong>${end}</strong>`)
-            .replace(totalPoint, `<strong>${total}</strong>`);
-    }
-    calculatePages(pageNumber, totalPages) {
-        const min = 1;
-        const max = totalPages;
-        const amount = Math.max(1, this.maxAmountOfButtons);
-        const data = Array(amount)
-            .fill(0)
-            .map((_, index) => pageNumber + (index - 1));
-        // Validate if the minimum value less than
-        // the first value.
-        if (data[0] < min) {
-            return data.map(item => item + 1);
-        }
-        // Calculate the difference with the max
-        // if this value is higher than 0 we should minus it.
-        const lastValueInArray = data[data.length - 1];
-        const differenceWithMax = lastValueInArray - max;
-        if (differenceWithMax > 0) {
-            return data.map(item => item - differenceWithMax);
-        }
-        // Just return the default data.
-        return data;
-    }
-    filterActivePages(pageNumber, totalPages) {
-        return this.calculatePages(pageNumber, totalPages)
-            .filter(page => page > 0 && page <= totalPages)
-            .map(page => ({ page, active: pageNumber === page }));
-    }
-}
-BbCollectionsPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbCollectionsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: BbCollectionsPager, selector: "bb-collections-pager", inputs: { label: "label", collection: "collection" }, host: { classAttribute: "bb-collections-pager" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\n    <div [innerHTML]=\"data?.label\"\n         class=\"bb-collections-pager-text\">\n    </div>\n\n    <div class=\"bb-collections-pager-container\">\n        <ul class=\"bb-collections-pager-list\">\n            <li class=\"bb-collections-pager-item\"\n                title=\"Previous page\">\n                <button [disabled]=\"!data?.allowPrevious\"\n                        (click)=\"setPage(data?.pageNumber - 1, data?.totalPages)\"\n                        class=\"bb-collections-pager-button arrow first\"\n                        type=\"button\">\n                    &#8592;\n                </button>\n            </li>\n            <li *ngFor=\"let item of data?.pages\"\n                [title]=\"'Page ' + item?.page\"\n                class=\"bb-collections-pager-item\">\n                <button [class.active]=\"item?.active\"\n                        (click)=\"setPage(item?.page, data?.totalPages)\"\n                        class=\"bb-collections-pager-button\"\n                        type=\"button\">\n                    {{ item?.page }}\n                </button>\n            </li>\n            <li class=\"bb-collections-pager-item\"\n                title=\"Next page\">\n                <button [disabled]=\"!data?.allowNext\"\n                        (click)=\"setPage(data?.pageNumber + 1, data?.totalPages)\"\n                        class=\"bb-collections-pager-button arrow last\"\n                        type=\"button\">\n                    &#8594;\n                </button>\n            </li>\n        </ul>\n    </div>\n</ng-container>\n", styles: [".bb-collections-pager{display:flex;align-items:center;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:10px}.bb-collections-pager-text>strong{font-weight:500}.bb-collections-pager-container{width:100%;display:flex;overflow-x:auto;align-items:center;justify-content:center}.bb-collections-pager-list{display:flex;border-radius:6px;align-items:center;background-color:#fff;border:1px solid rgba(67,90,111,.3);box-shadow:#435a6f24 0 1px 2px inset}.bb-collections-pager-item:not(:last-child){border-right:1px solid #cccccc}.bb-collections-pager-button{height:34px;border:none;display:flex;padding:0 4px;min-width:40px;-webkit-appearance:none;appearance:none;min-height:34px;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;background-color:transparent}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus,.bb-collections-pager-button:active,.bb-collections-pager-button.active{color:#1565c0;font-weight:500}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:#1565c00d}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:#1565c033}.bb-collections-pager-button:not(.arrow):hover,.bb-collections-pager-button:not(.arrow):focus{outline:1px solid rgba(21,101,192,.5)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{outline:1px solid #1565c0;box-shadow:#1565c066 0 0 0 3px}.bb-collections-pager-button:not(.arrow).active{outline:1px solid #1565c0}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:2px;border-bottom-left-radius:2px}.bb-collections-pager-button.arrow.last{border-top-right-radius:2px;border-bottom-right-radius:2px}.bb-collections-pager-button:disabled{color:#000;outline:none;opacity:.25;cursor:default;pointer-events:none;background-color:transparent}@media only screen and (min-width: 768px){.bb-collections-pager{flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:space-between}.bb-collections-pager-text{margin-top:0}.bb-collections-pager-container{width:auto;overflow-x:unset}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: BbCollectionsPager, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-collections-pager', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-pager' }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"data$ | async as data\">\n    <div [innerHTML]=\"data?.label\"\n         class=\"bb-collections-pager-text\">\n    </div>\n\n    <div class=\"bb-collections-pager-container\">\n        <ul class=\"bb-collections-pager-list\">\n            <li class=\"bb-collections-pager-item\"\n                title=\"Previous page\">\n                <button [disabled]=\"!data?.allowPrevious\"\n                        (click)=\"setPage(data?.pageNumber - 1, data?.totalPages)\"\n                        class=\"bb-collections-pager-button arrow first\"\n                        type=\"button\">\n                    &#8592;\n                </button>\n            </li>\n            <li *ngFor=\"let item of data?.pages\"\n                [title]=\"'Page ' + item?.page\"\n                class=\"bb-collections-pager-item\">\n                <button [class.active]=\"item?.active\"\n                        (click)=\"setPage(item?.page, data?.totalPages)\"\n                        class=\"bb-collections-pager-button\"\n                        type=\"button\">\n                    {{ item?.page }}\n                </button>\n            </li>\n            <li class=\"bb-collections-pager-item\"\n                title=\"Next page\">\n                <button [disabled]=\"!data?.allowNext\"\n                        (click)=\"setPage(data?.pageNumber + 1, data?.totalPages)\"\n                        class=\"bb-collections-pager-button arrow last\"\n                        type=\"button\">\n                    &#8594;\n                </button>\n            </li>\n        </ul>\n    </div>\n</ng-container>\n", styles: [".bb-collections-pager{display:flex;align-items:center;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:10px}.bb-collections-pager-text>strong{font-weight:500}.bb-collections-pager-container{width:100%;display:flex;overflow-x:auto;align-items:center;justify-content:center}.bb-collections-pager-list{display:flex;border-radius:6px;align-items:center;background-color:#fff;border:1px solid rgba(67,90,111,.3);box-shadow:#435a6f24 0 1px 2px inset}.bb-collections-pager-item:not(:last-child){border-right:1px solid #cccccc}.bb-collections-pager-button{height:34px;border:none;display:flex;padding:0 4px;min-width:40px;-webkit-appearance:none;appearance:none;min-height:34px;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;background-color:transparent}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus,.bb-collections-pager-button:active,.bb-collections-pager-button.active{color:#1565c0;font-weight:500}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:#1565c00d}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:#1565c033}.bb-collections-pager-button:not(.arrow):hover,.bb-collections-pager-button:not(.arrow):focus{outline:1px solid rgba(21,101,192,.5)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{outline:1px solid #1565c0;box-shadow:#1565c066 0 0 0 3px}.bb-collections-pager-button:not(.arrow).active{outline:1px solid #1565c0}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:2px;border-bottom-left-radius:2px}.bb-collections-pager-button.arrow.last{border-top-right-radius:2px;border-bottom-right-radius:2px}.bb-collections-pager-button:disabled{color:#000;outline:none;opacity:.25;cursor:default;pointer-events:none;background-color:transparent}@media only screen and (min-width: 768px){.bb-collections-pager{flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:space-between}.bb-collections-pager-text{margin-top:0}.bb-collections-pager-container{width:auto;overflow-x:unset}}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], collection: [{
-                type: Input
+class BbCollectionsPager {
+    constructor() {
+        // Readonly data.
+        this.maxAmountOfButtons = 5;
+        this.cache$ = new BehaviorSubject({});
+        // State and subscriptions.
+        this._label = null;
+        this._collection = null;
+        this._subscription = null;
+    }
+    // Inputs.
+    set label(value) {
+        this._label = value;
+        this.cache$.next(this.cache$.getValue());
+    }
+    set collection(collection) {
+        this._collection = collection;
+        this.observeCollectionChanges();
+    }
+    ngOnInit() {
+        this.data$ = this.cache$.pipe(map(cache => {
+            const pageSize = cache?.pageSize ?? 1;
+            const pageNumber = cache?.pageNumber ?? 1;
+            const totalPages = Math.max(0, cache?.totalPages ?? 1);
+            const totalEntries = Math.max(0, cache?.totalEntries ?? 0);
+            const fromStart = Math.max(0, Math.min((pageSize * (pageNumber - 1)) + 1, totalEntries));
+            const fromEnd = Math.max(0, Math.min((fromStart - 1) + pageSize, totalEntries));
+            const pages = this.filterActivePages(pageNumber, totalPages);
+            const allowNext = pageNumber < totalPages;
+            const allowPrevious = pageNumber > 1;
+            return {
+                totalPages,
+                pages,
+                pageNumber,
+                allowNext,
+                allowPrevious,
+                label: this.calculateLabel(fromStart, fromEnd, totalEntries)
+            };
+        }));
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    setPage(pageNumber, totalPages) {
+        // Calculate the new value.
+        const newValue = Math.min(totalPages, Math.max(1, pageNumber));
+        // Validate the value is actually different.
+        const currentValue = this._collection?.pageNumberControl?.value;
+        if (currentValue === newValue) {
+            return;
+        }
+        this._collection?.pageNumberControl?.setValue(pageNumber);
+    }
+    observeCollectionChanges() {
+        if (!this._collection) {
+            return;
+        }
+        if (this._subscription) {
+            this._subscription?.unsubscribe();
+        }
+        const pageNumber = this._collection?.pageNumberControl?.value;
+        const pageSize = this._collection?.pageSizeControl?.value;
+        this.cache$.next({ pageNumber, pageSize });
+        this._subscription = this._collection.raw$.subscribe(data => {
+            if (data) {
+                this.cache$.next(data);
+            }
+        });
+    }
+    calculateLabel(start, end, total) {
+        const startPoint = '[start]';
+        const endPoint = '[end]';
+        const totalPoint = '[total]';
+        const label = this._label ?? `Showing ${startPoint} to ${endPoint} of ${totalPoint} results`;
+        return label
+            .replace(startPoint, `<strong>${start}</strong>`)
+            .replace(endPoint, `<strong>${end}</strong>`)
+            .replace(totalPoint, `<strong>${total}</strong>`);
+    }
+    calculatePages(pageNumber, totalPages) {
+        const min = 1;
+        const max = totalPages;
+        const amount = Math.max(1, this.maxAmountOfButtons);
+        const data = Array(amount)
+            .fill(0)
+            .map((_, index) => pageNumber + (index - 1));
+        // Validate if the minimum value less than
+        // the first value.
+        if (data[0] < min) {
+            return data.map(item => item + 1);
+        }
+        // Calculate the difference with the max
+        // if this value is higher than 0 we should minus it.
+        const lastValueInArray = data[data.length - 1];
+        const differenceWithMax = lastValueInArray - max;
+        if (differenceWithMax > 0) {
+            return data.map(item => item - differenceWithMax);
+        }
+        // Just return the default data.
+        return data;
+    }
+    filterActivePages(pageNumber, totalPages) {
+        return this.calculatePages(pageNumber, totalPages)
+            .filter(page => page > 0 && page <= totalPages)
+            .map(page => ({ page, active: pageNumber === page }));
+    }
+}
+BbCollectionsPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbCollectionsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: BbCollectionsPager, selector: "bb-collections-pager", inputs: { label: "label", collection: "collection" }, host: { classAttribute: "bb-collections-pager" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div [innerHTML]=\"data?.label\"\r\n         class=\"bb-collections-pager-text\">\r\n    </div>\r\n\r\n    <div class=\"bb-collections-pager-container\">\r\n        <ul class=\"bb-collections-pager-list\">\r\n            <li class=\"bb-collections-pager-item\"\r\n                title=\"Previous page\">\r\n                <button [disabled]=\"!data?.allowPrevious\"\r\n                        (click)=\"setPage(data?.pageNumber - 1, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button arrow first\"\r\n                        type=\"button\">\r\n                    &#8592;\r\n                </button>\r\n            </li>\r\n            <li *ngFor=\"let item of data?.pages\"\r\n                [title]=\"'Page ' + item?.page\"\r\n                class=\"bb-collections-pager-item\">\r\n                <button [class.active]=\"item?.active\"\r\n                        (click)=\"setPage(item?.page, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button\"\r\n                        type=\"button\">\r\n                    {{ item?.page }}\r\n                </button>\r\n            </li>\r\n            <li class=\"bb-collections-pager-item\"\r\n                title=\"Next page\">\r\n                <button [disabled]=\"!data?.allowNext\"\r\n                        (click)=\"setPage(data?.pageNumber + 1, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button arrow last\"\r\n                        type=\"button\">\r\n                    &#8594;\r\n                </button>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n", styles: [".bb-collections-pager{display:flex;align-items:center;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:10px}.bb-collections-pager-text>strong{font-weight:500}.bb-collections-pager-container{width:100%;display:flex;overflow-x:auto;align-items:center;justify-content:center}.bb-collections-pager-list{display:flex;border-radius:6px;align-items:center;background-color:#fff;border:1px solid rgba(67,90,111,.3);box-shadow:#435a6f24 0 1px 2px inset}.bb-collections-pager-item:not(:last-child){border-right:1px solid #cccccc}.bb-collections-pager-button{height:34px;border:none;display:flex;padding:0 4px;min-width:40px;-webkit-appearance:none;appearance:none;min-height:34px;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;background-color:transparent}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus,.bb-collections-pager-button:active,.bb-collections-pager-button.active{color:#1565c0;font-weight:500}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:#1565c00d}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:#1565c033}.bb-collections-pager-button:not(.arrow):hover,.bb-collections-pager-button:not(.arrow):focus{outline:1px solid rgba(21,101,192,.5)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{outline:1px solid #1565c0;box-shadow:#1565c066 0 0 0 3px}.bb-collections-pager-button:not(.arrow).active{outline:1px solid #1565c0}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:2px;border-bottom-left-radius:2px}.bb-collections-pager-button.arrow.last{border-top-right-radius:2px;border-bottom-right-radius:2px}.bb-collections-pager-button:disabled{color:#000;outline:none;opacity:.25;cursor:default;pointer-events:none;background-color:transparent}@media only screen and (min-width: 768px){.bb-collections-pager{flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:space-between}.bb-collections-pager-text{margin-top:0}.bb-collections-pager-container{width:auto;overflow-x:unset}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbCollectionsPager, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-collections-pager', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-pager' }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div [innerHTML]=\"data?.label\"\r\n         class=\"bb-collections-pager-text\">\r\n    </div>\r\n\r\n    <div class=\"bb-collections-pager-container\">\r\n        <ul class=\"bb-collections-pager-list\">\r\n            <li class=\"bb-collections-pager-item\"\r\n                title=\"Previous page\">\r\n                <button [disabled]=\"!data?.allowPrevious\"\r\n                        (click)=\"setPage(data?.pageNumber - 1, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button arrow first\"\r\n                        type=\"button\">\r\n                    &#8592;\r\n                </button>\r\n            </li>\r\n            <li *ngFor=\"let item of data?.pages\"\r\n                [title]=\"'Page ' + item?.page\"\r\n                class=\"bb-collections-pager-item\">\r\n                <button [class.active]=\"item?.active\"\r\n                        (click)=\"setPage(item?.page, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button\"\r\n                        type=\"button\">\r\n                    {{ item?.page }}\r\n                </button>\r\n            </li>\r\n            <li class=\"bb-collections-pager-item\"\r\n                title=\"Next page\">\r\n                <button [disabled]=\"!data?.allowNext\"\r\n                        (click)=\"setPage(data?.pageNumber + 1, data?.totalPages)\"\r\n                        class=\"bb-collections-pager-button arrow last\"\r\n                        type=\"button\">\r\n                    &#8594;\r\n                </button>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n", styles: [".bb-collections-pager{display:flex;align-items:center;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:10px}.bb-collections-pager-text>strong{font-weight:500}.bb-collections-pager-container{width:100%;display:flex;overflow-x:auto;align-items:center;justify-content:center}.bb-collections-pager-list{display:flex;border-radius:6px;align-items:center;background-color:#fff;border:1px solid rgba(67,90,111,.3);box-shadow:#435a6f24 0 1px 2px inset}.bb-collections-pager-item:not(:last-child){border-right:1px solid #cccccc}.bb-collections-pager-button{height:34px;border:none;display:flex;padding:0 4px;min-width:40px;-webkit-appearance:none;appearance:none;min-height:34px;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;background-color:transparent}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus,.bb-collections-pager-button:active,.bb-collections-pager-button.active{color:#1565c0;font-weight:500}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:#1565c00d}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:#1565c033}.bb-collections-pager-button:not(.arrow):hover,.bb-collections-pager-button:not(.arrow):focus{outline:1px solid rgba(21,101,192,.5)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{outline:1px solid #1565c0;box-shadow:#1565c066 0 0 0 3px}.bb-collections-pager-button:not(.arrow).active{outline:1px solid #1565c0}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:2px;border-bottom-left-radius:2px}.bb-collections-pager-button.arrow.last{border-top-right-radius:2px;border-bottom-right-radius:2px}.bb-collections-pager-button:disabled{color:#000;outline:none;opacity:.25;cursor:default;pointer-events:none;background-color:transparent}@media only screen and (min-width: 768px){.bb-collections-pager{flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:space-between}.bb-collections-pager-text{margin-top:0}.bb-collections-pager-container{width:auto;overflow-x:unset}}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], collection: [{
+                type: Input
             }] } });
 
-class Collection {
-    constructor(_provider, _initialValues = {}) {
-        this._provider = _provider;
-        this._initialValues = _initialValues;
-        this.raw$ = new BehaviorSubject(null);
-        this.loading$ = new BehaviorSubject(true);
-        // State.
-        this._formatter = null;
-        this._refresh$ = new BehaviorSubject(0);
-        this._requestCache = null;
-        this.controlToObservable = (control) => {
-            return control.valueChanges.pipe(distinctUntilChanged(), startWith(control?.value));
-        };
-        this.queryControl = new FormControl(_initialValues?.query ?? null);
-        this.queryFieldsControl = new FormControl(_initialValues?.queryFields ?? []);
-        this.pageNumberControl = new FormControl(_initialValues?.pageNumber ?? 1);
-        this.pageSizeControl = new FormControl(_initialValues?.pageSize ?? 25);
-        this.sortControl = new FormControl(_initialValues?.sort ?? null);
-        this.data$ = this.getData();
-    }
-    refresh() {
-        this._refresh$.next(0);
-    }
-    setFormatter(callback) {
-        this._formatter = callback;
-        return this;
-    }
-    getData() {
-        const data$ = this.request.pipe(tap(() => this.loading$.next(true)), map(request => this.validateRequest(request)), switchMap(request => {
-            return this._provider.transform(request).pipe(tap(response => this.cacheCollectionData(response)), map(response => ({ response, request, initial: false })), catchError(error => of({
-                error,
-                request,
-                response: null,
-                initial: false
-            })));
-        }), startWith({ initial: true, response: null }));
-        return combineLatest([data$, this.loading$.asObservable()]).pipe(switchMap(([data, loading]) => {
-            const combined = { ...data, loading };
-            return this.formatResponse(data?.response).pipe(map(response => ({
-                ...combined,
-                response,
-                state: this.getState(combined)
-            })));
-        }));
-    }
-    formatResponse(response) {
-        if (!response || !this._formatter) {
-            return of(response);
-        }
-        const items = response?.data ?? [];
-        const data = this._formatter?.(items) ?? items;
-        const data$ = isObservable(data) ? data : of(data);
-        return data$.pipe(map(data => ({ ...response, data })));
-    }
-    validateRequest(request) {
-        // We should reset the page number whenever we change the query or the page size.
-        if (this._requestCache && request && (this._requestCache?.query !== request?.query || this._requestCache?.pageSize !== request?.pageSize)) {
-            this.pageNumberControl?.setValue(1, { emitEvent: false });
-            request.pageNumber = this.pageNumberControl?.value;
-        }
-        this._requestCache = { ...request };
-        return request;
-    }
-    getState(data) {
-        if (!!data?.error) {
-            return "error" /* Error */;
-        }
-        if (!!data?.initial) {
-            return "initial" /* Initial */;
-        }
-        const count = data?.response?.data?.length ?? 0;
-        if (count <= 0) {
-            return "empty" /* Empty */;
-        }
-        return "data" /* Data */;
-    }
-    cacheCollectionData(data) {
-        this.raw$.next(data);
-        this.loading$.next(false);
-    }
-    get request() {
-        const pageNumber$ = this.controlToObservable(this.pageNumberControl);
-        const pageSize$ = this.controlToObservable(this.pageSizeControl);
-        const query$ = this.getQueryObservable();
-        const queryFields$ = this.controlToObservable(this.queryFieldsControl);
-        const sort$ = this.controlToObservable(this.sortControl);
-        return combineLatest([pageNumber$, pageSize$, query$, queryFields$, sort$, this._refresh$.asObservable()]).pipe(map(([pageNumber, pageSize, query, queryFields, sort]) => ({
-            pageNumber,
-            pageSize,
-            query,
-            queryFields,
-            sort
-        })));
-    }
-    getQueryObservable() {
-        return this.queryControl.valueChanges.pipe(debounceTime(400), distinctUntilChanged(), startWith(this.queryControl?.value));
-    }
+class Collection {
+    constructor(_provider, _initialValues = {}) {
+        this._provider = _provider;
+        this._initialValues = _initialValues;
+        this.raw$ = new BehaviorSubject(null);
+        this.loading$ = new BehaviorSubject(true);
+        // State.
+        this._formatter = null;
+        this._refresh$ = new BehaviorSubject(0);
+        this._requestCache = null;
+        this.controlToObservable = (control) => {
+            return control.valueChanges.pipe(distinctUntilChanged(), startWith(control?.value));
+        };
+        this.queryControl = new FormControl(_initialValues?.query ?? null);
+        this.queryFieldsControl = new FormControl(_initialValues?.queryFields ?? []);
+        this.pageNumberControl = new FormControl(_initialValues?.pageNumber ?? 1);
+        this.pageSizeControl = new FormControl(_initialValues?.pageSize ?? 25);
+        this.sortControl = new FormControl(_initialValues?.sort ?? null);
+        this.data$ = this.getData();
+    }
+    refresh() {
+        this._refresh$.next(0);
+    }
+    setFormatter(callback) {
+        this._formatter = callback;
+        return this;
+    }
+    getData() {
+        const data$ = this.request.pipe(tap(() => this.loading$.next(true)), map(request => this.validateRequest(request)), switchMap(request => {
+            return this._provider.transform(request).pipe(tap(response => this.cacheCollectionData(response)), map(response => ({ response, request, initial: false })), catchError(error => of({
+                error,
+                request,
+                response: null,
+                initial: false
+            })));
+        }), startWith({ initial: true, response: null }));
+        return combineLatest([data$, this.loading$.asObservable()]).pipe(switchMap(([data, loading]) => {
+            const combined = { ...data, loading };
+            return this.formatResponse(data?.response).pipe(map(response => ({
+                ...combined,
+                response,
+                state: this.getState(combined)
+            })));
+        }));
+    }
+    formatResponse(response) {
+        if (!response || !this._formatter) {
+            return of(response);
+        }
+        const items = response?.data ?? [];
+        const data = this._formatter?.(items) ?? items;
+        const data$ = isObservable(data) ? data : of(data);
+        return data$.pipe(map(data => ({ ...response, data })));
+    }
+    validateRequest(request) {
+        // We should reset the page number whenever we change the query or the page size.
+        if (this._requestCache && request && (this._requestCache?.query !== request?.query || this._requestCache?.pageSize !== request?.pageSize)) {
+            this.pageNumberControl?.setValue(1, { emitEvent: false });
+            request.pageNumber = this.pageNumberControl?.value;
+        }
+        this._requestCache = { ...request };
+        return request;
+    }
+    getState(data) {
+        if (!!data?.error) {
+            return "error" /* Error */;
+        }
+        if (!!data?.initial) {
+            return "initial" /* Initial */;
+        }
+        const count = data?.response?.data?.length ?? 0;
+        if (count <= 0) {
+            return "empty" /* Empty */;
+        }
+        return "data" /* Data */;
+    }
+    cacheCollectionData(data) {
+        this.raw$.next(data);
+        this.loading$.next(false);
+    }
+    get request() {
+        const pageNumber$ = this.controlToObservable(this.pageNumberControl);
+        const pageSize$ = this.controlToObservable(this.pageSizeControl);
+        const query$ = this.getQueryObservable();
+        const queryFields$ = this.controlToObservable(this.queryFieldsControl);
+        const sort$ = this.controlToObservable(this.sortControl);
+        return combineLatest([pageNumber$, pageSize$, query$, queryFields$, sort$, this._refresh$.asObservable()]).pipe(map(([pageNumber, pageSize, query, queryFields, sort]) => ({
+            pageNumber,
+            pageSize,
+            query,
+            queryFields,
+            sort
+        })));
+    }
+    getQueryObservable() {
+        return this.queryControl.valueChanges.pipe(debounceTime(400), distinctUntilChanged(), startWith(this.queryControl?.value));
+    }
 }
 
-class CollectionsModule {
-}
-CollectionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CollectionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollectionsModule, declarations: [
-        // Components.
-        BbCollectionsViewer,
-        BbCollectionsPager,
-        // Directives.
-        BbCollectionsData,
-        BbCollectionsEmpty,
-        BbCollectionsError,
-        BbCollectionsInitial], imports: [CommonModule], exports: [
-        // Components.
-        BbCollectionsViewer,
-        BbCollectionsPager,
-        // Directives.
-        BbCollectionsData,
-        BbCollectionsEmpty,
-        BbCollectionsError,
-        BbCollectionsInitial] });
-CollectionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollectionsModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollectionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        // Components.
-                        BbCollectionsViewer,
-                        BbCollectionsPager,
-                        // Directives.
-                        BbCollectionsData,
-                        BbCollectionsEmpty,
-                        BbCollectionsError,
-                        BbCollectionsInitial
-                    ],
-                    exports: [
-                        // Components.
-                        BbCollectionsViewer,
-                        BbCollectionsPager,
-                        // Directives.
-                        BbCollectionsData,
-                        BbCollectionsEmpty,
-                        BbCollectionsError,
-                        BbCollectionsInitial
-                    ]
-                }]
+class CollectionsModule {
+}
+CollectionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CollectionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CollectionsModule, declarations: [
+        // Components.
+        BbCollectionsViewer,
+        BbCollectionsPager,
+        // Directives.
+        BbCollectionsData,
+        BbCollectionsEmpty,
+        BbCollectionsError,
+        BbCollectionsInitial], imports: [CommonModule], exports: [
+        // Components.
+        BbCollectionsViewer,
+        BbCollectionsPager,
+        // Directives.
+        BbCollectionsData,
+        BbCollectionsEmpty,
+        BbCollectionsError,
+        BbCollectionsInitial] });
+CollectionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CollectionsModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CollectionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        // Components.
+                        BbCollectionsViewer,
+                        BbCollectionsPager,
+                        // Directives.
+                        BbCollectionsData,
+                        BbCollectionsEmpty,
+                        BbCollectionsError,
+                        BbCollectionsInitial
+                    ],
+                    exports: [
+                        // Components.
+                        BbCollectionsViewer,
+                        BbCollectionsPager,
+                        // Directives.
+                        BbCollectionsData,
+                        BbCollectionsEmpty,
+                        BbCollectionsError,
+                        BbCollectionsInitial
+                    ]
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ApiCollectionProvider, BbCollectionsData, BbCollectionsEmpty, BbCollectionsError, BbCollectionsInitial, BbCollectionsPager, BbCollectionsViewer, Collection, CollectionProvider, CollectionsModule, LocalCollectionProvider };