@bravobit/bb-foundation 0.32.1 → 0.40.0

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

@@ -1,11 +1,14 @@
-import { isObservable, of, combineLatest, BehaviorSubject } from 'rxjs';
-import { switchMap, map, delay, tap, catchError, startWith, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { isObservable, of, combineLatest, BehaviorSubject, Subscription } from 'rxjs';
+import { switchMap, map, delay, shareReplay, distinctUntilChanged, tap, catchError, startWith, debounceTime } 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';
+import { Directive, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Input, numberAttribute, booleanAttribute, Attribute, Optional, HostListener, NgModule } from '@angular/core';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { BbLocalizeString, BbLocalize, BbLocalizeTemplate } from '@bravobit/bb-foundation/localize';
+import { combineLatestMap, getControlValue } from '@bravobit/bb-foundation/rxjs';
+import { BbInput, BbIcon, BbFormControl, BbPrefix, BbSpinner, BbAvatar } from '@bravobit/bb-foundation/elements';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { BbTemplate } from '@bravobit/bb-foundation/utils';
 
 class CollectionProvider {
     formatArrayToCollectionData(items) {
@@ -123,58 +126,157 @@ class LocalCollectionProvider extends CollectionProvider {
     }
 }
 
+class BbCollectionsDataContext {
+    constructor(items, loading) {
+        this.items = items;
+        this.loading = loading;
+    }
+}
 class BbCollectionsData {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsData, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbCollectionsData, selector: "[bbCollectionsData]", ngImport: i0 }); }
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsData, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsData, isStandalone: true, selector: "[bbCollectionsData]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsData, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsData, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbCollectionsData]'
+                    selector: '[bbCollectionsData]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class BbCollectionsDataRowContext {
+    constructor(item) {
+        this.item = item;
+        this.$implicit = item;
+    }
+}
+class BbCollectionsDataRow {
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsDataRow, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsDataRow, isStandalone: true, selector: "[bbCollectionsDataRow]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsDataRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsDataRow]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class BbCollectionsEmptyContext {
+    constructor(query, loading) {
+        this.query = query;
+        this.loading = loading;
+    }
+}
 class BbCollectionsEmpty {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]", ngImport: i0 }); }
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsEmpty, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsEmpty, isStandalone: true, selector: "[bbCollectionsEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsEmpty, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbCollectionsEmpty]'
+                    selector: '[bbCollectionsEmpty]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class BbCollectionsErrorContext {
+    constructor(error, loading) {
+        this.error = error;
+        this.loading = loading;
+    }
+}
 class BbCollectionsError {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsError, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbCollectionsError, selector: "[bbCollectionsError]", ngImport: i0 }); }
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsError, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsError, isStandalone: true, selector: "[bbCollectionsError]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsError, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbCollectionsError]'
+                    selector: '[bbCollectionsError]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class BbCollectionsInitialContext {
+}
 class BbCollectionsInitial {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsInitial, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]", ngImport: i0 }); }
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsInitial, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsInitial, isStandalone: true, selector: "[bbCollectionsInitial]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsInitial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsInitial, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbCollectionsInitial]'
+                    selector: '[bbCollectionsInitial]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class BbCollectionsItemContext {
+    constructor(item) {
+        this.item = item;
+        this.$implicit = item;
+    }
+}
+class BbCollectionsItem {
+    constructor(template) {
+        this.template = template;
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsItem, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsItem, isStandalone: true, selector: "[bbCollectionsItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbCollectionsItem]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class BbCollectionsViewer {
     constructor() {
         // Inputs.
         this.collection = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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\n            *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data, loading: data?.loading}\"></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\n            *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query, loading: data?.loading}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'error'\">\n        <ng-container\n            *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error, loading: data?.loading}\"></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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsViewer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCollectionsViewer, isStandalone: true, 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: "@if (collection?.data$ | async; as data) {\n    @switch (data?.state) {\n        @case ('initial') {\n            <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\n        }\n        @case ('empty') {\n            <ng-container\n                *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query, loading: data?.loading}\"></ng-container>\n        }\n        @case ('error') {\n            <ng-container\n                *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error, loading: data?.loading}\"></ng-container>\n        }\n        @default {\n            <ng-container\n                *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data, loading: data?.loading}\"></ng-container>\n        }\n    }\n}\n", styles: [".bb-collections-viewer{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsViewer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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\n            *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data, loading: data?.loading}\"></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\n            *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query, loading: data?.loading}\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'error'\">\n        <ng-container\n            *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error, loading: data?.loading}\"></ng-container>\n    </ng-container>\n</ng-container>\n", styles: [".bb-collections-viewer{display:block}\n"] }]
+            args: [{ selector: '[bb-collections-viewer]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-viewer' }, preserveWhitespaces: false, standalone: true, imports: [AsyncPipe, NgTemplateOutlet], template: "@if (collection?.data$ | async; as data) {\n    @switch (data?.state) {\n        @case ('initial') {\n            <ng-container *ngTemplateOutlet=\"initialTemplate\"></ng-container>\n        }\n        @case ('empty') {\n            <ng-container\n                *ngTemplateOutlet=\"emptyTemplate; context: {query: data?.request?.query, loading: data?.loading}\"></ng-container>\n        }\n        @case ('error') {\n            <ng-container\n                *ngTemplateOutlet=\"errorTemplate; context: {error: data?.error, loading: data?.loading}\"></ng-container>\n        }\n        @default {\n            <ng-container\n                *ngTemplateOutlet=\"dataTemplate; context: {items: data?.response?.data, loading: data?.loading}\"></ng-container>\n        }\n    }\n}\n", styles: [".bb-collections-viewer{display:block}\n"] }]
         }], propDecorators: { dataTemplate: [{
                 type: ContentChild,
                 args: [BbCollectionsData, { read: TemplateRef, static: false }]
@@ -193,43 +295,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
 
 class BbCollectionsPager {
     constructor() {
-        // Readonly data.
-        this.maxAmountOfButtons = 5;
-        this.cache$ = new BehaviorSubject({});
         // State and subscriptions.
-        this._label = null;
         this._collection = null;
         this._subscription = null;
+        this._cache$ = new BehaviorSubject({});
+        this._maxAmountOfButtons$ = new BehaviorSubject(3);
+    }
+    set maxAmountOfButtons(value) {
+        this._maxAmountOfButtons$.next(Math.max(1, value));
     }
-    // Inputs.
-    set label(value) {
-        this._label = value;
-        this.cache$.next(this.cache$.getValue());
+    get maxAmountOfButtons() {
+        return this._maxAmountOfButtons$.getValue();
     }
     set collection(collection) {
         this._collection = collection;
         this.observeCollectionChanges();
     }
+    get collection() {
+        return this._collection;
+    }
     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)
-            };
-        }));
+        this.setData();
     }
     ngOnDestroy() {
         this._subscription?.unsubscribe();
@@ -244,39 +330,42 @@ class BbCollectionsPager {
         }
         this._collection?.pageNumberControl?.setValue(pageNumber);
     }
