@elderbyte/ngx-starter 14.4.0-beta.18 → 14.4.0-beta.19

package/fesm2015/elderbyte-ngx-starter.mjs

@@ -10970,387 +10970,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 
 const ELDER_DATA_VIEW = new InjectionToken('Elder Data View');
 
-class ElderDialogConfig {
-}
-
-class ConfirmDialogConfig extends ElderDialogConfig {
-}
-class ElderConfirmDialogComponent {
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-        this.yesNo = false;
-    }
-}
-ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderConfirmDialogComponent, selector: "elder-confirm-dialog", ngImport: i0, template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions fxLayoutAlign=\"end center\" cdkTrapFocus>\n\n  <button type=\"button\" mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n  </button>\n\n  <button type=\"submit\" mat-raised-button cdkFocusInitial\n          (click)=\"dialogRef.close(true)\">\n    {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n  </button>\n\n</mat-dialog-actions>\n\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-confirm-dialog', template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions fxLayoutAlign=\"end center\" cdkTrapFocus>\n\n  <button type=\"button\" mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n  </button>\n\n  <button type=\"submit\" mat-raised-button cdkFocusInitial\n          (click)=\"dialogRef.close(true)\">\n    {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n  </button>\n\n</mat-dialog-actions>\n\n" }]
-        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }]; } });
-
-class QuestionDialogConfig extends ElderDialogConfig {
-}
-class ElderQuestionDialogComponent {
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-    }
-    ngOnInit() {
-    }
-    confirm(event) {
-        this.dialogRef.close(this.answer);
-    }
-    cancel(event) {
-        this.dialogRef.close();
-    }
-    get isValid() {
-        return !!this.answer;
-    }
-}
-ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderQuestionDialogComponent, selector: "elder-question-dialog", ngImport: i0, template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </mat-dialog-content>\n\n    <mat-dialog-actions fxLayoutAlign=\"end center\" >\n\n        <button mat-button type=\"button\"\n                (click)=\"cancel($event)\">\n            {{'actions.cancel' | translate}}\n        </button>\n\n        <button mat-button type=\"submit\" color=\"primary\"\n                [disabled]=\"!isValid\">\n          {{'actions.ok' | translate}}\n        </button>\n\n    </mat-dialog-actions>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-question-dialog', template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </mat-dialog-content>\n\n    <mat-dialog-actions fxLayoutAlign=\"end center\" >\n\n        <button mat-button type=\"button\"\n                (click)=\"cancel($event)\">\n            {{'actions.cancel' | translate}}\n        </button>\n\n        <button mat-button type=\"submit\" color=\"primary\"\n                [disabled]=\"!isValid\">\n          {{'actions.ok' | translate}}\n        </button>\n\n    </mat-dialog-actions>\n\n</form>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
-    } });
-
-class ElderDialogService {
+class DataViewOptionsProviderBinding {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dialog, translateService) {
-        this.dialog = dialog;
-        this.translateService = translateService;
+    constructor(_dataViewBaseComponent) {
+        this._dataViewBaseComponent = _dataViewBaseComponent;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.defaultDialogConfig = {
-            role: 'dialog',
-            disableClose: false,
-            autoFocus: true,
-            restoreFocus: true,
-            closeOnNavigation: false
-        };
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        if (_dataViewBaseComponent == null) {
+            throw new Error('dataViewBaseComponent must not be null!');
+        }
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Static Builder                                                          *
      *                                                                         *
      **************************************************************************/
-    /**
-     * @deprecated Use showConfirm({...}) instead
-     *
-     * @param title
-     * @param message
-     * @param config
-     */
-    confirm(title, message, config) {
-        return this.showConfirm({
-            title: title,
-            message: message,
-            config: config || this.defaultDialogConfig
-        });
+    static of(dataViewBaseComponent) {
+        return new DataViewOptionsProviderBinding(dataViewBaseComponent);
     }
-    /**
-     * Creates a modal confirmation dialog.
-     *
-     * @param config object for conform dialog
-     */
-    showConfirm(config) {
-        if (!config) {
-            throw new Error('Argument must not be null: config');
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    dataViewOptionsProvider(optionsProvider) {
+        if (!optionsProvider) {
+            throw new Error('dataViewSelection must not be null!');
         }
-        const rawMessages = new Map();
-        rawMessages.set('title', config.title);
-        rawMessages.set('message', config.message);
-        return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(switchMap(messages => {
-            const title = messages.get('title');
-            const message = messages.get('message');
-            let dialogRef;
-            dialogRef = this.dialog.open(ElderConfirmDialogComponent, config.config);
-            dialogRef.componentInstance.title = title;
-            dialogRef.componentInstance.message = message;
-            dialogRef.componentInstance.yesNo = config.yesNo;
-            return dialogRef.afterClosed();
-        }));
-    }
-    /**
-     * @deprecated Use showQuestion({...}) instead
-     *
-     * Creates a modal question dialog.
-     *
-     * @param title
-     * @param question
-     * @param config
-     */
-    question(title, question, config) {
-        return this.showQuestion({
-            title: title,
-            question: question,
-            config: config || this.defaultDialogConfig
-        });
+        this._optionsProvider = optionsProvider;
+        return this;
     }
-    /**
-     * Creates a modal question dialog.
-     *
-     * @param config
-     */
-    showQuestion(config) {
-        if (!config) {
-            throw new Error('Argument must not be null: config');
+    bindUntil(unsubscribe$) {
+        if (!this._optionsProvider) {
+            throw new Error('DataView must be defined to start binding. Use .dataView(dataView)!');
         }
-        const rawMessages = new Map();
-        rawMessages.set('title', config.title);
-        rawMessages.set('question', config.question);
-        return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(switchMap(messages => {
-            const title = messages.get('title');
-            const question = messages.get('question');
-            const dlgConf = config.config || new MatDialogConfig();
-            dlgConf.data = {
-                title: title,
-                question: question
-            };
-            const dialogRef = this.dialog.open(ElderQuestionDialogComponent, dlgConf);
-            return dialogRef.afterClosed()
-                .pipe(filter(response => !!response));
-        }));
+        this._optionsProvider.options$.pipe(takeUntil(unsubscribe$)).subscribe(options => this.applyOptions(options));
+        return this;
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    resolveTranslatedMap(messages, interpolateParams) {
-        const rawMessages = Array.from(messages.values());
-        return this.translateInterpolatedParams(interpolateParams).pipe(switchMap(translatedParams => this.translateService.get(rawMessages, translatedParams)), map(translatedValues => {
-            const translated = new Map();
-            messages.forEach((rawValue, key) => {
-                translated.set(key, translatedValues[rawValue] || rawValue);
-            });
-            return translated;
-        }));
-    }
-    /**
-     * Translates a list of params
-     *
-     * @param interpolateParams
-     */
-    translateInterpolatedParams(interpolateParams) {
-        if (!interpolateParams) {
-            return of({});
+    applyOptions(options) {
+        const dataCtx = this._dataViewBaseComponent.dataContext;
+        if (dataCtx) {
+            dataCtx.filter.updateFilters(options.filters);
+            dataCtx.sort.updateSorts(options.sorts);
         }
-        const values = Object.getOwnPropertyNames(interpolateParams)
-            .map(key => interpolateParams[key])
-            .filter(value => !!value)
-            .map(value => value + '');
-        return this.translateService.get(values).pipe(map(translated => {
-            Object.getOwnPropertyNames(interpolateParams)
-                .forEach(key => {
-                const value = interpolateParams[key];
-                interpolateParams[key] = translated[value];
-            });
-            return interpolateParams;
-        }));
+        this._dataViewBaseComponent.interactionMode = options.interactionMode;
+        this._dataViewBaseComponent.selectionMultiEnabled = options.selectionMultiEnabled;
     }
 }
-ElderDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, deps: [{ token: i1$7.MatDialog }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-ElderDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$7.MatDialog }, { type: i2.TranslateService }]; } });
 
-class ElderSelectionDialogComponent {
+/**
+ * Options for supporting data view components.
+ */
+class ElderDataViewOptions {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
+    constructor(sorts, filters, selectionMultiEnabled, interactionMode) {
+        this.sorts = sorts;
+        this.filters = filters;
+        this.selectionMultiEnabled = selectionMultiEnabled;
+        this.interactionMode = interactionMode;
     }
-    ngOnInit() {
+    static defaultOptions() {
+        return new ElderDataViewOptions([], [], false, 'open');
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    confirmSelection() {
-        this.dialogRef.close();
+    withSorts(sorts) {
+        return new ElderDataViewOptions(sorts, this.filters, this.selectionMultiEnabled, this.interactionMode);
     }
-    ngAfterViewInit() {
-        // this.dialogRef.updateSize('20vw', '20vh');
+    withFilters(filters) {
+        return new ElderDataViewOptions(this.sorts, filters, this.selectionMultiEnabled, this.interactionMode);
+    }
+    withSelectionMultiEnabled(selectionMultiEnabled) {
+        return new ElderDataViewOptions(this.sorts, this.filters, selectionMultiEnabled, this.interactionMode);
+    }
+    withInteractionMode(interactionMode) {
+        return new ElderDataViewOptions(this.sorts, this.filters, this.selectionMultiEnabled, interactionMode);
     }
 }
-ElderSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-selection-dialog', template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
-    }, propDecorators: { title: [{
-                type: Input
-            }] } });
 
-class ElderSelectionDialogDirective {
+class ElderDataViewOptionsProvider {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(templateRef, dialog) {
-        this.templateRef = templateRef;
-        this.dialog = dialog;
-        this.close = new EventEmitter();
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.options$ = new BehaviorSubject(ElderDataViewOptions.defaultOptions());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get options() {
+        return this.options$.getValue();
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    open() {
-        const dialogRef = this.dialog.open(ElderSelectionDialogComponent, {
-            data: {
-                template: this.templateRef,
-                selectionModel: this.selectionModel
-            },
-            width: '80vw',
-            height: '80vh'
-        });
-        dialogRef.afterClosed().subscribe(result => this.close.emit(result));
+    /**
+     * Example usage:
+     *
+     * this.updateOptions(
+     *      options => options.withInteractionMode('open')
+     *                        .withFilters([])
+     * )
+     *
+     * @param optionsFn function modifying the options
+     */
+    updateOptions(optionsFn) {
+        this.options$.next(optionsFn(this.options$.getValue()));
     }
 }
-ElderSelectionDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
-ElderSelectionDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogDirective, selector: "[elderDialog]", inputs: { selectionModel: "selectionModel" }, outputs: { close: "close" }, exportAs: ["elderSelection"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderDialog]',
-                    exportAs: 'elderSelection'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1$7.MatDialog }]; }, propDecorators: { selectionModel: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }] } });
-
-/**
- * @deprecated Please switch to ElderDialogService
- */
-class EbsCommonDialogService extends ElderDialogService {
-}
-EbsCommonDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-EbsCommonDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService, decorators: [{
-            type: Injectable
-        }] });
-class ElderDialogModule {
-    static forRoot() {
-        return {
-            ngModule: ElderDialogModule,
-            providers: [
-                // ElderDialogService,
-                EbsCommonDialogService
-            ]
-        };
-    }
-}
-ElderDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, declarations: [ElderConfirmDialogComponent,
-        ElderQuestionDialogComponent,
-        ElderSelectionDialogComponent,
-        ElderSelectionDialogDirective], imports: [CommonModule, FormsModule,
-        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
-        A11yModule,
-        FlexLayoutModule, TranslateModule], exports: [ElderConfirmDialogComponent,
-        ElderQuestionDialogComponent,
-        ElderSelectionDialogComponent,
-        ElderSelectionDialogDirective] });
-ElderDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, imports: [CommonModule, FormsModule,
-        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
-        A11yModule,
-        FlexLayoutModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule, FormsModule,
-                        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
-                        A11yModule,
-                        FlexLayoutModule, TranslateModule
-                    ],
-                    declarations: [
-                        ElderConfirmDialogComponent,
-                        ElderQuestionDialogComponent,
-                        ElderSelectionDialogComponent,
-                        ElderSelectionDialogDirective
-                    ],
-                    exports: [
-                        ElderConfirmDialogComponent,
-                        ElderQuestionDialogComponent,
-                        ElderSelectionDialogComponent,
-                        ElderSelectionDialogDirective
-                    ]
-                }]
-        }] });
 
