ets-fe-ng-sdk 19.0.10 → 19.0.11

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -3,7 +3,7 @@ import { FormControl, Validators, FormArray, FormGroup, FormBuilder, NG_VALUE_AC
 import 'zone.js/plugins/zone-error';
 import { cloneDeep, clone, uniqBy, uniq, isEqual, isEmpty } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, model, output, effect, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, forwardRef, HostListener, viewChild, Inject, HostBinding, DestroyRef, contentChild, ChangeDetectorRef, ElementRef, InjectionToken, ErrorHandler } from '@angular/core';
+import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, model, output, effect, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, forwardRef, HostListener, viewChild, linkedSignal, Inject, HostBinding, DestroyRef, contentChild, ChangeDetectorRef, ElementRef, InjectionToken, ErrorHandler } from '@angular/core';
 import * as i1 from '@angular/common';
 import { Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, CommonModule, NgClass, JsonPipe, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { faPlus, faSlidersH, faMoneyCheck, faCancel, faCheck, faListAlt, faClone, faCogs, faTrash, faDownload, faEdit, faFileExport, faFile, faFilter, faPenFancy, faUserShield, faHistory, faHome, faFileImport, faInfoCircle, faLock, faArrowRight, faPause, faPen, faArrowLeft, faRecycle, faSave, faSearch, faEye, faBellSlash, faUpload, faUnlock, faUsers, faStop, faTruck, faTag, faReceipt, faBank, faArrowsH, faPlay, faPercent, faHandshake, faCircleExclamation, faTable, faSpoon } from '@fortawesome/free-solid-svg-icons';
@@ -6959,7 +6959,7 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
         super();
         this.autoS = autoS;
         this.cOptions = computed(() => this.autoS.normalizeOptions(this.options()));
-        this.filteredOptions = computed(() => this.autoS.filterOptions(this.valueSignal(), this.cOptions()));
+        this.filteredOptions = linkedSignal(() => this.autoS.filterOptions(this.valueSignal(), this.cOptions()));
         // readonly cfilteredOptions = computed(() => this.autoS.filterOptions(this.valueSignal(), this.cOptions()));
         this.validate = true;
         this.skipDoesOptionExistCheck = model();
@@ -7020,9 +7020,9 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
     }
     selected($event) {
         this.mSelectedOptionLabel.emit(this.displayWith(this.control()?.getRawValue()));
-        // setTimeout(() => {
-        //   this.filteredOptions.set(this.options());
-        // }, 600);
+        setTimeout(() => {
+            this.filteredOptions.set(this.cOptions());
+        }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AutocompleteTdRfComponent, deps: [{ token: AutocompleteService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions($event)\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\"\n        (optionSelected)=\"selected($event)\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{ optionsFunc ? 'Type to search' : placeholder() }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"item.hint || ele.innerText\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ item.label | appTranslate: translatorOptions() | async }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
@@ -7060,7 +7060,7 @@ class AutocompleteComponent extends InputBasicComponent {
     constructor() {
         super(...arguments);
         this.cOptions = computed(() => this.autoS.normalizeOptions(this.options()));
-        this.filteredOptions = computed(() => {
+        this.filteredOptions = linkedSignal(() => {
             return this.autoS.filterOptions(this.valueSignal(), this.cOptions());
         });
         this.showRequiredTag = true;
@@ -7124,9 +7124,9 @@ class AutocompleteComponent extends InputBasicComponent {
         this.mSelectedOptionLabel.emit(this.displayWith(this.control()?.getRawValue()));
         this.control().formattedValue = this.displayWith(this.control()?.getRawValue());
         super.change({ target: { value: $event.option.value } });
-        // setTimeout(() => {
-        //   this.filteredOptions.set(this.options());
-        // }, 600);
+        setTimeout(() => {
+            this.filteredOptions.set(this.cOptions());
+        }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions($event)\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\"\n        (optionSelected)=\"selected($event)\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{ optionsFunc ? 'Type to search' : placeholder() }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"item.hint || ele.innerText\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ item.label | appTranslate: translatorOptions() | async }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
@@ -16267,7 +16267,7 @@ class VerticalNavComponent {
         // }, 500);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: VerticalNavComponent, isStandalone: true, selector: "vertical-nav", inputs: { shouldShowChildInput: { classPropertyName: "shouldShowChildInput", publicName: "shouldShowChildInput", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogo: { classPropertyName: "toolbarLogo", publicName: "toolbarLogo", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogoStyle: { classPropertyName: "toolbarLogoStyle", publicName: "toolbarLogoStyle", isSignal: true, isRequired: false, transformFunction: null }, fixedTopGap: { classPropertyName: "fixedTopGap", publicName: "fixedTopGap", isSignal: true, isRequired: false, transformFunction: null }, sidenavTemplate: { classPropertyName: "sidenavTemplate", publicName: "sidenavTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarEndTemplate: { classPropertyName: "toolbarEndTemplate", publicName: "toolbarEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, useToolbar: { classPropertyName: "useToolbar", publicName: "useToolbar", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["snav"], descendants: true, isSignal: true }, { propertyName: "toolbarContRef", first: true, predicate: ["toolbarCont"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:10px;border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)}.vertical-nav-side-padding{padding:var(--space-8)}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i5$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: VerticalNavComponent, isStandalone: true, selector: "vertical-nav", inputs: { shouldShowChildInput: { classPropertyName: "shouldShowChildInput", publicName: "shouldShowChildInput", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogo: { classPropertyName: "toolbarLogo", publicName: "toolbarLogo", isSignal: true, isRequired: false, transformFunction: null }, toolbarLogoStyle: { classPropertyName: "toolbarLogoStyle", publicName: "toolbarLogoStyle", isSignal: true, isRequired: false, transformFunction: null }, fixedTopGap: { classPropertyName: "fixedTopGap", publicName: "fixedTopGap", isSignal: true, isRequired: false, transformFunction: null }, sidenavTemplate: { classPropertyName: "sidenavTemplate", publicName: "sidenavTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarEndTemplate: { classPropertyName: "toolbarEndTemplate", publicName: "toolbarEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, useToolbar: { classPropertyName: "useToolbar", publicName: "useToolbar", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["snav"], descendants: true, isSignal: true }, { propertyName: "toolbarContRef", first: true, predicate: ["toolbarCont"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i5$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VerticalNavComponent, decorators: [{
             type: Component,
@@ -16283,7 +16283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ImageLoaderDirective,
                         CommonModule,
                         SDKTranslatePipe,
-                    ], template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:10px;border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)}.vertical-nav-side-padding{padding:var(--space-8)}\n"] }]
+                    ], template: "<div class=\"vertical-nav\" [class.vertical-nav-is-mobile]=\"uS.isMobileSignal()\">\n  @if (useToolbar()) {\n    <div #toolbarCont class=\"vertical-nav-toolbar\">\n      @if (toolbarTemplate()) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate()\" />\n      } @else {\n        <mat-toolbar color=\"primary\" class=\"bg-primary d-flex justify-content-between\">\n          <div class=\"d-flex align-items-center w-100\">\n            @if (showMenu()) {\n              <button mat-icon-button (click)=\"snav.toggle()\">\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (toolbarLogo()) {\n              <img\n                [src]=\"toolbarLogo()\"\n                [ngStyle]=\"toolbarLogoStyle()\"\n                alt=\"toolbar logo\"\n                class=\"toolbarLogo\" />\n            }\n            @if (toolbarTitle()) {\n              <h1 class=\"vertical-nav-app-name\">{{ toolbarTitle() | appTranslate | async }}</h1>\n            }\n          </div>\n          <div>\n            @if (toolbarEndTemplate()) {\n              <ng-container *ngTemplateOutlet=\"toolbarEndTemplate()\" />\n            }\n          </div>\n        </mat-toolbar>\n      }\n    </div>\n  }\n\n  <mat-sidenav-container\n    [id]=\"id()\"\n    class=\"vertical-nav-container\"\n    [style.marginTop.px]=\"\n      uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n    \">\n    <mat-sidenav\n      class=\"side-w\"\n      [ngClass]=\"{ mobile: this.uS.isMobileSignal() }\"\n      #snav\n      [mode]=\"uS.isMobileSignal() ? 'over' : 'side'\"\n      [opened]=\"!uS.isMobileSignal() && showMenu()\"\n      [fixedInViewport]=\"uS.isMobileSignal()\"\n      [fixedTopGap]=\"\n        uS.isMobileSignal() ? fixedTopGap() || toolbarContRef()?.nativeElement?.offsetHeight : 0\n      \"\n      [hidden]=\"!showMenu()\">\n      <div class=\"vertical-nav-side-padding\">\n        @if (sidenavTemplate()) {\n          <ng-container *ngTemplateOutlet=\"sidenavTemplate()\" />\n        } @else {\n          <mat-tree\n            [dataSource]=\"dataSource()\"\n            [treeControl]=\"treeControl()\"\n            class=\"vertical-nav-tree\">\n            <!-- This is the tree node template for leaf nodes -->\n            <!-- This is the tree node template for expandable nodes -->\n            <mat-nested-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild()\"\n              class=\"expandable-node\">\n              <div class=\"mat-tree-node\">\n                <button\n                  matTreeNodeToggle\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  class=\"menu-btn level{{ node.level }}\">\n                  <div class=\"row\">\n                    <div class=\"col\">\n                      <span class=\"{{ node.icon }}\"></span>\n                      {{ node.label | appTranslate | async }}\n                    </div>\n                    <div class=\"col-auto\">\n                      <span\n                        class=\"fa {{\n                          treeControl().isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'\n                        }} \"></span>\n                    </div>\n                  </div>\n                </button>\n              </div>\n              <div>\n                <!-- There is inline padding applied to this div using styles.\n            This padding value depends on the mat-icon-button width.  -->\n                <div\n                  [class.vertical-nav-tree-invisible]=\"!treeControl().isExpanded(node)\"\n                  role=\"group\"\n                  class=\"group\">\n                  <ng-container matTreeNodeOutlet />\n                </div>\n              </div>\n            </mat-nested-tree-node>\n            <!-- There is inline padding applied to this node using styles.\n    This padding value depends on the mat-icon-button width. -->\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: shouldShowChild()\"\n              matTreeNodeToggle\n              class=\"single-node level{{ node.level }}\">\n              @if (node.link != null || node.queryParams) {\n                <a\n                  [routerLink]=\"node.link\"\n                  routerLinkActive=\"active\"\n                  [queryParams]=\"node.queryParams\"\n                  class=\"d-block w-100\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              } @else {\n                <a (click)=\"node.action?.(node)\" class=\"d-block w-100 pointer\">\n                  <span class=\"{{ node.icon }}\"></span>\n                  {{ node.label | appTranslate | async }}\n                </a>\n              }\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              class=\"single-node restricted level{{ node.level }}\" />\n          </mat-tree>\n        }\n      </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"vertical-nav-body\">\n      @if (bodyTemplate()) {\n        <ng-container *ngTemplateOutlet=\"bodyTemplate()\" />\n      } @else {\n        <ng-content />\n      }\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [":host{--contentMarginLeft: var(--sideNavWidth)}.menu{background-color:#fff}.vertical-nav{display:flex;flex-direction:column;height:100%}.vertical-nav.fullScreen{position:absolute;inset:0}.toolbarLogo{--toolbarLogoDimen: 50px;height:var(--toolbarLogoDimen)}h1.vertical-nav-app-name{margin-left:8px}.vertical-nav-container{flex:1}.vertical-nav-is-mobile .vertical-nav-toolbar{position:fixed;z-index:2;width:100%}.vertical-nav-is-mobile .vertical-nav-container{flex:1 0 auto}.mat-drawer-container{background-color:unset}.mat-drawer-content{background-color:#e9e9e9}.expandable-node button{width:100%;border-radius:0;text-align:left}.single-node button{width:24px}.level0{border-bottom:1px solid rgba(141,141,141,.231372549)}.side-w{width:var(--sideNavWidth, auto);margin:var(--sideNavMargin, 10px);border-radius:16px}.side-w.mobile{width:90%;margin:0;border-radius:0}.vertical-nav-tree-invisible{display:none}.vertical-nav-tree ul,.vertical-nav-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.vertical-nav-tree div[role=group]{border-radius:var(--borderRadius);background-color:#ffffff57}.vertical-nav-tree div[role=group]>.mat-tree-node{padding:10px 20px}a{color:inherit}.restricted{display:none}mat-sidenav.mat-drawer.mat-drawer-opened.mat-drawer-side.mat-sidenav{min-width:200px;overflow-x:auto;white-space:nowrap}.menu-btn{background-color:#ffffff57;border-radius:var(--borderRadius)!important;padding:10px 20px;color:#2b2b2b;border:none}.expandable-node .group{border:1px solid rgba(0,0,0,.11)!important}.profile{position:sticky;bottom:0;right:0;left:0;background-color:var(--primary);background-image:linear-gradient(45deg,#ffffffa8,#ffffffa8);padding:10px}.vertical-nav-body{margin-left:var(--contentMarginLeft, inherit)!important}.vertical-nav-side-padding{padding:var(--space-8)}\n"] }]
         }], ctorParameters: () => [] });
 
 class TextAreaModalComponent {
@@ -18439,12 +18439,26 @@ class FindItemComponent extends BaseFormGenerator {
         this.savedShowCompactFieldsMap = computed(() => this.id() ? this.findItemService.getSavedSelectedCompactedFields(this.id()) : null);
         this._computedFormSchema = computed(() => {
             const formSchema = this.formSchema() || [], isCompact = this.isCompact(), showCompactFieldsMap = this.cShowCompactFieldsMap();
-            return isCompact
-                ? formSchema.filter((x) => !x.hidden && (x.nonCompact || showCompactFieldsMap[x.field]))
-                : formSchema.filter((x) => !x.hidden);
+            const ret = [];
+            if (isCompact)
+                for (const x of formSchema) {
+                    if (!(!x.hidden && (x.nonCompact || showCompactFieldsMap[x.field])))
+                        continue;
+                    x.needsButton = x.standalone || !!x.action;
+                    ret.push(x);
+                }
+            else
+                for (const x of formSchema) {
+                    if (x.hidden)
+                        continue;
+                    x.needsButton = x.standalone || !!x.action;
+                    ret.push(x);
+                }
+            return ret;
         });
         this.computedFormSchema = computed(() => {
             const formSchema = this._computedFormSchema() || [], standaloneForm = this.standaloneForm(), searchForm = this.searchForm();
+            // debugger;
             return formSchema.map((scheme) => {
                 scheme.form = scheme.standalone ? standaloneForm : searchForm;
                 return scheme;
@@ -18640,14 +18654,17 @@ class FindItemComponent extends BaseFormGenerator {
     }
     fieldAction(field) {
         let form;
+        // debugger;
         if (field.standalone && field.action)
             form = this.standaloneForm();
-        else if (field.action && !field.standalone)
+        else
             form = this.searchForm();
+        if (field.action) {
+            if (form.controls[field.field].valid)
+                field.action(this.allSearchFormValue(), this.allSearchFormValue()[field.field], form);
+        }
         else
-            return;
-        if (form.controls[field.field].valid)
-            field.action(this.allSearchFormValue(), this.allSearchFormValue()[field.field], form);
+            this.search();
     }
     async _search() {
         // debugger;
@@ -18716,26 +18733,24 @@ class FindItemComponent extends BaseFormGenerator {
         this._loading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <form (ngSubmit)=\"search()\">\n      <div class=\"row align-items-center\">\n        @for (scheme of computedFormSchema(); track scheme.field) {\n          <div class=\"{{ gridClass() }} \">\n            <div class=\"row align-items-end\">\n              <ng-template #defaultInpTempl>\n                <app-input-basic\n                  #formField\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n              </ng-template>\n\n              @switch (true) {\n                @case (scheme.type == 'tel') {\n                  <div class=\"col\">\n                    <app-phone-number\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [name]=\"scheme.field\"\n                      [showLabel]=\"false\"\n                      [showValidation]=\"scheme.showValidation\"\n                      [showValidationIcon]=\"scheme.showValidationIcon\"\n                      [countryCode3]=\"scheme.countryCode3\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                      \"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.type == 'autocomplete') {\n                  <div class=\"col\">\n                    <app-autocomplete\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [labelField]=\"scheme.labelField\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [optionsFunc]=\"scheme.optionsFunc\"\n                      [name]=\"scheme.field\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [valueField]=\"scheme.valueField\"\n                      [options]=\"scheme.options\"\n                      [hint]=\"scheme.hint\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue : (scheme.field | toAny)\n                      \"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.standalone || scheme.action) {\n                  <div class=\"col\">\n                    <form (ngSubmit)=\"fieldAction(scheme)\">\n                      <div class=\"gx-2 row align-items-end\">\n                        <div class=\"col\">\n                          <app-input-basic\n                            #formField\n                            [name]=\"scheme.field\"\n                            [form]=\"scheme.form\"\n                            [type]=\"scheme.type\"\n                            [autoPickValueField]=\"scheme.autoPickValueField\"\n                            [valueField]=\"scheme.valueField\"\n                            [labelType]=\"scheme.labelType | toAny\"\n                            [checkedSignal]=\"scheme.checked\"\n                            [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                            [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                            [noFormat]=\"true\"\n                            [labelField]=\"scheme.labelField\"\n                            [optionFormatter]=\"scheme.optionFormatter\"\n                            [options]=\"scheme.options\"\n                            [decimalPoints]=\"scheme.decimalPoints\"\n                            [hint]=\"scheme.hint\"\n                            [max]=\"scheme.max\"\n                            [min]=\"scheme.min\"\n                            [placeholder]=\"scheme.placeholder\"\n                            [label]=\"scheme.label\"\n                            [disabled]=\"\n                              scheme.disabledIf\n                                | functionCaller2: searchFormValue : (scheme.field | toAny)\n                            \" />\n                        </div>\n                        <div class=\"col-auto\">\n                          <app-btn\n                            [icon]=\"scheme.icon || 'show'\"\n                            [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                            actionType=\"submit\"\n                            [disabled]=\"!formField?.validSignal()\" />\n                        </div>\n                      </div>\n                    </form>\n                  </div>\n                  @if (showValidationMsg()) {\n                    <app-validation-message [input]=\"formField\" />\n                  }\n                }\n                @default {\n                  <div class=\"col\">\n                    <app-input-basic\n                      #formField\n                      [name]=\"scheme.field\"\n                      [form]=\"scheme.form\"\n                      [type]=\"scheme.type\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [valueField]=\"scheme.valueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [checkedSignal]=\"scheme.checked\"\n                      [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                      [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                      [noFormat]=\"true\"\n                      [labelField]=\"scheme.labelField\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [options]=\"scheme.options\"\n                      [decimalPoints]=\"scheme.decimalPoints\"\n                      [hint]=\"scheme.hint\"\n                      [showValidationMsg]=\"showValidationMsg()\"\n                      [max]=\"scheme.max\"\n                      [min]=\"scheme.min\"\n                      [placeholder]=\"scheme.placeholder\"\n                      [label]=\"scheme.label\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue : (scheme.field | toAny)\n                      \" />\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n        <div class=\"col-md justify-content-end align-items-center d-flex\">\n          @if (showClearBtn()) {\n            <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n          }\n          <span class=\"mx-1\"></span>\n          @if (showSearchBtn()) {\n            <app-btn\n              [group]=\"'search'\"\n              [iconBtn]=\"true\"\n              text=\"Search\"\n              actionType=\"submit\"\n              [excludeLogging]=\"true\"\n              [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n          }\n          @if (isCompact()) {\n            <app-btn\n              [showHelpIcon]=\"false\"\n              mclass=\"ms-1\"\n              [excludeLogging]=\"true\"\n              help=\"Search Fields\"\n              customIcon=\"fa fa-ellipsis-v\"\n              (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n            <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n              <ng-template modalBody>\n                <toggle-input-form\n                  [valueField]=\"'field' | toAny\"\n                  labelField=\"label\"\n                  [gridNo]=\"3\"\n                  [checkedChecker]=\"asfCheckedChecker()\"\n                  [list]=\"compactedFields()\"\n                  (selected)=\"tempSelectedCompactedFields.set($event)\" />\n              </ng-template>\n              <ng-template modalFooter>\n                <app-btn\n                  icon=\"save\"\n                  (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                  text=\"Save\" />\n              </ng-template>\n            </modal-comp>\n          }\n          @if (createButton()) {\n            <span class=\"mx-1\"></span>\n            @if (createBtnRoute()) {\n              <app-btn\n                type=\"outline\"\n                text=\"Create\"\n                icon=\"add\"\n                (mclick)=\"clickedCreate.emit()\"\n                routerLink=\"{{ createBtnRoute() }}\" />\n            } @else {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n            }\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center d-flex\">\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        <span class=\"mx-1\"></span>\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            text=\"Search\"\n            actionType=\"submit\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-find-item,find-item', imports: [
                         LoaderComponent,
-                        NgIf,
                         FormsModule,
-                        NgFor,
-                        NgSwitch,
-                        NgSwitchCase,
                         PhoneNumberComponent,
                         ValidationMessageComponent,
                         AutocompleteComponent,
                         MatMenuModule,
+                        NgTemplateOutlet,
                         RouterLink,
                         NgSwitchDefault,
                         InputBasicComponent,
                         ModalComponents,
                         BtnComponent,
+                        NgClass,
                         ToggleInputFormComponent,
                         TableHttpsComponent,
                         TablePlainComponent,
@@ -18745,7 +18760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ReactiveFormsModule,
                         FunctionCaller2,
                         ToAnyPipe,
-                    ], template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <form (ngSubmit)=\"search()\">\n      <div class=\"row align-items-center\">\n        @for (scheme of computedFormSchema(); track scheme.field) {\n          <div class=\"{{ gridClass() }} \">\n            <div class=\"row align-items-end\">\n              <ng-template #defaultInpTempl>\n                <app-input-basic\n                  #formField\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n              </ng-template>\n\n              @switch (true) {\n                @case (scheme.type == 'tel') {\n                  <div class=\"col\">\n                    <app-phone-number\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [name]=\"scheme.field\"\n                      [showLabel]=\"false\"\n                      [showValidation]=\"scheme.showValidation\"\n                      [showValidationIcon]=\"scheme.showValidationIcon\"\n                      [countryCode3]=\"scheme.countryCode3\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                      \"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.type == 'autocomplete') {\n                  <div class=\"col\">\n                    <app-autocomplete\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [labelField]=\"scheme.labelField\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [optionsFunc]=\"scheme.optionsFunc\"\n                      [name]=\"scheme.field\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [valueField]=\"scheme.valueField\"\n                      [options]=\"scheme.options\"\n                      [hint]=\"scheme.hint\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue : (scheme.field | toAny)\n                      \"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.standalone || scheme.action) {\n                  <div class=\"col\">\n                    <form (ngSubmit)=\"fieldAction(scheme)\">\n                      <div class=\"gx-2 row align-items-end\">\n                        <div class=\"col\">\n                          <app-input-basic\n                            #formField\n                            [name]=\"scheme.field\"\n                            [form]=\"scheme.form\"\n                            [type]=\"scheme.type\"\n                            [autoPickValueField]=\"scheme.autoPickValueField\"\n                            [valueField]=\"scheme.valueField\"\n                            [labelType]=\"scheme.labelType | toAny\"\n                            [checkedSignal]=\"scheme.checked\"\n                            [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                            [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                            [noFormat]=\"true\"\n                            [labelField]=\"scheme.labelField\"\n                            [optionFormatter]=\"scheme.optionFormatter\"\n                            [options]=\"scheme.options\"\n                            [decimalPoints]=\"scheme.decimalPoints\"\n                            [hint]=\"scheme.hint\"\n                            [max]=\"scheme.max\"\n                            [min]=\"scheme.min\"\n                            [placeholder]=\"scheme.placeholder\"\n                            [label]=\"scheme.label\"\n                            [disabled]=\"\n                              scheme.disabledIf\n                                | functionCaller2: searchFormValue : (scheme.field | toAny)\n                            \" />\n                        </div>\n                        <div class=\"col-auto\">\n                          <app-btn\n                            [icon]=\"scheme.icon || 'show'\"\n                            [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                            actionType=\"submit\"\n                            [disabled]=\"!formField?.validSignal()\" />\n                        </div>\n                      </div>\n                    </form>\n                  </div>\n                  @if (showValidationMsg()) {\n                    <app-validation-message [input]=\"formField\" />\n                  }\n                }\n                @default {\n                  <div class=\"col\">\n                    <app-input-basic\n                      #formField\n                      [name]=\"scheme.field\"\n                      [form]=\"scheme.form\"\n                      [type]=\"scheme.type\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [valueField]=\"scheme.valueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [checkedSignal]=\"scheme.checked\"\n                      [showValidation]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                      [showValidationIcon]=\"formField.hasValue() && !!scheme.asyncValidators\"\n                      [noFormat]=\"true\"\n                      [labelField]=\"scheme.labelField\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [options]=\"scheme.options\"\n                      [decimalPoints]=\"scheme.decimalPoints\"\n                      [hint]=\"scheme.hint\"\n                      [showValidationMsg]=\"showValidationMsg()\"\n                      [max]=\"scheme.max\"\n                      [min]=\"scheme.min\"\n                      [placeholder]=\"scheme.placeholder\"\n                      [label]=\"scheme.label\"\n                      [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: searchFormValue : (scheme.field | toAny)\n                      \" />\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n        <div class=\"col-md justify-content-end align-items-center d-flex\">\n          @if (showClearBtn()) {\n            <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n          }\n          <span class=\"mx-1\"></span>\n          @if (showSearchBtn()) {\n            <app-btn\n              [group]=\"'search'\"\n              [iconBtn]=\"true\"\n              text=\"Search\"\n              actionType=\"submit\"\n              [excludeLogging]=\"true\"\n              [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n          }\n          @if (isCompact()) {\n            <app-btn\n              [showHelpIcon]=\"false\"\n              mclass=\"ms-1\"\n              [excludeLogging]=\"true\"\n              help=\"Search Fields\"\n              customIcon=\"fa fa-ellipsis-v\"\n              (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n            <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n              <ng-template modalBody>\n                <toggle-input-form\n                  [valueField]=\"'field' | toAny\"\n                  labelField=\"label\"\n                  [gridNo]=\"3\"\n                  [checkedChecker]=\"asfCheckedChecker()\"\n                  [list]=\"compactedFields()\"\n                  (selected)=\"tempSelectedCompactedFields.set($event)\" />\n              </ng-template>\n              <ng-template modalFooter>\n                <app-btn\n                  icon=\"save\"\n                  (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                  text=\"Save\" />\n              </ng-template>\n            </modal-comp>\n          }\n          @if (createButton()) {\n            <span class=\"mx-1\"></span>\n            @if (createBtnRoute()) {\n              <app-btn\n                type=\"outline\"\n                text=\"Create\"\n                icon=\"add\"\n                (mclick)=\"clickedCreate.emit()\"\n                routerLink=\"{{ createBtnRoute() }}\" />\n            } @else {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n            }\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n" }]
+                    ], template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center d-flex\">\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        <span class=\"mx-1\"></span>\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            text=\"Search\"\n            actionType=\"submit\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"] }]
         }], propDecorators: { _formSchema: [{
                 type: Input,
                 args: ['formSchema']