+    setData() {
+        this.data$ = combineLatestMap({
+            cache: this._cache$,
+            maxAmountOfButtons: this._maxAmountOfButtons$
+        }).pipe(map(({ cache, maxAmountOfButtons }) => {
+            const pageSize = cache?.pageSize ?? 1;
+            const pageNumber = cache?.pageNumber ?? 1;
+            const totalEntries = Math.max(0, cache?.totalEntries ?? 0);
+            const start = Math.max(0, Math.min((pageSize * (pageNumber - 1)) + 1, totalEntries));
+            const end = Math.max(0, Math.min((start - 1) + pageSize, totalEntries));
+            const totalPages = Math.max(0, cache?.totalPages ?? 1);
+            const pages = this.filterActivePages(pageNumber, totalPages, maxAmountOfButtons);
+            return { start, end, totalEntries, totalPages, pages, pageNumber };
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
+    }
     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 });
+        if (!this._collection) {
+            return;
+        }
         this._subscription = this._collection.raw$.subscribe(data => {
             if (data) {
-                this.cache$.next(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) {
+    calculatePages(pageNumber, totalPages, maxAmountOfButtons) {
         const min = 1;
         const max = totalPages;
-        const amount = Math.max(1, this.maxAmountOfButtons);
+        const amount = Math.max(1, maxAmountOfButtons);
+        const start = Math.max(0, pageNumber - Math.floor(amount / 2));
         const data = Array(amount)
             .fill(0)
-            .map((_, index) => pageNumber + (index - 1));
+            .map((_, index) => start + index);
         // Validate if the minimum value less than
         // the first value.
         if (data[0] < min) {
@@ -292,23 +381,258 @@ class BbCollectionsPager {
         // Just return the default data.
         return data;
     }
-    filterActivePages(pageNumber, totalPages) {
-        return this.calculatePages(pageNumber, totalPages)
+    filterActivePages(pageNumber, totalPages, maxAmountOfButtons) {
+        return this.calculatePages(pageNumber, totalPages, maxAmountOfButtons)
             .filter(page => page > 0 && page <= totalPages)
             .map(page => ({ page, active: pageNumber === page }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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;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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCollectionsPager, isStandalone: true, selector: "bb-collections-pager", inputs: { maxAmountOfButtons: ["maxAmountOfButtons", "maxAmountOfButtons", numberAttribute], collection: "collection" }, host: { classAttribute: "bb-collections-pager" }, ngImport: i0, template: "@if (data$ | async; as data) {\n    <div [bb-localize-string]=\"'collection.showing_label' | bbLocalize\"\n         class=\"bb-collections-pager-text\">\n        <strong *bbLocalizeTemplate=\"'start'\">{{ data?.start }}</strong>\n        <strong *bbLocalizeTemplate=\"'end'\">{{ data?.end }}</strong>\n        <strong *bbLocalizeTemplate=\"'total'\">{{ data?.totalEntries }}</strong>\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?.pageNumber <= 1\"\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            @for (item of data?.pages; track item?.page) {\n                <li [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            }\n            <li class=\"bb-collections-pager-item\"\n                title=\"Next page\">\n                <button [disabled]=\"data?.pageNumber >= data?.totalPages\"\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}\n", styles: [".bb-collections-pager{display:flex;align-items:center;font-size:.875rem;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:.75rem}.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;align-items:center;border-radius:.5rem;background-color:#fff;border:1px solid hsl(213,8%,74%);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-pager-item:not(:last-child){border-right:1px solid hsl(213,8%,74%)}.bb-collections-pager-button{height:2rem;border:none;display:flex;appearance:none;min-height:2rem;min-width:2.5rem;-webkit-user-select:none;user-select:none;padding:0 .25rem;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{font-weight:400;color:var(--bb-collections-pager-color)}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:var(--bb-collections-pager-hover-background-color)}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:var(--bb-collections-pager-active-background-color)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{box-shadow:var(--bb-collections-pager-focus-box-shadow)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active,.bb-collections-pager-button:not(.arrow).active{outline:1px solid var(--bb-collections-pager-outline-color)}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.bb-collections-pager-button.arrow.last{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.bb-collections-pager-button:disabled{color:#111;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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: BbLocalizeString, selector: "[bb-localize-string]", inputs: ["substitutions", "bb-localize-string"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbLocalizeTemplate, selector: "[bbLocalizeTemplate]", inputs: ["bbLocalizeTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.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, standalone: true, imports: [AsyncPipe, BbLocalizeString, BbLocalize, BbLocalizeTemplate], template: "@if (data$ | async; as data) {\n    <div [bb-localize-string]=\"'collection.showing_label' | bbLocalize\"\n         class=\"bb-collections-pager-text\">\n        <strong *bbLocalizeTemplate=\"'start'\">{{ data?.start }}</strong>\n        <strong *bbLocalizeTemplate=\"'end'\">{{ data?.end }}</strong>\n        <strong *bbLocalizeTemplate=\"'total'\">{{ data?.totalEntries }}</strong>\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?.pageNumber <= 1\"\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            @for (item of data?.pages; track item?.page) {\n                <li [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            }\n            <li class=\"bb-collections-pager-item\"\n                title=\"Next page\">\n                <button [disabled]=\"data?.pageNumber >= data?.totalPages\"\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}\n", styles: [".bb-collections-pager{display:flex;align-items:center;font-size:.875rem;flex-direction:column-reverse}.bb-collections-pager-text{display:block;margin-top:.75rem}.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;align-items:center;border-radius:.5rem;background-color:#fff;border:1px solid hsl(213,8%,74%);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-pager-item:not(:last-child){border-right:1px solid hsl(213,8%,74%)}.bb-collections-pager-button{height:2rem;border:none;display:flex;appearance:none;min-height:2rem;min-width:2.5rem;-webkit-user-select:none;user-select:none;padding:0 .25rem;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{font-weight:400;color:var(--bb-collections-pager-color)}.bb-collections-pager-button:hover,.bb-collections-pager-button:focus{background-color:var(--bb-collections-pager-hover-background-color)}.bb-collections-pager-button:active,.bb-collections-pager-button.active{background-color:var(--bb-collections-pager-active-background-color)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active{box-shadow:var(--bb-collections-pager-focus-box-shadow)}.bb-collections-pager-button:not(.arrow):focus,.bb-collections-pager-button:not(.arrow):active,.bb-collections-pager-button:not(.arrow).active{outline:1px solid var(--bb-collections-pager-outline-color)}.bb-collections-pager-button.arrow{font-weight:500}.bb-collections-pager-button.arrow.first{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.bb-collections-pager-button.arrow.last{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.bb-collections-pager-button:disabled{color:#111;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: { maxAmountOfButtons: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], collection: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class BbCollectionsActions {
+    constructor() {
+        // Inputs.
+        this.collection = null;
+        this.queryPlaceholder = null;
+        this.standalone = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: BbCollectionsActions, isStandalone: true, selector: "bb-collections-actions", inputs: { collection: "collection", queryPlaceholder: "queryPlaceholder", standalone: ["standalone", "standalone", booleanAttribute] }, host: { properties: { "class.standalone": "standalone" }, classAttribute: "bb-collections-actions" }, ngImport: i0, template: "<div class=\"bb-collections-actions-row\">\n    <bb-form-control class=\"bb-collections-actions-search\">\n        <bb-icon bbPrefix\n                 src=\"material:search\"></bb-icon>\n        <input [formControl]=\"collection?.queryControl\"\n               [placeholder]=\"queryPlaceholder ?? ('collection.search_label' | bbLocalize)\"\n               bbInput\n               autocomplete=\"off\"\n               type=\"search\">\n    </bb-form-control>\n    <ng-content select=\"[data-collections-action]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".bb-collections-actions{gap:.75rem;display:flex;color:#111;font-size:.875rem;padding:.75rem 1rem;flex-direction:column;border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-actions.standalone{border-bottom:none;border-radius:.5rem;margin-bottom:1.5rem;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-actions-row,[data-collections-row]{gap:.75rem;display:flex;flex-direction:column}.bb-collections-actions-search{flex:1}@media only screen and (min-width: 768px){.bb-collections-actions-row,[data-collections-row]{flex-direction:row}.bb-collections-actions-row.end,[data-collections-row].end{justify-content:flex-end}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BbInput, selector: "input[bbInput],textarea[bbInput],select[bbInput]", inputs: ["required"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "component", type: BbIcon, selector: "bb-icon", inputs: ["alt", "size", "ariaHidden", "src"] }, { kind: "component", type: BbFormControl, selector: "bb-form-control", inputs: ["label", "hint", "grouped", "hideErrors"] }, { kind: "directive", type: BbPrefix, selector: "[bbPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCollectionsPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsActions, 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;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: [{
+            args: [{ selector: 'bb-collections-actions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-collections-actions',
+                        '[class.standalone]': 'standalone'
+                    }, preserveWhitespaces: false, standalone: true, imports: [
+                        ReactiveFormsModule,
+                        BbInput,
+                        BbLocalize,
+                        BbIcon,
+                        BbFormControl,
+                        BbPrefix
+                    ], template: "<div class=\"bb-collections-actions-row\">\n    <bb-form-control class=\"bb-collections-actions-search\">\n        <bb-icon bbPrefix\n                 src=\"material:search\"></bb-icon>\n        <input [formControl]=\"collection?.queryControl\"\n               [placeholder]=\"queryPlaceholder ?? ('collection.search_label' | bbLocalize)\"\n               bbInput\n               autocomplete=\"off\"\n               type=\"search\">\n    </bb-form-control>\n    <ng-content select=\"[data-collections-action]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".bb-collections-actions{gap:.75rem;display:flex;color:#111;font-size:.875rem;padding:.75rem 1rem;flex-direction:column;border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-actions.standalone{border-bottom:none;border-radius:.5rem;margin-bottom:1.5rem;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-actions-row,[data-collections-row]{gap:.75rem;display:flex;flex-direction:column}.bb-collections-actions-search{flex:1}@media only screen and (min-width: 768px){.bb-collections-actions-row,[data-collections-row]{flex-direction:row}.bb-collections-actions-row.end,[data-collections-row].end{justify-content:flex-end}}\n"] }]
+        }], propDecorators: { collection: [{
+                type: Input,
+                args: [{ required: true }]
+            }], queryPlaceholder: [{
                 type: Input
+            }], standalone: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class BbCollectionsTable {
+    constructor() {
+        // Readonly data.
+        this.collection$ = new BehaviorSubject(null);
+        // Inputs.
+        this.queryPlaceholder = null;
+        this.emptyContent = null;
+        this.noResultsContent = null;
+        this.errorContent = null;
+        this.trackByProperty = 'id';
+        this.includeVerticalLines = false;
+        this.hideActions = false;
+        this.hidePager = false;
+    }
+    set collection(collection) {
+        this.collection$.next(collection);
+    }
+    get collection() {
+        return this.collection$.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCollectionsTable, isStandalone: true, selector: "bb-collections-table", inputs: { queryPlaceholder: "queryPlaceholder", emptyContent: "emptyContent", noResultsContent: "noResultsContent", errorContent: "errorContent", trackByProperty: "trackByProperty", includeVerticalLines: ["includeVerticalLines", "includeVerticalLines", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hidePager: ["hidePager", "hidePager", booleanAttribute], collection: "collection" }, host: { properties: { "class.include-vertical-lines": "includeVerticalLines" }, classAttribute: "bb-collections-table" }, queries: [{ propertyName: "dataRowTemplate", first: true, predicate: BbCollectionsDataRow, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!hideActions) {\n    <bb-collections-actions [collection]=\"collection\"\n                            [queryPlaceholder]=\"queryPlaceholder\">\n        <ng-content ngProjectAs=\"[data-collections-action]\"\n                    select=\"[data-collections-action]\"></ng-content>\n        <ng-content ngProjectAs=\"[data-collections-row]\"\n                    select=\"[data-collections-row]\"></ng-content>\n    </bb-collections-actions>\n}\n\n<div [collection]=\"collection\"\n     [class.loading]=\"collection?.loading$ | async\"\n     class=\"bb-collections-table-container\"\n     bb-collections-viewer>\n    <table *bbCollectionsData=\"let items = items; let loading = loading\">\n        <ng-content select=\"thead\"></ng-content>\n        <tbody>\n            @for (item of items; track (trackByProperty === null ? $index : item[trackByProperty])) {\n                <ng-container\n                    *ngTemplateOutlet=\"dataRowTemplate; context: {$implicit: item, item: item}\"></ng-container>\n            }\n        </tbody>\n        <ng-content select=\"tfoot\"></ng-content>\n    </table>\n    <div *bbCollectionsEmpty=\"let query = query\"\n         class=\"bb-collections-table-info\">\n        <div class=\"bb-collections-table-image empty\"></div>\n        @if (query?.length > 0) {\n            <ng-template [bbTemplate]=\"noResultsContent\">\n                <p [bb-localize-string]=\"$any(noResultsContent) ?? ('collection.no_results_label' | bbLocalize)\"\n                   class=\"bb-collections-table-info-text\">\n                    <strong *bbLocalizeTemplate=\"'query'\">{{ query ?? '...' }}</strong>\n                </p>\n            </ng-template>\n        } @else {\n            <ng-template [bbTemplate]=\"emptyContent\">\n                <p class=\"bb-collections-table-info-text\">\n                    {{ $any(emptyContent) ?? ('collection.empty_label' | bbLocalize) }}\n                </p>\n            </ng-template>\n        }\n    </div>\n    <div *bbCollectionsError=\"let error = error\"\n         class=\"bb-collections-table-info\">\n        <div class=\"bb-collections-table-image error\"></div>\n        <ng-template [bbTemplate]=\"errorContent\">\n            <p class=\"bb-collections-table-info-text\">\n                {{ $any(errorContent) ?? ('collection.error_label' | bbLocalize) }}\n            </p>\n        </ng-template>\n    </div>\n    <div *bbCollectionsInitial\n         class=\"bb-collections-table-info\">\n        <bb-spinner class=\"block\"></bb-spinner>\n    </div>\n</div>\n\n@if (!hidePager) {\n    <footer class=\"bb-collections-table-footer\">\n        <bb-collections-pager [collection]=\"collection\"></bb-collections-pager>\n    </footer>\n}\n", styles: ["@charset \"UTF-8\";.bb-collections-table{color:#111;display:block;position:relative;font-size:.875rem;border-radius:.5rem;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-table.include-vertical-lines td:not(:last-child),.bb-collections-table.include-vertical-lines th:not(:last-child){border-right:1px solid hsl(213,8%,90%)}.bb-collections-table-footer{padding:.75rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;background-color:#fbf9f9;border-top:1px solid hsl(213,8%,90%)}.bb-collections-table-container{overflow-x:auto;position:relative}.bb-collections-table-container.loading>table>tbody,.bb-collections-table-container.loading>.bb-collections-table-info{animation:collectionsBlink 1s linear infinite}.bb-collections-table-container.loading:after{top:0;left:0;right:0;z-index:1;opacity:0;content:\"\";height:.25rem;position:absolute;will-change:left,right;background-color:#1565c1;animation:collectionsFadeIn .12s cubic-bezier(.65,.815,.735,.395) .4s forwards,collectionsIndeterminate 2.1s cubic-bezier(.65,.815,.735,.395) .4s infinite}.bb-collections-table-container>table{width:100%}.bb-collections-table-container>table th,.bb-collections-table-container>table td{padding:1rem;text-align:left;font-weight:400;font-size:.875rem}.bb-collections-table-container>table th.fit,.bb-collections-table-container>table td.fit{width:1%;white-space:nowrap}.bb-collections-table-container>table th.left,.bb-collections-table-container>table td.left{text-align:left}.bb-collections-table-container>table th.right,.bb-collections-table-container>table td.right{text-align:right}.bb-collections-table-container>table>thead{background-color:#fbf9f9;border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-table-container>table>thead>tr>th{padding:1rem;color:#525252}.bb-collections-table-container>table>tbody>tr>td{color:#111}.bb-collections-table-container>table>tbody>tr:not(:last-child){border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-table-info{padding:3rem 1.5rem}.bb-collections-table-info-text{color:#525252;margin:0 auto;display:block;line-height:2;max-width:30rem;text-align:center;font-size:.875rem}.bb-collections-table-info-text>strong{font-weight:500}.bb-collections-table-info-text>strong:before{content:\"\\201c\"}.bb-collections-table-info-text>strong:after{content:\"\\201d\"}.bb-collections-table-image{width:100%;height:auto;display:flex;max-width:7.5rem;margin:0 auto 1.5rem;background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-collections-table-image.empty{aspect-ratio:154/132;-webkit-mask-image:linear-gradient(to bottom,black 25%,transparent 100%);mask-image:linear-gradient(to bottom,black 25%,transparent 100%);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 154 132\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3Cg transform=\"translate(0 46)\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3C/g%3E%3Cg transform=\"translate(0 92)\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')}.bb-collections-table-image.error{max-width:4rem;aspect-ratio:1;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"%3E%3Cpath fill=\"%23C23934\" d=\"M65.958253 98.6024096c.8892771 0 1.6486747-.3008433 2.2781928-.9025301.6295181-.6016867.9442771-1.3471687.9442771-2.2364458 0-.8892771-.3008434-1.6486747-.9025301-2.2781927-.6016868-.6295181-1.3471687-.9442771-2.2364458-.9442771-.8892771 0-1.6486747.3008433-2.2781928.9025301-.6295181.6016867-.9442771 1.3471687-.9442771 2.2364458 0 .8892771.3008434 1.6486747.9025301 2.2781927.6016868.6295181 1.3471687.9442771 2.2364458.9442771Zm-1.9462048-21.4698795h3.9759036V29.4216867h-3.9759036v47.7108434ZM66.0894578 132c-9.0716867 0-17.6205421-1.715602-25.6465662-5.146807-8.0260241-3.431205-15.0547591-8.159217-21.0862049-14.184036-6.032771-6.02482-10.76674694-13.0416269-14.20192766-21.0504221C1.71825301 83.6086145 0 75.0504819 0 65.9443373 0 56.8368675 1.71560241 48.303253 5.14680723 40.343494c3.43120482-7.9597591 8.15921687-14.9553615 14.18403617-20.9868073 6.0248193-6.032771 13.0416265-10.76674694 21.0504217-14.20192766C48.3913855 1.71825301 56.9495181 0 66.0556627 0 75.1631325 0 83.696747 1.71560241 91.656506 5.14680723c7.9597591 3.43120482 14.955361 8.15921687 20.986807 14.18403617 6.032771 6.0248193 10.766747 13.0263855 14.201928 21.0046988C130.281747 48.3138554 132 56.8388554 132 65.9105422c0 9.0716867-1.715602 17.6205421-5.146807 25.6465662-3.431205 8.0260241-8.159217 15.0547586-14.184036 21.0862046-6.02482 6.032771-13.0263859 10.766747-21.0046992 14.201928C83.6861446 130.281747 75.1611446 132 66.0894578 132ZM66 128.024096c17.2289157 0 31.873494-6.03012 43.933735-18.090361C121.993976 97.873494 128.024096 83.2289157 128.024096 66c0-17.2289157-6.03012-31.873494-18.090361-43.9337349C97.873494 10.0060241 83.2289157 3.97590361 66 3.97590361c-17.2289157 0-31.873494 6.03012049-43.9337349 18.09036149C10.0060241 34.126506 3.97590361 48.7710843 3.97590361 66c0 17.2289157 6.03012049 31.873494 18.09036149 43.933735C34.126506 121.993976 48.7710843 128.024096 66 128.024096Z\"/%3E%3C/svg%3E')}@keyframes collectionsFadeIn{0%{opacity:0}to{opacity:1}}@keyframes collectionsIndeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes collectionsBlink{25%{opacity:.6}50%{opacity:.4}75%{opacity:.6}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BbCollectionsViewer, selector: "[bb-collections-viewer]", inputs: ["collection"] }, { kind: "directive", type: BbCollectionsData, selector: "[bbCollectionsData]" }, { kind: "directive", type: BbCollectionsEmpty, selector: "[bbCollectionsEmpty]" }, { kind: "directive", type: BbCollectionsError, selector: "[bbCollectionsError]" }, { kind: "directive", type: BbCollectionsInitial, selector: "[bbCollectionsInitial]" }, { kind: "component", type: BbCollectionsActions, selector: "bb-collections-actions", inputs: ["collection", "queryPlaceholder", "standalone"] }, { kind: "component", type: BbCollectionsPager, selector: "bb-collections-pager", inputs: ["maxAmountOfButtons", "collection"] }, { kind: "component", type: BbLocalizeString, selector: "[bb-localize-string]", inputs: ["substitutions", "bb-localize-string"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbLocalizeTemplate, selector: "[bbLocalizeTemplate]", inputs: ["bbLocalizeTemplate"] }, { kind: "component", type: BbSpinner, selector: "bb-spinner", inputs: ["color", "alt", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-collections-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-collections-table',
+                        '[class.include-vertical-lines]': 'includeVerticalLines'
+                    }, preserveWhitespaces: false, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        BbCollectionsViewer,
+                        BbCollectionsData,
+                        BbCollectionsEmpty,
+                        BbCollectionsError,
+                        BbCollectionsInitial,
+                        BbCollectionsActions,
+                        BbCollectionsPager,
+                        BbLocalizeString,
+                        BbTemplate,
+                        BbLocalize,
+                        BbLocalizeTemplate,
+                        BbSpinner,
+                        AsyncPipe
+                    ], template: "@if (!hideActions) {\n    <bb-collections-actions [collection]=\"collection\"\n                            [queryPlaceholder]=\"queryPlaceholder\">\n        <ng-content ngProjectAs=\"[data-collections-action]\"\n                    select=\"[data-collections-action]\"></ng-content>\n        <ng-content ngProjectAs=\"[data-collections-row]\"\n                    select=\"[data-collections-row]\"></ng-content>\n    </bb-collections-actions>\n}\n\n<div [collection]=\"collection\"\n     [class.loading]=\"collection?.loading$ | async\"\n     class=\"bb-collections-table-container\"\n     bb-collections-viewer>\n    <table *bbCollectionsData=\"let items = items; let loading = loading\">\n        <ng-content select=\"thead\"></ng-content>\n        <tbody>\n            @for (item of items; track (trackByProperty === null ? $index : item[trackByProperty])) {\n                <ng-container\n                    *ngTemplateOutlet=\"dataRowTemplate; context: {$implicit: item, item: item}\"></ng-container>\n            }\n        </tbody>\n        <ng-content select=\"tfoot\"></ng-content>\n    </table>\n    <div *bbCollectionsEmpty=\"let query = query\"\n         class=\"bb-collections-table-info\">\n        <div class=\"bb-collections-table-image empty\"></div>\n        @if (query?.length > 0) {\n            <ng-template [bbTemplate]=\"noResultsContent\">\n                <p [bb-localize-string]=\"$any(noResultsContent) ?? ('collection.no_results_label' | bbLocalize)\"\n                   class=\"bb-collections-table-info-text\">\n                    <strong *bbLocalizeTemplate=\"'query'\">{{ query ?? '...' }}</strong>\n                </p>\n            </ng-template>\n        } @else {\n            <ng-template [bbTemplate]=\"emptyContent\">\n                <p class=\"bb-collections-table-info-text\">\n                    {{ $any(emptyContent) ?? ('collection.empty_label' | bbLocalize) }}\n                </p>\n            </ng-template>\n        }\n    </div>\n    <div *bbCollectionsError=\"let error = error\"\n         class=\"bb-collections-table-info\">\n        <div class=\"bb-collections-table-image error\"></div>\n        <ng-template [bbTemplate]=\"errorContent\">\n            <p class=\"bb-collections-table-info-text\">\n                {{ $any(errorContent) ?? ('collection.error_label' | bbLocalize) }}\n            </p>\n        </ng-template>\n    </div>\n    <div *bbCollectionsInitial\n         class=\"bb-collections-table-info\">\n        <bb-spinner class=\"block\"></bb-spinner>\n    </div>\n</div>\n\n@if (!hidePager) {\n    <footer class=\"bb-collections-table-footer\">\n        <bb-collections-pager [collection]=\"collection\"></bb-collections-pager>\n    </footer>\n}\n", styles: ["@charset \"UTF-8\";.bb-collections-table{color:#111;display:block;position:relative;font-size:.875rem;border-radius:.5rem;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-collections-table.include-vertical-lines td:not(:last-child),.bb-collections-table.include-vertical-lines th:not(:last-child){border-right:1px solid hsl(213,8%,90%)}.bb-collections-table-footer{padding:.75rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;background-color:#fbf9f9;border-top:1px solid hsl(213,8%,90%)}.bb-collections-table-container{overflow-x:auto;position:relative}.bb-collections-table-container.loading>table>tbody,.bb-collections-table-container.loading>.bb-collections-table-info{animation:collectionsBlink 1s linear infinite}.bb-collections-table-container.loading:after{top:0;left:0;right:0;z-index:1;opacity:0;content:\"\";height:.25rem;position:absolute;will-change:left,right;background-color:#1565c1;animation:collectionsFadeIn .12s cubic-bezier(.65,.815,.735,.395) .4s forwards,collectionsIndeterminate 2.1s cubic-bezier(.65,.815,.735,.395) .4s infinite}.bb-collections-table-container>table{width:100%}.bb-collections-table-container>table th,.bb-collections-table-container>table td{padding:1rem;text-align:left;font-weight:400;font-size:.875rem}.bb-collections-table-container>table th.fit,.bb-collections-table-container>table td.fit{width:1%;white-space:nowrap}.bb-collections-table-container>table th.left,.bb-collections-table-container>table td.left{text-align:left}.bb-collections-table-container>table th.right,.bb-collections-table-container>table td.right{text-align:right}.bb-collections-table-container>table>thead{background-color:#fbf9f9;border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-table-container>table>thead>tr>th{padding:1rem;color:#525252}.bb-collections-table-container>table>tbody>tr>td{color:#111}.bb-collections-table-container>table>tbody>tr:not(:last-child){border-bottom:1px solid hsl(213,8%,90%)}.bb-collections-table-info{padding:3rem 1.5rem}.bb-collections-table-info-text{color:#525252;margin:0 auto;display:block;line-height:2;max-width:30rem;text-align:center;font-size:.875rem}.bb-collections-table-info-text>strong{font-weight:500}.bb-collections-table-info-text>strong:before{content:\"\\201c\"}.bb-collections-table-info-text>strong:after{content:\"\\201d\"}.bb-collections-table-image{width:100%;height:auto;display:flex;max-width:7.5rem;margin:0 auto 1.5rem;background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-collections-table-image.empty{aspect-ratio:154/132;-webkit-mask-image:linear-gradient(to bottom,black 25%,transparent 100%);mask-image:linear-gradient(to bottom,black 25%,transparent 100%);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 154 132\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3Cg transform=\"translate(0 46)\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3C/g%3E%3Cg transform=\"translate(0 92)\"%3E%3Crect width=\"154\" height=\"40\" fill=\"%23FFF\" fill-rule=\"nonzero\" rx=\"8\"/%3E%3Crect width=\"24\" height=\"24\" x=\"8\" y=\"8\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"4\"/%3E%3Crect width=\"60\" height=\"6\" x=\"40\" y=\"11\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"106\" height=\"6\" x=\"40\" y=\"23\" fill=\"%23E5E7EB\" fill-rule=\"nonzero\" rx=\"3\"/%3E%3Crect width=\"153\" height=\"39\" x=\".5\" y=\".5\" stroke=\"%23E5E7EB\" rx=\"7.5\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')}.bb-collections-table-image.error{max-width:4rem;aspect-ratio:1;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"%3E%3Cpath fill=\"%23C23934\" d=\"M65.958253 98.6024096c.8892771 0 1.6486747-.3008433 2.2781928-.9025301.6295181-.6016867.9442771-1.3471687.9442771-2.2364458 0-.8892771-.3008434-1.6486747-.9025301-2.2781927-.6016868-.6295181-1.3471687-.9442771-2.2364458-.9442771-.8892771 0-1.6486747.3008433-2.2781928.9025301-.6295181.6016867-.9442771 1.3471687-.9442771 2.2364458 0 .8892771.3008434 1.6486747.9025301 2.2781927.6016868.6295181 1.3471687.9442771 2.2364458.9442771Zm-1.9462048-21.4698795h3.9759036V29.4216867h-3.9759036v47.7108434ZM66.0894578 132c-9.0716867 0-17.6205421-1.715602-25.6465662-5.146807-8.0260241-3.431205-15.0547591-8.159217-21.0862049-14.184036-6.032771-6.02482-10.76674694-13.0416269-14.20192766-21.0504221C1.71825301 83.6086145 0 75.0504819 0 65.9443373 0 56.8368675 1.71560241 48.303253 5.14680723 40.343494c3.43120482-7.9597591 8.15921687-14.9553615 14.18403617-20.9868073 6.0248193-6.032771 13.0416265-10.76674694 21.0504217-14.20192766C48.3913855 1.71825301 56.9495181 0 66.0556627 0 75.1631325 0 83.696747 1.71560241 91.656506 5.14680723c7.9597591 3.43120482 14.955361 8.15921687 20.986807 14.18403617 6.032771 6.0248193 10.766747 13.0263855 14.201928 21.0046988C130.281747 48.3138554 132 56.8388554 132 65.9105422c0 9.0716867-1.715602 17.6205421-5.146807 25.6465662-3.431205 8.0260241-8.159217 15.0547586-14.184036 21.0862046-6.02482 6.032771-13.0263859 10.766747-21.0046992 14.201928C83.6861446 130.281747 75.1611446 132 66.0894578 132ZM66 128.024096c17.2289157 0 31.873494-6.03012 43.933735-18.090361C121.993976 97.873494 128.024096 83.2289157 128.024096 66c0-17.2289157-6.03012-31.873494-18.090361-43.9337349C97.873494 10.0060241 83.2289157 3.97590361 66 3.97590361c-17.2289157 0-31.873494 6.03012049-43.9337349 18.09036149C10.0060241 34.126506 3.97590361 48.7710843 3.97590361 66c0 17.2289157 6.03012049 31.873494 18.09036149 43.933735C34.126506 121.993976 48.7710843 128.024096 66 128.024096Z\"/%3E%3C/svg%3E')}@keyframes collectionsFadeIn{0%{opacity:0}to{opacity:1}}@keyframes collectionsIndeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes collectionsBlink{25%{opacity:.6}50%{opacity:.4}75%{opacity:.6}}\n"] }]
+        }], propDecorators: { dataRowTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsDataRow, { read: TemplateRef, static: false }]
+            }], queryPlaceholder: [{
+                type: Input
+            }], emptyContent: [{
+                type: Input
+            }], noResultsContent: [{
+                type: Input
+            }], errorContent: [{
+                type: Input
+            }], trackByProperty: [{
+                type: Input
+            }], includeVerticalLines: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hidePager: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], collection: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class BbCollectionsTableSorting {
+    constructor(_name, _changeDetectorRef, _parent) {
+        this._name = _name;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._parent = _parent;
+        // Readonly data.
+        this.orderedOptions = [null, 'asc', 'desc'];
+        // State.
+        this.direction = null;
+        // Subscription.
+        this._subscription = new Subscription();
+    }
+    ngOnInit() {
+        const direction$ = this._parent.collection$.pipe(switchMap(collection => getControlValue(collection.sortControl)), map(value => Array.isArray(value) ? value : [value]), map(value => value?.find(item => item?.name === this._name)), map(sorting => sorting?.direction ?? null), distinctUntilChanged());
+        const subscription = direction$.subscribe(direction => {
+            this.direction = direction;
+            this._changeDetectorRef.markForCheck();
+        });
+        this._subscription.add(subscription);
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    onClick() {
+        if (!this._name) {
+            return;
+        }
+        const nextDirection = this.getNextOption(this.direction);
+        const controlValue = nextDirection === null ? null : { name: this._name, direction: nextDirection };
+        this._parent?.collection?.sortControl?.setValue(controlValue);
+    }
+    getNextOption(direction) {
+        const index = this.orderedOptions.findIndex(item => item === direction);
+        const newIndex = (index + 1) % this.orderedOptions?.length;
+        return this.orderedOptions?.[newIndex] ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTableSorting, deps: [{ token: 'bb-collections-table-sorting', attribute: true }, { token: i0.ChangeDetectorRef }, { token: BbCollectionsTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbCollectionsTableSorting, isStandalone: true, selector: "th[bb-collections-table-sorting]", host: { listeners: { "click": "onClick()" }, properties: { "class.asc": "direction === 'asc'", "class.desc": "direction === 'desc'" }, classAttribute: "bb-collections-table-sorting" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-collections-table-sorting{cursor:pointer;-webkit-user-select:none;user-select:none;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E');background-repeat:no-repeat;padding-right:2.5rem!important;background-size:.5625rem .9375rem;background-position:center right 1rem;transition:background-color .12s cubic-bezier(0,0,.2,1)}.bb-collections-table-sorting:hover,.bb-collections-table-sorting:focus{background-color:#f4f0f0}.bb-collections-table-sorting:active{background-color:#f0ebeb}.bb-collections-table-sorting.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-collections-table-sorting.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTableSorting, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[bb-collections-table-sorting]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-collections-table-sorting',
+                        '[class.asc]': 'direction === \'asc\'',
+                        '[class.desc]': 'direction === \'desc\''
+                    }, preserveWhitespaces: false, standalone: true, template: "<ng-content></ng-content>\n", styles: [".bb-collections-table-sorting{cursor:pointer;-webkit-user-select:none;user-select:none;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E');background-repeat:no-repeat;padding-right:2.5rem!important;background-size:.5625rem .9375rem;background-position:center right 1rem;transition:background-color .12s cubic-bezier(0,0,.2,1)}.bb-collections-table-sorting:hover,.bb-collections-table-sorting:focus{background-color:#f4f0f0}.bb-collections-table-sorting:active{background-color:#f0ebeb}.bb-collections-table-sorting.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-collections-table-sorting.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['bb-collections-table-sorting']
+                }] }, { type: i0.ChangeDetectorRef }, { type: BbCollectionsTable, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BbCollectionsTableLabel {
+    constructor() {
+        // Inputs.
+        this.titleLabel = null;
+        this.descriptionLabel = null;
+        this.imageUrl = null;
+        this.alt = null;
+        this.type = 'image';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTableLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCollectionsTableLabel, isStandalone: true, selector: "[bb-collections-table-label]", inputs: { titleLabel: "titleLabel", descriptionLabel: "descriptionLabel", imageUrl: "imageUrl", alt: "alt", type: "type" }, host: { classAttribute: "bb-collections-table-label" }, ngImport: i0, template: "@switch (type) {\n    @case ('avatar') {\n        <bb-avatar [title]=\"alt ?? '...'\"\n                   [src]=\"imageUrl\"\n                   [size]=\"2\"\n                   class=\"bb-collections-table-label-avatar\">\n        </bb-avatar>\n    }\n    @case ('content') {\n        <ng-content></ng-content>\n    }\n    @default {\n        @if (imageUrl; as src) {\n            <div [style.background-image]=\"'url(' + src + ')'\"\n                 class=\"bb-collections-table-label-image\"></div>\n        }\n    }\n}\n\n<div class=\"bb-collections-table-label-content\">\n    <span class=\"bb-collections-table-label-title\">{{ titleLabel }}</span>\n    @if (descriptionLabel) {\n        <small class=\"bb-collections-table-label-description\">{{ descriptionLabel }}</small>\n    }\n</div>\n", styles: [".bb-collections-table-label{align-items:center;display:inline-flex}a.bb-collections-table-label{text-decoration:none}a.bb-collections-table-label>.bb-collections-table-label-content>.bb-collections-table-label-title,a.bb-collections-table-label:visited>.bb-collections-table-label-content>.bb-collections-table-label-title{text-underline-offset:.25rem;text-decoration-thickness:1px;text-decoration:dotted underline;color:var(--bb-collections-table-label-color)}a.bb-collections-table-label>.bb-collections-table-label-content>.bb-collections-table-label-description,a.bb-collections-table-label:visited>.bb-collections-table-label-content>.bb-collections-table-label-description{color:#758795}a.bb-collections-table-label:hover>.bb-collections-table-label-content>.bb-collections-table-label-title,a.bb-collections-table-label:focus>.bb-collections-table-label-content>.bb-collections-table-label-title{text-decoration-style:solid}.bb-collections-table-label-image,.bb-collections-table-label-avatar{width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin-right:.5rem}.bb-collections-table-label-image{background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-collections-table-label-content{display:block}.bb-collections-table-label-title{display:block;color:#111;font-size:.875rem}.bb-collections-table-label-description{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"], dependencies: [{ kind: "component", type: BbAvatar, selector: "bb-avatar", inputs: ["size", "src", "title", "tintColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsTableLabel, decorators: [{
+            type: Component,
+            args: [{ selector: '[bb-collections-table-label]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-table-label' }, preserveWhitespaces: false, imports: [
+                        BbAvatar
+                    ], standalone: true, template: "@switch (type) {\n    @case ('avatar') {\n        <bb-avatar [title]=\"alt ?? '...'\"\n                   [src]=\"imageUrl\"\n                   [size]=\"2\"\n                   class=\"bb-collections-table-label-avatar\">\n        </bb-avatar>\n    }\n    @case ('content') {\n        <ng-content></ng-content>\n    }\n    @default {\n        @if (imageUrl; as src) {\n            <div [style.background-image]=\"'url(' + src + ')'\"\n                 class=\"bb-collections-table-label-image\"></div>\n        }\n    }\n}\n\n<div class=\"bb-collections-table-label-content\">\n    <span class=\"bb-collections-table-label-title\">{{ titleLabel }}</span>\n    @if (descriptionLabel) {\n        <small class=\"bb-collections-table-label-description\">{{ descriptionLabel }}</small>\n    }\n</div>\n", styles: [".bb-collections-table-label{align-items:center;display:inline-flex}a.bb-collections-table-label{text-decoration:none}a.bb-collections-table-label>.bb-collections-table-label-content>.bb-collections-table-label-title,a.bb-collections-table-label:visited>.bb-collections-table-label-content>.bb-collections-table-label-title{text-underline-offset:.25rem;text-decoration-thickness:1px;text-decoration:dotted underline;color:var(--bb-collections-table-label-color)}a.bb-collections-table-label>.bb-collections-table-label-content>.bb-collections-table-label-description,a.bb-collections-table-label:visited>.bb-collections-table-label-content>.bb-collections-table-label-description{color:#758795}a.bb-collections-table-label:hover>.bb-collections-table-label-content>.bb-collections-table-label-title,a.bb-collections-table-label:focus>.bb-collections-table-label-content>.bb-collections-table-label-title{text-decoration-style:solid}.bb-collections-table-label-image,.bb-collections-table-label-avatar{width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin-right:.5rem}.bb-collections-table-label-image{background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-collections-table-label-content{display:block}.bb-collections-table-label-title{display:block;color:#111;font-size:.875rem}.bb-collections-table-label-description{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"] }]
+        }], propDecorators: { titleLabel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], descriptionLabel: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], type: [{
                 type: Input
             }] } });
 
+class BbCollectionsGrid {
+    constructor() {
+        // Readonly data.
+        this.collection$ = new BehaviorSubject(null);
+        // Inputs.
+        this.queryPlaceholder = null;
+        this.hideActions = false;
+        this.hidePager = false;
+    }
+    set collection(collection) {
+        this.collection$.next(collection);
+    }
+    get collection() {
+        return this.collection$.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCollectionsGrid, isStandalone: true, selector: "bb-collections-grid", inputs: { queryPlaceholder: "queryPlaceholder", hideActions: ["hideActions", "hideActions", booleanAttribute], hidePager: ["hidePager", "hidePager", booleanAttribute], collection: "collection" }, host: { classAttribute: "bb-collections-grid" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: BbCollectionsItem, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!hideActions) {\n    <bb-collections-actions [collection]=\"collection\"\n                            [queryPlaceholder]=\"queryPlaceholder\"\n                            standalone>\n        <ng-content ngProjectAs=\"[data-collections-action]\"\n                    select=\"[data-collections-action]\"></ng-content>\n        <ng-content ngProjectAs=\"[data-collections-row]\"\n                    select=\"[data-collections-row]\"></ng-content>\n    </bb-collections-actions>\n}\n\n<div [collection]=\"collection\"\n     class=\"bb-collections-grid-container\"\n     bb-collections-viewer>\n    <ul *bbCollectionsData=\"let items = items\"\n        class=\"bb-collections-grid-list\">\n        @for (item of items; track $index) {\n            <li class=\"bb-collections-grid-item\">\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, item: item}\"></ng-container>\n            </li>\n        }\n    </ul>\n</div>\n\n@if (!hidePager) {\n    <footer class=\"bb-collections-grid-footer\">\n        <bb-collections-pager [collection]=\"collection\"></bb-collections-pager>\n    </footer>\n}\n", styles: [".bb-collections-grid{display:block}.bb-collections-grid-list{gap:1.5rem;display:flex;flex-wrap:wrap}.bb-collections-grid-item{width:100%;display:flex}.bb-collections-grid-footer{margin-top:1.5rem}\n"], dependencies: [{ kind: "directive", type: BbCollectionsData, selector: "[bbCollectionsData]" }, { kind: "component", type: BbCollectionsViewer, selector: "[bb-collections-viewer]", inputs: ["collection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BbCollectionsActions, selector: "bb-collections-actions", inputs: ["collection", "queryPlaceholder", "standalone"] }, { kind: "component", type: BbCollectionsPager, selector: "bb-collections-pager", inputs: ["maxAmountOfButtons", "collection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCollectionsGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-collections-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-collections-grid' }, preserveWhitespaces: false, standalone: true, imports: [
+                        BbCollectionsData,
+                        BbCollectionsViewer,
+                        NgTemplateOutlet,
+                        BbCollectionsActions,
+                        BbCollectionsPager
+                    ], template: "@if (!hideActions) {\n    <bb-collections-actions [collection]=\"collection\"\n                            [queryPlaceholder]=\"queryPlaceholder\"\n                            standalone>\n        <ng-content ngProjectAs=\"[data-collections-action]\"\n                    select=\"[data-collections-action]\"></ng-content>\n        <ng-content ngProjectAs=\"[data-collections-row]\"\n                    select=\"[data-collections-row]\"></ng-content>\n    </bb-collections-actions>\n}\n\n<div [collection]=\"collection\"\n     class=\"bb-collections-grid-container\"\n     bb-collections-viewer>\n    <ul *bbCollectionsData=\"let items = items\"\n        class=\"bb-collections-grid-list\">\n        @for (item of items; track $index) {\n            <li class=\"bb-collections-grid-item\">\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, item: item}\"></ng-container>\n            </li>\n        }\n    </ul>\n</div>\n\n@if (!hidePager) {\n    <footer class=\"bb-collections-grid-footer\">\n        <bb-collections-pager [collection]=\"collection\"></bb-collections-pager>\n    </footer>\n}\n", styles: [".bb-collections-grid{display:block}.bb-collections-grid-list{gap:1.5rem;display:flex;flex-wrap:wrap}.bb-collections-grid-item{width:100%;display:flex}.bb-collections-grid-footer{margin-top:1.5rem}\n"] }]
+        }], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: [BbCollectionsItem, { read: TemplateRef, static: false }]
+            }], queryPlaceholder: [{
+                type: Input
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hidePager: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], collection: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 class Collection {
     constructor(_provider, _initialValues = {}) {
         this._provider = _provider;
@@ -405,49 +729,70 @@ class Collection {
 }
 
 class CollectionsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: CollectionsModule, declarations: [
-            // Components.
-            BbCollectionsViewer,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CollectionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: CollectionsModule, imports: [BbCollectionsViewer,
             BbCollectionsPager,
-            // Directives.
+            BbCollectionsTable,
+            BbCollectionsTableSorting,
+            BbCollectionsTableLabel,
+            BbCollectionsGrid,
+            BbCollectionsActions,
             BbCollectionsData,
+            BbCollectionsDataRow,
             BbCollectionsEmpty,
             BbCollectionsError,
-            BbCollectionsInitial], imports: [CommonModule], exports: [
-            // Components.
-            BbCollectionsViewer,
+            BbCollectionsInitial,
+            BbCollectionsItem], exports: [BbCollectionsViewer,
             BbCollectionsPager,
-            // Directives.
+            BbCollectionsTable,
+            BbCollectionsTableSorting,
+            BbCollectionsTableLabel,
+            BbCollectionsGrid,
+            BbCollectionsActions,
             BbCollectionsData,
+            BbCollectionsDataRow,
             BbCollectionsEmpty,
             BbCollectionsError,
-            BbCollectionsInitial] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CollectionsModule, imports: [CommonModule] }); }
+            BbCollectionsInitial,
+            BbCollectionsItem] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CollectionsModule, imports: [BbCollectionsPager,
+            BbCollectionsTable,
+            BbCollectionsTableLabel,
+            BbCollectionsGrid,
+            BbCollectionsActions] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CollectionsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CollectionsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        // Components.
+                    imports: [
                         BbCollectionsViewer,
                         BbCollectionsPager,
-                        // Directives.
+                        BbCollectionsTable,
+                        BbCollectionsTableSorting,
+                        BbCollectionsTableLabel,
+                        BbCollectionsGrid,
+                        BbCollectionsActions,
                         BbCollectionsData,
+                        BbCollectionsDataRow,
                         BbCollectionsEmpty,
                         BbCollectionsError,
-                        BbCollectionsInitial
+                        BbCollectionsInitial,
+                        BbCollectionsItem
                     ],
                     exports: [
-                        // Components.
                         BbCollectionsViewer,
                         BbCollectionsPager,
-                        // Directives.
+                        BbCollectionsTable,
+                        BbCollectionsTableSorting,
+                        BbCollectionsTableLabel,
+                        BbCollectionsGrid,
+                        BbCollectionsActions,
                         BbCollectionsData,
+                        BbCollectionsDataRow,
                         BbCollectionsEmpty,
                         BbCollectionsError,
-                        BbCollectionsInitial
+                        BbCollectionsInitial,
+                        BbCollectionsItem
                     ]
                 }]
         }] });
@@ -456,5 +801,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApiCollectionProvider, BbCollectionsData, BbCollectionsEmpty, BbCollectionsError, BbCollectionsInitial, BbCollectionsPager, BbCollectionsViewer, Collection, CollectionProvider, CollectionsModule, LocalCollectionProvider };
+export { ApiCollectionProvider, BbCollectionsActions, BbCollectionsData, BbCollectionsDataContext, BbCollectionsDataRow, BbCollectionsDataRowContext, BbCollectionsEmpty, BbCollectionsEmptyContext, BbCollectionsError, BbCollectionsErrorContext, BbCollectionsGrid, BbCollectionsInitial, BbCollectionsInitialContext, BbCollectionsItem, BbCollectionsItemContext, BbCollectionsPager, BbCollectionsTable, BbCollectionsTableLabel, BbCollectionsTableSorting, BbCollectionsViewer, Collection, CollectionProvider, CollectionsModule, LocalCollectionProvider };
 //# sourceMappingURL=bravobit-bb-foundation-collections.mjs.map