@meshmakers/shared-ui 3.1.147-0 → 3.1.148-0

package/fesm2022/meshmakers-shared-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, EventEmitter, forwardRef, HostBinding, ViewChild, Input, NgModule, Injectable } from '@angular/core';
+import { Component, Inject, EventEmitter, forwardRef, HostBinding, ViewChild, Input, Injectable, signal, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/dialog';
@@ -11,14 +11,15 @@ import { IsoDateTime } from '@meshmakers/shared-services';
 import * as i3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i2$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import * as i7 from '@angular/forms';
 import { FormControl, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, Validators } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { debounceTime, filter, tap, map, switchMap } from 'rxjs/operators';
-import { Subject, of, BehaviorSubject } from 'rxjs';
+import { Subject, of, BehaviorSubject, firstValueFrom } from 'rxjs';
 import * as i1$2 from '@angular/cdk/a11y';
 import * as i3$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -79,11 +80,11 @@ class MmNotificationBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmNotificationBarComponent, deps: [{ token: i1$1.MessageService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: MmNotificationBarComponent, selector: "mm-notification-bar", ngImport: i0, template: "<mat-toolbar [hidden]=\"!errorMessage\" class=\"mm-notification-bar-background\">\n  <a (click)=\"onShowDetails()\"><span class=\"mat-small\"><u>{{ errorMessage?.title }}</u></span></a>\n\n  <!-- This fills the remaining space of the current row -->\n  <span class=\"notification-fill-remaining-space\"></span>\n\n  <button (click)=\"onHide()\" class=\"mm-notification-bar-button\" mat-fab><mat-icon>close</mat-icon></button>\n</mat-toolbar>\n", styles: [".notification-fill-remaining-space{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: MmNotificationBarComponent, selector: "mm-notification-bar", ngImport: i0, template: "<mat-toolbar [hidden]=\"!errorMessage\" class=\"mm-notification-bar-background\">\n  <a (click)=\"onShowDetails()\"><span class=\"mat-small\"><u>{{ errorMessage?.title }}</u></span></a>\n\n  <!-- This fills the remaining space of the current row -->\n  <span class=\"notification-fill-remaining-space\"></span>\n\n  <button (click)=\"onHide()\" class=\"mm-notification-bar-button\" mat-fab><mat-icon class=\"material-symbols-outlined\">close</mat-icon></button>\n</mat-toolbar>\n", styles: [".notification-fill-remaining-space{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmNotificationBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-notification-bar', template: "<mat-toolbar [hidden]=\"!errorMessage\" class=\"mm-notification-bar-background\">\n  <a (click)=\"onShowDetails()\"><span class=\"mat-small\"><u>{{ errorMessage?.title }}</u></span></a>\n\n  <!-- This fills the remaining space of the current row -->\n  <span class=\"notification-fill-remaining-space\"></span>\n\n  <button (click)=\"onHide()\" class=\"mm-notification-bar-button\" mat-fab><mat-icon>close</mat-icon></button>\n</mat-toolbar>\n", styles: [".notification-fill-remaining-space{flex:1 1 auto}\n"] }]
+            args: [{ selector: 'mm-notification-bar', template: "<mat-toolbar [hidden]=\"!errorMessage\" class=\"mm-notification-bar-background\">\n  <a (click)=\"onShowDetails()\"><span class=\"mat-small\"><u>{{ errorMessage?.title }}</u></span></a>\n\n  <!-- This fills the remaining space of the current row -->\n  <span class=\"notification-fill-remaining-space\"></span>\n\n  <button (click)=\"onHide()\" class=\"mm-notification-bar-button\" mat-fab><mat-icon class=\"material-symbols-outlined\">close</mat-icon></button>\n</mat-toolbar>\n", styles: [".notification-fill-remaining-space{flex:1 1 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MessageService }, { type: i1.MatDialog }] });
 
 class MmAutocompleteInputComponent {
@@ -906,7 +907,7 @@ class MmMultipleEntitySelectInputComponent {
                 useExisting: forwardRef(() => MmMultipleEntitySelectInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<mat-chip-grid #list>\n  <mat-chip-row *ngFor=\"let entity of valuesFormControl.value\"\n                (removed)=\"remove(entity)\"\n                [editable]=\"false\"\n                [aria-description]=\"'press enter to edit ' + dataSource?.onDisplayEntity(entity) ?? null\">\n    {{dataSource?.onDisplayEntity(entity) ?? null}}\n    <button matChipRemove [attr.aria-label]=\"'remove ' + dataSource?.onDisplayEntity(entity) ?? null\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n  </mat-chip-row>\n  <input #input (blur)=\"onTouched()\" (focusout)=\"onFocusOut()\" [formControl]=\"searchFormControl\"\n         [matAutocomplete]=\"auto\"\n         [matChipInputFor]=\"list\"\n         matChipInputAddOnBlur=\"true\"\n         [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n         [placeholder]=\"placeholder\" matInput>\n  <mat-autocomplete #auto=\"matAutocomplete\" (closed)=\"onEntityClosed()\"\n                    (optionActivated)=\"onEntityActivated($event)\" (optionSelected)=\"onEntitySelected($event)\"\n                    [displayWith]=\"dataSource?.onDisplayEntity ?? null\">\n    <mat-option *ngIf=\"isLoading\" class=\"is-loading\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n    </mat-option>\n    <ng-container *ngIf=\"!isLoading\">\n      <mat-option *ngFor=\"let entity of filteredEntities\" [value]=\"entity\">\n        {{dataSource?.onDisplayEntity(entity) ?? null}}\n      </mat-option>\n    </ng-container>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<mat-chip-grid #list>\n  <mat-chip-row *ngFor=\"let entity of valuesFormControl.value\"\n                (removed)=\"remove(entity)\"\n                [editable]=\"false\"\n                [aria-description]=\"'press enter to edit ' + dataSource?.onDisplayEntity(entity) ?? null\">\n    {{dataSource?.onDisplayEntity(entity) ?? null}}\n    <button matChipRemove [attr.aria-label]=\"'remove ' + dataSource?.onDisplayEntity(entity) ?? null\">\n      <mat-icon class=\"material-symbols-outlined\">cancel</mat-icon>\n    </button>\n  </mat-chip-row>\n  <input #input (blur)=\"onTouched()\" (focusout)=\"onFocusOut()\" [formControl]=\"searchFormControl\"\n         [matAutocomplete]=\"auto\"\n         [matChipInputFor]=\"list\"\n         matChipInputAddOnBlur=\"true\"\n         [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n         [placeholder]=\"placeholder\" matInput>\n  <mat-autocomplete #auto=\"matAutocomplete\" (closed)=\"onEntityClosed()\"\n                    (optionActivated)=\"onEntityActivated($event)\" (optionSelected)=\"onEntitySelected($event)\"\n                    [displayWith]=\"dataSource?.onDisplayEntity ?? null\">\n    <mat-option *ngIf=\"isLoading\" class=\"is-loading\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n    </mat-option>\n    <ng-container *ngIf=\"!isLoading\">\n      <mat-option *ngFor=\"let entity of filteredEntities\" [value]=\"entity\">\n        {{dataSource?.onDisplayEntity(entity) ?? null}}\n      </mat-option>\n    </ng-container>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmMultipleEntitySelectInputComponent, decorators: [{
             type: Component,
@@ -928,7 +929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                             useExisting: forwardRef(() => MmMultipleEntitySelectInputComponent),
                             multi: true
                         }
-                    ], template: "<mat-chip-grid #list>\n  <mat-chip-row *ngFor=\"let entity of valuesFormControl.value\"\n                (removed)=\"remove(entity)\"\n                [editable]=\"false\"\n                [aria-description]=\"'press enter to edit ' + dataSource?.onDisplayEntity(entity) ?? null\">\n    {{dataSource?.onDisplayEntity(entity) ?? null}}\n    <button matChipRemove [attr.aria-label]=\"'remove ' + dataSource?.onDisplayEntity(entity) ?? null\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n  </mat-chip-row>\n  <input #input (blur)=\"onTouched()\" (focusout)=\"onFocusOut()\" [formControl]=\"searchFormControl\"\n         [matAutocomplete]=\"auto\"\n         [matChipInputFor]=\"list\"\n         matChipInputAddOnBlur=\"true\"\n         [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n         [placeholder]=\"placeholder\" matInput>\n  <mat-autocomplete #auto=\"matAutocomplete\" (closed)=\"onEntityClosed()\"\n                    (optionActivated)=\"onEntityActivated($event)\" (optionSelected)=\"onEntitySelected($event)\"\n                    [displayWith]=\"dataSource?.onDisplayEntity ?? null\">\n    <mat-option *ngIf=\"isLoading\" class=\"is-loading\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n    </mat-option>\n    <ng-container *ngIf=\"!isLoading\">\n      <mat-option *ngFor=\"let entity of filteredEntities\" [value]=\"entity\">\n        {{dataSource?.onDisplayEntity(entity) ?? null}}\n      </mat-option>\n    </ng-container>\n  </mat-autocomplete>\n</mat-chip-grid>\n" }]
+                    ], template: "<mat-chip-grid #list>\n  <mat-chip-row *ngFor=\"let entity of valuesFormControl.value\"\n                (removed)=\"remove(entity)\"\n                [editable]=\"false\"\n                [aria-description]=\"'press enter to edit ' + dataSource?.onDisplayEntity(entity) ?? null\">\n    {{dataSource?.onDisplayEntity(entity) ?? null}}\n    <button matChipRemove [attr.aria-label]=\"'remove ' + dataSource?.onDisplayEntity(entity) ?? null\">\n      <mat-icon class=\"material-symbols-outlined\">cancel</mat-icon>\n    </button>\n  </mat-chip-row>\n  <input #input (blur)=\"onTouched()\" (focusout)=\"onFocusOut()\" [formControl]=\"searchFormControl\"\n         [matAutocomplete]=\"auto\"\n         [matChipInputFor]=\"list\"\n         matChipInputAddOnBlur=\"true\"\n         [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n         [placeholder]=\"placeholder\" matInput>\n  <mat-autocomplete #auto=\"matAutocomplete\" (closed)=\"onEntityClosed()\"\n                    (optionActivated)=\"onEntityActivated($event)\" (optionSelected)=\"onEntitySelected($event)\"\n                    [displayWith]=\"dataSource?.onDisplayEntity ?? null\">\n    <mat-option *ngIf=\"isLoading\" class=\"is-loading\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n    </mat-option>\n    <ng-container *ngIf=\"!isLoading\">\n      <mat-option *ngFor=\"let entity of filteredEntities\" [value]=\"entity\">\n        {{dataSource?.onDisplayEntity(entity) ?? null}}\n      </mat-option>\n    </ng-container>\n  </mat-autocomplete>\n</mat-chip-grid>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1$2.FocusMonitor }], propDecorators: { id: [{
                 type: HostBinding
             }], inputField: [{
@@ -1164,68 +1165,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
-class MmSharedUiModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, declarations: [MmBreadcrumbComponent,
-            MmConfirmationWindowComponent,
-            MmProgressWindowComponent,
-            MmNotificationBarComponent,
-            MmMessageDetailsComponent,
-            MmAutocompleteInputComponent,
-            MmEntitySelectInputComponent,
-            MmMultipleEntitySelectInputComponent], imports: [CommonModule,
-            MatToolbarModule,
-            MatButtonModule,
-            MatSnackBarModule,
-            MatDialogModule,
-            MatAutocompleteModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatChipsModule,
-            MatIconModule,
-            ReactiveFormsModule], exports: [MmBreadcrumbComponent, MmConfirmationWindowComponent, MmNotificationBarComponent, MmAutocompleteInputComponent, MmEntitySelectInputComponent, MmMultipleEntitySelectInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, imports: [CommonModule,
-            MatToolbarModule,
-            MatButtonModule,
-            MatSnackBarModule,
-            MatDialogModule,
-            MatAutocompleteModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatChipsModule,
-            MatIconModule,
-            ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MmBreadcrumbComponent,
-                        MmConfirmationWindowComponent,
-                        MmProgressWindowComponent,
-                        MmNotificationBarComponent,
-                        MmMessageDetailsComponent,
-                        MmAutocompleteInputComponent,
-                        MmEntitySelectInputComponent,
-                        MmMultipleEntitySelectInputComponent,
-                    ],
-                    exports: [MmBreadcrumbComponent, MmConfirmationWindowComponent, MmNotificationBarComponent, MmAutocompleteInputComponent, MmEntitySelectInputComponent, MmMultipleEntitySelectInputComponent],
-                    imports: [
-                        CommonModule,
-                        MatToolbarModule,
-                        MatButtonModule,
-                        MatSnackBarModule,
-                        MatDialogModule,
-                        MatAutocompleteModule,
-                        MatInputModule,
-                        MatProgressSpinnerModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        ReactiveFormsModule
-                    ]
-                }]
-        }] });
-
 class ConfirmationService {
     dialog;
     constructor(dialog) {
@@ -1347,6 +1286,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1.MatDialog }] });
 
