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

package/esm2022/src/app/core/form/buttons/form-buttons-bar.component.mjs

@@ -57,12 +57,12 @@ export class FormButtonsBarComponent {
         this.onSaveAndNext.complete();
         this.onSaveAndClose.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: FormButtonsBarComponent, deps: [{ token: i1.Hotkeys }, { token: i2.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: { disabled: "disabled", disabledCancel: "disabledCancel", classList: "classList", saveButtonColor: "saveButtonColor", backText: "backText", cancelText: "cancelText", nextText: "nextText", showBack: "showBack", showCancel: "showCancel", showNext: "showNext", showSave: "showSave", showSaveAndClose: "showSaveAndClose", showSaveAndNext: "showSaveAndNext" }, outputs: { onCancel: "onCancel", onSave: "onSave", onNext: "onNext", onBack: "onBack", onSaveAndClose: "onSaveAndClose", onSaveAndNext: "onSaveAndNext" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: FormButtonsBarComponent, deps: [{ token: i1.Hotkeys }, { token: i2.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: { disabled: "disabled", disabledCancel: "disabledCancel", classList: "classList", saveButtonColor: "saveButtonColor", backText: "backText", cancelText: "cancelText", nextText: "nextText", showBack: "showBack", showCancel: "showCancel", showNext: "showNext", showSave: "showSave", showSaveAndClose: "showSaveAndClose", showSaveAndNext: "showSaveAndNext" }, outputs: { onCancel: "onCancel", onSave: "onSave", onNext: "onNext", onBack: "onBack", onSaveAndClose: "onSaveAndClose", onSaveAndNext: "onSaveAndNext" }, providers: [
             { provide: FormButtonsBarToken, useExisting: FormButtonsBarComponent }
         ], ngImport: i0, template: "\n<ion-toolbar [class]=\"classList\">\n  <ion-row class=\"ion-no-padding\" nowrap>\n    <!-- show menu button -->\n    <ion-col size=\"auto\" class=\"hidden-xs hidden-sm\">\n      <ion-menu-toggle>\n        <button\n          mat-icon-button\n          color=\"accent\"\n          [title]=\"'COMMON.BTN_SHOW_MENU' | translate\"\n          (click)=\"menu.toggleSplitPaneWhen()\">\n          <mat-icon><span>&#xbb;</span></mat-icon>\n        </button>\n      </ion-menu-toggle>\n    </ion-col>\n\n    <ion-col class=\"app-form-buttons-bar-content\">\n      <ng-content></ng-content>\n    </ion-col>\n\n    <ion-col size=\"auto\" class=\"app-form-buttons-bar-buttons\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- back -->\n      <ion-button fill=\"clear\" color=\"dark\"\n                  (click)=\"onBack.emit($event)\"\n                  (keyup.enter)=\"onBack.emit($event)\"\n                  *ngIf=\"showBack && onBack.observed\"\n                  class=\"back\">\n        <ion-label>{{backText|translate}}</ion-label>\n      </ion-button>\n\n      <!-- cancel -->\n      <ion-button fill=\"clear\" color=\"dark\"\n                  *ngIf=\"showCancel\"\n                  (click)=\"onCancel.emit($event)\"\n                  (keyup.enter)=\"onCancel.emit($event)\"\n                  [disabled]=\"disabledCancel\"\n                  class=\"cancel\">\n        <ion-icon slot=\"start\" name=\"refresh\"></ion-icon>\n        <ion-label>{{cancelText|translate}}</ion-label>\n      </ion-button>\n\n      <!-- next -->\n      <ion-button fill=\"solid\"\n                  *ngIf=\"showNext && onNext.observed\"\n                  (click)=\"onNext.emit($event)\"\n                  (keyup.enter)=\"onNext.emit($event)\"\n                  class=\"next\">\n        <ion-label>{{nextText|translate}}</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <!-- save -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  *ngIf=\"showSave && onSave.observed\"\n                  (click)=\"onSave.emit($event)\"\n                  (keyup.enter)=\"onSave.emit($event)\"\n                  [color]=\"saveButtonColor\"\n                  [disabled]=\"disabled\"\n                  class=\"save\">\n        <ion-label [innerHTML]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate\" [title]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate\"></ion-label>\n      </ion-button>\n\n      <!-- save and next -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  *ngIf=\"showSaveAndNext && onSaveAndNext.observed\"\n                  (click)=\"onSaveAndNext.emit($event)\"\n                  (keyup.enter)=\"onSaveAndNext.emit($event)\"\n                  [color]=\"saveButtonColor\"\n                  [disabled]=\"disabled\"\n                  class=\"save\">\n        <ion-label translate>COMMON.BTN_SAVE_AND_NEXT</ion-label>\n      </ion-button>\n\n      <!-- save and close -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  *ngIf=\"showSaveAndClose && onSaveAndClose.observed\"\n                  (click)=\"onSaveAndClose.emit($event)\"\n                  (keyup.enter)=\"onSaveAndClose.emit($event)\"\n                  [color]=\"saveButtonColor\"\n                  [disabled]=\"disabled\"\n                  class=\"save\">\n        <ion-label translate>COMMON.BTN_SAVE_AND_CLOSE</ion-label>\n      </ion-button>\n    </ion-col>\n  </ion-row>\n</ion-toolbar>\n", styles: [":host{width:100%}:host ion-toolbar{height:var(--app-form-buttons-bar-height);padding:0 6px}:host ion-col{padding:0}ion-menu-toggle button{top:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i4.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: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: i5.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: FormButtonsBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: FormButtonsBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-form-buttons-bar', providers: [
                         { provide: FormButtonsBarToken, useExisting: FormButtonsBarComponent }

package/esm2022/src/app/core/form/buttons/form-buttons-bar.module.mjs

@@ -5,16 +5,16 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppFormButtonsBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormButtonsBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AppFormButtonsBarModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormButtonsBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AppFormButtonsBarModule, declarations: [
             // Components
             FormButtonsBarComponent], imports: [SharedModule, i1.TranslateModule], exports: [TranslateModule,
             // Components
             FormButtonsBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormButtonsBarModule, imports: [SharedModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormButtonsBarModule, imports: [SharedModule,
             TranslateModule.forChild(), TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormButtonsBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormButtonsBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/form/entity/editor.class.mjs

@@ -516,10 +516,10 @@ export class AppEditor {
     markForCheck() {
         // Should be override by subclasses, if change detection is Push
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEditor, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AppEditor, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ToolbarToken, descendants: true }, { propertyName: "formButtonsBar", first: true, predicate: FormButtonsBarToken, descendants: true, static: true }, { propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEditor, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AppEditor, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ToolbarToken, descendants: true }, { propertyName: "formButtonsBar", first: true, predicate: FormButtonsBarToken, descendants: true, static: true }, { propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEditor, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i3.TranslateService }], propDecorators: { toolbar: [{
                 type: ViewChild,
@@ -696,10 +696,10 @@ export class AppTabEditor extends AppEditor {
             .map(c => c.save()));
         return !results.some(saved => saved !== true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppTabEditor, deps: [{ token: i1.ActivatedRoute, optional: true }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: AppTabEditorOptions, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AppTabEditor, inputs: { queryTabIndexParamName: "queryTabIndexParamName", selectedTabIndex: "selectedTabIndex" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppTabEditor, deps: [{ token: i1.ActivatedRoute, optional: true }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: AppTabEditorOptions, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AppTabEditor, inputs: { queryTabIndexParamName: "queryTabIndexParamName", selectedTabIndex: "selectedTabIndex" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppTabEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppTabEditor, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.ActivatedRoute, decorators: [{
                     type: Optional

package/esm2022/src/app/core/form/entity/entity-editor-modal.class.mjs

@@ -407,10 +407,10 @@ export class AppEntityEditorModal extends AppTabEditor {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityEditorModal, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AppEntityEditorModal, inputs: { data: "data", mobile: "mobile", usageMode: "usageMode", onAfterModalInit: "onAfterModalInit", onDelete: "onDelete", i18nSuffix: "i18nSuffix", isNew: "isNew", isNewData: "isNewData", disabled: "disabled" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityEditorModal, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AppEntityEditorModal, inputs: { data: "data", mobile: "mobile", usageMode: "usageMode", onAfterModalInit: "onAfterModalInit", onDelete: "onDelete", i18nSuffix: "i18nSuffix", isNew: "isNew", isNewData: "isNewData", disabled: "disabled" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityEditorModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityEditorModal, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined }, { type: undefined, decorators: [{
                     type: Optional

package/esm2022/src/app/core/form/entity/entity-editor.class.mjs

@@ -719,10 +719,10 @@ export class AppEntityEditor extends AppTabEditor {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityEditor, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AppEntityEditor, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityEditor, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AppEntityEditor, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityEditor, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined }, { type: undefined }, { type: AppEditorOptions, decorators: [{
                     type: Optional

package/esm2022/src/app/core/form/entity/entity-metadata.component.mjs

@@ -10,10 +10,10 @@ import * as i5 from "../../../shared/pipes/date-format.pipe";
 export class EntityMetadataComponent {
     value;
     showRecorder = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: EntityMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: EntityMetadataComponent, selector: "app-entity-metadata", inputs: { value: "value", showRecorder: "showRecorder" }, ngImport: i0, template: "<ng-container *ngIf=\"value && value.id\">\n  <ion-card @fadeInAnimation>\n\n    <!-- recorder -->\n    <ion-item color=\"light\"\n              *ngIf=\"showRecorder && value && (value.recorderDepartment || value.recorderPerson)\">\n\n      <!-- recorder avatar -->\n      <ion-avatar slot=\"start\" *ngIf=\"value.recorderPerson; let recorderPerson\">\n        <img *ngIf=\"recorderPerson.avatar; else generateAvatar\"\n          src=\"{{ recorderPerson.avatar }}\">\n        <ng-template #generateAvatar>\n          <svg *ngIf=\"recorderPerson.id; let personId\"\n               width=\"38\" height=\"38\" [data-jdenticon-value]=\"personId\"></svg>\n        </ng-template>\n      </ion-avatar>\n\n      <!-- recorder name -->\n      <ion-label>\n        <ion-card-subtitle translate>COMMON.RECORDER</ion-card-subtitle>\n        <ion-card-title>{{value.recorderPerson?.firstName}} {{value.recorderPerson?.lastName}}</ion-card-title>\n        <ion-card-subtitle>{{value.recorderDepartment?.label}}</ion-card-subtitle>\n      </ion-label>\n\n      <ng-content select=\"[recorderSuffix]\"></ng-content>\n    </ion-item>\n\n    <ion-card-content>\n      <ion-label class=\"ion-text-wrap status\">\n        <!-- creation date -->\n        <ion-text *ngIf=\"value.creationDate\">\n          <ion-icon name=\"calendar\"></ion-icon>&nbsp;\n          <span translate>COMMON.CREATED_ON</span>\n          <span>&nbsp;<b>{{ value.creationDate | dateFormat: {time: true} }}</b></span>\n        </ion-text>\n\n        <!-- update date -->\n        <ion-text *ngIf=\"value.updateDate && value.updateDate != value.creationDate\">\n          <br *ngIf=\"value.creationDate\"/>\n          <ion-label>\n            <ion-icon name=\"time-outline\"></ion-icon>&nbsp;\n            <span translate>COMMON.UPDATED_ON</span>\n            <span>&nbsp;{{ value.updateDate | dateFormat: {time: true, seconds: true} }}</span>\n          </ion-label>\n        </ion-text>\n\n      </ion-label>\n\n      <ng-content></ng-content>\n\n    </ion-card-content>\n  </ion-card>\n</ng-container>\n", styles: ["ion-card ion-avatar{height:40px;width:40px}ion-card ion-avatar img,ion-card ion-avatar svg{border:solid 1px rgba(0,0,0,.2)}ion-card ion-avatar img{background-color:var(--ion-color-secondary)!important}ion-card ion-avatar svg{border-radius:20px;height:38px;width:38px}ion-card ion-card-content{background-color:var(--ion-color-light-tint)}ion-card ion-card-content ion-label.status,ion-card ion-card-content * ion-label.status{font-size:12px!important;color:var(--ion-color-step-850)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i4.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "pipe", type: i5.DateFormatPipe, name: "dateFormat" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: EntityMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: EntityMetadataComponent, selector: "app-entity-metadata", inputs: { value: "value", showRecorder: "showRecorder" }, ngImport: i0, template: "<ng-container *ngIf=\"value && value.id\">\n  <ion-card @fadeInAnimation>\n\n    <!-- recorder -->\n    <ion-item color=\"light\"\n              *ngIf=\"showRecorder && value && (value.recorderDepartment || value.recorderPerson)\">\n\n      <!-- recorder avatar -->\n      <ion-avatar slot=\"start\" *ngIf=\"value.recorderPerson; let recorderPerson\">\n        <img *ngIf=\"recorderPerson.avatar; else generateAvatar\"\n          src=\"{{ recorderPerson.avatar }}\">\n        <ng-template #generateAvatar>\n          <svg *ngIf=\"recorderPerson.id; let personId\"\n               width=\"38\" height=\"38\" [data-jdenticon-value]=\"personId\"></svg>\n        </ng-template>\n      </ion-avatar>\n\n      <!-- recorder name -->\n      <ion-label>\n        <ion-card-subtitle translate>COMMON.RECORDER</ion-card-subtitle>\n        <ion-card-title>{{value.recorderPerson?.firstName}} {{value.recorderPerson?.lastName}}</ion-card-title>\n        <ion-card-subtitle>{{value.recorderDepartment?.label}}</ion-card-subtitle>\n      </ion-label>\n\n      <ng-content select=\"[recorderSuffix]\"></ng-content>\n    </ion-item>\n\n    <ion-card-content>\n      <ion-label class=\"ion-text-wrap status\">\n        <!-- creation date -->\n        <ion-text *ngIf=\"value.creationDate\">\n          <ion-icon name=\"calendar\"></ion-icon>&nbsp;\n          <span translate>COMMON.CREATED_ON</span>\n          <span>&nbsp;<b>{{ value.creationDate | dateFormat: {time: true} }}</b></span>\n        </ion-text>\n\n        <!-- update date -->\n        <ion-text *ngIf=\"value.updateDate && value.updateDate != value.creationDate\">\n          <br *ngIf=\"value.creationDate\"/>\n          <ion-label>\n            <ion-icon name=\"time-outline\"></ion-icon>&nbsp;\n            <span translate>COMMON.UPDATED_ON</span>\n            <span>&nbsp;{{ value.updateDate | dateFormat: {time: true, seconds: true} }}</span>\n          </ion-label>\n        </ion-text>\n\n      </ion-label>\n\n      <ng-content></ng-content>\n\n    </ion-card-content>\n  </ion-card>\n</ng-container>\n", styles: ["ion-card ion-avatar{height:40px;width:40px}ion-card ion-avatar img,ion-card ion-avatar svg{border:solid 1px rgba(0,0,0,.2)}ion-card ion-avatar img{background-color:var(--ion-color-secondary)!important}ion-card ion-avatar svg{border-radius:20px;height:38px;width:38px}ion-card ion-card-content{background-color:var(--ion-color-light-tint)}ion-card ion-card-content ion-label.status,ion-card ion-card-content * ion-label.status{font-size:12px!important;color:var(--ion-color-step-850)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i4.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "pipe", type: i5.DateFormatPipe, name: "dateFormat" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: EntityMetadataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: EntityMetadataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-entity-metadata', animations: [fadeInAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"value && value.id\">\n  <ion-card @fadeInAnimation>\n\n    <!-- recorder -->\n    <ion-item color=\"light\"\n              *ngIf=\"showRecorder && value && (value.recorderDepartment || value.recorderPerson)\">\n\n      <!-- recorder avatar -->\n      <ion-avatar slot=\"start\" *ngIf=\"value.recorderPerson; let recorderPerson\">\n        <img *ngIf=\"recorderPerson.avatar; else generateAvatar\"\n          src=\"{{ recorderPerson.avatar }}\">\n        <ng-template #generateAvatar>\n          <svg *ngIf=\"recorderPerson.id; let personId\"\n               width=\"38\" height=\"38\" [data-jdenticon-value]=\"personId\"></svg>\n        </ng-template>\n      </ion-avatar>\n\n      <!-- recorder name -->\n      <ion-label>\n        <ion-card-subtitle translate>COMMON.RECORDER</ion-card-subtitle>\n        <ion-card-title>{{value.recorderPerson?.firstName}} {{value.recorderPerson?.lastName}}</ion-card-title>\n        <ion-card-subtitle>{{value.recorderDepartment?.label}}</ion-card-subtitle>\n      </ion-label>\n\n      <ng-content select=\"[recorderSuffix]\"></ng-content>\n    </ion-item>\n\n    <ion-card-content>\n      <ion-label class=\"ion-text-wrap status\">\n        <!-- creation date -->\n        <ion-text *ngIf=\"value.creationDate\">\n          <ion-icon name=\"calendar\"></ion-icon>&nbsp;\n          <span translate>COMMON.CREATED_ON</span>\n          <span>&nbsp;<b>{{ value.creationDate | dateFormat: {time: true} }}</b></span>\n        </ion-text>\n\n        <!-- update date -->\n        <ion-text *ngIf=\"value.updateDate && value.updateDate != value.creationDate\">\n          <br *ngIf=\"value.creationDate\"/>\n          <ion-label>\n            <ion-icon name=\"time-outline\"></ion-icon>&nbsp;\n            <span translate>COMMON.UPDATED_ON</span>\n            <span>&nbsp;{{ value.updateDate | dateFormat: {time: true, seconds: true} }}</span>\n          </ion-label>\n        </ion-text>\n\n      </ion-label>\n\n      <ng-content></ng-content>\n\n    </ion-card-content>\n  </ion-card>\n</ng-container>\n", styles: ["ion-card ion-avatar{height:40px;width:40px}ion-card ion-avatar img,ion-card ion-avatar svg{border:solid 1px rgba(0,0,0,.2)}ion-card ion-avatar img{background-color:var(--ion-color-secondary)!important}ion-card ion-avatar svg{border-radius:20px;height:38px;width:38px}ion-card ion-card-content{background-color:var(--ion-color-light-tint)}ion-card ion-card-content ion-label.status,ion-card ion-card-content * ion-label.status{font-size:12px!important;color:var(--ion-color-step-850)}\n"] }]
         }], propDecorators: { value: [{

package/esm2022/src/app/core/form/entity/entity.module.mjs

@@ -6,17 +6,17 @@ import { NgxJdenticonModule } from 'ngx-jdenticon';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppEntityFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AppEntityFormModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AppEntityFormModule, declarations: [
             // Other components
             EntityMetadataComponent], imports: [SharedModule, i1.TranslateModule, NgxJdenticonModule], exports: [TranslateModule,
             // Components
             EntityMetadataComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityFormModule, imports: [SharedModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityFormModule, imports: [SharedModule,
             TranslateModule.forChild(),
             NgxJdenticonModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppEntityFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppEntityFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/form/form.class.mjs

@@ -332,10 +332,10 @@ export class AppForm {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormGroup }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AppForm, inputs: { debug: "debug", tabindex: "tabindex", errorTranslatorOptions: "errorTranslatorOptions", form: "form" }, outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormGroup }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AppForm, inputs: { debug: "debug", tabindex: "tabindex", errorTranslatorOptions: "errorTranslatorOptions", form: "form" }, outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppForm, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormGroup }], propDecorators: { debug: [{
                 type: Input

package/esm2022/src/app/core/form/form.module.mjs

@@ -9,8 +9,8 @@ import { AppFormButtonsBarModule } from './buttons/form-buttons-bar.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AppFormModule, imports: [SharedModule, i1.TranslateModule, 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AppFormModule, imports: [SharedModule, i1.TranslateModule, 
             // Sub modules
             AppEntityFormModule,
             AppListFormModule,
@@ -23,7 +23,7 @@ export class AppFormModule {
             AppPropertiesFormModule,
             AppTextPopoverModule,
             AppFormButtonsBarModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormModule, imports: [SharedModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormModule, imports: [SharedModule,
             TranslateModule.forChild(),
             // Sub modules
             AppEntityFormModule,
@@ -38,7 +38,7 @@ export class AppFormModule {
             AppTextPopoverModule,
             AppFormButtonsBarModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/form/list/list.form.mjs

@@ -205,10 +205,10 @@ export class AppListForm extends AppForm {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppListForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i3.LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: AppListForm, selector: "app-list-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", displayWithFn: ["displayWith", "displayWithFn"], equalsFn: ["equals", "equalsFn"] }, outputs: { onNewItem: "onNewItem", selectionChanges: "selectionChanges" }, usesInheritance: true, ngImport: i0, template: "\n<ng-container *ngIf=\"!loading; else listSkeleton\">\n\n  <!-- List -->\n  <ion-list class=\"ion-no-padding\" >\n\n    <ng-container *ngFor=\"let itemControl of itemControls; index as i; last as last\">\n      <ion-item *ngIf=\"itemControl.value; let item\"\n                [class.disabled]=\"disabled\" tappable\n                (click)=\"onItemClick($event, item)\"\n                [color]=\"selection.isSelected(item) ? 'secondary100' : undefined\"\n                [button]=\"selectionChanges.observers|isNotEmptyArray\">\n        <ion-label>{{displayWith(item)}}</ion-label>\n\n        <!-- buttons -->\n        <ion-buttons slot=\"end\" *ngIf=\"enabled\" class=\"action-buttons\">\n          <ion-button fill=\"clear\" (click)=\"removeAt(i)\">\n            <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-button>\n\n          <ion-button *ngFor=\"let button of options.buttons\"\n                      fill=\"clear\" [color]=\"button.color\"\n                      [class.cdk-visually-hidden]=\"button.disabled|async\"\n                      (click)=\"onItemButtonClick(button, $event, item, i)\"\n                      [title]=\"(button.title || '')|translate\">\n            <ion-icon slot=\"icon-only\" [name]=\"button.icon\"></ion-icon>\n          </ion-button>\n\n        </ion-buttons>\n      </ion-item>\n    </ng-container>\n  </ion-list>\n\n  <!-- Add button -->\n  <ion-button color=\"tertiary\" fill=\"clear\"\n              *ngIf=\"enabled && onNewItem.observers.length; else emptyText\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"onNewClick($event)\" >\n    <ion-icon slot=\"start\" name=\"add\"></ion-icon>\n    <ion-label translate>COMMON.BTN_ADD</ion-label>\n  </ion-button>\n\n  <!-- Empty (if readonly) -->\n  <ng-template #emptyText>\n    <ion-text  *ngIf=\"!length\" color=\"medium\"><i translate>COMMON.EMPTY_OPTION</i></ion-text>\n  </ng-template>\n</ng-container>\n\n<ng-template #listSkeleton>\n\n  <ion-list>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n  </ion-list>\n\n</ng-template>\n\n<ng-template #itemSkeleton>\n\n  <ion-item>\n    <ion-label>\n      <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n    </ion-label>\n  </ion-item>\n\n</ng-template>\n", styles: [":host{--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-color-selected: var(--ion-color-secondary100-contrast)}ion-item.disabled ion-label{color:var(--ion-color-medium-shade, grey)}ion-item{--min-height: 48px;background-color:var(--ion-item-background)}ion-item ion-text,ion-item ion-label{color:var(--ion-item-color)}ion-item .action-buttons{visibility:hidden;display:none}ion-item:hover{height:var(--min-height);--ion-item-background-color: var(--ion-color-light);--ion-item-color: var(--ion-color-light-contrast)}ion-item:hover .action-buttons{margin-top:-1px;visibility:visible;display:block}ion-item.selected{--ion-item-background-color-hover: var(--ion-item-background-selected) !important;--ion-item-color-hover: var(--ion-item-color-selected) !important}\n"], dependencies: [{ 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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i5.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.NotEmptyArrayPipe, name: "isNotEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppListForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i3.LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AppListForm, selector: "app-list-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", displayWithFn: ["displayWith", "displayWithFn"], equalsFn: ["equals", "equalsFn"] }, outputs: { onNewItem: "onNewItem", selectionChanges: "selectionChanges" }, usesInheritance: true, ngImport: i0, template: "\n<ng-container *ngIf=\"!loading; else listSkeleton\">\n\n  <!-- List -->\n  <ion-list class=\"ion-no-padding\" >\n\n    <ng-container *ngFor=\"let itemControl of itemControls; index as i; last as last\">\n      <ion-item *ngIf=\"itemControl.value; let item\"\n                [class.disabled]=\"disabled\" tappable\n                (click)=\"onItemClick($event, item)\"\n                [color]=\"selection.isSelected(item) ? 'secondary100' : undefined\"\n                [button]=\"selectionChanges.observers|isNotEmptyArray\">\n        <ion-label>{{displayWith(item)}}</ion-label>\n\n        <!-- buttons -->\n        <ion-buttons slot=\"end\" *ngIf=\"enabled\" class=\"action-buttons\">\n          <ion-button fill=\"clear\" (click)=\"removeAt(i)\">\n            <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-button>\n\n          <ion-button *ngFor=\"let button of options.buttons\"\n                      fill=\"clear\" [color]=\"button.color\"\n                      [class.cdk-visually-hidden]=\"button.disabled|async\"\n                      (click)=\"onItemButtonClick(button, $event, item, i)\"\n                      [title]=\"(button.title || '')|translate\">\n            <ion-icon slot=\"icon-only\" [name]=\"button.icon\"></ion-icon>\n          </ion-button>\n\n        </ion-buttons>\n      </ion-item>\n    </ng-container>\n  </ion-list>\n\n  <!-- Add button -->\n  <ion-button color=\"tertiary\" fill=\"clear\"\n              *ngIf=\"enabled && onNewItem.observers.length; else emptyText\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"onNewClick($event)\" >\n    <ion-icon slot=\"start\" name=\"add\"></ion-icon>\n    <ion-label translate>COMMON.BTN_ADD</ion-label>\n  </ion-button>\n\n  <!-- Empty (if readonly) -->\n  <ng-template #emptyText>\n    <ion-text  *ngIf=\"!length\" color=\"medium\"><i translate>COMMON.EMPTY_OPTION</i></ion-text>\n  </ng-template>\n</ng-container>\n\n<ng-template #listSkeleton>\n\n  <ion-list>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n  </ion-list>\n\n</ng-template>\n\n<ng-template #itemSkeleton>\n\n  <ion-item>\n    <ion-label>\n      <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n    </ion-label>\n  </ion-item>\n\n</ng-template>\n", styles: [":host{--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-color-selected: var(--ion-color-secondary100-contrast)}ion-item.disabled ion-label{color:var(--ion-color-medium-shade, grey)}ion-item{--min-height: 48px;background-color:var(--ion-item-background)}ion-item ion-text,ion-item ion-label{color:var(--ion-item-color)}ion-item .action-buttons{visibility:hidden;display:none}ion-item:hover{height:var(--min-height);--ion-item-background-color: var(--ion-color-light);--ion-item-color: var(--ion-color-light-contrast)}ion-item:hover .action-buttons{margin-top:-1px;visibility:visible;display:block}ion-item.selected{--ion-item-background-color-hover: var(--ion-item-background-selected) !important;--ion-item-color-hover: var(--ion-item-color-selected) !important}\n"], dependencies: [{ 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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i5.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.NotEmptyArrayPipe, name: "isNotEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppListForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppListForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-list-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ng-container *ngIf=\"!loading; else listSkeleton\">\n\n  <!-- List -->\n  <ion-list class=\"ion-no-padding\" >\n\n    <ng-container *ngFor=\"let itemControl of itemControls; index as i; last as last\">\n      <ion-item *ngIf=\"itemControl.value; let item\"\n                [class.disabled]=\"disabled\" tappable\n                (click)=\"onItemClick($event, item)\"\n                [color]=\"selection.isSelected(item) ? 'secondary100' : undefined\"\n                [button]=\"selectionChanges.observers|isNotEmptyArray\">\n        <ion-label>{{displayWith(item)}}</ion-label>\n\n        <!-- buttons -->\n        <ion-buttons slot=\"end\" *ngIf=\"enabled\" class=\"action-buttons\">\n          <ion-button fill=\"clear\" (click)=\"removeAt(i)\">\n            <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-button>\n\n          <ion-button *ngFor=\"let button of options.buttons\"\n                      fill=\"clear\" [color]=\"button.color\"\n                      [class.cdk-visually-hidden]=\"button.disabled|async\"\n                      (click)=\"onItemButtonClick(button, $event, item, i)\"\n                      [title]=\"(button.title || '')|translate\">\n            <ion-icon slot=\"icon-only\" [name]=\"button.icon\"></ion-icon>\n          </ion-button>\n\n        </ion-buttons>\n      </ion-item>\n    </ng-container>\n  </ion-list>\n\n  <!-- Add button -->\n  <ion-button color=\"tertiary\" fill=\"clear\"\n              *ngIf=\"enabled && onNewItem.observers.length; else emptyText\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"onNewClick($event)\" >\n    <ion-icon slot=\"start\" name=\"add\"></ion-icon>\n    <ion-label translate>COMMON.BTN_ADD</ion-label>\n  </ion-button>\n\n  <!-- Empty (if readonly) -->\n  <ng-template #emptyText>\n    <ion-text  *ngIf=\"!length\" color=\"medium\"><i translate>COMMON.EMPTY_OPTION</i></ion-text>\n  </ng-template>\n</ng-container>\n\n<ng-template #listSkeleton>\n\n  <ion-list>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n  </ion-list>\n\n</ng-template>\n\n<ng-template #itemSkeleton>\n\n  <ion-item>\n    <ion-label>\n      <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n    </ion-label>\n  </ion-item>\n\n</ng-template>\n", styles: [":host{--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-color-selected: var(--ion-color-secondary100-contrast)}ion-item.disabled ion-label{color:var(--ion-color-medium-shade, grey)}ion-item{--min-height: 48px;background-color:var(--ion-item-background)}ion-item ion-text,ion-item ion-label{color:var(--ion-item-color)}ion-item .action-buttons{visibility:hidden;display:none}ion-item:hover{height:var(--min-height);--ion-item-background-color: var(--ion-color-light);--ion-item-color: var(--ion-color-light-contrast)}ion-item:hover .action-buttons{margin-top:-1px;visibility:visible;display:block}ion-item.selected{--ion-item-background-color-hover: var(--ion-item-background-selected) !important;--ion-item-color-hover: var(--ion-item-color-selected) !important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormBuilder }, { type: i2.DateAdapter }, { type: i3.LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: i1.FormGroupDirective, decorators: [{

package/esm2022/src/app/core/form/list/list.module.mjs

@@ -5,16 +5,16 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppListFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppListFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AppListFormModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppListFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AppListFormModule, declarations: [
             // Other components
             AppListForm], imports: [SharedModule, i1.TranslateModule], exports: [TranslateModule,
             // Components
             AppListForm] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppListFormModule, imports: [SharedModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppListFormModule, imports: [SharedModule,
             TranslateModule.forChild(), TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppListFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppListFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/form/properties/properties.form.mjs

@@ -117,12 +117,12 @@ export class AppPropertiesForm extends AppForm {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i3.LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: i4.PropertyValidator }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: AppPropertiesForm, selector: "app-properties-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", definitions: "definitions", chipColor: "chipColor" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i3.LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: i4.PropertyValidator }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AppPropertiesForm, selector: "app-properties-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", definitions: "definitions", chipColor: "chipColor" }, providers: [
             { provide: PropertyValidator, useClass: PropertyValidator }
         ], usesInheritance: true, ngImport: i0, template: "\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  <ion-grid *ngIf=\"!loading; else propertiesSkeleton\"\n            formArrayName=\"properties\" class=\"ion-no-padding\" >\n    <ion-row class=\"ion-no-padding\">\n      <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n        <span class=\"toolbar-spacer\"></span>\n\n        <!-- Show more options -->\n        <ion-button color=\"light\" *ngIf=\"formArray?.length === 0\"\n                    [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                    (click)=\"helper.add()\">\n          <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n    <ng-container *ngFor=\"let fieldForm of fieldForms; let i=index\">\n      <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"auto\" *ngIf=\"fieldForm|formGetControl:'key' as control\">\n            <mat-label>{{'SETTINGS.PROPERTY_KEY'|translate}}</mat-label>\n            <mat-select [formControl]=\"control\"\n                        (selectionChange)=\"updateDefinitionAt(i)\"\n                        [tabindex]=\"20+i*2\"\n                        required>\n\n              <!-- When option's key not a well known option, add it as first select option -->\n              <mat-option *ngIf=\"isUnknownField(fieldForm)\" [value]=\"control.value\">\n                {{control.value}}\n              </mat-option>\n\n              <mat-option *ngFor=\"let item of definitions\" [value]=\"item.key\">{{ item.label | translate }}\n              </mat-option>\n\n            </mat-select>\n\n            <mat-error *ngIf=\"control.hasError('required') && !helper.isLast(i)\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </ion-col>\n\n        <!-- property value -->\n        <ion-col class=\"ion-no-padding\" padding-left >\n          <app-form-field *ngIf=\"getDefinitionAt(i); let definition; else unknownValue\"\n                          floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"fieldForm|formGetControl:'value'\"\n                          [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                          [chipColor]=\"chipColor\"\n                          [required]=\"true\"\n                          [tabindex]=\"20+i*2 + 1\">\n          </app-form-field>\n          <ng-template #unknownValue>\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.PROPERTY_VALUE' | translate}}</mat-label>\n              <input type=\"text\" matInput\n                     [formControl]=\"fieldForm|formGetControl:'value'\"\n                     [required]=\"true\"\n                     [tabindex]=\"20+i*2 + 1\">\n            </mat-form-field>\n          </ng-template>\n        </ion-col>\n\n        <ion-col size=\"auto\" class=\"ion-no-padding\">\n          <button type=\"button\" mat-icon-button color=\"light\"\n                  [disabled]=\"disabled\"\n                  [title]=\"'COMMON.BTN_DELETE'|translate\"\n                  (click)=\"removeAt(i)\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <button [hidden]=\"!helper.isLast(i)\"\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"disabled\"\n                  [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                  (click)=\"helper.add()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ng-container>\n  </ion-grid>\n</form>\n\n<ng-template #propertiesSkeleton>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n  </ion-grid>\n\n</ng-template>\n\n<ng-template #propertyRowSkeleton>\n\n  <ion-row>\n    <!-- property key -->\n    <ion-col>\n      <mat-form-field>\n        <input matInput hidden>\n        <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n        <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n      </mat-form-field>\n    </ion-col>\n    <!-- value -->\n    <ion-col>\n      <mat-form-field>\n        <input matInput hidden>\n        <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n      </mat-form-field>\n    </ion-col>\n    <!-- buttons -->\n    <ion-col size=\"2\">\n      <button type=\"button\" mat-icon-button color=\"light\"\n              [disabled]=\"true\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </ion-col>\n  </ion-row>\n\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.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: i6.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: i6.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i6.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i6.IonRow, selector: "ion-row" }, { kind: "component", type: i6.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "directive", type: i7.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i13.AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i14.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-properties-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: PropertyValidator, useClass: PropertyValidator }

package/esm2022/src/app/core/form/properties/properties.module.mjs

@@ -7,19 +7,19 @@ import { AppTableModule } from '../../table/table.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppPropertiesFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesFormModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesFormModule, declarations: [
             // Other components
             AppPropertiesForm,
             AppPropertiesTable], imports: [SharedModule, i1.TranslateModule, AppTableModule], exports: [TranslateModule,
             // Components
             AppPropertiesForm,
             AppPropertiesTable] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesFormModule, imports: [SharedModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesFormModule, imports: [SharedModule,
             TranslateModule.forChild(),
             AppTableModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/form/properties/properties.table.mjs

@@ -97,10 +97,10 @@ export class PropertyEntityValidator extends AppValidatorService {
             value: [data?.value || null]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEntityValidator, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: PropertyEntityValidator, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertyEntityValidator, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: PropertyEntityValidator, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEntityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertyEntityValidator, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }] });
 export class AppPropertiesTable extends AppInMemoryTable {
@@ -245,12 +245,12 @@ export class AppPropertiesTable extends AppInMemoryTable {
         const value = values.find(v => v.id === definition.key)?.value;
         return isNotNil(value) ? value : definition.defaultValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [
             { provide: PropertyEntityValidator, useClass: PropertyEntityValidator }
         ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n              aria-hidden=\"false\"\n    >filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.FILTER.SEARCH'|translate}}</mat-label>\n              <input matInput formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"'52px'\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|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=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\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.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: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.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: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i3.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i14.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i15.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: i16.AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: i17.ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i18.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i19.NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: i20.FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: i20.FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
             args: [{ selector: 'app-properties-table', providers: [
                         { provide: PropertyEntityValidator, useClass: PropertyEntityValidator }

package/esm2022/src/app/core/form/properties/property.validator.mjs

@@ -15,10 +15,10 @@ export class PropertyValidator extends AppValidatorService {
             value: [data && data.value || null, Validators.required]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyValidator, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: PropertyValidator, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertyValidator, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: PropertyValidator, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertyValidator, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvcGVydHkudmFsaWRhdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9jb3JlL2Zvcm0vcHJvcGVydGllcy9wcm9wZXJ0eS52YWxpZGF0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQXFCLFVBQVUsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRTlELE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLCtDQUErQyxDQUFDOzs7QUFHbEYsTUFBTSxPQUFPLGlCQUFrQixTQUFRLG1CQUE2QjtJQUd0RDtJQURaLFlBQ1ksV0FBK0I7UUFFekMsS0FBSyxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUZmLGdCQUFXLEdBQVgsV0FBVyxDQUFvQjtJQUczQyxDQUFDO0lBRUQsa0JBQWtCLENBQUMsSUFBZTtRQUNoQyxPQUFPO1lBQ0wsR0FBRyxFQUFFLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxHQUFHLElBQUksSUFBSSxFQUFFLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzlGLEtBQUssRUFBRSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksRUFBRSxVQUFVLENBQUMsUUFBUSxDQUFDO1NBQ3pELENBQUM7SUFDSixDQUFDO3VHQWJVLGlCQUFpQjsyRkFBakIsaUJBQWlCOzsyRkFBakIsaUJBQWlCO2tCQUQ3QixTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtEaXJlY3RpdmV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtVbnR5cGVkRm9ybUJ1aWxkZXIsIFZhbGlkYXRvcnN9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7UHJvcGVydHl9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQge0FwcFZhbGlkYXRvclNlcnZpY2V9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3ZhbGlkYXRvci9iYXNlLnZhbGlkYXRvci5jbGFzcyc7XG5cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGNsYXNzIFByb3BlcnR5VmFsaWRhdG9yIGV4dGVuZHMgQXBwVmFsaWRhdG9yU2VydmljZTxQcm9wZXJ0eT4ge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCBmb3JtQnVpbGRlcjogVW50eXBlZEZvcm1CdWlsZGVyXG4gICkge1xuICAgIHN1cGVyKGZvcm1CdWlsZGVyLCBudWxsKTtcbiAgfVxuXG4gIGdldEZvcm1Hcm91cENvbmZpZyhkYXRhPzogUHJvcGVydHkpOiB7IFtwOiBzdHJpbmddOiBhbnkgfSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGtleTogW2RhdGEgJiYgZGF0YS5rZXkgfHwgbnVsbCwgVmFsaWRhdG9ycy5jb21wb3NlKFtWYWxpZGF0b3JzLnJlcXVpcmVkLCBWYWxpZGF0b3JzLm1heCg1MCldKV0sXG4gICAgICB2YWx1ZTogW2RhdGEgJiYgZGF0YS52YWx1ZSB8fCBudWxsLCBWYWxpZGF0b3JzLnJlcXVpcmVkXVxuICAgIH07XG4gIH1cbn1cblxuIl19

package/esm2022/src/app/core/form/properties/testing/properties-form.test.mjs

@@ -82,10 +82,10 @@ export class PropertiesFormTestPage {
     async suggestEntity(value, filter) {
         return suggestFromArray(FAKE_ENTITIES, value, filter);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestPage, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: PropertiesFormTestPage, selector: "app-properties-form-test", viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, read: AppPropertiesForm, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Properties form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form [formGroup]=\"form\">\n    <app-properties-form #propertiesForm\n                         formArrayName=\"properties\"\n                         [definitions]=\"propertyDefinitions\" [options]=\"{allowEmptyArray: true}\">\n\n    </app-properties-form>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "definitions", "chipColor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestPage, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: PropertiesFormTestPage, selector: "app-properties-form-test", viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, read: AppPropertiesForm, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Properties form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form [formGroup]=\"form\">\n    <app-properties-form #propertiesForm\n                         formArrayName=\"properties\"\n                         [definitions]=\"propertyDefinitions\" [options]=\"{allowEmptyArray: true}\">\n\n    </app-properties-form>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "definitions", "chipColor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-properties-form-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Properties form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form [formGroup]=\"form\">\n    <app-properties-form #propertiesForm\n                         formArrayName=\"properties\"\n                         [definitions]=\"propertyDefinitions\" [options]=\"{allowEmptyArray: true}\">\n\n    </app-properties-form>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { propertiesForm: [{

package/esm2022/src/app/core/form/properties/testing/properties-form.testing.module.mjs

@@ -8,17 +8,17 @@ import { CoreModule } from '../../../core.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class PropertiesFormTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestingModule, declarations: [PropertiesFormTestPage], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestingModule, declarations: [PropertiesFormTestPage], imports: [CommonModule,
             SharedModule,
             CoreModule, i1.TranslateModule], exports: [RouterModule,
             PropertiesFormTestPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestingModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestingModule, imports: [CommonModule,
             SharedModule,
             CoreModule,
             TranslateModule.forChild(), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertiesFormTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PropertiesFormTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [