@sumaris-net/ngx-components 1.22.11-rc15 → 1.22.11-rc18

package/bundles/sumaris-net.ngx-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@angular/cdk/text-field'), require('@e-is/ngx-material-table'), require('@angular/cdk/collections'), require('ngx-jdenticon'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs'), require('moment-timezone')) :
-    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@angular/cdk/text-field', '@e-is/ngx-material-table', '@angular/cdk/collections', 'ngx-jdenticon', 'tweetnacl-util', 'scrypt-async', 'hammerjs', 'moment-timezone'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sumaris-net'] = global['sumaris-net'] || {}, global['sumaris-net']['ngx-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations, global['ngx-translate'].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global['ionic-native'].keyboard.ngx, global['angular2-text-mask'], global['ngx-material-timepicker'], global.ng.material.datepicker, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global['ngx-color-picker'], global['ionic-native']['native-audio'].ngx, global['ionic-native'].vibration.ngx, global['ionic-native']['audio-management'].ngx, global['ionic-native']['native-audio'].ngx.index, global['ionic-native'].vibration.ngx.index, global['ionic-native']['audio-management'].ngx.index, global.uuid.v4, global.ng.cdk.dragDrop, global['ngx-markdown'], global.tweetnacl, global.ionic.storage, null, global['ionic-native']['splash-screen'].ngx, global['ionic-native'].network.ngx, global['ionic-cache'], global['ionic-cache/dist/cache'].service, global['ionic-native'].network.ngx.index, global['ionic-native']['splash-screen'].ngx.index, global['ionic-native']['status-bar'].ngx, global.ng.cdk.platform, global['ionic-native']['in-app-browser'].ngx, global.apollo.client.core, global['apollo-angular'], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global['apollo-link-queue'], global['apollo-link-serialize'], global['apollo-link-logger'], global['apollo-angular'].http, global['apollo3-cache-persist'], global['ionic-native'].downloader.ngx, global['ionic-native']['status-bar'].ngx.index, global['ionic-native'].keyboard.ngx.index, global['ionic-native']['in-app-browser'].ngx.index, global['ionic-native'].downloader.ngx.index, global.ng.cdk.textField, global['e-is']['ngx-material-table'], global.ng.cdk.collections, global['ngx-jdenticon'], null, null, null, global['moment-timezone']));
-}(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, animations, i1$2, i1$5, momentImported, i1$1, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, textField, ngxMaterialTable, collections, ngxJdenticon, tweetnaclUtil, scryptAsync, hammerjs, momentTZImported) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@ionic-native/image-picker/ngx'), require('@ionic-native/media-capture/ngx'), require('@ionic-native/photo-viewer/ngx'), require('@ionic-native/image-picker/ngx/index'), require('@ionic-native/photo-viewer/ngx/index'), require('@ionic-native/media-capture/ngx/index'), require('@angular/cdk/collections'), require('@e-is/ngx-material-table'), require('ngx-jdenticon'), require('@angular/cdk/text-field'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs'), require('moment-timezone')) :
+    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@ionic-native/image-picker/ngx', '@ionic-native/media-capture/ngx', '@ionic-native/photo-viewer/ngx', '@ionic-native/image-picker/ngx/index', '@ionic-native/photo-viewer/ngx/index', '@ionic-native/media-capture/ngx/index', '@angular/cdk/collections', '@e-is/ngx-material-table', 'ngx-jdenticon', '@angular/cdk/text-field', 'tweetnacl-util', 'scrypt-async', 'hammerjs', 'moment-timezone'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sumaris-net'] = global['sumaris-net'] || {}, global['sumaris-net']['ngx-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations, global['ngx-translate'].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global['ionic-native'].keyboard.ngx, global['angular2-text-mask'], global['ngx-material-timepicker'], global.ng.material.datepicker, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global['ngx-color-picker'], global['ionic-native']['native-audio'].ngx, global['ionic-native'].vibration.ngx, global['ionic-native']['audio-management'].ngx, global['ionic-native']['native-audio'].ngx.index, global['ionic-native'].vibration.ngx.index, global['ionic-native']['audio-management'].ngx.index, global.uuid.v4, global.ng.cdk.dragDrop, global['ngx-markdown'], global.tweetnacl, global.ionic.storage, null, global['ionic-native']['splash-screen'].ngx, global['ionic-native'].network.ngx, global['ionic-cache'], global['ionic-cache/dist/cache'].service, global['ionic-native'].network.ngx.index, global['ionic-native']['splash-screen'].ngx.index, global['ionic-native']['status-bar'].ngx, global.ng.cdk.platform, global['ionic-native']['in-app-browser'].ngx, global.apollo.client.core, global['apollo-angular'], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global['apollo-link-queue'], global['apollo-link-serialize'], global['apollo-link-logger'], global['apollo-angular'].http, global['apollo3-cache-persist'], global['ionic-native'].downloader.ngx, global['ionic-native']['status-bar'].ngx.index, global['ionic-native'].keyboard.ngx.index, global['ionic-native']['in-app-browser'].ngx.index, global['ionic-native'].downloader.ngx.index, global.ngx$9, global.ngx$b, global.ngx$a, global.i5, global.i6$1, global.i7, global.ng.cdk.collections, global['e-is']['ngx-material-table'], global['ngx-jdenticon'], global.ng.cdk.textField, null, null, null, global['moment-timezone']));
+}(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, animations, i1$2, i1$5, momentImported, i1$1, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, ngx$9, ngx$b, ngx$a, i5, i6$1, i7, collections, ngxMaterialTable, ngxJdenticon, textField, tweetnaclUtil, scryptAsync, hammerjs, momentTZImported) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10553,44 +10553,97 @@
                 },] }
     ];
 
+    var UploadFile = /** @class */ (function (_super) {
+        __extends(UploadFile, _super);
+        function UploadFile() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return UploadFile;
+    }(File));
+    var FileResponse = /** @class */ (function () {
+        function FileResponse(init) {
+            this.type = i2$1.HttpEventType.Response;
+            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
+            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
+            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
+        }
+        return FileResponse;
+    }());
+    function isProgressEvent(event) {
+        return event && (event.type === i2$1.HttpEventType.UploadProgress
+            || event.type === i2$1.HttpEventType.DownloadProgress);
+    }
+    function isResponseEvent(event) {
+        return event && event.type === i2$1.HttpEventType.Response;
+    }
+
     var IMAGE_DEFAULTS = {
         MAX_HEIGHT: 480,
         MAX_WIDTH: 640,
         THUMB_MAX_HEIGHT: 200,
         THUMB_MAX_WIDTH: 200
     };
-    var Base64ImageReader = /** @class */ (function () {
-        function Base64ImageReader() {
+    // @dynamic
+    var ImagesUtils = /** @class */ (function () {
+        function ImagesUtils() {
         }
-        Base64ImageReader.prototype.readFromBlob = function (file) {
-            return __awaiter(this, void 0, void 0, function () {
-                var dataUrl;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!file)
-                                throw new Error('Illegal argument: missing file');
-                            return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    var reader = new FileReader();
-                                    reader.addEventListener('load', function (event) { return resolve(reader.result); }, false);
-                                    reader.readAsDataURL(file);
-                                })];
-                        case 1:
-                            dataUrl = _a.sent();
-                            return [2 /*return*/, dataUrl];
-                    }
-                });
-            });
+        ImagesUtils.readAsDataURL = function (file, opts) {
+            var _this = this;
+            var $progress = new rxjs.Subject();
+            var reader = new FileReader();
+            // Listen progress
+            reader.onprogress = function (e) {
+                var total = e.total || 1;
+                var loaded = e.total || 0;
+                if (loaded < total)
+                    $progress.next({ type: i2$1.HttpEventType.UploadProgress, loaded: loaded, total: total });
+            };
+            // Listen end
+            reader.onloadend = function (e) {
+                var body = reader.result;
+                if (typeof body === 'string') {
+                    $progress.next(new FileResponse({ body: body }));
+                    $progress.complete();
+                }
+                else {
+                    console.error("[image-utils] Cannot read file '" + file.name + "' as text");
+                    $progress.error("Cannot read file as text");
+                }
+            };
+            // Listen error
+            reader.onerror = function (event) {
+                console.error('[image-utils] Error while reading file:', event);
+                $progress.error(event);
+            };
+            // Start reading the file
+            reader.readAsDataURL(file);
+            // Resize image, if need
+            if (opts) {
+                return $progress.pipe(operators.mergeMap(function (event) { return __awaiter(_this, void 0, void 0, function () {
+                    var body;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!(event instanceof FileResponse)) return [3 /*break*/, 2];
+                                return [4 /*yield*/, ImagesUtils.resizeBase64(event.body, opts)];
+                            case 1:
+                                body = _a.sent();
+                                return [2 /*return*/, new FileResponse({ body: body })];
+                            case 2: return [2 /*return*/, event];
+                        }
+                    });
+                }); }));
+            }
+            return $progress.asObservable();
         };
-        Base64ImageReader.prototype.readAndResizeFromUrl = function (path, opts) {
+        ImagesUtils.readAndResizeFromUrl = function (fileUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var img, err_1;
-                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (isNilOrBlank(path))
-                                throw new Error('Illegal argument: missing path');
+                            if (isNilOrBlank(fileUrl))
+                                throw new Error('Illegal argument: missing fileUrl');
                             img = document.createElement('img');
                             // Need to avoid CORS error
                             // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
@@ -10599,14 +10652,14 @@
                         case 1:
                             _a.trys.push([1, 3, 4, 5]);
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    img.addEventListener('load', _this.createImageOnLoadResizeFn(resolve, reject, opts), false);
+                                    img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
                                     img.addEventListener('error', reject);
-                                    img.src = path;
+                                    img.src = fileUrl;
                                 })];
                         case 2: return [2 /*return*/, _a.sent()];
                         case 3:
                             err_1 = _a.sent();
-                            throw new Error("Failed to load and resize image {" + path + "}");
+                            throw new Error("Failed to load and resize image {" + fileUrl + "}");
                         case 4:
                             img.remove();
                             return [7 /*endfinally*/];
@@ -10615,15 +10668,12 @@
                 });
             });
         };
-        Base64ImageReader.prototype.readAndResizeFromBlob = function (file, opts) {
+        ImagesUtils.resizeBase64 = function (dataUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var img;
-                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!file)
-                                throw new Error('Illegal argument: missing file');
                             img = document.createElement('img');
                             // Need to avoid CORS error
                             // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
@@ -10632,13 +10682,9 @@
                         case 1:
                             _a.trys.push([1, , 3, 4]);
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    var reader = new FileReader();
-                                    reader.addEventListener('load', function (event) {
-                                        // Resize image
-                                        img.onload = _this.createImageOnLoadResizeFn(resolve, reject, opts);
-                                        img.src = reader.result;
-                                    }, false);
-                                    reader.readAsDataURL(file);
+                                    img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
+                                    img.addEventListener('error', reject);
+                                    img.src = dataUrl;
                                 })];
                         case 2: return [2 /*return*/, _a.sent()];
                         case 3:
@@ -10649,8 +10695,7 @@
                 });
             });
         };
-        /* -- protected methods -- */
-        Base64ImageReader.prototype.createImageOnLoadResizeFn = function (resolve, reject, opts) {
+        ImagesUtils.createImageOnLoadResizeFn = function (resolve, reject, opts) {
             return function (event) {
                 var maxWidth = (opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_WIDTH : (opts && opts.maxWidth || IMAGE_DEFAULTS.MAX_WIDTH));
                 var maxHeight = (opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_HEIGHT : (opts && opts.maxHeight || IMAGE_DEFAULTS.MAX_HEIGHT));
@@ -10716,7 +10761,7 @@
                 }
             };
         };
-        return Base64ImageReader;
+        return ImagesUtils;
     }());
 
     var uuidv4 = uuidv4Imported__namespace;
@@ -10751,28 +10796,28 @@
             var jobsFactories = (sources || []).map(function (source) { return function () { return _this.getImage(source, Object.assign({}, opts)); }; });
             return chainPromises(jobsFactories);
         };
-        FileService.prototype.getImage = function (source, opts) {
+        FileService.prototype.getImage = function (fileUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var responseType, debug, now, lastSlashIndex, fileName, targetFilePath, blob, err_1, dataUrl;
+                var outputType, debug, now, lastSlashIndex, fileName, targetFilePath, blob, err_1, dataUrl;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            responseType = opts && opts.responseType || (this.canUseFileSystem ? 'file' : 'dataUrl');
+                            outputType = opts && opts.outputType || (this.canUseFileSystem ? 'fileUrl' : 'dataUrl');
                             debug = this._debug /*&& (!opts || !opts.fileTransfer)*/;
                             now = debug && Date.now();
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + "...");
-                            lastSlashIndex = source.lastIndexOf('/');
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + "...");
+                            lastSlashIndex = fileUrl.lastIndexOf('/');
                             if (lastSlashIndex === -1)
-                                throw new Error('Invalid URL: ' + source);
-                            fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4();
-                            if (!(responseType === 'file' && this.canUseFileSystem)) return [3 /*break*/, 4];
-                            console.warn("WARN: [file] Fetching image {" + source + "} in local file...");
+                                throw new Error('Invalid URL: ' + fileUrl);
+                            fileName = lastSlashIndex < (fileUrl.length - 1) && fileUrl.substring(lastSlashIndex + 1) || uuidv4();
+                            if (!(outputType === 'fileUrl' && this.canUseFileSystem)) return [3 /*break*/, 4];
+                            console.warn("WARN: [file] Downloading image {" + fileUrl + "} in local filesystem...");
                             targetFilePath = this._imageDirectory + fileName;
                             _a.label = 1;
                         case 1:
                             _a.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, firstNotNilPromise(this.http.get(source, {
+                            return [4 /*yield*/, firstNotNilPromise(this.http.get(fileUrl, {
                                     observe: 'body',
                                     responseType: 'blob',
                                     reportProgress: false
@@ -10784,25 +10829,25 @@
                             //const fileTransfer = (opts && opts.fileTransfer) || this.transfer.create();
                             //await fileTransfer.download(source, targetFilePath);
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + " [OK] in " + (Date.now() - now) + "ms");
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + " [OK] in " + (Date.now() - now) + "ms");
                             return [2 /*return*/, targetFilePath];
                         case 3:
                             err_1 = _a.sent();
-                            console.error("[file] Error while download " + source + ": " + (err_1 && err_1.message || err_1));
+                            console.error("[file] Error while download " + fileUrl + ": " + (err_1 && err_1.message || err_1));
                             // Continue (fallback to data Url)
-                            responseType = 'dataUrl';
+                            outputType = 'dataUrl';
                             return [3 /*break*/, 4];
                         case 4:
-                            if (!(responseType === 'dataUrl')) return [3 /*break*/, 6];
-                            return [4 /*yield*/, new Base64ImageReader().readAndResizeFromUrl(source, opts)];
+                            if (!(outputType === 'dataUrl')) return [3 /*break*/, 6];
+                            return [4 /*yield*/, ImagesUtils.readAndResizeFromUrl(fileUrl, opts)];
                         case 5:
                             dataUrl = _a.sent();
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + " [OK] in " + (Date.now() - now) + "ms");
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + " [OK] in " + (Date.now() - now) + "ms");
                             return [2 /*return*/, dataUrl];
                         case 6: 
                         // Keep original URL
-                        return [2 /*return*/, source];
+                        return [2 /*return*/, fileUrl];
                     }
                 });
             });
@@ -10834,7 +10879,8 @@
                     providedIn: 'root',
                     deps: [
                         i1$5.Platform,
-                        i2$1.HttpClient
+                        i2$1.HttpClient,
+                        ENVIRONMENT
                     ]
                 },] }
     ];
@@ -11421,6 +11467,10 @@
             {
                 host: 'test.sumaris.net',
                 port: 443
+            },
+            {
+                host: 'server.e-is.pro',
+                port: 443
             }
         ],
         defaultAppName: 'SUMARiS',
@@ -17184,7 +17234,7 @@
                             if (!(hasAvatarUrl && this.network.online)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.file.getImage(json.avatar, {
                                     thumbnail: true,
-                                    responseType: 'dataUrl'
+                                    outputType: 'dataUrl'
                                 })
                                     .then(function (dataUrl) {
                                     if (dataUrl && _this._debug)
@@ -18159,30 +18209,6 @@
     ]; };
     var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
-    var UploadFile = /** @class */ (function (_super) {
-        __extends(UploadFile, _super);
-        function UploadFile() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return UploadFile;
-    }(File));
-    var FileResponse = /** @class */ (function () {
-        function FileResponse(init) {
-            this.type = i2$1.HttpEventType.Response;
-            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
-            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
-            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
-        }
-        return FileResponse;
-    }());
-    function isProgressEvent(event) {
-        return event && (event.type === i2$1.HttpEventType.UploadProgress
-            || event.type === i2$1.HttpEventType.DownloadProgress);
-    }
-    function isResponseEvent(event) {
-        return event && event.type === i2$1.HttpEventType.Response;
-    }
-
     var UploadFilePopover = /** @class */ (function () {
         function UploadFilePopover(popoverController, translate, cd) {
             this.popoverController = popoverController;
@@ -19379,6 +19405,253 @@
         { type: Array, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [APP_TESTING_PAGES,] }] }
     ]; };
 