-/**
- * This directive projects content identified by a placeholder id
- * into the toolbar at the corresponding place.
- */
-class ElderToolbarContentDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ElderToolbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ElderToolbarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: { placeholderId: ["elderToolbarContent", "placeholderId"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[elderToolbarContent]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { placeholderId: [{
-                type: Input,
-                args: ['elderToolbarContent']
-            }] } });
-class ElderDataToolbarComponent {
+class ElderDataViewBaseComponent {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel, dataView, dialogService) {
-        this.dialogService = dialogService;
-        this.canAdd = true;
-        this.canRemove = true;
-        this.canMore = true;
-        this.confirmRemoval = true;
-        this.keepSelectionAfterRemoval = false;
-        this.requestNew = new Subject();
-        this.requestRemove = new Subject();
-        this.selectionFallback = new BehaviorSubject([]);
-        this.selection$ = this.selectionFallback.asObservable();
-        if (selectionModel) {
-            this.selectionModel = selectionModel;
+    constructor(selectionModel, dataViewOptionsProvider) {
+        this.dataViewOptionsProvider = dataViewOptionsProvider;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        /**
+         * Underlying data context.
+         */
+        this.dataContext$ = new BehaviorSubject(null);
+        this.interactionMode = 'open';
+        /**
+         * Define if elder-table should clean up the
+         * data-context resources for you.
+         *
+         * In more advanced scenarios where you plan to reuse the same data-context
+         * set this to false and release the resources yourself. (dataContext.close)
+         */
+        this.cleanUp = true;
+        /**
+         * If true, this table is in dense mode.
+         * Heights are generally reduced.
+         */
+        this._dense = false;
+        /**
+         * If true, this table is in a floating card mode.
+         * Otherwise, it is flat on the current panel.
+         */
+        this._float = false;
+        /**
+         * If true, this table is in embedded mode.
+         * No borders / floating visible so that the table can be embedded into another container
+         */
+        this._embedded = false;
+        this._itemClickSubject = new Subject();
+        this.EntityIdKeyFn = (entity) => entity ? this.getId(entity) : 0;
+        this.destroy$ = new Subject();
+        if (!selectionModel) {
+            this.selectionModel = new SelectionModel(false, [], this.EntityIdKeyFn);
         }
-        if (dataView) {
-            this.selectionModel = dataView.selectionModel;
+        else {
+            this.selectionModel = selectionModel;
         }
     }
     /***************************************************************************
@@ -11358,1242 +11171,1433 @@ class ElderDataToolbarComponent {
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
+    ngOnInit() {
+        if (this.dataViewOptionsProvider) {
+            if (this.dataViewOptionsProvider.options.interactionMode === 'selection') {
+                this.selectionVisible = true;
+                this.float = false;
+            }
+            if (this.dataContext) {
+                DataViewOptionsProviderBinding.of(this)
+                    .dataViewOptionsProvider(this.dataViewOptionsProvider)
+                    .bindUntil(this.destroy$);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.autoCleanUp();
+    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set selectionModel(model) {
-        this._selectionModel = model;
-        if (model) {
-            this.selection$ = model.selection;
-        }
-        else {
-            this.selection$ = this.selectionFallback.asObservable();
+    get dataContext() {
+        return this.dataContext$.getValue();
+    }
+    set dataContext(data) {
+        this.dataContext$.next(data);
+        this.onDataContextSet(data);
+    }
+    get dataActivePaged() {
+        return this.dataContext;
+    }
+    get dataContinuable() {
+        return this.dataContext;
+    }
+    get isContinuable() {
+        if (!this.dataContext) {
+            return false;
         }
+        return isContinuableDataContext(this.dataContext);
     }
-    get selectionModel() {
-        return this._selectionModel;
+    get isActivePaged() {
+        if (!this.dataContext) {
+            return false;
+        }
+        return isActivePagedDataContext(this.dataContext);
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Selection Properties                                                    *
      *                                                                         *
      **************************************************************************/
-    getTemplate(placeholderId) {
-        if (!this.templates) {
-            return null;
-        }
-        const template = this.templates.find((item) => item.placeholderId === placeholderId);
-        return template ? template.templateRef : null;
+    set selectableEvaluatorFn(selectableEvaluatorFn) {
+        this.selectionModel.selectableEvaluatorFn = selectableEvaluatorFn;
     }
-    requestRemoveItems(items) {
-        if (this.confirmRemoval) {
-            this.dialogService
-                .showConfirm({
-                title: 'dialogs.confirm-deletion.title',
-                message: 'dialogs.confirm-deletion.message',
-                yesNo: true,
-                interpolateParams: { numOfItems: items.length },
-            })
-                .subscribe((confirmed) => {
-                if (confirmed) {
-                    this.emitRemove(items);
-                }
-            });
-        }
-        else {
-            this.emitRemove(items);
-        }
+    set selection(selection) {
+        this.selectionModel.replaceSelection(selection);
     }
-    emitRemove(items) {
-        this.requestRemove.next(items);
-        if (!this.keepSelectionAfterRemoval) {
-            // Clear the selection after deleting items
-            if (this._selectionModel) {
-                this._selectionModel.deselect(items);
+    get selectionChange() {
+        return this.selectionModel.changed;
+    }
+    get selectionSingleChange() {
+        return this.selectionModel.changed.pipe(map((selection) => {
+            if (selection.length > 0) {
+                return selection[0];
             }
+            else {
+                return null;
+            }
+        }));
+    }
+    set selectionMultiEnabled(enableMultiSelection) {
+        if (this.selectionModel) {
+            this.selectionModel.isMultipleSelection = enableMultiSelection;
         }
     }
-}
-ElderDataToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component });
-ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: SelectionModel, decorators: [{
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [ELDER_DATA_VIEW]
-                    }] }, { type: ElderDialogService }];
-    }, propDecorators: { canAdd: [{
-                type: Input
-            }], canRemove: [{
-                type: Input
-            }], canMore: [{
-                type: Input
-            }], confirmRemoval: [{
-                type: Input
-            }], keepSelectionAfterRemoval: [{
-                type: Input
-            }], requestNew: [{
-                type: Output
-            }], requestRemove: [{
-                type: Output
-            }], templates: [{
-                type: ContentChildren,
-                args: [ElderToolbarContentDirective]
-            }], selectionModel: [{
-                type: Input
-            }] } });
-
-class ElderSingleSortComponent {
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * On click properties                                                     *
      *                                                                         *
      **************************************************************************/
-    constructor() {
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.sort$ = new BehaviorSubject(Sort.NONE);
-        this.availableSorts = [];
-        this.sortChange = new EventEmitter();
-        this.translationPrefix = 'documents.sorts.';
+    get itemClick() {
+        return this._itemClickSubject;
     }
     /***************************************************************************
      *                                                                         *
-     * Life Cycle                                                              *
+     * Style Properties                                                        *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() {
+    set dense(value) {
+        this._dense = coerceBooleanProperty(value);
+    }
+    get dense() {
+        return this._dense;
+    }
+    set float(value) {
+        this._float = coerceBooleanProperty(value);
+    }
+    get float() {
+        return this._float;
+    }
+    set embedded(value) {
+        this._embedded = coerceBooleanProperty(value);
+    }
+    get embedded() {
+        return this._embedded;
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Event Entry Points                                                      *
      *                                                                         *
      **************************************************************************/
-    set sort(sort) {
-        if (!sort) {
-            sort = Sort.NONE;
+    /**
+     * Called after a new DataContext has been set.
+     * Subclasses may add additional behaviour at this stage.
+     * @param data
+     * @protected
+     */
+    onDataContextSet(data) {
+    }
+    onItemClick(entity) {
+        if (entity) {
+            switch (this.interactionMode) {
+                case 'open':
+                    if (this.selectionModel.hasValue) {
+                        this.selectionModel.toggle(entity);
+                    }
+                    else {
+                        this._itemClickSubject.next(entity);
+                    }
+                    break;
+                case 'selection':
+                    this.selectionModel.toggle(entity);
+                    break;
+            }
         }
-        this.sort$.next(sort);
     }
-    get sort() {
-        return this.sort$.getValue();
+    onItemDoubleClick(entity) {
+        if (entity) {
+            switch (this.interactionMode) {
+                // double click in open mode not supported
+                case 'open':
+                    break;
+                // double click in selection mode triggers normal item click
+                case 'selection':
+                    this._itemClickSubject.next(entity);
+                    break;
+            }
+        }
     }
     /***************************************************************************
      *                                                                         *
-     * API                                                                     *
+     * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    setSortProp(sortProp) {
-        const sort = new Sort(sortProp, this.sort.dir);
-        this.setSort(sort);
+    getId(entity) {
+        var _a, _b;
+        return ((_b = (_a = this.dataContext) === null || _a === void 0 ? void 0 : _a.dataSource) === null || _b === void 0 ? void 0 : _b.getId(entity)) || entity;
     }
-    toggleSortDirection(event) {
-        event.stopPropagation();
-        let dir;
-        if (this.sort.dir === 'asc') {
-            dir = 'desc';
-        }
-        else {
-            dir = 'asc';
+    /**
+     * Performs clean up of the current data context if auto clean up is enabled.
+     */
+    autoCleanUp() {
+        if (this.cleanUp && this.dataContext) {
+            //this.logger.debug('Releasing DataContext resources to prevent memory leak. [cleanUp]="true"');
+            this.dataContext.close();
         }
-        this.setSort(new Sort(this.sort.prop, dir));
-    }
-    setSort(sort) {
-        this.sort = sort;
-        this.sortChange.emit(sort);
     }
 }
-ElderSingleSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-single-sort', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { availableSorts: [{
+ElderDataViewBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseComponent, deps: [{ token: SelectionModel }, { token: ElderDataViewOptionsProvider }], target: i0.ɵɵFactoryTarget.Directive });
+ElderDataViewBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataViewBaseComponent, inputs: { interactionMode: "interactionMode", cleanUp: "cleanUp", selectableEvaluatorFn: "selectableEvaluatorFn", selection: "selection", selectionMultiEnabled: "selectionMultiEnabled", dense: "dense", float: "float", embedded: "embedded" }, outputs: { selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange", itemClick: "itemClick" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: SelectionModel }, { type: ElderDataViewOptionsProvider }]; }, propDecorators: { interactionMode: [{
                 type: Input
-            }], sortChange: [{
+            }], cleanUp: [{
+                type: Input
+            }], selectableEvaluatorFn: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], selectionChange: [{
                 type: Output
-            }], translationPrefix: [{
+            }], selectionSingleChange: [{
+                type: Output
+            }], selectionMultiEnabled: [{
                 type: Input
-            }], sort: [{
+            }], itemClick: [{
+                type: Output
+            }], dense: [{
+                type: Input
+            }], float: [{
+                type: Input
+            }], embedded: [{
                 type: Input
             }] } });
 
-class MasterSelectionState {
-    constructor(count, allSelected, someSelected, anySelected) {
-        this.count = count;
-        this.allSelected = allSelected;
-        this.someSelected = someSelected;
-        this.anySelected = anySelected;
+class ElderDialogConfig {
+}
+
+class ConfirmDialogConfig extends ElderDialogConfig {
+}
+class ElderConfirmDialogComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.yesNo = false;
     }
 }
+ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderConfirmDialogComponent, selector: "elder-confirm-dialog", ngImport: i0, template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions fxLayoutAlign=\"end center\" cdkTrapFocus>\n\n  <button type=\"button\" mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n  </button>\n\n  <button type=\"submit\" mat-raised-button cdkFocusInitial\n          (click)=\"dialogRef.close(true)\">\n    {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n  </button>\n\n</mat-dialog-actions>\n\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-confirm-dialog', template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions fxLayoutAlign=\"end center\" cdkTrapFocus>\n\n  <button type=\"button\" mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n  </button>\n\n  <button type=\"submit\" mat-raised-button cdkFocusInitial\n          (click)=\"dialogRef.close(true)\">\n    {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n  </button>\n\n</mat-dialog-actions>\n\n" }]
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }]; } });
 
-class DataContextSelectionDirective {
+class QuestionDialogConfig extends ElderDialogConfig {
+}
+class ElderQuestionDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+    confirm(event) {
+        this.dialogRef.close(this.answer);
+    }
+    cancel(event) {
+        this.dialogRef.close();
+    }
+    get isValid() {
+        return !!this.answer;
+    }
+}
+ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderQuestionDialogComponent, selector: "elder-question-dialog", ngImport: i0, template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </mat-dialog-content>\n\n    <mat-dialog-actions fxLayoutAlign=\"end center\" >\n\n        <button mat-button type=\"button\"\n                (click)=\"cancel($event)\">\n            {{'actions.cancel' | translate}}\n        </button>\n\n        <button mat-button type=\"submit\" color=\"primary\"\n                [disabled]=\"!isValid\">\n          {{'actions.ok' | translate}}\n        </button>\n\n    </mat-dialog-actions>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-question-dialog', template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </mat-dialog-content>\n\n    <mat-dialog-actions fxLayoutAlign=\"end center\" >\n\n        <button mat-button type=\"button\"\n                (click)=\"cancel($event)\">\n            {{'actions.cancel' | translate}}\n        </button>\n\n        <button mat-button type=\"submit\" color=\"primary\"\n                [disabled]=\"!isValid\">\n          {{'actions.ok' | translate}}\n        </button>\n\n    </mat-dialog-actions>\n\n</form>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+
+class ElderDialogService {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel) {
+    constructor(dialog, translateService) {
+        this.dialog = dialog;
+        this.translateService = translateService;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.selectionModel$ = new BehaviorSubject(null);
-        this.dataContext$ = new BehaviorSubject(null);
-        this.selectionModel$.next(selectionModel);
-        this.selectionState$ = this.buildSelectionState$(this.selectionModel$, this.dataContext$);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set selectionModel(model) {
-        this.selectionModel$.next(model);
-    }
-    get selectionModel() {
-        return this.selectionModel$.getValue();
-    }
-    set dataContext(dataContext) {
-        this.dataContext$.next(dataContext);
-    }
-    /** Whether the number of selected elements matches the totalSnapshot number of selectable rows. */
-    get isAllSelectedSnapshot() {
-        const numSelected = this.selectionModel.selectionSnapshot.length;
-        const context = this.dataContext$.getValue();
-        const numRows = context ? context.snapshot.data.length : 0;
-        const numUnselectable = context ? context.snapshot.data.filter(i => !this.selectionModel.isSelectable(i)).length : 0;
-        return numSelected >= numRows - numUnselectable; // True if all selectable items are selected
+        this.defaultDialogConfig = {
+            role: 'dialog',
+            disableClose: false,
+            autoFocus: true,
+            restoreFocus: true,
+            closeOnNavigation: false
+        };
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    /** Selects all rows if they are not all selected; otherwise clear selection. */
-    masterToggle() {
-        this.log.debug('masterToggle triggered, toggling all!');
-        if (this.isAllSelectedSnapshot) {
-            this.selectionModel.clear();
-        }
-        else {
-            const context = this.dataContext$.getValue();
-            if (context) {
-                this.selectionModel.select(context.snapshot.data);
-            }
-        }
-    }
-    /***************************************************************************
+    /**
+     * @deprecated Use showConfirm({...}) instead
+     *
+     * @param title
+     * @param message
+     * @param config
+     */
+    confirm(title, message, config) {
+        return this.showConfirm({
+            title: title,
+            message: message,
+            config: config || this.defaultDialogConfig
+        });
+    }
+    /**
+     * Creates a modal confirmation dialog.
+     *
+     * @param config object for conform dialog
+     */
+    showConfirm(config) {
+        if (!config) {
+            throw new Error('Argument must not be null: config');
+        }
+        const rawMessages = new Map();
+        rawMessages.set('title', config.title);
+        rawMessages.set('message', config.message);
+        return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(switchMap(messages => {
+            const title = messages.get('title');
+            const message = messages.get('message');
+            let dialogRef;
+            dialogRef = this.dialog.open(ElderConfirmDialogComponent, config.config);
+            dialogRef.componentInstance.title = title;
+            dialogRef.componentInstance.message = message;
+            dialogRef.componentInstance.yesNo = config.yesNo;
+            return dialogRef.afterClosed();
+        }));
+    }
+    /**
+     * @deprecated Use showQuestion({...}) instead
+     *
+     * Creates a modal question dialog.
+     *
+     * @param title
+     * @param question
+     * @param config
+     */
+    question(title, question, config) {
+        return this.showQuestion({
+            title: title,
+            question: question,
+            config: config || this.defaultDialogConfig
+        });
+    }
+    /**
+     * Creates a modal question dialog.
+     *
+     * @param config
+     */
+    showQuestion(config) {
+        if (!config) {
+            throw new Error('Argument must not be null: config');
+        }
+        const rawMessages = new Map();
+        rawMessages.set('title', config.title);
+        rawMessages.set('question', config.question);
+        return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(switchMap(messages => {
+            const title = messages.get('title');
+            const question = messages.get('question');
+            const dlgConf = config.config || new MatDialogConfig();
+            dlgConf.data = {
+                title: title,
+                question: question
+            };
+            const dialogRef = this.dialog.open(ElderQuestionDialogComponent, dlgConf);
+            return dialogRef.afterClosed()
+                .pipe(filter(response => !!response));
+        }));
+    }
+    /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    buildSelectionState$(selectionModel$, dataContext$) {
-        return combineLatest([selectionModel$, dataContext$]).pipe(filter(([model, dc]) => !!model && !!dc), switchMap(([model, dc]) => this.buildSelectionStateInner$(model, dc)));
+    resolveTranslatedMap(messages, interpolateParams) {
+        const rawMessages = Array.from(messages.values());
+        return this.translateInterpolatedParams(interpolateParams).pipe(switchMap(translatedParams => this.translateService.get(rawMessages, translatedParams)), map(translatedValues => {
+            const translated = new Map();
+            messages.forEach((rawValue, key) => {
+                translated.set(key, translatedValues[rawValue] || rawValue);
+            });
+            return translated;
+        }));
     }
-    buildSelectionStateInner$(model, dc) {
-        return combineLatest([model.selection, dc.data]).pipe(map(([selection, currentData]) => {
-            const unselectable = currentData.filter(i => !model.isSelectable(i));
-            return new MasterSelectionState(selection.length, selection.length >= currentData.length - unselectable.length, selection.length > 0 && selection.length < currentData.length - unselectable.length, selection.length > 0);
+    /**
+     * Translates a list of params
+     *
+     * @param interpolateParams
+     */
+    translateInterpolatedParams(interpolateParams) {
+        if (!interpolateParams) {
+            return of({});
+        }
+        const values = Object.getOwnPropertyNames(interpolateParams)
+            .map(key => interpolateParams[key])
+            .filter(value => !!value)
+            .map(value => value + '');
+        return this.translateService.get(values).pipe(map(translated => {
+            Object.getOwnPropertyNames(interpolateParams)
+                .forEach(key => {
+                const value = interpolateParams[key];
+                interpolateParams[key] = translated[value];
+            });
+            return interpolateParams;
         }));
     }
 }
-DataContextSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextSelectionDirective, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DataContextSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: { selectionModel: ["elderDataContextSelectionModel", "selectionModel"], dataContext: ["elderDataContextSelection", "dataContext"] }, exportAs: ["elderDataContextSelection"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextSelectionDirective, decorators: [{
-            type: Directive,
+ElderDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, deps: [{ token: i1$7.MatDialog }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[elderDataContextSelection]',
-                    exportAs: 'elderDataContextSelection'
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: function () {
-        return [{ type: SelectionModel, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { selectionModel: [{
-                type: Input,
-                args: ['elderDataContextSelectionModel']
-            }], dataContext: [{
-                type: Input,
-                args: ['elderDataContextSelection']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialog }, { type: i2.TranslateService }]; } });
 
-class ElderSelectionMasterCheckboxComponent {
+class ElderSelectionDialogComponent {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dataContextSelection) {
-        this.dataContextSelection = dataContextSelection;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
     }
     /***************************************************************************
      *                                                                         *
-     * Life Cycle                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() {
+    confirmSelection() {
+        this.dialogRef.close();
+    }
+    ngAfterViewInit() {
+        // this.dialogRef.updateSize('20vw', '20vh');
     }
 }
-ElderSelectionMasterCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
+ElderSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n" }]
-        }], ctorParameters: function () { return [{ type: DataContextSelectionDirective }]; } });
+            args: [{ selector: 'elder-selection-dialog', template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    }, propDecorators: { title: [{
+                type: Input
+            }] } });
 
-class DataContextStateIndicatorComponent {
+class ElderSelectionDialogDirective {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() {
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.dataContext$ = new BehaviorSubject(null);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
+    constructor(templateRef, dialog) {
+        this.templateRef = templateRef;
+        this.dialog = dialog;
+        this.close = new EventEmitter();
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    set dataContext(dataContext) {
-        this.dataContext$.next(dataContext);
+    open() {
+        const dialogRef = this.dialog.open(ElderSelectionDialogComponent, {
+            data: {
+                template: this.templateRef,
+                selectionModel: this.selectionModel
+            },
+            width: '80vw',
+            height: '80vh'
+        });
+        dialogRef.afterClosed().subscribe(result => this.close.emit(result));
     }
 }
-DataContextStateIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-data-context-state-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dataContext: [{
+ElderSelectionDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectionDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogDirective, selector: "[elderDialog]", inputs: { selectionModel: "selectionModel" }, outputs: { close: "close" }, exportAs: ["elderSelection"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderDialog]',
+                    exportAs: 'elderSelection'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1$7.MatDialog }]; }, propDecorators: { selectionModel: [{
                 type: Input
+            }], close: [{
+                type: Output
             }] } });
 
-class ElderDataCommonModule {
+/**
+ * @deprecated Please switch to ElderDialogService
+ */
+class EbsCommonDialogService extends ElderDialogService {
 }
-ElderDataCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderDataCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, declarations: [ElderDataToolbarComponent,
-        ElderToolbarContentDirective,
-        ElderSingleSortComponent,
-        ElderSelectionMasterCheckboxComponent,
-        DataContextSelectionDirective,
-        DataContextStateIndicatorComponent], imports: [CommonModule, RouterModule,
-        // Material
-        MatDividerModule,
-        MatCheckboxModule, MatMenuModule,
-        MatButtonModule, MatIconModule, MatBadgeModule,
-        MatProgressBarModule,
-        MatDialogModule, MatTooltipModule,
-        // translations
-        TranslateModule, FlexLayoutModule], exports: [ElderDataToolbarComponent,
-        ElderToolbarContentDirective,
-        ElderSingleSortComponent,
-        ElderSelectionMasterCheckboxComponent,
-        DataContextSelectionDirective,
-        DataContextStateIndicatorComponent] });
-ElderDataCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, imports: [CommonModule, RouterModule,
-        // Material
-        MatDividerModule,
-        MatCheckboxModule, MatMenuModule,
-        MatButtonModule, MatIconModule, MatBadgeModule,
-        MatProgressBarModule,
-        MatDialogModule, MatTooltipModule,
-        // translations
-        TranslateModule, FlexLayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, decorators: [{
+EbsCommonDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+EbsCommonDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EbsCommonDialogService, decorators: [{
+            type: Injectable
+        }] });
+class ElderDialogModule {
+    static forRoot() {
+        return {
+            ngModule: ElderDialogModule,
+            providers: [
+                // ElderDialogService,
+                EbsCommonDialogService
+            ]
+        };
+    }
+}
+ElderDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElderDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, declarations: [ElderConfirmDialogComponent,
+        ElderQuestionDialogComponent,
+        ElderSelectionDialogComponent,
+        ElderSelectionDialogDirective], imports: [CommonModule, FormsModule,
+        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
+        A11yModule,
+        FlexLayoutModule, TranslateModule], exports: [ElderConfirmDialogComponent,
+        ElderQuestionDialogComponent,
+        ElderSelectionDialogComponent,
+        ElderSelectionDialogDirective] });
+ElderDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, imports: [CommonModule, FormsModule,
+        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
+        A11yModule,
+        FlexLayoutModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule, RouterModule,
-                        // Material
-                        MatDividerModule,
-                        MatCheckboxModule, MatMenuModule,
-                        MatButtonModule, MatIconModule, MatBadgeModule,
-                        MatProgressBarModule,
-                        MatDialogModule, MatTooltipModule,
-                        // translations
-                        TranslateModule, FlexLayoutModule,
+                        CommonModule, FormsModule,
+                        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
+                        A11yModule,
+                        FlexLayoutModule, TranslateModule
                     ],
                     declarations: [
-                        ElderDataToolbarComponent,
-                        ElderToolbarContentDirective,
-                        ElderSingleSortComponent,
-                        ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective,
-                        DataContextStateIndicatorComponent
+                        ElderConfirmDialogComponent,
+                        ElderQuestionDialogComponent,
+                        ElderSelectionDialogComponent,
+                        ElderSelectionDialogDirective
                     ],
                     exports: [
-                        ElderDataToolbarComponent,
-                        ElderToolbarContentDirective,
-                        ElderSingleSortComponent,
-                        ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective,
-                        DataContextStateIndicatorComponent
-                    ],
+                        ElderConfirmDialogComponent,
+                        ElderQuestionDialogComponent,
+                        ElderSelectionDialogComponent,
+                        ElderSelectionDialogDirective
+                    ]
                 }]
         }] });
 
-class TemplatedSelectionDialogComponent {
+/**
+ * This directive projects content identified by a placeholder id
+ * into the toolbar at the corresponding place.
+ */
+class ElderToolbarContentDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ElderToolbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderToolbarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: { placeholderId: ["elderToolbarContent", "placeholderId"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[elderToolbarContent]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { placeholderId: [{
+                type: Input,
+                args: ['elderToolbarContent']
+            }] } });
+class ElderDataToolbarComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(selectionModel, dataView, dialogService) {
+        this.dialogService = dialogService;
+        this.canAdd = true;
+        this.canRemove = true;
+        this.canMore = true;
+        this.confirmRemoval = true;
+        this.keepSelectionAfterRemoval = false;
+        this.requestNew = new Subject();
+        this.requestRemove = new Subject();
+        this.selectionFallback = new BehaviorSubject([]);
+        this.selection$ = this.selectionFallback.asObservable();
+        if (selectionModel) {
+            this.selectionModel = selectionModel;
+        }
+        if (dataView) {
+            this.selectionModel = dataView.selectionModel;
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() { }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set selectionModel(model) {
+        this._selectionModel = model;
+        if (model) {
+            this.selection$ = model.selection;
+        }
+        else {
+            this.selection$ = this.selectionFallback.asObservable();
+        }
+    }
+    get selectionModel() {
+        return this._selectionModel;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    getTemplate(placeholderId) {
+        if (!this.templates) {
+            return null;
+        }
+        const template = this.templates.find((item) => item.placeholderId === placeholderId);
+        return template ? template.templateRef : null;
+    }
+    requestRemoveItems(items) {
+        if (this.confirmRemoval) {
+            this.dialogService
+                .showConfirm({
+                title: 'dialogs.confirm-deletion.title',
+                message: 'dialogs.confirm-deletion.message',
+                yesNo: true,
+                interpolateParams: { numOfItems: items.length },
+            })
+                .subscribe((confirmed) => {
+                if (confirmed) {
+                    this.emitRemove(items);
+                }
+            });
+        }
+        else {
+            this.emitRemove(items);
+        }
+    }
+    emitRemove(items) {
+        this.requestRemove.next(items);
+        if (!this.keepSelectionAfterRemoval) {
+            // Clear the selection after deleting items
+            if (this._selectionModel) {
+                this._selectionModel.deselect(items);
+            }
+        }
+    }
+}
+ElderDataToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component });
+ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: SelectionModel, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [ELDER_DATA_VIEW]
+                    }] }, { type: ElderDialogService }];
+    }, propDecorators: { canAdd: [{
+                type: Input
+            }], canRemove: [{
+                type: Input
+            }], canMore: [{
+                type: Input
+            }], confirmRemoval: [{
+                type: Input
+            }], keepSelectionAfterRemoval: [{
+                type: Input
+            }], requestNew: [{
+                type: Output
+            }], requestRemove: [{
+                type: Output
+            }], templates: [{
+                type: ContentChildren,
+                args: [ElderToolbarContentDirective]
+            }], selectionModel: [{
+                type: Input
+            }] } });
+
+class ElderSingleSortComponent {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dialogRef, data, selectionModel) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.selectionModel = selectionModel;
+    constructor() {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.sort$ = new BehaviorSubject(Sort.NONE);
+        this.availableSorts = [];
+        this.sortChange = new EventEmitter();
+        this.translationPrefix = 'documents.sorts.';
     }
     /***************************************************************************
      *                                                                         *
-     * Component Events                                                        *
+     * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
     ngOnInit() {
     }
-}
-TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
-TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }, { type: SelectionModel }];
-    } });
-
-class ColumnPositionSpec {
-    constructor(position, relativeTo) {
-        this.position = position;
-        this.relativeTo = relativeTo;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set sort(sort) {
+        if (!sort) {
+            sort = Sort.NONE;
+        }
+        this.sort$.next(sort);
     }
-    static relativeToColumn(col, position) {
-        return new ColumnPositionSpec(position, col);
+    get sort() {
+        return this.sort$.getValue();
     }
-    static relativeToPrevGroup(position) {
-        return new ColumnPositionSpec(position, null);
+    /***************************************************************************
+     *                                                                         *
+     * API                                                                     *
+     *                                                                         *
+     **************************************************************************/
+    setSortProp(sortProp) {
+        const sort = new Sort(sortProp, this.sort.dir);
+        this.setSort(sort);
+    }
+    toggleSortDirection(event) {
+        event.stopPropagation();
+        let dir;
+        if (this.sort.dir === 'asc') {
+            dir = 'desc';
+        }
+        else {
+            dir = 'asc';
+        }
+        this.setSort(new Sort(this.sort.prop, dir));
+    }
+    setSort(sort) {
+        this.sort = sort;
+        this.sortChange.emit(sort);
     }
 }
