@decaf-ts/for-angular 0.0.69 → 0.0.70

package/fesm2022/decaf-ts-for-angular.mjs

@@ -12,7 +12,7 @@ import { TranslateModule, TranslatePipe, TranslateParser, provideTranslateServic
 import { Logging, LoggedClass } from '@decaf-ts/logging';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { uses, Metadata, apply, metadata } from '@decaf-ts/decoration';
-import { AnimationController, provideIonicAngular, IonIcon, IonButton, IonModal, IonSpinner, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, NavController } from '@ionic/angular/standalone';
+import { AnimationController, provideIonicAngular, IonIcon, IonButton, IonModal, IonSpinner, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, LoadingController, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonBadge, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, NavController } from '@ionic/angular/standalone';
 import { faker } from '@faker-js/faker';
 import { Router, NavigationStart, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, timer, firstValueFrom, debounceTime, takeUntil as takeUntil$1, shareReplay as shareReplay$1 } from 'rxjs';
@@ -45,9 +45,9 @@ import { MenuController } from '@ionic/angular';
 const DefaultListEmptyOptions = {
     title: 'empty.title',
     subtitle: 'empty.subtitle',
-    showButton: false,
+    showButton: true,
     icon: 'folder-open-outline',
-    buttonText: 'locale.empty.button',
+    buttonText: 'create',
     link: '',
 };
 const DefaultModalOptions = {
@@ -4077,9 +4077,7 @@ class NgxComponentDirective extends DecafComponent {
                             }
                         }
                         catch (error) {
-                            this.log
-                                .for(this.ngOnChanges)
-                                .warn(`Error occurred while processing event "${key}": ${error?.message || error}`);
+                            this.log.for(this.ngOnChanges).error(`Error occurred while processing event "${key}": ${error?.message || error}`);
                         }
                     }
                 }
@@ -6092,6 +6090,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
          * @memberOf CrudFieldComponent
          */
         this.translatable = true;
+        this.loadingController = inject(LoadingController);
         addIcons({ chevronDownOutline, chevronUpOutline });
     }
     /**
@@ -6108,8 +6107,9 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         this.options = await this.getOptions();
         if (Array.isArray(this.hidden) && !this.hidden.includes(this.operation))
             this.hidden = false;
-        if (this.hidden && this.hidden.includes(this.operation))
-            this.hidden = true;
+        if (this.readonly && typeof this.readonly === Function.name.toLocaleLowerCase())
+            if (this.hidden && this.hidden.includes(this.operation))
+                this.hidden = true;
         if (this.valueParserFn && typeof this.valueParserFn === Function.name.toLowerCase())
             this.value = this.valueParserFn(this.value, this);
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
@@ -6213,7 +6213,10 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         if (selectInterface === SelectFieldInterfaces.MODAL) {
             event.preventDefault();
             event.stopImmediatePropagation();
+            const loading = await this.loadingController.create({});
+            await loading.present();
             const modal = await getNgxSelectOptionsModal(this.label, this.options);
+            loading.remove();
             const { data, role } = await modal.onWillDismiss();
             if (role === ActionRoles.confirm && data !== this.value) {
                 this.setValue(data);
@@ -6267,7 +6270,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         return this.formControl.value.includes(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if ((operation === OperationKeys.READ || operation === OperationKeys.DELETE) || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div>\n        <ion-item [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\" [class]=\"'dcf-input-item ' + operation\" #component>\n          <ion-label>\n            {{ label | translate }}<br />\n            @if (value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              @if (['checkbox'].includes(type) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === HTML5InputTypes.TEXTAREA) {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type ===  HTML5InputTypes.CHECKBOX) {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [attr.readonly]=\"readonly\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [attr.readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === HTML5InputTypes.RADIO && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [attr.readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n          }\n          @else if (type === HTML5InputTypes.SELECT) {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges($event)\"\n                (ionChange)=\"handleModalChildChanges($event)\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value ?? null\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n                @if((value && !required) || (!required && (value !== undefined && value !== ''))) {\n                  <ion-button fill=\"clear\" (click)=\"handleClearValue($event)\" slot=\"end\" aria-label=\"Show/hide password\">\n                    <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                  </ion-button>\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\n\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if ((operation === OperationKeys.READ || operation === OperationKeys.DELETE) || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div>\n        <ion-item [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\" [class]=\"'dcf-input-item ' + operation\" #component>\n          <ion-label>\n            {{ label | translate }}<br />\n            @if (type !== 'checkbox' && value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              <ion-badge mode=\"md\" color=\"light\">\n                <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{value}}</ion-text>\n              </ion-badge>\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === HTML5InputTypes.TEXTAREA) {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type ===  HTML5InputTypes.CHECKBOX) {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [attr.readonly]=\"readonly\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [attr.readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === HTML5InputTypes.RADIO && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [attr.readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n          }\n          @else if (type === HTML5InputTypes.SELECT) {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges($event)\"\n                (ionChange)=\"handleModalChildChanges($event)\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value ?? null\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n                @if((value && !required) || (!required && (value !== undefined && value !== ''))) {\n                  <ion-button fill=\"clear\" (click)=\"handleClearValue($event)\" slot=\"end\" aria-label=\"Show/hide password\">\n                    <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                  </ion-button>\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\n\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic(),
@@ -6286,10 +6289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonSelect,
                         IonSelectOption,
                         IonLabel,
+                        IonBadge,
                         IonText,
                         IonTextarea,
                         IconComponent
-                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if ((operation === OperationKeys.READ || operation === OperationKeys.DELETE) || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div>\n        <ion-item [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\" [class]=\"'dcf-input-item ' + operation\" #component>\n          <ion-label>\n            {{ label | translate }}<br />\n            @if (value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              @if (['checkbox'].includes(type) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === HTML5InputTypes.TEXTAREA) {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type ===  HTML5InputTypes.CHECKBOX) {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [attr.readonly]=\"readonly\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [attr.readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === HTML5InputTypes.RADIO && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [attr.readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n          }\n          @else if (type === HTML5InputTypes.SELECT) {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges($event)\"\n                (ionChange)=\"handleModalChildChanges($event)\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value ?? null\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n                @if((value && !required) || (!required && (value !== undefined && value !== ''))) {\n                  <ion-button fill=\"clear\" (click)=\"handleClearValue($event)\" slot=\"end\" aria-label=\"Show/hide password\">\n                    <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                  </ion-button>\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\n\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if ((operation === OperationKeys.READ || operation === OperationKeys.DELETE) || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div>\n        <ion-item [class.dcf-item-readonly]=\"readonly && operation !== OperationKeys.READ\" [class]=\"'dcf-input-item ' + operation\" #component>\n          <ion-label>\n            {{ label | translate }}<br />\n            @if (type !== 'checkbox' && value) {\n                <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n            } @else {\n              <ion-badge mode=\"md\" color=\"light\">\n                <ion-text [color]=\"!value ? 'danger' : 'primary'\">{{value}}</ion-text>\n              </ion-badge>\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === HTML5InputTypes.TEXTAREA) {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type ===  HTML5InputTypes.CHECKBOX) {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [attr.readonly]=\"readonly\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [attr.readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === HTML5InputTypes.RADIO && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [attr.readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n          }\n          @else if (type === HTML5InputTypes.SELECT) {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges($event)\"\n                (ionChange)=\"handleModalChildChanges($event)\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value ?? null\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n                @if((value && !required) || (!required && (value !== undefined && value !== ''))) {\n                  <ion-button fill=\"clear\" (click)=\"handleClearValue($event)\" slot=\"end\" aria-label=\"Show/hide password\">\n                    <ngx-decaf-icon size=\"small\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n                  </ion-button>\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\n\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7055,7 +7059,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-first-column+div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -7063,7 +7067,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-first-column+div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], grid: [{
@@ -10052,6 +10056,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async ngOnInit() {
+        this.initialized = false;
         this.repositoryObserver = {
             refresh: async (...args) => this.handleRepositoryRefresh(...args),
         };
@@ -10079,9 +10084,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             this.createButton = false;
         if (typeof this.item?.['tag'] === 'boolean' && this.item?.['tag'] === true)
             this.item['tag'] = ComponentsTagNames.LIST_ITEM;
-        this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
         if (!this.initialized)
             this.parseProps(this);
+        this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
         this.initialized = true;
         await this.refresh();
     }
@@ -10858,12 +10863,14 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (typeof this.searchValue === Primitives.STRING)
             return this.searchValue || '';
         const searchValue = this.searchValue;
+        if (searchValue?.query === undefined)
+            return this.searchValue || '';
         return (searchValue?.query)
             .map((item) => `${item.index} ${item.condition} ${item.value}`)
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: 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: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }]\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty.model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: 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: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -10891,7 +10898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent,
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route,\n            model: child\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }]\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty.model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -12844,6 +12851,7 @@ class NgxEventHandler extends DecafEventHandler {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor() {
         super();
+        this.readonly = false;
     }
     async refresh(...args) {
         this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
@@ -13111,7 +13119,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             }
         }
         catch (error) {
-            this.log.warn(`Error getting repository for model: ${this.modelName}. ${error.message}`);
+            this.log.warn(`Error getting repository for model: ${this.modelName || this.model?.constructor?.name}. ${error.message}`);
             this._repository = undefined;
             // throw new InternalError((error as Error)?.message || (error as string));
         }
@@ -13318,8 +13326,11 @@ class NgxModelPageDirective extends NgxPageDirective {
             this.location.back();
             return undefined;
         }
-        if (!modelName)
+        if (!modelName) {
             modelName = this.modelName;
+            if (!modelName && this.model?.constructor)
+                this.modelName = modelName = this.model.constructor.name;
+        }
         const getRepository = async (modelName, parent, model) => {
             if (this._repository)
                 return this._repository;