+    var ImageService = /** @class */ (function (_super) {
+        __extends(ImageService, _super);
+        function ImageService(platform, settings, translate, popoverController, imagePicker, photoViewer, mediaCapture, actionSheetController, environment) {
+            var _this = _super.call(this, platform) || this;
+            _this.platform = platform;
+            _this.settings = settings;
+            _this.translate = translate;
+            _this.popoverController = popoverController;
+            _this.imagePicker = imagePicker;
+            _this.photoViewer = photoViewer;
+            _this.mediaCapture = mediaCapture;
+            _this.actionSheetController = actionSheetController;
+            _this.environment = environment;
+            _this.defaultMaxHeight = 1024;
+            _this.defaultMaxWidth = 1024;
+            _this._debug = !environment.production;
+            if (_this._debug)
+                console.debug('[image] Creating service');
+            return _this;
+        }
+        ImageService.prototype.ngOnStart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.info('[image] Starting...');
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ImageService.prototype.show = function (url, title, opts) {
+            if (!url)
+                return;
+            // If desktop: open upload popover
+            if (!this.platform.isCordova()) {
+                console.warn('TODO: implement photo viewer fallback, when no cordova');
+                return;
+            }
+            this.photoViewer.show(url, title, Object.assign({ share: true, closeButton: true }, opts));
+        };
+        ImageService.prototype.add = function (event, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var sheet, role, _a, image;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            // If desktop: open upload popover
+                            if (!this.platform.isCordova()) {
+                                return [2 /*return*/, this.addUploadedImages(event, opts)];
+                            }
+                            return [4 /*yield*/, this.actionSheetController.create({
+                                    backdropDismiss: true,
+                                    buttons: [
+                                        {
+                                            role: 'camera',
+                                            text: this.translate.instant('IMAGE.BTN_CAMERA_SOURCE'),
+                                            icon: 'camera'
+                                        },
+                                        {
+                                            role: 'gallery',
+                                            text: this.translate.instant('IMAGE.BTN_GALLERY_SOURCE'),
+                                            icon: 'images'
+                                        }
+                                    ]
+                                })];
+                        case 1:
+                            sheet = _b.sent();
+                            return [4 /*yield*/, sheet.present()];
+                        case 2:
+                            _b.sent();
+                            return [4 /*yield*/, sheet.onDidDismiss()];
+                        case 3:
+                            role = (_b.sent()).role;
+                            if (!role)
+                                return [2 /*return*/]; // User cancelled
+                            _a = role;
+                            switch (_a) {
+                                case 'camera': return [3 /*break*/, 4];
+                                case 'gallery': return [3 /*break*/, 6];
+                            }
+                            return [3 /*break*/, 8];
+                        case 4: return [4 /*yield*/, this.addImageFromCamera()];
+                        case 5:
+                            image = _b.sent();
+                            return [2 /*return*/, image ? [image] : undefined];
+                        case 6: return [4 /*yield*/, this.addImagesFromGallery()];
+                        case 7: return [2 /*return*/, _b.sent()];
+                        case 8: return [2 /*return*/]; // User cancelled (e.g. backdrop click)
+                    }
+                });
+            });
+        };
+        ImageService.prototype.addUploadedImages = function (event, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var data;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, FilesUtils.showUploadPopover(this.popoverController, event, {
+                                uniqueFile: true,
+                                fileExtension: '.png, .jpg',
+                                instantUpload: true,
+                                uploadFn: function (file) { return ImagesUtils.readAsDataURL(file, Object.assign({ maxWidth: _this.defaultMaxWidth, maxHeight: _this.defaultMaxHeight }, opts)); }
+                            })];
+                        case 1:
+                            data = (_a.sent()).data;
+                            if (isEmptyArray(data))
+                                return [2 /*return*/]; // No files uploaded: skip
+                            return [2 /*return*/, (data || [])
+                                    .map(function (file) { return file.response.body; }) // Get response body = data as base64
+                                    .map(function (dataUrl) { return ({ dataUrl: dataUrl }); })];
+                    }
+                });
+            });
+        };
+        ImageService.prototype.addImageFromCamera = function (opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var outputType, file, _a, dataUrl, err_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            console.info('[image-service] Capturing new image from camera...');
+                            outputType = toNumber(opts === null || opts === void 0 ? void 0 : opts.outputType, ngx$9.OutputType.DATA_URL);
+                            return [4 /*yield*/, this.mediaCapture.captureImage({
+                                    limit: 1
+                                }).then(function (data) {
+                                    return data && data[0];
+                                }, function (err) {
+                                    console.error("[image-service] Failed to capture new image - Error code: " + ((err === null || err === void 0 ? void 0 : err.code) || 'unknown'));
+                                    return undefined;
+                                })];
+                        case 1:
+                            file = _b.sent();
+                            if (!(file === null || file === void 0 ? void 0 : file.fullPath))
+                                return [2 /*return*/]; // Skip
+                            console.info('[image-service] new picture path:' + file.fullPath);
+                            _b.label = 2;
+                        case 2:
+                            _b.trys.push([2, 8, , 9]);
+                            _a = outputType;
+                            switch (_a) {
+                                case ngx$9.OutputType.FILE_URL: return [3 /*break*/, 3];
+                                case ngx$9.OutputType.DATA_URL: return [3 /*break*/, 4];
+                            }
+                            return [3 /*break*/, 6];
+                        case 3: return [2 /*return*/, { url: file.fullPath }];
+                        case 4:
+                            console.info("[image-service] Converting file " + file.fullPath + " into dataUrl...");
+                            return [4 /*yield*/, ImagesUtils.readAndResizeFromUrl(file.fullPath, {
+                                    maxWidth: this.defaultMaxWidth,
+                                    maxHeight: this.defaultMaxHeight
+                                })];
+                        case 5:
+                            dataUrl = _b.sent();
+                            return [2 /*return*/, { dataUrl: dataUrl }];
+                        case 6: throw new Error("Unknown outputType: " + outputType);
+                        case 7: return [3 /*break*/, 9];
+                        case 8:
+                            err_1 = _b.sent();
+                            console.error('[image-service] Failed while processing image', err_1);
+                            return [2 /*return*/, undefined];
+                        case 9: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ImageService.prototype.addImagesFromGallery = function (opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var outputType, canReadPictures, err_2, data, items, err_3;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            console.debug('[image-service] Adding images from gallery...');
+                            outputType = toNumber(opts === null || opts === void 0 ? void 0 : opts.outputType, ngx$9.OutputType.DATA_URL);
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 6, , 7]);
+                            return [4 /*yield*/, this.imagePicker.hasReadPermission()];
+                        case 2:
+                            canReadPictures = _a.sent();
+                            if (!!canReadPictures) return [3 /*break*/, 5];
+                            return [4 /*yield*/, this.imagePicker.requestReadPermission()];
+                        case 3:
+                            _a.sent();
+                            return [4 /*yield*/, this.imagePicker.hasReadPermission()];
+                        case 4:
+                            canReadPictures = _a.sent();
+                            if (!canReadPictures) {
+                                console.error('No read permission, after calling requestReadPermission() without error!! skip');
+                                return [2 /*return*/];
+                            }
+                            _a.label = 5;
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            err_2 = _a.sent();
+                            console.error(err_2);
+                            return [2 /*return*/]; // Cancelled
+                        case 7:
+                            _a.trys.push([7, 9, , 10]);
+                            return [4 /*yield*/, this.imagePicker.getPictures({
+                                    maximumImagesCount: 1,
+                                    //height: this._maxImageHeight
+                                    allow_video: false,
+                                    outputType: outputType
+                                })];
+                        case 8:
+                            data = _a.sent();
+                            items = !data || Array.isArray(data) ? data : [data];
+                            if (isEmptyArray(items))
+                                return [2 /*return*/]; // No images selected: skip
+                            console.info("[image-service] User select " + items.length + " image(s)");
+                            console.debug("[image-service] Selected image: " + JSON.stringify(items));
+                            // Convert to entity
+                            switch (outputType) {
+                                case ngx$9.OutputType.FILE_URL:
+                                    return [2 /*return*/, items.map(function (url) { return ({ url: url }); })];
+                                case ngx$9.OutputType.DATA_URL:
+                                    return [2 /*return*/, items.map(function (dataUrl) { return ({ dataUrl: dataUrl }); })];
+                                default:
+                                    throw new Error("Unknown outputType: " + outputType);
+                            }
+                            return [3 /*break*/, 10];
+                        case 9:
+                            err_3 = _a.sent();
+                            console.error('[image-service] Failed to get image from gallery', err_3);
+                            return [2 /*return*/, undefined];
+                        case 10: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return ImageService;
+    }(StartableService));
+    ImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(i0.ɵɵinject(PlatformService), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(i1$5.PopoverController), i0.ɵɵinject(i5.ImagePicker), i0.ɵɵinject(i6$1.PhotoViewer), i0.ɵɵinject(i7.MediaCapture), i0.ɵɵinject(i1$5.ActionSheetController), i0.ɵɵinject(ENVIRONMENT)); }, token: ImageService, providedIn: "root" });
+    ImageService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root', deps: [ENVIRONMENT] },] }
+    ];
+    ImageService.ctorParameters = function () { return [
+        { type: PlatformService },
+        { type: LocalSettingsService },
+        { type: i1$2.TranslateService },
+        { type: i1$5.PopoverController },
+        { type: ngx$9.ImagePicker },
+        { type: ngx$a.PhotoViewer },
+        { type: ngx$b.MediaCapture },
+        { type: i1$5.ActionSheetController },
+        { type: Environment, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
+    ]; };
+
     function scrollFactory(overlay) {
         return function () { return overlay.scrollStrategies.close(); };
     }
@@ -19394,6 +19667,7 @@
                     ProgressBarService,
                     AudioProvider,
                     FileService,
+                    ImageService,
                     TranslateContextService,
                     // Export Pipes as providers
                     DateFormatPipe,
@@ -19945,592 +20219,247 @@
         return FormFieldValuesHolder;
     }());
 
