@sumaris-net/ngx-components 4.0.0-rc14 → 4.0.0-rc15

package/esm2022/src/app/shared/storage/storage-explorer.component.mjs

@@ -250,10 +250,10 @@ export class StorageExplorerComponent {
         return `var(--ion-color-${LogUtils.levelToColor(level)})`;
     }
     levelToString = LogUtils.levelToString;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerComponent, deps: [{ token: i1.Platform }, { token: i1.ToastController }, { token: i1.AlertController }, { token: i2.TranslateService }, { token: i3.MomentDateAdapter }, { token: i0.ChangeDetectorRef }, { token: APP_STORAGE }, { token: ENVIRONMENT }, { token: APP_DEBUG_DATA_SERVICE, optional: true }, { token: APP_STORAGE_EXPLORER_PROTECTED_KEYS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i9.EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerComponent, deps: [{ token: i1.Platform }, { token: i1.ToastController }, { token: i1.AlertController }, { token: i2.TranslateService }, { token: i3.MomentDateAdapter }, { token: i0.ChangeDetectorRef }, { token: APP_STORAGE }, { token: ENVIRONMENT }, { token: APP_DEBUG_DATA_SERVICE, optional: true }, { token: APP_STORAGE_EXPLORER_PROTECTED_KEYS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i9.EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-storage-explorer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"] }]
         }], ctorParameters: () => [{ type: i1.Platform }, { type: i1.ToastController }, { type: i1.AlertController }, { type: i2.TranslateService }, { type: i3.MomentDateAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{

package/esm2022/src/app/shared/storage/storage-explorer.module.mjs

@@ -9,13 +9,13 @@ import { RxStateModule } from '../rx-state.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class StorageExplorerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerModule, declarations: [StorageExplorerComponent], imports: [IonicModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerModule, declarations: [StorageExplorerComponent], imports: [IonicModule,
             CommonModule, i1.TranslateModule, RxStateModule,
             // Other shared modules
             SharedPipesModule,
             SharedMaterialModule], exports: [StorageExplorerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerModule, imports: [IonicModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerModule, imports: [IonicModule,
             CommonModule,
             TranslateModule.forChild(),
             RxStateModule,
@@ -23,7 +23,7 @@ export class StorageExplorerModule {
             SharedPipesModule,
             SharedMaterialModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/storage/storage-explorer.testing-routing.module.mjs

@@ -13,13 +13,13 @@ const routes = [
     }
 ];
 export class StorageExplorerTestingRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule, i1.RouterModule, StorageExplorerModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule, i1.RouterModule, StorageExplorerModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule,
             RouterModule.forChild(routes),
             StorageExplorerModule, RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/storage/storage-explorer.testing.module.mjs

@@ -13,12 +13,12 @@ const routes = [
     }
 ];
 export class StorageExplorerTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule, i1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule, i1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule,
             RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageExplorerTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageExplorerTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/storage/storage.service.mjs

@@ -118,10 +118,10 @@ export class StorageService extends StartableService {
             await this.ready();
         return this._data.forEach(iteratorCallback);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageService, deps: [{ token: i1.Platform }, { token: i2.Storage }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageService, deps: [{ token: i1.Platform }, { token: i2.Storage }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: StorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: StorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/src/app/shared/testing/observable.test.mjs

@@ -83,10 +83,10 @@ export class ObservableTestPage {
     appendLog(message) {
         this.resultDiv.nativeElement.innerHTML += message + '<br/>';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObservableTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ObservableTestPage, selector: "app-observable-test", viewQueries: [{ propertyName: "resultDiv", first: true, predicate: ["result"], descendants: true }], ngImport: i0, template: "\n<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>Observables test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-card>\n    <ion-card-header>\n      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>\n    </ion-card-header>\n    <ion-card-content>\n      <div style=\"display: inline-block\">\n        <p>Set options: </p>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: false})\">stopError: false</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: true})\">stopError: true</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: 'my error'})\">stopError: 'my error'</ion-button>\n\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: 2000})\">timeout: 2000</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: null})\">timeout: null</ion-button>\n        <br/>\n        <p>Call await function: </p>\n        <ion-button (click)=\"waitForTrue()\">waitForTrue</ion-button>\n        <ion-button (click)=\"firstNotNilPromise()\">firstNotNilPromise</ion-button>\n        <br/>\n        <p>Send event to source: </p>\n        <ion-button (click)=\"emit(true)\">Emit 'true'</ion-button>\n        <ion-button (click)=\"emit(false)\">Emit 'false'</ion-button>\n        <br/>\n        <p>Stop: </p>\n        <ion-button color=\"danger\" (click)=\"stop()\">Stop</ion-button>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <ion-card>\n    <ion-toolbar>\n      <ion-title>Running job count: {{runningTaskCount}}</ion-title>\n      <ion-button fill=\"outline\" slot=\"end\" (click)=\"result.innerHTML=''\">Clear log</ion-button>\n    </ion-toolbar>\n    <ion-card-content>\n      <div #result style=\"color: var(--ion-color-medium)\">\n      </div>\n    </ion-card-content>\n  </ion-card>\n</ion-content>\n", styles: ["ion-button{text-transform:none!important}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ObservableTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ObservableTestPage, selector: "app-observable-test", viewQueries: [{ propertyName: "resultDiv", first: true, predicate: ["result"], descendants: true }], ngImport: i0, template: "\n<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>Observables test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-card>\n    <ion-card-header>\n      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>\n    </ion-card-header>\n    <ion-card-content>\n      <div style=\"display: inline-block\">\n        <p>Set options: </p>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: false})\">stopError: false</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: true})\">stopError: true</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: 'my error'})\">stopError: 'my error'</ion-button>\n\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: 2000})\">timeout: 2000</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: null})\">timeout: null</ion-button>\n        <br/>\n        <p>Call await function: </p>\n        <ion-button (click)=\"waitForTrue()\">waitForTrue</ion-button>\n        <ion-button (click)=\"firstNotNilPromise()\">firstNotNilPromise</ion-button>\n        <br/>\n        <p>Send event to source: </p>\n        <ion-button (click)=\"emit(true)\">Emit 'true'</ion-button>\n        <ion-button (click)=\"emit(false)\">Emit 'false'</ion-button>\n        <br/>\n        <p>Stop: </p>\n        <ion-button color=\"danger\" (click)=\"stop()\">Stop</ion-button>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <ion-card>\n    <ion-toolbar>\n      <ion-title>Running job count: {{runningTaskCount}}</ion-title>\n      <ion-button fill=\"outline\" slot=\"end\" (click)=\"result.innerHTML=''\">Clear log</ion-button>\n    </ion-toolbar>\n    <ion-card-content>\n      <div #result style=\"color: var(--ion-color-medium)\">\n      </div>\n    </ion-card-content>\n  </ion-card>\n</ion-content>\n", styles: ["ion-button{text-transform:none!important}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObservableTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ObservableTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-observable-test', template: "\n<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>Observables test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-card>\n    <ion-card-header>\n      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>\n    </ion-card-header>\n    <ion-card-content>\n      <div style=\"display: inline-block\">\n        <p>Set options: </p>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: false})\">stopError: false</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: true})\">stopError: true</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: 'my error'})\">stopError: 'my error'</ion-button>\n\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: 2000})\">timeout: 2000</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: null})\">timeout: null</ion-button>\n        <br/>\n        <p>Call await function: </p>\n        <ion-button (click)=\"waitForTrue()\">waitForTrue</ion-button>\n        <ion-button (click)=\"firstNotNilPromise()\">firstNotNilPromise</ion-button>\n        <br/>\n        <p>Send event to source: </p>\n        <ion-button (click)=\"emit(true)\">Emit 'true'</ion-button>\n        <ion-button (click)=\"emit(false)\">Emit 'false'</ion-button>\n        <br/>\n        <p>Stop: </p>\n        <ion-button color=\"danger\" (click)=\"stop()\">Stop</ion-button>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <ion-card>\n    <ion-toolbar>\n      <ion-title>Running job count: {{runningTaskCount}}</ion-title>\n      <ion-button fill=\"outline\" slot=\"end\" (click)=\"result.innerHTML=''\">Clear log</ion-button>\n    </ion-toolbar>\n    <ion-card-content>\n      <div #result style=\"color: var(--ion-color-medium)\">\n      </div>\n    </ion-card-content>\n  </ion-card>\n</ion-content>\n", styles: ["ion-button{text-transform:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { resultDiv: [{

package/esm2022/src/app/shared/testing/tests.page.mjs

@@ -22,10 +22,10 @@ export class SharedTestsPage {
             relativeTo: this.route
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedTestsPage, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.TranslateService }, { token: APP_TESTING_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: SharedTestsPage, selector: "app-tests-page", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Tests</ion-title>\n\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list *ngIf=\"pages?.length\">\n\n    <ng-container *ngFor=\"let item of pages\">\n\n      <ion-item-divider *ngIf=\"item.divider; else link\">{{item.label}}</ion-item-divider>\n\n      <ng-template #link>\n        <ion-item tappable class=\"text-1x\"\n                  (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n      </ng-template>\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i4.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedTestsPage, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.TranslateService }, { token: APP_TESTING_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SharedTestsPage, selector: "app-tests-page", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Tests</ion-title>\n\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list *ngIf=\"pages?.length\">\n\n    <ng-container *ngFor=\"let item of pages\">\n\n      <ion-item-divider *ngIf=\"item.divider; else link\">{{item.label}}</ion-item-divider>\n\n      <ng-template #link>\n        <ion-item tappable class=\"text-1x\"\n                  (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n      </ng-template>\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i4.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedTestsPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedTestsPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-tests-page', template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Tests</ion-title>\n\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list *ngIf=\"pages?.length\">\n\n    <ng-container *ngFor=\"let item of pages\">\n\n      <ion-item-divider *ngIf=\"item.divider; else link\">{{item.label}}</ion-item-divider>\n\n      <ng-template #link>\n        <ion-item tappable class=\"text-1x\"\n                  (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n      </ng-template>\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.TranslateService }, { type: undefined, decorators: [{

package/esm2022/src/app/shared/toast/toast.testing.mjs

@@ -42,10 +42,10 @@ export class ToastTestingPage {
     toggleCloseButton() {
         this.defaultOptions.showCloseButton = !this.defaultOptions.showCloseButton;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingPage, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ToastTestingPage, selector: "toast-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\">\n        <ion-label>Close button ?</ion-label>\n      </ion-checkbox>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingPage, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ToastTestingPage, selector: "toast-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\">\n        <ion-label>Close button ?</ion-label>\n      </ion-checkbox>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingPage, decorators: [{
             type: Component,
             args: [{ selector: 'toast-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\">\n        <ion-label>Close button ?</ion-label>\n      </ion-checkbox>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }] });

package/esm2022/src/app/shared/toast/toast.testing.module.mjs

@@ -15,16 +15,16 @@ const routes = [
     }
 ];
 export class ToastTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingModule, declarations: [ToastTestingPage], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingModule, declarations: [ToastTestingPage], imports: [CommonModule,
             IonicModule, i1.TranslateModule, i2.RouterModule], exports: [RouterModule,
             ToastTestingPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingModule, imports: [CommonModule,
             IonicModule,
             TranslateModule.forChild(),
             RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToastTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToastTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/toolbar/modal-toolbar.mjs

@@ -34,10 +34,10 @@ export class ModalToolbarComponent {
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ModalToolbarComponent, deps: [{ token: i1.Hotkeys }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: { modalName: "modalName", title: "title", color: "color", showSpinner: "showSpinner", canValidate: "canValidate", validateIcon: "validateIcon" }, outputs: { cancel: "cancel", validate: "validate" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar [color]=\"color\">\n    <ion-buttons slot=\"start\">\n      <ion-button visible-xs visible-sm visible-mobile\n                  (click)=\"cancel.emit()\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n\n      <ng-content select=\"ion-button[slot=end]\"></ng-content>\n\n      <ion-spinner *ngIf=\"showSpinner\"></ion-spinner>\n\n      <ion-button visible-xs visible-sm visible-mobile\n                  *ngIf=\"canValidate\"\n                  (click)=\"validate.emit($event)\">\n        <ion-icon slot=\"icon-only\" *ngIf=\"validateIcon?.icon\"  [name]=\"validateIcon.icon\"></ion-icon>\n        <mat-icon slot=\"icon-only\" *ngIf=\"validateIcon?.matIcon\" >{{validateIcon.matIcon}}</mat-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ModalToolbarComponent, deps: [{ token: i1.Hotkeys }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: { modalName: "modalName", title: "title", color: "color", showSpinner: "showSpinner", canValidate: "canValidate", validateIcon: "validateIcon" }, outputs: { cancel: "cancel", validate: "validate" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar [color]=\"color\">\n    <ion-buttons slot=\"start\">\n      <ion-button visible-xs visible-sm visible-mobile\n                  (click)=\"cancel.emit()\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n\n      <ng-content select=\"ion-button[slot=end]\"></ng-content>\n\n      <ion-spinner *ngIf=\"showSpinner\"></ion-spinner>\n\n      <ion-button visible-xs visible-sm visible-mobile\n                  *ngIf=\"canValidate\"\n                  (click)=\"validate.emit($event)\">\n        <ion-icon slot=\"icon-only\" *ngIf=\"validateIcon?.icon\"  [name]=\"validateIcon.icon\"></ion-icon>\n        <mat-icon slot=\"icon-only\" *ngIf=\"validateIcon?.matIcon\" >{{validateIcon.matIcon}}</mat-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ModalToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ModalToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar [color]=\"color\">\n    <ion-buttons slot=\"start\">\n      <ion-button visible-xs visible-sm visible-mobile\n                  (click)=\"cancel.emit()\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n\n      <ng-content select=\"ion-button[slot=end]\"></ng-content>\n\n      <ion-spinner *ngIf=\"showSpinner\"></ion-spinner>\n\n      <ion-button visible-xs visible-sm visible-mobile\n                  *ngIf=\"canValidate\"\n                  (click)=\"validate.emit($event)\">\n        <ion-icon slot=\"icon-only\" *ngIf=\"validateIcon?.icon\"  [name]=\"validateIcon.icon\"></ion-icon>\n        <mat-icon slot=\"icon-only\" *ngIf=\"validateIcon?.matIcon\" >{{validateIcon.matIcon}}</mat-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n" }]
         }], ctorParameters: () => [{ type: i1.Hotkeys }], propDecorators: { modalName: [{

package/esm2022/src/app/shared/toolbar/toolbar.mjs

@@ -207,12 +207,12 @@ export class ToolbarComponent {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.IonRouterOutlet }, { token: i0.ChangeDetectorRef }, { token: APP_PROGRESS_BAR_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ToolbarComponent, selector: "app-toolbar", inputs: { progressBarMode: "progressBarMode", title: "title", color: "color", class: "class", backHref: "backHref", defaultBackHref: "defaultBackHref", hasValidate: "hasValidate", hasClose: "hasClose", hasSearch: "hasSearch", canGoBack: "canGoBack", canShowMenu: "canShowMenu" }, outputs: { onValidate: "onValidate", onClose: "onClose", onValidateAndClose: "onValidateAndClose", onBackClick: "onBackClick", onSearch: "onSearch" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.IonRouterOutlet }, { token: i0.ChangeDetectorRef }, { token: APP_PROGRESS_BAR_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ToolbarComponent, selector: "app-toolbar", inputs: { progressBarMode: "progressBarMode", title: "title", color: "color", class: "class", backHref: "backHref", defaultBackHref: "defaultBackHref", hasValidate: "hasValidate", hasClose: "hasClose", hasSearch: "hasSearch", canGoBack: "canGoBack", canShowMenu: "canShowMenu" }, outputs: { onValidate: "onValidate", onClose: "onClose", onValidateAndClose: "onValidateAndClose", onBackClick: "onBackClick", onSearch: "onSearch" }, providers: [
             { provide: ToolbarToken, useExisting: ToolbarComponent }
         ], viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }, { propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true, static: true }], ngImport: i0, template: "<ion-header [class]=\"class\">\n  <ion-toolbar [color]=\"color\">\n\n    <ion-buttons slot=\"start\">\n\n      <!-- back button -->\n      <ion-button class=\"back-button\"\n                  *ngIf=\"canGoBack\"\n                  (click)=\"doBackClick($event)\"\n                  routerDirection=\"back\" >\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <!-- show menu button -->\n      <ion-menu-toggle #menuToggle\n                       [menu]=\"'left'\"\n                       [class.cdk-visually-hidden]=\"canGoBack || !canShowMenu\">\n        <ion-button>\n          <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n        </ion-button>\n      </ion-menu-toggle>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title, ion-segment\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\" collapse=\"true\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- search bar -->\n      <ion-searchbar #searchbar animated\n                     type=\"search\"\n                     *ngIf=\"hasSearch\"\n                     [class.cdk-visually-hidden]=\"!showSearchBar\"\n                     show-cancel-button=\"always\"\n                     (ionChange)=\"ionSearchBarChanged($event)\"\n                     (ionCancel)=\"toggleSearchBar()\">\n      </ion-searchbar>\n\n      <!-- search button -->\n      <ion-button (click)=\"toggleSearchBar()\"\n                  *ngIf=\"hasSearch && !showSearchBar\">\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n\n      <!-- close button -->\n      <ion-button *ngIf=\"hasClose\"\n                  (tap)=\"tapClose($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n      </ion-button>\n\n      <!-- validate button -->\n      <ion-button *ngIf=\"hasValidate\"\n                  (tap)=\"tapValidate($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"save\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- progress bar -->\n  <mat-progress-bar [color]=\"color|matColor\" [mode]=\"_progressBarMode$ | push: 'idle'\">\n  </mat-progress-bar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i5.MatColorPipe, name: "matColor" }, { kind: "pipe", type: i6.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toolbar', providers: [
                         { provide: ToolbarToken, useExisting: ToolbarComponent }

package/esm2022/src/app/shared/toolbar/toolbar.module.mjs

@@ -11,8 +11,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { RxStateModule } from '../rx-state.module';
 import * as i0 from "@angular/core";
 export class SharedToolbarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: SharedToolbarModule, declarations: [ToolbarComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SharedToolbarModule, declarations: [ToolbarComponent,
             ModalToolbarComponent], imports: [CommonModule,
             IonicModule,
             TranslateModule,
@@ -22,7 +22,7 @@ export class SharedToolbarModule {
             MatProgressBarModule,
             MatIconModule], exports: [ToolbarComponent,
             ModalToolbarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedToolbarModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedToolbarModule, imports: [CommonModule,
             IonicModule,
             TranslateModule,
             HammerModule,
@@ -31,7 +31,7 @@ export class SharedToolbarModule {
             MatProgressBarModule,
             MatIconModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/upload-file/testing/upload-file.testing.mjs

@@ -49,10 +49,10 @@ export class UploadFileTestingPage {
         await sleep(2000);
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingPage, deps: [{ token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UploadFileTestingPage, selector: "upload-file-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true, maxParallelUpload: 3})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(max parallel upload)\n  </ion-button>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingPage, deps: [{ token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: UploadFileTestingPage, selector: "upload-file-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true, maxParallelUpload: 3})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(max parallel upload)\n  </ion-button>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingPage, decorators: [{
             type: Component,
             args: [{ selector: 'upload-file-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true, maxParallelUpload: 3})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(max parallel upload)\n  </ion-button>\n\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.PopoverController }] });

package/esm2022/src/app/shared/upload-file/testing/upload-file.testing.module.mjs

@@ -15,16 +15,16 @@ const routes = [
     }
 ];
 export class UploadFileTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingModule, declarations: [UploadFileTestingPage], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingModule, declarations: [UploadFileTestingPage], imports: [CommonModule,
             IonicModule, i1.TranslateModule, i2.RouterModule], exports: [RouterModule,
             UploadFileTestingPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingModule, imports: [CommonModule,
             IonicModule,
             TranslateModule.forChild(),
             RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/upload-file/upload-file-popover.component.mjs

@@ -80,10 +80,10 @@ export class UploadFilePopover {
             this.cd.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFilePopover, deps: [{ token: i1.PopoverController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UploadFilePopover, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\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        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4.UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFilePopover, deps: [{ token: i1.PopoverController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: UploadFilePopover, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\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        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4.UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFilePopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFilePopover, decorators: [{
             type: Component,
             args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\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        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: i1.PopoverController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{

package/esm2022/src/app/shared/upload-file/upload-file.component.mjs

@@ -186,10 +186,10 @@ export class UploadFileComponent {
     waitIdle(opts) {
         return waitFor(() => this.processingFilesCount === 0, opts);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UploadFileComponent, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large;\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:gray!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.FileSizePipe, name: "fileSize" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: UploadFileComponent, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large;\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:gray!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.FileSizePipe, name: "fileSize" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UploadFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: UploadFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-upload-file', template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large;\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:gray!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { fileDropEl: [{