@dsivd/prestations-ng 14.5.12 → 15.5.13-beta1

package/CHANGELOG.md

@@ -26,8 +26,21 @@ A change is considered **breaking** if you have to change your code or update yo
 
 ---
 
+## [14.5.13]
+
+### Added
+
+- [foehn-picture-upload.module.ts](projects/prestations-ng/src/foehn-upload/foehn-picture-upload/foehn-picture-upload.module.ts)
+- [foehn-picture-upload.component.ts](projects/prestations-ng/src/foehn-upload/foehn-picture-upload/foehn-picture-upload.component.ts)
+- [foehn-picture-upload.component.html](projects/prestations-ng/src/foehn-upload/foehn-picture-upload/foehn-picture-upload.component.html)
+  - added a picture uploader that allows the user to crop the uploaded picture
+  - requires `ngx-image-cropper@~5.0.0`
+  - for examples, see related page in the devtool (https://dsi-vd.github.io/prestations-ng/upload#foehn_picture_upload)
+
 ## [14.5.12]
 
+### Fixed
+
 -   [foehn-footer.component.ts](projects/prestations-ng/src/foehn-footer/foehn-footer.component.ts)
    -   Fixed "SecurityBestPracticeLink" URL
 

package/bundles/dsivd-prestations-ng.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/angular-fontawesome'), require('@angular/platform-browser'), require('@angular/cdk/a11y'), require('@fortawesome/free-regular-svg-icons'), require('core-js/modules/es.array.includes'), require('@angular/cdk/scrolling'), require('@angular/common/locales/fr'), require('dayjs'), require('dayjs/plugin/isToday'), require('iban'), require('dayjs/plugin/localeData')) :
-    typeof define === 'function' && define.amd ? define('@dsivd/prestations-ng', ['exports', '@angular/core', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/router', '@angular/common', '@angular/forms', '@fortawesome/free-solid-svg-icons', '@fortawesome/angular-fontawesome', '@angular/platform-browser', '@angular/cdk/a11y', '@fortawesome/free-regular-svg-icons', 'core-js/modules/es.array.includes', '@angular/cdk/scrolling', '@angular/common/locales/fr', 'dayjs', 'dayjs/plugin/isToday', 'iban', 'dayjs/plugin/localeData'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.dsivd = global.dsivd || {}, global.dsivd['prestations-ng'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.router, global.ng.common, global.ng.forms, global['@fortawesome/free-solid-svg-icons'], global['@fortawesome/angular-fontawesome'], global.ng.platformBrowser, global.ng.cdk.a11y, global['@fortawesome/free-regular-svg-icons'], null, global.ng.cdk.scrolling, global.ng.common.locales.fr, global.dayjs, global['dayjs/plugin/isToday'], global.iban, global['dayjs/plugin/localeData']));
-}(this, (function (exports, i0, i1, rxjs, operators, i1$1, i3, i4, freeSolidSvgIcons, i1$2, i1$3, i2, freeRegularSvgIcons, es_array_includes, i3$1, localeFr, dayjs, isToday, iban, localeData) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/angular-fontawesome'), require('@angular/platform-browser'), require('@angular/cdk/a11y'), require('@fortawesome/free-regular-svg-icons'), require('core-js/modules/es.array.includes'), require('@angular/cdk/scrolling'), require('@angular/common/locales/fr'), require('dayjs'), require('dayjs/plugin/isToday'), require('ngx-image-cropper'), require('iban'), require('dayjs/plugin/localeData')) :
+    typeof define === 'function' && define.amd ? define('@dsivd/prestations-ng', ['exports', '@angular/core', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/router', '@angular/common', '@angular/forms', '@fortawesome/free-solid-svg-icons', '@fortawesome/angular-fontawesome', '@angular/platform-browser', '@angular/cdk/a11y', '@fortawesome/free-regular-svg-icons', 'core-js/modules/es.array.includes', '@angular/cdk/scrolling', '@angular/common/locales/fr', 'dayjs', 'dayjs/plugin/isToday', 'ngx-image-cropper', 'iban', 'dayjs/plugin/localeData'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.dsivd = global.dsivd || {}, global.dsivd['prestations-ng'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.router, global.ng.common, global.ng.forms, global['@fortawesome/free-solid-svg-icons'], global['@fortawesome/angular-fontawesome'], global.ng.platformBrowser, global.ng.cdk.a11y, global['@fortawesome/free-regular-svg-icons'], null, global.ng.cdk.scrolling, global.ng.common.locales.fr, global.dayjs, global['dayjs/plugin/isToday'], global['ngx-image-cropper'], global.iban, global['dayjs/plugin/localeData']));
+}(this, (function (exports, i0, i1, rxjs, operators, i1$1, i3, i4, freeSolidSvgIcons, i1$2, i1$3, i2, freeRegularSvgIcons, es_array_includes, i3$1, localeFr, dayjs, isToday, i5, iban, localeData) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,6 +38,7 @@
     var localeFr__default = /*#__PURE__*/_interopDefaultLegacy(localeFr);
     var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
     var isToday__default = /*#__PURE__*/_interopDefaultLegacy(isToday);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var iban__namespace = /*#__PURE__*/_interopNamespace(iban);
     var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
 
@@ -1903,7 +1904,14 @@
             '(fichier au format pdf), vous devez demander la prestation en étant connecté au portail sécurisé.',
         'use-login.text': "Cette prestation est aussi utilisable au travers de l'espace sécurisé qui vous " +
             "permet de pré-remplir le formulaire et de suivre l'avancement de traitement de la demande.",
-        'use-login.button.text': 'Connectez-vous'
+        'use-login.button.text': 'Connectez-vous',
+        'foehn-picture-upload.choose-button-label': 'Choisissez une photo',
+        'foehn-picture-upload.loading-label': 'Chargement...',
+        'foehn-picture-upload.loading-failure-label': 'Impossible de charger la photo sélectionnée',
+        'foehn-picture-upload.validate-selection-label': 'Valider la sélection',
+        'foehn-picture-upload.cancel-selection-label': 'Annuler',
+        'foehn-picture-upload.selection-not-validated-label': 'Merci de valider votre sélection',
+        'foehn-picture-upload.delete-picture-label': 'Supprimer'
     };
 
     var DICTIONARY_BASE_URL = 'api/dictionary';
@@ -10927,6 +10935,206 @@
         return BoDocumentsWithErrors;
     }());
 
+    var blobToFile = function (blobData, fileName) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var blob = blobData;
+        blob.name = fileName;
+        return blob;
+    };
+    var convertBase64UrlToFile = function (croppedImageasBase64Url, filename) {
+        var arr = croppedImageasBase64Url.split(',');
+        var mime = arr[0].match(/:(.*?);/)[1];
+        var bstr = atob(arr[1]);
+        var n = bstr.length;
+        var u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        if (!navigator.msSaveBlob) {
+            // detect if not Edge
+            return new File([u8arr], filename, { type: mime });
+        }
+        else {
+            // Edge support the FileAPI but not the File constructor.
+            return blobToFile(new Blob([u8arr], { type: mime }), filename);
+        }
+    };
+    var FoehnPictureUploadComponent = /** @class */ (function (_super) {
+        __extends(FoehnPictureUploadComponent, _super);
+        function FoehnPictureUploadComponent(growlService, uploadService, dictionaryService) {
+            var _this = _super.call(this) || this;
+            _this.growlService = growlService;
+            _this.uploadService = uploadService;
+            _this.dictionaryService = dictionaryService;
+            _this.baseUrl = 'api/document';
+            _this.croppedPictureFilename = 'photo.png';
+            _this.resizeToWidth = 300;
+            _this.resizeToHeight = 0;
+            _this.loading = false;
+            return _this;
+        }
+        FoehnPictureUploadComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            _super.prototype.ngOnInit.call(this);
+            this.currentLanguageSubscription = this.dictionaryService
+                .getCurrentLanguageCode()
+                .pipe(operators.distinctUntilChanged())
+                .subscribe(function (language) {
+                _this.currentLanguage = language;
+            });
+        };
+        FoehnPictureUploadComponent.prototype.onPictureSelection = function (imgEvent) {
+            this.refreshErrors([[], true]);
+            this.pictureToCrop = imgEvent;
+            this.loading = true;
+        };
+        FoehnPictureUploadComponent.prototype.onPictureSelectionFailed = function () {
+            var errors = [
+                {
+                    name: this.name,
+                    code: 'LoadingFailure',
+                    message: this.dictionaryService.getKeySync('foehn-picture-upload.loading-failure-label')
+                }
+            ];
+            this.refreshErrors([errors, true]);
+            this.resetPictureSelection();
+        };
+        FoehnPictureUploadComponent.prototype.onImageCropped = function (croppedEvent) {
+            this.croppedPictureAsBase64Url = croppedEvent.base64;
+        };
+        FoehnPictureUploadComponent.prototype.resetPictureSelection = function () {
+            this.croppedPictureAsBase64Url = null;
+            this.pictureToCrop = null;
+            this.loading = false;
+        };
+        FoehnPictureUploadComponent.prototype.savePicture = function () {
+            var _this = this;
+            this.markAsPristine();
+            var photo = convertBase64UrlToFile(this.croppedPictureAsBase64Url, this.croppedPictureFilename);
+            this.uploadService
+                .uploadDocuments(this.baseUrl, this.name, this.label, [photo], this.key, false, this.currentLanguage)
+                .pipe(operators.filter(function (result) { return !!result; }))
+                .subscribe(function (_a) {
+                var documents = _a.documents, errors = _a.errors;
+                _this.resetPictureSelection();
+                if (!!documents.length) {
+                    _this.markAsDirty();
+                    _this.model = documents;
+                    _this.refreshErrors([[], true]);
+                }
+                else {
+                    _this.model = [];
+                    _this.refreshErrors([errors, true]);
+                }
+            });
+        };
+        FoehnPictureUploadComponent.prototype.deleteFile = function () {
+            var _this = this;
+            this.uploadService
+                .deleteDocument(this.baseUrl, this.model[0])
+                .subscribe(function () {
+                _this.model = [];
+                _this.resetPictureSelection();
+            });
+        };
+        FoehnPictureUploadComponent.prototype.getDownloadUrl = function () {
+            return this.uploadService.getDownloadUrl(this.baseUrl, this.model[0]);
+        };
+        Object.defineProperty(FoehnPictureUploadComponent.prototype, "hasPicture", {
+            get: function () {
+                return this.model && this.model.length && !!this.model[0].reference;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        FoehnPictureUploadComponent.prototype.refreshErrors = function (results) {
+            var _this = this;
+            var errors = results[0];
+            var isInSelectionMode = !this.hasPicture && !!this.croppedPictureAsBase64Url;
+            if (isInSelectionMode) {
+                var notNullError = errors.find(function (e) { return e.name === _this.name && e.code === 'NotEmpty'; });
+                if (notNullError) {
+                    notNullError.message = this.dictionaryService.getKeySync('foehn-picture-upload.selection-not-validated-label');
+                }
+            }
+            _super.prototype.refreshErrors.call(this, results);
+        };
+        return FoehnPictureUploadComponent;
+    }(FoehnInputComponent));
+    FoehnPictureUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadComponent, deps: [{ token: GrowlBrokerService }, { token: MultiUploadService }, { token: SdkDictionaryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FoehnPictureUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnPictureUploadComponent, selector: "foehn-picture-upload", inputs: { name: "name", key: "key", label: "label", baseUrl: "baseUrl", croppedPictureFilename: "croppedPictureFilename", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight" }, providers: [
+            {
+                provide: FoehnInputComponent,
+                useExisting: i0.forwardRef(function () { return FoehnPictureUploadComponent; }),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    [attr.id]=\"buildId('Container')\"\n    [class.has-danger]=\"hasErrors()\"\n    [class.vd-form-group-danger]=\"hasErrors()\"\n    class=\"form-group clearable-input-form-group\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div *ngIf=\"hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <img\n                [id]=\"buildChildId('Picture')\"\n                [attr.alt]=\"label\"\n                [src]=\"getDownloadUrl()\"\n            />\n        </div>\n        <div class=\"col-md-4\">\n            <button\n                type=\"button\"\n                class=\"btn btn-danger w-100\"\n                [attr.id]=\"buildChildId('DeleteButton')\"\n                (click)=\"deleteFile()\"\n            >\n                {{\n                    'foehn-picture-upload.delete-picture-label' | fromDictionary\n                }}\n            </button>\n        </div>\n    </div>\n\n    <div *ngIf=\"!hasPicture && !croppedPictureAsBase64Url\">\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"form-control-file d-none\"\n            [attr.id]=\"name\"\n            [attr.accept]=\"'.jpeg,.jpg,.png'\"\n            [multiple]=\"false\"\n            [name]=\"name\"\n            (change)=\"onPictureSelection($event)\"\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary my-2\"\n            [attr.id]=\"buildChildId('ChooseButton')\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            [disabled]=\"loading\"\n        >\n            {{ 'foehn-picture-upload.choose-button-label' | fromDictionary }}\n        </button>\n    </div>\n\n    <div *ngIf=\"loading\">\n        {{ 'foehn-picture-upload.loading-label' | fromDictionary }}\n    </div>\n\n    <div *ngIf=\"!hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <image-cropper\n                [id]=\"buildChildId('Cropper')\"\n                (cropperReady)=\"loading = false\"\n                (imageCropped)=\"onImageCropped($event)\"\n                (loadImageFailed)=\"onPictureSelectionFailed()\"\n                [aspectRatio]=\"3 / 4\"\n                [imageChangedEvent]=\"pictureToCrop\"\n                [maintainAspectRatio]=\"true\"\n                [resizeToWidth]=\"resizeToWidth\"\n                [resizeToHeight]=\"resizeToHeight\"\n                [onlyScaleDown]=\"true\"\n                format=\"png\"\n            ></image-cropper>\n        </div>\n\n        <div *ngIf=\"!hasPicture\" class=\"col-md-4\">\n            <div class=\"row mb-3\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-primary w-100\"\n                    [attr.id]=\"buildChildId('SaveButton')\"\n                    (click)=\"savePicture()\"\n                >\n                    {{\n                        'foehn-picture-upload.validate-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n            <div class=\"row\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-secondary w-100\"\n                    [attr.id]=\"buildChildId('CancelButton')\"\n                    (click)=\"resetPictureSelection()\"\n                >\n                    {{\n                        'foehn-picture-upload.cancel-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: i5__namespace.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'foehn-picture-upload',
+                        templateUrl: './foehn-picture-upload.component.html',
+                        providers: [
+                            {
+                                provide: FoehnInputComponent,
+                                useExisting: i0.forwardRef(function () { return FoehnPictureUploadComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], ctorParameters: function () { return [{ type: GrowlBrokerService }, { type: MultiUploadService }, { type: SdkDictionaryService }]; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], key: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], baseUrl: [{
+                    type: i0.Input
+                }], croppedPictureFilename: [{
+                    type: i0.Input
+                }], resizeToWidth: [{
+                    type: i0.Input
+                }], resizeToHeight: [{
+                    type: i0.Input
+                }] } });
+
+    var FoehnPictureUploadModule = /** @class */ (function () {
+        function FoehnPictureUploadModule() {
+        }
+        return FoehnPictureUploadModule;
+    }());
+    FoehnPictureUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FoehnPictureUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadModule, declarations: [FoehnPictureUploadComponent], imports: [i3.CommonModule,
+            FoehnIconsModule,
+            FoehnValidationAlertsModule,
+            SdkDictionaryModule,
+            i4.FormsModule,
+            i5.ImageCropperModule], exports: [FoehnPictureUploadComponent] });
+    FoehnPictureUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadModule, imports: [[
+                i3.CommonModule,
+                FoehnIconsModule,
+                FoehnValidationAlertsModule,
+                SdkDictionaryModule,
+                i4.FormsModule,
+                i5.ImageCropperModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i3.CommonModule,
+                            FoehnIconsModule,
+                            FoehnValidationAlertsModule,
+                            SdkDictionaryModule,
+                            i4.FormsModule,
+                            i5.ImageCropperModule
+                        ],
+                        declarations: [FoehnPictureUploadComponent],
+                        exports: [FoehnPictureUploadComponent]
+                    }]
+            }] });
+
     var EPaymentRequest = /** @class */ (function () {
         function EPaymentRequest() {
         }
@@ -12898,6 +13106,8 @@
     exports.FoehnPageModalComponent = FoehnPageModalComponent;
     exports.FoehnPageModule = FoehnPageModule;
     exports.FoehnPageService = FoehnPageService;
+    exports.FoehnPictureUploadComponent = FoehnPictureUploadComponent;
+    exports.FoehnPictureUploadModule = FoehnPictureUploadModule;
     exports.FoehnRadioComponent = FoehnRadioComponent;
     exports.FoehnRecapSectionComponent = FoehnRecapSectionComponent;
     exports.FoehnRecapSectionModule = FoehnRecapSectionModule;