@decaf-ts/for-angular 0.1.22 → 0.1.24

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

@@ -7801,7 +7801,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.17", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", 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" }, 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 (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\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\"\n        #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($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\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                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", 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;max-width:200px!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.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", 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" }, 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 (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\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\"\n        #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($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\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                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", 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;max-width:200px!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.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(),
@@ -7824,7 +7824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         IonText,
                         IonTextarea,
                         IconComponent,
-                    ], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label>\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\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\"\n        #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($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\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                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", 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;max-width:200px!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 (\n  operation === OperationKeys.READ ||\n  operation === OperationKeys.DELETE ||\n  readonly\n) {\n  @if (!hidden) {\n    <ng-container>\n      <div>\n        <ion-item\n          [class.dcf-item-readonly]=\"\n            readonly && operation !== OperationKeys.READ\n          \"\n          [class]=\"'dcf-input-item ' + operation\"\n          #component\n        >\n          <ion-label [id]=\"name\">\n            @if (refreshing) {\n              <br />\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            } @else {\n              {{ label | translate }}\n              <br />\n              @if (type !== 'checkbox' && value) {\n                <ion-text\n                  [innerHTML]=\"type === 'password' ? '********' : value\"\n                ></ion-text>\n              } @else {\n                @if (type === 'checkbox') {\n                  <ion-badge\n                    mode=\"md\"\n                    color=\"light\"\n                  >\n                    <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n                      {{ value }}\n                    </ion-text>\n                  </ion-badge>\n                } @else {\n                  <ion-text [innerHTML]=\"value\"></ion-text>\n                }\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\"\n        #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($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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        } @else if (type === HTML5InputTypes.CHECKBOX) {\n          @if (!options?.length) {\n            <ion-item\n              class=\"dcf-width-1-1\"\n              [hidden]=\"hidden\"\n            >\n              <ion-checkbox\n                (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                (ionChange)=\"handleModalChildChanges($event, formControl)\"\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              >\n                <span>{{ label | translate }}</span>\n              </ion-checkbox>\n            </ion-item>\n          } @else {\n            <div class=\"dcf-checkbox-group\">\n              <label\n                class=\"dcf-label\"\n                [for]=\"path\"\n              >\n                {{ label | translate }}\n              </label>\n              @for (option of options; track trackItemFn($index, option.text)) {\n                <ion-item\n                  class=\"dcf-width-1-1\"\n                  [button]=\"true\"\n                >\n                  <ion-checkbox\n                    (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                    (ionChange)=\"handleModalChildChanges($event, formControl)\"\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                  >\n                    <span>\n                      {{ $index + 1 }}.\n                      {{\n                        translatable ? (option?.text | translate) : option?.text\n                      }}\n                    </span>\n                  </ion-checkbox>\n                </ion-item>\n              }\n              <span\n                class=\"dcf-error\"\n                [innerHTML]=\"getErrors(container)\"\n              ></span>\n            </div>\n          }\n        } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n          <ion-radio-group\n            class=\"dcf-width-1-1\"\n            [formControlName]=\"name\"\n            [value]=\"value\"\n            #component\n          >\n            <label\n              class=\"dcf-radio-group-label\"\n              [for]=\"path\"\n            >\n              {{ label | translate }}\n            </label>\n            @for (option of options; track $index) {\n              <ion-item>\n                <ion-radio\n                  (ionInput)=\"handleModalChildChanges($event, formControl)\"\n                  (ionChange)=\"handleModalChildChanges($event, formControl)\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [attr.readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >\n                  {{ translatable ? (option?.text | translate) : option?.text }}\n                </ion-radio>\n                <span\n                  class=\"dcf-error\"\n                  [innerHTML]=\"getErrors(container)\"\n                ></span>\n              </ion-item>\n            }\n          </ion-radio-group>\n          <span\n            class=\"dcf-error\"\n            [innerHTML]=\"getErrors(container)\"\n          ></span>\n        } @else if (type === HTML5InputTypes.SELECT) {\n          <div>\n            <ion-select\n              (ionInput)=\"handleModalChildChanges($event)\"\n              (ionChange)=\"handleModalChildChanges($event)\"\n              (click)=\"handleModalChildChanges($event, formControl)\"\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\"\n              #component\n            >\n              @if (options?.length) {\n                @for (\n                  option of options;\n                  track trackItemFn($index, option.text)\n                ) {\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                  >\n                    {{ option.text }}\n                  </ion-select-option>\n                }\n              }\n              @if (\n                (value && !required) ||\n                (!required && value !== undefined && value !== '')\n              ) {\n                <ion-button\n                  fill=\"clear\"\n                  (click)=\"handleClearValue($event)\"\n                  slot=\"end\"\n                  aria-label=\"Show/hide password\"\n                >\n                  <ngx-decaf-icon\n                    size=\"small\"\n                    slot=\"icon-only\"\n                    [name]=\"'ti-input-x'\"\n                  />\n                </ion-button>\n              }\n            </ion-select>\n            <div\n              class=\"dcf-error\"\n              [class.dcf-options-error]=\"!options?.length\"\n              [innerHTML]=\"\n                options?.length\n                  ? getErrors(container)\n                  : ('errors.empty_options' | translate: { '0': name })\n              \"\n            ></div>\n          </div>\n        } @else {\n          <ion-input\n            (ionInput)=\"handleModalChildChanges($event, formControl)\"\n            (ionChange)=\"handleModalChildChanges($event, formControl)\"\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            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\"\n            #component\n          />\n\n          <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\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", 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;max-width:200px!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 }]
@@ -14179,21 +14179,23 @@ class DecafTooltipDirective {
         };
         if (options?.text && options?.text.trim().length) {
             const value = options.text.replace(/<[^>]+>/g, '').trim();
-            const text = !options.truncate
-                ? value
-                : this.truncatePipe.transform(value, options.limit, options.trail || '...');
-            const element = this.element?.nativeElement ? this.element?.nativeElement : this.element;
-            if (options.truncate) {
-                this.renderer.setProperty(element, 'innerHTML', '');
-                const textNode = this.renderer.createText(text);
-                this.renderer.appendChild(element, textNode);
-            }
-            // creating tooltip element
-            const tooltip = this.renderer.createElement('span');
-            this.renderer.addClass(tooltip, 'dcf-tooltip');
-            this.renderer.appendChild(tooltip, this.renderer.createText(this.truncatePipe.sanitize(value)));
-            this.renderer.appendChild(element, tooltip);
-            this.renderer.addClass(element, 'dcf-tooltip-parent');
+            if (value.length > options.limit) {
+                const text = !options.truncate
+                    ? value
+                    : this.truncatePipe.transform(value, options.limit, options.trail || '...');
+                const element = this.element?.nativeElement ? this.element?.nativeElement : this.element;
+                if (options.truncate) {
+                    this.renderer.setProperty(element, 'innerHTML', '');
+                    const textNode = this.renderer.createText(text);
+                    this.renderer.appendChild(element, textNode);
+                }
+                // creating tooltip element
+                const tooltip = this.renderer.createElement('span');
+                this.renderer.addClass(tooltip, 'dcf-tooltip');
+                this.renderer.appendChild(tooltip, this.renderer.createText(this.truncatePipe.sanitize(value)));
+                this.renderer.appendChild(element, tooltip);
+                this.renderer.addClass(element, 'dcf-tooltip-parent');
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DecafTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -14961,7 +14963,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? { text: col.value.value, truncate: maxContentLength }\n                      : {}\n                  \"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\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      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages"], outputs: ["clickEvent"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? {\n                          text: col.value.value,\n                          truncate: true,\n                          limit: maxContentLength,\n                        }\n                      : {}\n                  \"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\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      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages"], outputs: ["clickEvent"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14978,7 +14980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         IconComponent,
                         PaginationComponent,
                         DecafTooltipDirective,
-                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? { text: col.value.value, truncate: maxContentLength }\n                      : {}\n                  \"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\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      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
+                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">\n              {{ locale + '.filter.all' | translate }}\n            </ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">\n                {{ option.text }}\n              </ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon\n                fill=\"clear\"\n                slot=\"icon-only\"\n                [name]=\"'ti-input-x'\"\n              />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div\n  class=\"dcf-table-container\"\n  [class.dcf-empty]=\"!data?.length\"\n  #component\n>\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                  [ngx-decaf-tooltip]=\"\n                    maxContentLength > 0 && !preserve.includes(col.value.prop)\n                      ? {\n                          text: col.value.value,\n                          truncate: true,\n                          limit: maxContentLength,\n                        }\n                      : {}\n                  \"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.UPDATE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect(\n                              $event,\n                              item.uid.value,\n                              OperationKeys.DELETE,\n                              true\n                            )\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [refreshing]=\"refreshing\"\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      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"\n          'component.list.search.subtitle'\n            | translate: { '0': parseSearchValue() }\n        \"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n\n<div class=\"dcf-table-pagination\">\n  @if (pages > 0 && !searchValue) {\n    <ngx-decaf-pagination\n      [table]=\"component\"\n      [totalPages]=\"pages\"\n      [disablePages]=\"disablePaginationPages\"\n      [truncatePages]=\"truncatePaginationPages\"\n      [current]=\"page\"\n      (clickEvent)=\"handlePaginate($event)\"\n    />\n  }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
         }], propDecorators: { maxContentLength: [{
                 type: Input
             }], preserve: [{