ets-fe-ng-sdk 20.0.7 → 20.0.9

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

@@ -4,11 +4,11 @@ import { ReplaySubject, filter, debounceTime, lastValueFrom, Observable, Behavio
 import 'zone.js/plugins/zone-error';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, ChangeDetectorRef, model, output, effect, ViewChild, Input, Component, EventEmitter, Output, forwardRef, ChangeDetectionStrategy, HostListener, HostBinding, viewChild, linkedSignal, viewChildren, Inject, DestroyRef, contentChild, ElementRef, InjectionToken, ErrorHandler } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, CommonModule, NgClass, JsonPipe, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle } from '@angular/common';
 import { faSpoon, faTable, faCircleExclamation, faHandshake, faPercent, faPlay, faArrowsH, faBank, faReceipt, faTag, faTruck, faStop, faRecycle, faUsers, faUnlock, faUpload, faBellSlash, faEye, faSearch, faSave, faArrowLeft, faPen, faPause, faArrowRight, faLock, faInfoCircle, faFileImport, faHome, faHistory, faUserShield, faPenFancy, faFilter, faFile, faFileExport, faEdit, faDownload, faTrash, faCogs, faClone, faListAlt, faCheck, faCancel, faMoneyCheck, faSlidersH, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import { clone, uniqBy, uniq, cloneDeep, isEqual, isEmpty } from 'lodash-es';
+import * as i1$1 from '@angular/common';
+import { Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, CommonModule, NgClass, JsonPipe, AsyncPipe, UpperCasePipe, NgTemplateOutlet, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle } from '@angular/common';
 import { map, tap, catchError, retry, filter as filter$1, debounceTime as debounceTime$1, switchMap as switchMap$1, startWith as startWith$1, first as first$1, timeout } from 'rxjs/operators';
 import { ToastNotificationsService } from '@serene-dev/toast-notifications';
 import { HttpClient, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
@@ -6201,11 +6201,11 @@ class AddItemComponent {
         this.clickedAdd = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AddItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AddItemComponent, isStandalone: true, selector: "add-item", inputs: { addText: "addText", formArray: "formArray", array: "array" }, outputs: { clickedAdd: "clickedAdd" }, ngImport: i0, template: "@if (!formArray?.length&&!array?.length) {\n<div class=\"d-flex justify-content-end\">\n    <app-btn (mclick)=\"clickedAdd.emit()\" icon=\"add\" text=\"{{addText}}\"></app-btn>\n  </div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AddItemComponent, isStandalone: true, selector: "add-item", inputs: { addText: "addText", formArray: "formArray", array: "array" }, outputs: { clickedAdd: "clickedAdd" }, ngImport: i0, template: "@if (!formArray?.length&&!array?.length) {\n<div class=\"d-flex justify-content-end\">\n    <app-btn (mclick)=\"clickedAdd.emit()\" icon=\"add\" text=\"{{addText}}\"></app-btn>\n  </div>\n}", styles: [""], dependencies: [{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AddItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'add-item', imports: [CommonModule, BtnComponent], template: "@if (!formArray?.length&&!array?.length) {\n<div class=\"d-flex justify-content-end\">\n    <app-btn (mclick)=\"clickedAdd.emit()\" icon=\"add\" text=\"{{addText}}\"></app-btn>\n  </div>\n}" }]
+            args: [{ selector: 'add-item', imports: [BtnComponent], template: "@if (!formArray?.length&&!array?.length) {\n<div class=\"d-flex justify-content-end\">\n    <app-btn (mclick)=\"clickedAdd.emit()\" icon=\"add\" text=\"{{addText}}\"></app-btn>\n  </div>\n}" }]
         }], propDecorators: { addText: [{
                 type: Input,
                 args: [{ required: false }]
@@ -8370,14 +8370,12 @@ class ValidationMessageComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-validation-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        NgFor,
                         AsyncPipe,
                         CommonModule,
                         SDKTranslatePipe,
                         forwardRef(() => ErrorMessagePipe),
                         MatTooltipModule,
-                        SDKTranslateNoLoaderPipe,
+                        SDKTranslateNoLoaderPipe
                     ], template: "<div class=\"text-danger\" [class.applyMargin]=\"applyMargin()\" (click)=\"logErrors()\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <div class=\"d-flex gap-1\">\n      <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n      <span\n        class=\"me-2 errormssg\"\n        [matTooltip]=\"ele.innerText\"\n        [matTooltipDisabled]=\"\n          ele.scrollHeight <= ele.offsetHeight && ele.scrollWidth <= ele.offsetWidth\n        \"\n        [innerHTML]=\"error | appTranslateNL: translationConfig | async\"\n        #ele></span>\n    </div>\n  }\n</div>\n", styles: [".text-danger{min-height:25px;position:relative}.applyMargin{margin-top:5px}.errormssg{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.8rem}.hideOverflow{height:25px;overflow:hidden}\n"] }]
         }] });
 /**
@@ -11419,16 +11417,14 @@ class BtnLgComponent extends BtnComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BtnLgComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-btn-lg,btn-lg', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
                         MatRippleModule,
                         RouterLink,
                         NgTemplateOutlet,
-                        NgFor,
                         NgClass,
                         AsyncPipe,
                         ToAnyPipe,
                         SDKTranslatePipe,
-                        ValueOrXPipe,
+                        ValueOrXPipe
                     ], template: "<span class=\"section-cards\">\n  @if (route()) {\n    <button matRipple class=\"btn-large {{ mclass() }}\" routerLink=\"{{ route() }}\" [queryParamsHandling]=\"queryParamsHandling()\">\n      <ng-container *ngTemplateOutlet=\"btnContent\"></ng-container>\n    </button>\n  } @else {\n    <button matRipple class=\"btn-large {{ mclass() }}\" (click)=\"click($event)\">\n      <ng-container *ngTemplateOutlet=\"btnContent\"></ng-container>\n    </button>\n  }\n</span>\n<ng-template #btnContent>\n  <div class=\"w-100\">\n    <div class=\"title\" [innerHTML]=\"text() | appTranslate: translatorOptions() | async\"></div>\n    @if (hasSubs()) {\n      <div class=\"subs\">\n        @for (sub of subs(); track sub) {\n          <div>\n            <div class=\"d-flex justify-content-end\">\n              @if (sub.label) {\n                <div class=\"sub-item-title\" [innerHTML]=\"sub.label | appTranslate: translatorOptions() | async\"></div>\n              }\n              @if (sub.value) {\n                <div class=\"sub-item-text\" [innerHTML]=\"sub.value | valueOrX\"></div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"text\" [ngClass]=\"{ detach: !!subText() }\" [innerHTML]=\"value() | toAny | appTranslate: translatorOptions() | async\"></div>\n      @if (subText()) {\n        <div class=\"sub-title\" [innerHTML]=\"subText() | appTranslate: translatorOptions() | async\"></div>\n      }\n      @if (subValue()) {\n        <div class=\"sub-text\" [innerHTML]=\"subValue() | toAny | appTranslate : translatorOptions()| async\"></div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
         }] });
 
@@ -11699,7 +11695,7 @@ class ButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatRippleModule, FontAwesomeModule, AsyncPipe, SDKTranslatePipe], template: "@if (buttonType() === 'show') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ 'Show' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'showCustom') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'showsmall') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faEye()\"/>\n        {{ 'Show' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'create') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustomRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2GB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2small') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2smallRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2smallGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'clone') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faClone()\"/>\n      {{ 'Clone' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'clone-red') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-danger cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faClone()\"/>\n      {{ 'Clone' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'search') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchRed') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-danger cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchGB') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchCustom') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchGb') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'default') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createclone') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'add') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addred') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'addYellow') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'add-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-secondry\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'edit') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustom-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'editCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone p-0\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone p-0\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'submit') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'submitRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'update') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Update' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'history') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faHistory()\"/>\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'historyGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faHistory()\"/>\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'adjust') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSlidersH()\"/>\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'adjustGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSlidersH()\"/>\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'generate') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCogs()\"/>\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'generateGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCogs()\"/>\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'document') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faFile()\"/>\n      {{ 'Document' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'find') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'findRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Find Policy') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Find Policy' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'action') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Action' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Authorise') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Authorise' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Decline') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Decline' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'changestatus') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Status' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'generates') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'adjusts') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'historys') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'register') {\n  <div>\n    <div matRipple class=\"btn btn-primary\">\n      {{ 'Register New Claim' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'submits') {\n  <div>\n    <div matRipple class=\"btn btn-primary\">\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'findGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'find-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmall') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmallred') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmallGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'save') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'saveGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'save-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'saverun-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save & Run' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'custSave') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'upload') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'uploadRed') {\n  <div>\n    <div matRipple class=\"btn btn-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'uploadGB') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'custSave2') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomClone') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomCloneGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'create-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'show-red') {\n  <div>\n    <div matRipple class=\"btn btn-secondry bg-dark color-white cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ 'Show' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'custSave-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-secondry cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomNote') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomNoteRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomNoteGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaised') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaisedRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaisedYellow') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone-yellow btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'run') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlay()\"/>\n      {{ 'Run' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'insert') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      {{ 'Insert' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'delete') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faTrash()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'translate') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      {{ 'Translate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'next') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'nextRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'nextGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'next-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addFilter') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      {{ 'Add Filter' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'prev') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faArrowLeft()\"/>\n      {{ 'Prev' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'uploadLg') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ 'Upload' | appTranslate | async }}\n    </div>\n  </div>\n}\n<!-- -->\n", styles: ["div.btn{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px}\n"] }]
+            args: [{ selector: 'app-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRippleModule, FontAwesomeModule, AsyncPipe, SDKTranslatePipe], template: "@if (buttonType() === 'show') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ 'Show' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'showCustom') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'showsmall') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faEye()\"/>\n        {{ 'Show' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'create') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustomRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2GB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2small') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2smallRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'createCustom2smallGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faPlus()\"/>\n        {{ text() | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'clone') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faClone()\"/>\n      {{ 'Clone' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'clone-red') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-danger cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faClone()\"/>\n      {{ 'Clone' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'search') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchRed') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-danger cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchGB') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchCustom') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'searchGb') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Search' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'default') {\n  <div>\n    <div matRipple class=\"btn btn btn-outline-primary cancelBtn-lg btn-clone\">\n\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'createclone') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'add') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addred') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'addYellow') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'add-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-secondry\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Add' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'edit') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addCustom-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'editCustom') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone p-0\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'editCustomGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone p-0\">\n      <fa-icon [icon]=\"faEdit()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'submit') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'submitRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'update') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCheck()\"/>\n      {{ 'Update' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'history') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faHistory()\"/>\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'historyGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faHistory()\"/>\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'adjust') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSlidersH()\"/>\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'adjustGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSlidersH()\"/>\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'generate') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCogs()\"/>\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'generateGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faCogs()\"/>\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'document') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faFile()\"/>\n      {{ 'Document' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'find') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'findRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Find Policy') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Find Policy' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'action') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Action' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Authorise') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Authorise' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'Decline') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Decline' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'changestatus') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Status' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'generates') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Generate' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'adjusts') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Adjust' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'historys') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'History' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'register') {\n  <div>\n    <div matRipple class=\"btn btn-primary\">\n      {{ 'Register New Claim' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'submits') {\n  <div>\n    <div matRipple class=\"btn btn-primary\">\n      {{ 'Submit' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'findGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'find-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red cancelBtn-lg\">\n      <fa-icon [icon]=\"faSearch()\"/>\n      {{ 'Find' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmall') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmallred') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'findsmallGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <span class=\"small1\">\n        <fa-icon [icon]=\"faSearch()\"/>\n        {{ 'Find' | appTranslate | async }}\n      </span>\n    </div>\n  </div>\n} @else if (buttonType() === 'save') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'saveGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'save-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'saverun-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ 'Save & Run' | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'custSave') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'upload') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'uploadRed') {\n  <div>\n    <div matRipple class=\"btn btn-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'uploadGB') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'custSave2') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomClone') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomCloneGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'create-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlus()\"/>\n      {{ 'Create New' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'show-red') {\n  <div>\n    <div matRipple class=\"btn btn-secondry bg-dark color-white cancelBtn-lg\">\n      <fa-icon [icon]=\"faEye()\"/>\n      {{ 'Show' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'custSave-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-secondry cancelBtn-lg\">\n      <fa-icon [icon]=\"faSave()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'btnCustomNote') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomNoteRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomNoteGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone\">\n      <fa-icon [icon]=\"faPen()\"/>\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaised') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaisedRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'btnCustomCloneRaisedYellow') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone-yellow btn-raised\">\n      {{ text() | appTranslate | async }}\n    </div>\n  </div>\n} @else if (buttonType() === 'run') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faPlay()\"/>\n      {{ 'Run' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'insert') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary\">\n      {{ 'Insert' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'delete') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger cancelBtn-lg\">\n      <fa-icon [icon]=\"faTrash()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'translate') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      {{ 'Translate' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'next') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'nextRed') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'nextGB') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'next-red') {\n  <div>\n    <div matRipple class=\"btn btn-outline-danger btn-clone-red cancelBtn-lg\">\n      {{ 'Next' | appTranslate | async }}\n      <fa-icon [icon]=\"faArrowRight()\"/>\n    </div>\n  </div>\n\n} @else if (buttonType() === 'addFilter') {\n  <div>\n    <div matRipple class=\"btn btn-dark cancelBtn-lg\">\n      {{ 'Add Filter' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'prev') {\n  <div>\n    <div matRipple class=\"btn btn-outline-primary btn-clone cancelBtn-lg\">\n      <fa-icon [icon]=\"faArrowLeft()\"/>\n      {{ 'Prev' | appTranslate | async }}\n    </div>\n  </div>\n\n} @else if (buttonType() === 'uploadLg') {\n  <div>\n    <div matRipple class=\"btn btn-primary cancelBtn-lg\">\n      <fa-icon [icon]=\"faUpload()\"/>\n      {{ 'Upload' | appTranslate | async }}\n    </div>\n  </div>\n}\n<!-- -->\n", styles: ["div.btn{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px}\n"] }]
         }] });
 
 // export const formats = {
@@ -11809,7 +11805,7 @@ class DocumentsNameDisplayComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DocumentsNameDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-documents-name-display', imports: [NgIf, NgFor, NgSwitch, NgSwitchCase, AsyncPipe, SDKTranslatePipe], template: "<div>\n    <div class=\"row justify-content-center\">\n        <div class=\"col-md-auto p-3 mt-4 text-center\">\n            <span class=\"text-muted\">{{'Upload files named in this format: '|appTranslate|async}}</span>\n            <span>{{fileFormats[fileNameFormat]}}</span>\n        </div>\n    </div>\n    <div class=\"row justify-content-center\">\n        @if (errors?.length) {\n<div class=\"col-md-auto text-danger border border-danger light-red-bg rounded text-center mt-2 mb-4\">\n            <p>{{'The following files are not in the right format: '}}</p>\n            @for (error of errors; track error) {\n  <span class=\"me-5\">{{error}}</span>\n}\n        </div>\n}\n    </div>\n    @if (files?.length) {\n<div class=\"table-responsive\">\n        <table class=\"table table-striped col-md-auto\">\n@switch (fileNameFormat) {\n            @case ('NON_POLICY_DOCUMENT') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Ref No'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.refNo}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n            @case ('POLICY_DOCUMENT') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Policy No'|appTranslate|async}}</th>\n                    <th>{{'Policy Code'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.policyNo}}</td>\n                        <td>{{file.policyCode}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n            @case ('POLICY_DOCUMENT_SUFFIX') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Policy No'|appTranslate|async}}</th>\n                    <th>{{'Policy Code'|appTranslate|async}}</th>\n                    <th>{{'Policy No Suffix'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.policyNo}}</td>\n                        <td>{{file.policyCode}}</td>\n                        <td>{{file.policyNoSuffix}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n        }\n</table>\n\n    </div>\n}\n</div>", styles: [".light-red-bg{background-color:#ff000009}\n"] }]
+            args: [{ selector: 'app-documents-name-display', imports: [AsyncPipe, SDKTranslatePipe], template: "<div>\n    <div class=\"row justify-content-center\">\n        <div class=\"col-md-auto p-3 mt-4 text-center\">\n            <span class=\"text-muted\">{{'Upload files named in this format: '|appTranslate|async}}</span>\n            <span>{{fileFormats[fileNameFormat]}}</span>\n        </div>\n    </div>\n    <div class=\"row justify-content-center\">\n        @if (errors?.length) {\n<div class=\"col-md-auto text-danger border border-danger light-red-bg rounded text-center mt-2 mb-4\">\n            <p>{{'The following files are not in the right format: '}}</p>\n            @for (error of errors; track error) {\n  <span class=\"me-5\">{{error}}</span>\n}\n        </div>\n}\n    </div>\n    @if (files?.length) {\n<div class=\"table-responsive\">\n        <table class=\"table table-striped col-md-auto\">\n@switch (fileNameFormat) {\n            @case ('NON_POLICY_DOCUMENT') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Ref No'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.refNo}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n            @case ('POLICY_DOCUMENT') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Policy No'|appTranslate|async}}</th>\n                    <th>{{'Policy Code'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.policyNo}}</td>\n                        <td>{{file.policyCode}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n            @case ('POLICY_DOCUMENT_SUFFIX') {\n  \n                <thead>\n                    <th>{{'Ref Cat'|appTranslate|async}}</th>\n                    <th>{{'Policy No'|appTranslate|async}}</th>\n                    <th>{{'Policy Code'|appTranslate|async}}</th>\n                    <th>{{'Policy No Suffix'|appTranslate|async}}</th>\n                    <th>{{'Doc SubCat'|appTranslate|async}}</th>\n                    <th>{{'Title'|appTranslate|async}}</th>\n                </thead>\n                <tbody>\n                    @for (file of fileNames; track file) {\n  <tr>\n                        <td>{{file.refCat}}</td>\n                        <td>{{file.policyNo}}</td>\n                        <td>{{file.policyCode}}</td>\n                        <td>{{file.policyNoSuffix}}</td>\n                        <td>{{file.docSubCat}}</td>\n                        <td>{{file.title}}</td>\n                    </tr>\n}\n                </tbody>\n            \n}\n        }\n</table>\n\n    </div>\n}\n</div>", styles: [".light-red-bg{background-color:#ff000009}\n"] }]
         }], ctorParameters: () => [], propDecorators: { files: [{
                 type: Input
             }], fileNameFormat: [{
@@ -11853,21 +11849,20 @@ class EditableTextCaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EditableTextCaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, coloredLbl: { classPropertyName: "coloredLbl", publicName: "coloredLbl", isSignal: false, isRequired: false, transformFunction: null }, coloredVal: { classPropertyName: "coloredVal", publicName: "coloredVal", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, valueHint: { classPropertyName: "valueHint", publicName: "valueHint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: false, isRequired: false, transformFunction: null }, routeFunc: { classPropertyName: "routeFunc", publicName: "routeFunc", isSignal: false, isRequired: false, transformFunction: null }, showEditing: { classPropertyName: "showEditing", publicName: "showEditing", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n  >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n          >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        <div class=\"col-auto\" *ngIf=\"showEditing\">\n          <i\n            (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n          ></i>\n        </div>\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, coloredLbl: { classPropertyName: "coloredLbl", publicName: "coloredLbl", isSignal: false, isRequired: false, transformFunction: null }, coloredVal: { classPropertyName: "coloredVal", publicName: "coloredVal", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, valueHint: { classPropertyName: "valueHint", publicName: "valueHint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: false, isRequired: false, transformFunction: null }, routeFunc: { classPropertyName: "routeFunc", publicName: "routeFunc", isSignal: false, isRequired: false, transformFunction: null }, showEditing: { classPropertyName: "showEditing", publicName: "showEditing", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n    >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n            >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n          >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n            ></i>\n          </div>\n        }\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n          >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.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: 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: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EditableTextCaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-editable-text-case', imports: [
                         MatTooltipModule,
                         NgClass,
-                        NgIf,
                         InputBasicComponent,
                         MrouterLinkirective,
                         AsyncPipe,
                         FunctionCaller1,
                         SDKTranslatePipe,
-                        ValueFormatterPipe,
-                    ], template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n  >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n          >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        <div class=\"col-auto\" *ngIf=\"showEditing\">\n          <i\n            (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n          ></i>\n        </div>\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"] }]
+                        ValueFormatterPipe
+                    ], template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n    >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n            >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n          >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n            ></i>\n          </div>\n        }\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n          >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { action: [{
                 type: Input
             }], coloredLbl: [{
@@ -15947,12 +15942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             args: [{ selector: 'app-phone-number', imports: [
                         FormsModule,
                         ReactiveFormsModule,
-                        NgIf,
                         InputLabelComponent,
                         ValidationMessageComponent,
                         InputClassPipe,
                         ToAnyPipe,
-                        NGTelInputDirective,
+                        NGTelInputDirective
                     ], 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:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }] });
 
@@ -16527,14 +16521,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         PhoneNumberComponent,
                         ValidationMessageComponent,
                         AutocompleteComponent,
-                        NgSwitchDefault,
                         NgTemplateOutlet,
                         InputBasicComponent,
                         RichTextEditorRFComponent,
                         BtnComponent,
                         ReactiveFormsModule,
                         FunctionCaller2,
-                        ToAnyPipe,
+                        ToAnyPipe
                     ], template: "<!-- {{formValue()|json}}\n{{formValid()|json}} -->\n<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form()\" #formTag>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'template') {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customTemplates()[scheme.field];\n                  context: { $implicit: { scheme, form: form() } }\n                \"/>\n            }\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"scheme.form || form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [name]=\"scheme.field\"\n                [noFormat]=\"scheme.noFormat\"\n                [verbose]=\"scheme.verbose\"\n                [endLabel]=\"scheme.endLabel\"\n                [endLabelTooltip]=\"scheme.endLabelTooltip\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\n            }\n            @case (scheme.type == 'autocomplete') {\n              <app-autocomplete\n                [form]=\"scheme.form || form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [verbose]=\"scheme.verbose\"\n                [endLabel]=\"scheme.endLabel\"\n                [endLabelTooltip]=\"scheme.endLabelTooltip\"\n                [skipDoesOptionExistCheck]=\"scheme.skipDoesOptionExistCheck\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [valueField]=\"scheme.valueField\"\n                [optionsFunc]=\"scheme.optionsFunc\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\n            }\n            @case (scheme.type == 'richtext') {\n              <rich-text-editor-rf\n                [form]=\"scheme.form || form()\"\n                [label]=\"scheme.label!\"\n                [clearOnDisable]=\"scheme.clearOnDisable!\"\n                [stacked]=\"scheme.stacked\"\n                [verbose]=\"scheme.verbose\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\n                [showRequiredTag]=\"scheme.showRequiredTag!\"\n                [optionFormatter]=\"scheme.optionFormatter!\"\n                [valueField]=\"scheme.valueField!\"\n                [optionsFunc]=\"scheme.optionsFunc!\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField!\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint!\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf! | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\n            }\n            @default {\n              <app-input-basic\n                [noFormat]=\"scheme.noFormat\"\n                [name]=\"scheme.field\"\n                [form]=\"scheme.form || form()\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [type]=\"scheme.type\"\n                [verbose]=\"scheme.verbose\"\n                [valueField]=\"scheme.valueField\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [presetValue]=\"scheme.presetValue\"\n                [endLabel]=\"scheme.endLabel\"\n                [endLabelTooltip]=\"scheme.endLabelTooltip\"\n                [stacked]=\"scheme.stacked\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [checkedSignal]=\"scheme.checked\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [labelField]=\"scheme.labelField\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"row row-cols-auto justify-content-end\">\n      <div class=\"\">\n        @if (showSubmitBtn()) {\n          <app-btn\n            [text]=\"submitBtnText()\"\n            group=\"submit\"\n            [form]=\"form()\"\n            (mclick)=\"submit(submitBtn)\"\n            #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"/>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n" }]
         }], ctorParameters: () => [], propDecorators: { keyField: [{
                 type: Input
@@ -17110,15 +17103,13 @@ class FileUploadComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-upload', changeDetection: ChangeDetectionStrategy.Default, imports: [
-                        NgIf,
                         NgClass,
-                        NgFor,
                         BtnComponent,
                         ModalComponents,
                         AsyncPipe,
                         MatMenuModule,
                         WebcamMediaComponent,
-                        SDKTranslateNoLoaderPipe,
+                        SDKTranslateNoLoaderPipe
                     ], template: "@if (listFiles()) {\n  <div [ngClass]=\"{ meta: mini() }\" class=\"{{ class() }} form-label mb-2 hide-scroll\">\n    @for (item of files(); track item) {\n      <div class=\"row align-items-start mb-1\">\n        <div class=\"col\">\n          <div class=\"hide-scroll file-name\">\n            {{ item?.name }}\n          </div>\n        </div>\n        <div class=\"col-auto text-end\">\n          <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index)\"></span>\n        </div>\n      </div>\n    }\n  </div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn\n  icon=\"upload\"\n  (mclick)=\"useWebcam() ? null : openDialog()\"\n  [type]=\"file() ? 'primary' : 'secondary'\"\n  [disabled]=\"disabled\"\n  [help]=\"help\"\n  [text]=\"label\"\n  [matMenuTriggerFor]=\"useWebcam() ? menu : null\" />\n\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"openDialog()\">{{'Upload'|appTranslateNL|async}}</button>\n  <button mat-menu-item (click)=\"webcamModal.open()\">{{'Use Camera'|appTranslateNL|async}}</button>\n</mat-menu>\n\n<modal-comp #webcamModal width=\"1080px\" [showFooter]=\"false\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); $event ? acceptFiles($event?.latestFile) : null\" />\n  </ng-template>\n</modal-comp>\n", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { help: [{
                 type: Input
@@ -17228,13 +17219,12 @@ class FieldsToDisplayComponent {
         e ? (item.type = 'number') : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FieldsToDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FieldsToDisplayComponent, isStandalone: true, selector: "fields-to-display", inputs: { query1: { classPropertyName: "query1", publicName: "query1", isSignal: true, isRequired: false, transformFunction: null }, query2: { classPropertyName: "query2", publicName: "query2", isSignal: true, isRequired: false, transformFunction: null }, _fields: { classPropertyName: "_fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, _currentColumns: { classPropertyName: "_currentColumns", publicName: "currentColumns", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { query1: "query1Change", query2: "query2Change", fieldsChanged: "fieldsChanged" }, providers: [FilterArrayByStringPipe], ngImport: i0, template: "<app-btn\n  type=\"outline\"\n  customIcon=\"fa fa-bars\"\n  iconPosition=\"right\"\n  text=\"Define Outputs\"\n  (mclick)=\"acModal.open()\" />\n<modal-comp\n  header=\"Arrange Columns\"\n  [width]=\"{ XLarge: '70%', Large: '80%' } | responsiveVal\"\n  height=\"80vh\"\n  #acModal>\n  <div *modalBody>\n    @if (uS.isMobileSignal()) {\n      <div class=\"mb-2\">\n        <app-input-td-rf [noFormat]=\"true\" [(model)]=\"query1\" placeholder=\"Filter\" />\n      </div>\n      <div class=\"border rounded-10\">\n        <table class=\"table\">\n          <thead>\n            <tr>\n              <th>{{ 'Column' | appTranslate | async }}</th>\n              <th>{{ 'Visible' | appTranslate | async }}</th>\n              <th>{{ 'Sticky' | appTranslate | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredAllFields(); track item.f) {\n              <tr>\n                <td scope=\"row\">\n                  {{ item.t | titlecase | appTranslate | async }}\n                </td>\n                <td>\n                  <mat-slide-toggle [(ngModel)]=\"item.active\"></mat-slide-toggle>\n                </td>\n                <td>\n                  @if (item.active) {\n                    <mat-slide-toggle [(ngModel)]=\"item.sticky\"></mat-slide-toggle>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    } @else {\n      <!-- <div>query2 {{ query2() }}</div>\n      <div class=\"\">\n        searchRef.valueSignal    {{ searchRef.valueSignal() }}\n      </div> -->\n      <div class=\"row row-cols-2\">\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Non-Selected Columns' | appTranslate | async }}\n          </div>\n          <!-- <div class=\"mb-2\">\n                        <app-input-td-rf [(model)]=\"query\" placeholder=\"Filter\" />\n                    </div> -->\n          <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n            <div class=\"row my-2 mx-0 justify-content-center\">\n              <div class=\"col-sm-10\">\n                <app-input-td-rf\n                  #searchRef\n                  [noFormat]=\"true\"\n                  [(model)]=\"query2\"\n                  [placeholder]=\"'Search by name' | appTranslate | async \"/>\n              </div>\n            </div>\n            <div\n              class=\"row row-cols-1 g-2\"\n              cdkDropList\n              #sourceList=\"cdkDropList\"\n              [cdkDropListData]=\"nonActiveFields()\"\n              cdkDropListSortingDisabled\n              [cdkDropListConnectedTo]=\"[destinationList]\"\n              (cdkDropListDropped)=\"drop($event)\">\n              @for (item of nonActiveFields(); track item.f; let i = $index) {\n                <div class=\"\" cdkDrag>\n                  <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"border p-2 rounded-10 bg-white\">\n                    <div class=\"row row-cols-auto justify-content-between\">\n                      <div class=\"d-flex align-items-center\">\n                        <i\n                          cdkDragHandle\n                          matTooltip=\"Drag the icon to move the column to the selected columns group\"\n                          class=\"drag-cursor material-icons\">\n                          drag_handle\n                        </i>\n                        {{ (item.t | titlecase) | appTranslate | async }}\n                      </div>\n                      <div class=\"col-md-auto\">\n                        <div class=\"row\">\n                          <div class=\"col-md-auto\" *ngIf=\"!uS.environment.production\">\n                            {{ item.type }}\n                          </div>\n                          <!-- <div class=\"col-md-auto\">\n                                                    <app-input-td-rf [xsmall]=\"true\" [label]=\"'Is Number?'\"\n                                                        [stacked]=\"false\" type=\"checkbox\"\n                                                        (modelChange)=\"isNumType($event, item)\" />\n                                                </div> -->\n                          <div class=\"col-md-auto\">\n                            <app-btn text=\"Select\" (mclick)=\"changeToActive(item)\" />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Selected Columns' | appTranslate | async }}\n          </div>\n          <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n            <div\n              class=\"row row-cols-1 g-2\"\n              cdkDropList\n              #destinationList=\"cdkDropList\"\n              [cdkDropListData]=\"activeFields()\"\n              [cdkDropListConnectedTo]=\"[sourceList]\"\n              (cdkDropListDropped)=\"drop($event)\">\n              @for (item of activeFields(); track item.f; let i = $index) {\n                <div class=\"\" cdkDrag>\n                  <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"border p-2 rounded-10 bg-white\">\n                    <div class=\"row row-cols-auto justify-content-between\">\n                      <div class=\"d-flex align-items-center\">\n                        <i\n                          cdkDragHandle\n                          matTooltip=\"Drag the icon to move the column to the non-selected columns group or re-order\"\n                          class=\"drag-cursor material-icons\">\n                          drag_handle\n                        </i>\n                        {{ (item.t | titlecase )| appTranslate | async }}\n                      </div>\n                      <div>\n                        <mat-slide-toggle *ngIf=\"item.active\" [(ngModel)]=\"item.sticky\">\n                          {{ 'Sticky' | appTranslate | async }}\n                        </mat-slide-toggle>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"w-100 pt-2 d-flex justify-content-end\" *modalFooter>\n    <app-btn text=\"Update Columns\" (mclick)=\"emitFieldsChanged(); acModal.close()\" />\n  </div>\n</modal-comp>\n", styles: [".example-custom-placeholder{background:#ccc;border:dotted 3px #999;border-radius:var(--border-radius);min-height:42px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cage{height:calc(80vh - 215px)}\n"], dependencies: [{ 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputTD_RFComponent, selector: "app-input-td-rf", inputs: ["validators", "asyncValidators", "model"], outputs: ["modelChange"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: ResponsiveValPipe, name: "responsiveVal" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FieldsToDisplayComponent, isStandalone: true, selector: "fields-to-display", inputs: { query1: { classPropertyName: "query1", publicName: "query1", isSignal: true, isRequired: false, transformFunction: null }, query2: { classPropertyName: "query2", publicName: "query2", isSignal: true, isRequired: false, transformFunction: null }, _fields: { classPropertyName: "_fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, _currentColumns: { classPropertyName: "_currentColumns", publicName: "currentColumns", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { query1: "query1Change", query2: "query2Change", fieldsChanged: "fieldsChanged" }, providers: [FilterArrayByStringPipe], ngImport: i0, template: "<app-btn\n  type=\"outline\"\n  customIcon=\"fa fa-bars\"\n  iconPosition=\"right\"\n  text=\"Define Outputs\"\n  (mclick)=\"acModal.open()\" />\n<modal-comp\n  header=\"Arrange Columns\"\n  [width]=\"{ XLarge: '70%', Large: '80%' } | responsiveVal\"\n  height=\"80vh\"\n  #acModal>\n  <div *modalBody>\n    @if (uS.isMobileSignal()) {\n      <div class=\"mb-2\">\n        <app-input-td-rf [noFormat]=\"true\" [(model)]=\"query1\" placeholder=\"Filter\" />\n      </div>\n      <div class=\"border rounded-10\">\n        <table class=\"table\">\n          <thead>\n            <tr>\n              <th>{{ 'Column' | appTranslate | async }}</th>\n              <th>{{ 'Visible' | appTranslate | async }}</th>\n              <th>{{ 'Sticky' | appTranslate | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredAllFields(); track item.f) {\n              <tr>\n                <td scope=\"row\">\n                  {{ item.t | titlecase | appTranslate | async }}\n                </td>\n                <td>\n                  <mat-slide-toggle [(ngModel)]=\"item.active\"></mat-slide-toggle>\n                </td>\n                <td>\n                  @if (item.active) {\n                    <mat-slide-toggle [(ngModel)]=\"item.sticky\"></mat-slide-toggle>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    } @else {\n      <!-- <div>query2 {{ query2() }}</div>\n      <div class=\"\">\n        searchRef.valueSignal    {{ searchRef.valueSignal() }}\n      </div> -->\n      <div class=\"row row-cols-2\">\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Non-Selected Columns' | appTranslate | async }}\n          </div>\n          <!-- <div class=\"mb-2\">\n          <app-input-td-rf [(model)]=\"query\" placeholder=\"Filter\" />\n        </div> -->\n        <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n          <div class=\"row my-2 mx-0 justify-content-center\">\n            <div class=\"col-sm-10\">\n              <app-input-td-rf\n                #searchRef\n                [noFormat]=\"true\"\n                [(model)]=\"query2\"\n                [placeholder]=\"'Search by name' | appTranslate | async \"/>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-1 g-2\"\n            cdkDropList\n            #sourceList=\"cdkDropList\"\n            [cdkDropListData]=\"nonActiveFields()\"\n            cdkDropListSortingDisabled\n            [cdkDropListConnectedTo]=\"[destinationList]\"\n            (cdkDropListDropped)=\"drop($event)\">\n            @for (item of nonActiveFields(); track item.f; let i = $index) {\n              <div class=\"\" cdkDrag>\n                <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                <div class=\"border p-2 rounded-10 bg-white\">\n                  <div class=\"row row-cols-auto justify-content-between\">\n                    <div class=\"d-flex align-items-center\">\n                      <i\n                        cdkDragHandle\n                        matTooltip=\"Drag the icon to move the column to the selected columns group\"\n                        class=\"drag-cursor material-icons\">\n                        drag_handle\n                      </i>\n                      {{ (item.t | titlecase) | appTranslate | async }}\n                    </div>\n                    <div class=\"col-md-auto\">\n                      <div class=\"row\">\n                        @if (!uS.environment.production) {\n                          <div class=\"col-md-auto\">\n                            {{ item.type }}\n                          </div>\n                        }\n                        <!-- <div class=\"col-md-auto\">\n                        <app-input-td-rf [xsmall]=\"true\" [label]=\"'Is Number?'\"\n                          [stacked]=\"false\" type=\"checkbox\"\n                          (modelChange)=\"isNumType($event, item)\" />\n                      </div> -->\n                      <div class=\"col-md-auto\">\n                        <app-btn text=\"Select\" (mclick)=\"changeToActive(item)\" />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-primary f-600 mb-2\">\n        {{ 'Selected Columns' | appTranslate | async }}\n      </div>\n      <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n        <div\n          class=\"row row-cols-1 g-2\"\n          cdkDropList\n          #destinationList=\"cdkDropList\"\n          [cdkDropListData]=\"activeFields()\"\n          [cdkDropListConnectedTo]=\"[sourceList]\"\n          (cdkDropListDropped)=\"drop($event)\">\n          @for (item of activeFields(); track item.f; let i = $index) {\n            <div class=\"\" cdkDrag>\n              <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n              <div class=\"border p-2 rounded-10 bg-white\">\n                <div class=\"row row-cols-auto justify-content-between\">\n                  <div class=\"d-flex align-items-center\">\n                    <i\n                      cdkDragHandle\n                      matTooltip=\"Drag the icon to move the column to the non-selected columns group or re-order\"\n                      class=\"drag-cursor material-icons\">\n                      drag_handle\n                    </i>\n                    {{ (item.t | titlecase )| appTranslate | async }}\n                  </div>\n                  <div>\n                    @if (item.active) {\n                      <mat-slide-toggle [(ngModel)]=\"item.sticky\">\n                        {{ 'Sticky' | appTranslate | async }}\n                      </mat-slide-toggle>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n</div>\n<div class=\"w-100 pt-2 d-flex justify-content-end\" *modalFooter>\n  <app-btn text=\"Update Columns\" (mclick)=\"emitFieldsChanged(); acModal.close()\" />\n</div>\n</modal-comp>\n", styles: [".example-custom-placeholder{background:#ccc;border:dotted 3px #999;border-radius:var(--border-radius);min-height:42px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cage{height:calc(80vh - 215px)}\n"], dependencies: [{ 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: InputTD_RFComponent, selector: "app-input-td-rf", inputs: ["validators", "asyncValidators", "model"], outputs: ["modelChange"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: ResponsiveValPipe, name: "responsiveVal" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FieldsToDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fields-to-display', imports: [
                         BtnComponent,
-                        NgIf,
                         InputTD_RFComponent,
                         MatSlideToggleModule,
                         FormsModule,
@@ -17247,8 +17237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         TitleCasePipe,
                         ModalComponents,
                         ResponsiveValPipe,
-                        SDKTranslatePipe,
-                    ], providers: [FilterArrayByStringPipe], template: "<app-btn\n  type=\"outline\"\n  customIcon=\"fa fa-bars\"\n  iconPosition=\"right\"\n  text=\"Define Outputs\"\n  (mclick)=\"acModal.open()\" />\n<modal-comp\n  header=\"Arrange Columns\"\n  [width]=\"{ XLarge: '70%', Large: '80%' } | responsiveVal\"\n  height=\"80vh\"\n  #acModal>\n  <div *modalBody>\n    @if (uS.isMobileSignal()) {\n      <div class=\"mb-2\">\n        <app-input-td-rf [noFormat]=\"true\" [(model)]=\"query1\" placeholder=\"Filter\" />\n      </div>\n      <div class=\"border rounded-10\">\n        <table class=\"table\">\n          <thead>\n            <tr>\n              <th>{{ 'Column' | appTranslate | async }}</th>\n              <th>{{ 'Visible' | appTranslate | async }}</th>\n              <th>{{ 'Sticky' | appTranslate | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredAllFields(); track item.f) {\n              <tr>\n                <td scope=\"row\">\n                  {{ item.t | titlecase | appTranslate | async }}\n                </td>\n                <td>\n                  <mat-slide-toggle [(ngModel)]=\"item.active\"></mat-slide-toggle>\n                </td>\n                <td>\n                  @if (item.active) {\n                    <mat-slide-toggle [(ngModel)]=\"item.sticky\"></mat-slide-toggle>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    } @else {\n      <!-- <div>query2 {{ query2() }}</div>\n      <div class=\"\">\n        searchRef.valueSignal    {{ searchRef.valueSignal() }}\n      </div> -->\n      <div class=\"row row-cols-2\">\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Non-Selected Columns' | appTranslate | async }}\n          </div>\n          <!-- <div class=\"mb-2\">\n                        <app-input-td-rf [(model)]=\"query\" placeholder=\"Filter\" />\n                    </div> -->\n          <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n            <div class=\"row my-2 mx-0 justify-content-center\">\n              <div class=\"col-sm-10\">\n                <app-input-td-rf\n                  #searchRef\n                  [noFormat]=\"true\"\n                  [(model)]=\"query2\"\n                  [placeholder]=\"'Search by name' | appTranslate | async \"/>\n              </div>\n            </div>\n            <div\n              class=\"row row-cols-1 g-2\"\n              cdkDropList\n              #sourceList=\"cdkDropList\"\n              [cdkDropListData]=\"nonActiveFields()\"\n              cdkDropListSortingDisabled\n              [cdkDropListConnectedTo]=\"[destinationList]\"\n              (cdkDropListDropped)=\"drop($event)\">\n              @for (item of nonActiveFields(); track item.f; let i = $index) {\n                <div class=\"\" cdkDrag>\n                  <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"border p-2 rounded-10 bg-white\">\n                    <div class=\"row row-cols-auto justify-content-between\">\n                      <div class=\"d-flex align-items-center\">\n                        <i\n                          cdkDragHandle\n                          matTooltip=\"Drag the icon to move the column to the selected columns group\"\n                          class=\"drag-cursor material-icons\">\n                          drag_handle\n                        </i>\n                        {{ (item.t | titlecase) | appTranslate | async }}\n                      </div>\n                      <div class=\"col-md-auto\">\n                        <div class=\"row\">\n                          <div class=\"col-md-auto\" *ngIf=\"!uS.environment.production\">\n                            {{ item.type }}\n                          </div>\n                          <!-- <div class=\"col-md-auto\">\n                                                    <app-input-td-rf [xsmall]=\"true\" [label]=\"'Is Number?'\"\n                                                        [stacked]=\"false\" type=\"checkbox\"\n                                                        (modelChange)=\"isNumType($event, item)\" />\n                                                </div> -->\n                          <div class=\"col-md-auto\">\n                            <app-btn text=\"Select\" (mclick)=\"changeToActive(item)\" />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Selected Columns' | appTranslate | async }}\n          </div>\n          <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n            <div\n              class=\"row row-cols-1 g-2\"\n              cdkDropList\n              #destinationList=\"cdkDropList\"\n              [cdkDropListData]=\"activeFields()\"\n              [cdkDropListConnectedTo]=\"[sourceList]\"\n              (cdkDropListDropped)=\"drop($event)\">\n              @for (item of activeFields(); track item.f; let i = $index) {\n                <div class=\"\" cdkDrag>\n                  <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"border p-2 rounded-10 bg-white\">\n                    <div class=\"row row-cols-auto justify-content-between\">\n                      <div class=\"d-flex align-items-center\">\n                        <i\n                          cdkDragHandle\n                          matTooltip=\"Drag the icon to move the column to the non-selected columns group or re-order\"\n                          class=\"drag-cursor material-icons\">\n                          drag_handle\n                        </i>\n                        {{ (item.t | titlecase )| appTranslate | async }}\n                      </div>\n                      <div>\n                        <mat-slide-toggle *ngIf=\"item.active\" [(ngModel)]=\"item.sticky\">\n                          {{ 'Sticky' | appTranslate | async }}\n                        </mat-slide-toggle>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"w-100 pt-2 d-flex justify-content-end\" *modalFooter>\n    <app-btn text=\"Update Columns\" (mclick)=\"emitFieldsChanged(); acModal.close()\" />\n  </div>\n</modal-comp>\n", styles: [".example-custom-placeholder{background:#ccc;border:dotted 3px #999;border-radius:var(--border-radius);min-height:42px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cage{height:calc(80vh - 215px)}\n"] }]
+                        SDKTranslatePipe
+                    ], providers: [FilterArrayByStringPipe], template: "<app-btn\n  type=\"outline\"\n  customIcon=\"fa fa-bars\"\n  iconPosition=\"right\"\n  text=\"Define Outputs\"\n  (mclick)=\"acModal.open()\" />\n<modal-comp\n  header=\"Arrange Columns\"\n  [width]=\"{ XLarge: '70%', Large: '80%' } | responsiveVal\"\n  height=\"80vh\"\n  #acModal>\n  <div *modalBody>\n    @if (uS.isMobileSignal()) {\n      <div class=\"mb-2\">\n        <app-input-td-rf [noFormat]=\"true\" [(model)]=\"query1\" placeholder=\"Filter\" />\n      </div>\n      <div class=\"border rounded-10\">\n        <table class=\"table\">\n          <thead>\n            <tr>\n              <th>{{ 'Column' | appTranslate | async }}</th>\n              <th>{{ 'Visible' | appTranslate | async }}</th>\n              <th>{{ 'Sticky' | appTranslate | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredAllFields(); track item.f) {\n              <tr>\n                <td scope=\"row\">\n                  {{ item.t | titlecase | appTranslate | async }}\n                </td>\n                <td>\n                  <mat-slide-toggle [(ngModel)]=\"item.active\"></mat-slide-toggle>\n                </td>\n                <td>\n                  @if (item.active) {\n                    <mat-slide-toggle [(ngModel)]=\"item.sticky\"></mat-slide-toggle>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    } @else {\n      <!-- <div>query2 {{ query2() }}</div>\n      <div class=\"\">\n        searchRef.valueSignal    {{ searchRef.valueSignal() }}\n      </div> -->\n      <div class=\"row row-cols-2\">\n        <div>\n          <div class=\"text-primary f-600 mb-2\">\n            {{ 'Non-Selected Columns' | appTranslate | async }}\n          </div>\n          <!-- <div class=\"mb-2\">\n          <app-input-td-rf [(model)]=\"query\" placeholder=\"Filter\" />\n        </div> -->\n        <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n          <div class=\"row my-2 mx-0 justify-content-center\">\n            <div class=\"col-sm-10\">\n              <app-input-td-rf\n                #searchRef\n                [noFormat]=\"true\"\n                [(model)]=\"query2\"\n                [placeholder]=\"'Search by name' | appTranslate | async \"/>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-1 g-2\"\n            cdkDropList\n            #sourceList=\"cdkDropList\"\n            [cdkDropListData]=\"nonActiveFields()\"\n            cdkDropListSortingDisabled\n            [cdkDropListConnectedTo]=\"[destinationList]\"\n            (cdkDropListDropped)=\"drop($event)\">\n            @for (item of nonActiveFields(); track item.f; let i = $index) {\n              <div class=\"\" cdkDrag>\n                <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n                <div class=\"border p-2 rounded-10 bg-white\">\n                  <div class=\"row row-cols-auto justify-content-between\">\n                    <div class=\"d-flex align-items-center\">\n                      <i\n                        cdkDragHandle\n                        matTooltip=\"Drag the icon to move the column to the selected columns group\"\n                        class=\"drag-cursor material-icons\">\n                        drag_handle\n                      </i>\n                      {{ (item.t | titlecase) | appTranslate | async }}\n                    </div>\n                    <div class=\"col-md-auto\">\n                      <div class=\"row\">\n                        @if (!uS.environment.production) {\n                          <div class=\"col-md-auto\">\n                            {{ item.type }}\n                          </div>\n                        }\n                        <!-- <div class=\"col-md-auto\">\n                        <app-input-td-rf [xsmall]=\"true\" [label]=\"'Is Number?'\"\n                          [stacked]=\"false\" type=\"checkbox\"\n                          (modelChange)=\"isNumType($event, item)\" />\n                      </div> -->\n                      <div class=\"col-md-auto\">\n                        <app-btn text=\"Select\" (mclick)=\"changeToActive(item)\" />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-primary f-600 mb-2\">\n        {{ 'Selected Columns' | appTranslate | async }}\n      </div>\n      <div class=\"border rounded-10 p-2 bg-light cage overflow-auto\">\n        <div\n          class=\"row row-cols-1 g-2\"\n          cdkDropList\n          #destinationList=\"cdkDropList\"\n          [cdkDropListData]=\"activeFields()\"\n          [cdkDropListConnectedTo]=\"[sourceList]\"\n          (cdkDropListDropped)=\"drop($event)\">\n          @for (item of activeFields(); track item.f; let i = $index) {\n            <div class=\"\" cdkDrag>\n              <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n              <div class=\"border p-2 rounded-10 bg-white\">\n                <div class=\"row row-cols-auto justify-content-between\">\n                  <div class=\"d-flex align-items-center\">\n                    <i\n                      cdkDragHandle\n                      matTooltip=\"Drag the icon to move the column to the non-selected columns group or re-order\"\n                      class=\"drag-cursor material-icons\">\n                      drag_handle\n                    </i>\n                    {{ (item.t | titlecase )| appTranslate | async }}\n                  </div>\n                  <div>\n                    @if (item.active) {\n                      <mat-slide-toggle [(ngModel)]=\"item.sticky\">\n                        {{ 'Sticky' | appTranslate | async }}\n                      </mat-slide-toggle>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n</div>\n<div class=\"w-100 pt-2 d-flex justify-content-end\" *modalFooter>\n  <app-btn text=\"Update Columns\" (mclick)=\"emitFieldsChanged(); acModal.close()\" />\n</div>\n</modal-comp>\n", styles: [".example-custom-placeholder{background:#ccc;border:dotted 3px #999;border-radius:var(--border-radius);min-height:42px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cage{height:calc(80vh - 215px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _fields: [{
                 type: Input,
                 args: ['fields']
@@ -17279,7 +17269,7 @@ class InfoIconComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InfoIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-info-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgClass, MatTooltipModule, AsyncPipe, SDKTranslatePipe], template: "<span class=\"d-flex align-items-center\" [matTooltip]=\"text() | appTranslate | async\">\n  @if (left() && text()) {\n    <i class=\"fa fa-info-circle me-2\" [ngClass]=\"{ 'text-primary': coloured() }\"></i>\n  }\n  <span>\n    <ng-content></ng-content>\n  </span>\n  @if (!left() && text()) {\n    <i class=\"fa fa-info-circle ms-2\" [ngClass]=\"{ 'text-primary': coloured() }\"></i>\n  }\n</span>\n", styles: [":host{display:flex;min-height:10px;min-width:10px}\n"] }]
+            args: [{ selector: 'app-info-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, AsyncPipe, SDKTranslatePipe], template: "<span class=\"d-flex align-items-center\" [matTooltip]=\"text() | appTranslate | async\">\n  @if (left() && text()) {\n    <i class=\"fa fa-info-circle me-2\" [ngClass]=\"{ 'text-primary': coloured() }\"></i>\n  }\n  <span>\n    <ng-content></ng-content>\n  </span>\n  @if (!left() && text()) {\n    <i class=\"fa fa-info-circle ms-2\" [ngClass]=\"{ 'text-primary': coloured() }\"></i>\n  }\n</span>\n", styles: [":host{display:flex;min-height:10px;min-width:10px}\n"] }]
         }] });
 
 /**
@@ -17675,28 +17665,26 @@ class FormGeneratedValueComponent extends FormGeneratorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormGeneratedValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormGeneratedValueComponent, isStandalone: true, selector: "form-generated-value", providers: [ListOptionFinderPipe], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedListValue(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [name]=\"scheme.field\"\n                [showLabel]=\"false\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                #inputTag />\n            } \n            @default {\n              <div class=\"\">\n                <div class=\"text-primary\">\n                  {{ scheme.label }}\n                </div>\n                <div class=\" \">\n                  {{ scheme.formattedValue | valueOrX: '-' }}\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </form>\n</loader>\n\n<ng-template #labelValue let-obj>\n  <div class=\"\">\n    <div class=\"text-primary\">\n      {{ obj.scheme.label }}\n    </div>\n    <div class=\" \">\n      {{ formatValue | functionCaller2: obj.scheme : obj.value | valueOrX: '-' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep input:not([type=checkbox]),:host ::ng-deep .control-bg-gray.form-control,:host ::ng-deep textarea{border:none!important;background-color:transparent!important;padding:0!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormGeneratedValueComponent, isStandalone: true, selector: "form-generated-value", providers: [ListOptionFinderPipe], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedListValue(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [name]=\"scheme.field\"\n                [showLabel]=\"false\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                #inputTag />\n            } \n            @default {\n              <div class=\"\">\n                <div class=\"text-primary\">\n                  {{ scheme.label }}\n                </div>\n                <div class=\" \">\n                  {{ scheme.formattedValue | valueOrX: '-' }}\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </form>\n</loader>\n\n<ng-template #labelValue let-obj>\n  <div class=\"\">\n    <div class=\"text-primary\">\n      {{ obj.scheme.label }}\n    </div>\n    <div class=\" \">\n      {{ formatValue | functionCaller2: obj.scheme : obj.value | valueOrX: '-' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep input:not([type=checkbox]),:host ::ng-deep .control-bg-gray.form-control,:host ::ng-deep textarea{border:none!important;background-color:transparent!important;padding:0!important;height:auto!important}\n"], dependencies: [{ 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: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormGeneratedValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'form-generated-value', imports: [
                         AutocompleteComponent,
                         BtnComponent,
-                        CommonModule,
                         FormsModule,
                         FunctionCaller1,
                         FunctionCaller2,
                         InputBasicComponent,
                         ListOptionFinderPipe,
                         LoaderComponent,
-                        NgSwitchDefault,
                         NgTemplateOutlet,
                         PhoneNumberComponent,
                         StrConcatenatorPipe,
                         TextCase2Component,
                         ToAnyPipe,
                         ValidationMessageComponent,
-                        ValueOrXPipe,
+                        ValueOrXPipe
                     ], providers: [ListOptionFinderPipe], template: "<loader [loading]=\"computedLoading()\">\n  <form>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedListValue(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [name]=\"scheme.field\"\n                [showLabel]=\"false\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                #inputTag />\n            } \n            @default {\n              <div class=\"\">\n                <div class=\"text-primary\">\n                  {{ scheme.label }}\n                </div>\n                <div class=\" \">\n                  {{ scheme.formattedValue | valueOrX: '-' }}\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </form>\n</loader>\n\n<ng-template #labelValue let-obj>\n  <div class=\"\">\n    <div class=\"text-primary\">\n      {{ obj.scheme.label }}\n    </div>\n    <div class=\" \">\n      {{ formatValue | functionCaller2: obj.scheme : obj.value | valueOrX: '-' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep input:not([type=checkbox]),:host ::ng-deep .control-bg-gray.form-control,:host ::ng-deep textarea{border:none!important;background-color:transparent!important;padding:0!important;height:auto!important}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -17749,7 +17737,7 @@ class FormTabHeadersComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormTabHeadersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-tabs-header', imports: [NgFor, NgClass, AsyncPipe, SDKTranslatePipe], template: "<nav class=\"\">\n  <div class=\"nav nav-pills nav-justified  d-flex justify-content-center border-0\" id=\"nav-tab\" role=\"tablist\">\n    @for (tab of tabs; track tab; let index = $index) {\n  <button class=\"nav-link  border-0\"\n      [ngClass]=\"selectedIndex == index? 'active' : ''\" (click)=\"changeTab(index)\" type=\"button\" role=\"tab\"\n      aria-controls=\"nav-home\">{{tab.label|appTranslate|async}}\n    </button>\n}\n  </div>\n</nav>\n" }]
+            args: [{ selector: 'app-form-tabs-header', imports: [NgClass, AsyncPipe, SDKTranslatePipe], template: "<nav class=\"\">\n  <div class=\"nav nav-pills nav-justified  d-flex justify-content-center border-0\" id=\"nav-tab\" role=\"tablist\">\n    @for (tab of tabs; track tab; let index = $index) {\n  <button class=\"nav-link  border-0\"\n      [ngClass]=\"selectedIndex == index? 'active' : ''\" (click)=\"changeTab(index)\" type=\"button\" role=\"tab\"\n      aria-controls=\"nav-home\">{{tab.label|appTranslate|async}}\n    </button>\n}\n  </div>\n</nav>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedIndex: [{
                 type: Input
             }], tabs: [{
@@ -17827,7 +17815,7 @@ class InfoDialogComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InfoDialogComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MatButtonModule, NgFor, BtnComponent, AsyncPipe, SDKTranslatePipe], template: "<div class=\"d-flex justify-content-between align-items-center\">\n  <div class=\"text-{{ cls() }} ms-3 font-weight-bold text-uppercase\">\n    <i class=\"fa fa-{{ data?.status ? 'check-circle' : 'exclamation-circle' }}\"></i>\n    {{ data?.heading || 'Notice' | appTranslate | async }}\n  </div>\n  <button mat-icon-button (click)=\"yes()\" class=\"btn-outline-danger\">\n    <i class=\"material-icons\">close</i>\n  </button>\n</div>\n\n<div class=\"info-body\" [innerHTML]=\"data?.text | appTranslate | async\"></div>\n\n@if (data?.btns?.length) {\n  <div class=\"info-buttons\">\n    <div class=\"row justify-content-center\">\n      @for (item of data?.btns; track item) {\n        <div class=\"col-md-auto my-1\">\n          <app-btn\n            [type]=\"item.type || 'secondary'\"\n            text=\"{{ item.value || item.label }}\"\n            [icon]=\"item.icon\"\n            (mclick)=\"item.action($event); yes(item)\"></app-btn>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"bg-{{ cls() }} mt-2 rounded bar\"></div>\n", styles: [":host{text-align:center}:host .bar{height:5px}:host .info-body{overflow-wrap:anywhere;white-space:pre-line;padding:1rem}\n"] }]
+            args: [{ imports: [MatButtonModule, BtnComponent, AsyncPipe, SDKTranslatePipe], template: "<div class=\"d-flex justify-content-between align-items-center\">\n  <div class=\"text-{{ cls() }} ms-3 font-weight-bold text-uppercase\">\n    <i class=\"fa fa-{{ data?.status ? 'check-circle' : 'exclamation-circle' }}\"></i>\n    {{ data?.heading || 'Notice' | appTranslate | async }}\n  </div>\n  <button mat-icon-button (click)=\"yes()\" class=\"btn-outline-danger\">\n    <i class=\"material-icons\">close</i>\n  </button>\n</div>\n\n<div class=\"info-body\" [innerHTML]=\"data?.text | appTranslate | async\"></div>\n\n@if (data?.btns?.length) {\n  <div class=\"info-buttons\">\n    <div class=\"row justify-content-center\">\n      @for (item of data?.btns; track item) {\n        <div class=\"col-md-auto my-1\">\n          <app-btn\n            [type]=\"item.type || 'secondary'\"\n            text=\"{{ item.value || item.label }}\"\n            [icon]=\"item.icon\"\n            (mclick)=\"item.action($event); yes(item)\"></app-btn>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"bg-{{ cls() }} mt-2 rounded bar\"></div>\n", styles: [":host{text-align:center}:host .bar{height:5px}:host .info-body{overflow-wrap:anywhere;white-space:pre-line;padding:1rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -18019,17 +18007,12 @@ class InputNGModelComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputNGModelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-input-ngmodel', imports: [
-                        NgIf,
                         NgClass,
                         MatTooltipModule,
-                        NgSwitch,
-                        NgSwitchCase,
                         FormsModule,
-                        NgFor,
-                        NgSwitchDefault,
                         AsyncPipe,
                         InputClassPipe,
-                        SDKTranslatePipe,
+                        SDKTranslatePipe
                     ], template: "<div class=\"row align-items-center\">\n  @if (showLabel) {\n    <label\n      #labelEl\n      l\n      class=\"col-md-{{ stacked ? '12 pb-0' : mini ? 'auto' : lblCl }} m-0 \"\n      for=\"{{ id }}\"\n      [ngClass]=\"{\n        'text-primary': colored,\n        'py-2': theme == 1,\n        'form-label': theme == 2,\n        light: light,\n        small,\n        small1: xsmall,\n        'order-1': lblPosition == 'right'\n      }\">\n      {{ label | appTranslate | async }}\n    </label>\n  }\n  <div\n    class=\"position-relative\"\n    [ngClass]=\"{\n      'order-0': lblPosition == 'right',\n      'col-12': stacked,\n      'col-md': !stacked,\n      'col-md-auto': lblPosition == 'right'\n    }\"\n    [matTooltip]=\"hint()\">\n    @switch (type) {\n      <!-- CHECKBOX -->\n      @case ('checkbox') {\n        <input\n          type=\"checkbox\"\n          id=\"{{ id }}\"\n          [name]=\"name\"\n          [ngModel]=\"model\"\n          [disabled]=\"disabled\"\n          class=\"{{ inpCl }} d-inline-block form-control width-unset\"\n          placeholder=\"{{ placeholder }}\"\n          [required]=\"required\"\n          (ngModelChange)=\"change($event)\"\n          [checked]=\"checked\" />\n      }\n      <!-- FILE -->\n      @case ('file') {\n        <input\n          type=\"file\"\n          id=\"{{ id }}\"\n          [class]=\"inpCl | inputClass\"\n          (change)=\"upload($event)\"\n          (change)=\"change($event)\" />\n      }\n      <!-- SELECT -->\n      @case ('select') {\n        <select\n          [name]=\"name\"\n          [(ngModel)]=\"model\"\n          id=\"{{ id }}\"\n          class=\"mr-2\"\n          [class]=\"inpCl | inputClass\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          (change)=\"change($event)\">\n          @if (showEmptyOption) {\n            <option></option>\n          }\n          @for (item of options; track item._id) {\n            <option [ngValue]=\"item.value\">\n              <!-- {{item|optionLabeller:optionFormatter:labelType:labelField}} -->\n              {{ item.label }}\n            </option>\n          }\n        </select>\n      }\n      <!-- TEXTAREA -->\n      @case ('textarea') {\n        <textarea\n          [name]=\"name\"\n          [(ngModel)]=\"model\"\n          id=\"{{ id }}\"\n          [class]=\"inpCl | inputClass\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [readonly]=\"readonly\"\n          (change)=\"change($event)\"></textarea>\n      }\n      <!-- Radio -->\n      @case ('radio') {\n        <input\n          type=\"radio\"\n          [(ngModel)]=\"model\"\n          id=\"{{ id }}\"\n          [readonly]=\"readonly\"\n          (change)=\"change($event)\"\n          [disabled]=\"disabled\" />\n      }\n      <!-- Viewer -->\n      @case ('viewer') {\n        <input\n          type=\"text\"\n          id=\"{{ id }}\"\n          placeholder=\"{{ placeholder }}\"\n          [readonly]=\"true\"\n          [value]=\"model\"\n          [disabled]=\"disabled\" />\n      }\n\n      <!-- PASSWORD -->\n      @case ('password') {\n        <input\n          type=\"{{ showPassword ? 'text' : 'password' }}\"\n          [(ngModel)]=\"model\"\n          placeholder=\"{{ placeholder }}\"\n          [class]=\"inpCl | inputClass\"\n          id=\"{{ id }}\"\n          [required]=\"required\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (change)=\"change($event)\"\n          value=\"{{ __value }}\" />\n        <div class=\"password-icons pointer\" (click)=\"showPassword = !showPassword\">\n          @if (showPassword) {\n            <i class=\"fa fa-eye-slash\"></i>\n          }\n          @if (!showPassword) {\n            <i class=\"fa fa-eye\"></i>\n          }\n        </div>\n      }\n\n      <!-- DEFAULT -->\n      @default {\n        <input\n          type=\"{{ type }}\"\n          id=\"{{ id }}\"\n          [name]=\"name\"\n          [(ngModel)]=\"model\"\n          placeholder=\"{{ placeholder }}\"\n          [class]=\"inpCl | inputClass\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [max]=\"max\"\n          [min]=\"min\"\n          [readonly]=\"readonly\"\n          (change)=\"change($event)\" />\n      }\n    }\n  </div>\n</div>\n", styles: [".checkmark{position:absolute;left:93%;top:12%;font-size:25px;color:#514ef5;display:block!important}.bordercheck{border:2px solid #514ef5;outline:0}.borderuncheck{border:2px solid red;outline:0}.uncheckmark{position:absolute;left:94%;top:12%;font-size:25px;color:red;display:block!important}.colored{color:#514ef5}.light{font-weight:500}input[type=checkbox]:checked{position:relative}label{min-height:32px!important}.password-icons{position:absolute;right:20px;top:17%}\n"] }]
         }], ctorParameters: () => [{ type: InputService }], propDecorators: { _value: [{
                 type: Input,
@@ -18173,7 +18156,7 @@ class ValidationMessageNgmodelComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ValidationMessageNgmodelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-validation-message-ngmodel', imports: [NgIf, AsyncPipe, SDKTranslatePipe], template: "<div class=\"text-danger\">\n  @if (isError) {\n<span >{{validation?.message|appTranslate|async}}</span>\n}\n</div>\n", styles: [".text-danger{height:25px;margin-top:5px;overflow:auto}\n"] }]
+            args: [{ selector: 'app-validation-message-ngmodel', imports: [AsyncPipe, SDKTranslatePipe], template: "<div class=\"text-danger\">\n  @if (isError) {\n<span >{{validation?.message|appTranslate|async}}</span>\n}\n</div>\n", styles: [".text-danger{height:25px;margin-top:5px;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.TitleCasePipe }], propDecorators: { isError: [{
                 type: Input
             }], validationKey: [{
@@ -18339,7 +18322,7 @@ class DayHourMinInputComponent extends InputBasicComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DayHourMinInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-day-hour-min-input', imports: [NgIf, InputLabelComponent, InputBasicComponent, ValidationMessageComponent, JsonPipe], template: "@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</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>requiredSignal: {{ requiredSignal() }}</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 class=\"\">subForm: {{ subFormValue() | json }}</div>\n}\n<div class=\"row\">\n  @if (showLabelSignal()) {\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]=\"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    <div class=\"row\">\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"days\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"days\"\n          [showValidation]=\"daysTag.invalidSignal()\"\n          #daysTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"hours\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"hours\"\n          [showValidation]=\"hoursTag.invalidSignal()\"\n          #hoursTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"mins\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"minutes\"\n          [showValidation]=\"minsTag.invalidSignal()\"\n          #minsTag />\n      </div>\n    </div>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n" }]
+            args: [{ selector: 'app-day-hour-min-input', imports: [InputLabelComponent, InputBasicComponent, ValidationMessageComponent, JsonPipe], template: "@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</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>requiredSignal: {{ requiredSignal() }}</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 class=\"\">subForm: {{ subFormValue() | json }}</div>\n}\n<div class=\"row\">\n  @if (showLabelSignal()) {\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]=\"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    <div class=\"row\">\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"days\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"days\"\n          [showValidation]=\"daysTag.invalidSignal()\"\n          #daysTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"hours\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"hours\"\n          [showValidation]=\"hoursTag.invalidSignal()\"\n          #hoursTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"mins\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"minutes\"\n          [showValidation]=\"minsTag.invalidSignal()\"\n          #minsTag />\n      </div>\n    </div>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { toMins: [{
                 type: Input
             }], mins: [{
@@ -18537,7 +18520,7 @@ class YearMonthTdRfComponent extends InputTD_RFComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: YearMonthTdRfComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-year-month-td-rf', imports: [NgIf, InputLabelComponent, InputTD_RFComponent], template: "<div class=\"row\">\n  @if (showLabelSignal()) {\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]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\"></app-input-label>\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row gx-2\">\n      <div class=\"col-md-6\">\n        <app-input-td-rf\n          [model]=\"yrModel\"\n          [endLabel]=\"miniSignal() ? 'yrs' : 'Years'\"\n          [endLabelTooltip]=\"miniSignal() ? 'Years' : null\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          (modelChange)=\"yrModelChange.emit($event)\"\n          type=\"number\"\n          [id]=\"idSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [showLabel]=\"false\"\n          [validators]=\"validators\"></app-input-td-rf>\n      </div>\n      <div class=\"col-md-6\">\n        <app-input-td-rf\n          [model]=\"mthModel\"\n          [endLabel]=\"miniSignal() ? 'mos' : 'Months'\"\n          [endLabelTooltip]=\"miniSignal() ? 'Months' : null\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          (modelChange)=\"mthModelChange.emit($event)\"\n          type=\"number\"\n          [id]=\"idSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [showLabel]=\"false\"\n          [validators]=\"validators\"></app-input-td-rf>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .form-control:not(input[type=checkbox].form-control){padding:10px 12px}\n"] }]
+            args: [{ selector: 'app-input-year-month-td-rf', imports: [InputLabelComponent, InputTD_RFComponent], template: "<div class=\"row\">\n  @if (showLabelSignal()) {\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]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\"></app-input-label>\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row gx-2\">\n      <div class=\"col-md-6\">\n        <app-input-td-rf\n          [model]=\"yrModel\"\n          [endLabel]=\"miniSignal() ? 'yrs' : 'Years'\"\n          [endLabelTooltip]=\"miniSignal() ? 'Years' : null\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          (modelChange)=\"yrModelChange.emit($event)\"\n          type=\"number\"\n          [id]=\"idSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [showLabel]=\"false\"\n          [validators]=\"validators\"></app-input-td-rf>\n      </div>\n      <div class=\"col-md-6\">\n        <app-input-td-rf\n          [model]=\"mthModel\"\n          [endLabel]=\"miniSignal() ? 'mos' : 'Months'\"\n          [endLabelTooltip]=\"miniSignal() ? 'Months' : null\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          (modelChange)=\"mthModelChange.emit($event)\"\n          type=\"number\"\n          [id]=\"idSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [showLabel]=\"false\"\n          [validators]=\"validators\"></app-input-td-rf>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .form-control:not(input[type=checkbox].form-control){padding:10px 12px}\n"] }]
         }], propDecorators: { yrModel: [{
                 type: Input
             }], yrModelChange: [{
@@ -18610,7 +18593,7 @@ class LabelComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-label', imports: [NgIf, MatTooltipModule, FontAwesomeModule, NgClass, AsyncPipe, SDKTranslatePipe, SDKTranslateNoLoaderPipe], template: "<div class=\"d-flex align-items-center\">\n  @if (showHelpIcon && hint) {\n    <i class=\"fa fa-info-circle me-2 text-primary\" [matTooltip]=\"hint | appTranslateNL | async\"></i>\n  }\n  @if (iconPosition == 'left') {\n    <span>\n      @if (icon) {\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      }\n      @if (customIcon) {\n        <i class=\"pe-1\"></i>\n      }\n    </span>\n  }\n  <div\n    class=\"{{ mclass }} lbl\"\n    [ngClass]=\"{ 'fw-bold': !light, small, small1: xsmall, 'text-primary': coloured }\"\n    [innerHTML]=\"text | appTranslateNL | async\"\n    [matTooltip]=\"hint | appTranslateNL | async\"\n    [matTooltipDisabled]=\"!hint || showHelpIcon\"></div>\n  @if (iconPosition == 'right') {\n    <span class=\"ps-1\">\n      @if (icon) {\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      }\n    </span>\n  }\n</div>\n" }]
+            args: [{ selector: 'app-label', imports: [MatTooltipModule, FontAwesomeModule, NgClass, AsyncPipe, SDKTranslatePipe, SDKTranslateNoLoaderPipe], template: "<div class=\"d-flex align-items-center\">\n  @if (showHelpIcon && hint) {\n    <i class=\"fa fa-info-circle me-2 text-primary\" [matTooltip]=\"hint | appTranslateNL | async\"></i>\n  }\n  @if (iconPosition == 'left') {\n    <span>\n      @if (icon) {\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      }\n      @if (customIcon) {\n        <i class=\"pe-1\"></i>\n      }\n    </span>\n  }\n  <div\n    class=\"{{ mclass }} lbl\"\n    [ngClass]=\"{ 'fw-bold': !light, small, small1: xsmall, 'text-primary': coloured }\"\n    [innerHTML]=\"text | appTranslateNL | async\"\n    [matTooltip]=\"hint | appTranslateNL | async\"\n    [matTooltipDisabled]=\"!hint || showHelpIcon\"></div>\n  @if (iconPosition == 'right') {\n    <span class=\"ps-1\">\n      @if (icon) {\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      }\n    </span>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: BtnService }], propDecorators: { animate: [{
                 type: Input
             }], coloured: [{
@@ -18662,7 +18645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
     @if (loading) {
       <mat-spinner [diameter]="diameter">{{ text }}</mat-spinner>
     }
-  `, imports: [NgIf, MatProgressSpinnerModule], styles: [".mat-progress-spinner{display:inline-block;margin:5px;vertical-align:bottom}\n"] }]
+  `, imports: [MatProgressSpinnerModule], styles: [".mat-progress-spinner{display:inline-block;margin:5px;vertical-align:bottom}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], diameter: [{
@@ -18777,11 +18760,11 @@ class IndexCompLayoutComponent {
             this.router.navigate(['clone'], { relativeTo: this.route, queryParams: this.routeValue() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IndexCompLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: IndexCompLayoutComponent, isStandalone: true, selector: "index-comp-layout", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, hideClone: { classPropertyName: "hideClone", publicName: "hideClone", isSignal: true, isRequired: false, transformFunction: null }, hideShow: { classPropertyName: "hideShow", publicName: "hideShow", isSignal: true, isRequired: false, transformFunction: null }, hideEdit: { classPropertyName: "hideEdit", publicName: "hideEdit", isSignal: true, isRequired: false, transformFunction: null }, validateCreate: { classPropertyName: "validateCreate", publicName: "validateCreate", isSignal: true, isRequired: false, transformFunction: null }, createBtnText: { classPropertyName: "createBtnText", publicName: "createBtnText", isSignal: true, isRequired: false, transformFunction: null }, hideCreate: { classPropertyName: "hideCreate", publicName: "hideCreate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, routeValue: { classPropertyName: "routeValue", publicName: "routeValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "pipe", type: ResizeGridPipe, name: "resizeGrid" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: IndexCompLayoutComponent, isStandalone: true, selector: "index-comp-layout", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, hideClone: { classPropertyName: "hideClone", publicName: "hideClone", isSignal: true, isRequired: false, transformFunction: null }, hideShow: { classPropertyName: "hideShow", publicName: "hideShow", isSignal: true, isRequired: false, transformFunction: null }, hideEdit: { classPropertyName: "hideEdit", publicName: "hideEdit", isSignal: true, isRequired: false, transformFunction: null }, validateCreate: { classPropertyName: "validateCreate", publicName: "validateCreate", isSignal: true, isRequired: false, transformFunction: null }, createBtnText: { classPropertyName: "createBtnText", publicName: "createBtnText", isSignal: true, isRequired: false, transformFunction: null }, hideCreate: { classPropertyName: "hideCreate", publicName: "hideCreate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, routeValue: { classPropertyName: "routeValue", publicName: "routeValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "pipe", type: ResizeGridPipe, name: "resizeGrid" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IndexCompLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'index-comp-layout', imports: [CommonModule, BtnComponent, RouterModule, ResizeGridPipe, LoaderComponent], template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'index-comp-layout', imports: [BtnComponent, RouterModule, ResizeGridPipe, LoaderComponent], template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"] }]
         }] });
 
 /**
@@ -18930,11 +18913,11 @@ class RichTextEditorComponent {
         // );
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: RichTextEditorComponent, isStandalone: true, selector: "rich-text-editor", inputs: { enabled: "enabled", disabled: "disabled", form: "form", name: "name", content: "content" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "@if (form) {\n  <div [formGroup]=\"form\">\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        formControlName=\"{{ name }}\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n} @else {\n  <div>\n    <quill-editor\n      *ngIf=\"enabled\"\n      [modules]=\"modules\"\n      [(ngModel)]=\"content\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\"\n      (onEditorCreated)=\"addBindingCreated($event)\" />\n  </div>\n}\n<ng-template #elseTemplate>\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n</ng-template>\n\n@if (!enabled) {\n  <quill-view-html [content]=\"content\" theme=\"snow\" class=\"w-100\" />\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: RichTextEditorComponent, isStandalone: true, selector: "rich-text-editor", inputs: { enabled: "enabled", disabled: "disabled", form: "form", name: "name", content: "content" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "@if (form) {\n  <div [formGroup]=\"form\">\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        formControlName=\"{{ name }}\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n} @else {\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n}\n<ng-template #elseTemplate>\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n</ng-template>\n\n@if (!enabled) {\n  <quill-view-html [content]=\"content\" theme=\"snow\" class=\"w-100\" />\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: 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: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rich-text-editor', imports: [CommonModule, QuillModule, ReactiveFormsModule, FormsModule], template: "@if (form) {\n  <div [formGroup]=\"form\">\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        formControlName=\"{{ name }}\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n} @else {\n  <div>\n    <quill-editor\n      *ngIf=\"enabled\"\n      [modules]=\"modules\"\n      [(ngModel)]=\"content\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\"\n      (onEditorCreated)=\"addBindingCreated($event)\" />\n  </div>\n}\n<ng-template #elseTemplate>\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n</ng-template>\n\n@if (!enabled) {\n  <quill-view-html [content]=\"content\" theme=\"snow\" class=\"w-100\" />\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"] }]
+            args: [{ selector: 'rich-text-editor', imports: [QuillModule, ReactiveFormsModule, FormsModule], template: "@if (form) {\n  <div [formGroup]=\"form\">\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        formControlName=\"{{ name }}\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n} @else {\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n}\n<ng-template #elseTemplate>\n  <div>\n    @if (enabled) {\n      <quill-editor\n        [modules]=\"modules\"\n        [(ngModel)]=\"content\"\n        theme=\"snow\"\n        class=\"w-100\"\n        (onContentChanged)=\"onContentChanged($event)\"\n        (onEditorCreated)=\"addBindingCreated($event)\" />\n    }\n  </div>\n</ng-template>\n\n@if (!enabled) {\n  <quill-view-html [content]=\"content\" theme=\"snow\" class=\"w-100\" />\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"] }]
         }], ctorParameters: () => [], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [QuillEditorComponent]
@@ -19088,11 +19071,11 @@ var notifications_component = /*#__PURE__*/Object.freeze({
 
 class PageCenterBodyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PageCenterBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PageCenterBodyComponent, isStandalone: true, selector: "page-center-body", ngImport: i0, template: "<div class=\"page-height center\">\n    <div class=\"w-100\">\n        <ng-content>\n\n        </ng-content>\n    </div>\n</div>", styles: [".page-height{height:calc(100vh - 245px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PageCenterBodyComponent, isStandalone: true, selector: "page-center-body", ngImport: i0, template: "<div class=\"page-height center\">\n    <div class=\"w-100\">\n        <ng-content>\n\n        </ng-content>\n    </div>\n</div>", styles: [".page-height{height:calc(100vh - 245px)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PageCenterBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'page-center-body', imports: [CommonModule], template: "<div class=\"page-height center\">\n    <div class=\"w-100\">\n        <ng-content>\n\n        </ng-content>\n    </div>\n</div>", styles: [".page-height{height:calc(100vh - 245px)}\n"] }]
+            args: [{ selector: 'page-center-body', imports: [], template: "<div class=\"page-height center\">\n    <div class=\"w-100\">\n        <ng-content>\n\n        </ng-content>\n    </div>\n</div>", styles: [".page-height{height:calc(100vh - 245px)}\n"] }]
         }] });
 
 /**
@@ -19565,11 +19548,11 @@ class PaginatorComponent {
         return this.pageSize() * this.pageIndex() + inViewIndex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", type: PaginatorComponent, isStandalone: true, selector: "paginator", inputs: { arrayLength: { classPropertyName: "arrayLength", publicName: "arrayLength", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, resetIndexFunc: { classPropertyName: "resetIndexFunc", publicName: "resetIndexFunc", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-paginator\n  #paginatorTag\n  [length]=\"arrayLength()\"\n  [pageSizeOptions]=\"pageSizeOptions()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"pageEvent($event)\"\n  showFirstLastButtons />\n<!-- {{paginatorTag.pageSizeOptions|json}} -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", type: PaginatorComponent, isStandalone: true, selector: "paginator", inputs: { arrayLength: { classPropertyName: "arrayLength", publicName: "arrayLength", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, resetIndexFunc: { classPropertyName: "resetIndexFunc", publicName: "resetIndexFunc", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-paginator\n  #paginatorTag\n  [length]=\"arrayLength()\"\n  [pageSizeOptions]=\"pageSizeOptions()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"pageEvent($event)\"\n  showFirstLastButtons />\n<!-- {{paginatorTag.pageSizeOptions|json}} -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'paginator', imports: [CommonModule, MatPaginatorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator\n  #paginatorTag\n  [length]=\"arrayLength()\"\n  [pageSizeOptions]=\"pageSizeOptions()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"pageEvent($event)\"\n  showFirstLastButtons />\n<!-- {{paginatorTag.pageSizeOptions|json}} -->\n" }]
+            args: [{ selector: 'paginator', imports: [MatPaginatorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator\n  #paginatorTag\n  [length]=\"arrayLength()\"\n  [pageSizeOptions]=\"pageSizeOptions()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"pageEvent($event)\"\n  showFirstLastButtons />\n<!-- {{paginatorTag.pageSizeOptions|json}} -->\n" }]
         }] });
 
 /**
@@ -19655,7 +19638,7 @@ class RowActionsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'row-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgClass, NgFor, BtnComponent], template: "@if (!isShow()) {\n  <div class=\"\" [ngClass]=\"{ 'd-flex': isHorizontal() }\">\n    @for (btn of btns(); track btn.icon+btn.type+btn.group) {\n      <div class=\"\" [ngClass]=\"{ 'mx-1': isHorizontal(), 'my-1': isVertical() }\">\n        <app-btn\n          [mini]=\"mini()\"\n          [iconBtn]=\"true\"\n          [icon]=\"btn.icon\"\n          [type]=\"btn.type\"\n          [group]=\"btn.group\"\n          (mclick)=\"btn.action(btnTag)\"\n          #btnTag\n          [showHelpIcon]=\"false\"\n          [help]=\"helpMap()?.[btn.extra]\"></app-btn>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'row-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, BtnComponent], template: "@if (!isShow()) {\n  <div class=\"\" [ngClass]=\"{ 'd-flex': isHorizontal() }\">\n    @for (btn of btns(); track btn.icon+btn.type+btn.group) {\n      <div class=\"\" [ngClass]=\"{ 'mx-1': isHorizontal(), 'my-1': isVertical() }\">\n        <app-btn\n          [mini]=\"mini()\"\n          [iconBtn]=\"true\"\n          [icon]=\"btn.icon\"\n          [type]=\"btn.type\"\n          [group]=\"btn.group\"\n          (mclick)=\"btn.action(btnTag)\"\n          #btnTag\n          [showHelpIcon]=\"false\"\n          [help]=\"helpMap()?.[btn.extra]\"></app-btn>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { _isVertical: [{
                 type: Input,
                 args: ['isVertical']
@@ -21820,11 +21803,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         MatTooltipModule,
                         MrouterLinkirective,
                         NgStyle,
-                        NgIf,
                         AsyncPipe,
                         SDKTranslatePipe,
                         SDKTranslateNoLoaderPipe,
-                        ValueFormatterPipe,
+                        ValueFormatterPipe
                     ], template: "<div class=\"{{stacked?'':'d-flex align-items-center'}} tc1 {{mclass}} \">\n  <div class=\"{{inverted?'val':lblClass}}   lbl\" [ngClass]=\"{'fw-bold':!light,small,small1:xsmall}\"\n    [matTooltip]=\"hint|appTranslateNL|async\">\n    {{lbl|appTranslateNL|async}}\n  </div>\n  <div class=\"{{!inverted?'val':lblClass}}  align-items-center d-flex justify-content-between\"\n    [ngClass]=\"{'px-1':!stacked}\">\n    <a [mrouterLink]=\"route\" [ngStyle]=\"valueNGStyle\">{{((val|valueFormatter:formatter)|async)||'-'}} @if (icon) {\n<i\n        class=\"{{icon}} {{!inverted?'val':lblClass}} ml-2\" (click)=\"action?action():null\"></i>\n}</a>\n  </div>\n</div>\n", styles: ["i{font-size:small}.lbl{font-weight:500}\n"] }]
         }], ctorParameters: () => [], propDecorators: { action: [{
                 type: Input
@@ -21869,7 +21851,7 @@ class TextCaseInputComponent extends TextCase2Component {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TextCaseInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'text-case-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltipModule, NgClass, MrouterLinkirective, NgIf, AsyncPipe, FunctionCaller1, SDKTranslatePipe, ValueFormatterPipe, ValueOrXPipe], template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{ stacked() ? '12 pb-0' : 'auto pe-0' }} m-0 hide-scroll-x\"\n    [ngClass]=\"{ 'text-primary': coloredLbl(), light: light(), 'overflow-x-auto': wrapLabel() }\">\n    {{ label() | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      <a\n        [isEmail]=\"isEmail()\"\n        [isPhone]=\"isPhone()\"\n        [mrouterLink]=\"computedRoute() | async\"\n        class=\"{{ !coloredVal() ? '' : 'text-primary' }} col-{{ !stacked() ? 'auto' : editable() ? '9' : '12' }} lbl-val\">\n        <div class=\"hide-scroll-x overflow-x-auto\" [innerHTML]=\"computedValueFormatter() | async | valueOrX: '-'\"></div>\n      </a>\n      @if (editable()) {\n        <div class=\"col-auto\">\n          <i (click)=\"action() ? action()(computedValue()) : null\" class=\"ps-1 pointer fas fa-pencil-alt {{ !coloredVal() ? '' : 'text-primary' }}\"></i>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".input-emulator{border:1px solid;background-color:#fff}\n"] }]
+            args: [{ selector: 'text-case-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltipModule, NgClass, MrouterLinkirective, AsyncPipe, FunctionCaller1, SDKTranslatePipe, ValueFormatterPipe, ValueOrXPipe], template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint()\"\n    class=\"col-md-{{ stacked() ? '12 pb-0' : 'auto pe-0' }} m-0 hide-scroll-x\"\n    [ngClass]=\"{ 'text-primary': coloredLbl(), light: light(), 'overflow-x-auto': wrapLabel() }\">\n    {{ label() | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      <a\n        [isEmail]=\"isEmail()\"\n        [isPhone]=\"isPhone()\"\n        [mrouterLink]=\"computedRoute() | async\"\n        class=\"{{ !coloredVal() ? '' : 'text-primary' }} col-{{ !stacked() ? 'auto' : editable() ? '9' : '12' }} lbl-val\">\n        <div class=\"hide-scroll-x overflow-x-auto\" [innerHTML]=\"computedValueFormatter() | async | valueOrX: '-'\"></div>\n      </a>\n      @if (editable()) {\n        <div class=\"col-auto\">\n          <i (click)=\"action() ? action()(computedValue()) : null\" class=\"ps-1 pointer fas fa-pencil-alt {{ !coloredVal() ? '' : 'text-primary' }}\"></i>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".input-emulator{border:1px solid;background-color:#fff}\n"] }]
         }] });
 
 class TextComponent {
@@ -22142,7 +22124,7 @@ class ViewFormButtonsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewFormButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'view-form-buttons', imports: [NgIf, BtnComponent, RouterLink], template: "@if (isShow()) {\n  <div class=\"d-lg-flex mt-4 {{ class() }}\">\n    <app-btn\n      text=\"Edit\"\n      routerLink=\"../edit\"\n      icon=\"edit\"\n      [queryParamsHandling]=\"'merge'\"\n      type=\"secondary\"></app-btn>\n    <span class=\"mx-1\"></span>\n    <app-btn\n      text=\"Clone\"\n      routerLink=\"../clone\"\n      icon=\"clone\"\n      [queryParamsHandling]=\"'merge'\"\n      type=\"secondary\"></app-btn>\n  </div>\n}\n" }]
+            args: [{ selector: 'view-form-buttons', imports: [BtnComponent, RouterLink], template: "@if (isShow()) {\n  <div class=\"d-lg-flex mt-4 {{ class() }}\">\n    <app-btn\n      text=\"Edit\"\n      routerLink=\"../edit\"\n      icon=\"edit\"\n      [queryParamsHandling]=\"'merge'\"\n      type=\"secondary\"></app-btn>\n    <span class=\"mx-1\"></span>\n    <app-btn\n      text=\"Clone\"\n      routerLink=\"../clone\"\n      icon=\"clone\"\n      [queryParamsHandling]=\"'merge'\"\n      type=\"secondary\"></app-btn>\n  </div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 class InputTableComponent {
@@ -22396,7 +22378,7 @@ class InputTableComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-table', imports: [LoaderComponent, NgIf, InputControlComponent, BtnComponent, NgClass, MatSortModule, NgFor, NgSwitch, NgSwitchCase, PhoneNumberComponent, ValidationMessageComponent, AutocompleteComponent, NgSwitchDefault, InputBasicComponent, AsyncPipe, FunctionCaller2, ToAnyPipe, SDKTranslatePipe], template: "<loader [loading]=\"loading\"> \n  <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n    <div class=\"overflow-auto position-relative\">\n      <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n      <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n        <thead>\n          <tr class=\"text-primary\">\n            @if (showSN) {\n            <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n            }\n            @for (item of schemas; track item) {\n\n            @if (!item.hidden) {\n            <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n              {{ item.label | appTranslate | async }}\n            </th>\n            }\n\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (\n          subForm of form.controls|toAny; track subFormTrackBy(si,\n          subForm); let si = $index) {\n          <tr [id]=\"subForm.value.__rowID\">\n            @if (showSN) {\n            <td>\n              <div class=\"center\">{{ si + 1 }}</div>\n            </td>\n            }\n            @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n            <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n              @switch (true) {\n              @case (scheme.type == 'tel') {\n\n              <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n                [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n                [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n                       cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag>\n              </app-phone-number>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @case (scheme.type == 'autocomplete') {\n\n              <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n                [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n                [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n                [options]=\"\n                       scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [hint]=\"scheme.hint\" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag></app-autocomplete>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @default {\n\n              <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n                [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n                [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n                [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n                [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n                [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n                (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n                          scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" />\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              }\n\n            </td>\n\n            }\n            <td>\n              <div class=\"d-flex justify-content-center\">\n                @if (showEditRow) {\n\n                <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n                <span class=\"mx-1\"></span>\n\n                }\n                <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n                @if (showAddRow) {\n\n                <span class=\"mx-1\"></span>\n                <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n                }\n              </div>\n            </td>\n          </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"openPage($event)\" aria-label=\"Select page\">\n    </mat-paginator> -->\n    <!-- <mat-paginator  [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n    showFirstLastButtons>\n  </mat-paginator> -->\n  </div>\n  @if (submitFunc) {\n  <div class=\"row align-items-center justify-content-end mt-3\">\n    <div class=\"col-auto d-flex\">\n      <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n      </app-btn>\n    </div>\n  </div>\n  }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"] }]
+            args: [{ selector: 'app-input-table', imports: [LoaderComponent, InputControlComponent, BtnComponent, NgClass, MatSortModule, PhoneNumberComponent, ValidationMessageComponent, AutocompleteComponent, InputBasicComponent, AsyncPipe, FunctionCaller2, ToAnyPipe, SDKTranslatePipe], template: "<loader [loading]=\"loading\"> \n  <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n    <div class=\"overflow-auto position-relative\">\n      <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n      <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n        <thead>\n          <tr class=\"text-primary\">\n            @if (showSN) {\n            <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n            }\n            @for (item of schemas; track item) {\n\n            @if (!item.hidden) {\n            <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n              {{ item.label | appTranslate | async }}\n            </th>\n            }\n\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (\n          subForm of form.controls|toAny; track subFormTrackBy(si,\n          subForm); let si = $index) {\n          <tr [id]=\"subForm.value.__rowID\">\n            @if (showSN) {\n            <td>\n              <div class=\"center\">{{ si + 1 }}</div>\n            </td>\n            }\n            @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n            <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n              @switch (true) {\n              @case (scheme.type == 'tel') {\n\n              <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n                [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n                [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n                       cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag>\n              </app-phone-number>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @case (scheme.type == 'autocomplete') {\n\n              <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n                [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n                [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n                [options]=\"\n                       scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [hint]=\"scheme.hint\" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag></app-autocomplete>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @default {\n\n              <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n                [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n                [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n                [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n                [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n                [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n                (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n                          scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" />\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              }\n\n            </td>\n\n            }\n            <td>\n              <div class=\"d-flex justify-content-center\">\n                @if (showEditRow) {\n\n                <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n                <span class=\"mx-1\"></span>\n\n                }\n                <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n                @if (showAddRow) {\n\n                <span class=\"mx-1\"></span>\n                <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n                }\n              </div>\n            </td>\n          </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"openPage($event)\" aria-label=\"Select page\">\n    </mat-paginator> -->\n    <!-- <mat-paginator  [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n    showFirstLastButtons>\n  </mat-paginator> -->\n  </div>\n  @if (submitFunc) {\n  <div class=\"row align-items-center justify-content-end mt-3\">\n    <div class=\"col-auto d-flex\">\n      <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n      </app-btn>\n    </div>\n  </div>\n  }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"] }]
         }], ctorParameters: () => [{ type: UtilityService }, { type: i0.ChangeDetectorRef }], propDecorators: { bordered: [{
                 type: Input
             }], ioFormatted: [{
@@ -24411,22 +24393,20 @@ class LoggerComponent {
         this.uS.notify('Downloaded');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoggerComponent, deps: [{ token: LoggerService }, { token: UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: LoggerComponent, isStandalone: true, selector: "app-logger", ngImport: i0, template: "<div class=\"container-fluid py-5\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"text-center text-primary mb-4\">\n      Logged Select Requests (Logs payloads smaller than {{ lS.maxPayloadSize }}kb)\n    </h3>\n    <div class=\"d-flex\">\n      <app-btn\n        help=\"Refresh\"\n        [showHelpIcon]=\"false\"\n        [iconBtn]=\"true\"\n        icon=\"renew\"\n        (mclick)=\"ngOnInit()\"></app-btn>\n    </div>\n  </div>\n  @if (this.lS.isAuthed()) {\n    <div class=\"\">\n      <table class=\"table border table-bordered\">\n        <thead>\n          <th></th>\n          <th width=\"30%\">Payload</th>\n          <th width=\"30%\">Response</th>\n          <th>Page Route</th>\n          <th>Endpoint</th>\n          <th>Files</th>\n          <th>Status</th>\n          <th>Time</th>\n          <th></th>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let item of logs(); let i = index; trackBy: trackByID\"\n            [ngClass]=\"{ failure: !item?.isSuccess, success: item?.isSuccess }\">\n            <!-- <td>{{item?.title}}</td> -->\n            <td>{{ i + 1 }}</td>\n            <td>\n              @if (item.reqPayloadTooLarge) {\n                Payload was too large to be logged\n              } @else {\n                <div class=\"payload\" PSBox>{{ item?.payload | json | trimText: 200 }}</div>\n              }\n            </td>\n            <td>\n              @if (item.resPayloadTooLarge) {\n                Payload was too large to be logged\n              } @else {\n                <div class=\"payload\" PSBox>\n                  {{ item?.response || item?.error | json | trimText: 200 }}\n                </div>\n              }\n            </td>\n            <td>\n              <a routerLink=\"{{ item.route }}\" target=\"_blank\">{{ item?.route }}</a>\n            </td>\n            <td>{{ item?.endpoint }}</td>\n            <td>\n              <div class=\"\">\n                <div class=\"\" *ngFor=\"let file of item?.files\">\n                  <div>Title: {{ file.title }}</div>\n                  <div>Size: {{ file.size }}</div>\n                  <div>Type: {{ file.type }}</div>\n                </div>\n              </div>\n            </td>\n            <td>{{ item?.isSuccess ? 'Success' : 'Failure' }}</td>\n            <td>{{ item?.time | date: 'long' }}</td>\n            <td>\n              <div class=\" \">\n                <app-btn\n                  icon=\"clone\"\n                  [cdkCopyToClipboard]=\"item?.payload | json\"\n                  (mclick)=\"copied()\"\n                  [iconBtn]=\"true\"\n                  type=\"outline\"\n                  help=\"Copy paylod to clipboard\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                <div class=\"my-1\"></div>\n                <app-btn\n                  icon=\"download\"\n                  [iconBtn]=\"true\"\n                  type=\"outline\"\n                  help=\"Download payload\"\n                  (mclick)=\"makeTextFile(item)\"\n                  [showHelpIcon]=\"false\"></app-btn>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <app-btn icon=\"lock\" type=\"secondary\" (click)=\"lock()\">Lock Logs</app-btn>\n    </div>\n  } @else {\n    <app-btn icon=\"unlock\" type=\"secondary\" (click)=\"ngOnInit()\">Unlock Logs</app-btn>\n  }\n</div>\n", styles: ["td{height:50px!important;overflow:auto!important}td{text-align:left!important}.failure{background-color:#fe9f9f}.success{background-color:#caffca}.payload{max-height:100px;position:relative}\n"], dependencies: [{ 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PSDirective, selector: "[PSBox]", inputs: ["PSBox", "PSBoxNoHorizontal", "PSBoxNoVertical"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3$3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TrimTextPipe, name: "trimText" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: LoggerComponent, isStandalone: true, selector: "app-logger", ngImport: i0, template: "<div class=\"container-fluid py-5\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"text-center text-primary mb-4\">\n      Logged Select Requests (Logs payloads smaller than {{ lS.maxPayloadSize }}kb)\n    </h3>\n    <div class=\"d-flex\">\n      <app-btn\n        help=\"Refresh\"\n        [showHelpIcon]=\"false\"\n        [iconBtn]=\"true\"\n        icon=\"renew\"\n      (mclick)=\"ngOnInit()\"></app-btn>\n    </div>\n  </div>\n  @if (this.lS.isAuthed()) {\n    <div class=\"\">\n      <table class=\"table border table-bordered\">\n        <thead>\n          <th></th>\n          <th width=\"30%\">Payload</th>\n          <th width=\"30%\">Response</th>\n          <th>Page Route</th>\n          <th>Endpoint</th>\n          <th>Files</th>\n          <th>Status</th>\n          <th>Time</th>\n          <th></th>\n        </thead>\n        <tbody>\n          @for (item of logs(); track trackByID(i, item); let i = $index) {\n            <tr\n              [ngClass]=\"{ failure: !item?.isSuccess, success: item?.isSuccess }\">\n              <!-- <td>{{item?.title}}</td> -->\n              <td>{{ i + 1 }}</td>\n              <td>\n                @if (item.reqPayloadTooLarge) {\n                  Payload was too large to be logged\n                } @else {\n                  <div class=\"payload\" PSBox>{{ item?.payload | json | trimText: 200 }}</div>\n                }\n              </td>\n              <td>\n                @if (item.resPayloadTooLarge) {\n                  Payload was too large to be logged\n                } @else {\n                  <div class=\"payload\" PSBox>\n                    {{ item?.response || item?.error | json | trimText: 200 }}\n                  </div>\n                }\n              </td>\n              <td>\n                <a routerLink=\"{{ item.route }}\" target=\"_blank\">{{ item?.route }}</a>\n              </td>\n              <td>{{ item?.endpoint }}</td>\n              <td>\n                <div class=\"\">\n                  @for (file of item?.files; track file) {\n                    <div class=\"\">\n                      <div>Title: {{ file.title }}</div>\n                      <div>Size: {{ file.size }}</div>\n                      <div>Type: {{ file.type }}</div>\n                    </div>\n                  }\n                </div>\n              </td>\n              <td>{{ item?.isSuccess ? 'Success' : 'Failure' }}</td>\n              <td>{{ item?.time | date: 'long' }}</td>\n              <td>\n                <div class=\" \">\n                  <app-btn\n                    icon=\"clone\"\n                    [cdkCopyToClipboard]=\"item?.payload | json\"\n                    (mclick)=\"copied()\"\n                    [iconBtn]=\"true\"\n                    type=\"outline\"\n                    help=\"Copy paylod to clipboard\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                  <div class=\"my-1\"></div>\n                  <app-btn\n                    icon=\"download\"\n                    [iconBtn]=\"true\"\n                    type=\"outline\"\n                    help=\"Download payload\"\n                    (mclick)=\"makeTextFile(item)\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <app-btn icon=\"lock\" type=\"secondary\" (click)=\"lock()\">Lock Logs</app-btn>\n    </div>\n  } @else {\n    <app-btn icon=\"unlock\" type=\"secondary\" (click)=\"ngOnInit()\">Unlock Logs</app-btn>\n  }\n</div>\n", styles: ["td{height:50px!important;overflow:auto!important}td{text-align:left!important}.failure{background-color:#fe9f9f}.success{background-color:#caffca}.payload{max-height:100px;position:relative}\n"], dependencies: [{ 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: "directive", type: PSDirective, selector: "[PSBox]", inputs: ["PSBox", "PSBoxNoHorizontal", "PSBoxNoVertical"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3$3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TrimTextPipe, name: "trimText" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-logger', imports: [
                         BtnComponent,
-                        NgIf,
-                        NgFor,
                         NgClass,
                         PSDirective,
                         RouterLink,
                         ClipboardModule,
                         JsonPipe,
                         DatePipe,
-                        TrimTextPipe,
-                    ], template: "<div class=\"container-fluid py-5\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"text-center text-primary mb-4\">\n      Logged Select Requests (Logs payloads smaller than {{ lS.maxPayloadSize }}kb)\n    </h3>\n    <div class=\"d-flex\">\n      <app-btn\n        help=\"Refresh\"\n        [showHelpIcon]=\"false\"\n        [iconBtn]=\"true\"\n        icon=\"renew\"\n        (mclick)=\"ngOnInit()\"></app-btn>\n    </div>\n  </div>\n  @if (this.lS.isAuthed()) {\n    <div class=\"\">\n      <table class=\"table border table-bordered\">\n        <thead>\n          <th></th>\n          <th width=\"30%\">Payload</th>\n          <th width=\"30%\">Response</th>\n          <th>Page Route</th>\n          <th>Endpoint</th>\n          <th>Files</th>\n          <th>Status</th>\n          <th>Time</th>\n          <th></th>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let item of logs(); let i = index; trackBy: trackByID\"\n            [ngClass]=\"{ failure: !item?.isSuccess, success: item?.isSuccess }\">\n            <!-- <td>{{item?.title}}</td> -->\n            <td>{{ i + 1 }}</td>\n            <td>\n              @if (item.reqPayloadTooLarge) {\n                Payload was too large to be logged\n              } @else {\n                <div class=\"payload\" PSBox>{{ item?.payload | json | trimText: 200 }}</div>\n              }\n            </td>\n            <td>\n              @if (item.resPayloadTooLarge) {\n                Payload was too large to be logged\n              } @else {\n                <div class=\"payload\" PSBox>\n                  {{ item?.response || item?.error | json | trimText: 200 }}\n                </div>\n              }\n            </td>\n            <td>\n              <a routerLink=\"{{ item.route }}\" target=\"_blank\">{{ item?.route }}</a>\n            </td>\n            <td>{{ item?.endpoint }}</td>\n            <td>\n              <div class=\"\">\n                <div class=\"\" *ngFor=\"let file of item?.files\">\n                  <div>Title: {{ file.title }}</div>\n                  <div>Size: {{ file.size }}</div>\n                  <div>Type: {{ file.type }}</div>\n                </div>\n              </div>\n            </td>\n            <td>{{ item?.isSuccess ? 'Success' : 'Failure' }}</td>\n            <td>{{ item?.time | date: 'long' }}</td>\n            <td>\n              <div class=\" \">\n                <app-btn\n                  icon=\"clone\"\n                  [cdkCopyToClipboard]=\"item?.payload | json\"\n                  (mclick)=\"copied()\"\n                  [iconBtn]=\"true\"\n                  type=\"outline\"\n                  help=\"Copy paylod to clipboard\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                <div class=\"my-1\"></div>\n                <app-btn\n                  icon=\"download\"\n                  [iconBtn]=\"true\"\n                  type=\"outline\"\n                  help=\"Download payload\"\n                  (mclick)=\"makeTextFile(item)\"\n                  [showHelpIcon]=\"false\"></app-btn>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <app-btn icon=\"lock\" type=\"secondary\" (click)=\"lock()\">Lock Logs</app-btn>\n    </div>\n  } @else {\n    <app-btn icon=\"unlock\" type=\"secondary\" (click)=\"ngOnInit()\">Unlock Logs</app-btn>\n  }\n</div>\n", styles: ["td{height:50px!important;overflow:auto!important}td{text-align:left!important}.failure{background-color:#fe9f9f}.success{background-color:#caffca}.payload{max-height:100px;position:relative}\n"] }]
+                        TrimTextPipe
+                    ], template: "<div class=\"container-fluid py-5\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"text-center text-primary mb-4\">\n      Logged Select Requests (Logs payloads smaller than {{ lS.maxPayloadSize }}kb)\n    </h3>\n    <div class=\"d-flex\">\n      <app-btn\n        help=\"Refresh\"\n        [showHelpIcon]=\"false\"\n        [iconBtn]=\"true\"\n        icon=\"renew\"\n      (mclick)=\"ngOnInit()\"></app-btn>\n    </div>\n  </div>\n  @if (this.lS.isAuthed()) {\n    <div class=\"\">\n      <table class=\"table border table-bordered\">\n        <thead>\n          <th></th>\n          <th width=\"30%\">Payload</th>\n          <th width=\"30%\">Response</th>\n          <th>Page Route</th>\n          <th>Endpoint</th>\n          <th>Files</th>\n          <th>Status</th>\n          <th>Time</th>\n          <th></th>\n        </thead>\n        <tbody>\n          @for (item of logs(); track trackByID(i, item); let i = $index) {\n            <tr\n              [ngClass]=\"{ failure: !item?.isSuccess, success: item?.isSuccess }\">\n              <!-- <td>{{item?.title}}</td> -->\n              <td>{{ i + 1 }}</td>\n              <td>\n                @if (item.reqPayloadTooLarge) {\n                  Payload was too large to be logged\n                } @else {\n                  <div class=\"payload\" PSBox>{{ item?.payload | json | trimText: 200 }}</div>\n                }\n              </td>\n              <td>\n                @if (item.resPayloadTooLarge) {\n                  Payload was too large to be logged\n                } @else {\n                  <div class=\"payload\" PSBox>\n                    {{ item?.response || item?.error | json | trimText: 200 }}\n                  </div>\n                }\n              </td>\n              <td>\n                <a routerLink=\"{{ item.route }}\" target=\"_blank\">{{ item?.route }}</a>\n              </td>\n              <td>{{ item?.endpoint }}</td>\n              <td>\n                <div class=\"\">\n                  @for (file of item?.files; track file) {\n                    <div class=\"\">\n                      <div>Title: {{ file.title }}</div>\n                      <div>Size: {{ file.size }}</div>\n                      <div>Type: {{ file.type }}</div>\n                    </div>\n                  }\n                </div>\n              </td>\n              <td>{{ item?.isSuccess ? 'Success' : 'Failure' }}</td>\n              <td>{{ item?.time | date: 'long' }}</td>\n              <td>\n                <div class=\" \">\n                  <app-btn\n                    icon=\"clone\"\n                    [cdkCopyToClipboard]=\"item?.payload | json\"\n                    (mclick)=\"copied()\"\n                    [iconBtn]=\"true\"\n                    type=\"outline\"\n                    help=\"Copy paylod to clipboard\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                  <div class=\"my-1\"></div>\n                  <app-btn\n                    icon=\"download\"\n                    [iconBtn]=\"true\"\n                    type=\"outline\"\n                    help=\"Download payload\"\n                    (mclick)=\"makeTextFile(item)\"\n                  [showHelpIcon]=\"false\"></app-btn>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <app-btn icon=\"lock\" type=\"secondary\" (click)=\"lock()\">Lock Logs</app-btn>\n    </div>\n  } @else {\n    <app-btn icon=\"unlock\" type=\"secondary\" (click)=\"ngOnInit()\">Unlock Logs</app-btn>\n  }\n</div>\n", styles: ["td{height:50px!important;overflow:auto!important}td{text-align:left!important}.failure{background-color:#fe9f9f}.success{background-color:#caffca}.payload{max-height:100px;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: LoggerService }, { type: UtilityService }] });
 
 const routes$5 = [{ path: '', component: LoggerComponent }];
@@ -24474,11 +24454,11 @@ class ETSPageNotFoundComponent {
         this.uS.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ETSPageNotFoundComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: UtilityService }, { token: i3$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ETSPageNotFoundComponent, isStandalone: true, selector: "app-page-not-found", ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center\" id=\"main\" style=\"height: 80vh\">\n  <div class=\"text-center\">\n    <div class=\"d-md-flex justify-content-center align-items-center\">\n      <h1\n        class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n        style=\"border-right: 1px solid gray\"\n        *ngIf=\"!uS.isMobileSignal()\">\n        {{ config()?.status || '404' | appTranslate | async }}\n      </h1>\n      <h1\n        class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n        *ngIf=\"uS.isMobileSignal()\">\n        {{ config()?.status || '404' | appTranslate | async }}\n      </h1>\n      <div class=\"inline-block align-middle\">\n        <h2\n          class=\"font-weight-normal lead\"\n          id=\"desc\"\n          [innerHTML]=\"\n            configMessage() || 'The page you requested was not found.' | appTranslate | async\n          \"></h2>\n      </div>\n    </div>\n    @if (!config().hideButtons) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn text=\"Go Back\" (mclick)=\"back()\" type=\"dark-outline\" icon=\"previous\" />\n        <span class=\"mx-1\"></span>\n        <app-btn text=\"Home\" routerLink=\"/\" type=\"dark\" icon=\"home\" />\n      </div>\n    }\n    @if (configBtn()) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn\n          [text]=\"configBtn().label\"\n          (click)=\"configBtn().action?.()\"\n          [type]=\"configBtn().type\"\n          [icon]=\"configBtn().icon\"\n          [customIcon]=\"configBtn().customIcon\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ETSPageNotFoundComponent, isStandalone: true, selector: "app-page-not-found", ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center\" id=\"main\" style=\"height: 80vh\">\n  <div class=\"text-center\">\n    <div class=\"d-md-flex justify-content-center align-items-center\">\n      @if (!uS.isMobileSignal()) {\n        <h1\n          class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n          style=\"border-right: 1px solid gray\"\n          >\n          {{ config()?.status || '404' | appTranslate | async }}\n        </h1>\n      }\n      @if (uS.isMobileSignal()) {\n        <h1\n          class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n          >\n          {{ config()?.status || '404' | appTranslate | async }}\n        </h1>\n      }\n      <div class=\"inline-block align-middle\">\n        <h2\n          class=\"font-weight-normal lead\"\n          id=\"desc\"\n          [innerHTML]=\"\n            configMessage() || 'The page you requested was not found.' | appTranslate | async\n          \"></h2>\n      </div>\n    </div>\n    @if (!config().hideButtons) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn text=\"Go Back\" (mclick)=\"back()\" type=\"dark-outline\" icon=\"previous\" />\n        <span class=\"mx-1\"></span>\n        <app-btn text=\"Home\" routerLink=\"/\" type=\"dark\" icon=\"home\" />\n      </div>\n    }\n    @if (configBtn()) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn\n          [text]=\"configBtn().label\"\n          (click)=\"configBtn().action?.()\"\n          [type]=\"configBtn().type\"\n          [icon]=\"configBtn().icon\"\n          [customIcon]=\"configBtn().customIcon\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ETSPageNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-not-found', imports: [BtnComponent, RouterLink, CommonModule, SDKTranslatePipe], template: "<div class=\"d-flex justify-content-center align-items-center\" id=\"main\" style=\"height: 80vh\">\n  <div class=\"text-center\">\n    <div class=\"d-md-flex justify-content-center align-items-center\">\n      <h1\n        class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n        style=\"border-right: 1px solid gray\"\n        *ngIf=\"!uS.isMobileSignal()\">\n        {{ config()?.status || '404' | appTranslate | async }}\n      </h1>\n      <h1\n        class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n        *ngIf=\"uS.isMobileSignal()\">\n        {{ config()?.status || '404' | appTranslate | async }}\n      </h1>\n      <div class=\"inline-block align-middle\">\n        <h2\n          class=\"font-weight-normal lead\"\n          id=\"desc\"\n          [innerHTML]=\"\n            configMessage() || 'The page you requested was not found.' | appTranslate | async\n          \"></h2>\n      </div>\n    </div>\n    @if (!config().hideButtons) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn text=\"Go Back\" (mclick)=\"back()\" type=\"dark-outline\" icon=\"previous\" />\n        <span class=\"mx-1\"></span>\n        <app-btn text=\"Home\" routerLink=\"/\" type=\"dark\" icon=\"home\" />\n      </div>\n    }\n    @if (configBtn()) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn\n          [text]=\"configBtn().label\"\n          (click)=\"configBtn().action?.()\"\n          [type]=\"configBtn().type\"\n          [icon]=\"configBtn().icon\"\n          [customIcon]=\"configBtn().customIcon\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'app-page-not-found', imports: [BtnComponent, RouterLink, CommonModule, SDKTranslatePipe], template: "<div class=\"d-flex justify-content-center align-items-center\" id=\"main\" style=\"height: 80vh\">\n  <div class=\"text-center\">\n    <div class=\"d-md-flex justify-content-center align-items-center\">\n      @if (!uS.isMobileSignal()) {\n        <h1\n          class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n          style=\"border-right: 1px solid gray\"\n          >\n          {{ config()?.status || '404' | appTranslate | async }}\n        </h1>\n      }\n      @if (uS.isMobileSignal()) {\n        <h1\n          class=\"m-3 p-3 align-top border-right inline-block align-content-center\"\n          >\n          {{ config()?.status || '404' | appTranslate | async }}\n        </h1>\n      }\n      <div class=\"inline-block align-middle\">\n        <h2\n          class=\"font-weight-normal lead\"\n          id=\"desc\"\n          [innerHTML]=\"\n            configMessage() || 'The page you requested was not found.' | appTranslate | async\n          \"></h2>\n      </div>\n    </div>\n    @if (!config().hideButtons) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn text=\"Go Back\" (mclick)=\"back()\" type=\"dark-outline\" icon=\"previous\" />\n        <span class=\"mx-1\"></span>\n        <app-btn text=\"Home\" routerLink=\"/\" type=\"dark\" icon=\"home\" />\n      </div>\n    }\n    @if (configBtn()) {\n      <div class=\"{{ btnCaseClass() }}\">\n        <app-btn\n          [text]=\"configBtn().label\"\n          (click)=\"configBtn().action?.()\"\n          [type]=\"configBtn().type\"\n          [icon]=\"configBtn().icon\"\n          [customIcon]=\"configBtn().customIcon\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: UtilityService }, { type: i3$4.DomSanitizer }] });
 const pageErrorRouter = (config) => {
     const _route = {
@@ -25242,22 +25222,22 @@ var reset_module = /*#__PURE__*/Object.freeze({
     ETSResetModule: ETSResetModule
 });
 
