ets-fe-ng-sdk 20.3.20 → 20.3.24

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

@@ -57,7 +57,9 @@ import PerfectScrollbar from 'perfect-scrollbar';
 import { NGTelInputDirective } from '@serene-dev/ng-tel-input';
 import * as i2$3 from 'ngx-quill';
 import { QuillModule, QuillEditorComponent } from 'ngx-quill';
-import 'quill-mention';
+import Quill from 'quill';
+import { Mention } from 'quill-mention';
+import ImageResize from 'quill-resize-image';
 import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i1$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -15796,7 +15798,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     ], template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\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      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\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:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }] });
 
-// debugger;
+// Register Quill modules
+Quill.register('modules/mention', Mention);
+Quill.register('modules/imageResize', ImageResize);
 /**
  * Rich text editor component that integrates with Angular Reactive Forms.
  * Extends InputBasicComponent to provide form control functionality.
@@ -15815,7 +15819,7 @@ class RichTextEditorRFComponent extends InputBasicComponent {
          * Includes settings for resize, syntax highlighting, mentions, and toolbar options.
          */
         this.modules = signal({
-            resize: {},
+            imageResize: {},
             syntax: true,
             mention: {
                 allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
@@ -15867,7 +15871,7 @@ class RichTextEditorRFComponent extends InputBasicComponent {
         return this.iS.onContentChanged($event, this.form(), this.name());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RichTextEditorRFComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\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    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$3.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\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    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}:host ::ng-deep .ql-snow .ql-tooltip{z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$3.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RichTextEditorRFComponent, decorators: [{
             type: Component,
@@ -15879,7 +15883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ToAnyPipe,
                         InputLabelComponent,
                         ValidationMessageComponent,
-                    ], template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\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    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"] }]
+                    ], template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\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    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}:host ::ng-deep .ql-snow .ql-tooltip{z-index:1}\n"] }]
         }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [QuillEditorComponent]
@@ -24716,6 +24720,8 @@ class FindItemComponent extends BaseFormGenerator {
         this.showValidationMsg = input(true, ...(ngDevMode ? [{ debugName: "showValidationMsg" }] : []));
         /** Route for create button */
         this.createBtnRoute = input('../create', ...(ngDevMode ? [{ debugName: "createBtnRoute" }] : []));
+        this.createBtnNoRoute = input(false, ...(ngDevMode ? [{ debugName: "createBtnNoRoute" }] : []));
+        this.createBtnText = input('Create', ...(ngDevMode ? [{ debugName: "createBtnText" }] : []));
         /**
          * Whether to show additional column selection
          */
@@ -25111,7 +25117,7 @@ class FindItemComponent extends BaseFormGenerator {
         this._loading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, enableRowClick: { classPropertyName: "enableRowClick", publicName: "enableRowClick", isSignal: true, isRequired: false, transformFunction: null }, searchButtonText: { classPropertyName: "searchButtonText", publicName: "searchButtonText", isSignal: true, isRequired: false, transformFunction: null }, searchButtonIcon: { classPropertyName: "searchButtonIcon", publicName: "searchButtonIcon", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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 }, showFormError: { classPropertyName: "showFormError", publicName: "showFormError", 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", clickedExpandRow: "clickedExpandRow", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "actionBtns", predicate: ["actionBtn"], descendants: true, isSignal: true }, { 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 }, { propertyName: "formErrorRef", first: true, predicate: FormErrorComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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 gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @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    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\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            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\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              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\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              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\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", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.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: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], 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", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "filterExactMatch", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormErrorComponent, selector: "form-error", inputs: ["form", "customResult", "inline", "lgGridNo", "xxlGridNo"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: widthOffsetPipe, name: "widthOffsetPipe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, enableRowClick: { classPropertyName: "enableRowClick", publicName: "enableRowClick", isSignal: true, isRequired: false, transformFunction: null }, searchButtonText: { classPropertyName: "searchButtonText", publicName: "searchButtonText", isSignal: true, isRequired: false, transformFunction: null }, searchButtonIcon: { classPropertyName: "searchButtonIcon", publicName: "searchButtonIcon", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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 }, showFormError: { classPropertyName: "showFormError", publicName: "showFormError", 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 }, createBtnNoRoute: { classPropertyName: "createBtnNoRoute", publicName: "createBtnNoRoute", isSignal: true, isRequired: false, transformFunction: null }, createBtnText: { classPropertyName: "createBtnText", publicName: "createBtnText", 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", clickedExpandRow: "clickedExpandRow", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "actionBtns", predicate: ["actionBtn"], descendants: true, isSignal: true }, { 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 }, { propertyName: "formErrorRef", first: true, predicate: FormErrorComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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 gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @if (createBtnRoute() && !createBtnNoRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"{{ createBtnText() }}\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"{{ createBtnText() }}\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\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            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\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              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\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              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\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", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.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: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], 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", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "filterExactMatch", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormErrorComponent, selector: "form-error", inputs: ["form", "customResult", "inline", "lgGridNo", "xxlGridNo"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: widthOffsetPipe, name: "widthOffsetPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
@@ -25139,7 +25145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ToAnyPipe,
                         FormErrorComponent,
                         widthOffsetPipe,
-                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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 gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @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    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\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            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\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              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\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              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\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"] }]
+                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\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 gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @if (createBtnRoute() && !createBtnNoRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"{{ createBtnText() }}\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"{{ createBtnText() }}\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\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            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\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              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\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              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\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']