-    // eslint-disable-next-line @angular-eslint/directive-class-suffix
-    var AppForm = /** @class */ (function () {
-        function AppForm(injector, form) {
-            var _this = this;
+    var AppImageGalleryComponent = /** @class */ (function () {
+        function AppImageGalleryComponent(image, platform, cd, environment) {
+            this.image = image;
+            this.platform = platform;
+            this.cd = cd;
+            this._onDestroy = new rxjs.Subject();
             this._subscription = new rxjs.Subscription();
-            this._enable = false;
-            this.i18nFieldPrefix = null;
-            this.readySubject = new rxjs.BehaviorSubject(false);
-            this.loadingSubject = new rxjs.BehaviorSubject(true);
-            this.errorSubject = new rxjs.BehaviorSubject(undefined);
-            this.debug = false;
-            this.onCancel = new i0.EventEmitter();
-            this.onSubmit = new i0.EventEmitter();
-            if (form)
-                this.setForm(form);
-            this.translate = injector.get(i1$2.TranslateService);
-            this.settings = injector.get(LocalSettingsService);
-            this.errorTranslator = injector.get(FormErrorTranslator);
-            this.autocompleteHelper = new MatAutocompleteConfigHolder(this.settings && {
-                getUserAttributes: function (a, b) { return _this.settings.getFieldDisplayAttributes(a, b); }
-            });
-            this.autocompleteFields = this.autocompleteHelper.fields;
+            this.showToolbar = true;
+            this.colSize = 4;
+            this.autoLoad = true;
+            this.viewChange = new rxjs.BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
+            // DEV log
+            this.debug = environment && !environment.production;
         }
-        Object.defineProperty(AppForm.prototype, "_loading", {
-            /**
-             *  @deprecated
-             */
-            get: function () {
-                return this.loadingSubject.value;
-            },
-            /**
-             *  @deprecated
-             */
-            set: function (value) {
-                this.loadingSubject.next(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "_$ready", {
-            /**
-             *  @deprecated
-             */
-            get: function () {
-                return this.readySubject;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "_$loading", {
-            /**
-             *  @deprecated
-             */
-            get: function () {
-                return this.loadingSubject;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "error", {
-            get: function () {
-                return this.errorSubject.value;
-            },
-            set: function (error) {
-                this.setError(error);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "loading", {
-            get: function () {
-                return this.loadingSubject.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "loaded", {
-            get: function () {
-                return !this.loadingSubject.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "value", {
+        Object.defineProperty(AppImageGalleryComponent.prototype, "dataSource", {
             get: function () {
-                return this.form.value;
-            },
-            set: function (data) {
-                this.setValue(data);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "dirty", {
-            get: function () {
-                var _a;
-                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "invalid", {
-            get: function () {
-                return !this.form || this.form.invalid;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "pending", {
-            get: function () {
-                return !this.form || (this.form.dirty && this.form.pending);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "valid", {
-            get: function () {
-                var _a;
-                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
+                return this._dataSource;
             },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "empty", {
-            get: function () {
-                return !this.form || (!this.form.dirty && !this.form.touched);
+            set: function (dataSource) {
+                if (this._dataSource !== dataSource) {
+                    this._switchDataSource(dataSource);
+                }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AppForm.prototype, "untouched", {
+        Object.defineProperty(AppImageGalleryComponent.prototype, "enabled", {
             get: function () {
-                return !this.form || this.form.untouched;
+                return !this.disabled;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AppForm.prototype, "enabled", {
+        Object.defineProperty(AppImageGalleryComponent.prototype, "rows", {
             get: function () {
-                return this._enable;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AppForm.prototype, "disabled", {
-            get: function () {
-                return !this._enable;
+                return this._data;
             },
             enumerable: false,
             configurable: true
         });
-        AppForm.prototype.disable = function (opts) {
-            var _a;
-            (_a = this.form) === null || _a === void 0 ? void 0 : _a.disable(opts);
-            if (this._enable) {
-                this._enable = false;
-                if (!opts || opts.emitEvent !== true)
-                    this.markForCheck();
-            }
+        AppImageGalleryComponent.prototype.ngOnInit = function () {
+            this.mobile = toBoolean(this.mobile, isMobile(window));
+            this.readOnly = toBoolean(this.readOnly, false);
         };
-        AppForm.prototype.enable = function (opts) {
-            var _a;
-            (_a = this.form) === null || _a === void 0 ? void 0 : _a.enable(opts);
-            if (!this._enable) {
-                this._enable = true;
-                if (!opts || opts.emitEvent !== true)
-                    this.markForCheck();
+        AppImageGalleryComponent.prototype.ngAfterContentChecked = function () {
+            if (this.dataSource && !this._renderChangeSubscription) {
+                this._observeRenderChanges();
             }
         };
-        Object.defineProperty(AppForm.prototype, "form", {
-            get: function () {
-                return this._form;
-            },
-            set: function (value) {
-                this.setForm(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AppForm.prototype.ngOnInit = function () {
-            this._enable ? this.enable() : this.disable();
-            this.errorTranslatorOptions = this.errorTranslatorOptions || {
-                controlPathTranslator: this
-            };
-        };
-        AppForm.prototype.ngOnDestroy = function () {
+        AppImageGalleryComponent.prototype.ngOnDestroy = function () {
+            this._onDestroy.next();
+            this._onDestroy.complete();
             this._subscription.unsubscribe();
-            this.readySubject.unsubscribe();
-            this.loadingSubject.unsubscribe();
-            this.errorSubject.unsubscribe();
-            this.onCancel.unsubscribe();
-            this.onSubmit.unsubscribe();
+            if (collections.isDataSource(this.dataSource)) {
+                this.dataSource.disconnect(this);
+            }
         };
-        AppForm.prototype.cancel = function () {
+        AppImageGalleryComponent.prototype.show = function (event, image) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    this.onCancel.emit();
+                return __generator(this, function (_a) {
+                    if (!image || (event === null || event === void 0 ? void 0 : event.defaultPrevented))
+                        return [2 /*return*/];
+                    this.image.show(image.url || image.dataUrl, image.title || '', { share: true, closeButton: true });
                     return [2 /*return*/];
                 });
             });
         };
-        /**
-         *
-         * @param event
-         * @param opts allow to skip validation check, using {checkValid: false}
-         */
-        AppForm.prototype.doSubmit = function (event, opts) {
+        AppImageGalleryComponent.prototype.add = function (event) {
             return __awaiter(this, void 0, void 0, function () {
+                var images, images_1, images_1_1, image, row, added;
+                var e_1, _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
-                        case 0:
-                            if (!this._form) {
-                                this.markAllAsTouched({ emitEvent: true });
-                                return [2 /*return*/];
-                            }
-                            if (!((!opts || opts.checkValid !== false) && !this._form.valid)) return [3 /*break*/, 2];
-                            // Wait validation end
-                            return [4 /*yield*/, AppFormUtils.waitWhilePending(this._form)];
+                        case 0: return [4 /*yield*/, this.image.add(event)];
                         case 1:
-                            // Wait validation end
-                            _b.sent();
-                            // Form is invalid: exit (+ log if debug)
-                            if (this._form.invalid) {
-                                this.markAllAsTouched({ emitEvent: true });
-                                if (this.debug)
-                                    AppFormUtils.logFormErrors(this._form);
+                            images = _b.sent();
+                            if (isEmptyArray(images))
                                 return [2 /*return*/];
+                            console.info("[image-gallery] Adding new " + images.length + " image(s)", images);
+                            try {
+                                for (images_1 = __values(images), images_1_1 = images_1.next(); !images_1_1.done; images_1_1 = images_1.next()) {
+                                    image = images_1_1.value;
+                                    this._dataSource.createNew(0);
+                                    row = this._dataSource.getRow(-1);
+                                    row.currentData = image;
+                                    added = row.confirmEditCreate();
+                                    if (!added) {
+                                        console.warn('Cannot confirmEditCreate new image!');
+                                        break;
+                                    }
+                                }
+                            }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                            finally {
+                                try {
+                                    if (images_1_1 && !images_1_1.done && (_a = images_1.return)) _a.call(images_1);
+                                }
+                                finally { if (e_1) throw e_1.error; }
                             }
-                            _b.label = 2;
-                        case 2:
-                            // Emit event
-                            this.onSubmit.emit(event);
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        AppForm.prototype.setForm = function (form) {
-            var _this = this;
-            if (this._form !== form) {
-                this._form = form;
-                this._subscription.add(this._form.statusChanges.subscribe(function (status) { return _this.markForCheck(); }));
-            }
-        };
-        AppForm.prototype.setValue = function (data, opts) {
-            if (!data) {
-                console.warn('[form] Trying to set an empty value to form. Skipping');
-                return;
-            }
-            // DEBUG
-            //if (this.debug) console.debug('[form] Updating form (using entity)', data);
-            // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
-            AppFormUtils.copyEntity2Form(data, this.form, Object.assign({ emitEvent: false, onlySelf: true }, opts));
-            if (!opts || opts.emitEvent !== true) {
-                this.markForCheck();
-            }
+        AppImageGalleryComponent.prototype.remove = function (event, row) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
+                        return [2 /*return*/];
+                    event === null || event === void 0 ? void 0 : event.preventDefault();
+                    if (row.id === -1) {
+                        console.info('[image-gallery] Removing new image');
+                        row.cancelOrDelete();
+                    }
+                    else {
+                        console.info('[image-gallery] Removing image (at #' + row.id + ')');
+                        row.delete();
+                    }
+                    return [2 /*return*/];
+                });
+            });
         };
-        AppForm.prototype.reset = function (data, opts) {
-            if (data) {
-                if (this.debug)
-                    console.debug('[form] Resetting form (using entity)', data);
-                // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
-                var json = AppFormUtils.getFormValueFromEntity(data, this.form);
-                this.form.reset(json, { emitEvent: false, onlySelf: true });
+        AppImageGalleryComponent.prototype.toggleViewMode = function (event) {
+            console.log(event);
+            if (this.colSize === 12) {
+                this.colSize = 4;
             }
             else {
-                this.form.reset(null, { emitEvent: false, onlySelf: true });
+                this.colSize = 12;
             }
-            if (!opts || opts.emitEvent !== true)
-                this.markForCheck();
-        };
-        AppForm.prototype.markAsPristine = function (opts) {
-            this.form.markAsPristine(opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        AppForm.prototype.markAsUntouched = function (opts) {
-            this.form.markAsUntouched(opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        /**
-         * @deprecated prefer to use markAllAsTouched()
-         * @param opts
-         */
-        AppForm.prototype.markAsTouched = function (opts) {
-            // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
-            console.warn('TODO: Replace this call by markAllAsTouched() - because of changes in ngx-components >= 0.16.0');
-            AppFormUtils.markAsTouched(this.form, opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        AppForm.prototype.markAllAsTouched = function (opts) {
-            // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
-            AppFormUtils.markAllAsTouched(this.form, opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        AppForm.prototype.markAsDirty = function (opts) {
-            this.form.markAsDirty(opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        AppForm.prototype.markAsLoading = function (opts) {
-            this.setLoading(true, opts);
-        };
-        AppForm.prototype.markAsLoaded = function (opts) {
-            this.setLoading(false, opts);
+            this.cd.markForCheck();
         };
-        AppForm.prototype.markAsReady = function (opts) {
-            if (this.readySubject.value !== true) {
-                this.readySubject.next(true);
-                // If subclasses implements OnReady
-                if (typeof this['ngOnReady'] === 'function') {
-                    this.ngOnReady();
-                }
+        AppImageGalleryComponent.prototype._switchDataSource = function (dataSource) {
+            if (collections.isDataSource(this._dataSource)) {
+                this._dataSource.disconnect(this);
             }
+            this._dataSource = dataSource;
         };
-        /**
-         * Wait form is ready
-         * @param opts
-         */
-        AppForm.prototype.ready = function (opts) {
-            if (this.readySubject.value)
-                return Promise.resolve();
-            return waitForTrue(this.readySubject, opts);
-        };
-        /**
-         * Wait form is not busy (=loaded)
-         * @param opts
-         */
-        AppForm.prototype.waitIdle = function (opts) {
-            if (!this.loadingSubject.value)
-                return Promise.resolve();
-            return waitForFalse(this.loadingSubject, opts);
-        };
-        AppForm.prototype.updateValueAndValidity = function (opts) {
-            AppFormUtils.updateValueAndValidity(this.form, opts);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        };
-        AppForm.prototype.translateControlPath = function (path) {
-            var _a;
-            var i18nFieldName = this.getI18nFieldName(path);
-            return ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.instant(i18nFieldName)) || i18nFieldName;
-        };
-        /* -- protected methods -- */
-        AppForm.prototype.getFormError = function (form, opts) {
-            if (!form || !this.errorTranslator)
-                return undefined;
-            return this.errorTranslator.translateFormErrors(this.form, Object.assign({ controlPathTranslator: this }, opts));
-        };
-        AppForm.prototype.getI18nFieldName = function (path) {
-            return (this.i18nFieldPrefix || '') + changeCaseToUnderscore(path).toUpperCase();
-        };
-        AppForm.prototype.registerSubscription = function (sub) {
-            return this._subscription.add(sub);
-        };
-        AppForm.prototype.unregisterSubscription = function (sub) {
-            this._subscription.remove(sub);
-        };
-        AppForm.prototype.registerAutocompleteField = function (fieldName, opts) {
-            return this.autocompleteHelper.add(fieldName, opts);
-        };
-        AppForm.prototype.setError = function (value, opts) {
-            if (this.errorSubject.value !== value) {
-                this.errorSubject.next(value);
-                if (!opts || opts.emitEvent !== false) {
-                    this.markForCheck();
-                }
+        AppImageGalleryComponent.prototype._observeRenderChanges = function () {
+            var _this = this;
+            // If no data source has been set, there is nothing to observe for changes.
+            if (!this.dataSource) {
+                return;
             }
-        };
-        AppForm.prototype.markForCheck = function () {
-            // Should be overwritten by subclasses
-            console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
-        };
-        /* -- private function -- */
-        AppForm.prototype.setLoading = function (value, opts) {
-            if (this.loadingSubject.value !== value) {
-                this.loadingSubject.next(value);
-                if (!opts || opts.emitEvent !== false) {
-                    this.markForCheck();
-                }
+            var dataStream;
+            if (collections.isDataSource(this.dataSource)) {
+                dataStream = this.dataSource.connect(this);
             }
+            if (dataStream === undefined) {
+                throw this.getTableUnknownDataSourceError();
+            }
+            this._renderChangeSubscription = dataStream.pipe(operators.takeUntil(this._onDestroy))
+                .subscribe(function (data) {
+                _this._data = data || [];
+                _this.cd.markForCheck();
+            });
         };
-        return AppForm;
+        AppImageGalleryComponent.prototype.getTableUnknownDataSourceError = function () {
+            return Error("Provided data source did not match an array, Observable, or DataSource");
+        };
+        return AppImageGalleryComponent;
     }());
-    AppForm.decorators = [
-        { type: i0.Directive }
+    AppImageGalleryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-image-gallery',
+                    template: "\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <!-- Add -->\n  <button mat-icon-button\n          *ngIf=\"!readOnly && !mobile && enabled\"\n          [title]=\"'COMMON.BTN_ADD'|translate\"\n          (click)=\"add($event)\">\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"colSize\">\n      <ion-segment-button value=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button value=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<ion-grid>\n  <ion-row>\n    <ion-col *ngFor=\"let row of rows\" [size]=\"colSize\">\n      <ion-card *ngIf=\"row|propertyGet:'currentData'; let image\"\n                (click)=\"show($event, image)\"\n                tappable\n                @fadeInAnimation>\n\n        <!-- debug -->\n        <ion-card-header class=\"ion-no-padding\" color=\"light\">\n          <mat-toolbar>\n            <ion-label class=\"ion-padding-start\" *ngIf=\"image.title; else addTitleButton\">{{image.title}}</ion-label>\n            <ng-template #addTitleButton>\n              <!--            <a class=\"button-text\"-->\n              <!--               *ngIf=\"showImageTitle && !readOnly\"-->\n              <!--               (click)=\"editTitle($event)\" translate>IMAGE.GALLERY.BTN_ADD_TITLE</a>-->\n            </ng-template>\n\n            <div class=\"toolbar-spacer\"></div>\n\n            <button mat-icon-button *ngIf=\"!readOnly\"\n                    [title]=\"'COMMON.BTN_DELETE'|translate\"\n                    [disabled]=\"disabled\"\n                    (click)=\"remove($event, row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </mat-toolbar>\n\n        </ion-card-header>\n\n\n        <img [src]=\"image.url||image.dataUrl\">\n\n        <ion-card-content *ngIf=\"debug\">\n          <ion-text >{{image.url}}</ion-text>\n        </ion-card-content>\n      </ion-card>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"showToolbar && mobile\"\n         [class.cdk-visually-hidden]=\"disabled\"\n         @fadeInOutAnimation>\n\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px;\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n\n\n\n",
+                    animations: [fadeInAnimation, fadeInOutAnimation],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".mat-toolbar-single-row,mat-toolbar{padding:0;height:42px}"]
+                },] }
     ];
-    AppForm.ctorParameters = function () { return [
-        { type: i0.Injector },
-        { type: i1.FormGroup }
+    AppImageGalleryComponent.ctorParameters = function () { return [
+        { type: ImageService },
+        { type: i1$5.Platform },
+        { type: i0.ChangeDetectorRef },
+        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
-    AppForm.propDecorators = {
+    AppImageGalleryComponent.propDecorators = {
         debug: [{ type: i0.Input }],
-        tabindex: [{ type: i0.Input }],
-        errorTranslatorOptions: [{ type: i0.Input }],
-        form: [{ type: i0.Input }],
-        onCancel: [{ type: i0.Output }],
-        onSubmit: [{ type: i0.Output }]
+        readOnly: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        showToolbar: [{ type: i0.Input }],
+        mobile: [{ type: i0.Input }],
+        colSize: [{ type: i0.Input }],
+        autoLoad: [{ type: i0.Input }],
+        dataSource: [{ type: i0.Input }]
     };
 
-    var TextForm = /** @class */ (function (_super) {
-        __extends(TextForm, _super);
-        function TextForm(injector, cd, formBuilder) {
-            var _this = _super.call(this, injector) || this;
-            _this.injector = injector;
-            _this.cd = cd;
-            _this.formBuilder = formBuilder;
-            _this.showError = true;
-            _this.multiline = true;
-            _this.autoHeight = false;
-            _this.maxLength = 2000;
-            _this.autofocus = false;
-            _this.textAreaChanges = new i0.EventEmitter();
-            return _this;
+    var ImageGalleryModule = /** @class */ (function () {
+        function ImageGalleryModule() {
         }
-        TextForm.prototype.ngOnInit = function () {
-            var form = this.formBuilder.group({
-                text: [null, isNotNil(this.maxLength)
-                        ? i1.Validators.maxLength(this.maxLength)
-                        : undefined
-                ]
-            });
-            this.control = form.get('text');
-            this.setForm(form);
-            _super.prototype.ngOnInit.call(this);
-        };
-        TextForm.prototype.textAreaChanged = function (event) {
-            this.textAreaChanges.emit(this.control.value);
-        };
-        TextForm.prototype.containerResize = function () {
-            var _a;
-            (_a = this.autosizeDirective) === null || _a === void 0 ? void 0 : _a.resizeToFitContent(true);
-        };
-        TextForm.prototype.focusInput = function () {
-            if (this.textArea)
-                focusInput(this.textArea);
-            if (this.textInput)
-                focusInput(this.textInput);
-        };
-        TextForm.prototype.markForCheck = function () {
-            this.cd.markForCheck();
-        };
-        return TextForm;
-    }(AppForm));
-    TextForm.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-text-form',
-                    template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n",
-                    styles: ["textarea.fixed-height{height:11.5em}"]
+        return ImageGalleryModule;
+    }());
+    ImageGalleryModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$5.IonicModule,
+                        SharedMaterialModule,
+                        SharedPipesModule,
+                        i1$2.TranslateModule.forChild(),
+                    ],
+                    declarations: [
+                        // Components
+                        AppImageGalleryComponent
+                    ],
+                    exports: [
+                        // Components
+                        AppImageGalleryComponent
+                    ]
                 },] }
     ];
-    TextForm.ctorParameters = function () { return [
-        { type: i0.Injector },
-        { type: i0.ChangeDetectorRef },
-        { type: i1.FormBuilder }
-    ]; };
-    TextForm.propDecorators = {
-        showError: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        multiline: [{ type: i0.Input }],
-        autoHeight: [{ type: i0.Input }],
-        maxLength: [{ type: i0.Input }],
-        autofocus: [{ type: i0.Input }],
-        textAreaChanges: [{ type: i0.Output }],
-        textArea: [{ type: i0.ViewChild, args: ['textArea',] }],
-        textInput: [{ type: i0.ViewChild, args: ['textInput',] }],
-        autosizeDirective: [{ type: i0.ViewChild, args: [textField.CdkTextareaAutosize,] }]
-    };
 
-    var TextPopover = /** @class */ (function () {
-        function TextPopover(popoverController, translate) {
-            this.popoverController = popoverController;
-            this.translate = translate;
-            this.placeholder = '';
-            this.editing = true;
-            this.multiline = true;
-            this.maxLength = 2000;
-            this.autofocus = false;
-            this.subscription = new rxjs.Subscription();
+    var ImageModule = /** @class */ (function () {
+        function ImageModule() {
         }
-        Object.defineProperty(TextPopover.prototype, "disabled", {
-            get: function () {
-                return this.form.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TextPopover.prototype, "enabled", {
-            get: function () {
-                return this.form.enabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TextPopover.prototype, "valid", {
-            get: function () {
-                var _a;
-                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TextPopover.prototype, "value", {
-            get: function () {
-                var _a;
-                return (_a = this.form) === null || _a === void 0 ? void 0 : _a.value.text;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TextPopover.prototype.ngOnInit = function () {
-            this.enable();
-        };
-        TextPopover.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.form.setValue({ text: _this.text }); }, 0);
-        };
-        TextPopover.prototype.onValidate = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var value, err_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, waitWhilePending(this.form)];
-                        case 1:
-                            _b.sent();
-                            if (!this.valid) {
-                                logFormErrors(this.form.control);
-                                return [2 /*return*/];
-                            }
-                            _b.label = 2;
-                        case 2:
-                            _b.trys.push([2, 4, , 5]);
-                            value = this.value;
-                            this.disable();
-                            return [4 /*yield*/, this.popoverController.dismiss(value)];
-                        case 3:
-                            _b.sent();
-                            this.form.error = null;
-                            return [3 /*break*/, 5];
-                        case 4:
-                            err_1 = _b.sent();
-                            this.form.error = (err_1 && err_1.message) || err_1;
-                            this.enable();
-                            return [3 /*break*/, 5];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        TextPopover.prototype.disable = function () {
-            this.form.disable();
-        };
-        TextPopover.prototype.enable = function () {
-            if (this.editing)
-                this.form.enable();
-        };
-        TextPopover.prototype.cancel = function () {
-            this.popoverController.dismiss();
-        };
-        TextPopover.prototype.ngOnDestroy = function () {
-            this.subscription.unsubscribe();
+        ImageModule.forRoot = function () {
+            console.debug('[image] Creating module (root)');
+            return {
+                ngModule: ImageModule,
+                providers: [
+                    ngx$9.ImagePicker,
+                    ngx$b.MediaCapture,
+                    ngx$a.PhotoViewer
+                ]
+            };
         };
-        return TextPopover;
+        return ImageModule;
     }());
-    TextPopover.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-text-popover',
-                    template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n"
+    ImageModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        ImageGalleryModule
+                    ],
+                    exports: [
+                        // Sub module
+                        ImageGalleryModule
+                    ]
                 },] }
     ];
-    TextPopover.ctorParameters = function () { return [
-        { type: i1$5.PopoverController },
-        { type: i1$2.TranslateService }
-    ]; };
-    TextPopover.propDecorators = {
-        form: [{ type: i0.ViewChild, args: ['form', { static: true },] }],
-        text: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        editing: [{ type: i0.Input }],
-        multiline: [{ type: i0.Input }],
-        maxLength: [{ type: i0.Input }],
-        autofocus: [{ type: i0.Input }]
-    };
 
     var ResizableDirective = /** @class */ (function () {
         function ResizableDirective(document, elementRef) {
@@ -21540,6 +21469,409 @@
         form: [{ type: i0.ViewChild, args: ['form', { static: true },] }]
     };
 
+    // eslint-disable-next-line @angular-eslint/directive-class-suffix
+    var AppForm = /** @class */ (function () {
+        function AppForm(injector, form) {
+            var _this = this;
+            this._subscription = new rxjs.Subscription();
+            this._enable = false;
+            this.i18nFieldPrefix = null;
+            this.readySubject = new rxjs.BehaviorSubject(false);
+            this.loadingSubject = new rxjs.BehaviorSubject(true);
+            this.errorSubject = new rxjs.BehaviorSubject(undefined);
+            this.debug = false;
+            this.onCancel = new i0.EventEmitter();
+            this.onSubmit = new i0.EventEmitter();
+            if (form)
+                this.setForm(form);
+            this.translate = injector.get(i1$2.TranslateService);
+            this.settings = injector.get(LocalSettingsService);
+            this.errorTranslator = injector.get(FormErrorTranslator);
+            this.autocompleteHelper = new MatAutocompleteConfigHolder(this.settings && {
+                getUserAttributes: function (a, b) { return _this.settings.getFieldDisplayAttributes(a, b); }
+            });
+            this.autocompleteFields = this.autocompleteHelper.fields;
+        }
+        Object.defineProperty(AppForm.prototype, "_loading", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.loadingSubject.value;
+            },
+            /**
+             *  @deprecated
+             */
+            set: function (value) {
+                this.loadingSubject.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "_$ready", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.readySubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "_$loading", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.loadingSubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "error", {
+            get: function () {
+                return this.errorSubject.value;
+            },
+            set: function (error) {
+                this.setError(error);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "loading", {
+            get: function () {
+                return this.loadingSubject.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "loaded", {
+            get: function () {
+                return !this.loadingSubject.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "value", {
+            get: function () {
+                return this.form.value;
+            },
+            set: function (data) {
+                this.setValue(data);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "dirty", {
+            get: function () {
+                var _a;
+                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "invalid", {
+            get: function () {
+                return !this.form || this.form.invalid;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "pending", {
+            get: function () {
+                return !this.form || (this.form.dirty && this.form.pending);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "valid", {
+            get: function () {
+                var _a;
+                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "empty", {
+            get: function () {
+                return !this.form || (!this.form.dirty && !this.form.touched);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "untouched", {
+            get: function () {
+                return !this.form || this.form.untouched;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "enabled", {
+            get: function () {
+                return this._enable;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "disabled", {
+            get: function () {
+                return !this._enable;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AppForm.prototype.disable = function (opts) {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.disable(opts);
+            if (this._enable) {
+                this._enable = false;
+                if (!opts || opts.emitEvent !== true)
+                    this.markForCheck();
+            }
+        };
+        AppForm.prototype.enable = function (opts) {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.enable(opts);
+            if (!this._enable) {
+                this._enable = true;
+                if (!opts || opts.emitEvent !== true)
+                    this.markForCheck();
+            }
+        };
+        Object.defineProperty(AppForm.prototype, "form", {
+            get: function () {
+                return this._form;
+            },
+            set: function (value) {
+                this.setForm(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AppForm.prototype.ngOnInit = function () {
+            this._enable ? this.enable() : this.disable();
+            this.errorTranslatorOptions = this.errorTranslatorOptions || {
+                controlPathTranslator: this
+            };
+        };
+        AppForm.prototype.ngOnDestroy = function () {
+            this._subscription.unsubscribe();
+            this.readySubject.unsubscribe();
+            this.loadingSubject.unsubscribe();
+            this.errorSubject.unsubscribe();
+            this.onCancel.unsubscribe();
+            this.onSubmit.unsubscribe();
+        };
+        AppForm.prototype.cancel = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this.onCancel.emit();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         *
+         * @param event
+         * @param opts allow to skip validation check, using {checkValid: false}
+         */
+        AppForm.prototype.doSubmit = function (event, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this._form) {
+                                this.markAllAsTouched({ emitEvent: true });
+                                return [2 /*return*/];
+                            }
+                            if (!((!opts || opts.checkValid !== false) && !this._form.valid)) return [3 /*break*/, 2];
+                            // Wait validation end
+                            return [4 /*yield*/, AppFormUtils.waitWhilePending(this._form)];
+                        case 1:
+                            // Wait validation end
+                            _b.sent();
+                            // Form is invalid: exit (+ log if debug)
+                            if (this._form.invalid) {
+                                this.markAllAsTouched({ emitEvent: true });
+                                if (this.debug)
+                                    AppFormUtils.logFormErrors(this._form);
+                                return [2 /*return*/];
+                            }
+                            _b.label = 2;
+                        case 2:
+                            // Emit event
+                            this.onSubmit.emit(event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AppForm.prototype.setForm = function (form) {
+            var _this = this;
+            if (this._form !== form) {
+                this._form = form;
+                this._subscription.add(this._form.statusChanges.subscribe(function (status) { return _this.markForCheck(); }));
+            }
+        };
+        AppForm.prototype.setValue = function (data, opts) {
+            if (!data) {
+                console.warn('[form] Trying to set an empty value to form. Skipping');
+                return;
+            }
+            // DEBUG
+            //if (this.debug) console.debug('[form] Updating form (using entity)', data);
+            // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
+            AppFormUtils.copyEntity2Form(data, this.form, Object.assign({ emitEvent: false, onlySelf: true }, opts));
+            if (!opts || opts.emitEvent !== true) {
+                this.markForCheck();
+            }
+        };
+        AppForm.prototype.reset = function (data, opts) {
+            if (data) {
+                if (this.debug)
+                    console.debug('[form] Resetting form (using entity)', data);
+                // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
+                var json = AppFormUtils.getFormValueFromEntity(data, this.form);
+                this.form.reset(json, { emitEvent: false, onlySelf: true });
+            }
+            else {
+                this.form.reset(null, { emitEvent: false, onlySelf: true });
+            }
+            if (!opts || opts.emitEvent !== true)
+                this.markForCheck();
+        };
+        AppForm.prototype.markAsPristine = function (opts) {
+            this.form.markAsPristine(opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        AppForm.prototype.markAsUntouched = function (opts) {
+            this.form.markAsUntouched(opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        /**
+         * @deprecated prefer to use markAllAsTouched()
+         * @param opts
+         */
+        AppForm.prototype.markAsTouched = function (opts) {
+            // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
+            console.warn('TODO: Replace this call by markAllAsTouched() - because of changes in ngx-components >= 0.16.0');
+            AppFormUtils.markAsTouched(this.form, opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        AppForm.prototype.markAllAsTouched = function (opts) {
+            // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
+            AppFormUtils.markAllAsTouched(this.form, opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        AppForm.prototype.markAsDirty = function (opts) {
+            this.form.markAsDirty(opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        AppForm.prototype.markAsLoading = function (opts) {
+            this.setLoading(true, opts);
+        };
+        AppForm.prototype.markAsLoaded = function (opts) {
+            this.setLoading(false, opts);
+        };
+        AppForm.prototype.markAsReady = function (opts) {
+            if (this.readySubject.value !== true) {
+                this.readySubject.next(true);
+                // If subclasses implements OnReady
+                if (typeof this['ngOnReady'] === 'function') {
+                    this.ngOnReady();
+                }
+            }
+        };
+        /**
+         * Wait form is ready
+         * @param opts
+         */
+        AppForm.prototype.ready = function (opts) {
+            if (this.readySubject.value)
+                return Promise.resolve();
+            return waitForTrue(this.readySubject, opts);
+        };
+        /**
+         * Wait form is not busy (=loaded)
+         * @param opts
+         */
+        AppForm.prototype.waitIdle = function (opts) {
+            if (!this.loadingSubject.value)
+                return Promise.resolve();
+            return waitForFalse(this.loadingSubject, opts);
+        };
+        AppForm.prototype.updateValueAndValidity = function (opts) {
+            AppFormUtils.updateValueAndValidity(this.form, opts);
+            if (!opts || opts.emitEvent !== false)
+                this.markForCheck();
+        };
+        AppForm.prototype.translateControlPath = function (path) {
+            var _a;
+            var i18nFieldName = this.getI18nFieldName(path);
+            return ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.instant(i18nFieldName)) || i18nFieldName;
+        };
+        /* -- protected methods -- */
+        AppForm.prototype.getFormError = function (form, opts) {
+            if (!form || !this.errorTranslator)
+                return undefined;
+            return this.errorTranslator.translateFormErrors(this.form, Object.assign({ controlPathTranslator: this }, opts));
+        };
+        AppForm.prototype.getI18nFieldName = function (path) {
+            return (this.i18nFieldPrefix || '') + changeCaseToUnderscore(path).toUpperCase();
+        };
+        AppForm.prototype.registerSubscription = function (sub) {
+            return this._subscription.add(sub);
+        };
+        AppForm.prototype.unregisterSubscription = function (sub) {
+            this._subscription.remove(sub);
+        };
+        AppForm.prototype.registerAutocompleteField = function (fieldName, opts) {
+            return this.autocompleteHelper.add(fieldName, opts);
+        };
+        AppForm.prototype.setError = function (value, opts) {
+            if (this.errorSubject.value !== value) {
+                this.errorSubject.next(value);
+                if (!opts || opts.emitEvent !== false) {
+                    this.markForCheck();
+                }
+            }
+        };
+        AppForm.prototype.markForCheck = function () {
+            // Should be overwritten by subclasses
+            console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
+        };
+        /* -- private function -- */
+        AppForm.prototype.setLoading = function (value, opts) {
+            if (this.loadingSubject.value !== value) {
+                this.loadingSubject.next(value);
+                if (!opts || opts.emitEvent !== false) {
+                    this.markForCheck();
+                }
+            }
+        };
+        return AppForm;
+    }());
+    AppForm.decorators = [
+        { type: i0.Directive }
+    ];
+    AppForm.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: i1.FormGroup }
+    ]; };
+    AppForm.propDecorators = {
+        debug: [{ type: i0.Input }],
+        tabindex: [{ type: i0.Input }],
+        errorTranslatorOptions: [{ type: i0.Input }],
+        form: [{ type: i0.Input }],
+        onCancel: [{ type: i0.Output }],
+        onSubmit: [{ type: i0.Output }]
+    };
+
     var AuthForm = /** @class */ (function (_super) {
         __extends(AuthForm, _super);
         function AuthForm(injector, platform, formBuilder, settings, configService, modalCtrl, network, cd, environment) {
@@ -24893,6 +25225,190 @@
                 },] }
     ];
 
+    var TextPopover = /** @class */ (function () {
+        function TextPopover(popoverController, translate) {
+            this.popoverController = popoverController;
+            this.translate = translate;
+            this.placeholder = '';
+            this.editing = true;
+            this.multiline = true;
+            this.maxLength = 2000;
+            this.autofocus = false;
+            this.subscription = new rxjs.Subscription();
+        }
+        Object.defineProperty(TextPopover.prototype, "disabled", {
+            get: function () {
+                return this.form.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TextPopover.prototype, "enabled", {
+            get: function () {
+                return this.form.enabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TextPopover.prototype, "valid", {
+            get: function () {
+                var _a;
+                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TextPopover.prototype, "value", {
+            get: function () {
+                var _a;
+                return (_a = this.form) === null || _a === void 0 ? void 0 : _a.value.text;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TextPopover.prototype.ngOnInit = function () {
+            this.enable();
+        };
+        TextPopover.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () { return _this.form.setValue({ text: _this.text }); }, 0);
+        };
+        TextPopover.prototype.onValidate = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var value, err_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, waitWhilePending(this.form)];
+                        case 1:
+                            _b.sent();
+                            if (!this.valid) {
+                                logFormErrors(this.form.control);
+                                return [2 /*return*/];
+                            }
+                            _b.label = 2;
+                        case 2:
+                            _b.trys.push([2, 4, , 5]);
+                            value = this.value;
+                            this.disable();
+                            return [4 /*yield*/, this.popoverController.dismiss(value)];
+                        case 3:
+                            _b.sent();
+                            this.form.error = null;
+                            return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _b.sent();
+                            this.form.error = (err_1 && err_1.message) || err_1;
+                            this.enable();
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TextPopover.prototype.disable = function () {
+            this.form.disable();
+        };
+        TextPopover.prototype.enable = function () {
+            if (this.editing)
+                this.form.enable();
+        };
+        TextPopover.prototype.cancel = function () {
+            this.popoverController.dismiss();
+        };
+        TextPopover.prototype.ngOnDestroy = function () {
+            this.subscription.unsubscribe();
+        };
+        return TextPopover;
+    }());
+    TextPopover.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-text-popover',
+                    template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n"
+                },] }
+    ];
+    TextPopover.ctorParameters = function () { return [
+        { type: i1$5.PopoverController },
+        { type: i1$2.TranslateService }
+    ]; };
+    TextPopover.propDecorators = {
+        form: [{ type: i0.ViewChild, args: ['form', { static: true },] }],
+        text: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        editing: [{ type: i0.Input }],
+        multiline: [{ type: i0.Input }],
+        maxLength: [{ type: i0.Input }],
+        autofocus: [{ type: i0.Input }]
+    };
+
+    var TextForm = /** @class */ (function (_super) {
+        __extends(TextForm, _super);
+        function TextForm(injector, cd, formBuilder) {
+            var _this = _super.call(this, injector) || this;
+            _this.injector = injector;
+            _this.cd = cd;
+            _this.formBuilder = formBuilder;
+            _this.showError = true;
+            _this.multiline = true;
+            _this.autoHeight = false;
+            _this.maxLength = 2000;
+            _this.autofocus = false;
+            _this.textAreaChanges = new i0.EventEmitter();
+            return _this;
+        }
+        TextForm.prototype.ngOnInit = function () {
+            var form = this.formBuilder.group({
+                text: [null, isNotNil(this.maxLength)
+                        ? i1.Validators.maxLength(this.maxLength)
+                        : undefined
+                ]
+            });
+            this.control = form.get('text');
+            this.setForm(form);
+            _super.prototype.ngOnInit.call(this);
+        };
+        TextForm.prototype.textAreaChanged = function (event) {
+            this.textAreaChanges.emit(this.control.value);
+        };
+        TextForm.prototype.containerResize = function () {
+            var _a;
+            (_a = this.autosizeDirective) === null || _a === void 0 ? void 0 : _a.resizeToFitContent(true);
+        };
+        TextForm.prototype.focusInput = function () {
+            if (this.textArea)
+                focusInput(this.textArea);
+            if (this.textInput)
+                focusInput(this.textInput);
+        };
+        TextForm.prototype.markForCheck = function () {
+            this.cd.markForCheck();
+        };
+        return TextForm;
+    }(AppForm));
+    TextForm.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-text-form',
+                    template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n",
+                    styles: ["textarea.fixed-height{height:11.5em}"]
+                },] }
+    ];
+    TextForm.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: i0.ChangeDetectorRef },
+        { type: i1.FormBuilder }
+    ]; };
+    TextForm.propDecorators = {
+        showError: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        multiline: [{ type: i0.Input }],
+        autoHeight: [{ type: i0.Input }],
+        maxLength: [{ type: i0.Input }],
+        autofocus: [{ type: i0.Input }],
+        textAreaChanges: [{ type: i0.Output }],
+        textArea: [{ type: i0.ViewChild, args: ['textArea',] }],
+        textInput: [{ type: i0.ViewChild, args: ['textInput',] }],
+        autosizeDirective: [{ type: i0.ViewChild, args: [textField.CdkTextareaAutosize,] }]
+    };
+
     var AppUpdateOfflineModeCard = /** @class */ (function () {
         function AppUpdateOfflineModeCard() {
             this.onUpdateClick = new i0.EventEmitter();
@@ -25889,7 +26405,8 @@
             this.asyncCreateNew(insertAt);
         };
         EntitiesTableDataSource.prototype.connect = function (collectionViewer) {
-            // DEBUG console.debug("[entities-datasource] connect");
+            // DEBUG
+            //console.debug("[entities-datasource] connect");
             return _super_1.prototype.connect.call(this, collectionViewer);
         };
         EntitiesTableDataSource.prototype.disconnect = function (collectionViewer) {
@@ -30336,7 +30853,7 @@
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
-                        case 0: return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                        case 0: return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value); }))];
                         case 1:
                             data = _b.sent();
                             if (now) {
@@ -30397,7 +30914,7 @@
                                 })];
                         case 1:
                             res = _b.sent();
-                            return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                            return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value); }))];
                         case 2:
                             data = _b.sent();
                             if (now)
@@ -30420,6 +30937,22 @@
                 });
             });
         };
+        AbstractUserEventService.prototype.load = function (id, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var filter, data;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            filter = this.defaultFilter();
+                            filter.includedIds = [id];
+                            return [4 /*yield*/, this.loadPage({ offset: 0, size: 1 }, filter, opts)];
+                        case 1:
+                            data = (_b.sent()).data;
+                            return [2 /*return*/, data && data[0]];
+                    }
+                });
+            });
+        };
         AbstractUserEventService.prototype.add = function (entity) {
             return __awaiter(this, void 0, void 0, function () {
                 var withContent;
@@ -30427,7 +30960,6 @@
                     switch (_b.label) {
                         case 0: return [4 /*yield*/, this.processUserEvent(entity)];
                         case 1:
-                            // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
                             entity = _b.sent();
                             if (!entity)
                                 return [2 /*return*/]; // Rejected
@@ -30439,7 +30971,9 @@
                             });
                             // Update count
                             this._countSubject.next(this._countSubject.value + 1);
-                            return [2 /*return*/];
+                            // Add id
+                            console.log('TODO: add an ID to user event ?');
+                            return [2 /*return*/, entity];
                     }
                 });
             });
@@ -30547,7 +31081,7 @@
                                     });
                                 }
                                 if (!(!opts || opts.toEntity !== false)) return [3 /*break*/, 2];
-                                return [4 /*yield*/, Promise.all((data || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                                return [4 /*yield*/, Promise.all((data || []).map(function (value) { return _this.processUserEvent(value); }))];
                             case 1: return [2 /*return*/, _b.sent()];
                             case 2: return [2 /*return*/, data];
                         }
@@ -30801,16 +31335,15 @@
             (_a = this._listenSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             this._listenSubscription = undefined;
         };
-        AbstractUserEventService.prototype.processUserEvent = function (source, that) {
+        AbstractUserEventService.prototype.processUserEvent = function (source) {
             return __awaiter(this, void 0, void 0, function () {
                 var target, listeners, listeners_1, listeners_1_1, listener, res, _b, e_3_1;
                 var e_3, _c;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
-                            that = that || this;
-                            target = that.fromObject(source);
-                            listeners = (that.listeners || [])
+                            target = this.fromObject(source);
+                            listeners = (this.listeners || [])
                                 .filter(function (listener) { return !!listener.onReceived; })
                                 .filter(function (listener) { return listener.accept(target); });
                             _d.label = 1;
@@ -30835,8 +31368,8 @@
                             target = _b;
                             return [3 /*break*/, 7];
                         case 6:
-                            if (that._debug)
-                                console.debug(that._logPrefix + "Event has been rejected by a listener", source);
+                            if (this._debug)
+                                console.debug(this._logPrefix + "Event has been rejected by a listener", source);
                             return [3 /*break*/, 8];
                         case 7:
                             listeners_1_1 = listeners_1.next();
@@ -30870,8 +31403,8 @@
                                 return [2 /*return*/];
                             // set read date
                             userEvents.forEach(function (userEvent) { return userEvent.readDate = moment$6(); });
-                            localEntities = userEvents.filter(function (userEvent) { return !userEvent.id || userEvent.id < 0; });
-                            remoteEntities = userEvents.filter(function (userEvent) { return userEvent.id > 0; });
+                            localEntities = userEvents.filter(EntityUtils.isLocal);
+                            remoteEntities = userEvents.filter(EntityUtils.isRemote);
                             // save local entities
                             if (localEntities.length) {
                                 if (this._debug)
@@ -30910,9 +31443,6 @@
                 recipients: [this.defaultRecipient()]
             };
         };
-        AbstractUserEventService.prototype.defaultRecipient = function () {
-            return this.accountService.person.pubkey;
-        };
         AbstractUserEventService.prototype.fillDefaultProperties = function (entity) {
         };
         AbstractUserEventService.prototype.unreadEvents = function (events) {
@@ -31605,7 +32135,7 @@
             _this.environment = environment;
             _this._logPrefix = '[job-progression-service] ';
             // For DEV only
-            _this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
+            _this._debug = environment && !environment.production;
             return _this;
         }
         JobProgressionService.prototype.listenChanges = function (id, options) {
@@ -33551,8 +34081,167 @@
                 },] }
     ];
 
+    // @dynamic
+    exports.ImageAttachment = /** @class */ (function (_super) {
+        __extends(ImageAttachment, _super);
+        function ImageAttachment() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.dataUrl = null;
+            _this.url = null;
+            _this.title = null;
+            return _this;
+        }
+        ImageAttachment.prototype.fromObject = function (source, opts) {
+            _super.prototype.fromObject.call(this, source, opts);
+            this.url = source.url;
+            this.dataUrl = source.dataUrl;
+            this.title = source.title;
+        };
+        return ImageAttachment;
+    }(Entity));
+    exports.ImageAttachment = __decorate([
+        EntityClass({ typename: 'ImageAttachmentVO' })
+    ], exports.ImageAttachment);
+    // @dynamic
+    exports.ImageAttachmentFilter = /** @class */ (function (_super) {
+        __extends(ImageAttachmentFilter, _super);
+        function ImageAttachmentFilter() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ImageAttachmentFilter;
+    }(EntityFilter));
+    exports.ImageAttachmentFilter = __decorate([
+        EntityClass({ typename: 'ImageAttachmentFilterVO' })
+    ], exports.ImageAttachmentFilter);
+    var ImageAttachmentService = /** @class */ (function (_super) {
+        __extends(ImageAttachmentService, _super);
+        function ImageAttachmentService(platform) {
+            var _this = _super.call(this, platform) || this;
+            _this.platform = platform;
+            _this.$images = new rxjs.BehaviorSubject([
+                { id: 0, url: 'https://test.sumaris.net/assets/img/bg/ray-1.jpg', title: 'ray #1' },
+                { id: 1, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #2' }
+            ]);
+            console.debug('[gallery-testing-service] Create service');
+            return _this;
+        }
+        ImageAttachmentService.prototype.ngOnStart = function () {
+            return Promise.resolve(undefined);
+        };
+        ImageAttachmentService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, opts) {
+            console.debug('[gallery-testing-service] Watching images...');
+            return this.$images
+                .pipe(operators.map(function (images) {
+                var data = (images || []).map(exports.ImageAttachment.fromObject);
+                data = EntityUtils.sort(data, sortBy, sortDirection);
+                console.debug("[gallery-testing-service] Loaded " + data.length + " images...");
+                return { data: data, total: data.length };
+            }));
+        };
+        ImageAttachmentService.prototype.saveAll = function (entities, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var currentId;
+                return __generator(this, function (_a) {
+                    if (!entities)
+                        return [2 /*return*/, []];
+                    currentId = this.$images.value.reduce(function (res, image) { return Math.max(res, +(image === null || image === void 0 ? void 0 : image.id) || 0); }, 0);
+                    entities.filter(function (item) { return isNil(item.id); })
+                        .forEach(function (item) {
+                        item.id = ++currentId;
+                    });
+                    this.$images.next(__spread(this.$images.value, entities));
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ImageAttachmentService.prototype.deleteAll = function (entities, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var deletedIds, filteredData;
+                return __generator(this, function (_a) {
+                    deletedIds = (entities || []).map(function (item) { return item.id; }).filter(isNotNil);
+                    filteredData = (this.$images.value).filter(function (item) { return !deletedIds.includes(item.id); });
+                    this.$images.next(filteredData);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ImageAttachmentService.prototype.asFilter = function (filter) {
+            return exports.ImageAttachmentFilter.fromObject(filter);
+        };
+        return ImageAttachmentService;
+    }(StartableService));
+    ImageAttachmentService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ImageAttachmentService.ctorParameters = function () { return [
+        { type: i1$5.Platform }
+    ]; };
+
+    var GalleryTestPage = /** @class */ (function () {
+        function GalleryTestPage(dataService) {
+            this.dataService = dataService;
+            this._subscription = new rxjs.Subscription();
+            this.dataSource = new EntitiesTableDataSource(exports.ImageAttachment, this.dataService);
+        }
+        GalleryTestPage.prototype.ngOnInit = function () {
+            this._subscription.add(this.dataSource.watchAll(0, 100, null, null, null)
+                .subscribe());
+        };
+        GalleryTestPage.prototype.ngOnDestroy = function () {
+            this._subscription.unsubscribe();
+        };
+        return GalleryTestPage;
+    }());
+    GalleryTestPage.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-gallery-test-page',
+                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-image-gallery [dataSource]=\"dataSource\">\n  </app-image-gallery>\n</ion-content>\n",
+                    providers: [
+                        { provide: ImageAttachmentService, useClass: ImageAttachmentService }
+                    ]
+                },] }
+    ];
+    GalleryTestPage.ctorParameters = function () { return [
+        { type: ImageAttachmentService }
+    ]; };
+
+    var routes$4 = [
+        {
+            path: 'gallery',
+            pathMatch: 'full',
+            component: GalleryTestPage
+        },
+    ];
+    var ImageGalleryTestingModule = /** @class */ (function () {
+        function ImageGalleryTestingModule() {
+        }
+        return ImageGalleryTestingModule;
+    }());
+    ImageGalleryTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$5.IonicModule,
+                        ImageGalleryModule,
+                        i1$2.TranslateModule.forChild(),
+                        i3.RouterModule.forChild(routes$4),
+                        i1$2.TranslateModule.forChild(),
+                    ],
+                    declarations: [
+                        // Components
+                        GalleryTestPage
+                    ],
+                    exports: [
+                        i3.RouterModule,
+                        // Components
+                        GalleryTestPage
+                    ]
+                },] }
+    ];
+
     var SHARED_TESTING_PAGES = __spread(SHARED_MATERIAL_TESTING_PAGES, [
         { label: 'Shared other components', divider: true },
+        { label: 'Image gallery', page: '/testing/shared/gallery' },
         { label: 'Toast', page: '/testing/shared/toast' },
         { label: 'File upload', page: '/testing/shared/upload-file' }
     ]);
@@ -33565,17 +34254,20 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         i1$4.CommonModule,
+                        i1$5.IonicModule,
                         i1$2.TranslateModule.forChild(),
                         // Testing sub-modules
                         MaterialTestingModule,
                         ToastTestingModule,
-                        UploadFileTestingModule
+                        UploadFileTestingModule,
+                        ImageGalleryTestingModule
                     ],
                     exports: [
                         // Testing sub-modules
                         MaterialTestingModule,
                         ToastTestingModule,
-                        UploadFileTestingModule
+                        UploadFileTestingModule,
+                        ImageGalleryTestingModule
                     ]
                 },] }
     ];
@@ -33963,7 +34655,7 @@
         { type: i1$5.PopoverController }
     ]; };
 
-    var routes$4 = [
+    var routes$5 = [
         {
             path: 'text-popover',
             pathMatch: 'full',
@@ -33981,7 +34673,7 @@
                         i1$4.CommonModule,
                         i1$5.IonicModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$4)
+                        i3.RouterModule.forChild(routes$5)
                     ],
                     declarations: [
                         TextPopoverTestingPage
@@ -33998,7 +34690,7 @@
         { label: 'Table', page: '/testing/core/table' },
         { label: 'Text popover', page: '/testing/core/text-popover' }
     ];
-    var routes$5 = [
+    var routes$6 = [
         {
             path: '',
             pathMatch: 'full',
@@ -34025,7 +34717,7 @@
                     imports: [
                         i1$4.CommonModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$5),
+                        i3.RouterModule.forChild(routes$6),
                         // Sub modules
                         TableTestingModule,
                         TextPopoverTestingModule
@@ -34202,6 +34894,7 @@
             this.recipients = source.recipients || [];
             this.startDate = fromDateISOString(source.startDate);
             this.excludeRead = source.excludeRead || false;
+            this.includedIds = source.includedIds || [];
         };
         UserEventTestFilter.prototype.buildFilter = function () {
             var _this = this;
@@ -34221,6 +34914,9 @@
             if (isNotNil(this.startDate)) {
                 filterFns.push(function (t) { return _this.startDate.isSameOrBefore(t.creationDate); });
             }
+            if (isNotEmptyArray(this.includedIds)) {
+                filterFns.push(function (t) { return _this.includedIds.includes(t.id); });
+            }
             if (this.excludeRead === true) {
                 filterFns.push(function (t) { return isNil(t.readSignature); }); // todo or t.signature ?
             }
@@ -34272,7 +34968,7 @@
                             ], this.$userEvents.value));
                             this._countSubject.next((this._countSubject.value || 0) + 1);
                             this.$newUserEvents.next([entity]);
-                            return [2 /*return*/];
+                            return [2 /*return*/, entity];
                     }
                 });
             });
@@ -34335,6 +35031,9 @@
                 });
             });
         };
+        UserEventTestService.prototype.defaultRecipient = function () {
+            return this.accountService.isLogin() ? this.accountService.person.pubkey : undefined;
+        };
         UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, opts) {
             var _this = this;
             return this.$userEvents.pipe(operators.map(function (userEvents) {
@@ -34377,7 +35076,7 @@
         { type: AccountService },
         { type: NetworkService },
         { type: i1$2.TranslateService },
-        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
+        { type: Environment, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
 
     var moment$a = momentImported__namespace;
@@ -34637,7 +35336,7 @@
         { label: 'User event', page: '/testing/social/user-event' },
         { label: 'Job progression', page: '/testing/social/job-progression' }
     ];
-    var routes$6 = [
+    var routes$7 = [
         {
             path: 'job-progression',
             pathMatch: 'full',
@@ -34659,7 +35358,7 @@
                     imports: [
                         i1$4.CommonModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$6),
+                        i3.RouterModule.forChild(routes$7),
                         JobTestingModule,
                         UserEventTestingModule
                     ],
@@ -34709,6 +35408,7 @@
     exports.AppHelpModal = AppHelpModal;
     exports.AppIconComponent = AppIconComponent;
     exports.AppIconModule = AppIconModule;
+    exports.AppImageGalleryComponent = AppImageGalleryComponent;
     exports.AppInMemoryTable = AppInMemoryTable;
     exports.AppInstallUpgradeCard = AppInstallUpgradeCard;
     exports.AppListForm = AppListForm;
@@ -34803,6 +35503,7 @@
     exports.FormGetPipe = FormGetPipe;
     exports.FormGetValuePipe = FormGetValuePipe;
     exports.Fragments = Fragments$1;
+    exports.GalleryTestPage = GalleryTestPage;
     exports.GraphqlService = GraphqlService;
     exports.HAMMER_PRESS_TIME = HAMMER_PRESS_TIME;
     exports.HAMMER_TAP_TIME = HAMMER_TAP_TIME;
@@ -34810,6 +35511,12 @@
     exports.HomePage = HomePage;
     exports.Hotkeys = Hotkeys;
     exports.HotkeysDialogComponent = HotkeysDialogComponent;
+    exports.IMAGE_DEFAULTS = IMAGE_DEFAULTS;
+    exports.ImageAttachmentService = ImageAttachmentService;
+    exports.ImageGalleryTestingModule = ImageGalleryTestingModule;
+    exports.ImageModule = ImageModule;
+    exports.ImageService = ImageService;
+    exports.ImagesUtils = ImagesUtils;
     exports.InMemoryEntitiesService = InMemoryEntitiesService;
     exports.IsLoginAccountPipe = IsLoginAccountPipe;
     exports.IsNilOrBlankPipe = IsNilOrBlankPipe;
@@ -35121,19 +35828,20 @@
     exports.ɵa = CustomReuseStrategy;
     exports.ɵb = MatNumpadDomService;
     exports.ɵc = isFocusableElement;
-    exports.ɵd = RegisterForm;
-    exports.ɵe = AccountValidatorService;
-    exports.ɵf = RegisterModal;
-    exports.ɵg = UserSettingsValidatorService;
-    exports.ɵh = LocalSettingsValidatorService;
-    exports.ɵi = AppUpdateOfflineModeCard;
-    exports.ɵj = UserEventNotificationList;
-    exports.ɵk = JobProgressionList;
-    exports.ɵl = DateTestPage;
-    exports.ɵm = NumpadTestPage;
-    exports.ɵn = MatBadgeIconTestPage;
-    exports.ɵo = ToastTestingModule;
-    exports.ɵp = ToastTestingPage;
+    exports.ɵd = ImageGalleryModule;
+    exports.ɵe = RegisterForm;
+    exports.ɵf = AccountValidatorService;
+    exports.ɵg = RegisterModal;
+    exports.ɵh = UserSettingsValidatorService;
+    exports.ɵi = LocalSettingsValidatorService;
+    exports.ɵj = AppUpdateOfflineModeCard;
+    exports.ɵk = UserEventNotificationList;
+    exports.ɵl = JobProgressionList;
+    exports.ɵm = DateTestPage;
+    exports.ɵn = NumpadTestPage;
+    exports.ɵo = MatBadgeIconTestPage;
+    exports.ɵp = ToastTestingModule;
+    exports.ɵq = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });