@dsivd/prestations-ng 14.5.12 → 14.5.14-beta3

package/CHANGELOG.md

@@ -26,8 +26,31 @@ A change is considered **breaking** if you have to change your code or update yo
 
 ---
 
+## [14.5.14]
+
+### Added
+
+- [foehn-table.module.ts](projects/prestations-ng/src/foehn-table/foehn-table.module.ts)
+- [foehn-table.component.ts](projects/prestations-ng/src/foehn-table/foehn-table.component.ts)
+- [foehn-table.component.html](projects/prestations-ng/src/foehn-table/foehn-table.component.html)
+    - added a paginated table
+    - for examples, see related page in the devtool (https://dsi-vd.github.io/prestations-ng/list#foehn_table)
+
+## [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,17 @@
             '(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',
+        'foehn-table.totalElements': '{total} éléments trouvées',
+        'foehn-table.totalElements.1': '1 élément trouvée',
+        'foehn-table.totalElements.0': 'Aucun résultat'
     };
 
     var DICTIONARY_BASE_URL = 'api/dictionary';
@@ -9704,6 +9715,199 @@
         return PageChangeEvent;
     }());
 
+    var hasInputChanged = function (change) { return !(!change ||
+        !change.currentValue ||
+        change.previousValue === change.currentValue); };
+    var FoehnTableComponent = /** @class */ (function () {
+        function FoehnTableComponent() {
+            this.itemsPerPage = 10;
+            this.id = 'foehn-table';
+            this.previousLabel = 'Précédent';
+            this.nextLabel = 'Suivant';
+            this.pageChange = new i0.EventEmitter();
+            this.sortChange = new i0.EventEmitter();
+            this.currentPage = 1;
+            this.filteredList = [];
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            this.trackByFn = function (index, item) { return index; };
+        }
+        Object.defineProperty(FoehnTableComponent.prototype, "list", {
+            set: function (list) {
+                this._list = list;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FoehnTableComponent.prototype.ngOnChanges = function (changes) {
+            var itemsPerPageChange = changes.itemsPerPage;
+            var listChange = changes.list;
+            var fixedPageCountChange = changes.fixedPageCount;
+            if (!hasInputChanged(itemsPerPageChange) &&
+                !hasInputChanged(listChange) &&
+                !hasInputChanged(fixedPageCountChange)) {
+                return;
+            }
+            this.buildFilteredList();
+        };
+        FoehnTableComponent.prototype.previousPage = function () {
+            this.currentPage = this.currentPage - 1;
+            this.buildFilteredList();
+            this.pageChange.next({
+                previousPage: this.currentPage + 1,
+                currentPage: this.currentPage,
+                pageCount: this.pagesCount()
+            });
+        };
+        FoehnTableComponent.prototype.hasPreviousPage = function () {
+            return this.currentPage > 1;
+        };
+        FoehnTableComponent.prototype.nextPage = function () {
+            this.currentPage = this.currentPage + 1;
+            this.buildFilteredList();
+            this.pageChange.next({
+                previousPage: this.currentPage - 1,
+                currentPage: this.currentPage,
+                pageCount: this.pagesCount()
+            });
+        };
+        FoehnTableComponent.prototype.hasNextPage = function () {
+            return this.currentPage < this.pagesCount();
+        };
+        FoehnTableComponent.prototype.showPage = function (page, emitPageChangeEvent) {
+            if (emitPageChangeEvent === void 0) { emitPageChangeEvent = false; }
+            if (this.currentPage === page) {
+                return;
+            }
+            var previousPage = this.currentPage;
+            this.currentPage = page;
+            this.buildFilteredList();
+            if (emitPageChangeEvent) {
+                this.pageChange.next({
+                    previousPage: previousPage,
+                    currentPage: this.currentPage,
+                    pageCount: this.pagesCount()
+                });
+            }
+        };
+        FoehnTableComponent.prototype.pagesCount = function () {
+            if (!!this.fixedPageCount) {
+                return this.fixedPageCount;
+            }
+            return this._list
+                ? Math.ceil(this._list.length / this.itemsPerPage)
+                : 0;
+        };
+        FoehnTableComponent.prototype.triggerSort = function (sortAttribute) {
+            var sortDirection = 'DESC';
+            if (this.sort.sortAttribute === sortAttribute) {
+                sortDirection = this.sort.sortDirection === 'DESC' ? 'ASC' : 'DESC';
+            }
+            this.sortChange.next({
+                sortDirection: sortDirection,
+                sortAttribute: sortAttribute
+            });
+        };
+        FoehnTableComponent.prototype.buildFilteredList = function () {
+            if (!!this.fixedPageCount) {
+                this.filteredList = this._list;
+                return;
+            }
+            var currentPageExists = (this.currentPage - 1) * this.itemsPerPage <= this._list.length;
+            if (!currentPageExists) {
+                this.currentPage = 1;
+            }
+            var start = (this.currentPage - 1) * this.itemsPerPage;
+            this.filteredList = this._list
+                ? this._list.slice(start, start + this.itemsPerPage)
+                : [];
+        };
+        return FoehnTableComponent;
+    }());
+    FoehnTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FoehnTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", trackByFn: "trackByFn", list: "list" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container *ngIf=\"!col.sortAttribute\">\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.sortAttribute\">\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.routerLinkGetter\">\n                            <span\n                                [innerHTML]=\"col.valueGetter(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                            <a\n                                [routerLink]=\"col.routerLinkGetter(item)\"\n                                queryParamsHandling=\"merge\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                ></span>\n                            </a>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:#ffbf47}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'foehn-table',
+                        templateUrl: './foehn-table.component.html',
+                        styleUrls: ['./foehn-table.component.css']
+                    }]
+            }], propDecorators: { itemsPerPage: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], previousLabel: [{
+                    type: i0.Input
+                }], nextLabel: [{
+                    type: i0.Input
+                }], totalElements: [{
+                    type: i0.Input
+                }], fixedPageCount: [{
+                    type: i0.Input
+                }], columnsConfiguration: [{
+                    type: i0.Input
+                }], pageChange: [{
+                    type: i0.Output
+                }], sort: [{
+                    type: i0.Input
+                }], sortChange: [{
+                    type: i0.Output
+                }],
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            trackByFn: [{
+                    type: i0.Input
+                }], list: [{
+                    type: i0.Input
+                }] } });
+
+    var FoehnTableModule = /** @class */ (function () {
+        function FoehnTableModule() {
+        }
+        return FoehnTableModule;
+    }());
+    FoehnTableModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FoehnTableModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, declarations: [FoehnTableComponent], imports: [i3.CommonModule,
+            FoehnIconsModule,
+            SdkDictionaryModule,
+            i1$1.RouterModule], exports: [FoehnTableComponent] });
+    FoehnTableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, imports: [[
+                i3.CommonModule,
+                FoehnIconsModule,
+                SdkDictionaryModule,
+                i1$1.RouterModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i3.CommonModule,
+                            FoehnIconsModule,
+                            SdkDictionaryModule,
+                            i1$1.RouterModule
+                        ],
+                        declarations: [FoehnTableComponent],
+                        exports: [FoehnTableComponent]
+                    }]
+            }] });
+
+    var FoehnTableColumnConfiguration = /** @class */ (function () {
+        function FoehnTableColumnConfiguration() {
+        }
+        return FoehnTableColumnConfiguration;
+    }());
+
+    var FoehnTablePageChangeEvent = /** @class */ (function () {
+        function FoehnTablePageChangeEvent() {
+        }
+        return FoehnTablePageChangeEvent;
+    }());
+
+    var TableSort = /** @class */ (function () {
+        function TableSort() {
+        }
+        return TableSort;
+    }());
+
     var RedirectComponent = /** @class */ (function () {
         function RedirectComponent(iamInterceptor) {
             var _this = this;
@@ -10927,6 +11131,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 +13302,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;
@@ -12905,6 +13311,10 @@
     exports.FoehnRemainingAlertsSummaryModule = FoehnRemainingAlertsSummaryModule;
     exports.FoehnSelectComponent = FoehnSelectComponent;
     exports.FoehnSkipLinkComponent = FoehnSkipLinkComponent;
+    exports.FoehnTableColumnConfiguration = FoehnTableColumnConfiguration;
+    exports.FoehnTableComponent = FoehnTableComponent;
+    exports.FoehnTableModule = FoehnTableModule;
+    exports.FoehnTablePageChangeEvent = FoehnTablePageChangeEvent;
     exports.FoehnTimeComponent = FoehnTimeComponent;
     exports.FoehnUserConnectedAsComponent = FoehnUserConnectedAsComponent;
     exports.FoehnUserConnectedAsModule = FoehnUserConnectedAsModule;
@@ -12969,6 +13379,7 @@
     exports.Street = Street;
     exports.StreetNumber = StreetNumber;
     exports.THOUSANDS_SEPARATOR = THOUSANDS_SEPARATOR;
+    exports.TableSort = TableSort;
     exports.UploaderHelper = UploaderHelper;
     exports.ValidationHandlerService = ValidationHandlerService;