+class MmFileUploadComponent {
+    dialogRef;
+    data;
+    snackBar;
+    fileName = signal('');
+    fileSize = signal(0);
+    uploadProgress = signal(0);
+    fileInput;
+    selectedFile = null;
+    uploadSuccess;
+    uploadError;
+    constructor(dialogRef, data, snackBar) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.snackBar = snackBar;
+        this.uploadError = false;
+        this.uploadSuccess = false;
+    }
+    // Handler for file input change
+    onFileChange(event) {
+        const file = event.target.files[0];
+        this.uploadFile(file);
+    }
+    // Handler for file drop
+    onFileDrop(event) {
+        event.preventDefault();
+        const file = event.dataTransfer?.files[0];
+        this.uploadFile(file);
+    }
+    // Prevent default dragover behavior
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    // Method to handle file upload
+    uploadFile(file) {
+        const allowedMimeTypes = this.data.mimeTypes.split(',').map((mimeType) => mimeType.trim());
+        if (!file) {
+            return;
+        }
+        if (allowedMimeTypes.length > 0 && allowedMimeTypes.includes(file.type)) {
+            this.selectedFile = file;
+            this.fileSize.set(Math.round(file.size / 1024)); // Set file size in KB
+            this.uploadSuccess = true;
+            this.uploadError = false;
+            this.fileName.set(file.name); // Set image name
+        }
+        else {
+            this.uploadSuccess = false;
+            this.uploadError = true;
+            this.snackBar.open('File type not supported!', 'Close', {
+                duration: 3000,
+                panelClass: 'error',
+            });
+        }
+    }
+    // Method to remove a file
+    removeFile() {
+        this.selectedFile = null;
+        this.fileName.set('');
+        this.fileSize.set(0);
+        this.uploadSuccess = false;
+        this.uploadError = false;
+        this.uploadProgress.set(0);
+    }
+    onOk() {
+        this.dialogRef.close({
+            success: true,
+            selectedFile: this.selectedFile
+        });
+    }
+    onCancel() {
+        this.dialogRef.close({
+            success: false,
+            selectedFile: null
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmFileUploadComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: MmFileUploadComponent, selector: "mm-mm-file-upload", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div\n  class=\"file-upload-wrapper\"\n  [class.success]=\"uploadSuccess\"\n  [class.error]=\"uploadError\"\n  (drop)=\"onFileDrop($event)\"\n  (dragover)=\"onDragOver($event)\"\n>\n  <input\n    type=\"file\"\n    accept=\"{{data.mimeTypes}}\"\n    (change)=\"onFileChange($event)\"\n    hidden\n    #fileInput\n  />\n  <div class=\"file-dropper\" (click)=\"fileInput.click()\">\n    <mat-icon class=\"material-symbols-outlined\">upload</mat-icon>\n    <p>{{data.message}}</p>\n    <div *ngIf=\"fileName()\">\n      <div *ngIf=\"selectedFile\">\n        <p>\n          <span class=\"image-name\">{{ fileName() }}</span> ({{\n            fileSize()\n          }} KB)\n        </p>\n        <mat-icon class=\"material-symbols-outlined delete-icon\" (click)=\"removeFile()\">delete</mat-icon>\n      </div>\n    </div>\n  </div>\n</div>\n<div style=\"justify-content: flex-end;\" mat-dialog-actions>\n  <button (click)=\"onOk()\" [disabled]=\"!selectedFile\" mat-flat-button>Upload</button>\n  <button (click)=\"onCancel()\" mat-button>Cancel</button>\n</div>\n\n", styles: [".file-upload-wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;border:2px dashed #ccc;padding:1rem;margin-bottom:1rem;margin-left:1rem;margin-right:1rem;border-radius:10px;cursor:pointer}.file-upload-wrapper.success{border-color:green}.file-upload-wrapper.error{border-color:red}.file-dropper{display:flex;flex-direction:column;align-items:center}.image-name{font-weight:700}.image-preview{max-width:100%;height:auto;margin-bottom:.5rem;border-radius:10px}.delete-icon{cursor:pointer;color:red}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-mm-file-upload', template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div\n  class=\"file-upload-wrapper\"\n  [class.success]=\"uploadSuccess\"\n  [class.error]=\"uploadError\"\n  (drop)=\"onFileDrop($event)\"\n  (dragover)=\"onDragOver($event)\"\n>\n  <input\n    type=\"file\"\n    accept=\"{{data.mimeTypes}}\"\n    (change)=\"onFileChange($event)\"\n    hidden\n    #fileInput\n  />\n  <div class=\"file-dropper\" (click)=\"fileInput.click()\">\n    <mat-icon class=\"material-symbols-outlined\">upload</mat-icon>\n    <p>{{data.message}}</p>\n    <div *ngIf=\"fileName()\">\n      <div *ngIf=\"selectedFile\">\n        <p>\n          <span class=\"image-name\">{{ fileName() }}</span> ({{\n            fileSize()\n          }} KB)\n        </p>\n        <mat-icon class=\"material-symbols-outlined delete-icon\" (click)=\"removeFile()\">delete</mat-icon>\n      </div>\n    </div>\n  </div>\n</div>\n<div style=\"justify-content: flex-end;\" mat-dialog-actions>\n  <button (click)=\"onOk()\" [disabled]=\"!selectedFile\" mat-flat-button>Upload</button>\n  <button (click)=\"onCancel()\" mat-button>Cancel</button>\n</div>\n\n", styles: [".file-upload-wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;border:2px dashed #ccc;padding:1rem;margin-bottom:1rem;margin-left:1rem;margin-right:1rem;border-radius:10px;cursor:pointer}.file-upload-wrapper.success{border-color:green}.file-upload-wrapper.error{border-color:red}.file-dropper{display:flex;flex-direction:column;align-items:center}.image-name{font-weight:700}.image-preview{max-width:100%;height:auto;margin-bottom:.5rem;border-radius:10px}.delete-icon{cursor:pointer;color:red}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$2.MatSnackBar }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class FileUploadService {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    async showUploadDialog(title, message, mimeTypes) {
+        const dialogRef = this.dialog.open(MmFileUploadComponent, {
+            width: '50vw',
+            maxWidth: '50vw',
+            data: {
+                title,
+                message,
+                mimeTypes
+            }
+        });
+        const r = await firstValueFrom(dialogRef.afterClosed());
+        const success = r?.success ?? false;
+        if (success) {
+            return r?.selectedFile ?? null;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileUploadService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }] });
+
+class MmSharedUiModule {
+    static forRoot() {
+        return {
+            ngModule: MmSharedUiModule,
+            providers: [
+                FileUploadService,
+                ConfirmationService,
+                ProgressNotifierService
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, declarations: [MmBreadcrumbComponent,
+            MmConfirmationWindowComponent,
+            MmProgressWindowComponent,
+            MmNotificationBarComponent,
+            MmMessageDetailsComponent,
+            MmAutocompleteInputComponent,
+            MmEntitySelectInputComponent,
+            MmMultipleEntitySelectInputComponent,
+            MmFileUploadComponent], imports: [CommonModule,
+            MatToolbarModule,
+            MatButtonModule,
+            MatSnackBarModule,
+            MatDialogModule,
+            MatAutocompleteModule,
+            MatInputModule,
+            MatProgressSpinnerModule,
+            MatChipsModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            MatIcon,
+            MatIcon], exports: [MmBreadcrumbComponent,
+            MmConfirmationWindowComponent,
+            MmNotificationBarComponent,
+            MmAutocompleteInputComponent,
+            MmEntitySelectInputComponent,
+            MmMultipleEntitySelectInputComponent,
+            MmFileUploadComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, imports: [CommonModule,
+            MatToolbarModule,
+            MatButtonModule,
+            MatSnackBarModule,
+            MatDialogModule,
+            MatAutocompleteModule,
+            MatInputModule,
+            MatProgressSpinnerModule,
+            MatChipsModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            MatIcon,
+            MatIcon] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: MmSharedUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MmBreadcrumbComponent,
+                        MmConfirmationWindowComponent,
+                        MmProgressWindowComponent,
+                        MmNotificationBarComponent,
+                        MmMessageDetailsComponent,
+                        MmAutocompleteInputComponent,
+                        MmEntitySelectInputComponent,
+                        MmMultipleEntitySelectInputComponent,
+                        MmFileUploadComponent
+                    ],
+                    exports: [
+                        MmBreadcrumbComponent,
+                        MmConfirmationWindowComponent,
+                        MmNotificationBarComponent,
+                        MmAutocompleteInputComponent,
+                        MmEntitySelectInputComponent,
+                        MmMultipleEntitySelectInputComponent,
+                        MmFileUploadComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        MatButtonModule,
+                        MatSnackBarModule,
+                        MatDialogModule,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatProgressSpinnerModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatIcon,
+                        MatIcon
+                    ]
+                }]
+        }] });
+
 function isEmptyInputValue(value) {
     // we don't check for string here so it also works with arrays
     return value == null || value.length === 0;
@@ -1442,5 +1597,5 @@ class AbstractDetailsComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDetailsComponent, ButtonTypes, CommonValidators, ConfirmationService, DialogType, MmAutocompleteInputComponent, MmBreadcrumbComponent, MmConfirmationWindowComponent, MmEntitySelectInputComponent, MmMultipleEntitySelectInputComponent, MmNotificationBarComponent, MmSharedUiModule, ProgressNotifierService };
+export { AbstractDetailsComponent, ButtonTypes, CommonValidators, ConfirmationService, DialogType, FileUploadService, MmAutocompleteInputComponent, MmBreadcrumbComponent, MmConfirmationWindowComponent, MmEntitySelectInputComponent, MmFileUploadComponent, MmMultipleEntitySelectInputComponent, MmNotificationBarComponent, MmSharedUiModule, ProgressNotifierService };
 //# sourceMappingURL=meshmakers-shared-ui.mjs.map