@porscheinformatik/material-addons 18.0.3 → 18.0.5

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -404,6 +404,13 @@ class NumberFormatService {
     static { this.DEFAULT_REMOVE_LEADING_ZEROS = false; }
     constructor(locale) {
         this.allowedKeys = [];
+        this.prepareSeparators(locale);
+    }
+    /**
+     * Call this if the locale is changed to update the separators.
+     * @param locale the new locale
+     */
+    prepareSeparators(locale) {
         // try to get the current formatting
         const localeDecimalSeparator = (1.1).toLocaleString(locale).charAt(1);
         this.decimalSeparator = localeDecimalSeparator === ',' ? ',' : '.';
@@ -520,12 +527,12 @@ class NumberFormatService {
         return NumberFormatService.valueIsSet(value) ? value : defaultValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberFormatService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberFormatService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberFormatService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberFormatService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1210,7 +1217,7 @@ class NumericFieldDirective {
         if (this.roundValue) {
             return Math.round(value * Math.pow(10, this.decimalPlaces)) / Math.pow(10, this.decimalPlaces);
         }
-        const method = value < 0 ? "ceil" : "floor";
+        const method = value < 0 ? 'ceil' : 'floor';
         return Math[method](+(value * Math.pow(10, this.decimalPlaces)).toFixed(this.decimalPlaces)) / Math.pow(10, this.decimalPlaces);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1271,18 +1278,16 @@ class NumericFieldModule {
     static forRoot() {
         return {
             ngModule: NumericFieldModule,
-            providers: [NumberFormatService],
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldModule, imports: [NumericFieldDirective], exports: [NumericFieldDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldModule, providers: [NumberFormatService] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumericFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NumericFieldDirective],
-                    providers: [NumberFormatService],
                     exports: [NumericFieldDirective],
                 }]
         }] });
@@ -4251,52 +4256,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 class FileUploadComponent {
     constructor() {
         this.showFileList = false;
+        this.removable = true;
         this.fileEmitter = new EventEmitter();
         this.errorEmitter = new EventEmitter();
         this.fileList = [];
-        this.acceptForInput = [];
-        this.uploadError = false;
+        this.acceptedFileTypes = [];
     }
     ngOnInit() {
+        this.setAcceptedFileTypes();
+    }
+    setAcceptedFileTypes() {
         if (this.accept?.length) {
-            this.accept.forEach((accepted) => this.acceptForInput.push(`.${accepted}`));
+            this.acceptedFileTypes = this.accept.map((ext) => `.${ext.toLowerCase()}`);
         }
     }
-    uploadFile(fileList) {
-        if (!this.multiple && (fileList.length > 1 || this.fileList.length === 1)) {
-            this.errorEmitter.emit('ONLY_SINGLE_FILE');
-            this.uploadError = false;
+    uploadFile(files) {
+        const fileArray = Array.from(files);
+        if (!this.validateFileList(fileArray)) {
             return;
         }
-        if (this.accept && this.accept.length > 0) {
-            for (let i = 0; i < fileList.length; i++) {
-                this.getFileEnding(fileList.item(i).name);
-            }
+        this.addFiles(fileArray);
+        this.fileEmitter.emit(this.createFileListFromArray(this.fileList));
+    }
+    validateFileList(fileArray) {
+        if (!this.multiple && fileArray.length > 1) {
+            this.emitError('ONLY_SINGLE_FILE');
+            return false;
         }
-        if (!this.uploadError) {
-            for (let i = 0; i < fileList.length; i++) {
-                this.fileList.push(fileList.item(i));
+        for (const file of fileArray) {
+            if (!this.isAcceptedFileType(file.name)) {
+                this.emitError('FILETYPE_NOT_SUPPORTED');
+                return false;
             }
-            this.fileEmitter.emit(fileList);
         }
-        this.uploadError = false;
+        return true;
+    }
+    emitError(errorType) {
+        this.errorEmitter.emit(errorType);
     }
-    getFileEnding(name) {
-        const ending = name.substring(name.lastIndexOf('.') + 1);
-        if (this.accept.filter((a) => a.toLowerCase() === ending.toLowerCase()).length === 0) {
-            this.errorEmitter.emit('FILETYPE_NOT_SUPPORTED');
-            this.uploadError = true;
+    isAcceptedFileType(fileName) {
+        const fileExtension = fileName.split('.').pop()?.toLowerCase();
+        return this.acceptedFileTypes.includes(`.${fileExtension}`);
+    }
+    addFiles(fileArray) {
+        if (!this.multiple) {
+            this.fileList = [];
         }
+        this.fileList.push(...fileArray);
     }
     openFile(file) {
         window.open(window.URL.createObjectURL(file));
     }
+    remove(file) {
+        this.fileList = this.fileList.filter((f) => f !== file);
+        this.fileEmitter.emit(this.createFileListFromArray(this.fileList));
+    }
+    createFileListFromArray(files) {
+        const dataTransfer = new DataTransfer();
+        files.forEach((file) => dataTransfer.items.add(file));
+        return dataTransfer.files;
+    }
+    hasSingleFile() {
+        return !this.multiple && this.fileList.length === 1;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList", removable: "removable" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptedFileTypes\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <ng-container *ngIf=\"hasSingleFile(); else uploadDefault\">\n      {{ fileList[0].name }}\n    </ng-container>\n\n    <ng-template #uploadDefault>\n      <mat-icon>vertical_align_top</mat-icon>\n      {{ text ? text : 'Upload' }}\n    </ng-template>\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\" [removable]=\"removable\" (removed)=\"remove(file)\">\n      {{ file.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">delete_forever</mat-icon>\n    </mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-file-upload', standalone: true, imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, TranslateModule, DragAndDropDirectiveDirective, MatChipsModule], template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"] }]
+            args: [{ selector: 'mad-file-upload', standalone: true, imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, TranslateModule, DragAndDropDirectiveDirective, MatChipsModule], template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptedFileTypes\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <ng-container *ngIf=\"hasSingleFile(); else uploadDefault\">\n      {{ fileList[0].name }}\n    </ng-container>\n\n    <ng-template #uploadDefault>\n      <mat-icon>vertical_align_top</mat-icon>\n      {{ text ? text : 'Upload' }}\n    </ng-template>\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\" [removable]=\"removable\" (removed)=\"remove(file)\">\n      {{ file.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">delete_forever</mat-icon>\n    </mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], multiple: [{
@@ -4307,13 +4335,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 type: Input
             }], showFileList: [{
                 type: Input
+            }], removable: [{
+                type: Input
             }], fileEmitter: [{
                 type: Output
             }], errorEmitter: [{
                 type: Output
             }] } });
 
-const VERSION = '17.3.4';
+const VERSION = '18.0.4';
 
 const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
     providedIn: 'root',