-class ElderColumnGroup {
-    constructor(groupIndex, columnsPosition, columns) {
-        this.groupIndex = groupIndex;
-        this.columnsPosition = columnsPosition;
-        this.columns = columns;
+ElderSingleSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-single-sort', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { availableSorts: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], translationPrefix: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }] } });
+
+class MasterSelectionState {
+    constructor(count, allSelected, someSelected, anySelected) {
+        this.count = count;
+        this.allSelected = allSelected;
+        this.someSelected = someSelected;
+        this.anySelected = anySelected;
     }
 }
-class ElderColumnLayout {
-    constructor() {
+
+class DataContextSelectionDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(selectionModel) {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.selectionModel$ = new BehaviorSubject(null);
+        this.dataContext$ = new BehaviorSubject(null);
+        this.selectionModel$.next(selectionModel);
+        this.selectionState$ = this.buildSelectionState$(this.selectionModel$, this.dataContext$);
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    layoutColumns(colGroups) {
-        const sortedCols = this.renderColumns(colGroups);
-        // Support absolute column positioning
-        const cdkCols = sortedCols.map(col => col.cdkColumn);
-        return cdkCols;
+    set selectionModel(model) {
+        this.selectionModel$.next(model);
+    }
+    get selectionModel() {
+        return this.selectionModel$.getValue();
+    }
+    set dataContext(dataContext) {
+        this.dataContext$.next(dataContext);
+    }
+    /** Whether the number of selected elements matches the totalSnapshot number of selectable rows. */
+    get isAllSelectedSnapshot() {
+        const numSelected = this.selectionModel.selectionSnapshot.length;
+        const context = this.dataContext$.getValue();
+        const numRows = context ? context.snapshot.data.length : 0;
+        const numUnselectable = context ? context.snapshot.data.filter(i => !this.selectionModel.isSelectable(i)).length : 0;
+        return numSelected >= numRows - numUnselectable; // True if all selectable items are selected
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    renderColumns(colGroups) {
-        const groupHierarchy = this.sortGroupsByIndex(colGroups);
-        const sorted = [];
-        // Now we can insert groups in defined order
-        let previousIndex = {
-            startIndex: 0,
-            endIndex: 0
-        };
-        for (const grp of groupHierarchy) {
-            // grp defined position relative to prev group
-            previousIndex = this.insertColumnsAt(sorted, grp.columns, grp.columnsPosition, previousIndex);
-        }
-        return sorted;
-    }
-    insertColumnsAt(existingColumns, groupItems, positionSpec, previousGroup) {
-        let insertIndex;
-        if (positionSpec.relativeTo) {
-            insertIndex = this.calcInsertIndexRelativeToColumn(positionSpec.position, positionSpec.relativeTo, existingColumns);
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        this.log.debug('masterToggle triggered, toggling all!');
+        if (this.isAllSelectedSnapshot) {
+            this.selectionModel.clear();
         }
         else {
-            insertIndex = this.calcInsertIndexRelativeToPreviousGroup(positionSpec.position, existingColumns, previousGroup);
-        }
-        existingColumns.splice(insertIndex, 0, ...groupItems);
-        return {
-            startIndex: insertIndex,
-            endIndex: insertIndex + groupItems.length
-        };
-    }
-    calcInsertIndexRelativeToColumn(position, relativeToCol, existingColumns) {
-        const relativeIndex = existingColumns
-            .findIndex(c => c.cdkColumn.name === relativeToCol);
-        switch (position) {
-            case 'start':
-            case 'after':
-                // after relative
-                return relativeIndex + 1;
-            case 'before':
-            case 'end':
-                // before relative
-                return relativeIndex;
+            const context = this.dataContext$.getValue();
+            if (context) {
+                this.selectionModel.select(context.snapshot.data);
+            }
         }
     }
-    calcInsertIndexRelativeToPreviousGroup(position, existingColumns, previousGroup) {
-        switch (position) {
-            case 'start':
-                return 0;
-            case 'end':
-                return existingColumns.length;
-            case 'after':
-                // after relative to previous group
-                return previousGroup.endIndex;
-            case 'before':
-                // before relative to previous group
-                return previousGroup.startIndex;
-        }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    buildSelectionState$(selectionModel$, dataContext$) {
+        return combineLatest([selectionModel$, dataContext$]).pipe(filter(([model, dc]) => !!model && !!dc), switchMap(([model, dc]) => this.buildSelectionStateInner$(model, dc)));
     }
-    sortGroupsByIndex(colGroups) {
-        return colGroups
-            .sort((a, b) => {
-            return naturalValueComparator(a.groupIndex, b.groupIndex);
-        }).reverse();
+    buildSelectionStateInner$(model, dc) {
+        return combineLatest([model.selection, dc.data]).pipe(map(([selection, currentData]) => {
+            const unselectable = currentData.filter(i => !model.isSelectable(i));
+            return new MasterSelectionState(selection.length, selection.length >= currentData.length - unselectable.length, selection.length > 0 && selection.length < currentData.length - unselectable.length, selection.length > 0);
+        }));
     }
 }
+DataContextSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextSelectionDirective, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DataContextSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: { selectionModel: ["elderDataContextSelectionModel", "selectionModel"], dataContext: ["elderDataContextSelection", "dataContext"] }, exportAs: ["elderDataContextSelection"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderDataContextSelection]',
+                    exportAs: 'elderDataContextSelection'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: SelectionModel, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { selectionModel: [{
+                type: Input,
+                args: ['elderDataContextSelectionModel']
+            }], dataContext: [{
+                type: Input,
+                args: ['elderDataContextSelection']
+            }] } });
 
-class ElderTableGroup {
-    constructor(id, index) {
-        this.id = id;
-        this.index = index;
-    }
-    static create(groupIndex) {
-        return ElderTableGroup.of(UuidUtil.weakUuid4(), groupIndex);
-    }
-    static of(id, groupIndex) {
-        return new ElderTableGroup(id, groupIndex);
-    }
-}
-class ElderTableModel {
+class ElderSelectionMasterCheckboxComponent {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() {
+    constructor(dataContextSelection) {
+        this.dataContextSelection = dataContextSelection;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.elderColumnLayout = new ElderColumnLayout();
-        this._groups = new Map();
-        this._columnGroups = new ReactiveMap();
-        this._rowDefGroups = new ReactiveMap();
-        this._sortGroups = new ReactiveMap();
-        this.selectionVisible$ = new BehaviorSubject(false);
-        /**
-         * The columns to display explicitly set by the user.
-         * We need to support inserting display columns by index or anchored to existing ones.
-         * before([columns])
-         * after()
-         * start()
-         * end([])
-         * @private
-         */
-        this.displayedColumns$ = new BehaviorSubject(undefined);
-        this.displayedColumnsInner$ = this.renderDisplayedColumns(this.displayedColumns$, this.columnDefs$, this.selectionVisible$);
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    set selectionVisible(visible) {
-        this.selectionVisible$.next(visible);
-    }
-    get selectionVisible() {
-        return this.selectionVisible$.getValue();
-    }
-    set displayedColumns(columns) {
-        this.displayedColumns$.next(columns);
-    }
-    get displayedColumns() {
-        return this.displayedColumns$.getValue();
+    ngOnInit() {
     }
+}
+ElderSelectionMasterCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component });
+ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n" }]
+        }], ctorParameters: function () { return [{ type: DataContextSelectionDirective }]; } });
+
+class DataContextStateIndicatorComponent {
     /***************************************************************************
      *                                                                         *
-     * Rendered Properties                                                     *
+     * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    get columnDefs$() {
-        return this._columnGroups.values$.pipe(map(groups => this.elderColumnLayout.layoutColumns(groups)));
-    }
-    get rowDefs$() {
-        return this.sortAndFlatten(this._rowDefGroups);
-    }
-    get sorts$() {
-        return this._sortGroups.values$;
-    }
-    // ---
-    valuesSortedByGroupIndex(myMap, groups) {
-        return Array.from(myMap.entries())
-            .sort(([a_key], [b_key]) => {
-            var _a, _b, _c, _d;
-            const grpAIndex = (_b = (_a = groups.get(a_key)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : 0;
-            const grpBIndex = (_d = (_c = groups.get(b_key)) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : 0;
-            return naturalValueComparator(grpAIndex, grpBIndex);
-        }).map(([a_key, a_value]) => a_value);
-    }
-    sortAndFlatten(reactMap) {
-        return reactMap.map$.pipe(map(myMap => this.valuesSortedByGroupIndex(myMap, this._groups)), map(columns => CollectionUtil.flatten(columns)));
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.dataContext$ = new BehaviorSubject(null);
     }
-    /*
-    public get sortHeaders$(): Observable<MatSortHeader[]> {
-      return this._sortGroups.values$.pipe(
-        map(groups => this.flattenDefs(groups))
-      );
-    }*/
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    registerGroup(group) {
-        this._groups.set(group.id, group);
-    }
-    updateColumnGroup(group, columnGroup) {
-        this._columnGroups.set(group.id, columnGroup);
-    }
-    updateRowDefs(group, rows) {
-        this._rowDefGroups.set(group.id, rows);
-    }
-    updateSortGroup(group, sort) {
-        this._sortGroups.set(group.id, sort);
-    }
-    clearColumnDefGroup(group) {
-        this._columnGroups.delete(group.id);
-    }
-    clearRowDefGroup(group) {
-        this._rowDefGroups.delete(group.id);
-    }
-    clearSortGroup(group) {
-        this._sortGroups.delete(group.id);
-    }
-    deRegisterGroup(group) {
-        this.clearColumnDefGroup(group);
-        this.clearRowDefGroup(group);
-        this.clearSortGroup(group);
-        this._groups.delete(group.id);
+    ngOnInit() {
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    renderDisplayedColumns(userDefinedColumns$, columnDefs$, selectionVisible$) {
-        return combineLatest([userDefinedColumns$, columnDefs$, selectionVisible$]).pipe(map(([displayedColumns, columnDefs, selectionVisible]) => {
-            let columns = displayedColumns;
-            if (!columns) {
-                columns = [];
-                // If the user did not define columns to display
-                // Assume he wants all his own columns in given order
-                if (columnDefs) {
-                    columnDefs.forEach(col => {
-                        columns.push(col.name);
-                    });
-                }
-            }
-            if (this.selectionVisible) {
-                columns = ['select', ...columns];
-            }
-            return columns;
-        }));
+    set dataContext(dataContext) {
+        this.dataContext$.next(dataContext);
     }
 }
-ElderTableModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ElderTableModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
+DataContextStateIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-data-context-state-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dataContext: [{
+                type: Input
+            }] } });
 
-function existingOrNewElderTableModel(modelProvider) {
-    return modelProvider !== null && modelProvider !== void 0 ? modelProvider : newElderTableModel();
-}
-function newElderTableModel() {
-    return new ElderTableModel();
-}
-class ElderTableProviders {
+class ElderDataCommonModule {
 }
-/**
- * Uses the existing ElderTableModel from a parent if available.
- * Otherwise, creates a new ElderTableModel and provides it.
- */
-ElderTableProviders.ExistingOrNewTableModel = {
-    provide: ElderTableModel,
-    useFactory: existingOrNewElderTableModel,
-    deps: [[new Optional(), new SkipSelf(), ElderTableModel]]
-};
-/**
- * Creates a new ElderTableModel root and provides it,
- * even if there is an existing parent table model.
- */
-ElderTableProviders.NewTableModelRoot = {
-    provide: ElderTableModel,
-    useFactory: newElderTableModel
-};
-/**
- * If there is an existing ElderTableModel service provided, clears it.
- *
- * Child components will therefore be blocked from accessing any parent TableModel service
- * and are instead forced to create their own.
- *
- * This supports nesting ElderTable without sharing the table model / columns.
- */
-ElderTableProviders.ClearTableModel = {
-    provide: ElderTableModel,
-    useValue: null
-};
+ElderDataCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElderDataCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, declarations: [ElderDataToolbarComponent,
+        ElderToolbarContentDirective,
+        ElderSingleSortComponent,
+        ElderSelectionMasterCheckboxComponent,
+        DataContextSelectionDirective,
+        DataContextStateIndicatorComponent], imports: [CommonModule, RouterModule,
+        // Material
+        MatDividerModule,
+        MatCheckboxModule, MatMenuModule,
+        MatButtonModule, MatIconModule, MatBadgeModule,
+        MatProgressBarModule,
+        MatDialogModule, MatTooltipModule,
+        // translations
+        TranslateModule, FlexLayoutModule], exports: [ElderDataToolbarComponent,
+        ElderToolbarContentDirective,
+        ElderSingleSortComponent,
+        ElderSelectionMasterCheckboxComponent,
+        DataContextSelectionDirective,
+        DataContextStateIndicatorComponent] });
+ElderDataCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, imports: [CommonModule, RouterModule,
+        // Material
+        MatDividerModule,
+        MatCheckboxModule, MatMenuModule,
+        MatButtonModule, MatIconModule, MatBadgeModule,
+        MatProgressBarModule,
+        MatDialogModule, MatTooltipModule,
+        // translations
+        TranslateModule, FlexLayoutModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule, RouterModule,
+                        // Material
+                        MatDividerModule,
+                        MatCheckboxModule, MatMenuModule,
+                        MatButtonModule, MatIconModule, MatBadgeModule,
+                        MatProgressBarModule,
+                        MatDialogModule, MatTooltipModule,
+                        // translations
+                        TranslateModule, FlexLayoutModule,
+                    ],
+                    declarations: [
+                        ElderDataToolbarComponent,
+                        ElderToolbarContentDirective,
+                        ElderSingleSortComponent,
+                        ElderSelectionMasterCheckboxComponent,
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
+                    ],
+                    exports: [
+                        ElderDataToolbarComponent,
+                        ElderToolbarContentDirective,
+                        ElderSingleSortComponent,
+                        ElderSelectionMasterCheckboxComponent,
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
+                    ],
+                }]
+        }] });
 
