@bravobit/bb-foundation 0.21.0 → 0.21.3

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

@@ -1,450 +1,469 @@
 import { isObservable, of, combineLatest, BehaviorSubject } from 'rxjs';
-import { switchMap, map, distinctUntilChanged, startWith, tap, catchError, debounceTime } from 'rxjs/operators';
+import { switchMap, map, tap, catchError, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { Directive, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Input, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { getControlValue } from '@bravobit/bb-foundation/rxjs';
 import { FormControl } from '@angular/forms';
 
-class CollectionProvider {
-    formatArrayToCollectionData(items) {
-        var _a;
-        const count = (_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 1;
-        return {
-            pageSize: count,
-            totalEntries: count,
-            pageNumber: 1,
-            totalPages: 1,
-            data: items
-        };
-    }
+class CollectionProvider {
+    formatArrayToCollectionData(items) {
+        var _a;
+        const count = (_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 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 = {};
-    }
-    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: Object.assign(Object.assign({}, params), extraParams)
-            });
-        }), map(response => this.formatToCollectionData(response)));
-    }
-    getExtraParams(params) {
-        const keys = Object.keys(params !== null && params !== void 0 ? params : {});
-        if (keys.length <= 0) {
-            return of({});
-        }
-        const observables$ = keys.map(key => params === null || params === void 0 ? void 0 : params[key]);
-        return combineLatest(observables$).pipe(map(data => {
-            return data.reduce((previous, current, index) => {
-                if (current === null || current === undefined) {
-                    return previous;
-                }
-                const key = keys === null || keys === void 0 ? void 0 : keys[index];
-                return Object.assign(Object.assign({}, previous), { [key]: current });
-            }, {});
-        }));
-    }
-    formatToCollectionData(response) {
-        if (Array.isArray(response)) {
-            return this.formatArrayToCollectionData(response);
-        }
-        return {
-            pageSize: response === null || response === void 0 ? void 0 : response.page_size,
-            pageNumber: response === null || response === void 0 ? void 0 : response.page_number,
-            totalPages: response === null || response === void 0 ? void 0 : response.total_pages,
-            totalEntries: response === null || response === void 0 ? void 0 : response.total_entries,
-            data: response === null || response === void 0 ? void 0 : response.data
-        };
-    }
-    getBackendFormat(request) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const params = {};
-        params['page'] = (_a = request === null || request === void 0 ? void 0 : request.pageNumber) !== null && _a !== void 0 ? _a : 1;
-        params['page_size'] = (_b = request === null || request === void 0 ? void 0 : request.pageSize) !== null && _b !== void 0 ? _b : 25;
-        if (request === null || request === void 0 ? void 0 : request.sort) {
-            const sort = Array.isArray(request === null || request === void 0 ? void 0 : request.sort) ? request === null || request === void 0 ? void 0 : request.sort : [request === null || request === void 0 ? void 0 : request.sort];
-            const filteredSort = sort === null || sort === void 0 ? void 0 : sort.filter(item => !!(item === null || item === void 0 ? void 0 : item.name) && !!(item === null || item === void 0 ? void 0 : item.direction));
-            params['sort'] = (_c = filteredSort === null || filteredSort === void 0 ? void 0 : filteredSort.map(item => item === null || item === void 0 ? void 0 : item.name)) === null || _c === void 0 ? void 0 : _c.join(',');
-            params['sort_direction'] = (_d = filteredSort === null || filteredSort === void 0 ? void 0 : filteredSort.map(item => item === null || item === void 0 ? void 0 : item.direction)) === null || _d === void 0 ? void 0 : _d.join(',');
-        }
-        if ((request === null || request === void 0 ? void 0 : request.query) && ((_e = request === null || request === void 0 ? void 0 : request.query) === null || _e === void 0 ? void 0 : _e.length) > 0 && (request === null || request === void 0 ? void 0 : request.queryFields) && ((_f = request === null || request === void 0 ? void 0 : request.queryFields) === null || _f === void 0 ? void 0 : _f.length) > 0) {
-            params['query'] = request === null || request === void 0 ? void 0 : request.query;
-            params['query_fields'] = (_g = request === null || request === void 0 ? void 0 : request.queryFields) === null || _g === void 0 ? void 0 : _g.join(',');
-        }
-        return params;
-    }
+class ApiCollectionProvider extends CollectionProvider {
+    constructor(endpoint, httpClient) {
+        super();
+        this.endpoint = endpoint;
+        this.httpClient = httpClient;
+        // State.
+        this.extraParams = {};
+        this.extraObjectParams = [];
+    }
+    append(name, value) {
+        this.extraParams[name] = isObservable(value) ? value : of(value);
+        return this;
+    }
+    appendObject(value) {
+        const params = isObservable(value) ? value : of(value);
+        this.extraObjectParams.push(params);
+    }
+    transform(request) {
+        const endpoint$ = isObservable(this.endpoint) ? this.endpoint : of(this.endpoint);
+        const params = this.getBackendFormat(request);
+        const extraParams$ = this.getExtraParams(this.extraParams);
+        const extraObjectParams$ = this.getExtraObjectParams(this.extraObjectParams);
+        return combineLatest([endpoint$, extraParams$, extraObjectParams$]).pipe(switchMap(([endpoint, extraParams, extraObjectParams]) => {
+            return this.httpClient.get(endpoint, {
+                params: Object.assign(Object.assign(Object.assign({}, params), extraParams), extraObjectParams)
+            });
+        }), map(response => this.formatToCollectionData(response)));
+    }
+    getExtraParams(params) {
+        const keys = Object.keys(params !== null && params !== void 0 ? params : {});
+        if ((keys === null || keys === void 0 ? void 0 : keys.length) <= 0) {
+            return of({});
+        }
+        const observables$ = keys.map(key => params === null || params === void 0 ? void 0 : params[key]);
+        return combineLatest(observables$).pipe(map(data => {
+            return data.reduce((previous, current, index) => {
+                if (current === null || current === undefined) {
+                    return previous;
+                }
+                const key = keys === null || keys === void 0 ? void 0 : keys[index];
+                return Object.assign(Object.assign({}, previous), { [key]: current });
+            }, {});
+        }));
+    }
+    getExtraObjectParams(params$) {
+        if ((params$ === null || params$ === void 0 ? void 0 : params$.length) <= 0) {
+            return of({});
+        }
+        return combineLatest(params$).pipe(map(data => (data !== null && data !== void 0 ? data : []).reduce((previous, current) => (Object.assign(Object.assign({}, previous), (current !== null && current !== void 0 ? current : {}))), {})), map(data => {
+            return Object.keys(data !== null && data !== void 0 ? data : {}).reduce((previous, current) => {
+                var _a;
+                const value = (_a = data === null || data === void 0 ? void 0 : data[current]) !== null && _a !== void 0 ? _a : null;
+                if (value === null || value === undefined) {
+                    return previous;
+                }
+                return Object.assign(Object.assign({}, previous), { [current]: value });
+            }, {});
+        }));
+    }
+    formatToCollectionData(response) {
+        if (Array.isArray(response)) {
+            return this.formatArrayToCollectionData(response);
+        }
+        return {
+            pageSize: response === null || response === void 0 ? void 0 : response.page_size,
+            pageNumber: response === null || response === void 0 ? void 0 : response.page_number,
+            totalPages: response === null || response === void 0 ? void 0 : response.total_pages,
+            totalEntries: response === null || response === void 0 ? void 0 : response.total_entries,
+            data: response === null || response === void 0 ? void 0 : response.data
+        };
+    }
+    getBackendFormat(request) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const params = {};
+        params['page'] = (_a = request === null || request === void 0 ? void 0 : request.pageNumber) !== null && _a !== void 0 ? _a : 1;
+        params['page_size'] = (_b = request === null || request === void 0 ? void 0 : request.pageSize) !== null && _b !== void 0 ? _b : 25;
+        if (request === null || request === void 0 ? void 0 : request.sort) {
+            const sort = Array.isArray(request === null || request === void 0 ? void 0 : request.sort) ? request === null || request === void 0 ? void 0 : request.sort : [request === null || request === void 0 ? void 0 : request.sort];
+            const filteredSort = sort === null || sort === void 0 ? void 0 : sort.filter(item => !!(item === null || item === void 0 ? void 0 : item.name) && !!(item === null || item === void 0 ? void 0 : item.direction));
+            params['sort'] = (_c = filteredSort === null || filteredSort === void 0 ? void 0 : filteredSort.map(item => item === null || item === void 0 ? void 0 : item.name)) === null || _c === void 0 ? void 0 : _c.join(',');
+            params['sort_direction'] = (_d = filteredSort === null || filteredSort === void 0 ? void 0 : filteredSort.map(item => item === null || item === void 0 ? void 0 : item.direction)) === null || _d === void 0 ? void 0 : _d.join(',');
+        }
+        if ((request === null || request === void 0 ? void 0 : request.query) && ((_e = request === null || request === void 0 ? void 0 : request.query) === null || _e === void 0 ? void 0 : _e.length) > 0 && (request === null || request === void 0 ? void 0 : request.queryFields) && ((_f = request === null || request === void 0 ? void 0 : request.queryFields) === null || _f === void 0 ? void 0 : _f.length) > 0) {
+            params['query'] = request === null || request === void 0 ? void 0 : request.query;
+            params['query_fields'] = (_g = request === null || request === void 0 ? void 0 : request.queryFields) === null || _g === void 0 ? void 0 : _g.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: "14.0.3", ngImport: i0, type: BbCollectionsData, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsData.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: BbCollectionsData, selector: "[bbCollectionsData]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsData, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsData]'
-                }]
-        }] });
-class BbCollectionsEmpty {
-}
-BbCollectionsEmpty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsEmpty.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsEmpty]'
-                }]
-        }] });
-class BbCollectionsError {
-}
-BbCollectionsError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsError.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: BbCollectionsError, selector: "[bbCollectionsError]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsError, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsError]'
-                }]
-        }] });
-class BbCollectionsInitial {
-}
-BbCollectionsInitial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsInitial, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BbCollectionsInitial.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BbCollectionsInitial, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbCollectionsInitial]'
-                }]
+class BbCollectionsData {
+}
+BbCollectionsData.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsData, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsData.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: BbCollectionsData, selector: "[bbCollectionsData]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsData, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsData]'
+                }]
+        }] });
+class BbCollectionsEmpty {
+}
+BbCollectionsEmpty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsEmpty.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsEmpty]'
+                }]
+        }] });
+class BbCollectionsError {
+}
+BbCollectionsError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsError.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: BbCollectionsError, selector: "[bbCollectionsError]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsError]'
+                }]
+        }] });
+class BbCollectionsInitial {
+}
+BbCollectionsInitial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsInitial, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BbCollectionsInitial.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", 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: "14.0.3", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbCollectionsViewer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", 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 BbCollectionsViewer {
+    constructor() {
+        // Inputs.
+        this.collection = null;
+    }
+}
+BbCollectionsViewer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbCollectionsViewer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", 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 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 => {
-            var _a, _b, _c, _d;
-            const pageSize = (_a = cache === null || cache === void 0 ? void 0 : cache.pageSize) !== null && _a !== void 0 ? _a : 1;
-            const pageNumber = (_b = cache === null || cache === void 0 ? void 0 : cache.pageNumber) !== null && _b !== void 0 ? _b : 1;
-            const totalPages = Math.max(0, (_c = cache === null || cache === void 0 ? void 0 : cache.totalPages) !== null && _c !== void 0 ? _c : 1);
-            const totalEntries = Math.max(0, (_d = cache === null || cache === void 0 ? void 0 : cache.totalEntries) !== null && _d !== void 0 ? _d : 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() {
-        var _a;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-    }
-    setPage(pageNumber, totalPages) {
-        var _a, _b, _c, _d;
-        // Calculate the new value.
-        const newValue = Math.min(totalPages, Math.max(1, pageNumber));
-        // Validate the value is actually different.
-        const currentValue = (_b = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.pageNumberControl) === null || _b === void 0 ? void 0 : _b.value;
-        if (currentValue === newValue) {
-            return;
-        }
-        (_d = (_c = this._collection) === null || _c === void 0 ? void 0 : _c.pageNumberControl) === null || _d === void 0 ? void 0 : _d.setValue(pageNumber);
-    }
-    observeCollectionChanges() {
-        var _a, _b, _c, _d, _e;
-        if (!this._collection) {
-            return;
-        }
-        if (this._subscription) {
-            (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        }
-        const pageNumber = (_c = (_b = this._collection) === null || _b === void 0 ? void 0 : _b.pageNumberControl) === null || _c === void 0 ? void 0 : _c.value;
-        const pageSize = (_e = (_d = this._collection) === null || _d === void 0 ? void 0 : _d.pageSizeControl) === null || _e === void 0 ? void 0 : _e.value;
-        this.cache$.next({ pageNumber, pageSize });
-        this._subscription = this._collection.raw$.subscribe(data => {
-            if (data) {
-                this.cache$.next(data);
-            }
-        });
-    }
-    calculateLabel(start, end, total) {
-        var _a;
-        const startPoint = '[start]';
-        const endPoint = '[end]';
-        const totalPoint = '[total]';
-        const label = (_a = this._label) !== null && _a !== void 0 ? _a : `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: "14.0.3", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbCollectionsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", 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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", 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 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 => {
+            var _a, _b, _c, _d;
+            const pageSize = (_a = cache === null || cache === void 0 ? void 0 : cache.pageSize) !== null && _a !== void 0 ? _a : 1;
+            const pageNumber = (_b = cache === null || cache === void 0 ? void 0 : cache.pageNumber) !== null && _b !== void 0 ? _b : 1;
+            const totalPages = Math.max(0, (_c = cache === null || cache === void 0 ? void 0 : cache.totalPages) !== null && _c !== void 0 ? _c : 1);
+            const totalEntries = Math.max(0, (_d = cache === null || cache === void 0 ? void 0 : cache.totalEntries) !== null && _d !== void 0 ? _d : 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() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    setPage(pageNumber, totalPages) {
+        var _a, _b, _c, _d;
+        // Calculate the new value.
+        const newValue = Math.min(totalPages, Math.max(1, pageNumber));
+        // Validate the value is actually different.
+        const currentValue = (_b = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.pageNumberControl) === null || _b === void 0 ? void 0 : _b.value;
+        if (currentValue === newValue) {
+            return;
+        }
+        (_d = (_c = this._collection) === null || _c === void 0 ? void 0 : _c.pageNumberControl) === null || _d === void 0 ? void 0 : _d.setValue(pageNumber);
+    }
+    observeCollectionChanges() {
+        var _a, _b, _c, _d, _e;
+        if (!this._collection) {
+            return;
+        }
+        if (this._subscription) {
+            (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        }
+        const pageNumber = (_c = (_b = this._collection) === null || _b === void 0 ? void 0 : _b.pageNumberControl) === null || _c === void 0 ? void 0 : _c.value;
+        const pageSize = (_e = (_d = this._collection) === null || _d === void 0 ? void 0 : _d.pageSizeControl) === null || _e === void 0 ? void 0 : _e.value;
+        this.cache$.next({ pageNumber, pageSize });
+        this._subscription = this._collection.raw$.subscribe(data => {
+            if (data) {
+                this.cache$.next(data);
+            }
+        });
+    }
+    calculateLabel(start, end, total) {
+        var _a;
+        const startPoint = '[start]';
+        const endPoint = '[end]';
+        const totalPoint = '[total]';
+        const label = (_a = this._label) !== null && _a !== void 0 ? _a : `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: "14.0.4", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbCollectionsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", 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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", 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 Collection {
-    constructor(_provider, _initialValues = {}) {
-        var _a, _b, _c, _d, _e;
-        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 === null || control === void 0 ? void 0 : control.value));
-        };
-        this.queryControl = new FormControl((_a = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.query) !== null && _a !== void 0 ? _a : null);
-        this.queryFieldsControl = new FormControl((_b = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.queryFields) !== null && _b !== void 0 ? _b : []);
-        this.pageNumberControl = new FormControl((_c = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.pageNumber) !== null && _c !== void 0 ? _c : 1);
-        this.pageSizeControl = new FormControl((_d = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.pageSize) !== null && _d !== void 0 ? _d : 25);
-        this.sortControl = new FormControl((_e = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.sort) !== null && _e !== void 0 ? _e : 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 = Object.assign(Object.assign({}, data), { loading });
-            return this.formatResponse(data === null || data === void 0 ? void 0 : data.response).pipe(map(response => (Object.assign(Object.assign({}, combined), { response, state: this.getState(combined) }))));
-        }));
-    }
-    formatResponse(response) {
-        var _a, _b, _c;
-        if (!response || !this._formatter) {
-            return of(response);
-        }
-        const items = (_a = response === null || response === void 0 ? void 0 : response.data) !== null && _a !== void 0 ? _a : [];
-        const data = (_c = (_b = this._formatter) === null || _b === void 0 ? void 0 : _b.call(this, items)) !== null && _c !== void 0 ? _c : items;
-        const data$ = isObservable(data) ? data : of(data);
-        return data$.pipe(map(data => (Object.assign(Object.assign({}, response), { data }))));
-    }
-    validateRequest(request) {
-        var _a, _b, _c, _d;
-        // We should reset the page number whenever we change the query or the page size.
-        if (this._requestCache && request && (((_a = this._requestCache) === null || _a === void 0 ? void 0 : _a.query) !== (request === null || request === void 0 ? void 0 : request.query) || ((_b = this._requestCache) === null || _b === void 0 ? void 0 : _b.pageSize) !== (request === null || request === void 0 ? void 0 : request.pageSize))) {
-            (_c = this.pageNumberControl) === null || _c === void 0 ? void 0 : _c.setValue(1, { emitEvent: false });
-            request.pageNumber = (_d = this.pageNumberControl) === null || _d === void 0 ? void 0 : _d.value;
-        }
-        this._requestCache = Object.assign({}, request);
-        return request;
-    }
-    getState(data) {
-        var _a, _b, _c;
-        if (!!(data === null || data === void 0 ? void 0 : data.error)) {
-            return "error" /* CollectionState.Error */;
-        }
-        if (!!(data === null || data === void 0 ? void 0 : data.initial)) {
-            return "initial" /* CollectionState.Initial */;
-        }
-        const count = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
-        if (count <= 0) {
-            return "empty" /* CollectionState.Empty */;
-        }
-        return "data" /* CollectionState.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() {
-        var _a;
-        return this.queryControl.valueChanges.pipe(debounceTime(400), distinctUntilChanged(), startWith((_a = this.queryControl) === null || _a === void 0 ? void 0 : _a.value));
-    }
+class Collection {
+    constructor(_provider, _initialValues = {}) {
+        var _a, _b, _c, _d, _e;
+        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.queryControl = new FormControl((_a = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.query) !== null && _a !== void 0 ? _a : null);
+        this.queryFieldsControl = new FormControl((_b = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.queryFields) !== null && _b !== void 0 ? _b : []);
+        this.pageNumberControl = new FormControl((_c = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.pageNumber) !== null && _c !== void 0 ? _c : 1);
+        this.pageSizeControl = new FormControl((_d = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.pageSize) !== null && _d !== void 0 ? _d : 25);
+        this.sortControl = new FormControl((_e = _initialValues === null || _initialValues === void 0 ? void 0 : _initialValues.sort) !== null && _e !== void 0 ? _e : 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 = Object.assign(Object.assign({}, data), { loading });
+            return this.formatResponse(data === null || data === void 0 ? void 0 : data.response).pipe(map(response => (Object.assign(Object.assign({}, combined), { response, state: this.getState(combined) }))));
+        }));
+    }
+    formatResponse(response) {
+        var _a, _b, _c;
+        if (!response || !this._formatter) {
+            return of(response);
+        }
+        const items = (_a = response === null || response === void 0 ? void 0 : response.data) !== null && _a !== void 0 ? _a : [];
+        const data = (_c = (_b = this._formatter) === null || _b === void 0 ? void 0 : _b.call(this, items)) !== null && _c !== void 0 ? _c : items;
+        const data$ = isObservable(data) ? data : of(data);
+        return data$.pipe(map(data => (Object.assign(Object.assign({}, response), { data }))));
+    }
+    validateRequest(request) {
+        var _a, _b, _c, _d;
+        // We should reset the page number whenever we change the query or the page size.
+        if (this._requestCache && request && (((_a = this._requestCache) === null || _a === void 0 ? void 0 : _a.query) !== (request === null || request === void 0 ? void 0 : request.query) || ((_b = this._requestCache) === null || _b === void 0 ? void 0 : _b.pageSize) !== (request === null || request === void 0 ? void 0 : request.pageSize))) {
+            (_c = this.pageNumberControl) === null || _c === void 0 ? void 0 : _c.setValue(1, { emitEvent: false });
+            request.pageNumber = (_d = this.pageNumberControl) === null || _d === void 0 ? void 0 : _d.value;
+        }
+        this._requestCache = Object.assign({}, request);
+        return request;
+    }
+    getState(data) {
+        var _a, _b, _c;
+        if (!!(data === null || data === void 0 ? void 0 : data.error)) {
+            return "error" /* CollectionState.Error */;
+        }
+        if (!!(data === null || data === void 0 ? void 0 : data.initial)) {
+            return "initial" /* CollectionState.Initial */;
+        }
+        const count = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+        if (count <= 0) {
+            return "empty" /* CollectionState.Empty */;
+        }
+        return "data" /* CollectionState.Data */;
+    }
+    cacheCollectionData(data) {
+        this.raw$.next(data);
+        this.loading$.next(false);
+    }
+    get request() {
+        const pageNumber$ = getControlValue(this.pageNumberControl);
+        const pageSize$ = getControlValue(this.pageSizeControl);
+        const query$ = this.getQueryObservable();
+        const queryFields$ = getControlValue(this.queryFieldsControl);
+        const sort$ = getControlValue(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() {
+        var _a;
+        return this.queryControl.valueChanges.pipe(debounceTime(400), distinctUntilChanged(), startWith((_a = this.queryControl) === null || _a === void 0 ? void 0 : _a.value));
+    }
 }
 
-class CollectionsModule {
-}
-CollectionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CollectionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", 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: "14.0.3", ngImport: i0, type: CollectionsModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", 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: "14.0.4", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CollectionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", 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: "14.0.4", ngImport: i0, type: CollectionsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", 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 };