@devopmaat/badaboom 1.2.0 → 1.2.2

package/fesm2022/devopmaat-badaboom.mjs

@@ -30,7 +30,9 @@ import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$1 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i1$2 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1$3 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i3$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -872,8 +874,13 @@ class BdbColumnBuilder {
         };
     }
     _buildCommonOptions(type, field, title, options = undefined) {
-        const fxString = field.toString();
-        const id = options?.id ?? fxString.substring(fxString.lastIndexOf('.') + 1).trim();
+        const id = options?.id ??
+            field
+                .toString()
+                .split('.')
+                .slice(1)
+                .map(x => x.replace(/(\?|!)$/, ''))
+                .join('.');
         return {
             type: type,
             id: id,
@@ -1160,8 +1167,7 @@ class BdbTableComponent {
     sortData(event) {
         const column = this.columns.find(x => x.id === event.active);
         if (column) {
-            const fxString = column.field.toString();
-            this.dataSource.request.sortField = fxString.substring(fxString.lastIndexOf('.') + 1).trim();
+            this.dataSource.request.sortField = column.id;
             this.dataSource.request.sortDirection = event.direction;
             this.dataSource.load();
         }
@@ -1270,6 +1276,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
+class LayoutError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}
+
+const DEFAULT_FLEX_DIRECTION = 'row';
+const DEFAULT_FLEX_GAP = '';
+const DEFAULT_FLEX_SPACING = {
+    justify: 'start',
+    align: 'stretch',
+};
+class BdbFlexDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbFlex = '';
+        this.bdbFlexDirection = '';
+        this.bdbFlexGap = '';
+        this.bdbFlexSpacing = '';
+    }
+    ngOnInit() {
+        this.renderer.setStyle(this.element.nativeElement, 'display', 'flex');
+        const bdbFlexInputs = this.bdbFlex.split(' ').filter(x => !!x);
+        this.setDirection(bdbFlexInputs[0]);
+        this.setGap(bdbFlexInputs[1]);
+        this.setSpacing({
+            justify: bdbFlexInputs[2],
+            align: bdbFlexInputs[3],
+        });
+    }
+    setDirection(bdbFlexInput) {
+        const direction = this.validateDirection(this.getDirection(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'flex-direction', direction);
+    }
+    getDirection(bdbFlexInput) {
+        const trimmedBdbFlexDirection = this.bdbFlexDirection.trim();
+        if (trimmedBdbFlexDirection) {
+            return trimmedBdbFlexDirection;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_DIRECTION;
+    }
+    validateDirection(direction) {
+        switch (direction) {
+            case 'row':
+                return 'row';
+            case 'col':
+                return 'column';
+            default:
+                throw new LayoutError(`'${direction}' is not a valid value for flex direction`);
+        }
+    }
+    setGap(bdbFlexInput) {
+        const gap = this.validateGap(this.getGap(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
+    }
+    getGap(bdbFlexInput) {
+        const trimmedBdbFlexGap = this.bdbFlexGap.trim();
+        if (trimmedBdbFlexGap) {
+            return trimmedBdbFlexGap;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_GAP;
+    }
+    validateGap(gap) {
+        return gap;
+    }
+    setSpacing(bdbFlexInput) {
+        const spacing = this.validateSpacing(this.getSpacing(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'align-items', spacing.align);
+        this.renderer.setStyle(this.element.nativeElement, 'justify-content', spacing.justify);
+    }
+    getSpacing(bdbFlexInput) {
+        const splitBdbFlexSpacing = this.bdbFlexSpacing.split(' ').filter(x => !!x);
+        if (splitBdbFlexSpacing.length === 2) {
+            return {
+                align: splitBdbFlexSpacing[0],
+                justify: splitBdbFlexSpacing[1],
+            };
+        }
+        if (bdbFlexInput.align && bdbFlexInput.justify) {
+            return {
+                align: bdbFlexInput.align,
+                justify: bdbFlexInput.justify,
+            };
+        }
+        return DEFAULT_FLEX_SPACING;
+    }
+    validateSpacing(spacing) {
+        return spacing;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFlexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlex: [{
+                type: Input
+            }], bdbFlexDirection: [{
+                type: Input
+            }], bdbFlexGap: [{
+                type: Input
+            }], bdbFlexSpacing: [{
+                type: Input
+            }] } });
+
+class BdbFullTableComponent {
+    constructor() {
+        this.columns = [];
+        this.displayedColumns = [];
+        this.contextActions = [];
+        this.showToolbar = true;
+        this.rowClick = new EventEmitter();
+        this.contextAction = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: BdbFullTableComponent, isStandalone: true, selector: "bdb-full-table", inputs: { dataSource: "dataSource", columns: "columns", displayedColumns: "displayedColumns", selection: "selection", contextActions: "contextActions", rowColor: "rowColor", showToolbar: "showToolbar" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, ngImport: i0, template: "@if (showToolbar) {\r\n  <mat-toolbar bdbFlex=\"row 8px space-between center\" style=\"flex: 0 0 auto\">\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  <ng-content></ng-content>\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\" style=\"flex: 0 0 auto\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--sys-surface-container-lowest)}\n"], dependencies: [{ kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: BdbQueryInputComponent, selector: "bdb-query-input[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorComponent, selector: "bdb-paginator", inputs: ["dataSource"] }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFullTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-full-table', standalone: true, imports: [BdbFlexDirective, MatToolbarModule, BdbQueryInputComponent, BdbPaginatorComponent, BdbTableComponent], template: "@if (showToolbar) {\r\n  <mat-toolbar bdbFlex=\"row 8px space-between center\" style=\"flex: 0 0 auto\">\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  <ng-content></ng-content>\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\" style=\"flex: 0 0 auto\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--sys-surface-container-lowest)}\n"] }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], rowColor: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextAction: [{
+                type: Output
+            }] } });
+
 class ExceptionLogTableComponent {
     constructor(cb, router, activatedRoute) {
         this.cb = cb;
@@ -1482,13 +1638,13 @@ class UserTableComponent {
         //       break;
         //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$2.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$3.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: UserTableComponent, isStandalone: true, selector: "bdb-user-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UserTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-user-table[dataSource]', standalone: true, imports: [CommonModule, BdbTableComponent, MatDialogModule, BdbCellDirective], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
+        }], ctorParameters: () => [{ type: i1$3.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
@@ -1498,121 +1654,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
-class LayoutError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-
-const DEFAULT_FLEX_DIRECTION = 'row';
-const DEFAULT_FLEX_GAP = '';
-const DEFAULT_FLEX_SPACING = {
-    justify: 'start',
-    align: 'stretch',
-};
-class BdbFlexDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.bdbFlex = '';
-        this.bdbFlexDirection = '';
-        this.bdbFlexGap = '';
-        this.bdbFlexSpacing = '';
-    }
-    ngOnInit() {
-        this.renderer.setStyle(this.element.nativeElement, 'display', 'flex');
-        const bdbFlexInputs = this.bdbFlex.split(' ').filter(x => !!x);
-        this.setDirection(bdbFlexInputs[0]);
-        this.setGap(bdbFlexInputs[1]);
-        this.setSpacing({
-            justify: bdbFlexInputs[2],
-            align: bdbFlexInputs[3],
-        });
-    }
-    setDirection(bdbFlexInput) {
-        const direction = this.validateDirection(this.getDirection(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'flex-direction', direction);
-    }
-    getDirection(bdbFlexInput) {
-        const trimmedBdbFlexDirection = this.bdbFlexDirection.trim();
-        if (trimmedBdbFlexDirection) {
-            return trimmedBdbFlexDirection;
-        }
-        if (bdbFlexInput) {
-            return bdbFlexInput;
-        }
-        return DEFAULT_FLEX_DIRECTION;
-    }
-    validateDirection(direction) {
-        switch (direction) {
-            case 'row':
-                return 'row';
-            case 'col':
-                return 'column';
-            default:
-                throw new LayoutError(`'${direction}' is not a valid value for flex direction`);
-        }
-    }
-    setGap(bdbFlexInput) {
-        const gap = this.validateGap(this.getGap(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
-    }
-    getGap(bdbFlexInput) {
-        const trimmedBdbFlexGap = this.bdbFlexGap.trim();
-        if (trimmedBdbFlexGap) {
-            return trimmedBdbFlexGap;
-        }
-        if (bdbFlexInput) {
-            return bdbFlexInput;
-        }
-        return DEFAULT_FLEX_GAP;
-    }
-    validateGap(gap) {
-        return gap;
-    }
-    setSpacing(bdbFlexInput) {
-        const spacing = this.validateSpacing(this.getSpacing(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'align-items', spacing.align);
-        this.renderer.setStyle(this.element.nativeElement, 'justify-content', spacing.justify);
-    }
-    getSpacing(bdbFlexInput) {
-        const splitBdbFlexSpacing = this.bdbFlexSpacing.split(' ').filter(x => !!x);
-        if (splitBdbFlexSpacing.length === 2) {
-            return {
-                align: splitBdbFlexSpacing[0],
-                justify: splitBdbFlexSpacing[1],
-            };
-        }
-        if (bdbFlexInput.align && bdbFlexInput.justify) {
-            return {
-                align: bdbFlexInput.align,
-                justify: bdbFlexInput.justify,
-            };
-        }
-        return DEFAULT_FLEX_SPACING;
-    }
-    validateSpacing(spacing) {
-        return spacing;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbFlexDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlex: [{
-                type: Input
-            }], bdbFlexDirection: [{
-                type: Input
-            }], bdbFlexGap: [{
-                type: Input
-            }], bdbFlexSpacing: [{
-                type: Input
-            }] } });
-
 class BdbFlexChildDirective {
     constructor(element, renderer) {
         this.element = element;
@@ -1870,6 +1911,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
+class BdbCollapseRowComponent {
+    constructor() {
+        this.collapsed = false;
+        this.canCollapse = true;
+        this.class = 'bdb-collapse-row';
+    }
+    get isCollapsed() {
+        return this.collapsed;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BdbCollapseRowComponent, isStandalone: true, selector: "bdb-collapse-row", inputs: { collapsed: "collapsed", canCollapse: "canCollapse" }, host: { properties: { "class": "this.class", "class.collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-collapse-row', standalone: true, imports: [MatIconModule], template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"] }]
+        }], propDecorators: { collapsed: [{
+                type: Input
+            }], canCollapse: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], isCollapsed: [{
+                type: HostBinding,
+                args: ['class.collapsed']
+            }] } });
+
 class BdbFieldComponent {
     constructor() {
         this.class = 'bdb-field';
@@ -2462,5 +2530,5 @@ var resetPasswordPage_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AccessDeniedPageComponent, AuthContainerComponent, AuthService, BDB_OPTIONS, BdbAlertComponent, BdbAlertErrorResponseComponent, BdbBooleanDisplayComponent, BdbCellDirective, BdbColumnBuilder, BdbColumnType, BdbDataSource, BdbFieldComponent, BdbFlexChildDirective, BdbFlexDirective, BdbFormErrorDirective, BdbGridChildDirective, BdbGridDirective, BdbOptionsBuilder, BdbPaginatorComponent, BdbQueryInputComponent, BdbSearchComponent, BdbSearchWrapperBaseComponent, BdbService, BdbServiceCR, BdbServiceCRD, BdbServiceCRU, BdbServiceCRUD, BdbServiceR, BdbServiceRD, BdbServiceRU, BdbServiceRUD, BdbTableComponent, ExceptionLogService, ExceptionLogTableComponent, ForgotPasswordPageComponent, InvalidTokenPageComponent, LoginPageComponent, LogoutPageComponent, MediaService, MediaType, PlainNumberPipe, ResetPasswordPageComponent, RoleService, TaskLogOutcome, TaskLogOutcomePipe, TaskLogParameterService, TaskLogParameterType, TaskLogParameterValuePipe, TaskLogScheduleService, TaskLogSchedulerService, TaskLogService, TaskLogStatus, TaskLogStatusPipe, TaskLogTypeService, UserRoleService, UserService, UserTableComponent, equalValueValidator, getAuthorizationHeaderFromToken, getTokenFromAuthorizationHeader, loggedOutGuard, provideBaDaBoom, resetPasswordResolver, roleGuard, tokenExpiredInterceptor, tokenInterceptor };
+export { AccessDeniedPageComponent, AuthContainerComponent, AuthService, BDB_OPTIONS, BdbAlertComponent, BdbAlertErrorResponseComponent, BdbBooleanDisplayComponent, BdbCellDirective, BdbCollapseRowComponent, BdbColumnBuilder, BdbColumnType, BdbDataSource, BdbFieldComponent, BdbFlexChildDirective, BdbFlexDirective, BdbFormErrorDirective, BdbFullTableComponent, BdbGridChildDirective, BdbGridDirective, BdbOptionsBuilder, BdbPaginatorComponent, BdbQueryInputComponent, BdbSearchComponent, BdbSearchWrapperBaseComponent, BdbService, BdbServiceCR, BdbServiceCRD, BdbServiceCRU, BdbServiceCRUD, BdbServiceR, BdbServiceRD, BdbServiceRU, BdbServiceRUD, BdbTableComponent, ExceptionLogService, ExceptionLogTableComponent, ForgotPasswordPageComponent, InvalidTokenPageComponent, LoginPageComponent, LogoutPageComponent, MediaService, MediaType, PlainNumberPipe, ResetPasswordPageComponent, RoleService, TaskLogOutcome, TaskLogOutcomePipe, TaskLogParameterService, TaskLogParameterType, TaskLogParameterValuePipe, TaskLogScheduleService, TaskLogSchedulerService, TaskLogService, TaskLogStatus, TaskLogStatusPipe, TaskLogTypeService, UserRoleService, UserService, UserTableComponent, equalValueValidator, getAuthorizationHeaderFromToken, getTokenFromAuthorizationHeader, loggedOutGuard, provideBaDaBoom, resetPasswordResolver, roleGuard, tokenExpiredInterceptor, tokenInterceptor };
 //# sourceMappingURL=devopmaat-badaboom.mjs.map