@valtimo/components 13.9.1 → 13.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8732,16 +8732,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
8732
8732
  * limitations under the License.
8733
8733
  */
8734
8734
  class DropzoneComponent {
8735
+ set maxFiles(value) {
8736
+ this._maxFiles = value;
8737
+ this.initDropzone();
8738
+ }
8739
+ get maxFiles() {
8740
+ return this._maxFiles;
8741
+ }
8742
+ set maxFileSize(value) {
8743
+ this._maxFileSize = value;
8744
+ this.initDropzone();
8745
+ }
8746
+ get maxFileSize() {
8747
+ return this._maxFileSize;
8748
+ }
8749
+ set acceptedFiles(value) {
8750
+ this._acceptedFiles = value;
8751
+ this.initDropzone();
8752
+ }
8753
+ get acceptedFiles() {
8754
+ return this._acceptedFiles;
8755
+ }
8735
8756
  constructor(translateService, renderer, document) {
8736
8757
  this.translateService = translateService;
8737
8758
  this.renderer = renderer;
8738
8759
  this.document = document;
8739
8760
  this.externalError$ = new BehaviorSubject('');
8740
- this.maxFileSize = 5;
8741
8761
  this.showMaxFileSize = true;
8742
- this.acceptedFiles = '.json';
8762
+ this.showAcceptedFiles = true;
8743
8763
  this.clear$ = new Subject();
8744
8764
  this.camera = false;
8765
+ this._maxFileSize = 5;
8766
+ this._acceptedFiles = '';
8745
8767
  this.fileSelected = new EventEmitter();
8746
8768
  this.file$ = new BehaviorSubject(undefined);
8747
8769
  this.showingCamera$ = new BehaviorSubject(false);
@@ -8794,13 +8816,13 @@ class DropzoneComponent {
8794
8816
  initDropzone() {
8795
8817
  this.dropzone = new Dropzone(this.dropzoneRef.nativeElement, {
8796
8818
  url: '/',
8797
- maxFilesize: this.maxFileSize,
8819
+ maxFilesize: this._maxFileSize,
8798
8820
  clickable: this.dropzoneRef.nativeElement,
8799
8821
  autoProcessQueue: false,
8800
8822
  createImageThumbnails: false,
8801
- acceptedFiles: this.acceptedFiles,
8823
+ acceptedFiles: this._acceptedFiles,
8802
8824
  previewTemplate: `<p style='display:none'></p>`,
8803
- ...(this.maxFiles && { maxFiles: this.maxFiles }),
8825
+ ...(this._maxFiles && { maxFiles: this._maxFiles }),
8804
8826
  accept: file => {
8805
8827
  this.dropzone.removeAllFiles();
8806
8828
  this.setFile(file);
@@ -8832,11 +8854,11 @@ class DropzoneComponent {
8832
8854
  });
8833
8855
  }
8834
8856
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1.TranslateService }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
8835
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DropzoneComponent, isStandalone: false, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n <div class=\"dz-message\">\n <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n <ng-container *ngIf=\"uploading\">\n <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n </ng-container>\n <div class=\"dropzone-mobile-trigger needsclick\"></div>\n </div>\n <button\n (click)=\"showCamera()\"\n *ngIf=\"camera\"\n type=\"button\"\n class=\"btn btn-primary px-3 webcam-button\"\n >\n <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n </button>\n <ng-container *ngIf=\"showingCamera$ | async\">\n <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n </ng-container>\n</form>\n\n<ng-template #body>\n <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n >\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n <ng-container\n *ngIf=\"{\n errorMessage: errorMessage$ | async,\n externalError: externalError$ | async,\n file: file$ | async,\n } as obs\"\n >\n <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n <div class=\"alert alert-danger mt-2 mb-0\">\n <div class=\"message\">\n {{ obs.externalError || obs.errorMessage }}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n <div class=\"file\">\n <i class=\"icon mdi mdi-file-text mr-2\"></i>\n <span class=\"note\">{{ obs.file.name }}</span>\n <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n <div class=\"progress-bar-container\">\n <valtimo-progress-bar></valtimo-progress-bar>\n </div>\n</ng-template>\n\n<ng-template #webcam>\n <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { kind: "component", type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
8857
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DropzoneComponent, isStandalone: false, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", showMaxFileSize: "showMaxFileSize", showAcceptedFiles: "showAcceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles", maxFileSize: "maxFileSize", acceptedFiles: "acceptedFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n <div class=\"dz-message\">\n <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n <ng-container *ngIf=\"uploading\">\n <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n </ng-container>\n <div class=\"dropzone-mobile-trigger needsclick\"></div>\n </div>\n <button\n (click)=\"showCamera()\"\n *ngIf=\"camera\"\n type=\"button\"\n class=\"btn btn-primary px-3 webcam-button\"\n >\n <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n </button>\n <ng-container *ngIf=\"showingCamera$ | async\">\n <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n </ng-container>\n</form>\n\n<ng-template #body>\n <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n <span *ngIf=\"showAcceptedFiles && acceptedFiles\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.acceptedFiles' | translate }}<b>{{ acceptedFiles }}</b></span\n >\n <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n >\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n <ng-container\n *ngIf=\"{\n errorMessage: errorMessage$ | async,\n externalError: externalError$ | async,\n file: file$ | async,\n } as obs\"\n >\n <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n <div class=\"alert alert-danger mt-2 mb-0\">\n <div class=\"message\">\n {{ obs.externalError || obs.errorMessage }}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n <div class=\"file\">\n <i class=\"icon mdi mdi-file-text mr-2\"></i>\n <span class=\"note\">{{ obs.file.name }}</span>\n <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n <div class=\"progress-bar-container\">\n <valtimo-progress-bar></valtimo-progress-bar>\n </div>\n</ng-template>\n\n<ng-template #webcam>\n <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { kind: "component", type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
8836
8858
  }
8837
8859
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropzoneComponent, decorators: [{
8838
8860
  type: Component,
8839
- args: [{ selector: 'valtimo-dropzone', standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n <div class=\"dz-message\">\n <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n <ng-container *ngIf=\"uploading\">\n <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n </ng-container>\n <div class=\"dropzone-mobile-trigger needsclick\"></div>\n </div>\n <button\n (click)=\"showCamera()\"\n *ngIf=\"camera\"\n type=\"button\"\n class=\"btn btn-primary px-3 webcam-button\"\n >\n <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n </button>\n <ng-container *ngIf=\"showingCamera$ | async\">\n <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n </ng-container>\n</form>\n\n<ng-template #body>\n <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n >\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n <ng-container\n *ngIf=\"{\n errorMessage: errorMessage$ | async,\n externalError: externalError$ | async,\n file: file$ | async,\n } as obs\"\n >\n <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n <div class=\"alert alert-danger mt-2 mb-0\">\n <div class=\"message\">\n {{ obs.externalError || obs.errorMessage }}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n <div class=\"file\">\n <i class=\"icon mdi mdi-file-text mr-2\"></i>\n <span class=\"note\">{{ obs.file.name }}</span>\n <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n <div class=\"progress-bar-container\">\n <valtimo-progress-bar></valtimo-progress-bar>\n </div>\n</ng-template>\n\n<ng-template #webcam>\n <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
8861
+ args: [{ selector: 'valtimo-dropzone', standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n <div class=\"dz-message\">\n <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n <ng-container *ngIf=\"uploading\">\n <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n </ng-container>\n <div class=\"dropzone-mobile-trigger needsclick\"></div>\n </div>\n <button\n (click)=\"showCamera()\"\n *ngIf=\"camera\"\n type=\"button\"\n class=\"btn btn-primary px-3 webcam-button\"\n >\n <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n </button>\n <ng-container *ngIf=\"showingCamera$ | async\">\n <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n </ng-container>\n</form>\n\n<ng-template #body>\n <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n <span *ngIf=\"showAcceptedFiles && acceptedFiles\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.acceptedFiles' | translate }}<b>{{ acceptedFiles }}</b></span\n >\n <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n >\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n <ng-container\n *ngIf=\"{\n errorMessage: errorMessage$ | async,\n externalError: externalError$ | async,\n file: file$ | async,\n } as obs\"\n >\n <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n <div class=\"alert alert-danger mt-2 mb-0\">\n <div class=\"message\">\n {{ obs.externalError || obs.errorMessage }}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n <div class=\"file\">\n <i class=\"icon mdi mdi-file-text mr-2\"></i>\n <span class=\"note\">{{ obs.file.name }}</span>\n <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n <div class=\"progress-bar-container\">\n <valtimo-progress-bar></valtimo-progress-bar>\n </div>\n</ng-template>\n\n<ng-template #webcam>\n <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n", styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:1.69rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon,.large-icon .mdi{line-height:60px;font-size:60px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
8840
8862
  }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Renderer2 }, { type: Document, decorators: [{
8841
8863
  type: Inject,
8842
8864
  args: [DOCUMENT]
@@ -8851,11 +8873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
8851
8873
  type: Input
8852
8874
  }], externalError$: [{
8853
8875
  type: Input
8854
- }], maxFileSize: [{
8855
- type: Input
8856
8876
  }], showMaxFileSize: [{
8857
8877
  type: Input
8858
- }], acceptedFiles: [{
8878
+ }], showAcceptedFiles: [{
8859
8879
  type: Input
8860
8880
  }], clear$: [{
8861
8881
  type: Input
@@ -8869,6 +8889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
8869
8889
  type: Input
8870
8890
  }], maxFiles: [{
8871
8891
  type: Input
8892
+ }], maxFileSize: [{
8893
+ type: Input
8894
+ }], acceptedFiles: [{
8895
+ type: Input
8872
8896
  }], fileSelected: [{
8873
8897
  type: Output
8874
8898
  }] } });
@@ -8931,7 +8955,7 @@ class FormIoUploaderComponent {
8931
8955
  this.valueChange.emit(this._value);
8932
8956
  }
8933
8957
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormIoUploaderComponent, deps: [{ token: i1$6.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$6.DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
8934
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormIoUploaderComponent, isStandalone: false, selector: "valtimo-form-io-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<valtimo-dropzone\n (fileSelected)=\"fileSelected($event)\"\n [acceptedFiles]=\"null\"\n [disabled]=\"disabled\"\n [hideFilePreview]=\"true\"\n [hideTitle]=\"hideTitle\"\n [maxFileSize]=\"maxFileSize\"\n [showMaxFileSize]=\"!hideMaxFileSize\"\n [subtitle]=\"subtitle\"\n [title]=\"title\"\n [camera]=\"camera\"\n [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n <div class=\"file-preview-name\">\n <a href=\"#\" (click)=\"downloadFile(resource)\">\n {{ resource.originalName }}\n </a>\n </div>\n <div class=\"file-preview-size\">\n <span>\n {{ resource.size | filesize }}\n </span>\n </div>\n <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n <a (click)=\"deleteFile(resource.data.resourceId)\">\n <i class=\"icon mdi mdi-delete\"></i>\n </a>\n </div>\n</div>\n", styles: [".progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
8958
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormIoUploaderComponent, isStandalone: false, selector: "valtimo-form-io-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<valtimo-dropzone\n (fileSelected)=\"fileSelected($event)\"\n [acceptedFiles]=\"null\"\n [disabled]=\"disabled\"\n [hideFilePreview]=\"true\"\n [hideTitle]=\"hideTitle\"\n [maxFileSize]=\"maxFileSize\"\n [showMaxFileSize]=\"!hideMaxFileSize\"\n [subtitle]=\"subtitle\"\n [title]=\"title\"\n [camera]=\"camera\"\n [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n <div class=\"file-preview-name\">\n <a href=\"#\" (click)=\"downloadFile(resource)\">\n {{ resource.originalName }}\n </a>\n </div>\n <div class=\"file-preview-size\">\n <span>\n {{ resource.size | filesize }}\n </span>\n </div>\n <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n <a (click)=\"deleteFile(resource.data.resourceId)\">\n <i class=\"icon mdi mdi-delete\"></i>\n </a>\n </div>\n</div>\n", styles: [".progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "showMaxFileSize", "showAcceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles", "maxFileSize", "acceptedFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] }); }
8935
8959
  }
8936
8960
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormIoUploaderComponent, decorators: [{
8937
8961
  type: Component,