-const ServiceFunction = new InjectionToken('Used to inject functions into a service');
-
 class VersionService {
-    constructor(sS, serviceFunctions) {
+    constructor(sS) {
         this.sS = sS;
-        this.serviceFunctions = serviceFunctions;
-        this.currentVersion = '0.2';
+        this.currentVersion = environment.versionNo;
         this.storageKey = 'versionKey';
+        this.logoutTrigger$ = new Subject();
         this.checkCurrentVersion();
     }
     checkCurrentVersion() {
         const localVersion = this.getLocalVersion();
         if (localVersion && localVersion != this.currentVersion) {
             this.setLocalVersion();
-            if (this.serviceFunctions.logout)
-                this.serviceFunctions.logout();
+            this.logoutTrigger$.next({
+                newVersionNumber: this.currentVersion,
+                oldVersionNumber: localVersion,
+            });
         }
         else {
             this.setLocalVersion();
@@ -25269,7 +25249,7 @@ class VersionService {
     setLocalVersion() {
         this.sS.saveItem(this.storageKey, this.currentVersion);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionService, deps: [{ token: ETSStorageService }, { token: ServiceFunction }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionService, deps: [{ token: ETSStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionService, decorators: [{
@@ -25277,10 +25257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ETSStorageService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ServiceFunction]
-                }] }] });
+        }], ctorParameters: () => [{ type: ETSStorageService }] });
 
 class VersionComponent {
     constructor(vS) {
@@ -25292,11 +25269,11 @@ class VersionComponent {
         this.props.push({ label: 'App Name', value: this.env.appName }, { label: 'Environment Name', value: this.env.name }, { label: 'Current Version', value: this.vS.currentVersion });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionComponent, deps: [{ token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: VersionComponent, isStandalone: true, selector: "version", ngImport: i0, template: "<div class=\"center vh-100\">\n    <ng-container *ngFor=\"let item of props\">\n      <text-case-2  [value]=\"item.value\" [label]=\"item.label\" [formatter]=\"item.formatter\" ></text-case-2>\n    </ng-container>\n    \n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextCase2Component, selector: "text-case-2", inputs: ["action", "name", "data", "coloredLbl", "coloredVal", "centered", "customValueTemplate", "formatter", "hint", "label", "light", "mini", "route", "routeFunc", "editable", "stacked", "type", "value", "wrapLabel", "isEmail", "isPhone"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: VersionComponent, isStandalone: true, selector: "version", ngImport: i0, template: "<div class=\"center vh-100\">\n  @for (item of props; track item) {\n    <text-case-2  [value]=\"item.value\" [label]=\"item.label\" [formatter]=\"item.formatter\" ></text-case-2>\n  }\n\n</div>", styles: [""], dependencies: [{ kind: "component", type: TextCase2Component, selector: "text-case-2", inputs: ["action", "name", "data", "coloredLbl", "coloredVal", "centered", "customValueTemplate", "formatter", "hint", "label", "light", "mini", "route", "routeFunc", "editable", "stacked", "type", "value", "wrapLabel", "isEmail", "isPhone"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VersionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'version', imports: [NgFor, TextCase2Component], template: "<div class=\"center vh-100\">\n    <ng-container *ngFor=\"let item of props\">\n      <text-case-2  [value]=\"item.value\" [label]=\"item.label\" [formatter]=\"item.formatter\" ></text-case-2>\n    </ng-container>\n    \n</div>" }]
+            args: [{ selector: 'version', imports: [TextCase2Component], template: "<div class=\"center vh-100\">\n  @for (item of props; track item) {\n    <text-case-2  [value]=\"item.value\" [label]=\"item.label\" [formatter]=\"item.formatter\" ></text-case-2>\n  }\n\n</div>" }]
         }], ctorParameters: () => [{ type: VersionService }] });
 
 const routes$2 = [{ path: '', component: VersionComponent }];
@@ -25375,16 +25352,15 @@ class TimeoutTesterComponent {
         this.loading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimeoutTesterComponent, deps: [{ token: ApiService }, { token: InfoDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: TimeoutTesterComponent, isStandalone: true, selector: "timeout-tester", ngImport: i0, template: "<div class=\"center\">\n  <div class=\"col-md-8\">\n    <!-- <app-input-basic [form]=\"form\" name=\"timeout\" label=\"Timeout Test Period\" hint=\"min\"></app-input-basic> -->\n    <app-btn [form]=\"form\"   text=\"Test\" class=\"mt-3\" (mclick)=\"submit()\"></app-btn>\n    <div class=\"row mt-3\">\n      <div class=\"col-md\">\n        <text-case-2 label=\"Start Time\" [value]=\"startTime|date:'long'\"></text-case-2>\n      </div>\n      <div class=\"col-md\" *ngIf=\"loading\">\n        <text-case-2 label=\"Elapsed Time (Seconds)\" [value]=\"elapsedTime|date:'m:s'\" ></text-case-2>\n        <text-case-2 label=\"Start Time\" [value]=\"elapsedTime\"></text-case-2>\n      </div>\n      <!-- <div class=\"col-md\">\n        <text-case-2 label=\"Expected End Time\" [value]=\"expectedEndTime|date:'long'\"></text-case-2>\n      </div>\n      <div class=\"col-md\">\n        <text-case-2 label=\"Actual End Time\" [value]=\"endTime|date:'long'\"></text-case-2>\n      </div> -->\n    </div>\n    <!-- <ng-container *ngIf=\"loading\">\n      <div class=\"mt-3\">{{value}}%</div>\n      <mat-progress-bar [value]=\"value\"></mat-progress-bar>\n    </ng-container> -->\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: TextCase2Component, selector: "text-case-2", inputs: ["action", "name", "data", "coloredLbl", "coloredVal", "centered", "customValueTemplate", "formatter", "hint", "label", "light", "mini", "route", "routeFunc", "editable", "stacked", "type", "value", "wrapLabel", "isEmail", "isPhone"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TimeoutTesterComponent, isStandalone: true, selector: "timeout-tester", ngImport: i0, template: "<div class=\"center\">\n  <div class=\"col-md-8\">\n    <!-- <app-input-basic [form]=\"form\" name=\"timeout\" label=\"Timeout Test Period\" hint=\"min\"></app-input-basic> -->\n    <app-btn [form]=\"form\"   text=\"Test\" class=\"mt-3\" (mclick)=\"submit()\"></app-btn>\n    <div class=\"row mt-3\">\n      <div class=\"col-md\">\n        <text-case-2 label=\"Start Time\" [value]=\"startTime|date:'long'\"></text-case-2>\n      </div>\n      @if (loading) {\n        <div class=\"col-md\">\n          <text-case-2 label=\"Elapsed Time (Seconds)\" [value]=\"elapsedTime|date:'m:s'\" ></text-case-2>\n          <text-case-2 label=\"Start Time\" [value]=\"elapsedTime\"></text-case-2>\n        </div>\n      }\n      <!-- <div class=\"col-md\">\n      <text-case-2 label=\"Expected End Time\" [value]=\"expectedEndTime|date:'long'\"></text-case-2>\n    </div>\n    <div class=\"col-md\">\n      <text-case-2 label=\"Actual End Time\" [value]=\"endTime|date:'long'\"></text-case-2>\n    </div> -->\n  </div>\n  <!-- <ng-container *ngIf=\"loading\">\n  <div class=\"mt-3\">{{value}}%</div>\n  <mat-progress-bar [value]=\"value\"></mat-progress-bar>\n</ng-container> -->\n</div>\n</div>\n", styles: [""], dependencies: [{ 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: TextCase2Component, selector: "text-case-2", inputs: ["action", "name", "data", "coloredLbl", "coloredVal", "centered", "customValueTemplate", "formatter", "hint", "label", "light", "mini", "route", "routeFunc", "editable", "stacked", "type", "value", "wrapLabel", "isEmail", "isPhone"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimeoutTesterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'timeout-tester', imports: [
                         BtnComponent,
                         TextCase2Component,
-                        NgIf,
-                        DatePipe,
-                    ], template: "<div class=\"center\">\n  <div class=\"col-md-8\">\n    <!-- <app-input-basic [form]=\"form\" name=\"timeout\" label=\"Timeout Test Period\" hint=\"min\"></app-input-basic> -->\n    <app-btn [form]=\"form\"   text=\"Test\" class=\"mt-3\" (mclick)=\"submit()\"></app-btn>\n    <div class=\"row mt-3\">\n      <div class=\"col-md\">\n        <text-case-2 label=\"Start Time\" [value]=\"startTime|date:'long'\"></text-case-2>\n      </div>\n      <div class=\"col-md\" *ngIf=\"loading\">\n        <text-case-2 label=\"Elapsed Time (Seconds)\" [value]=\"elapsedTime|date:'m:s'\" ></text-case-2>\n        <text-case-2 label=\"Start Time\" [value]=\"elapsedTime\"></text-case-2>\n      </div>\n      <!-- <div class=\"col-md\">\n        <text-case-2 label=\"Expected End Time\" [value]=\"expectedEndTime|date:'long'\"></text-case-2>\n      </div>\n      <div class=\"col-md\">\n        <text-case-2 label=\"Actual End Time\" [value]=\"endTime|date:'long'\"></text-case-2>\n      </div> -->\n    </div>\n    <!-- <ng-container *ngIf=\"loading\">\n      <div class=\"mt-3\">{{value}}%</div>\n      <mat-progress-bar [value]=\"value\"></mat-progress-bar>\n    </ng-container> -->\n  </div>\n</div>\n" }]
+                        DatePipe
+                    ], template: "<div class=\"center\">\n  <div class=\"col-md-8\">\n    <!-- <app-input-basic [form]=\"form\" name=\"timeout\" label=\"Timeout Test Period\" hint=\"min\"></app-input-basic> -->\n    <app-btn [form]=\"form\"   text=\"Test\" class=\"mt-3\" (mclick)=\"submit()\"></app-btn>\n    <div class=\"row mt-3\">\n      <div class=\"col-md\">\n        <text-case-2 label=\"Start Time\" [value]=\"startTime|date:'long'\"></text-case-2>\n      </div>\n      @if (loading) {\n        <div class=\"col-md\">\n          <text-case-2 label=\"Elapsed Time (Seconds)\" [value]=\"elapsedTime|date:'m:s'\" ></text-case-2>\n          <text-case-2 label=\"Start Time\" [value]=\"elapsedTime\"></text-case-2>\n        </div>\n      }\n      <!-- <div class=\"col-md\">\n      <text-case-2 label=\"Expected End Time\" [value]=\"expectedEndTime|date:'long'\"></text-case-2>\n    </div>\n    <div class=\"col-md\">\n      <text-case-2 label=\"Actual End Time\" [value]=\"endTime|date:'long'\"></text-case-2>\n    </div> -->\n  </div>\n  <!-- <ng-container *ngIf=\"loading\">\n  <div class=\"mt-3\">{{value}}%</div>\n  <mat-progress-bar [value]=\"value\"></mat-progress-bar>\n</ng-container> -->\n</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ApiService }, { type: InfoDialogService }] });
 
 const routes$1 = [{ path: '', component: TimeoutTesterComponent }];
@@ -25900,5 +25876,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseFormGenerator, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, InputComponents, InputControlComponent, InputFormatDirective, InputFormatService, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, NumberFormatService, NumberPipe, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, ReverseTranslateSingleNLPipe, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SDKTranslateSingleNoLoaderPipe, SDKTranslateSinglePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor, widthOffsetPipe };
+export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseFormGenerator, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, InputComponents, InputControlComponent, InputFormatDirective, InputFormatService, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, NumberFormatService, NumberPipe, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, ReverseTranslateSingleNLPipe, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SDKTranslateSingleNoLoaderPipe, SDKTranslateSinglePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VersionService, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor, widthOffsetPipe };
 //# sourceMappingURL=ets-fe-ng-sdk.mjs.map