@mosa-ng/material 20.1.1 → 20.1.2

package/fesm2022/mosa-ng-material.mjs

@@ -1,5 +1,1047 @@
-import { AssetsI18nLoaderService } from '@mosa-ng/core';
-import { makeEnvironmentProviders, provideAppInitializer, inject } from '@angular/core';
+import { isZeroOrHigher, isNumber, isNullOrEmpty, MosaDurationPipe, ApiService, CoreLoggerService, AssetsI18nLoaderService } from '@mosa-ng/core';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, Inject, Optional, EventEmitter, inject, ChangeDetectorRef, ElementRef, ContentChild, Output, Injectable, ViewChildren, HostListener, Directive, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { UpperCasePipe, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { firstValueFrom, BehaviorSubject, timer } from 'rxjs';
+import { MatSelect } from '@angular/material/select';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { MatList, MatListItem } from '@angular/material/list';
+
+class AlertWidget {
+    constructor() {
+    }
+    ngOnInit() {
+        this.updateData();
+    }
+    ngOnChanges(_changes) {
+        this.updateData();
+    }
+    updateData() {
+        if (!this.title || !this.icon) {
+            switch (this.type) {
+                case 'error':
+                    this.icon ||= 'alert-circle-outline';
+                    this.title ||= 'Error';
+                    break;
+                case 'info':
+                    this.icon ||= 'information-outline';
+                    this.title ||= 'Information';
+                    break;
+                case 'success':
+                    this.icon ||= 'check';
+                    this.title ||= 'Success';
+                    break;
+                case 'warning':
+                    this.icon ||= 'alert-outline';
+                    this.title ||= 'Warning';
+                    break;
+                default:
+                    this.icon ||= 'information-outline';
+                    this.title ||= 'Alert';
+                    break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: AlertWidget, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.11", type: AlertWidget, isStandalone: true, selector: "mosa-alert-widget", inputs: { icon: "icon", title: "title", message: "message", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'alert-' + type\" class=\"alert\">\n    <div class=\"icon\">\n        <mat-icon>icon</mat-icon>\n        {{ title }}\n    </div>\n    <div>{{ message }}</div>\n</div>\n", styles: [":host{display:block}.alert{position:relative;padding:15px;border-radius:4px;width:100%;display:table;color:#222;border:1px solid #222222;border-left-width:5px}.alert .icon{display:flex;align-items:center;margin-bottom:10px}.alert .icon mat-icon{margin-right:10px}.alert-danger{background:#f443361a;border-color:#f44336}.alert-warning{background:#ffaa001a;border-color:#fa0}.alert-info{background:#008eff1a;border-color:#008eff}.alert-primary{background:#66cc331a;border-color:#6c3}.alert-success{background:#3ad15d1a;border-color:#3ad15d}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: AlertWidget, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-alert-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<div [class]=\"'alert-' + type\" class=\"alert\">\n    <div class=\"icon\">\n        <mat-icon>icon</mat-icon>\n        {{ title }}\n    </div>\n    <div>{{ message }}</div>\n</div>\n", styles: [":host{display:block}.alert{position:relative;padding:15px;border-radius:4px;width:100%;display:table;color:#222;border:1px solid #222222;border-left-width:5px}.alert .icon{display:flex;align-items:center;margin-bottom:10px}.alert .icon mat-icon{margin-right:10px}.alert-danger{background:#f443361a;border-color:#f44336}.alert-warning{background:#ffaa001a;border-color:#fa0}.alert-info{background:#008eff1a;border-color:#008eff}.alert-primary{background:#66cc331a;border-color:#6c3}.alert-success{background:#3ad15d1a;border-color:#3ad15d}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+// eslint-disable-next-line max-classes-per-file
+var ConfirmDialogResult;
+(function (ConfirmDialogResult) {
+    ConfirmDialogResult[ConfirmDialogResult["confirmed"] = 0] = "confirmed";
+    ConfirmDialogResult[ConfirmDialogResult["denied"] = 1] = "denied";
+    ConfirmDialogResult[ConfirmDialogResult["cancelled"] = 2] = "cancelled";
+})(ConfirmDialogResult || (ConfirmDialogResult = {}));
+class ConfirmDialogAction {
+    constructor(label, visible) {
+        this.label = label;
+        this.visible = visible;
+    }
+}
+class ConfirmDialogData {
+    constructor(title, message, cancel, confirm, deny) {
+        this.title = title;
+        this.message = message;
+        this.cancel = cancel;
+        this.confirm = confirm;
+        this.deny = deny;
+    }
+}
+
+class ConfirmDialog {
+    constructor(myConfirmDialogData, myMatDialogRef) {
+        this.myConfirmDialogData = myConfirmDialogData;
+        this.myMatDialogRef = myMatDialogRef;
+        this.result = ConfirmDialogResult;
+        const cancel = new ConfirmDialogAction('mosa.commons.buttons.cancel', true);
+        const deny = new ConfirmDialogAction('mosa.commons.buttons.deny');
+        const confirm = new ConfirmDialogAction('mosa.commons.buttons.confirm', true);
+        const title = 'mosa.components.confirmDialog.title';
+        const message = 'mosa.components.confirmDialog.message';
+        this.dialogData = myConfirmDialogData || new ConfirmDialogData(title, message, cancel, confirm, deny);
+        if (!this.dialogData.title) {
+            this.dialogData.title = title;
+        }
+        if (!this.dialogData.message) {
+            this.dialogData.message = message;
+        }
+        if (!this.dialogData.cancel) {
+            this.dialogData.cancel = cancel;
+        }
+        if (!this.dialogData.confirm) {
+            this.dialogData.confirm = confirm;
+        }
+        if (!this.dialogData.deny) {
+            this.dialogData.deny = deny;
+        }
+    }
+    ngOnInit() {
+        //
+    }
+    confirm(result) {
+        this.myMatDialogRef.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ConfirmDialog, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: ConfirmDialog, isStandalone: true, selector: "mosa-confirm-dialog", ngImport: i0, template: "<h1 class=\"active\" mat-dialog-title>{{ dialogData.title | translate }}</h1>\n<div mat-dialog-content>\n    {{ dialogData.message | translate }}\n</div>\n<div mat-dialog-actions>\n    @if (dialogData.cancel) {\n        <button (click)=\"confirm(result.cancelled)\" color=\"primary\" mat-stroked-button>\n            {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}\n        </button>\n    }\n    @if (dialogData.deny?.visible) {\n        <button (click)=\"confirm(result.denied)\" color=\"primary\" mat-stroked-button>\n            {{ dialogData.deny?.label | translate | uppercase }}\n        </button>\n    }\n    @if (dialogData.confirm?.visible) {\n        <button (click)=\"confirm(result.confirmed)\" color=\"primary\" mat-flat-button>\n            {{ dialogData.confirm?.label | translate | uppercase }}\n        </button>\n    }\n</div>\n", styles: [".mat-dialog-actions{margin-top:20px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButton,
+                        UpperCasePipe,
+                        TranslateModule,
+                    ], template: "<h1 class=\"active\" mat-dialog-title>{{ dialogData.title | translate }}</h1>\n<div mat-dialog-content>\n    {{ dialogData.message | translate }}\n</div>\n<div mat-dialog-actions>\n    @if (dialogData.cancel) {\n        <button (click)=\"confirm(result.cancelled)\" color=\"primary\" mat-stroked-button>\n            {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}\n        </button>\n    }\n    @if (dialogData.deny?.visible) {\n        <button (click)=\"confirm(result.denied)\" color=\"primary\" mat-stroked-button>\n            {{ dialogData.deny?.label | translate | uppercase }}\n        </button>\n    }\n    @if (dialogData.confirm?.visible) {\n        <button (click)=\"confirm(result.confirmed)\" color=\"primary\" mat-flat-button>\n            {{ dialogData.confirm?.label | translate | uppercase }}\n        </button>\n    }\n</div>\n", styles: [".mat-dialog-actions{margin-top:20px}\n"] }]
+        }], ctorParameters: () => [{ type: ConfirmDialogData, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }] });
+
+class CellEditorBaseComponent {
+    constructor(myMatDialog) {
+        this.myMatDialog = myMatDialog;
+        this.dataSource = new MatTableDataSource();
+        this.displayedColumns = [];
+    }
+    ngOnInit() {
+        //
+    }
+    get changedRows() {
+        return this.dataSource?.data?.filter((c) => !!c.changedRowKeys && c.changedRowKeys?.length > 0);
+    }
+    /**
+     * Remove table item data
+     * @param data
+     */
+    serializeData(data) {
+        return data.map((val) => {
+            delete val.changedRowKeys;
+            delete val.rowOriginalData;
+            return val;
+        });
+    }
+    toTableItems(data) {
+        return data.map((val) => ({
+            ...val,
+            rowOriginalData: val,
+            changedRowKeys: [],
+        }));
+    }
+    async canDeactivate(_component, _currentRoute, _currentState, _nextState) {
+        if (!this.changedRows.length) {
+            return true;
+        }
+        const result = await firstValueFrom(this.myMatDialog
+            .open(ConfirmDialog, {
+            width: '600px',
+            data: new ConfirmDialogData('mosa.components.cellEditorBase.discardChanges.label', 'mosa.components.cellEditorBase.discardChanges.message'),
+        })
+            .afterClosed());
+        return result === ConfirmDialogResult.confirmed;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorBaseComponent, deps: [{ token: i1.MatDialog, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.11", type: CellEditorBaseComponent, isStandalone: true, selector: "mosa-cell-editor-base", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mosa-cell-editor-base',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i1.MatDialog, decorators: [{
+                    type: Optional
+                }] }] });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class CellEditorComponent {
+    constructor() {
+        this.key = '';
+        this.valueChange = new EventEmitter();
+        this.cellClick = new EventEmitter();
+        this.cellChange = new EventEmitter();
+        this.cellCancel = new EventEmitter();
+        this.mode = 'output';
+        this.myChangeDetectorRef = inject(ChangeDetectorRef);
+        this.myElementRef = inject((ElementRef));
+    }
+    get element() {
+        return this.myElementRef.nativeElement;
+    }
+    ngOnInit() {
+        this.oldValue = this.value;
+        this.rowItem.rowOriginalData = this.rowItem;
+    }
+    toOutput(save) {
+        if (this.mode !== 'output') {
+            this.mode = 'output';
+            this.myChangeDetectorRef.markForCheck();
+            this.element.classList.remove('focused');
+            if (save) {
+                if (!this.rowItem.changedRowKeys) {
+                    this.rowItem.changedRowKeys = [];
+                }
+                const index = this.rowItem.changedRowKeys.indexOf(this.key);
+                if (this.value !== this.oldValue) {
+                    if (index === -1) {
+                        this.rowItem.changedRowKeys.push(this.key);
+                        this.element.classList.add('edited');
+                    }
+                    this.cellChange.emit();
+                }
+                else {
+                    if (index !== -1) {
+                        this.rowItem.changedRowKeys.splice(index, 1);
+                        this.element.classList.remove('edited');
+                    }
+                }
+            }
+            else {
+                this.value = this.oldValue;
+                this.cellCancel.emit();
+            }
+            this.valueChange.next(this.value);
+        }
+    }
+    toInput() {
+        this.mode = 'input';
+        this.myChangeDetectorRef.markForCheck();
+        this.element.classList.add('focused');
+        setTimeout(() => {
+            const comp = this.element.querySelector('.cell-input');
+            if (comp instanceof HTMLInputElement) {
+                comp.focus();
+            }
+            else if (this.select) {
+                this.select.open();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: CellEditorComponent, isStandalone: true, selector: "mosa-cell-editor", inputs: { key: "key", rowItem: "rowItem", value: "value" }, outputs: { valueChange: "valueChange", cellClick: "cellClick", cellChange: "cellChange", cellCancel: "cellCancel" }, queries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@if (mode === 'input') {\n    <div class=\"input-wrapper\">\n        <ng-content select=\".cell-input\"></ng-content>\n    </div>\n}\n@if (mode === 'output') {\n    <div class=\"output-wrapper\">\n        <ng-content select=\".cell-output\"></ng-content>\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}:host.focused .input-wrapper{height:calc(100% - 6px);width:100%;box-shadow:0 0 0 3px #1387dfcc;outline:0;display:flex;flex-direction:column}:host.edited{color:#1387df;font-weight:500}::ng-deep .editable-cell{position:relative}::ng-deep .editable-cell:first-child mosa-cell-editor:not(.focused){padding-left:24px}::ng-deep .cell-input{padding:10px}::ng-deep .cell-output{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep input.cell-input{font-size:14px;font-family:Roboto,sans-serif;background:none;flex-grow:1;outline:0;border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-cell-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode === 'input') {\n    <div class=\"input-wrapper\">\n        <ng-content select=\".cell-input\"></ng-content>\n    </div>\n}\n@if (mode === 'output') {\n    <div class=\"output-wrapper\">\n        <ng-content select=\".cell-output\"></ng-content>\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}:host.focused .input-wrapper{height:calc(100% - 6px);width:100%;box-shadow:0 0 0 3px #1387dfcc;outline:0;display:flex;flex-direction:column}:host.edited{color:#1387df;font-weight:500}::ng-deep .editable-cell{position:relative}::ng-deep .editable-cell:first-child mosa-cell-editor:not(.focused){padding-left:24px}::ng-deep .cell-input{padding:10px}::ng-deep .cell-output{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep input.cell-input{font-size:14px;font-family:Roboto,sans-serif;background:none;flex-grow:1;outline:0;border:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{
+                type: Input
+            }], rowItem: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], cellChange: [{
+                type: Output
+            }], cellCancel: [{
+                type: Output
+            }], select: [{
+                type: ContentChild,
+                args: [MatSelect]
+            }] } });
+
+class LoadingButtonComponent {
+    constructor() {
+        this.mode = 'spinner';
+        this.loading = false;
+        this.disabled = false;
+        this.color = 'primary';
+        this.buttonType = 'default';
+        this.click = new EventEmitter();
+    }
+    onClick(e) {
+        e.stopPropagation();
+        this.click.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoadingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: LoadingButtonComponent, isStandalone: true, selector: "mosa-loading-button", inputs: { mode: "mode", loading: "loading", disabled: "disabled", color: "color", buttonType: "buttonType", icon: "icon" }, outputs: { click: "click" }, ngImport: i0, template: "@switch (buttonType) {\n    @default {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('raised') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-raised-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('stroked') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-stroked-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('flat') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-flat-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('icon') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-icon-button>\n            @if (loading) {\n                <mat-spinner class=\"icon-spinner\" [color]=\"color\" [diameter]=\"40\" [strokeWidth]=\"2\"></mat-spinner>\n            } @if (icon) {\n            <mat-icon>{{ icon }}</mat-icon>\n        }\n            <ng-content select=\".icon\"></ng-content>\n        </button>\n    }\n}\n\n<ng-template #buttonContent>\n    @if (icon) {\n        <mat-icon>{{ icon }}</mat-icon>\n    } @switch (mode) {\n    @case ('spinner') {\n        <div class=\"spinner-inner\">\n            @if (loading) {\n                <mat-spinner [color]=\"color\" [diameter]=\"20\"></mat-spinner>\n            }\n            <span [class.loading]=\"loading\" class=\"label\">\n          <ng-content select=\".spinner-label\"></ng-content>\n        </span>\n        </div>\n    } @case ('progress-bar') {\n        <ng-content select=\".progress-bar-label\"></ng-content>\n        @if (loading) {\n            <mat-progress-bar [color]=\"color\" mode=\"indeterminate\"></mat-progress-bar>\n        }\n    }\n}\n</ng-template>\n", styles: [":host{pointer-events:none}button:not(:disabled){pointer-events:all}.icon-spinner{position:absolute;top:0;left:0}.spinner .spinner-inner{display:flex;align-items:center}.spinner .spinner-inner mat-spinner{position:absolute}.spinner .spinner-inner .label.loading{margin-left:30px}.progress-bar{overflow:hidden;position:relative}.progress-bar mat-progress-bar{position:absolute;bottom:0;left:0;width:100%}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoadingButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-loading-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatButton,
+                        NgTemplateOutlet,
+                        MatIconButton,
+                        MatProgressSpinner,
+                        MatIcon,
+                        MatProgressBar,
+                    ], template: "@switch (buttonType) {\n    @default {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('raised') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-raised-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('stroked') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-stroked-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('flat') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-flat-button>\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n    } @case ('icon') {\n        <button (click)=\"onClick($event)\" [class]=\"mode\" [color]=\"color\"\n                [disabled]=\"loading || disabled\" mat-icon-button>\n            @if (loading) {\n                <mat-spinner class=\"icon-spinner\" [color]=\"color\" [diameter]=\"40\" [strokeWidth]=\"2\"></mat-spinner>\n            } @if (icon) {\n            <mat-icon>{{ icon }}</mat-icon>\n        }\n            <ng-content select=\".icon\"></ng-content>\n        </button>\n    }\n}\n\n<ng-template #buttonContent>\n    @if (icon) {\n        <mat-icon>{{ icon }}</mat-icon>\n    } @switch (mode) {\n    @case ('spinner') {\n        <div class=\"spinner-inner\">\n            @if (loading) {\n                <mat-spinner [color]=\"color\" [diameter]=\"20\"></mat-spinner>\n            }\n            <span [class.loading]=\"loading\" class=\"label\">\n          <ng-content select=\".spinner-label\"></ng-content>\n        </span>\n        </div>\n    } @case ('progress-bar') {\n        <ng-content select=\".progress-bar-label\"></ng-content>\n        @if (loading) {\n            <mat-progress-bar [color]=\"color\" mode=\"indeterminate\"></mat-progress-bar>\n        }\n    }\n}\n</ng-template>\n", styles: [":host{pointer-events:none}button:not(:disabled){pointer-events:all}.icon-spinner{position:absolute;top:0;left:0}.spinner .spinner-inner{display:flex;align-items:center}.spinner .spinner-inner mat-spinner{position:absolute}.spinner .spinner-inner .label.loading{margin-left:30px}.progress-bar{overflow:hidden;position:relative}.progress-bar mat-progress-bar{position:absolute;bottom:0;left:0;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }] } });
+
+let _state = {
+    logs: [],
+};
+class LoggerFacade {
+    constructor() {
+        this.store$ = new BehaviorSubject(_state);
+    }
+    get snapshot() {
+        return this.store$.value;
+    }
+    subState() {
+        return this.store$.asObservable();
+    }
+    updateLogs(logs) {
+        this.updateState({ ..._state, logs });
+    }
+    updateState(state) {
+        this.store$.next(_state = state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerFacade, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerFacade, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable */
+class LoggerComponent {
+    constructor() {
+        this.myLoggerFacade = inject(LoggerFacade);
+    }
+    ngOnInit() {
+        this.loggerState$ = this.myLoggerFacade.subState();
+    }
+    onClickLog(log) {
+        if (log.config.closeOnClick) {
+            this.slideOut(log.id);
+        }
+    }
+    /**
+     * Shows the snackbar
+     * @param title
+     * @param message
+     * @param type
+     * @param config
+     */
+    slideIn(title, message, type, config) {
+        const logs = [...this.myLoggerFacade.snapshot.logs];
+        const i = logs.length;
+        let icon;
+        switch (type) {
+            case 'error':
+                icon = 'error';
+                break;
+            case 'warning':
+                icon = 'warning';
+                break;
+            case 'info':
+                icon = 'info';
+                break;
+            case 'success':
+                icon = 'done';
+                break;
+            default:
+                icon = 'notifications';
+                break;
+        }
+        logs.push({ id: i, title, message, config, state: 'enter', icon });
+        this.myLoggerFacade.updateLogs(logs);
+        return i;
+    }
+    /**
+     * Hides the log
+     * @param id
+     */
+    slideOut(id) {
+        let logs = [...this.myLoggerFacade.snapshot.logs];
+        if (logs.length > 0) {
+            const item = logs.find((e) => e.id === id);
+            if (!item) {
+                return;
+            }
+            item.state = 'leave';
+            this.myLoggerFacade.updateLogs(logs);
+            setTimeout(() => {
+                logs = [...this.myLoggerFacade.snapshot.logs];
+                const index = logs.findIndex((log) => log.id === item.id);
+                logs.splice(index, 1);
+                this.myLoggerFacade.updateLogs(logs);
+            }, 200);
+        }
+    }
+    callAction(log) {
+        log.config.action?.callback?.call(this);
+        this.slideOut(log.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: LoggerComponent, isStandalone: true, selector: "mosa-logger", viewQueries: [{ propertyName: "elements", predicate: ["loggerElement"], descendants: true }], ngImport: i0, template: "@if (loggerState$ | async; as state) {\n    @for (log of state.logs; track log) {\n        <div #loggerElement\n             [@slide]=\"log.state\"\n             [class.none]=\"!log.state\"\n             [class]=\"log.config.className\"\n             (click)=\"onClickLog(log)\"\n             [class.touch]=\"log.config.closeOnClick\"\n             class=\"logger-element\">\n            <div class=\"content\">\n                <mat-icon class=\"icon\">{{ log.icon }}</mat-icon>\n                <div>\n                    @if (log.title) {\n                        <div class=\"title\">{{ log.title | translate }}</div>\n                    } @if (log.message) {\n                    <div [innerHTML]=\"log.message | translate\" class=\"message\"></div>\n                }\n                </div>\n            </div>\n            @if (log.config.action || log.config.showDismiss) {\n                <div class=\"actions\">\n                    @if (log.config.showDismiss) {\n                        <button (click)=\"slideOut(log.id)\" class=\"dismiss\" mat-button>\n                            {{ 'mosa.commons.buttons.dismiss' | translate | uppercase }}\n                        </button>\n                    } @if (log.config.action && log.config.action.label && log.config.action.callback) {\n                    <button (click)=\"$event.stopPropagation(); callAction(log)\"\n                            class=\"action-btn\" mat-button>\n                        {{ log.config.action.label | translate | uppercase }}\n                    </button>\n                }\n                </div>\n            }\n        </div>\n    }\n}\n\n", styles: [":host{width:100%;height:100%;top:0;left:0;display:flex;flex-direction:column;position:fixed;z-index:10000;align-items:flex-end;pointer-events:none}.logger-element{padding:10px 15px;margin:10px 10px 0;width:350px;background:#fff;border-radius:4px;box-shadow:3px 3px 10px #0000004d;border-left:5px solid;pointer-events:all;max-height:400px}.logger-element.touch{cursor:pointer}.logger-element .content{display:flex;width:100%}.logger-element .content .icon{flex-shrink:0;margin-right:10px}.logger-element .content .title{font-weight:500;color:#222}.logger-element .content .message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-lines:3;text-overflow:ellipsis;flex:1 auto;font-size:15px;margin-top:3px;color:#222}.logger-element .actions{display:flex;justify-content:flex-end;margin-top:10px}.logger-element .dismiss{color:#222}.logger-element button:not(:first-child){margin-left:10px}.logger-element.snackbar-error{border-color:#f44336;color:#f44336}.logger-element.snackbar-error button.action-btn{background-color:#d2190b;color:#fff}.logger-element.snackbar-success{border-color:#3ad15d;color:#3ad15d}.logger-element.snackbar-success button.action-btn{background-color:#249a40;color:#fff}.logger-element.snackbar-warning{border-color:#fa0;color:#fa0}.logger-element.snackbar-warning button.action-btn{background-color:#c80;color:#fff}.logger-element.snackbar-info{border-color:#008eff;color:#008eff}.logger-element.snackbar-info button.action-btn{background-color:#0063b3;color:#fff}.logger-element.snackbar-default{border-color:#222;color:#222}.logger-element.snackbar-default button.action-btn{background-color:#222;color:#fff}@media screen and (max-width: 480px){.logger-element{width:100%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [
+            trigger('slide', [
+                state('enter', style({ transform: 'translateX(0)' })),
+                transition(':leave', [
+                    animate(200, style({ transform: 'translateX(120%)' })),
+                ]),
+                transition(':enter', [
+                    style({ transform: 'translateX(120%)' }),
+                    animate(200, style({ transform: 'translateX(0)' })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-logger', animations: [
+                        trigger('slide', [
+                            state('enter', style({ transform: 'translateX(0)' })),
+                            transition(':leave', [
+                                animate(200, style({ transform: 'translateX(120%)' })),
+                            ]),
+                            transition(':enter', [
+                                style({ transform: 'translateX(120%)' }),
+                                animate(200, style({ transform: 'translateX(0)' })),
+                            ]),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatIcon,
+                        MatButton,
+                        AsyncPipe,
+                        UpperCasePipe,
+                        TranslateModule,
+                    ], template: "@if (loggerState$ | async; as state) {\n    @for (log of state.logs; track log) {\n        <div #loggerElement\n             [@slide]=\"log.state\"\n             [class.none]=\"!log.state\"\n             [class]=\"log.config.className\"\n             (click)=\"onClickLog(log)\"\n             [class.touch]=\"log.config.closeOnClick\"\n             class=\"logger-element\">\n            <div class=\"content\">\n                <mat-icon class=\"icon\">{{ log.icon }}</mat-icon>\n                <div>\n                    @if (log.title) {\n                        <div class=\"title\">{{ log.title | translate }}</div>\n                    } @if (log.message) {\n                    <div [innerHTML]=\"log.message | translate\" class=\"message\"></div>\n                }\n                </div>\n            </div>\n            @if (log.config.action || log.config.showDismiss) {\n                <div class=\"actions\">\n                    @if (log.config.showDismiss) {\n                        <button (click)=\"slideOut(log.id)\" class=\"dismiss\" mat-button>\n                            {{ 'mosa.commons.buttons.dismiss' | translate | uppercase }}\n                        </button>\n                    } @if (log.config.action && log.config.action.label && log.config.action.callback) {\n                    <button (click)=\"$event.stopPropagation(); callAction(log)\"\n                            class=\"action-btn\" mat-button>\n                        {{ log.config.action.label | translate | uppercase }}\n                    </button>\n                }\n                </div>\n            }\n        </div>\n    }\n}\n\n", styles: [":host{width:100%;height:100%;top:0;left:0;display:flex;flex-direction:column;position:fixed;z-index:10000;align-items:flex-end;pointer-events:none}.logger-element{padding:10px 15px;margin:10px 10px 0;width:350px;background:#fff;border-radius:4px;box-shadow:3px 3px 10px #0000004d;border-left:5px solid;pointer-events:all;max-height:400px}.logger-element.touch{cursor:pointer}.logger-element .content{display:flex;width:100%}.logger-element .content .icon{flex-shrink:0;margin-right:10px}.logger-element .content .title{font-weight:500;color:#222}.logger-element .content .message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-lines:3;text-overflow:ellipsis;flex:1 auto;font-size:15px;margin-top:3px;color:#222}.logger-element .actions{display:flex;justify-content:flex-end;margin-top:10px}.logger-element .dismiss{color:#222}.logger-element button:not(:first-child){margin-left:10px}.logger-element.snackbar-error{border-color:#f44336;color:#f44336}.logger-element.snackbar-error button.action-btn{background-color:#d2190b;color:#fff}.logger-element.snackbar-success{border-color:#3ad15d;color:#3ad15d}.logger-element.snackbar-success button.action-btn{background-color:#249a40;color:#fff}.logger-element.snackbar-warning{border-color:#fa0;color:#fa0}.logger-element.snackbar-warning button.action-btn{background-color:#c80;color:#fff}.logger-element.snackbar-info{border-color:#008eff;color:#008eff}.logger-element.snackbar-info button.action-btn{background-color:#0063b3;color:#fff}.logger-element.snackbar-default{border-color:#222;color:#222}.logger-element.snackbar-default button.action-btn{background-color:#222;color:#fff}@media screen and (max-width: 480px){.logger-element{width:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { elements: [{
+                type: ViewChildren,
+                args: ['loggerElement']
+            }] } });
+
+class Skeleton {
+    constructor(skeleton) {
+        this.width = isZeroOrHigher(skeleton?.width) ? skeleton?.width : 100;
+        this.height = isZeroOrHigher(skeleton?.height) ? skeleton?.height : 15;
+        if ((isNumber(skeleton?.borderRadius) && isZeroOrHigher(skeleton?.borderRadius)) ||
+            (typeof skeleton?.borderRadius === 'string' && !isNullOrEmpty(skeleton?.borderRadius))) {
+            this.borderRadius = skeleton.borderRadius;
+        }
+        this.borderRadius = this.borderRadius || 4;
+        this.randomizeOffset = skeleton?.randomizeOffset || 0;
+    }
+}
+
+class SkeletonComponent {
+    constructor(myElementRef) {
+        this.myElementRef = myElementRef;
+        this.width = 0;
+        this.height = 0;
+        this.randomizeOffset = 0;
+        this.element = this.myElementRef.nativeElement;
+    }
+    ngOnInit() {
+        if (!this.skeleton) {
+            this.skeleton = new Skeleton({
+                width: this.width,
+                height: this.height,
+                borderRadius: this.borderRadius,
+                randomizeOffset: this.randomizeOffset,
+            });
+        }
+        this.element.style.width = this.actualWidth;
+        this.element.style.height = SkeletonComponent.value(this.skeleton.height);
+        this.element.style.borderRadius = SkeletonComponent.value(this.skeleton.borderRadius);
+    }
+    get actualWidth() {
+        if (this.skeleton.randomizeOffset && this.skeleton.randomizeOffset > 0 && typeof this.skeleton.width === 'number') {
+            return `${this.skeleton.width - Math.floor(Math.random() * this.skeleton.randomizeOffset)}px`;
+        }
+        return SkeletonComponent.value(this.skeleton.width);
+    }
+    static value(val) {
+        if (typeof val === 'number') {
+            return `${val}px`;
+        }
+        return val || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.11", type: SkeletonComponent, isStandalone: true, selector: "mosa-skeleton", inputs: { skeleton: "skeleton", width: "width", height: "height", randomizeOffset: "randomizeOffset", borderRadius: "borderRadius" }, ngImport: i0, template: "", styles: [":host{display:flex;background:#d4d4d4;flex-shrink:0;animation:loading .25s infinite linear alternate-reverse}@keyframes loading{0%{opacity:1}to{opacity:.5}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: [":host{display:flex;background:#d4d4d4;flex-shrink:0;animation:loading .25s infinite linear alternate-reverse}@keyframes loading{0%{opacity:1}to{opacity:.5}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { skeleton: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], randomizeOffset: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }] } });
+
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class BaseSkeletonLoader {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: BaseSkeletonLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.11", type: BaseSkeletonLoader, isStandalone: true, selector: "mosa-skeleton-loader", inputs: { itemCount: "itemCount" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: BaseSkeletonLoader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mosa-skeleton-loader',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { itemCount: [{
+                type: Input
+            }] } });
+
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class ListSkeletonLoader extends BaseSkeletonLoader {
+    constructor() {
+        super();
+        this.items = [];
+    }
+    ngOnInit() {
+        this.items = Array(this.itemCount).fill(this.itemCount).map((x, i) => i);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListSkeletonLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: ListSkeletonLoader, isStandalone: true, selector: "mosa-list-skeleton-loader", inputs: { content: "content" }, usesInheritance: true, ngImport: i0, template: "<mat-list>\n    @for (item of items; track item) {\n        <mat-list-item>\n            <ng-container *ngTemplateOutlet=\"content, context: { $implicit: item }\"></ng-container>\n        </mat-list-item>\n    }\n</mat-list>\n", styles: [""], dependencies: [{ kind: "component", type: MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ListSkeletonLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-list-skeleton-loader', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatList,
+                        MatListItem,
+                        NgTemplateOutlet,
+                    ], template: "<mat-list>\n    @for (item of items; track item) {\n        <mat-list-item>\n            <ng-container *ngTemplateOutlet=\"content, context: { $implicit: item }\"></ng-container>\n        </mat-list-item>\n    }\n</mat-list>\n" }]
+        }], ctorParameters: () => [], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class TableSkeletonLoader extends BaseSkeletonLoader {
+    constructor() {
+        super();
+        this.columns = [];
+        this.items = [];
+        this.displayedColumns = [];
+    }
+    ngOnInit() {
+        for (let i = 0; i < this.columns.length; i++) {
+            this.displayedColumns.push(`column-${i}`);
+        }
+        for (let i = 0; i < (this.itemCount || 0); i++) {
+            const skeletons = [];
+            for (let j = 0; j < this.displayedColumns.length; j++) {
+                const skeleton = this.columns[j][1];
+                skeletons.push(new Skeleton({
+                    width: skeleton.width,
+                    height: skeleton.height,
+                    borderRadius: skeleton.borderRadius,
+                    randomizeOffset: skeleton.randomizeOffset,
+                }));
+            }
+            this.items.push(skeletons);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableSkeletonLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: TableSkeletonLoader, isStandalone: true, selector: "mosa-table-skeleton-loader", inputs: { columns: "columns" }, usesInheritance: true, ngImport: i0, template: "<table [dataSource]=\"items\" mat-table>\n    @for (column of columns; track column; let i = $index) {\n        <ng-container [matColumnDef]=\"'column-' + i\">\n            <th *matHeaderCellDef mat-header-cell>\n                <mosa-skeleton [skeleton]=\"column[0]\"></mosa-skeleton>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n                <mosa-skeleton [skeleton]=\"column[1]\"></mosa-skeleton>\n            </td>\n        </ng-container>\n    }\n    <tr *matHeaderRowDef=\"displayedColumns;sticky:true\" mat-header-row></tr>\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" class=\"row-hover\" mat-row></tr>\n</table>\n", styles: ["table{width:100%}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: SkeletonComponent, selector: "mosa-skeleton", inputs: ["skeleton", "width", "height", "randomizeOffset", "borderRadius"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableSkeletonLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-table-skeleton-loader', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatTable,
+                        MatColumnDef,
+                        MatHeaderCellDef,
+                        MatHeaderCell,
+                        SkeletonComponent,
+                        MatCellDef,
+                        MatCell,
+                        MatHeaderRowDef,
+                        MatHeaderRow,
+                        MatRowDef,
+                        MatRow,
+                    ], template: "<table [dataSource]=\"items\" mat-table>\n    @for (column of columns; track column; let i = $index) {\n        <ng-container [matColumnDef]=\"'column-' + i\">\n            <th *matHeaderCellDef mat-header-cell>\n                <mosa-skeleton [skeleton]=\"column[0]\"></mosa-skeleton>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n                <mosa-skeleton [skeleton]=\"column[1]\"></mosa-skeleton>\n            </td>\n        </ng-container>\n    }\n    <tr *matHeaderRowDef=\"displayedColumns;sticky:true\" mat-header-row></tr>\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" class=\"row-hover\" mat-row></tr>\n</table>\n", styles: ["table{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{
+                type: Input
+            }] } });
+
+class MatUpdateDialog {
+    constructor(config) {
+        this.config = config;
+        this.myMatDialogRef = inject((MatDialogRef));
+    }
+    ngOnInit() {
+        //
+    }
+    close(result) {
+        this.myMatDialogRef.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: MatUpdateDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: MatUpdateDialog, isStandalone: true, selector: "mosa-mat-update-dialog", ngImport: i0, template: "<h1 class=\"active\" mat-dialog-title>{{ config.title | translate }}</h1>\n<div mat-dialog-content>\n    {{ config.message | translate }}\n</div>\n<div mat-dialog-actions>\n    <button (click)=\"close(0)\" [class.cancel-btn]=\"config.showIgnore\" mat-stroked-button>\n        {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}\n    </button>\n    @if (config.showIgnore) {\n        <button (click)=\"close(1)\" color=\"primary\" mat-stroked-button>\n            {{\n                'mosa.commons.buttons.ignoreFor' | translate: {\n                    duration: config.ignoreTimeout | mosaDuration: 'auto' | async | uppercase\n                } | uppercase\n            }}\n        </button>\n    }\n    <button mat-flat-button color=\"primary\" (click)=\"close(2)\">\n        {{ 'mosa.commons.buttons.reloadNow' | translate | uppercase }}\n    </button>\n</div>\n", styles: [".cancel-btn{margin-right:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: MosaDurationPipe, name: "mosaDuration" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: MatUpdateDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosa-mat-update-dialog', imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButton,
+                        AsyncPipe,
+                        UpperCasePipe,
+                        TranslatePipe,
+                        MosaDurationPipe,
+                    ], template: "<h1 class=\"active\" mat-dialog-title>{{ config.title | translate }}</h1>\n<div mat-dialog-content>\n    {{ config.message | translate }}\n</div>\n<div mat-dialog-actions>\n    <button (click)=\"close(0)\" [class.cancel-btn]=\"config.showIgnore\" mat-stroked-button>\n        {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}\n    </button>\n    @if (config.showIgnore) {\n        <button (click)=\"close(1)\" color=\"primary\" mat-stroked-button>\n            {{\n                'mosa.commons.buttons.ignoreFor' | translate: {\n                    duration: config.ignoreTimeout | mosaDuration: 'auto' | async | uppercase\n                } | uppercase\n            }}\n        </button>\n    }\n    <button mat-flat-button color=\"primary\" (click)=\"close(2)\">\n        {{ 'mosa.commons.buttons.reloadNow' | translate | uppercase }}\n    </button>\n</div>\n", styles: [".cancel-btn{margin-right:auto}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+var UpdateDialogResult;
+(function (UpdateDialogResult) {
+    UpdateDialogResult[UpdateDialogResult["cancel"] = 0] = "cancel";
+    UpdateDialogResult[UpdateDialogResult["ignore"] = 1] = "ignore";
+    UpdateDialogResult[UpdateDialogResult["reload"] = 2] = "reload";
+})(UpdateDialogResult || (UpdateDialogResult = {}));
+
+class UpdateDialog {
+    set updateConfig(config) {
+        if (config) {
+            if (!config.versionPath) {
+                console.warn('LoggerService: No version path was provided. This field is required!');
+                return;
+            }
+            if (!config.localStorageKey) {
+                config.localStorageKey = 'mosaApplicationVersion';
+            }
+            if (!config.ignoreTimeout) {
+                config.ignoreTimeout = 30000;
+            }
+            if (!config.refreshInterval) {
+                config.refreshInterval = 15000;
+            }
+            if (!config.title) {
+                config.title = 'mosa.components.updateDialog.title';
+            }
+            if (!config.message) {
+                config.message = 'mosa.components.updateDialog.message';
+            }
+            this.config = config;
+            this.end();
+            this.start();
+        }
+        else {
+            console.warn('LoggerService: Cannot check for version. No config was provided.');
+        }
+    }
+    constructor() {
+        this.firstLoad = true;
+        this.blocked = false;
+        this.myApiService = inject(ApiService);
+        this.myMatDialog = inject(MatDialog);
+    }
+    start() {
+        if (this.interval) {
+            this.end();
+        }
+        void this.checkForUpdate();
+        this.interval = setInterval(() => this.checkForUpdate(), this.config.refreshInterval);
+    }
+    openDialog(version) {
+        this.myMatDialog.open(MatUpdateDialog, {
+            width: '600px',
+            data: this.config,
+        })
+            .afterClosed()
+            .subscribe((result) => {
+            switch (result) {
+                case UpdateDialogResult.cancel:
+                    this.end();
+                    this.blocked = true;
+                    break;
+                case UpdateDialogResult.ignore:
+                    timer(this.config.ignoreTimeout).subscribe(() => this.openDialog(version));
+                    break;
+                case UpdateDialogResult.reload:
+                    window.location.reload();
+                    window.localStorage.setItem(this.config.localStorageKey, JSON.stringify(version));
+                    break;
+            }
+        });
+    }
+    async checkForUpdate() {
+        if (this.blocked) {
+            return;
+        }
+        const localStorageVersion = window.localStorage.getItem(this.config.localStorageKey);
+        let localVersion = { version: '0.0.0', timestamp: 0 };
+        if (!isNullOrEmpty(localStorageVersion)) {
+            localVersion = JSON.parse(localStorageVersion);
+        }
+        const data = await firstValueFrom(this.myApiService.get(this.config.versionPath));
+        if (this.firstLoad) {
+            window.localStorage.setItem(this.config.localStorageKey, JSON.stringify(data));
+            this.firstLoad = false;
+            return;
+        }
+        if (data.version !== localVersion.version) {
+            this.blocked = true;
+            this.end();
+            this.openDialog(data);
+        }
+    }
+    end() {
+        clearInterval(this.interval);
+        this.interval = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: UpdateDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.11", type: UpdateDialog, isStandalone: true, selector: "mosa-update-dialog[config]", inputs: { updateConfig: ["config", "updateConfig"] }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: UpdateDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mosa-update-dialog[config]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { updateConfig: [{
+                type: Input,
+                args: ['config']
+            }] } });
+
+class CellEditorService {
+    constructor() {
+    }
+    updateEditingCell(cellEditor) {
+        if (cellEditor !== this.cellEditor) {
+            this.cellEditor?.toOutput(true);
+        }
+        this.cellEditor = cellEditor;
+        this.cellEditor.toInput();
+        this.bindDocumentEditListener();
+    }
+    bindDocumentEditListener() {
+        if (!this.documentEditListener) {
+            this.documentEditListener = (e) => {
+                e.preventDefault();
+                const target = e.target;
+                const mosaCellEditor = target.closest('mosa-cell-editor');
+                if (this.cellEditor && mosaCellEditor !== this.cellEditor.element && !target.classList.contains('cell-output')) {
+                    document.removeEventListener('click', this.documentEditListener);
+                    this.documentEditListener = undefined;
+                    this.cellEditor.toOutput(true);
+                    this.cellEditor = undefined;
+                }
+            };
+            document.addEventListener('click', this.documentEditListener);
+        }
+    }
+    isEditingCellValid() {
+        return this.cellEditor?.element != null && Array.from(this.cellEditor.element.querySelectorAll('.ng-invalid')).length === 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class CellEditorDirective {
+    constructor() {
+        this.myElementRef = inject((ElementRef));
+        this.myCellEditorService = inject(CellEditorService);
+    }
+    onEscapeKeyDown(e) {
+        e.preventDefault();
+        this.cellEditor.toOutput();
+    }
+    onShiftKeyDown(e) {
+        e.preventDefault();
+        if (e.shiftKey) {
+            this.moveToCell(e, false);
+        }
+        else {
+            this.moveToCell(e, true);
+        }
+    }
+    onEnterKeyDown(e) {
+        e.preventDefault();
+        if (this.myCellEditorService.isEditingCellValid()) {
+            this.moveToNextRowCell(e);
+        }
+    }
+    onClick(e) {
+        e.preventDefault();
+        this.myCellEditorService.updateEditingCell(this.cellEditor);
+        this.cellEditor.cellClick.emit();
+    }
+    ngOnInit() {
+        this.myElementRef.nativeElement.classList.add('editable-cell');
+    }
+    moveToNextRowCell(e) {
+        const currentCell = this.cellEditor?.element?.parentElement;
+        if (!currentCell) {
+            return;
+        }
+        let columnDefClass = '';
+        currentCell.classList.forEach((className) => {
+            const found = className.includes('mat-column-');
+            if (found) {
+                columnDefClass = className;
+            }
+        });
+        const targetCell = this.findNextRowEditableColumn(currentCell, columnDefClass);
+        this.cellEditor.toOutput(true);
+        CellEditorDirective.executeMove(e, targetCell);
+    }
+    findNextRowEditableColumn(row, matColumnClassName) {
+        const nextRow = row.parentElement?.nextElementSibling;
+        if (!nextRow) {
+            return null;
+        }
+        const column = nextRow.getElementsByClassName(matColumnClassName)[0];
+        return column?.classList.contains('editable-cell') ?
+            column.firstChild :
+            this.findNextRowEditableColumn(nextRow, matColumnClassName);
+    }
+    findNextEditableColumn(cell) {
+        let nextCell = cell.parentElement?.nextElementSibling;
+        if (!nextCell) {
+            const nextRow = cell.parentElement?.parentElement?.nextElementSibling;
+            if (nextRow) {
+                nextCell = nextRow.firstElementChild;
+            }
+        }
+        if (nextCell) {
+            return nextCell.classList.contains('editable-cell')
+                ? nextCell.firstChild
+                : this.findNextEditableColumn(nextCell);
+        }
+        return null;
+    }
+    findPreviousEditableColumn(cell) {
+        let prevCell = cell.previousElementSibling;
+        if (!prevCell) {
+            const previousRow = cell.parentElement?.previousElementSibling;
+            if (previousRow) {
+                prevCell = previousRow.lastElementChild;
+            }
+        }
+        if (prevCell) {
+            return prevCell.classList.contains('editable-cell') ?
+                prevCell.firstChild :
+                this.findPreviousEditableColumn(prevCell);
+        }
+        else {
+            return null;
+        }
+    }
+    moveToCell(event, nextCell) {
+        const currentCell = this.cellEditor.element;
+        if (this.cellEditor.element != null) {
+            const targetCell = nextCell
+                ? this.findNextEditableColumn(currentCell)
+                : this.findPreviousEditableColumn(currentCell);
+            if (this.myCellEditorService.isEditingCellValid()) {
+                this.cellEditor.toOutput(true);
+                targetCell?.click();
+            }
+            CellEditorDirective.executeMove(event, targetCell);
+        }
+    }
+    static invokeElementMethod(element, methodName, args) {
+        // eslint-disable-next-line @typescript-eslint/no-restricted-types,@typescript-eslint/no-unsafe-function-type,@typescript-eslint/no-explicit-any
+        element[methodName].apply(element, args);
+    }
+    static executeMove(e, targetCell) {
+        e.preventDefault();
+        // If datepicker is opened, remove cdk-overlay from dom
+        const element = e.composedPath()[0];
+        if (element.className.includes('td-input-date')) {
+            const cdkOverlayContainer = document.getElementsByClassName('cdk-overlay-container')[0];
+            const cdkBackdrop = cdkOverlayContainer.getElementsByClassName('cdk-overlay-backdrop')[0];
+            if (cdkBackdrop != null) {
+                CellEditorDirective.invokeElementMethod(cdkBackdrop, 'click');
+            }
+            cdkOverlayContainer.innerHTML = '';
+        }
+        CellEditorDirective.invokeElementMethod(e.target, 'blur');
+        if (targetCell != null) {
+            CellEditorDirective.invokeElementMethod(targetCell, 'click');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.11", type: CellEditorDirective, isStandalone: true, selector: "td[mosaCellEditor]", host: { listeners: { "keydown.escape": "onEscapeKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.enter": "onEnterKeyDown($event)", "click": "onClick($event)" } }, queries: [{ propertyName: "cellEditor", first: true, predicate: CellEditorComponent, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: CellEditorDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'td[mosaCellEditor]' }]
+        }], ctorParameters: () => [], propDecorators: { cellEditor: [{
+                type: ContentChild,
+                args: [CellEditorComponent]
+            }], onEscapeKeyDown: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], onShiftKeyDown: [{
+                type: HostListener,
+                args: ['keydown.tab', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.shift.tab', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.meta.tab', ['$event']]
+            }], onEnterKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.clickOutside = new EventEmitter();
+        this.enableWhiteListing = false;
+    }
+    onClick(targetElement) {
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+        const whiteListedClass = 'whitelisted';
+        if (!clickedInside) {
+            if (this.enableWhiteListing) {
+                const isWhiteListed = targetElement.classList.contains(whiteListedClass)
+                    || ClickOutsideDirective.getClosest(targetElement, whiteListedClass)
+                    || ClickOutsideDirective.getClosest(targetElement, 'cdk-overlay-container');
+                if (!isWhiteListed) {
+                    this.clickOutside.emit([this.elementRef.nativeElement, targetElement]);
+                }
+            }
+            else {
+                this.clickOutside.emit([this.elementRef.nativeElement, targetElement]);
+            }
+        }
+    }
+    static getClosest(el, selector) {
+        while (el) {
+            if (el.classList.contains(selector)) {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.11", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", inputs: { enableWhiteListing: "enableWhiteListing" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[clickOutside]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutside: [{
+                type: Output
+            }], enableWhiteListing: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+class LoggerService extends CoreLoggerService {
+    /**
+     * Default constructor
+     */
+    constructor() {
+        super();
+    }
+    /**
+     * Setter for logger
+     * @param component
+     * @param defaultConfig
+     */
+    logger(component, defaultConfig) {
+        this.loggerComp = component;
+        this.defaultConfig = defaultConfig;
+    }
+    /**
+     * Shows the log
+     * @param type
+     * @param config
+     */
+    show(config, type) {
+        super.show(config, type);
+        if (this.loggerComp) {
+            const i = this.loggerComp.slideIn(config.title, config.msg, type, config);
+            if (config.duration !== -1) {
+                setTimeout(() => this.loggerComp?.slideOut(i), (config.duration || 1) * 1000);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: LoggerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 function initI18n(i18n) {
     return i18n.init(undefined, 'mosa');
@@ -12,5 +1054,5 @@ const provideMosaMaterial = () => makeEnvironmentProviders([
  * Generated bundle index. Do not edit.
  */
 
-export { provideMosaMaterial };
+export { AlertWidget, CellEditorBaseComponent, CellEditorComponent, CellEditorDirective, CellEditorService, ClickOutsideDirective, ConfirmDialog, ConfirmDialogAction, ConfirmDialogData, ConfirmDialogResult, ListSkeletonLoader, LoadingButtonComponent, LoggerComponent, LoggerFacade, LoggerService, MatUpdateDialog, Skeleton, SkeletonComponent, TableSkeletonLoader, UpdateDialog, UpdateDialogResult, provideMosaMaterial };
 //# sourceMappingURL=mosa-ng-material.mjs.map