-/**
- * Configures the selection mode on supporting components.
- */
-class ElderDataViewSelectionMode {
-    constructor() {
-        this.sorts = [];
-        this.filters = [];
-        this.multi = false;
-    }
-}
-function createSelectionModel() {
-    return new SelectionModel();
-}
-function createDataViewSelection() {
-    return new ElderDataViewSelectionMode();
-}
-class SelectionModelPopupDirective {
+class ElderTableRowDirective {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(templateRef, viewContainer, dialog, dataViewSelectionMode, selectionModel, changeDetectorRef) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.dialog = dialog;
-        this.dataViewSelectionMode = dataViewSelectionMode;
-        this.selectionModel = selectionModel;
-        this.changeDetectorRef = changeDetectorRef;
+    constructor(rowRef, renderer) {
+        this.rowRef = rowRef;
+        this.renderer = renderer;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-    }
-    set elderSelectionModelPopupTransform(fn) {
-        this._transformerFn = fn;
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this._activated = false;
+        this.focused$ = new BehaviorSubject(false);
     }
     /***************************************************************************
      *                                                                         *
-     * Host Listeners                                                          *
+     * Host Listener                                                           *
      *                                                                         *
      **************************************************************************/
+    onFocus(event) {
+        this.focused$.next(true);
+        if (this.tableActivation) {
+            this.tableActivation.activate(this._model);
+        }
+    }
+    onBlur(event) {
+        this.focused$.next(false);
+    }
     /***************************************************************************
      *                                                                         *
-     * Life Cycle                                                              *
+     * Host Bindings                                                           *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
-    ngOnDestroy() { }
+    get activated() {
+        return this._activated;
+    }
+    set activated(value) {
+        if (this._activated !== value) {
+            this._activated = value;
+            this.activatedClassEnabled(value);
+        }
+    }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Let the user choose some entities and return the selection.
-     */
-    choose(keyGetter, currentSelection, filters, sorts, multi = false) {
-        this.dataViewSelectionMode.filters = filters || [];
-        this.dataViewSelectionMode.sorts = sorts || [];
-        this.dataViewSelectionMode.multi = multi;
-        this.selectionModel.isMultipleSelection = multi;
-        this.selectionModel.keyGetterFn = keyGetter;
-        this.selectionModel.replaceSelection(currentSelection);
-        this.log.info('Replaced selection popup with current ' + currentSelection.length + ' entities:', currentSelection);
-        const dialogRef = this.openSelectDialog();
-        // This fixes dialog rendering when the browser template
-        // view container is outside the invoking control, which
-        // happens when use ng-content projection.
-        this.changeDetectorRef.markForCheck();
-        return dialogRef.afterClosed().pipe(switchMap((chosenEntities) => {
-            if (chosenEntities) {
-                return this._transformerFn
-                    ? of(chosenEntities.map(value => this._transformerFn(value)))
-                    : of(chosenEntities);
-            }
-            else {
-                return EMPTY;
-            }
-        }));
+    set model(model) {
+        this._model = model;
+    }
+    get model() {
+        return this._model;
+    }
+    get tableActivation() {
+        return this._tableActivation;
+    }
+    get hasFocus() {
+        return this.focused$.getValue();
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    openSelectDialog() {
-        return this.dialog.open(TemplatedSelectionDialogComponent, {
-            width: '90vw',
-            height: '90vh',
-            panelClass: 'custom-dialog-container',
-            data: {
-                selectionComponentTemplate: this.templateRef
-            },
-            viewContainerRef: this.viewContainer
+    bindTableActivation(activation) {
+        if (this._tableActivation !== activation) {
+            this._tableActivation = activation;
+            this.enableRowFocus(!!this._tableActivation);
+            if (!activation) {
+                this.activated = false;
+            }
+        }
+    }
+    bringToView() {
+        const row = this.rowRef.nativeElement;
+        // scroll-snap-align: start;
+        row.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest' // horizontal alignment
         });
     }
-}
-SelectionModelPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$7.MatDialog }, { token: ElderDataViewSelectionMode }, { token: SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectionModelPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: SelectionModelPopupDirective, selector: "[elderSelectionModelPopup]", inputs: { elderSelectionModelPopupTransform: "elderSelectionModelPopupTransform" }, providers: [
-        {
-            provide: SelectionModel,
-            useFactory: createSelectionModel
-        },
-        {
-            provide: ElderDataViewSelectionMode,
-            useFactory: createDataViewSelection
-        },
-        ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderSelectionModelPopup]',
-                    providers: [
-                        {
-                            provide: SelectionModel,
-                            useFactory: createSelectionModel
-                        },
-                        {
-                            provide: ElderDataViewSelectionMode,
-                            useFactory: createDataViewSelection
-                        },
-                        ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$7.MatDialog }, { type: ElderDataViewSelectionMode }, { type: SelectionModel }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { elderSelectionModelPopupTransform: [{
-                type: Input,
-                args: ['elderSelectionModelPopupTransform']
-            }] } });
-
-class ElderDataViewBaseComponent {
+    foucs() {
+        const row = this.rowRef.nativeElement;
+        row.focus();
+    }
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel, dataViewSelection) {
-        this.dataViewSelection = dataViewSelection;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        /**
-         * Underlying data context.
-         */
-        this.dataContext$ = new BehaviorSubject(null);
-        this.interactionMode = 'open';
-        /**
-         * If true, this table is in dense mode.
-         * Heights are generally reduced.
-         */
-        this._dense = false;
-        /**
-         * If true, this table is in a floating card mode.
-         * Otherwise, it is flat on the current panel.
-         */
-        this._float = false;
-        /**
-         * If true, this table is in embedded mode.
-         * No borders / floating visible so that the table can be embedded into another container
-         */
-        this._embedded = false;
-        this._itemClickSubject = new Subject();
-        this.EntityIdKeyFn = (entity) => entity ? this.getId(entity) : 0;
-        if (!selectionModel) {
-            this.selectionModel = new SelectionModel(false, [], this.EntityIdKeyFn);
+    enableRowFocus(enable) {
+        // Make the rows focusable on click (but not on tabs)
+        if (enable) {
+            this.renderer.setAttribute(this.rowRef.nativeElement, 'tabIndex', '-1');
         }
         else {
-            this.selectionModel = selectionModel;
+            this.renderer.removeAttribute(this.rowRef.nativeElement, 'tabIndex');
         }
     }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    get dataContext() {
-        return this.dataContext$.getValue();
-    }
-    set dataContext(data) {
-        this.dataContext$.next(data);
-        this.onDataContextSet(data);
-    }
-    get dataActivePaged() {
-        return this.dataContext;
-    }
-    get dataContinuable() {
-        return this.dataContext;
-    }
-    get isContinuable() {
-        if (!this.dataContext) {
-            return false;
+    activatedClassEnabled(enabled) {
+        const activatedClass = 'elder-table-row-activated';
+        if (enabled) {
+            this.renderer.addClass(this.rowRef.nativeElement, activatedClass);
         }
-        return isContinuableDataContext(this.dataContext);
-    }
-    get isActivePaged() {
-        if (!this.dataContext) {
-            return false;
+        else {
+            this.renderer.removeClass(this.rowRef.nativeElement, activatedClass);
         }
-        return isActivePagedDataContext(this.dataContext);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Selection Properties                                                    *
-     *                                                                         *
-     **************************************************************************/
-    set selectableEvaluatorFn(selectableEvaluatorFn) {
-        this.selectionModel.selectableEvaluatorFn = selectableEvaluatorFn;
     }
-    set selection(selection) {
-        this.selectionModel.replaceSelection(selection);
+}
+ElderTableRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableRowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTableRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: { model: ["elderTableRow", "model"] }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" } }, exportAs: ["elderTableRow"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[elderTableRow]',
+                    exportAs: 'elderTableRow'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }], model: [{
+                type: Input,
+                args: ['elderTableRow']
+            }] } });
+
+class ColumnPositionSpec {
+    constructor(position, relativeTo) {
+        this.position = position;
+        this.relativeTo = relativeTo;
     }
-    get selectionChange() {
-        return this.selectionModel.changed;
+    static relativeToColumn(col, position) {
+        return new ColumnPositionSpec(position, col);
     }
-    get selectionSingleChange() {
-        return this.selectionModel.changed.pipe(map((selection) => {
-            if (selection.length > 0) {
-                return selection[0];
-            }
-            else {
-                return null;
-            }
-        }));
+    static relativeToPrevGroup(position) {
+        return new ColumnPositionSpec(position, null);
     }
-    set selectionMultiEnabled(enableMultiSelection) {
-        if (this.selectionModel) {
-            this.selectionModel.isMultipleSelection = enableMultiSelection;
-        }
+}
+class ElderColumnGroup {
+    constructor(groupIndex, columnsPosition, columns) {
+        this.groupIndex = groupIndex;
+        this.columnsPosition = columnsPosition;
+        this.columns = columns;
     }
-    /***************************************************************************
-     *                                                                         *
-     * On click properties                                                     *
-     *                                                                         *
-     **************************************************************************/
-    get itemClick() {
-        return this._itemClickSubject;
+}
+class ElderColumnLayout {
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
     /***************************************************************************
      *                                                                         *
-     * Style Properties                                                        *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    set dense(value) {
-        this._dense = coerceBooleanProperty(value);
-    }
-    get dense() {
-        return this._dense;
-    }
-    set float(value) {
-        this._float = coerceBooleanProperty(value);
-    }
-    get float() {
-        return this._float;
-    }
-    set embedded(value) {
-        this._embedded = coerceBooleanProperty(value);
-    }
-    get embedded() {
-        return this._embedded;
+    layoutColumns(colGroups) {
+        const sortedCols = this.renderColumns(colGroups);
+        // Support absolute column positioning
+        const cdkCols = sortedCols.map(col => col.cdkColumn);
+        return cdkCols;
     }
     /***************************************************************************
      *                                                                         *
-     * Event Entry Points                                                      *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Called after a new DataContext has been set.
-     * Subclasses may add additional behaviour at this stage.
-     * @param data
-     * @protected
-     */
-    onDataContextSet(data) {
+    renderColumns(colGroups) {
+        const groupHierarchy = this.sortGroupsByIndex(colGroups);
+        const sorted = [];
+        // Now we can insert groups in defined order
+        let previousIndex = {
+            startIndex: 0,
+            endIndex: 0
+        };
+        for (const grp of groupHierarchy) {
+            // grp defined position relative to prev group
+            previousIndex = this.insertColumnsAt(sorted, grp.columns, grp.columnsPosition, previousIndex);
+        }
+        return sorted;
     }
-    onItemClick(entity) {
-        if (entity) {
-            switch (this.interactionMode) {
-                case 'open':
-                    if (this.selectionModel.hasValue) {
-                        this.selectionModel.toggle(entity);
-                    }
-                    else {
-                        this._itemClickSubject.next(entity);
-                    }
-                    break;
-                case 'selection':
-                    this.selectionModel.toggle(entity);
-                    break;
-            }
+    insertColumnsAt(existingColumns, groupItems, positionSpec, previousGroup) {
+        let insertIndex;
+        if (positionSpec.relativeTo) {
+            insertIndex = this.calcInsertIndexRelativeToColumn(positionSpec.position, positionSpec.relativeTo, existingColumns);
+        }
+        else {
+            insertIndex = this.calcInsertIndexRelativeToPreviousGroup(positionSpec.position, existingColumns, previousGroup);
         }
+        existingColumns.splice(insertIndex, 0, ...groupItems);
+        return {
+            startIndex: insertIndex,
+            endIndex: insertIndex + groupItems.length
+        };
     }
-    onItemDoubleClick(entity) {
-        if (entity) {
-            switch (this.interactionMode) {
-                // double click in open mode not supported
-                case 'open':
-                    break;
-                // double click in selection mode triggers normal item click
-                case 'selection':
-                    this._itemClickSubject.next(entity);
-                    break;
-            }
+    calcInsertIndexRelativeToColumn(position, relativeToCol, existingColumns) {
+        const relativeIndex = existingColumns
+            .findIndex(c => c.cdkColumn.name === relativeToCol);
+        switch (position) {
+            case 'start':
+            case 'after':
+                // after relative
+                return relativeIndex + 1;
+            case 'before':
+            case 'end':
+                // before relative
+                return relativeIndex;
         }
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    getId(entity) {
-        var _a, _b;
-        return ((_b = (_a = this.dataContext) === null || _a === void 0 ? void 0 : _a.dataSource) === null || _b === void 0 ? void 0 : _b.getId(entity)) || entity;
+    calcInsertIndexRelativeToPreviousGroup(position, existingColumns, previousGroup) {
+        switch (position) {
+            case 'start':
+                return 0;
+            case 'end':
+                return existingColumns.length;
+            case 'after':
+                // after relative to previous group
+                return previousGroup.endIndex;
+            case 'before':
+                // before relative to previous group
+                return previousGroup.startIndex;
+        }
+    }
+    sortGroupsByIndex(colGroups) {
+        return colGroups
+            .sort((a, b) => {
+            return naturalValueComparator(a.groupIndex, b.groupIndex);
+        }).reverse();
     }
 }
-ElderDataViewBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseComponent, deps: [{ token: SelectionModel }, { token: ElderDataViewSelectionMode }], target: i0.ɵɵFactoryTarget.Component });
-ElderDataViewBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataViewBaseComponent, selector: "elder-data-view-base", inputs: { interactionMode: "interactionMode", selectableEvaluatorFn: "selectableEvaluatorFn", selection: "selection", selectionMultiEnabled: "selectionMultiEnabled", dense: "dense", float: "float", embedded: "embedded" }, outputs: { selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange", itemClick: "itemClick" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-data-view-base', template: '' }]
-        }], ctorParameters: function () { return [{ type: SelectionModel }, { type: ElderDataViewSelectionMode }]; }, propDecorators: { interactionMode: [{
-                type: Input
-            }], selectableEvaluatorFn: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], selectionSingleChange: [{
-                type: Output
-            }], selectionMultiEnabled: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }], dense: [{
-                type: Input
-            }], float: [{
-                type: Input
-            }], embedded: [{
-                type: Input
-            }] } });
 
-class ElderDataViewBaseModule {
+class ElderTableGroup {
+    constructor(id, index) {
+        this.id = id;
+        this.index = index;
+    }
+    static create(groupIndex) {
+        return ElderTableGroup.of(UuidUtil.weakUuid4(), groupIndex);
+    }
+    static of(id, groupIndex) {
+        return new ElderTableGroup(id, groupIndex);
+    }
 }
-ElderDataViewBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderDataViewBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseModule, declarations: [ElderDataViewBaseComponent], imports: [CommonModule] });
-ElderDataViewBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataViewBaseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ElderDataViewBaseComponent],
-                    imports: [CommonModule],
-                }]
-        }] });
-
-class ElderTableRowDirective {
+class ElderTableModel {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(rowRef, renderer) {
-        this.rowRef = rowRef;
-        this.renderer = renderer;
+    constructor() {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._activated = false;
-        this.focused$ = new BehaviorSubject(false);
+        this.elderColumnLayout = new ElderColumnLayout();
+        this._groups = new Map();
+        this._columnGroups = new ReactiveMap();
+        this._rowDefGroups = new ReactiveMap();
+        this._sortGroups = new ReactiveMap();
+        this.selectionVisible$ = new BehaviorSubject(false);
+        /**
+         * The columns to display explicitly set by the user.
+         * We need to support inserting display columns by index or anchored to existing ones.
+         * before([columns])
+         * after()
+         * start()
+         * end([])
+         * @private
+         */
+        this.displayedColumns$ = new BehaviorSubject(undefined);
+        this.displayedColumnsInner$ = this.renderDisplayedColumns(this.displayedColumns$, this.columnDefs$, this.selectionVisible$);
     }
     /***************************************************************************
      *                                                                         *
-     * Host Listener                                                           *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    onFocus(event) {
-        this.focused$.next(true);
-        if (this.tableActivation) {
-            this.tableActivation.activate(this._model);
-        }
+    set selectionVisible(visible) {
+        this.selectionVisible$.next(visible);
     }
-    onBlur(event) {
-        this.focused$.next(false);
+    get selectionVisible() {
+        return this.selectionVisible$.getValue();
     }
-    /***************************************************************************
-     *                                                                         *
-     * Host Bindings                                                           *
-     *                                                                         *
-     **************************************************************************/
-    get activated() {
-        return this._activated;
+    set displayedColumns(columns) {
+        this.displayedColumns$.next(columns);
     }
-    set activated(value) {
-        if (this._activated !== value) {
-            this._activated = value;
-            this.activatedClassEnabled(value);
-        }
+    get displayedColumns() {
+        return this.displayedColumns$.getValue();
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Rendered Properties                                                     *
      *                                                                         *
      **************************************************************************/
-    set model(model) {
-        this._model = model;
+    get columnDefs$() {
+        return this._columnGroups.values$.pipe(map(groups => this.elderColumnLayout.layoutColumns(groups)));
     }
-    get model() {
-        return this._model;
+    get rowDefs$() {
+        return this.sortAndFlatten(this._rowDefGroups);
     }
-    get tableActivation() {
-        return this._tableActivation;
+    get sorts$() {
+        return this._sortGroups.values$;
+    }
+    // ---
+    valuesSortedByGroupIndex(myMap, groups) {
+        return Array.from(myMap.entries())
+            .sort(([a_key], [b_key]) => {
+            var _a, _b, _c, _d;
+            const grpAIndex = (_b = (_a = groups.get(a_key)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : 0;
+            const grpBIndex = (_d = (_c = groups.get(b_key)) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : 0;
+            return naturalValueComparator(grpAIndex, grpBIndex);
+        }).map(([a_key, a_value]) => a_value);
     }
-    get hasFocus() {
-        return this.focused$.getValue();
+    sortAndFlatten(reactMap) {
+        return reactMap.map$.pipe(map(myMap => this.valuesSortedByGroupIndex(myMap, this._groups)), map(columns => CollectionUtil.flatten(columns)));
     }
+    /*
+    public get sortHeaders$(): Observable<MatSortHeader[]> {
+      return this._sortGroups.values$.pipe(
+        map(groups => this.flattenDefs(groups))
+      );
+    }*/
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    bindTableActivation(activation) {
-        if (this._tableActivation !== activation) {
-            this._tableActivation = activation;
-            this.enableRowFocus(!!this._tableActivation);
-            if (!activation) {
-                this.activated = false;
-            }
-        }
+    registerGroup(group) {
+        this._groups.set(group.id, group);
     }
-    bringToView() {
-        const row = this.rowRef.nativeElement;
-        // scroll-snap-align: start;
-        row.scrollIntoView({
-            block: 'nearest',
-            inline: 'nearest' // horizontal alignment
-        });
+    updateColumnGroup(group, columnGroup) {
+        this._columnGroups.set(group.id, columnGroup);
     }
-    foucs() {
-        const row = this.rowRef.nativeElement;
-        row.focus();
+    updateRowDefs(group, rows) {
+        this._rowDefGroups.set(group.id, rows);
+    }
+    updateSortGroup(group, sort) {
+        this._sortGroups.set(group.id, sort);
+    }
+    clearColumnDefGroup(group) {
+        this._columnGroups.delete(group.id);
+    }
+    clearRowDefGroup(group) {
+        this._rowDefGroups.delete(group.id);
+    }
+    clearSortGroup(group) {
+        this._sortGroups.delete(group.id);
+    }
+    deRegisterGroup(group) {
+        this.clearColumnDefGroup(group);
+        this.clearRowDefGroup(group);
+        this.clearSortGroup(group);
+        this._groups.delete(group.id);
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    enableRowFocus(enable) {
-        // Make the rows focusable on click (but not on tabs)
-        if (enable) {
-            this.renderer.setAttribute(this.rowRef.nativeElement, 'tabIndex', '-1');
-        }
-        else {
-            this.renderer.removeAttribute(this.rowRef.nativeElement, 'tabIndex');
-        }
-    }
-    activatedClassEnabled(enabled) {
-        const activatedClass = 'elder-table-row-activated';
-        if (enabled) {
-            this.renderer.addClass(this.rowRef.nativeElement, activatedClass);
-        }
-        else {
-            this.renderer.removeClass(this.rowRef.nativeElement, activatedClass);
-        }
+    renderDisplayedColumns(userDefinedColumns$, columnDefs$, selectionVisible$) {
+        return combineLatest([userDefinedColumns$, columnDefs$, selectionVisible$]).pipe(map(([displayedColumns, columnDefs, selectionVisible]) => {
+            let columns = displayedColumns;
+            if (!columns) {
+                columns = [];
+                // If the user did not define columns to display
+                // Assume he wants all his own columns in given order
+                if (columnDefs) {
+                    columnDefs.forEach(col => {
+                        columns.push(col.name);
+                    });
+                }
+            }
+            if (this.selectionVisible) {
+                columns = ['select', ...columns];
+            }
+            return columns;
+        }));
     }
 }
-ElderTableRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableRowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ElderTableRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: { model: ["elderTableRow", "model"] }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" } }, exportAs: ["elderTableRow"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableRowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tr[elderTableRow]',
-                    exportAs: 'elderTableRow'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }], model: [{
-                type: Input,
-                args: ['elderTableRow']
-            }] } });
+ElderTableModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElderTableModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableModel, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+function existingOrNewElderTableModel(modelProvider) {
+    return modelProvider !== null && modelProvider !== void 0 ? modelProvider : newElderTableModel();
+}
+function newElderTableModel() {
+    return new ElderTableModel();
+}
+class ElderTableProviders {
+}
+/**
+ * Uses the existing ElderTableModel from a parent if available.
+ * Otherwise, creates a new ElderTableModel and provides it.
+ */
+ElderTableProviders.ExistingOrNewTableModel = {
+    provide: ElderTableModel,
+    useFactory: existingOrNewElderTableModel,
+    deps: [[new Optional(), new SkipSelf(), ElderTableModel]]
+};
+/**
+ * Creates a new ElderTableModel root and provides it,
+ * even if there is an existing parent table model.
+ */
+ElderTableProviders.NewTableModelRoot = {
+    provide: ElderTableModel,
+    useFactory: newElderTableModel
+};
+/**
+ * If there is an existing ElderTableModel service provided, clears it.
+ *
+ * Child components will therefore be blocked from accessing any parent TableModel service
+ * and are instead forced to create their own.
+ *
+ * This supports nesting ElderTable without sharing the table model / columns.
+ */
+ElderTableProviders.ClearTableModel = {
+    provide: ElderTableModel,
+    useValue: null
+};
 
 /**
  * Binds the elder table model to the CDK table.
@@ -13120,9 +13124,9 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(tableModel, selectionModel, dataViewSelection, matSort, parentExtension, cdr, zone) {
+    constructor(tableModel, selectionModel, dataViewOptionsProvider, matSort, parentExtension, cdr, zone) {
         var _a;
-        super(selectionModel, dataViewSelection);
+        super(selectionModel, dataViewOptionsProvider);
         this.tableModel = tableModel;
         this.parentExtension = parentExtension;
         this.cdr = cdr;
@@ -13133,7 +13137,6 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.destroy$ = new Subject();
         /**
          * Load next chunk after current is done
          */
@@ -13154,14 +13157,6 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
          */
         this.hiddenField = null;
         this.pageSizeOptions = [30, 50, 100, 150, 200];
-        /**
-         * Define if elder-table should clean up the
-         * data-context resources for you.
-         *
-         * In more advanced scenarios where you plan to reuse the same data-context
-         * set this to false and release the resources yourself. (dataContext.close)
-         */
-        this.cleanUp = true;
         this.keepSelection = true;
         this.showFooter = false;
         this.toolbarRowTemplates$ = new BehaviorSubject([]);
@@ -13181,16 +13176,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
      *                                                                         *
      **************************************************************************/
     ngOnInit() {
-        if (this.dataViewSelection) {
-            this.selectionVisible = true;
-            this.selectionMultiEnabled = this.dataViewSelection.multi;
-            this.interactionMode = 'selection';
-            this.float = false;
-            if (this.dataContext) {
-                this.dataContext.filter.updateFilters(this.dataViewSelection.filters);
-                this.dataContext.sort.updateSorts(this.dataViewSelection.sorts);
-            }
-        }
+        super.ngOnInit();
         ElderTableModelCdkTableBinding
             .of(this.tableModel)
             .table(this.matTable)
@@ -13220,11 +13206,6 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
             .updated(rows => this.rows$.next(rows))
             .bindUntil(this.destroy$);
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.autoCleanUp();
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -13348,18 +13329,9 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
             }
         });
     }
-    /**
-     * Performs clean up of the current data context if auto clean up is enabled.
-     */
-    autoCleanUp() {
-        if (this.cleanUp && this.dataContext) {
-            this.logger.debug('Releasing DataContext resources to prevent memory leak. [cleanUp]="true"');
-            this.dataContext.close();
-        }
-    }
 }
-ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: { idField: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", cleanUp: "cleanUp", keepSelection: "keepSelection", showFooter: "showFooter", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, providers: [
+ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: { idField: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", keepSelection: "keepSelection", showFooter: "showFooter", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, providers: [
         ElderTableProviders.ExistingOrNewTableModel,
         {
             provide: ELDER_DATA_VIEW,
@@ -13378,7 +13350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
         }], ctorParameters: function () {
         return [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                         type: Optional
-                    }] }, { type: ElderDataViewSelectionMode, decorators: [{
+                    }] }, { type: ElderDataViewOptionsProvider, decorators: [{
                         type: Optional
                     }, {
                         type: SkipSelf
@@ -13412,8 +13384,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], pageSizeOptions: [{
                 type: Input
-            }], cleanUp: [{
-                type: Input
             }], keepSelection: [{
                 type: Input
             }], showFooter: [{
@@ -15278,8 +15248,8 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel, dataViewSelection, mediaObserver) {
-        super(selectionModel, dataViewSelection);
+    constructor(selectionModel, dataViewOptionsProvider, mediaObserver) {
+        super(selectionModel, dataViewOptionsProvider);
         this.mediaObserver = mediaObserver;
         /***************************************************************************
          *                                                                         *
@@ -15312,7 +15282,6 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         this.idField = 'id';
         this.selectionVisible = true;
         this.pageSizeOptions = [30, 50, 100, 150, 200];
-        this.destroy$ = new Subject();
     }
     /***************************************************************************
      *                                                                         *
@@ -15320,6 +15289,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
      *                                                                         *
      **************************************************************************/
     ngOnInit() {
+        super.ngOnInit();
         const columnCount$ = (this.responsiveColumnCount
             ? this.responsiveColumn()
             : this._columnCount);
@@ -15327,16 +15297,6 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
             this.dataContext$.pipe(filter(dc => !!dc), switchMap(dc => dc.data)),
             columnCount$
         ]).pipe(debounceTime(50), map(([data, columns]) => this.groupForColumns(data, columns)));
-        if (this.dataViewSelection) {
-            this.selectionVisible = true;
-            this.selectionMultiEnabled = this.dataViewSelection.multi;
-            this.float = false;
-            const dataContext = this.dataContext$.getValue();
-            if (dataContext) {
-                dataContext.filter.updateFilters(this.dataViewSelection.filters);
-                dataContext.sort.updateSorts(this.dataViewSelection.sorts);
-            }
-        }
     }
     ngAfterViewInit() {
         MatTableDataContextBindingBuilder
@@ -15344,10 +15304,6 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
             .withPaginator(of(this.matPaginator))
             .bindUntil(this.destroy$);
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -15462,7 +15418,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         return this.mediaObserver.asObservable().pipe(filter(changes => changes.length > 0), map(changes => this.sizeToColumns.get(changes[0].mqAlias)), debounceTime(150), startWith(start));
     }
 }
-ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i3$5.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
+ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3$5.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
 ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderGridComponent, selector: "elder-grid", inputs: { toolbarVisible: "toolbarVisible", footerVisible: "footerVisible", itemHeight: "itemHeight", responsiveColumnCount: "responsiveColumnCount", availableSorts: "availableSorts", sortTranslationPrefix: "sortTranslationPrefix", hiddenField: "hiddenField", idField: "idField", selectionVisible: "selectionVisible", pageSizeOptions: "pageSizeOptions", tileTemplate: "tileTemplate", toolbarTemplate: "toolbarTemplate", data: "data", columnCount: "columnCount" }, providers: [
         {
             provide: ELDER_DATA_VIEW,
@@ -15480,7 +15436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
         }], ctorParameters: function () {
         return [{ type: SelectionModel, decorators: [{
                         type: Optional
-                    }] }, { type: ElderDataViewSelectionMode, decorators: [{
+                    }] }, { type: ElderDataViewOptionsProvider, decorators: [{
                         type: Optional
                     }, {
                         type: SkipSelf
@@ -18806,7 +18762,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-form-field class=\"full-width\">\n          <input\n            matInput\n            type=\"text\"\n            name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n            [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n            (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n            [required]=\"required && textColumn.required\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n          />\n          <mat-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "cleanUp", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-form-field class=\"full-width\">\n          <input\n            matInput\n            type=\"text\"\n            name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n            [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n            (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n            [required]=\"required && textColumn.required\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n          />\n          <mat-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-form-field class=\"full-width\">\n          <input\n            matInput\n            type=\"text\"\n            name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n            [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n            (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n            [required]=\"required && textColumn.required\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n          />\n          <mat-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n" }]
@@ -21272,12 +21228,162 @@ class ElderSelectValueDirective {
         this.viewContainer = viewContainer;
     }
 }
-ElderSelectValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectValueDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ElderSelectValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectValueDirective, selector: "[elderSelectValue]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectValueDirective, decorators: [{
+ElderSelectValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectValueDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectValueDirective, selector: "[elderSelectValue]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectValueDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[elderSelectValue]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+
+class TemplatedSelectionDialogComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dialogRef, data, selectionModel) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.selectionModel = selectionModel;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Component Events                                                        *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+    }
+}
+TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
+TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: SelectionModel }];
+    } });
+
+function createSelectionModel$1() {
+    return new SelectionModel();
+}
+function createDataViewOptionsProvider() {
+    return new ElderDataViewOptionsProvider();
+}
+class SelectionModelPopupDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(templateRef, viewContainer, dialog, dataViewOptionsProvider, selectionModel, changeDetectorRef) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.dialog = dialog;
+        this.dataViewOptionsProvider = dataViewOptionsProvider;
+        this.selectionModel = selectionModel;
+        this.changeDetectorRef = changeDetectorRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+    }
+    set elderSelectionModelPopupTransform(fn) {
+        this._transformerFn = fn;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Let the user choose some entities and return the selection.
+     */
+    choose(keyGetter, currentSelection, filters, sorts, multi = false) {
+        this.dataViewOptionsProvider.updateOptions(options => options
+            .withFilters(filters || [])
+            .withSorts(sorts || [])
+            .withSelectionMultiEnabled(multi));
+        this.selectionModel.isMultipleSelection = multi;
+        this.selectionModel.keyGetterFn = keyGetter;
+        this.selectionModel.replaceSelection(currentSelection);
+        this.log.info('Replaced selection popup with current ' + currentSelection.length + ' entities:', currentSelection);
+        const dialogRef = this.openSelectDialog();
+        // This fixes dialog rendering when the browser template
+        // view container is outside the invoking control, which
+        // happens when using ng-content projection.
+        this.changeDetectorRef.markForCheck();
+        return dialogRef.afterClosed().pipe(switchMap((chosenEntities) => {
+            if (chosenEntities) {
+                return this._transformerFn
+                    ? of(chosenEntities.map(value => this._transformerFn(value)))
+                    : of(chosenEntities);
+            }
+            else {
+                return EMPTY;
+            }
+        }));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    openSelectDialog() {
+        return this.dialog.open(TemplatedSelectionDialogComponent, {
+            width: '90vw',
+            height: '90vh',
+            panelClass: 'custom-dialog-container',
+            data: {
+                selectionComponentTemplate: this.templateRef
+            },
+            viewContainerRef: this.viewContainer
+        });
+    }
+}
+SelectionModelPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$7.MatDialog }, { token: ElderDataViewOptionsProvider }, { token: SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionModelPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: SelectionModelPopupDirective, selector: "[elderSelectionModelPopup]", inputs: { elderSelectionModelPopupTransform: "elderSelectionModelPopupTransform" }, providers: [
+        {
+            provide: SelectionModel,
+            useFactory: createSelectionModel$1
+        },
+        {
+            provide: ElderDataViewOptionsProvider,
+            useFactory: createDataViewOptionsProvider
+        },
+        ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
+    ], exportAs: ["elderSelectionModelPopup"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[elderSelectValue]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+            args: [{
+                    selector: '[elderSelectionModelPopup]',
+                    exportAs: 'elderSelectionModelPopup',
+                    providers: [
+                        {
+                            provide: SelectionModel,
+                            useFactory: createSelectionModel$1
+                        },
+                        {
+                            provide: ElderDataViewOptionsProvider,
+                            useFactory: createDataViewOptionsProvider
+                        },
+                        ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$7.MatDialog }, { type: ElderDataViewOptionsProvider }, { type: SelectionModel }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { elderSelectionModelPopupTransform: [{
+                type: Input,
+                args: ['elderSelectionModelPopupTransform']
+            }] } });
 
 class ElderSelectComponentState {
     constructor(idle, loading, error) {
@@ -25188,13 +25294,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 }]
         }] });
 
+class TypedEventMessage {
+    constructor(type, data) {
+        this.type = type;
+        this.data = data;
+    }
+    // type predicate to check weather an object is a DataViewMessage type
+    static isOfType(obj) {
+        return obj.type !== undefined
+            && obj.data !== undefined;
+    }
+}
+class DataViewSelectionInit {
+    constructor(options, initialSelection = [], idField = 'id') {
+        this.options = options;
+        this.initialSelection = initialSelection;
+        this.idField = idField;
+    }
+}
+class DataViewSelection {
+    constructor(selection) {
+        this.selection = selection;
+    }
+}
+class DataViewMessage extends TypedEventMessage {
+    constructor(type, data) {
+        super(type, data);
+        this.type = type;
+        this.data = data;
+    }
+    static initialSelection(init) {
+        return new DataViewMessage('SELECTION_INIT', init);
+    }
+    static selection(selection) {
+        return new DataViewMessage('SELECTION_SELECTED', selection);
+    }
+    // type predicate to check weather an object is a DataViewMessage type
+    static isOfType(obj) {
+        return obj.type !== undefined
+            && obj.data !== undefined;
+    }
+}
+
 class IFrameState {
-    constructor(state, message = null) {
-        this.state = state;
+    constructor(type, message = null) {
+        this.type = type;
         this.message = message;
     }
+    get isLoading() {
+        return this.type === 'LOADING';
+    }
+    get hasLoaded() {
+        return this.type == 'LOADED';
+    }
     get hasError() {
-        return this.state === 'error';
+        return this.type === 'ERROR';
     }
 }
 class IframeHostComponent {
@@ -25209,24 +25363,37 @@ class IframeHostComponent {
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.log = LoggerFactory.getLogger(this.constructor.name);
         this.iframeParams$ = new BehaviorSubject(null);
-        this.iframeState$ = new BehaviorSubject(new IFrameState('loading'));
-        this.post = new EventEmitter();
+        this.iframeState$ = new BehaviorSubject(new IFrameState('LOADING'));
+        this.message = new EventEmitter();
         this.close = new EventEmitter();
     }
     /***************************************************************************
      *                                                                         *
-     * Lifecycle                                                               *
+     * Listeners                                                               *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
-    onMessage(e) {
-        const key = e.message ? 'message' : 'data';
-        const data = e[key];
-        this.onChildMessage(data);
+    /**
+     * Listens for messages from window.
+     * Makes it possible to react upon messages from iframe child window.
+     *
+     * @param event message from child window
+     */
+    onWindowMessage(event) {
+        this.log.debug('Received message from child:', event);
+        if (event) {
+            if (TypedEventMessage.isOfType(event.data))
+                this.handleMessageFromChild(event.data);
+        }
         return true;
     }
+    /***************************************************************************
+     *                                                                         *
+     * Lifecycle                                                               *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() { }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -25240,9 +25407,17 @@ class IframeHostComponent {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    onIframeLoadError(err) {
-        this.logger.warn('Failed to load iframe', err);
-        this.iframeState$.next(new IFrameState('loading', err + ''));
+    onIframeLoadEvent(event) {
+        this.log.debug('Finished loading iframe', event);
+        this.iframeState$.next(new IFrameState('LOADED'));
+    }
+    onIframeErrorEvent(err) {
+        this.log.warn('Failed to load iframe', err);
+        this.iframeState$.next(new IFrameState('ERROR', err + ''));
+    }
+    sendMessageToChild(msg) {
+        this.log.debug('Sending message to iframe child:', msg);
+        this.iframe.nativeElement.contentWindow.postMessage(msg, "*");
     }
     doClose(event) {
         this.close.emit();
@@ -25252,28 +25427,26 @@ class IframeHostComponent {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    onChildMessage(message) {
-        this.logger.debug('Received message from child:', message);
-        switch (message.action) {
-            case 'POST':
-                this.post.emit(message.data);
-                break;
-            case 'CLOSE':
-                this.close.emit(message.data);
-                break;
+    handleMessageFromChild(message) {
+        this.message.next(message);
+        if (message.type === 'CLOSE') {
+            this.close.emit(message.data);
         }
     }
 }
 IframeHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { post: "post", close: "close" }, host: { listeners: { "window:message": "onMessage($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex\n                *ngIf=\"!ctx.state.hasError\"\n                (error)=\"onIframeLoadError($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { message: "message", close: "close" }, host: { listeners: { "window:message": "onWindowMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-i-frame-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex\n                *ngIf=\"!ctx.state.hasError\"\n                (error)=\"onIframeLoadError($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { post: [{
+            args: [{ selector: 'elder-i-frame-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { iframe: [{
+                type: ViewChild,
+                args: ['iframe']
+            }], message: [{
                 type: Output
             }], close: [{
                 type: Output
-            }], onMessage: [{
+            }], onWindowMessage: [{
                 type: HostListener,
                 args: ['window:message', ['$event']]
             }], iframeParams: [{
@@ -25314,7 +25487,7 @@ class IframeDialogComponent {
     }
 }
 IframeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-IframeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n" }]
@@ -25388,7 +25561,7 @@ class IframeSideContentComponent {
 IframeSideContentComponent.QUERY_PARAM_SRC_URL = 'srcUrl';
 IframeSideContentComponent.QUERY_PARAM_WIDTH = 'width';
 IframeSideContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeSideContentComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
-IframeSideContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeSideContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeSideContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-side-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n" }]
@@ -25423,7 +25596,7 @@ class IframeService {
     }
     postCloseMessage(data) {
         IframeService.postToParent({
-            action: 'CLOSE',
+            type: 'CLOSE',
             data: data
         });
     }
@@ -25477,13 +25650,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     ['$event']]
             }] } });
 
+/**
+ * Container for displaying a remote data view in an iframe.
+ * Provides capabilities to communicate between remote data view (child)
+ * and iframe parent.
+ */
+class DataViewIframeComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(selectionModel) {
+        this.selectionModel = selectionModel;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._dataViewOptions$ = new BehaviorSubject(null);
+        this._destroy$ = new Subject();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        // iframe is only available after view init
+        this.setupDataViewOptionsBridge(this.iframeHost);
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get dataViewOptions() {
+        return this._dataViewOptions$.getValue();
+    }
+    set dataViewOptions(options) {
+        this._dataViewOptions$.next(options);
+    }
+    get dataViewOptions$() {
+        return this._dataViewOptions$.asObservable();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    onMessageFromChild(message) {
+        if (DataViewMessage.isOfType(message)) {
+            switch (message.type) {
+                case 'SELECTION_SELECTED':
+                    this.handleSelectionMessage(message.data);
+                    break;
+            }
+        }
+    }
+    sendMessageToChild(message) {
+        this.log.debug("Sending message to iframe child:", message);
+        this.iframeHost.sendMessageToChild(message);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleSelectionMessage(dataViewSelection) {
+        if (this.selectionModel) {
+            this.selectionModel.replaceSelection(dataViewSelection.selection);
+        }
+    }
+    setupDataViewOptionsBridge(iframeHost) {
+        combineLatest([
+            this._dataViewOptions$,
+            iframeHost.iframeState$
+        ]).pipe(takeUntil(this._destroy$), filter(([options, state]) => !!options && state.hasLoaded)).subscribe(([options, state]) => this.sendMessageToChild(this.buildDataViewInitMessage(options, this.initialSelection)));
+    }
+    buildDataViewInitMessage(options, initialSelection) {
+        return DataViewMessage.initialSelection(new DataViewSelectionInit(options, initialSelection, this.idField));
+    }
+}
+DataViewIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataViewIframeComponent, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DataViewIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DataViewIframeComponent, selector: "elder-data-view-iframe", inputs: { srcUrl: "srcUrl", idField: "idField", initialSelection: "initialSelection", dataViewOptions: "dataViewOptions" }, viewQueries: [{ propertyName: "iframeHost", first: true, predicate: IframeHostComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n\n  <elder-i-frame-host fxFlex\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataViewIframeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-data-view-iframe', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n\n  <elder-i-frame-host fxFlex\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: SelectionModel, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { srcUrl: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], initialSelection: [{
+                type: Input
+            }], iframeHost: [{
+                type: ViewChild,
+                args: [IframeHostComponent]
+            }], dataViewOptions: [{
+                type: Input
+            }] } });
+
+function createSelectionModel() {
+    return new SelectionModel();
+}
+function createDataOptionsProvider() {
+    return new ElderDataViewOptionsProvider();
+}
+/**
+ * An adapter bridging communication between
+ * a data view displayed in an iframe and its parent.
+ *
+ * For example propagates selection model changes
+ * to the iframe parent.
+ */
+class DataViewIframeAdapterDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(iframeService, selectionModel, dataViewOptionsProvider) {
+        this.iframeService = iframeService;
+        this.selectionModel = selectionModel;
+        this.dataViewOptionsProvider = dataViewOptionsProvider;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._destroy$ = new Subject();
+        selectionModel.selection.pipe(takeUntil(this._destroy$)).subscribe(selection => this.propagateSelectionToParent(selection));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Listeners                                                               *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Listens for messages from parent window.
+     * Makes it possible to react upon messages from iframe parent.
+     *
+     * @param event message from parent window
+     */
+    onWindowsMessage(event) {
+        this.log.debug('Received message event from parent:', event);
+        if (event) {
+            if (DataViewMessage.isOfType(event.data)) {
+                this.log.debug('Received data view message from parent:', event);
+                this.handleMessageFromParent(event.data);
+            }
+        }
+        return true;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleMessageFromParent(message) {
+        switch (message.type) {
+            case 'SELECTION_INIT':
+                this.initializeDataView(message.data);
+                break;
+        }
+    }
+    initializeDataView(init) {
+        this.dataViewOptionsProvider.updateOptions(options => options
+            .withSorts(init.options.sorts)
+            .withFilters(init.options.filters));
+        this.selectionModel.keyGetterFn = (entity) => entity[init.idField];
+        this.selectionModel.isMultipleSelection = init.options.selectionMultiEnabled;
+        if (init.initialSelection) {
+            this.selectionModel.replaceSelection(init.initialSelection);
+        }
+    }
+    propagateSelectionToParent(selection) {
+        this.log.debug('Propagating selection to iframe parent:', selection);
+        const message = this.buildSelectionMessage(selection);
+        this.iframeService.postDataMessage(message);
+    }
+    buildSelectionMessage(selection) {
+        return DataViewMessage.selection(new DataViewSelection(selection));
+    }
+}
+DataViewIframeAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataViewIframeAdapterDirective, deps: [{ token: IframeService }, { token: SelectionModel }, { token: ElderDataViewOptionsProvider }], target: i0.ɵɵFactoryTarget.Directive });
+DataViewIframeAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: DataViewIframeAdapterDirective, selector: "[elderDataViewIframeAdapter]", host: { listeners: { "window:message": "onWindowsMessage($event)" } }, providers: [
+        {
+            provide: SelectionModel,
+            useFactory: createSelectionModel
+        },
+        {
+            provide: ElderDataViewOptionsProvider,
+            useFactory: createDataOptionsProvider
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataViewIframeAdapterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderDataViewIframeAdapter]',
+                    providers: [
+                        {
+                            provide: SelectionModel,
+                            useFactory: createSelectionModel
+                        },
+                        {
+                            provide: ElderDataViewOptionsProvider,
+                            useFactory: createDataOptionsProvider
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: IframeService }, { type: SelectionModel }, { type: ElderDataViewOptionsProvider }]; }, propDecorators: { onWindowsMessage: [{
+                type: HostListener,
+                args: ['window:message', ['$event']]
+            }] } });
+
 class ElderIFrameModule {
 }
 ElderIFrameModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderIFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ElderIFrameModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderIFrameModule, declarations: [IframeHostComponent,
         IframeDialogComponent,
         IframeSideContentComponent,
-        IframeCloseDirective], imports: [
+        IframeCloseDirective,
+        DataViewIframeComponent,
+        DataViewIframeAdapterDirective], imports: [
         // Angular
         CommonModule,
         RouterModule,
@@ -25499,7 +25911,9 @@ ElderIFrameModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
     ], exports: [IframeHostComponent,
         IframeDialogComponent,
         IframeSideContentComponent,
-        IframeCloseDirective] });
+        IframeCloseDirective,
+        DataViewIframeComponent,
+        DataViewIframeAdapterDirective] });
 ElderIFrameModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderIFrameModule, imports: [
         // Angular
         CommonModule,
@@ -25535,13 +25949,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                         IframeHostComponent,
                         IframeDialogComponent,
                         IframeSideContentComponent,
-                        IframeCloseDirective
+                        IframeCloseDirective,
+                        DataViewIframeComponent,
+                        DataViewIframeAdapterDirective
                     ],
                     exports: [
                         IframeHostComponent,
                         IframeDialogComponent,
                         IframeSideContentComponent,
-                        IframeCloseDirective
+                        IframeCloseDirective,
+                        DataViewIframeComponent,
+                        DataViewIframeAdapterDirective
                     ]
                 }]
         }] });
@@ -26680,5 +27098,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_SELECT_BASE, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewBaseModule, ElderDataViewSelectionMode, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPlugParentFormDirectiveLegacy, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityInputComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredIgnoreZeroValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPlugParentFormDirectiveLegacy, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityInputComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredIgnoreZeroValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map